//
//  WelcomeView.swift
//  AppClientBaseSwift
//
//  Onboarding/Welcome screen view - Pastel Yellow Theme
//  View màn hình Onboarding/Welcome - Theme Pastel Vàng
//

import SwiftUI

// MARK: - Welcome View
// View Welcome

/// Welcome/Onboarding screen
/// Màn hình Welcome/Onboarding
struct WelcomeView: View {

    // MARK: - Properties

    /// Current page index
    /// Index trang hiện tại
    @State private var currentPage = 0

    /// Callback when onboarding completes
    /// Callback khi onboarding hoàn thành
    var onComplete: () -> Void = {}

    /// Onboarding pages data
    /// Dữ liệu các trang onboarding
    private let pages: [(icon: String, title: String, description: String)] = [
        (
            "map.fill",
            "welcome_discover_title".localized,
            "welcome_discover_desc".localized
        ),
        (
            "star.fill",
            "welcome_rewards_title".localized,
            "welcome_rewards_desc".localized
        ),
        (
            "person.2.fill",
            "welcome_community_title".localized,
            "welcome_community_desc".localized
        ),
    ]

    // MARK: - Body

    var body: some View {
        ZStack {
            // Background
            Color.appBackground
                .ignoresSafeArea()

            // Decorative circles
            GeometryReader { geometry in
                Circle()
                    .fill(AppTheme.softGradient)
                    .frame(width: 300, height: 300)
                    .blur(radius: 60)
                    .offset(x: -100, y: 100)

                Circle()
                    .fill(Color.brandSecondary.opacity(0.2))
                    .frame(width: 200, height: 200)
                    .blur(radius: 40)
                    .offset(x: geometry.size.width - 80, y: geometry.size.height - 300)
            }
            .ignoresSafeArea()

            VStack(spacing: 0) {
                // Page content
                // Nội dung trang
                TabView(selection: $currentPage) {
                    ForEach(0..<pages.count, id: \.self) { index in
                        onboardingPage(index: index)
                            .tag(index)
                    }
                }
                .tabViewStyle(.page(indexDisplayMode: .never))
                .animation(.easeInOut, value: currentPage)

                // Bottom section
                // Phần dưới
                bottomSection
                    .padding(.horizontal, DesignSystem.spacingLG)
                    .padding(.bottom, DesignSystem.spacingXL)
            }
        }
    }

    // MARK: - Subviews

    /// Onboarding page content
    /// Nội dung trang onboarding
    /// - Parameter index: Page index / Index trang
    private func onboardingPage(index: Int) -> some View {
        VStack(spacing: DesignSystem.spacingXL) {
            Spacer()

            // Icon
            ZStack {
                Circle()
                    .fill(AppTheme.primaryGradient)
                    .frame(width: 140, height: 140)

                Image(systemName: pages[index].icon)
                    .font(.system(size: 60))
                    .foregroundStyle(Color.textPrimary)
            }
            .shadow(color: AppTheme.cardShadow, radius: 25, x: 0, y: 12)

            // Text content
            // Nội dung text
            VStack(spacing: DesignSystem.spacingMD) {
                Text(pages[index].title)
                    .font(.title)
                    .fontWeight(.bold)
                    .foregroundStyle(Color.textPrimary)
                    .multilineTextAlignment(.center)

                Text(pages[index].description)
                    .font(.body)
                    .foregroundStyle(Color.textSecondary)
                    .multilineTextAlignment(.center)
                    .lineLimit(3)
            }
            .padding(.horizontal, DesignSystem.spacingLG)

            Spacer()
            Spacer()
        }
    }

    /// Bottom section with indicators and buttons
    /// Phần dưới với indicators và buttons
    private var bottomSection: some View {
        VStack(spacing: DesignSystem.spacingLG) {
            // Page indicators
            // Indicators trang
            HStack(spacing: DesignSystem.spacingSM) {
                ForEach(0..<pages.count, id: \.self) { index in
                    Circle()
                        .fill(index == currentPage ? Color.brandAccent : Color.textSecondary.opacity(0.3))
                        .frame(
                            width: index == currentPage ? 10 : 8,
                            height: index == currentPage ? 10 : 8
                        )
                        .animation(.easeInOut(duration: 0.2), value: currentPage)
                }
            }

            // Action buttons
            // Buttons hành động
            HStack(spacing: DesignSystem.spacingMD) {
                if currentPage > 0 {
                    // Back button
                    // Nút quay lại
                    Button {
                        withAnimation {
                            currentPage -= 1
                        }
                    } label: {
                        Text("common_back".localized)
                            .font(.headline)
                            .foregroundStyle(Color.textSecondary)
                            .frame(maxWidth: .infinity)
                            .padding(.vertical, DesignSystem.spacingMD)
                    }
                }

                // Next/Get Started button
                // Nút tiếp/Bắt đầu
                Button {
                    if currentPage < pages.count - 1 {
                        withAnimation {
                            currentPage += 1
                        }
                    } else {
                        onComplete()
                    }
                } label: {
                    Text(
                        currentPage < pages.count - 1
                            ? "common_next".localized : "welcome_get_started".localized
                    )
                    .font(.headline)
                    .fontWeight(.semibold)
                    .foregroundStyle(Color.textPrimary)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, DesignSystem.spacingMD)
                    .background(AppTheme.warmGradient)
                    .cornerRadius(DesignSystem.cornerRadiusMD)
                    .shadow(color: AppTheme.buttonShadow, radius: 10, x: 0, y: 5)
                }
            }

            // Skip button
            // Nút bỏ qua
            if currentPage < pages.count - 1 {
                Button {
                    onComplete()
                } label: {
                    Text("common_skip".localized)
                        .font(.subheadline)
                        .foregroundStyle(Color.textSecondary)
                }
            }
        }
    }
}

// MARK: - Preview

#Preview {
    WelcomeView()
}
