//
//  AchievementsView.swift
//  lichunWebsocket
//
//  Main achievements view with grid layout and category filters
//

import SwiftUI

struct AchievementsView: View {
    @EnvironmentObject var webSocketService: WebSocketService
    @State private var selectedCategory: Achievement.AchievementCategory? = nil
    @State private var selectedAchievement: Achievement?
    @State private var showingDetail = false

    var filteredAchievements: [Achievement] {
        guard let category = selectedCategory else {
            return webSocketService.achievements
        }
        return webSocketService.achievements.filter { $0.category == category }
    }

    var unlockedCount: Int {
        webSocketService.achievements.filter { $0.unlocked }.count
    }

    var totalCount: Int {
        webSocketService.achievements.count
    }

    var body: some View {
        NavigationView {
            ScrollView {
                VStack(spacing: AppSpacing.lg) {
                    // Progress Header
                    ProgressHeader(unlocked: unlockedCount, total: totalCount)

                    // Category Filter
                    CategoryFilter(selectedCategory: $selectedCategory)

                    // Achievements Grid
                    LazyVGrid(columns: [
                        GridItem(.flexible()),
                        GridItem(.flexible())
                    ], spacing: AppSpacing.md) {
                        ForEach(filteredAchievements) { achievement in
                            AchievementCard(achievement: achievement)
                                .onTapGesture {
                                    selectedAchievement = achievement
                                    showingDetail = true
                                }
                        }
                    }
                    .padding(.horizontal, AppSpacing.md)
                    .padding(.bottom, AppSpacing.xl)
                }
            }
            .background(AppColors.background)
            .navigationTitle("Achievements")
            .navigationBarTitleDisplayMode(.large)
            .onAppear {
                webSocketService.fetchAchievements()
                AnalyticsManager.shared.trackScreenView("achievements", screenClass: "AchievementsView")
            }
            .sheet(isPresented: $showingDetail) {
                if let achievement = selectedAchievement {
                    AchievementDetailView(achievement: achievement)
                        .environmentObject(webSocketService)
                }
            }
        }
    }
}

// MARK: - Supporting Views

struct ProgressHeader: View {
    let unlocked: Int
    let total: Int

    var percentage: Double {
        total > 0 ? Double(unlocked) / Double(total) : 0
    }

    var body: some View {
        VStack(spacing: AppSpacing.md) {
            ZStack {
                // Warm golden glow
                Circle()
                    .fill(
                        LinearGradient(
                            colors: [
                                Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.3),
                                Color(red: 1.0, green: 0.65, blue: 0.0).opacity(0.2)
                            ],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .frame(width: 100, height: 100)
                    .blur(radius: 8)

                Circle()
                    .fill(
                        LinearGradient(
                            colors: [
                                Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.2),
                                Color(red: 0.85, green: 0.65, blue: 0.13).opacity(0.15)
                            ],
                            startPoint: .top,
                            endPoint: .bottom
                        )
                    )
                    .frame(width: 80, height: 80)

                Image(systemName: "trophy.fill")
                    .font(.system(size: 40))
                    .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
                        )
                    )
            }

            Text("\(unlocked) / \(total)")
                .font(.system(size: 32, weight: .bold, design: .rounded))
                .foregroundStyle(
                    LinearGradient(
                        colors: [
                            Color(red: 0.85, green: 0.65, blue: 0.13),
                            Color(red: 0.72, green: 0.53, blue: 0.04)
                        ],
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                )

            Text("Achievements Unlocked")
                .font(.appBody)
                .foregroundColor(AppColors.secondaryText)

            Text("You're doing amazing!")
                .font(.appCaption)
                .foregroundColor(AppColors.primaryText.opacity(0.7))
                .italic()

            // Progress Bar with warm gradient
            GeometryReader { geometry in
                ZStack(alignment: .leading) {
                    RoundedRectangle(cornerRadius: 6)
                        .fill(AppColors.disabledText.opacity(0.2))
                        .frame(height: 12)

                    RoundedRectangle(cornerRadius: 6)
                        .fill(
                            LinearGradient(
                                colors: [
                                    Color(red: 1.0, green: 0.84, blue: 0.0),
                                    Color(red: 1.0, green: 0.65, blue: 0.0),
                                    Color(red: 0.85, green: 0.65, blue: 0.13)
                                ],
                                startPoint: .leading,
                                endPoint: .trailing
                            )
                        )
                        .frame(width: geometry.size.width * percentage, height: 12)
                        .shadow(color: Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.3), radius: 4, x: 0, y: 2)
                }
            }
            .frame(height: 12)
            .padding(.horizontal, AppSpacing.xl)
        }
        .padding(.top, AppSpacing.md)
        .padding(.bottom, AppSpacing.sm)
    }
}

struct CategoryFilter: View {
    @Binding var selectedCategory: Achievement.AchievementCategory?

    let categories: [Achievement.AchievementCategory] = [
        .career, .relationships, .education, .wealth, .activities
    ]

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: AppSpacing.sm) {
                // All button
                FilterChip(
                    icon: "star.fill",
                    label: "All",
                    isSelected: selectedCategory == nil
                ) {
                    selectedCategory = nil
                }

                // Category buttons
                ForEach(categories, id: \.self) { category in
                    FilterChip(
                        icon: category.icon,
                        label: category.rawValue,
                        isSelected: selectedCategory == category
                    ) {
                        selectedCategory = category
                    }
                }
            }
            .padding(.horizontal, AppSpacing.md)
        }
    }
}

struct FilterChip: View {
    let icon: String
    let label: String
    let isSelected: Bool
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            HStack(spacing: AppSpacing.xs) {
                Image(systemName: icon)
                    .font(.system(size: 14))
                Text(label)
                    .font(.appBody)
                    .fontWeight(isSelected ? .semibold : .regular)
            }
            .foregroundColor(isSelected ? .white : AppColors.primaryText)
            .padding(.horizontal, AppSpacing.md)
            .padding(.vertical, AppSpacing.sm)
            .background(isSelected ? AppColors.primary : AppColors.surfaceElevated)
            .cornerRadius(AppSpacing.pillCornerRadius)
            .overlay(
                RoundedRectangle(cornerRadius: AppSpacing.pillCornerRadius)
                    .stroke(isSelected ? Color.clear : AppColors.primary.opacity(0.2), lineWidth: 1)
            )
        }
    }
}

struct AchievementCard: View {
    let achievement: Achievement

    // Warm achievement colors
    private var goldGradient: LinearGradient {
        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
        )
    }

    private var bronzeGradient: LinearGradient {
        LinearGradient(
            colors: [
                Color(red: 0.8, green: 0.5, blue: 0.2),
                Color(red: 0.55, green: 0.27, blue: 0.07)
            ],
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
    }

    var body: some View {
        VStack(spacing: AppSpacing.sm) {
            // Icon with warm glow
            ZStack {
                if achievement.unlocked {
                    // Soft glow for unlocked achievements
                    Circle()
                        .fill(achievement.category.color.opacity(0.3))
                        .frame(width: 70, height: 70)
                        .blur(radius: 6)
                }

                Circle()
                    .fill(achievement.unlocked ?
                        achievement.category.color.opacity(0.15) :
                        AppColors.disabledText.opacity(0.15))
                    .frame(width: 60, height: 60)

                if achievement.unlocked {
                    // Sparkle effect for unlocked
                    Image(systemName: "sparkles")
                        .font(.system(size: 12))
                        .foregroundColor(Color(red: 1.0, green: 0.84, blue: 0.0))
                        .offset(x: 20, y: -20)
                        .opacity(0.7)
                }

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

            // Name
            Text(achievement.name)
                .font(.appHeadline)
                .foregroundColor(AppColors.primaryText)
                .multilineTextAlignment(.center)
                .lineLimit(2)
                .minimumScaleFactor(0.8)
                .frame(height: 44)

            // Progress or Reward
            if achievement.unlocked {
                HStack(spacing: 4) {
                    Image(systemName: "gem.fill")
                        .font(.system(size: 12))
                        .foregroundStyle(goldGradient)
                    Text("\(achievement.reward)")
                        .font(.appCaptionBold)
                        .foregroundStyle(goldGradient)
                }
                .padding(.horizontal, AppSpacing.sm)
                .padding(.vertical, 6)
                .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.smallCornerRadius)
                .overlay(
                    RoundedRectangle(cornerRadius: AppSpacing.smallCornerRadius)
                        .stroke(Color(red: 1.0, green: 0.84, blue: 0.0).opacity(0.3), lineWidth: 1)
                )
            } else if let progress = achievement.progress,
                      let required = achievement.progressRequired {
                VStack(spacing: 4) {
                    Text("\(progress)/\(required)")
                        .font(.appCaption)
                        .foregroundColor(AppColors.secondaryText)

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

                            RoundedRectangle(cornerRadius: 3)
                                .fill(
                                    LinearGradient(
                                        colors: [
                                            achievement.category.color,
                                            achievement.category.color.opacity(0.7)
                                        ],
                                        startPoint: .leading,
                                        endPoint: .trailing
                                    )
                                )
                                .frame(
                                    width: geometry.size.width * achievement.progressPercentage,
                                    height: 6
                                )
                        }
                    }
                    .frame(height: 6)
                }
            } else {
                HStack(spacing: 4) {
                    Image(systemName: "lock.fill")
                        .font(.system(size: 10))
                    Text("Locked")
                        .font(.appCaption)
                }
                .foregroundColor(AppColors.disabledText.opacity(0.6))
            }
        }
        .frame(maxWidth: .infinity)
        .padding(AppSpacing.md)
        .background(
            Group {
                if achievement.unlocked {
                    LinearGradient(
                        colors: [
                            achievement.category.color.opacity(0.08),
                            achievement.category.color.opacity(0.04)
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                } else {
                    LinearGradient(
                        colors: [
                            AppColors.surfaceElevated,
                            AppColors.surfaceSubtle
                        ],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                }
            }
        )
        .cornerRadius(AppSpacing.cornerRadius)
        .overlay(
            RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                .stroke(
                    achievement.unlocked ?
                        achievement.category.color.opacity(0.4) :
                        Color(red: 0.9, green: 0.9, blue: 0.9),
                    lineWidth: achievement.unlocked ? 2 : 1
                )
        )
        .shadow(
            color: achievement.unlocked ?
                achievement.category.color.opacity(0.15) :
                Color.black.opacity(0.04),
            radius: achievement.unlocked ? 8 : 4,
            x: 0,
            y: achievement.unlocked ? 4 : 2
        )
    }
}

// MARK: - Preview
// Preview removed - requires backend connection