//
//  RoutePreferenceStep.swift
//  SportsTime
//
//  Step 5 of the trip wizard - select route preference.
//

import SwiftUI

struct RoutePreferenceStep: View {
    @Environment(\.colorScheme) private var colorScheme
    @Binding var routePreference: RoutePreference
    @Binding var hasSetRoutePreference: Bool

    var body: some View {
        VStack(alignment: .leading, spacing: Theme.Spacing.md) {
            StepHeader(
                title: "What's your route preference?",
                subtitle: "Balance efficiency vs. exploration"
            )

            VStack(spacing: Theme.Spacing.sm) {
                ForEach(RoutePreference.allCases) { preference in
                    RoutePreferenceCard(
                        preference: preference,
                        isSelected: hasSetRoutePreference && routePreference == preference,
                        onTap: {
                            routePreference = preference
                            hasSetRoutePreference = true
                        }
                    )
                }
            }
        }
        .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)
        }
    }
}

// MARK: - Route Preference Card

private struct RoutePreferenceCard: View {
    @Environment(\.colorScheme) private var colorScheme
    let preference: RoutePreference
    let isSelected: Bool
    let onTap: () -> Void

    var body: some View {
        Button(action: onTap) {
            HStack(spacing: Theme.Spacing.md) {
                Image(systemName: preference.iconName)
                    .font(.title2)
                    .foregroundStyle(isSelected ? Theme.warmOrange : Theme.textSecondary(colorScheme))
                    .frame(width: 32)

                VStack(alignment: .leading, spacing: 2) {
                    Text(preference.displayName)
                        .font(.headline)
                        .foregroundStyle(Theme.textPrimary(colorScheme))

                    Text(preference.descriptionText)
                        .font(.caption)
                        .foregroundStyle(Theme.textMuted(colorScheme))
                }

                Spacer()

                if isSelected {
                    Image(systemName: "checkmark.circle.fill")
                        .foregroundStyle(Theme.warmOrange)
                }
            }
            .padding(Theme.Spacing.md)
            .background(isSelected ? Theme.warmOrange.opacity(0.1) : Color.clear)
            .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
            .contentShape(Rectangle())
            .overlay(
                RoundedRectangle(cornerRadius: Theme.CornerRadius.medium)
                    .stroke(isSelected ? Theme.warmOrange : Theme.textMuted(colorScheme).opacity(0.3), lineWidth: isSelected ? 2 : 1)
            )
        }
        .buttonStyle(.plain)
    }
}

// MARK: - RoutePreference Extensions

extension RoutePreference {
    var iconName: String {
        switch self {
        case .direct: return "bolt.fill"
        case .scenic: return "binoculars.fill"
        case .balanced: return "scale.3d"
        }
    }

    var descriptionText: String {
        switch self {
        case .direct: return "Minimize driving time between games"
        case .scenic: return "Prioritize interesting stops and routes"
        case .balanced: return "Mix of efficiency and exploration"
        }
    }
}

// MARK: - Preview

#Preview {
    RoutePreferenceStep(
        routePreference: .constant(.balanced),
        hasSetRoutePreference: .constant(true)
    )
    .padding()
    .themedBackground()
}