//
//  PersonalitySection.swift
//  lichunWebsocket
//
//  Personality & Interests section with bio, traits, likes/dislikes
//

import SwiftUI

struct PersonalitySection: View {
    @ObservedObject var person: Person

    var body: some View {
        VStack(alignment: .leading, spacing: AppSpacing.lg) {
            // Bio card
            if !person.bio.isEmpty {
                bioCard
            }

            // Personality traits
            if !person.personalityTraits.isEmpty {
                traitsSection
            }

            // Likes
            if !person.likes.isEmpty {
                likesSection
            }

            // Dislikes
            if !person.dislikes.isEmpty {
                dislikesSection
            }

            // Interests
            if !person.interests.isEmpty {
                interestsSection
            }
        }
    }

    // MARK: - Bio Card

    private var bioCard: some View {
        VStack(alignment: .leading, spacing: AppSpacing.sm) {
            HStack(spacing: AppSpacing.xs) {
                Image(systemName: "quote.opening")
                    .font(.system(size: 14, weight: .semibold))
                    .foregroundColor(AppColors.primary)

                Text("About")
                    .font(.appCaptionBold)
                    .foregroundColor(AppColors.secondaryText)
            }

            Text(person.bio)
                .font(.appBody)
                .foregroundColor(AppColors.primaryText)
                .italic()
                .lineSpacing(4)
                .padding(AppSpacing.md)
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(
                    RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                        .fill(AppColors.surfaceElevated.opacity(0.5))
                )
        }
    }

    // MARK: - Traits Section

    private var traitsSection: some View {
        VStack(alignment: .leading, spacing: AppSpacing.sm) {
            HStack(spacing: AppSpacing.xs) {
                Image(systemName: "sparkles")
                    .font(.system(size: 14, weight: .semibold))
                    .foregroundColor(AppColors.accent)

                Text("Personality")
                    .font(.appCaptionBold)
                    .foregroundColor(AppColors.secondaryText)
            }

            FlowLayout(spacing: AppSpacing.xs) {
                ForEach(person.personalityTraits, id: \.self) { trait in
                    TraitChip(text: trait, color: AppColors.accent)
                }
            }
        }
    }

    // MARK: - Likes Section

    private var likesSection: some View {
        VStack(alignment: .leading, spacing: AppSpacing.sm) {
            HStack(spacing: AppSpacing.xs) {
                Image(systemName: "heart.fill")
                    .font(.system(size: 14, weight: .semibold))
                    .foregroundColor(Color.green)

                Text("Likes")
                    .font(.appCaptionBold)
                    .foregroundColor(AppColors.secondaryText)
            }

            FlowLayout(spacing: AppSpacing.xs) {
                ForEach(person.likes, id: \.self) { like in
                    TraitChip(text: like, color: Color.green)
                }
            }
        }
    }

    // MARK: - Dislikes Section

    private var dislikesSection: some View {
        VStack(alignment: .leading, spacing: AppSpacing.sm) {
            HStack(spacing: AppSpacing.xs) {
                Image(systemName: "hand.thumbsdown.fill")
                    .font(.system(size: 14, weight: .semibold))
                    .foregroundColor(Color.red)

                Text("Dislikes")
                    .font(.appCaptionBold)
                    .foregroundColor(AppColors.secondaryText)
            }

            FlowLayout(spacing: AppSpacing.xs) {
                ForEach(person.dislikes, id: \.self) { dislike in
                    TraitChip(text: dislike, color: Color.red)
                }
            }
        }
    }

    // MARK: - Interests Section

    private var interestsSection: some View {
        VStack(alignment: .leading, spacing: AppSpacing.sm) {
            HStack(spacing: AppSpacing.xs) {
                Image(systemName: "star.fill")
                    .font(.system(size: 14, weight: .semibold))
                    .foregroundColor(Color.yellow)

                Text("Interests")
                    .font(.appCaptionBold)
                    .foregroundColor(AppColors.secondaryText)
            }

            FlowLayout(spacing: AppSpacing.xs) {
                ForEach(person.interests, id: \.self) { interest in
                    InterestChip(interest: interest)
                }
            }
        }
    }
}

// MARK: - Trait Chip Component

private struct TraitChip: View {
    let text: String
    let color: Color

    var body: some View {
        Text(text.capitalized)
            .font(.appCaption)
            .foregroundColor(color)
            .padding(.horizontal, AppSpacing.sm)
            .padding(.vertical, AppSpacing.xs)
            .background(
                Capsule()
                    .fill(color.opacity(0.15))
            )
            .overlay(
                Capsule()
                    .strokeBorder(color.opacity(0.3), lineWidth: 1)
            )
    }
}

// MARK: - Interest Chip Component

private struct InterestChip: View {
    let interest: String

    var body: some View {
        HStack(spacing: AppSpacing.xs) {
            Text(interest.interestIcon())
                .font(.system(size: 12))

            Text(interest.capitalized)
                .font(.appCaption)
                .foregroundColor(AppColors.primaryText)
        }
        .padding(.horizontal, AppSpacing.sm)
        .padding(.vertical, AppSpacing.xs)
        .background(
            Capsule()
                .fill(AppColors.surfaceElevated)
        )
    }
}

// MARK: - Preview

#if DEBUG
struct PersonalitySection_Previews: PreviewProvider {
    static var previews: some View {
        let samplePerson = Person()
        samplePerson.id = "123"
        samplePerson.firstname = "Emma"
        samplePerson.bio = "I love exploring new places and meeting interesting people. Always up for an adventure!"
        samplePerson.personalityTraits = ["Adventurous", "Curious", "Empathetic", "Creative"]
        samplePerson.likes = ["hiking", "photography", "cooking", "travel"]
        samplePerson.dislikes = ["rudeness", "loud noises", "spiders"]
        samplePerson.interests = ["music", "art", "technology", "nature"]

        return ScrollView {
            PersonalitySection(person: samplePerson)
                .padding()
        }
        .background(AppColors.background)
    }
}
#endif