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

import SwiftUI
import SDWebImage
import SDWebImageSwiftUI


struct OccupationList: View {
    @EnvironmentObject var webSocketService: WebSocketService
    @State private var selectedItem: OccupationClass?
    @State private var showCongratsPopup: Bool = false
    @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) {
                    // Motivational header
                    VStack(spacing: AppSpacing.sm) {
                        HStack {
                            Image(systemName: "briefcase.circle.fill")
                                .font(.system(size: 40))
                                .foregroundStyle(
                                    LinearGradient(
                                        colors: [AppColors.primary, AppColors.accent],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    )
                                )

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

                                Text("Find the perfect opportunity")
                                    .font(.appBody)
                                    .foregroundColor(AppColors.secondaryText)
                            }

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

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

                // Congrats overlay
                if showCongratsPopup {
                    congratsOverlay
                }
            }
            .navigationTitle("Job Opportunities")
            .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
                                )
                            )
                    }
                }
            }
        }
    }

    // MARK: - Occupation Card
    @ViewBuilder
    private func occupationCard(for item: OccupationClass) -> some View {
        let qualifies = doesUserQualify(userEducation: webSocketService.person.education, for: item.requirements)

        BaseCard(
            backgroundColor: AppColors.surfaceElevated,
            showShadow: true,
            enableAnimation: false
        ) {
            VStack(alignment: .leading, spacing: AppSpacing.md) {
                // Header with title and badge
                HStack(alignment: .top, spacing: AppSpacing.sm) {
                    // Career icon
                    ZStack {
                        Circle()
                            .fill(
                                LinearGradient(
                                    colors: qualifies ?
                                        [AppColors.primary, AppColors.accent] :
                                        [AppColors.secondaryText.opacity(0.3), AppColors.secondaryText.opacity(0.2)],
                                    startPoint: .topLeading,
                                    endPoint: .bottomTrailing
                                )
                            )
                            .frame(width: 50, height: 50)

                        Image(systemName: "briefcase.fill")
                            .font(.system(size: 24, weight: .semibold))
                            .foregroundColor(.white)
                    }
                    .shadow(
                        color: qualifies ? AppColors.primary.opacity(0.3) : Color.clear,
                        radius: 8,
                        x: 0,
                        y: 4
                    )
                    .frame(width: 50)

                    VStack(alignment: .leading, spacing: AppSpacing.xs) {
                        Text(item.title)
                            .font(.appTitle2)
                            .foregroundColor(AppColors.primaryText)
                            .lineLimit(2)
                            .fixedSize(horizontal: false, vertical: true)

                        // Qualification badge
                        qualificationBadge(qualifies: qualifies)
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                }

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

                // Requirements section
                VStack(alignment: .leading, spacing: AppSpacing.sm) {
                    HStack(spacing: 6) {
                        Image(systemName: "graduationcap.fill")
                            .font(.system(size: 12))
                            .foregroundColor(AppColors.intelligence)
                        Text("Requirements")
                            .font(.appCaptionBold)
                            .foregroundColor(AppColors.primaryText)
                            .textCase(.uppercase)
                            .kerning(0.5)
                    }

                    HStack(spacing: AppSpacing.sm) {
                        Text(formatEducationString(item.requirements))
                            .font(.appBody)
                            .foregroundColor(AppColors.primaryText)
                            .lineLimit(2)
                            .fixedSize(horizontal: false, vertical: true)
                            .frame(maxWidth: .infinity, alignment: .leading)

                        Image(systemName: qualifies ? "checkmark.circle.fill" : "xmark.circle.fill")
                            .font(.system(size: 16))
                            .foregroundColor(qualifies ? AppColors.success : AppColors.error)
                            .frame(width: 16)
                    }
                    .padding(AppSpacing.md)
                    .background(
                        LinearGradient(
                            colors: [
                                AppColors.background,
                                AppColors.background.opacity(0.5)
                            ],
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
                    .cornerRadius(AppSpacing.cornerRadius)
                    .overlay(
                        RoundedRectangle(cornerRadius: AppSpacing.cornerRadius)
                            .strokeBorder(
                                qualifies ? AppColors.success.opacity(0.3) : AppColors.error.opacity(0.2),
                                lineWidth: 1.5
                            )
                    )
                }

                // Apply button with enhanced design
                Button(action: {
                    hapticFeedback(style: .medium)
                    let message = WebSocketCommands.applyForJob(item.id)
                    webSocketService.sendMessage(message: message)
                    selectedItem = item
                    withAnimation(.spring(response: 0.3)) {
                        showCongratsPopup = true
                    }
                }) {
                    HStack(spacing: AppSpacing.sm) {
                        Image(systemName: "paperplane.fill")
                            .font(.system(size: 16, weight: .semibold))
                        Text("Apply Now")
                            .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.primary, AppColors.primaryDark],
                            startPoint: .leading,
                            endPoint: .trailing
                        )
                    )
                    .cornerRadius(AppSpacing.largeCornerRadius)
                    .shadow(
                        color: AppColors.primary.opacity(0.4),
                        radius: AppSpacing.Shadow.radiusSoft,
                        x: 0,
                        y: AppSpacing.Shadow.offsetY
                    )
                }
                .buttonStyle(SquishButtonStyle())
            }
        }
    }

    // MARK: - Qualification Badge
    @ViewBuilder
    private func qualificationBadge(qualifies: Bool) -> some View {
        HStack(spacing: 6) {
            Image(systemName: qualifies ? "checkmark.seal.fill" : "exclamationmark.triangle.fill")
                .font(.system(size: 12, weight: .bold))
            Text(qualifies ? "Qualified" : "Not Qualified")
                .font(.appCaptionBold)
        }
        .foregroundColor(qualifies ? AppColors.success : AppColors.error)
        .padding(.horizontal, 10)
        .padding(.vertical, 6)
        .background(
            LinearGradient(
                colors: [
                    (qualifies ? AppColors.success : AppColors.error).opacity(0.2),
                    (qualifies ? AppColors.success : AppColors.error).opacity(0.15)
                ],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
        )
        .cornerRadius(AppSpacing.pillCornerRadius)
        .overlay(
            RoundedRectangle(cornerRadius: AppSpacing.pillCornerRadius)
                .strokeBorder(
                    (qualifies ? AppColors.success : AppColors.error).opacity(0.3),
                    lineWidth: 1
                )
        )
    }

    // 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
                ZStack {
                    // Animated outer rings
                    Circle()
                        .fill(
                            LinearGradient(
                                colors: [AppColors.success.opacity(0.2), AppColors.primary.opacity(0.2)],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .frame(width: 140, height: 140)
                        .overlay(
                            Circle()
                                .strokeBorder(
                                    LinearGradient(
                                        colors: [AppColors.success, AppColors.primary],
                                        startPoint: .topLeading,
                                        endPoint: .bottomTrailing
                                    ),
                                    lineWidth: 3
                                )
                        )

                    Circle()
                        .fill(
                            LinearGradient(
                                colors: [AppColors.success, AppColors.energy],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )
                        .frame(width: 100, height: 100)
                        .overlay(
                            Image(systemName: "briefcase.fill")
                                .font(.system(size: 44, weight: .bold))
                                .foregroundColor(.white)
                        )
                        .shadow(
                            color: AppColors.success.opacity(0.4),
                            radius: 20,
                            x: 0,
                            y: 10
                        )
                }

                // Celebration message
                VStack(spacing: AppSpacing.md) {
                    Image(systemName: "checkmark.seal.fill")
                        .font(.system(size: 32))
                        .foregroundStyle(
                            LinearGradient(
                                colors: [AppColors.success, AppColors.energy],
                                startPoint: .topLeading,
                                endPoint: .bottomTrailing
                            )
                        )

                    Text("Congratulations!")
                        .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("You got the job as")
                                .font(.appBody)
                                .foregroundColor(AppColors.secondaryText)

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

                    Text("Your career journey begins!")
                        .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: "star.fill")
                            .font(.system(size: 16, weight: .bold))
                        Text("Awesome!")
                            .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.primary.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))
    }
}

struct Preview: PreviewProvider {
    static var previews: some View {
        OccupationList()
//            .environmentObject(WebSocketService()) // Ensure you provide a WebSocketService instance here for the preview
    }
}