//
//  ReviewStep.swift
//  SportsTime
//
//  Step 8 of the trip wizard - review and submit.
//

import SwiftUI

struct ReviewStep: View {
    @Environment(\.colorScheme) private var colorScheme
    let planningMode: PlanningMode
    let selectedSports: Set<Sport>
    let startDate: Date
    let endDate: Date
    let selectedRegions: Set<Region>
    let routePreference: RoutePreference
    let allowRepeatCities: Bool
    let mustStopLocations: [LocationInput]
    let isPlanning: Bool
    let canPlanTrip: Bool
    let onPlan: () -> Void

    var body: some View {
        VStack(alignment: .leading, spacing: Theme.Spacing.md) {
            StepHeader(
                title: "Ready to plan your trip!",
                subtitle: "Review your selections"
            )

            VStack(alignment: .leading, spacing: Theme.Spacing.sm) {
                ReviewRow(label: "Mode", value: planningMode.displayName)
                ReviewRow(label: "Sports", value: selectedSports.map(\.rawValue).sorted().joined(separator: ", "))
                ReviewRow(label: "Dates", value: dateRangeText)
                ReviewRow(label: "Regions", value: selectedRegions.map(\.shortName).sorted().joined(separator: ", "))
                ReviewRow(label: "Route", value: routePreference.displayName)
                ReviewRow(label: "Repeat cities", value: allowRepeatCities ? "Yes" : "No")

                if !mustStopLocations.isEmpty {
                    ReviewRow(label: "Must-stops", value: mustStopLocations.map(\.name).joined(separator: ", "))
                }
            }
            .padding(Theme.Spacing.sm)
            .background(Theme.cardBackgroundElevated(colorScheme))
            .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))

            Button(action: onPlan) {
                HStack(spacing: Theme.Spacing.sm) {
                    if isPlanning {
                        LoadingSpinner(size: .small)
                            .colorScheme(.dark)  // Force white on orange button
                    }
                    Text(isPlanning ? "Planning..." : "Plan My Trip")
                        .fontWeight(.semibold)
                }
                .frame(maxWidth: .infinity)
                .padding(Theme.Spacing.md)
                .background(canPlanTrip ? Theme.warmOrange : Theme.textMuted(colorScheme))
                .foregroundStyle(.white)
                .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
            }
            .disabled(!canPlanTrip || isPlanning)
        }
        .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 var dateRangeText: String {
        let formatter = DateFormatter()
        formatter.dateStyle = .medium
        return "\(formatter.string(from: startDate)) - \(formatter.string(from: endDate))"
    }
}

// MARK: - Review Row

private struct ReviewRow: View {
    @Environment(\.colorScheme) private var colorScheme
    let label: String
    let value: String

    var body: some View {
        HStack(alignment: .top) {
            Text(label)
                .font(.caption)
                .foregroundStyle(Theme.textMuted(colorScheme))
                .frame(width: 80, alignment: .leading)

            Text(value)
                .font(.subheadline)
                .foregroundStyle(Theme.textPrimary(colorScheme))

            Spacer()
        }
    }
}

// MARK: - Preview

#Preview {
    ReviewStep(
        planningMode: .dateRange,
        selectedSports: [.mlb, .nba],
        startDate: Date(),
        endDate: Date().addingTimeInterval(86400 * 7),
        selectedRegions: [.east, .central],
        routePreference: .balanced,
        allowRepeatCities: false,
        mustStopLocations: [],
        isPlanning: false,
        canPlanTrip: true,
        onPlan: {}
    )
    .padding()
    .themedBackground()
}