//
//  ProgressLoadingView.swift
//  lichunWebsocket
//
//  Progress loading view with percentage indicator
//

import SwiftUI

struct ProgressLoadingView: View {
    let message: String
    @Binding var progress: Double  // 0.0 to 1.0

    var body: some View {
        VStack(spacing: AppSpacing.lg) {
            // Custom cozy progress bar
            ZStack(alignment: .leading) {
                // Background track
                RoundedRectangle(cornerRadius: 8)
                    .fill(AppColors.surfaceElevated)
                    .frame(height: 12)

                // Progress fill with gradient
                RoundedRectangle(cornerRadius: 8)
                    .fill(
                        LinearGradient(
                            colors: [AppColors.primary, AppColors.accent],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                    .frame(width: max(12, CGFloat(progress) * UIScreen.main.bounds.width * 0.7), height: 12)
                    .shadow(color: AppColors.primary.opacity(0.4), radius: 4, x: 0, y: 2)
                    .animation(.spring(response: 0.5, dampingFraction: 0.8), value: progress)
            }
            .frame(maxWidth: .infinity)

            Text(message)
                .font(.system(size: 15, weight: .medium, design: .rounded))
                .foregroundColor(AppColors.primaryText)
                .multilineTextAlignment(.center)

            Text("\(Int(progress * 100))%")
                .font(.system(size: 24, weight: .bold, design: .rounded))
                .foregroundStyle(
                    LinearGradient(
                        colors: [AppColors.primary, AppColors.accent],
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                )
        }
        .padding(AppSpacing.xl)
        .background(
            ZStack {
                RoundedRectangle(cornerRadius: 20)
                    .fill(AppColors.cardBackground)

                // Warm gradient overlay
                RoundedRectangle(cornerRadius: 20)
                    .fill(
                        LinearGradient(
                            colors: [
                                Color.white.opacity(0.6),
                                Color(hex: 0xFFF8F3).opacity(0.4)
                            ],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
            }
        )
        .overlay(
            RoundedRectangle(cornerRadius: 20)
                .stroke(
                    LinearGradient(
                        colors: [Color.white.opacity(0.5), Color.clear],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    ),
                    lineWidth: 1
                )
        )
        .shadow(color: .black.opacity(0.08), radius: 12, x: 0, y: 6)
        .shadow(color: AppColors.primary.opacity(0.1), radius: 8, x: 0, y: 4)
    }
}

// MARK: - Circular Progress View
struct CircularProgressView: View {
    let progress: Double  // 0.0 to 1.0
    let size: CGFloat
    let lineWidth: CGFloat
    let color: Color

    init(
        progress: Double,
        size: CGFloat = 60,
        lineWidth: CGFloat = 6,
        color: Color = AppColors.primary
    ) {
        self.progress = progress
        self.size = size
        self.lineWidth = lineWidth
        self.color = color
    }

    var body: some View {
        ZStack {
            // Background circle with soft glow
            Circle()
                .stroke(
                    color.opacity(0.15),
                    lineWidth: lineWidth
                )
                .shadow(color: color.opacity(0.1), radius: 4, x: 0, y: 2)

            // Progress circle with gradient
            Circle()
                .trim(from: 0, to: progress)
                .stroke(
                    LinearGradient(
                        colors: [color, color.opacity(0.7)],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    ),
                    style: StrokeStyle(
                        lineWidth: lineWidth,
                        lineCap: .round
                    )
                )
                .rotationEffect(.degrees(-90))
                .shadow(color: color.opacity(0.3), radius: 3, x: 0, y: 2)
                .animation(.spring(response: 0.5, dampingFraction: 0.8), value: progress)

            // Percentage text
            Text("\(Int(progress * 100))%")
                .font(.system(size: size * 0.2, weight: .bold, design: .rounded))
                .foregroundColor(AppColors.primaryText)
        }
        .frame(width: size, height: size)
    }
}

// MARK: - Indeterminate Loading Dots
struct LoadingDots: View {
    @State private var currentDot = 0
    let dotCount: Int
    let color: Color

    init(dotCount: Int = 3, color: Color = AppColors.primary) {
        self.dotCount = dotCount
        self.color = color
    }

    var body: some View {
        HStack(spacing: AppSpacing.xs) {
            ForEach(0..<dotCount, id: \.self) { index in
                Circle()
                    .fill(
                        LinearGradient(
                            colors: [color, color.opacity(0.8)],
                            startPoint: .top,
                            endPoint: .bottom
                        )
                    )
                    .frame(width: 10, height: 10)
                    .scaleEffect(currentDot == index ? 1.3 : 0.7)
                    .opacity(currentDot == index ? 1.0 : 0.4)
                    .shadow(color: color.opacity(currentDot == index ? 0.5 : 0.2), radius: 4, x: 0, y: 2)
            }
        }
        .onAppear {
            Timer.scheduledTimer(withTimeInterval: 0.35, repeats: true) { _ in
                withAnimation(.spring(response: 0.4, dampingFraction: 0.6)) {
                    currentDot = (currentDot + 1) % dotCount
                }
            }
        }
    }
}

// MARK: - Preview
#if DEBUG
struct ProgressLoadingView_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            AppColors.background
                .ignoresSafeArea()

            VStack(spacing: AppSpacing.xl) {
                Text("Progress Loading Components")
                    .font(.appLargeTitle)
                    .foregroundColor(AppColors.primaryText)

                // Progress loading view
                ProgressLoadingView(
                    message: "Uploading character...",
                    progress: .constant(0.65)
                )
                .padding(.horizontal, AppSpacing.md)

                // Circular progress
                CircularProgressView(progress: 0.75)

                // Loading dots
                VStack(spacing: AppSpacing.md) {
                    LoadingDots()
                    Text("Loading...")
                        .font(.appBody)
                        .foregroundColor(AppColors.secondaryText)
                }

                // Different progress states
                HStack(spacing: AppSpacing.md) {
                    CircularProgressView(progress: 0.25, size: 50, color: AppColors.energy)
                    CircularProgressView(progress: 0.50, size: 50, color: AppColors.happiness)
                    CircularProgressView(progress: 0.75, size: 50, color: AppColors.intelligence)
                    CircularProgressView(progress: 1.0, size: 50, color: AppColors.success)
                }
            }
            .padding()
        }
    }
}
#endif