//
//  AchievementDetailView.swift
//  lichunWebsocket
//
//  Detailed view for individual achievement with progress tracking
//

import SwiftUI

struct AchievementDetailView: View {
    let achievement: Achievement
    @Environment(\.dismiss) var dismiss

    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: AppSpacing.lg) {
                    // Icon with warm glow
                    ZStack {
                        if achievement.unlocked {
                            // Outer glow
                            Circle()
                                .fill(achievement.category.color.opacity(0.3))
                                .frame(width: 140, height: 140)
                                .blur(radius: 12)
                        }

                        Circle()
                            .fill(
                                achievement.unlocked ?
                                    LinearGradient(
                                        colors: [
                                            achievement.category.color.opacity(0.2),
                                            achievement.category.color.opacity(0.1)
                                        ],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    ) :
                                    LinearGradient(
                                        colors: [
                                            AppColors.surfaceElevated,
                                            AppColors.surfaceSubtle
                                        ],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    )
                            )
                            .frame(width: 120, height: 120)
                            .overlay(
                                Circle()
                                    .stroke(
                                        achievement.unlocked ?
                                            achievement.category.color.opacity(0.3) :
                                            Color.clear,
                                        lineWidth: 3
                                    )
                            )

                        Image(systemName: achievement.iconName)
                            .font(.system(size: 60))
                            .foregroundColor(achievement.unlocked ? achievement.category.color : AppColors.disabledText.opacity(0.4))

                        // Sparkles for unlocked achievements
                        if achievement.unlocked {
                            ForEach(0..<3) { index in
                                Image(systemName: "sparkle")
                                    .font(.system(size: 16))
                                    .foregroundColor(Color(red: 1.0, green: 0.84, blue: 0.0))
                                    .offset(
                                        x: cos(Double(index) * 2 * .pi / 3) * 70,
                                        y: sin(Double(index) * 2 * .pi / 3) * 70
                                    )
                                    .opacity(0.8)
                            }
                        }
                    }
                    .padding(.top, AppSpacing.xl)

                    // Name
                    Text(achievement.name)
                        .font(.system(size: 28, weight: .bold, design: .rounded))
                        .foregroundColor(AppColors.primaryText)
                        .multilineTextAlignment(.center)

                    // Encouraging subtitle for unlocked achievements
                    if achievement.unlocked {
                        Text("Congratulations! You earned this!")
                            .font(.appBody)
                            .foregroundColor(achievement.category.color)
                            .italic()
                    }

                    // Category Badge
                    HStack(spacing: AppSpacing.xs) {
                        Image(systemName: achievement.category.icon)
                            .font(.system(size: 14))
                        Text(achievement.category.rawValue)
                            .font(.appBody)
                    }
                    .foregroundColor(achievement.category.color)
                    .padding(.horizontal, AppSpacing.md)
                    .padding(.vertical, AppSpacing.sm)
                    .background(achievement.category.color.opacity(0.15))
                    .cornerRadius(AppSpacing.pillCornerRadius)

                    // Description
                    Text(achievement.description)
                        .font(.appBody)
                        .foregroundColor(AppColors.secondaryText)
                        .multilineTextAlignment(.center)
                        .padding(.horizontal, AppSpacing.lg)

                    Divider()
                        .padding(.horizontal, AppSpacing.lg)

                    // Requirements Card
                    VStack(alignment: .leading, spacing: AppSpacing.sm) {
                        HStack(spacing: AppSpacing.xs) {
                            Image(systemName: "checkmark.circle")
                                .foregroundColor(AppColors.primary)
                            Text("Requirement")
                                .font(.appHeadline)
                                .foregroundColor(AppColors.primaryText)
                        }

                        Text(achievement.requirement)
                            .font(.appBody)
                            .foregroundColor(AppColors.secondaryText)
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(AppSpacing.md)
                    .background(AppColors.surfaceElevated)
                    .cornerRadius(AppSpacing.cornerRadius)
                    .padding(.horizontal, AppSpacing.md)

                    // Progress Card with encouraging design
                    if !achievement.unlocked {
                        if let progress = achievement.progress,
                           let required = achievement.progressRequired {
                            VStack(spacing: AppSpacing.md) {
                                HStack(spacing: 6) {
                                    Image(systemName: "chart.bar.fill")
                                        .font(.system(size: 14))
                                        .foregroundColor(achievement.category.color)
                                    Text("Your Progress")
                                        .font(.appHeadline)
                                        .foregroundColor(AppColors.primaryText)
                                }

                                Text("\(progress) / \(required)")
                                    .font(.system(size: 36, weight: .bold, design: .rounded))
                                    .foregroundColor(AppColors.primaryText)

                                GeometryReader { geometry in
                                    ZStack(alignment: .leading) {
                                        RoundedRectangle(cornerRadius: 8)
                                            .fill(AppColors.disabledText.opacity(0.2))
                                            .frame(height: 16)

                                        RoundedRectangle(cornerRadius: 8)
                                            .fill(
                                                LinearGradient(
                                                    colors: [
                                                        achievement.category.color,
                                                        achievement.category.color.opacity(0.7)
                                                    ],
                                                    startPoint: .leading,
                                                    endPoint: .trailing
                                                )
                                            )
                                            .frame(
                                                width: geometry.size.width * achievement.progressPercentage,
                                                height: 16
                                            )
                                            .shadow(
                                                color: achievement.category.color.opacity(0.3),
                                                radius: 4,
                                                x: 0,
                                                y: 2
                                            )
                                    }
                                }
                                .frame(height: 16)

                                HStack {
                                    Text("\(Int(achievement.progressPercentage * 100))% Complete")
                                        .font(.appBody)
                                        .foregroundColor(AppColors.primaryText)
                                        .fontWeight(.medium)

                                    Spacer()

                                    Text("Keep going!")
                                        .font(.appCaption)
                                        .foregroundColor(achievement.category.color)
                                        .italic()
                                }
                            }
                            .padding(AppSpacing.md)
                            .background(
                                LinearGradient(
                                    colors: [
                                        achievement.category.color.opacity(0.05),
                                        achievement.category.color.opacity(0.02)
                                    ],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                )
                            )
                            .cornerRadius(AppSpacing.cornerRadius)
                            .overlay(
                                RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                                    .stroke(achievement.category.color.opacity(0.2), lineWidth: 1)
                            )
                            .padding(.horizontal, AppSpacing.md)
                        }
                    }

                    // Reward Card with warm golden gradient
                    VStack(spacing: AppSpacing.sm) {
                        HStack(spacing: 6) {
                            Image(systemName: "star.fill")
                                .font(.system(size: 16))
                                .foregroundStyle(
                                    LinearGradient(
                                        colors: [
                                            Color(red: 1.0, green: 0.84, blue: 0.0),
                                            Color(red: 0.85, green: 0.65, blue: 0.13)
                                        ],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    )
                                )
                            Text("Reward")
                                .font(.appHeadline)
                                .foregroundColor(AppColors.primaryText)
                        }

                        HStack(spacing: AppSpacing.xs) {
                            Text("\(achievement.reward)")
                                .font(.system(size: 40, weight: .bold, design: .rounded))
                                .foregroundStyle(
                                    LinearGradient(
                                        colors: [
                                            Color(red: 1.0, green: 0.84, blue: 0.0),
                                            Color(red: 0.85, green: 0.65, blue: 0.13)
                                        ],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    )
                                )
                            Image(systemName: "gem.fill")
                                .font(.system(size: 32))
                                .foregroundStyle(
                                    LinearGradient(
                                        colors: [
                                            Color(red: 1.0, green: 0.84, blue: 0.0),
                                            Color(red: 0.85, green: 0.65, blue: 0.13)
                                        ],
                                        startPoint: .top,
                                        endPoint: .bottom
                                    )
                                )
                        }
                        .padding(AppSpacing.md)
                        .background(
                            LinearGradient(
                                colors: [
                                    Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.15),
                                    Color(red: 1.0, green: 0.65, blue: 0.0).opacity(0.1)
                                ],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .cornerRadius(AppSpacing.cornerRadius)
                        .overlay(
                            RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                                .stroke(
                                    LinearGradient(
                                        colors: [
                                            Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.4),
                                            Color(red: 0.85, green: 0.65, blue: 0.13).opacity(0.3)
                                        ],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    ),
                                    lineWidth: 2
                                )
                        )
                        .shadow(
                            color: Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.2),
                            radius: 8,
                            x: 0,
                            y: 4
                        )
                    }
                    .padding(.horizontal, AppSpacing.md)

                    // Unlock Date
                    if achievement.unlocked, let unlockedAt = achievement.unlockedAt {
                        VStack(spacing: 4) {
                            Image(systemName: "calendar")
                                .font(.system(size: 20))
                                .foregroundColor(AppColors.secondaryText)
                            Text("Unlocked")
                                .font(.appCaption)
                                .foregroundColor(AppColors.secondaryText)
                            Text(unlockedAt, style: .date)
                                .font(.appBody)
                                .foregroundColor(AppColors.primaryText)
                        }
                        .padding()
                    }

                    Spacer()
                }
                .padding(.bottom, AppSpacing.xl)
            }
            .background(AppColors.background)
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: { dismiss() }) {
                        Image(systemName: "xmark.circle.fill")
                            .font(.title3)
                            .foregroundColor(AppColors.secondaryText)
                    }
                }
            }
        }
    }
}

// MARK: - Preview
#if DEBUG
struct AchievementDetailView_Previews: PreviewProvider {
    static var previews: some View {
        AchievementDetailView(
            achievement: Achievement(
                id: "1",
                name: "Career Starter",
                description: "Begin your professional journey",
                category: .career,
                reward: 25,
                requirement: "Apply and get hired for your first job",
                unlocked: false,
                unlockedAt: nil,
                progress: 1,
                progressRequired: 1,
                acknowledged: false
            )
        )
    }
}
#endif