//
//  OnboardingStep1_WelcomeView.swift
//  lichunWebsocket
//
//  Welcome screen for onboarding flow
//

import SwiftUI

struct OnboardingStep1_WelcomeView: View {
    @EnvironmentObject var appViewModel: AppViewModel
    let onContinue: () -> Void

    @State private var animateIcon = false
    @State private var showContent = false

    var body: some View {
        ZStack {
            // Warm, welcoming gradient background
            LinearGradient(
                gradient: Gradient(colors: [
                    Color(hex: 0xFFB88C),  // Warm peach
                    Color(hex: 0xFF8C94),  // Soft coral
                    Color(hex: 0xFFA8B8)   // Gentle pink
                ]),
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .edgesIgnoringSafeArea(.all)

            VStack(spacing: AppSpacing.xl) {
                Spacer()

                // App icon/logo with gentle breathing animation
                ZStack {
                    // Outer glow effect
                    Circle()
                        .fill(Color.white.opacity(0.3))
                        .frame(width: animateIcon ? 140 : 130, height: animateIcon ? 140 : 130)
                        .blur(radius: 20)

                    Circle()
                        .fill(Color.white.opacity(0.25))
                        .frame(width: 120, height: 120)

                    Image(systemName: "person.crop.circle.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 80, height: 80)
                        .foregroundColor(.white)
                }
                .shadow(color: .black.opacity(0.15), radius: 30, y: 10)
                .scaleEffect(animateIcon ? 1.0 : 0.95)
                .opacity(showContent ? 1 : 0)
                .offset(y: showContent ? 0 : -20)

                // Title with friendly animation
                Text("Welcome to BaoLife")
                    .font(.appTitle)
                    .fontWeight(.bold)
                    .foregroundColor(.white)
                    .multilineTextAlignment(.center)
                    .shadow(color: .black.opacity(0.1), radius: 4, y: 2)
                    .opacity(showContent ? 1 : 0)
                    .offset(y: showContent ? 0 : 20)

                // Warm, inviting tagline
                Text("Your cozy life simulator")
                    .font(.appHeadline)
                    .foregroundColor(.white.opacity(0.95))
                    .multilineTextAlignment(.center)
                    .padding(.horizontal, AppSpacing.xl)
                    .opacity(showContent ? 1 : 0)
                    .offset(y: showContent ? 0 : 20)

                Spacer()
                    .frame(height: AppSpacing.xxl)

                // Feature highlights with warm cards
                VStack(spacing: AppSpacing.md) {
                    FeatureRow(
                        icon: "heart.fill",
                        title: "Build Relationships",
                        description: "Create meaningful connections and friendships"
                    )

                    FeatureRow(
                        icon: "sparkles",
                        title: "Live Your Dreams",
                        description: "Study, work, and pursue your passions"
                    )

                    FeatureRow(
                        icon: "hand.point.up.left.fill",
                        title: "Shape Your Story",
                        description: "Every choice creates your unique journey"
                    )
                }
                .padding(.horizontal, AppSpacing.xl)
                .opacity(showContent ? 1 : 0)
                .offset(y: showContent ? 0 : 30)

                Spacer()

                // Continue button with friendly styling
                PrimaryButton(
                    title: "Begin Your Journey",
                    action: {
                        withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                            onContinue()
                        }
                    },
                    backgroundColor: .white,
                    // White button sits on the coral gradient; use coral text so the
                    // label is legible (previously white-on-white = invisible).
                    foregroundColor: Color(hex: 0xFF8C94)
                )
                .shadow(color: .black.opacity(0.15), radius: 20, y: 8)
                .padding(.horizontal, AppSpacing.xl)
                .padding(.bottom, AppSpacing.xl)
                .opacity(showContent ? 1 : 0)
                .offset(y: showContent ? 0 : 40)
            }
        }
        .onAppear {
            // Gentle breathing animation for icon
            withAnimation(.easeInOut(duration: 2.0).repeatForever(autoreverses: true)) {
                animateIcon = true
            }

            // Staggered content reveal
            withAnimation(.easeOut(duration: 0.6)) {
                showContent = true
            }
        }
    }
}

// MARK: - Preview
#if DEBUG
struct OnboardingStep1_WelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        OnboardingStep1_WelcomeView(onContinue: {})
            .environmentObject(AppViewModel())
    }
}
#endif