//
//  SplashView.swift
//  AppClientBaseSwift
//
//  Splash screen with GoodGo logo animation
//  Màn hình splash với animation logo GoodGo
//

import SwiftUI

// MARK: - Splash View
// View Splash

/// Splash screen displayed when app launches
/// Màn hình splash hiển thị khi app khởi động
struct SplashView<Content: View>: View {

    // MARK: - Properties

    /// Content to show after splash
    /// Nội dung hiển thị sau splash
    let content: () -> Content

    /// Whether splash is complete
    /// Splash đã hoàn thành chưa
    @State private var isComplete = false

    /// Logo opacity for fade-in animation
    /// Độ mờ logo cho animation fade-in
    @State private var logoOpacity: Double = 0

    /// Logo scale for scale animation
    /// Tỷ lệ logo cho animation scale
    @State private var logoScale: CGFloat = 0.6

    /// Pulse animation state
    /// Trạng thái animation pulse
    @State private var isPulsing = false

    // MARK: - Init

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content
    }

    // MARK: - Body

    var body: some View {
        Group {
            if isComplete {
                content()
                    .transition(.opacity)
            } else {
                splashContent
                    .transition(.opacity)
            }
        }
        .animation(.easeInOut(duration: 0.5), value: isComplete)
    }

    // MARK: - Subviews

    /// Splash screen content
    /// Nội dung màn hình splash
    private var splashContent: some View {
        ZStack {
            // Background gradient
            // Gradient nền
            LinearGradient(
                colors: [
                    Color(red: 0.1, green: 0.1, blue: 0.2),
                    Color(red: 0.05, green: 0.05, blue: 0.15)
                ],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
            .ignoresSafeArea()

            // Logo + Text
            VStack(spacing: DesignSystem.spacingLG) {
                // Logo icon with pulse effect
                // Icon logo với hiệu ứng pulse
                ZStack {
                    // Outer glow
                    Circle()
                        .fill(
                            RadialGradient(
                                colors: [
                                    Color.blue.opacity(isPulsing ? 0.4 : 0.2),
                                    Color.clear
                                ],
                                center: .center,
                                startRadius: 40,
                                endRadius: isPulsing ? 100 : 80
                            )
                        )
                        .frame(width: 180, height: 180)

                    // Main logo circle
                    Circle()
                        .fill(
                            LinearGradient(
                                colors: [
                                    Color(red: 0.2, green: 0.6, blue: 1.0),
                                    Color(red: 0.4, green: 0.3, blue: 0.9)
                                ],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .frame(width: 100, height: 100)
                        .shadow(color: .blue.opacity(0.5), radius: 20, x: 0, y: 10)

                    // Icon
                    Image(systemName: "location.fill")
                        .font(.system(size: 44, weight: .medium))
                        .foregroundStyle(.white)
                }
                .scaleEffect(logoScale)
                .opacity(logoOpacity)

                // App name
                // Tên ứng dụng
                VStack(spacing: DesignSystem.spacingSM) {
                    Text("GoodGo")
                        .font(.system(size: 42, weight: .bold, design: .rounded))
                        .foregroundStyle(
                            LinearGradient(
                                colors: [.white, .white.opacity(0.8)],
                                startPoint: .top,
                                endPoint: .bottom
                            )
                        )

                    Text("Khám phá địa điểm tuyệt vời")
                        .font(.subheadline)
                        .foregroundStyle(.white.opacity(0.6))
                }
                .opacity(logoOpacity)
            }
        }
        .onAppear {
            startAnimations()
        }
    }

    // MARK: - Methods

    /// Start splash animations
    /// Bắt đầu các animation splash
    private func startAnimations() {
        // Fade in + scale animation
        withAnimation(.spring(response: 0.8, dampingFraction: 0.6, blendDuration: 0)) {
            logoOpacity = 1
            logoScale = 1
        }

        // Pulse animation
        withAnimation(.easeInOut(duration: 1.2).repeatForever(autoreverses: true).delay(0.5)) {
            isPulsing = true
        }

        // Auto dismiss after delay
        DispatchQueue.main.asyncAfter(deadline: .now() + 2.5) {
            withAnimation {
                isComplete = true
            }
        }
    }
}

// MARK: - Preview

#Preview {
    SplashView {
        Text("Main Content")
    }
}
