//
//  CharacterSetupView.swift
//  lichunWebsocket
//
//  Character setup form for configuring player attributes
//

import SwiftUI

struct CharacterSetupView: View {
    @Binding var showConfirmation: Bool
    @Binding var name: String
    @Binding var age: Int
    @Binding var sex: String

    @State private var isLoaded = false
    @State private var showAgePicker = false
    @FocusState private var nameFieldFocused: Bool

    private var trimmedName: String {
        name.trimmingCharacters(in: .whitespacesAndNewlines)
    }

    var body: some View {
        ZStack {
            // Warm gradient background
            LinearGradient(
                colors: [
                    AppColors.background,
                    AppColors.background.lighter(by: 0.05)
                ],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .edgesIgnoringSafeArea(.all)

            ScrollView {
                VStack(spacing: AppSpacing.lg) {
                    // Header
                    VStack(spacing: AppSpacing.sm) {
                        Image(systemName: "person.crop.circle.fill.badge.plus")
                            .font(.system(size: 48))
                            .foregroundStyle(
                                LinearGradient(
                                    colors: [AppColors.primary, AppColors.accent],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                )
                            )
                            .shadow(color: AppColors.primary.opacity(0.3), radius: 12, x: 0, y: 4)
                            .opacity(isLoaded ? 1 : 0)
                            .scaleEffect(isLoaded ? 1 : 0.5)

                        Text("Create Your Character")
                            .font(.system(size: 30, weight: .bold, design: .rounded))
                            .foregroundColor(AppColors.primaryText)
                            .minimumScaleFactor(0.65)
                            .lineLimit(1)
                            .opacity(isLoaded ? 1 : 0)
                            .offset(y: isLoaded ? 0 : -20)

                        Text("Tell us about yourself")
                            .font(.appBody)
                            .foregroundColor(AppColors.secondaryText)
                            .opacity(isLoaded ? 1 : 0)
                    }
                    .padding(.top, AppSpacing.lg)

                    // Name input card
                    BaseCard(enableAnimation: true) {
                        VStack(alignment: .leading, spacing: AppSpacing.sm) {
                            HStack(spacing: AppSpacing.sm) {
                                Image(systemName: "character.cursor.ibeam")
                                    .foregroundStyle(
                                        LinearGradient(
                                            colors: [AppColors.primary, AppColors.accent],
                                            startPoint: .leading,
                                            endPoint: .trailing
                                        )
                                    )
                                    .font(.system(size: 18, weight: .semibold))

                                Text("What's your name?")
                                    .font(.appHeadline)
                                    .foregroundColor(AppColors.primaryText)
                            }

                            TextField("Enter your name", text: $name)
                                .font(.system(size: 18, weight: .medium, design: .rounded))
                                .foregroundColor(AppColors.primaryText)
                                .padding(AppSpacing.md)
                                .background(AppColors.background.opacity(0.5))
                                .cornerRadius(AppSpacing.cornerRadius)
                                .focused($nameFieldFocused)
                                .accessibilityLabel("Character name")
                        }
                    }
                    .opacity(isLoaded ? 1 : 0)
                    .offset(y: isLoaded ? 0 : 20)
                    .animation(.spring(response: 0.6, dampingFraction: 0.75).delay(0.1), value: isLoaded)

                    // Sex selection card
                    BaseCard(enableAnimation: true) {
                        VStack(alignment: .leading, spacing: AppSpacing.md) {
                            HStack(spacing: AppSpacing.sm) {
                                Image(systemName: "person.2.fill")
                                    .foregroundStyle(
                                        LinearGradient(
                                            colors: [AppColors.primary, AppColors.accent],
                                            startPoint: .leading,
                                            endPoint: .trailing
                                        )
                                    )
                                    .font(.system(size: 18, weight: .semibold))

                                Text("Select your gender")
                                    .font(.appHeadline)
                                    .foregroundColor(AppColors.primaryText)
                            }

                            HStack(spacing: AppSpacing.md) {
                                GenderButton(
                                    icon: "figure.stand",
                                    label: "Male",
                                    isSelected: sex == "Male"
                                ) {
                                    hapticFeedback(style: .light)
                                    withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
                                        sex = "Male"
                                    }
                                }

                                GenderButton(
                                    icon: "figure.stand.dress",
                                    label: "Female",
                                    isSelected: sex == "Female"
                                ) {
                                    hapticFeedback(style: .light)
                                    withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
                                        sex = "Female"
                                    }
                                }
                            }
                        }
                    }
                    .opacity(isLoaded ? 1 : 0)
                    .offset(y: isLoaded ? 0 : 20)
                    .animation(.spring(response: 0.6, dampingFraction: 0.75).delay(0.2), value: isLoaded)

                    // Age selection card
                    BaseCard(enableAnimation: true) {
                        VStack(alignment: .leading, spacing: AppSpacing.md) {
                            HStack(spacing: AppSpacing.sm) {
                                Image(systemName: "calendar.badge.clock")
                                    .foregroundStyle(
                                        LinearGradient(
                                            colors: [AppColors.primary, AppColors.accent],
                                            startPoint: .leading,
                                            endPoint: .trailing
                                        )
                                    )
                                    .font(.system(size: 18, weight: .semibold))

                                Text("Starting age")
                                    .font(.appHeadline)
                                    .foregroundColor(AppColors.primaryText)
                            }

                            Button(action: {
                                hapticFeedback(style: .light)
                                showAgePicker.toggle()
                            }) {
                                HStack {
                                    Text("\(age) years old")
                                        .font(.system(size: 18, weight: .medium, design: .rounded))
                                        .foregroundColor(AppColors.primaryText)

                                    Spacer()

                                    Image(systemName: "chevron.right")
                                        .foregroundColor(AppColors.secondaryText)
                                        .rotationEffect(.degrees(showAgePicker ? 90 : 0))
                                }
                                .padding(AppSpacing.md)
                                .background(AppColors.background.opacity(0.5))
                                .cornerRadius(AppSpacing.cornerRadius)
                            }

                            if showAgePicker {
                                Picker("Age", selection: $age) {
                                    ForEach(5..<100) { ageValue in
                                        Text("\(ageValue) years")
                                            .tag(ageValue)
                                    }
                                }
                                .pickerStyle(.wheel)
                                .frame(height: 150)
                                .transition(.opacity.combined(with: .scale))
                            }
                        }
                    }
                    .opacity(isLoaded ? 1 : 0)
                    .offset(y: isLoaded ? 0 : 20)
                    .animation(.spring(response: 0.6, dampingFraction: 0.75).delay(0.3), value: isLoaded)

                    // Preview card
                    BaseCard(
                        backgroundColor: AppColors.primary.opacity(0.15),
                        borderColor: AppColors.primary.opacity(0.3)
                    ) {
                        VStack(spacing: AppSpacing.sm) {
                            Text("Your Character")
                                .appCaptionStyle()
                                .textCase(.uppercase)
                                .kerning(1)

                            Text(name.isEmpty ? "..." : name)
                                .font(.system(size: 24, weight: .bold, design: .rounded))
                                .foregroundColor(AppColors.primaryText)

                            HStack(spacing: AppSpacing.md) {
                                Label("\(age) years", systemImage: "calendar")
                                    .font(.appCaption)
                                    .foregroundColor(AppColors.secondaryText)

                                Text("•")
                                    .foregroundColor(AppColors.secondaryText)

                                Label(sex, systemImage: sex == "Male" ? "figure.stand" : "figure.stand.dress")
                                    .font(.appCaption)
                                    .foregroundColor(AppColors.secondaryText)
                            }
                        }
                    }
                    .opacity(isLoaded ? 1 : 0)
                    .animation(.spring(response: 0.6, dampingFraction: 0.75).delay(0.4), value: isLoaded)

                    Spacer()
                        .frame(height: AppSpacing.xxl + AppSpacing.buttonHeight)
                }
                .padding(.horizontal, AppSpacing.xl)
            }
            .safeAreaInset(edge: .bottom) {
                PrimaryButton(
                    title: "Continue",
                    action: continueToConfirmation,
                    isDisabled: trimmedName.isEmpty
                )
                .opacity(isLoaded ? 1 : 0)
                .scaleEffect(isLoaded ? 1 : 0.9)
                .animation(.spring(response: 0.6, dampingFraction: 0.75).delay(0.5), value: isLoaded)
                .padding(.horizontal, AppSpacing.xl)
                .padding(.top, AppSpacing.sm)
                .padding(.bottom, AppSpacing.md)
                .background(
                    AppColors.background
                        .opacity(0.96)
                        .ignoresSafeArea(edges: .bottom)
                )
            }
        }
        .onAppear {
            withAnimation(.spring(response: 0.8, dampingFraction: 0.75)) {
                isLoaded = true
            }
            // Auto-focus the name field after a brief delay for better UX
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.8) {
                nameFieldFocused = true
            }
        }
    }

    private func continueToConfirmation() {
        name = trimmedName
        hapticFeedback(style: .medium)
        withAnimation(.spring(response: 0.6, dampingFraction: 0.75)) {
            showConfirmation = true
        }
    }
}

// MARK: - Supporting Views

private struct GenderButton: View {
    let icon: String
    let label: String
    let isSelected: Bool
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            VStack(spacing: AppSpacing.sm) {
                Image(systemName: icon)
                    .font(.system(size: 32))
                    .foregroundColor(isSelected ? .white : AppColors.primaryText)

                Text(label)
                    .font(.appBodyBold)
                    .foregroundColor(isSelected ? .white : AppColors.primaryText)
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, AppSpacing.md)
            .background(
                Group {
                    if isSelected {
                        LinearGradient(
                            colors: [AppColors.primary, AppColors.accent],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    } else {
                        AppColors.background.opacity(0.5)
                    }
                }
            )
            .cornerRadius(AppSpacing.cornerRadius)
            .overlay(
                RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                    .strokeBorder(
                        isSelected ? AppColors.primary : AppColors.cardBackground.lighter(by: 0.2),
                        lineWidth: isSelected ? 2 : 1
                    )
            )
            .shadow(
                color: isSelected ? AppColors.primary.opacity(0.4) : .clear,
                radius: isSelected ? 8 : 0,
                x: 0,
                y: 4
            )
        }
        .buttonStyle(SquishButtonStyle())
    }
}

// MARK: - Preview
#if DEBUG
struct CharacterSetupView_Previews: PreviewProvider {
    static var previews: some View {
        CharacterSetupView(
            showConfirmation: .constant(false),
            name: .constant("John Doe"),
            age: .constant(25),
            sex: .constant("Male")
        )
    }
}
#endif