//
//  SportsStep.swift
//  SportsTime
//
//  Step 3 of the trip wizard - select sports leagues.
//

import SwiftUI

struct SportsStep: View {
    @Environment(\.colorScheme) private var colorScheme
    @Binding var selectedSports: Set<Sport>
    let sportAvailability: [Sport: Bool]
    let isLoading: Bool
    let canSelectSport: (Sport) -> Bool

    private let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: Theme.Spacing.md) {
            StepHeader(
                title: "Which sports interest you?",
                subtitle: "Select one or more leagues"
            )

            if isLoading {
                LoadingSpinner(size: .small, label: "Checking availability...")
                    .padding(.vertical, Theme.Spacing.sm)
            }

            LazyVGrid(columns: columns, spacing: Theme.Spacing.sm) {
                ForEach(Sport.supported, id: \.self) { sport in
                    SportCard(
                        sport: sport,
                        isSelected: selectedSports.contains(sport),
                        isAvailable: canSelectSport(sport),
                        onTap: {
                            if canSelectSport(sport) {
                                toggleSport(sport)
                            }
                        }
                    )
                }
            }
        }
        .padding(Theme.Spacing.lg)
        .background(Theme.cardBackground(colorScheme))
        .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
        .overlay {
            RoundedRectangle(cornerRadius: Theme.CornerRadius.large)
                .stroke(Theme.surfaceGlow(colorScheme), lineWidth: 1)
        }
    }

    private func toggleSport(_ sport: Sport) {
        if selectedSports.contains(sport) {
            selectedSports.remove(sport)
        } else {
            selectedSports.insert(sport)
        }
    }
}

// MARK: - Sport Card

private struct SportCard: View {
    @Environment(\.colorScheme) private var colorScheme
    let sport: Sport
    let isSelected: Bool
    let isAvailable: Bool
    let onTap: () -> Void

    var body: some View {
        Button(action: onTap) {
            VStack(spacing: Theme.Spacing.xs) {
                Image(systemName: sport.iconName)
                    .font(.title2)
                    .foregroundStyle(cardColor)

                Text(sport.rawValue)
                    .font(.caption)
                    .fontWeight(.medium)
                    .foregroundStyle(cardColor)

                Text(isAvailable ? " " : "No games")
                    .font(.caption2)
                    .foregroundStyle(Theme.textMuted(colorScheme))
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, Theme.Spacing.md)
            .background(backgroundColor)
            .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
            .contentShape(Rectangle())
            .overlay(
                RoundedRectangle(cornerRadius: Theme.CornerRadius.medium)
                    .stroke(borderColor, lineWidth: isSelected ? 2 : 1)
            )
        }
        .buttonStyle(.plain)
        .opacity(isAvailable ? 1.0 : 0.5)
        .disabled(!isAvailable)
    }

    private var cardColor: Color {
        if !isAvailable { return Theme.textMuted(colorScheme) }
        return isSelected ? sport.themeColor : Theme.textSecondary(colorScheme)
    }

    private var backgroundColor: Color {
        if !isAvailable { return Theme.textMuted(colorScheme).opacity(0.1) }
        return isSelected ? sport.themeColor.opacity(0.15) : Color.clear
    }

    private var borderColor: Color {
        if !isAvailable { return Theme.textMuted(colorScheme).opacity(0.3) }
        return isSelected ? sport.themeColor : Theme.textMuted(colorScheme).opacity(0.3)
    }
}

// MARK: - Preview

#Preview {
    SportsStep(
        selectedSports: .constant([.mlb]),
        sportAvailability: [.mlb: true, .nba: true, .wnba: false],
        isLoading: false,
        canSelectSport: { sport in sport != .wnba }
    )
    .padding()
    .themedBackground()
}
