//
//  ChatHeaderCard.swift
//  lichunWebsocket
//
//  Header card for chat view with character info and close button
//

import SwiftUI

struct ChatHeaderCard: View {
    @EnvironmentObject var webSocketService: WebSocketService

    let character: Person
    let isCompact: Bool
    let onDismiss: () -> Void
    var energyFlash: Binding<Bool>? = nil

    // Affinity animation state
    @State private var previousAffinity: Int = 0
    @State private var showAffinityDelta: Bool = false
    @State private var affinityDeltaValue: Int = 0
    @State private var affinityPulse: Bool = false

    init(character: Person, isCompact: Bool = false, onDismiss: @escaping () -> Void, energyFlash: Binding<Bool>? = nil) {
        self.character = character
        self.isCompact = isCompact
        self.onDismiss = onDismiss
        self.energyFlash = energyFlash
    }

    // MARK: - Computed Properties

    /// Formatted time string (e.g., "3:45pm")
    private var formattedTime: String {
        let hour = webSocketService.player.hourOfDay
        let minute = webSocketService.player.minuteOfHour
        let displayHour = hour % 12 == 0 ? 12 : hour % 12
        let period = hour >= 12 ? "pm" : "am"
        return String(format: "%d:%02d%@", displayHour, minute, period)
    }

    /// Day of week abbreviation (e.g., "Wed")
    private var dayOfWeek: String {
        if !webSocketService.player.date.isEmpty {
            let dateFormatter = DateFormatter()
            dateFormatter.dateFormat = "MM-dd"
            if let date = dateFormatter.date(from: webSocketService.player.date) {
                dateFormatter.dateFormat = "EEE"
                return dateFormatter.string(from: date)
            }
        }
        return ""
    }

    /// Season emoji based on current season
    private var seasonEmoji: String {
        switch webSocketService.player.season.lowercased() {
        case "winter": return "☃️"
        case "spring": return "🌼"
        case "summer": return "☀️"
        case "autumn", "fall": return "🍁"
        default: return ""
        }
    }

    private var affinityColor: Color {
        if character.affinity >= 80 {
            return AppColors.loveInterest
        } else if character.affinity >= 60 {
            return AppColors.friend
        } else if character.affinity >= 40 {
            return AppColors.family
        } else {
            return AppColors.secondaryText
        }
    }

    private var relationshipsText: String {
        character.relationships
            .map { $0.replacingOccurrences(of: "_", with: " ").capitalized }
            .joined(separator: ", ")
    }

    // MARK: - Body

    var body: some View {
        Group {
            if isCompact {
                compactHeader
            } else {
                fullHeader
            }
        }
        .animation(.spring(response: 0.3, dampingFraction: 0.8), value: isCompact)
    }

    // MARK: - Compact Header (keyboard open)

    private var compactHeader: some View {
        HStack(spacing: AppSpacing.sm) {
            // Close button (smaller)
            Button(action: onDismiss) {
                Image(systemName: "chevron.down.circle.fill")
                    .font(.system(size: 22))
                    .foregroundColor(AppColors.secondaryText)
            }
            .accessibilityLabel("Close conversation")

            // Tiny avatar (32x32)
            ZStack {
                Circle()
                    .fill(
                        LinearGradient(
                            colors: [affinityColor.opacity(0.25), AppColors.accent.opacity(0.25)],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .frame(width: 36, height: 36)

                CharacterAvatar(
                    person: character,
                    size: 32,
                    showBorder: false,
                    showGlow: false
                )
            }

            // Name only (no affinity)
            Text("\(character.firstname) \(character.lastname)")
                .font(.appBodyBold)
                .foregroundColor(AppColors.primaryText)
                .lineLimit(1)

            Spacer()

            // Time pill
            HStack(spacing: 3) {
                Image(systemName: "clock.fill")
                    .font(.system(size: 10))
                    .foregroundColor(AppColors.secondaryText)
                Text(formattedTime)
                    .font(.appCaption)
                    .foregroundColor(AppColors.secondaryText)
            }
            .padding(.horizontal, 8)
            .padding(.vertical, 4)
            .background(AppColors.surfaceSubtle)
            .cornerRadius(8)

            // Energy pill
            ResourcePill(
                icon: "bolt.fill",
                value: "\(webSocketService.person.calcEnergy)",
                color: AppColors.energy
            )
            .overlay(
                RoundedRectangle(cornerRadius: AppSpacing.smallCornerRadius)
                    .fill(AppColors.energy.opacity(energyFlash?.wrappedValue == true ? 0.3 : 0))
                    .animation(.easeOut(duration: 0.3), value: energyFlash?.wrappedValue)
            )
        }
        .padding(.horizontal, AppSpacing.md)
        .padding(.vertical, AppSpacing.sm)
        .background(AppColors.surfaceElevated)
    }

    // MARK: - Full Header (keyboard closed)

    private var fullHeader: some View {
        VStack(spacing: 0) {
            // Time + Resource bar
            HStack(spacing: AppSpacing.sm) {
                // Time + Season
                HStack(spacing: 4) {
                    Image(systemName: "clock.fill")
                        .font(.system(size: 11))
                        .foregroundColor(AppColors.secondaryText)
                    Text("\(dayOfWeek) \(formattedTime)")
                        .font(.appCaption)
                        .foregroundColor(AppColors.primaryText)
                    Text(seasonEmoji)
                        .font(.system(size: 12))
                }
                .padding(.horizontal, 10)
                .padding(.vertical, 6)
                .background(AppColors.surfaceElevated)
                .cornerRadius(10)

                Spacer()

                ResourcePill(
                    icon: "bolt.fill",
                    value: "\(webSocketService.person.calcEnergy)",
                    color: AppColors.energy
                )
                .overlay(
                    RoundedRectangle(cornerRadius: AppSpacing.smallCornerRadius)
                        .fill(AppColors.energy.opacity(energyFlash?.wrappedValue == true ? 0.3 : 0))
                        .animation(.easeOut(duration: 0.3), value: energyFlash?.wrappedValue)
                )

                ResourcePill(
                    icon: "gem.fill",
                    value: "\(webSocketService.person.diamonds)",
                    color: AppColors.diamond
                )

                ResourcePill(
                    icon: "dollarsign.circle.fill",
                    value: "$\(webSocketService.person.money)",
                    color: AppColors.money
                )
            }
            .padding(.horizontal, AppSpacing.md)
            .padding(.top, AppSpacing.md)
            .padding(.bottom, AppSpacing.sm)
            .background(AppColors.background)

            // Character info card
            BaseCard(
                backgroundColor: AppColors.surfaceElevated,
                borderColor: affinityColor.opacity(0.3),
                showShadow: true
            ) {
                HStack(spacing: AppSpacing.md) {
                    // Close button
                    Button(action: onDismiss) {
                        Image(systemName: "chevron.down.circle.fill")
                            .font(.system(size: 28))
                            .foregroundColor(AppColors.secondaryText)
                    }
                    .accessibilityLabel("Close conversation")

                    // Avatar with warm gradient border
                    CharacterAvatar(
                        person: character,
                        size: 50,
                        showBorder: true,
                        borderGradient: [affinityColor.opacity(0.5), AppColors.accent.opacity(0.4)],
                        showGlow: true
                    )

                    // Character details
                    VStack(alignment: .leading, spacing: 4) {
                        Text("\(character.firstname) \(character.lastname)")
                            .font(.appHeadline)
                            .foregroundColor(AppColors.primaryText)

                        HStack(spacing: 8) {
                            // Affinity indicator with pulse animation and floating delta
                            HStack(spacing: 4) {
                                Image(systemName: "heart.fill")
                                    .font(.system(size: 11))
                                    .foregroundColor(affinityColor)
                                    .scaleEffect(affinityPulse ? 1.4 : 1.0)
                                    .animation(.spring(response: 0.3, dampingFraction: 0.5), value: affinityPulse)

                                Text("\(character.affinity)")
                                    .font(.appCaption)
                                    .fontWeight(.semibold)
                                    .foregroundColor(affinityColor)
                                    .contentTransition(.numericText())

                                if showAffinityDelta {
                                    Text(affinityDeltaValue > 0 ? "+\(affinityDeltaValue)" : "\(affinityDeltaValue)")
                                        .font(.system(size: 10, weight: .bold))
                                        .foregroundColor(affinityDeltaValue > 0 ? .green : .red)
                                        .transition(.asymmetric(
                                            insertion: .scale.combined(with: .opacity),
                                            removal: .opacity
                                        ))
                                }
                            }
                            .onAppear {
                                previousAffinity = character.affinity
                            }
                            .onChange(of: character.affinity) { newValue in
                                let delta = newValue - previousAffinity
                                previousAffinity = newValue
                                if delta != 0 {
                                    affinityDeltaValue = delta
                                    withAnimation(.spring(response: 0.3)) {
                                        showAffinityDelta = true
                                        affinityPulse = true
                                    }
                                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                                        affinityPulse = false
                                    }
                                    DispatchQueue.main.asyncAfter(deadline: .now() + 2.0) {
                                        withAnimation(.easeOut(duration: 0.3)) {
                                            showAffinityDelta = false
                                        }
                                    }
                                }
                            }

                            // Relationship
                            if !relationshipsText.isEmpty {
                                Text("•")
                                    .font(.appCaption)
                                    .foregroundColor(AppColors.disabledText)

                                Text(relationshipsText)
                                    .font(.appCaption)
                                    .foregroundColor(AppColors.secondaryText)
                                    .lineLimit(1)
                            }
                        }
                    }

                    Spacer()
                }
            }
            .padding(.horizontal, AppSpacing.md)
            .padding(.bottom, AppSpacing.sm)
            .background(AppColors.background)
        }
        .background(AppColors.background)
    }
}

// MARK: - Preview
#Preview("Full Header") {
    let service = WebSocketService(urlSession: URLSession.shared, delegateQueue: OperationQueue())

    let person = Person()
    person.id = "1"
    person.firstname = "Emma"
    person.lastname = "Chen"
    person.image = "https://api.dicebear.com/7.x/avataaars/svg?seed=Emma"
    person.affinity = 85
    person.relationships = ["friend", "colleague"]

    service.person.calcEnergy = 65
    service.person.money = 1200
    service.person.diamonds = 25
    service.player.hourOfDay = 15
    service.player.minuteOfHour = 45
    service.player.date = "03-15"
    service.player.season = "spring"

    return ChatHeaderCard(character: person, isCompact: false, onDismiss: {})
        .environmentObject(service)
        .background(AppColors.background)
}

#Preview("Compact Header") {
    let service = WebSocketService(urlSession: URLSession.shared, delegateQueue: OperationQueue())

    let person = Person()
    person.id = "1"
    person.firstname = "Emma"
    person.lastname = "Chen"
    person.image = "https://api.dicebear.com/7.x/avataaars/svg?seed=Emma"
    person.affinity = 85
    person.relationships = ["friend", "colleague"]

    service.person.calcEnergy = 65
    service.person.money = 1200
    service.person.diamonds = 25
    service.player.hourOfDay = 15
    service.player.minuteOfHour = 45
    service.player.date = "03-15"
    service.player.season = "spring"

    return ChatHeaderCard(character: person, isCompact: true, onDismiss: {})
        .environmentObject(service)
        .background(AppColors.background)
}