//
//  ActivityButton.swift
//  lichunWebsocket
//
//  Button component for displaying activity with performance metrics
//

import SwiftUI
import SDWebImageSwiftUI

struct ActivityButton: View {
    var activity: ActivityProtocol
    var matchingRecord: ActivityRecord?
    var action: () -> Void

    var body: some View {
        Button(action: {
            hapticFeedback(style: .light)
            action()
        }) {
            HStack(spacing: AppSpacing.md) {
                // Activity Image with gradient border
                WebImage(url: URL(string: activity.image))
                    .onSuccess { image, data, cacheType in
                        print("🎯 ActivityImage: ✅ Loaded '\(activity.title)' - size: \(image.size), cache: \(cacheType)")
                    }
                    .onFailure { error in
                        print("🎯 ActivityImage: ❌ Failed '\(activity.title)' - URL: \(activity.image) - Error: \(error.localizedDescription)")
                    }
                    .resizable()
                    .placeholder {
                        ZStack {
                            Circle()
                                .fill(AppColors.surfaceSubtle)
                            ProgressView()
                                .tint(AppColors.primary)
                        }
                        .onAppear {
                            print("🎯 ActivityImage: 🔄 Loading '\(activity.title)' from: \(activity.image)")
                        }
                    }
                    .indicator(.activity)
                    .scaledToFill()
                    .frame(width: 60, height: 60)
                    .clipShape(Circle())
                    .overlay(
                        Circle()
                            .strokeBorder(
                                LinearGradient(
                                    colors: [AppColors.primary, AppColors.accent],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                ),
                                lineWidth: 3
                            )
                    )
                    .shadow(
                        color: AppColors.primary.opacity(0.25),
                        radius: 8,
                        x: 0,
                        y: 4
                    )

                // Activity Info
                VStack(alignment: .leading, spacing: AppSpacing.xs) {
                    Text(activity.title)
                        .font(.appHeadline)
                        .foregroundColor(AppColors.primaryText)
                        .lineLimit(2)
                        .fixedSize(horizontal: false, vertical: true)

                    if let level = matchingRecord?.level {
                        HStack(spacing: 6) {
                            Image(systemName: "briefcase.fill")
                                .font(.system(size: 10))
                                .foregroundColor(AppColors.secondary)
                            Text(level.level)
                                .font(.appCaption)
                                .foregroundColor(AppColors.secondaryText)
                                .lineLimit(1)
                        }

                        if let performance = matchingRecord?.performance {
                            VStack(alignment: .leading, spacing: 4) {
                                HStack {
                                    Text("Performance")
                                        .font(.appCaption)
                                        .foregroundColor(AppColors.secondaryText)
                                    Spacer()
                                    Text("\(Int(performance))%")
                                        .font(.appCaptionBold)
                                        .foregroundColor(performanceColor(Double(performance)))
                                }

                                GeometryReader { geometry in
                                    ZStack(alignment: .leading) {
                                        RoundedRectangle(cornerRadius: 6)
                                            .fill(AppColors.background)
                                            .frame(height: 8)

                                        RoundedRectangle(cornerRadius: 6)
                                            .fill(
                                                LinearGradient(
                                                    colors: performanceGradient(Double(performance)),
                                                    startPoint: .leading,
                                                    endPoint: .trailing
                                                )
                                            )
                                            .frame(width: geometry.size.width * CGFloat(performance) / 100.0, height: 8)
                                    }
                                }
                                .frame(height: 8)
                            }
                        }
                    }

                    // Education specific display
                    if let educationRec = matchingRecord as? EducationRecord {
                        let level = educationRec.educationLevel
                        let gpaValue = educationRec.GPA
                        let gpa = GPpercentToGPA(GPPercent: Int(gpaValue.rounded(toPlaces: 1)))

                        HStack(spacing: 6) {
                            Image(systemName: "graduationcap.fill")
                                .font(.system(size: 10))
                                .foregroundColor(AppColors.intelligence)
                            Text("\(level) • GPA \(String(format: "%.1f", gpa))")
                                .font(.appCaption)
                                .foregroundColor(AppColors.secondaryText)
                                .lineLimit(1)
                        }

                        VStack(alignment: .leading, spacing: 4) {
                            HStack {
                                Text("Academic Performance")
                                    .font(.appCaption)
                                    .foregroundColor(AppColors.secondaryText)
                                Spacer()
                                Text("\(Int(gpaValue))%")
                                    .font(.appCaptionBold)
                                    .foregroundColor(performanceColor(gpaValue))
                            }

                            GeometryReader { geometry in
                                ZStack(alignment: .leading) {
                                    RoundedRectangle(cornerRadius: 6)
                                        .fill(AppColors.background)
                                        .frame(height: 8)

                                    RoundedRectangle(cornerRadius: 6)
                                        .fill(
                                            LinearGradient(
                                                colors: [AppColors.intelligence, AppColors.prestige],
                                                startPoint: .leading,
                                                endPoint: .trailing
                                            )
                                        )
                                        .frame(width: geometry.size.width * CGFloat(gpaValue) / 100.0, height: 8)
                                }
                            }
                            .frame(height: 8)
                        }
                    }
                }
                .frame(maxWidth: .infinity, alignment: .leading)

                Spacer(minLength: AppSpacing.sm)

                // Chevron indicator
                Image(systemName: "chevron.right")
                    .font(.system(size: 14, weight: .semibold))
                    .foregroundColor(AppColors.secondaryText.opacity(0.5))
                    .frame(width: 14)
            }
            .padding(AppSpacing.md)
            .background(
                LinearGradient(
                    colors: [
                        AppColors.surfaceElevated,
                        AppColors.surfaceElevated.opacity(0.95)
                    ],
                    startPoint: .topLeading,
                    endPoint: .bottomTrailing
                )
            )
            .cornerRadius(AppSpacing.largeCornerRadius)
            .overlay(
                RoundedRectangle(cornerRadius: AppSpacing.largeCornerRadius)
                    .strokeBorder(
                        AppColors.primaryText.opacity(0.05),
                        lineWidth: 1
                    )
            )
            .shadow(
                color: Color.black.opacity(0.08),
                radius: AppSpacing.Shadow.radiusSoft,
                x: 0,
                y: AppSpacing.Shadow.offsetY
            )
        }
        .buttonStyle(SquishButtonStyle())
    }

    // MARK: - Helper Functions

    private func performanceColor(_ value: Double) -> Color {
        if value >= 75 {
            return AppColors.success
        } else if value >= 50 {
            return AppColors.accent
        } else {
            return AppColors.error
        }
    }

    private func performanceGradient(_ value: Double) -> [Color] {
        if value >= 75 {
            return [AppColors.success, AppColors.energy]
        } else if value >= 50 {
            return [AppColors.accent, AppColors.secondary]
        } else {
            return [AppColors.error, AppColors.error.opacity(0.7)]
        }
    }
}

// MARK: - Preview
// Preview removed - requires proper model initialization