//
//  RegionsStep.swift
//  SportsTime
//
//  Step 4 of the trip wizard - select geographic regions.
//

import SwiftUI

struct RegionsStep: View {
    @Environment(\.colorScheme) private var colorScheme
    @Binding var selectedRegions: Set<Region>

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

    var body: some View {
        VStack(alignment: .leading, spacing: Theme.Spacing.md) {
            StepHeader(
                title: "Where do you want to go?",
                subtitle: "Select one or more regions"
            )

            LazyVGrid(columns: columns, spacing: Theme.Spacing.sm) {
                ForEach(Region.allCases.filter { $0 != .crossCountry }) { region in
                    RegionCard(
                        region: region,
                        isSelected: selectedRegions.contains(region),
                        onTap: { toggleRegion(region) }
                    )
                }
            }

            if !selectedRegions.isEmpty {
                HStack {
                    Image(systemName: "mappin.circle.fill")
                        .foregroundStyle(Theme.warmOrange)
                    Text("\(selectedRegions.count) region\(selectedRegions.count == 1 ? "" : "s") selected")
                        .font(.subheadline)
                        .foregroundStyle(Theme.textSecondary(colorScheme))
                }
            }
        }
        .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 toggleRegion(_ region: Region) {
        if selectedRegions.contains(region) {
            selectedRegions.remove(region)
        } else {
            selectedRegions.insert(region)
        }
    }
}

// MARK: - Region Card

private struct RegionCard: View {
    @Environment(\.colorScheme) private var colorScheme
    let region: Region
    let isSelected: Bool
    let onTap: () -> Void

    var body: some View {
        Button(action: onTap) {
            VStack(spacing: Theme.Spacing.xs) {
                Image(systemName: region.iconName)
                    .font(.title)
                    .foregroundStyle(isSelected ? Theme.warmOrange : Theme.textSecondary(colorScheme))

                Text(region.shortName)
                    .font(.caption)
                    .fontWeight(.medium)
                    .foregroundStyle(isSelected ? Theme.warmOrange : Theme.textPrimary(colorScheme))
                    .multilineTextAlignment(.center)
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, Theme.Spacing.md)
            .background(isSelected ? Theme.warmOrange.opacity(0.1) : Color.clear)
            .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
            .overlay(
                RoundedRectangle(cornerRadius: Theme.CornerRadius.medium)
                    .stroke(isSelected ? Theme.warmOrange : Theme.textMuted(colorScheme).opacity(0.3), lineWidth: isSelected ? 2 : 1)
            )
        }
        .buttonStyle(.plain)
    }
}

// MARK: - Preview

#Preview {
    RegionsStep(selectedRegions: .constant([.east, .central]))
        .padding()
        .themedBackground()
}