//
//  ExtracurricularList.swift
//  lichunWebsocket
//
//  Created by Craig Vander Galien on 11/5/23.
//

import SwiftUI
import SDWebImage
import SDWebImageSwiftUI


struct ExtracurricularList: View {
    @EnvironmentObject var webSocketService: WebSocketService
    @State private var selectedItem: ExtracurricularClass?
    @State private var showCongratsPopup: Bool = false
    @State private var isLoading: Bool = true
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        NavigationView {
            ZStack {
                // Warm gradient background
                LinearGradient(
                    colors: [
                        AppColors.background,
                        AppColors.surfaceElevated.opacity(0.3),
                        AppColors.background
                    ],
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
                .ignoresSafeArea()

                VStack(spacing: 0) {
                    // Inspirational header
                    VStack(spacing: AppSpacing.sm) {
                        HStack {
                            Image(systemName: "star.circle.fill")
                                .font(.system(size: 40))
                                .foregroundStyle(
                                    LinearGradient(
                                        colors: [AppColors.secondary, AppColors.accent],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    )
                                )

                            VStack(alignment: .leading, spacing: 4) {
                                Text("Find Your Passion")
                                    .font(.appTitle)
                                    .foregroundColor(AppColors.primaryText)

                                Text("Explore activities to develop skills")
                                    .font(.appBody)
                                    .foregroundColor(AppColors.secondaryText)
                            }

                            Spacer()
                        }
                        .padding(AppSpacing.md)
                    }
                    .background(
                        AppColors.surfaceElevated.opacity(0.5)
                    )

                    ScrollView {
                        LazyVStack(spacing: AppSpacing.md) {
                            ForEach(webSocketService.extracurriculars, id: \.id) { item in
                                extracurricularCard(for: item)
                            }
                        }
                        .padding(AppSpacing.md)
                        .padding(.bottom, AppSpacing.xl)
                    }
                    .scrollIndicators(.hidden)
                }

                // Loading indicator
                if isLoading {
                    VStack(spacing: AppSpacing.md) {
                        ZStack {
                            Circle()
                                .fill(AppColors.surfaceElevated)
                                .frame(width: 80, height: 80)
                                .shadow(
                                    color: AppColors.primary.opacity(0.2),
                                    radius: 12,
                                    x: 0,
                                    y: 6
                                )

                            ProgressView()
                                .scaleEffect(1.5)
                                .tint(AppColors.primary)
                        }

                        Text("Finding great activities...")
                            .font(.appHeadline)
                            .foregroundColor(AppColors.primaryText)
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(AppColors.modalOverlay)
                }

                // Congrats overlay
                if showCongratsPopup {
                    congratsOverlay
                }
            }
            .navigationTitle("Extracurriculars")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {
                        hapticFeedback(style: .light)
                        dismiss()
                    }) {
                        Image(systemName: "xmark.circle.fill")
                            .font(.system(size: 24))
                            .foregroundStyle(
                                LinearGradient(
                                    colors: [AppColors.secondaryText, AppColors.secondaryText.opacity(0.7)],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                )
                            )
                    }
                }
            }
            .onAppear {
                if webSocketService.extracurriculars.isEmpty {
                    isLoading = true
                    webSocketService.sendMessage(message: WebSocketCommands.getExtraCurriculars())
                } else {
                    isLoading = false
                }
            }
            .onChange(of: webSocketService.extracurriculars) { _ in
                isLoading = webSocketService.extracurriculars.isEmpty
            }
        }
    }

    // MARK: - Extracurricular Card
    @ViewBuilder
    private func extracurricularCard(for item: ExtracurricularClass) -> some View {
        BaseCard(
            backgroundColor: AppColors.surfaceElevated,
            showShadow: true,
            enableAnimation: false
        ) {
            VStack(alignment: .leading, spacing: AppSpacing.md) {
                HStack(alignment: .top, spacing: AppSpacing.md) {
                    // Activity image with enhanced styling
                    if let imageUrl = URL(string: item.image) {
                        WebImage(url: imageUrl)
                            .onSuccess { image, data, cacheType in
                                print("🎯 Extracurricular: ✅ Loaded '\(item.title)' - size: \(image.size)")
                            }
                            .onFailure { error in
                                print("🎯 Extracurricular: ❌ Failed '\(item.title)' - URL: \(item.image) - Error: \(error.localizedDescription)")
                            }
                            .resizable()
                            .placeholder {
                                ZStack {
                                    Circle()
                                        .fill(
                                            LinearGradient(
                                                colors: [AppColors.surfaceSubtle, AppColors.surfaceSubtle.opacity(0.7)],
                                                startPoint: .topLeading,
                                                endPoint: .bottomTrailing
                                            )
                                        )
                                    ProgressView()
                                        .tint(AppColors.secondary)
                                }
                                .onAppear {
                                    print("🎯 Extracurricular: 🔄 Loading '\(item.title)' from: \(item.image)")
                                }
                            }
                            .indicator(.activity)
                            .transition(.scale.combined(with: .opacity))
                            .scaledToFill()
                            .frame(width: 90, height: 90)
                            .clipShape(Circle())
                            .overlay(
                                Circle()
                                    .strokeBorder(
                                        LinearGradient(
                                            colors: [AppColors.secondary, AppColors.accent],
                                            startPoint: .topLeading,
                                            endPoint: .bottomTrailing
                                        ),
                                        lineWidth: 3
                                    )
                            )
                            .shadow(
                                color: AppColors.secondary.opacity(0.25),
                                radius: 12,
                                x: 0,
                                y: 6
                            )
                    }

                    // Title and description
                    VStack(alignment: .leading, spacing: AppSpacing.xs) {
                        HStack(alignment: .top, spacing: AppSpacing.xs) {
                            Text(item.title)
                                .font(.appTitle2)
                                .foregroundColor(AppColors.primaryText)
                                .lineLimit(2)
                                .fixedSize(horizontal: false, vertical: true)
                                .frame(maxWidth: .infinity, alignment: .leading)

                            // New badge
                            Image(systemName: "sparkles")
                                .font(.system(size: 16, weight: .bold))
                                .foregroundColor(AppColors.accent)
                                .frame(width: 16)
                        }

                        Text(item.description)
                            .font(.appBody)
                            .foregroundColor(AppColors.secondaryText)
                            .lineLimit(3)
                            .lineSpacing(4)
                            .fixedSize(horizontal: false, vertical: true)
                    }
                }

                // Try out button with enhanced design
                Button(action: {
                    hapticFeedback(style: .medium)

                    // Track activity enrollment
                    AnalyticsManager.shared.track(.activityEnrolled(
                        activityId: item.id,
                        activityType: "extracurricular",
                        activityName: item.title
                    ))

                    let message = WebSocketCommands.applyForExtracurricular(item.id)
                    webSocketService.sendMessage(message: message)
                    selectedItem = item
                    withAnimation(.spring(response: 0.3)) {
                        showCongratsPopup = true
                    }
                }) {
                    HStack(spacing: AppSpacing.sm) {
                        Image(systemName: "star.fill")
                            .font(.system(size: 16, weight: .semibold))
                        Text("Try Out")
                            .font(.appHeadline)
                        Spacer()
                        Image(systemName: "arrow.right.circle.fill")
                            .font(.system(size: 20))
                    }
                    .foregroundColor(.white)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, AppSpacing.md)
                    .padding(.horizontal, AppSpacing.md)
                    .background(
                        LinearGradient(
                            colors: [AppColors.secondary, AppColors.secondaryDark],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                    .cornerRadius(AppSpacing.largeCornerRadius)
                    .shadow(
                        color: AppColors.secondary.opacity(0.4),
                        radius: AppSpacing.Shadow.radiusSoft,
                        x: 0,
                        y: AppSpacing.Shadow.offsetY
                    )
                }
                .buttonStyle(SquishButtonStyle())
            }
        }
    }

    // MARK: - Congrats Overlay
    private var congratsOverlay: some View {
        ZStack {
            AppColors.modalOverlay
                .ignoresSafeArea()
                .onTapGesture {
                    withAnimation(.spring(response: 0.3)) {
                        showCongratsPopup = false
                    }
                }

            VStack(spacing: AppSpacing.xl) {
                // Celebratory icon with activity image
                ZStack {
                    // Animated outer ring
                    Circle()
                        .fill(
                            LinearGradient(
                                colors: [AppColors.success.opacity(0.2), AppColors.energy.opacity(0.2)],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .frame(width: 140, height: 140)
                        .overlay(
                            Circle()
                                .strokeBorder(
                                    LinearGradient(
                                        colors: [AppColors.success, AppColors.energy],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    ),
                                    lineWidth: 3
                                )
                        )

                    if let item = selectedItem, let imageUrl = URL(string: item.image) {
                        WebImage(url: imageUrl)
                            .resizable()
                            .scaledToFill()
                            .frame(width: 100, height: 100)
                            .clipShape(Circle())
                            .overlay(
                                Circle()
                                    .strokeBorder(
                                        LinearGradient(
                                            colors: [AppColors.success, AppColors.energy],
                                            startPoint: .topLeading,
                                            endPoint: .bottomTrailing
                                        ),
                                        lineWidth: 4
                                    )
                            )
                            .shadow(
                                color: AppColors.success.opacity(0.4),
                                radius: 20,
                                x: 0,
                                y: 10
                            )
                    } else {
                        Image(systemName: "star.fill")
                            .font(.system(size: 50, weight: .bold))
                            .foregroundStyle(
                                LinearGradient(
                                    colors: [AppColors.success, AppColors.energy],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                )
                            )
                    }
                }

                // Celebration message
                VStack(spacing: AppSpacing.md) {
                    Image(systemName: "party.popper.fill")
                        .font(.system(size: 32))
                        .foregroundStyle(
                            LinearGradient(
                                colors: [AppColors.accent, AppColors.secondary],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )

                    Text("You're In!")
                        .font(.system(size: 32, weight: .bold, design: .rounded))
                        .foregroundColor(AppColors.primaryText)
                        .minimumScaleFactor(0.7)
                        .lineLimit(1)

                    if let item = selectedItem {
                        VStack(spacing: AppSpacing.xs) {
                            Text("Welcome to")
                                .font(.appBody)
                                .foregroundColor(AppColors.secondaryText)

                            Text(item.title)
                                .font(.appTitle2)
                                .foregroundColor(AppColors.primaryText)
                                .multilineTextAlignment(.center)
                        }
                    }

                    Text("Your journey begins now!")
                        .font(.appBody)
                        .foregroundColor(AppColors.secondaryText)
                        .multilineTextAlignment(.center)
                }

                // Action button
                Button(action: {
                    hapticNotification(type: .success)
                    withAnimation(.spring(response: 0.3)) {
                        showCongratsPopup = false
                    }
                }) {
                    HStack(spacing: AppSpacing.sm) {
                        Image(systemName: "sparkles")
                            .font(.system(size: 16, weight: .bold))
                        Text("Let's Go!")
                            .font(.appHeadline)
                        Image(systemName: "arrow.right.circle.fill")
                            .font(.system(size: 20))
                    }
                    .foregroundColor(.white)
                    .frame(width: 240)
                    .padding(.vertical, AppSpacing.md)
                    .background(
                        LinearGradient(
                            colors: [AppColors.success, AppColors.energy],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                    .cornerRadius(AppSpacing.pillCornerRadius)
                    .shadow(
                        color: AppColors.success.opacity(0.4),
                        radius: 12,
                        x: 0,
                        y: 6
                    )
                }
                .buttonStyle(SquishButtonStyle())
            }
            .padding(AppSpacing.xl)
            .background(
                LinearGradient(
                    colors: [
                        AppColors.surfaceElevated,
                        AppColors.surfaceElevated.opacity(0.95)
                    ],
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            )
            .cornerRadius(AppSpacing.largeCornerRadius)
            .overlay(
                RoundedRectangle(cornerRadius: AppSpacing.largeCornerRadius)
                    .strokeBorder(
                        LinearGradient(
                            colors: [AppColors.success.opacity(0.3), AppColors.energy.opacity(0.3)],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        ),
                        lineWidth: 2
                    )
            )
            .shadow(
                color: Color.black.opacity(0.2),
                radius: AppSpacing.Shadow.radiusLarge,
                x: 0,
                y: AppSpacing.Shadow.offsetYLarge
            )
            .padding(AppSpacing.xl)
        }
        .transition(.scale.combined(with: .opacity))
    }
}