//
//  WelcomeView.swift
//  lichunWebsocket
//
//  Welcome screen for new players starting their BaoLife journey
//

import SwiftUI

struct WelcomeView: View {
    @State private var showCharacterSetup = false
    @State private var showConfirmation = false
    @State private var name: String = ""
    @State private var age: Int = 18
    @State private var sex: String = "Male"

    // Animation states
    @State private var isLoaded = false
    @State private var imageFloat = false
    @State private var imageBreathe = false
    @State private var glowPulse = false

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

            if showConfirmation {
                ConfirmationView(name: name, age: age, sex: sex)
                    .transition(.asymmetric(
                        insertion: .move(edge: .trailing).combined(with: .opacity),
                        removal: .move(edge: .leading).combined(with: .opacity)
                    ))
            } else if showCharacterSetup {
                CharacterSetupView(showConfirmation: $showConfirmation, name: $name, age: $age, sex: $sex)
                    .transition(.asymmetric(
                        insertion: .move(edge: .trailing).combined(with: .opacity),
                        removal: .move(edge: .leading).combined(with: .opacity)
                    ))
            } else {
                ScrollView {
                    VStack(spacing: AppSpacing.md) {
                        Spacer()
                            .frame(height: AppSpacing.lg)

                        // Welcome message with gradient
                        VStack(spacing: AppSpacing.md) {
                            Text("Welcome to")
                                .font(.system(size: 24, weight: .medium, design: .rounded))
                                .foregroundColor(AppColors.secondaryText)
                                .opacity(isLoaded ? 1 : 0)
                                .offset(y: isLoaded ? 0 : -20)

                            Text("BaoLife")
                                .font(.system(size: 48, weight: .bold, design: .rounded))
                                .foregroundStyle(
                                    LinearGradient(
                                        colors: [AppColors.primary, AppColors.accent],
                                        startPoint: .leading,
                                        endPoint: .trailing
                                    )
                                )
                                .shadow(
                                    color: AppColors.primary.opacity(glowPulse ? 0.5 : 0.3),
                                    radius: glowPulse ? 20 : 12,
                                    x: 0,
                                    y: 4
                                )
                                .opacity(isLoaded ? 1 : 0)
                                .scaleEffect(isLoaded ? 1 : 0.8)
                        }

                        // Subtitle in a cozy card
                        BaseCard(
                            backgroundColor: AppColors.surfaceElevated.opacity(0.8),
                            enableAnimation: true
                        ) {
                            Text("Your journey begins here. Create a unique character, make meaningful choices, and experience the beautiful complexity of life in a warm, welcoming world.")
                                .font(.appBody)
                                .foregroundColor(AppColors.primaryText)
                                .multilineTextAlignment(.center)
                                .lineSpacing(4)
                        }
                        .opacity(isLoaded ? 1 : 0)
                        .offset(y: isLoaded ? 0 : 20)

                        // Animated image
                        Image("Image")
                            .resizable()
                            .scaledToFit()
                            .frame(maxHeight: 170)
                            .shadow(
                                color: AppColors.primary.opacity(imageBreathe ? 0.3 : 0.2),
                                radius: imageBreathe ? 24 : 16,
                                x: 0,
                                y: 8
                            )
                            .scaleEffect(imageBreathe ? 1.02 : 1.0)
                            .offset(y: imageFloat ? -8 : 0)
                            .opacity(isLoaded ? 1 : 0)

                        // Inviting features list
                        VStack(spacing: AppSpacing.sm) {
                            FeaturePill(icon: "sparkles", text: "AI-powered life simulation", index: 0, isLoaded: isLoaded)
                            FeaturePill(icon: "heart.fill", text: "Build meaningful relationships", index: 1, isLoaded: isLoaded)
                            FeaturePill(icon: "star.fill", text: "Shape your unique story", index: 2, isLoaded: isLoaded)
                        }

                        Spacer()
                            .frame(height: AppSpacing.xxl + AppSpacing.buttonHeight)
                    }
                    .padding(.horizontal, AppSpacing.xl)
                }
                .safeAreaInset(edge: .bottom) {
                    PrimaryButton(title: "Begin Your Journey") {
                        hapticFeedback(style: .medium)
                        withAnimation(.spring(response: 0.6, dampingFraction: 0.75)) {
                            showCharacterSetup = true
                        }
                    }
                    .opacity(isLoaded ? 1 : 0)
                    .scaleEffect(isLoaded ? 1 : 0.9)
                    .padding(.horizontal, AppSpacing.xl)
                    .padding(.top, AppSpacing.sm)
                    .padding(.bottom, AppSpacing.md)
                    .background(
                        AppColors.background
                            .opacity(0.96)
                            .ignoresSafeArea(edges: .bottom)
                    )
                }
            }
        }
        .onAppear {
            // Staggered entrance animations
            withAnimation(.spring(response: 0.8, dampingFraction: 0.75)) {
                isLoaded = true
            }

            // Image floating animation
            withAnimation(
                .easeInOut(duration: 3.0)
                .repeatForever(autoreverses: true)
            ) {
                imageFloat = true
            }

            // Image breathing animation
            withAnimation(
                .easeInOut(duration: 2.5)
                .repeatForever(autoreverses: true)
            ) {
                imageBreathe = true
            }

            // Title glow pulse
            withAnimation(
                .easeInOut(duration: 2.0)
                .repeatForever(autoreverses: true)
            ) {
                glowPulse = true
            }
        }
    }
}

// MARK: - Supporting Views

private struct FeaturePill: View {
    let icon: String
    let text: String
    let index: Int
    let isLoaded: Bool

    var body: some View {
        HStack(spacing: AppSpacing.sm) {
            Image(systemName: icon)
                .foregroundStyle(
                    LinearGradient(
                        colors: [AppColors.primary, AppColors.accent],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )
                .font(.system(size: 16, weight: .semibold))

            Text(text)
                .font(.appBody)
                .foregroundColor(AppColors.primaryText)

            Spacer()
        }
        .padding(.horizontal, AppSpacing.md)
        .padding(.vertical, AppSpacing.sm)
        .background(AppColors.surfaceElevated.opacity(0.6))
        .cornerRadius(AppSpacing.pillCornerRadius)
        .shadow(
            color: Color.black.opacity(0.1),
            radius: 4,
            x: 0,
            y: 2
        )
        .opacity(isLoaded ? 1 : 0)
        .offset(x: isLoaded ? 0 : -20)
        .animation(
            .spring(response: 0.6, dampingFraction: 0.75)
            .delay(Double(index) * 0.1),
            value: isLoaded
        )
    }
}

// MARK: - Preview
#if DEBUG
struct WelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        WelcomeView()
    }
}
#endif