//
//  RepeatCitiesStep.swift
//  SportsTime
//
//  Step 6 of the trip wizard - allow repeat city visits.
//

import SwiftUI

struct RepeatCitiesStep: View {
    @Environment(\.colorScheme) private var colorScheme
    @Binding var allowRepeatCities: Bool
    @Binding var hasSetRepeatCities: Bool

    var body: some View {
        VStack(alignment: .leading, spacing: Theme.Spacing.md) {
            StepHeader(
                title: "Visit cities more than once?",
                subtitle: "Some trips work better with return visits"
            )

            HStack(spacing: Theme.Spacing.md) {
                OptionButton(
                    title: "No, unique cities only",
                    icon: "arrow.right",
                    isSelected: hasSetRepeatCities && !allowRepeatCities,
                    onTap: {
                        allowRepeatCities = false
                        hasSetRepeatCities = true
                    }
                )

                OptionButton(
                    title: "Yes, allow repeats",
                    icon: "arrow.triangle.2.circlepath",
                    isSelected: hasSetRepeatCities && allowRepeatCities,
                    onTap: {
                        allowRepeatCities = true
                        hasSetRepeatCities = 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: - Option Button

private struct OptionButton: View {
    @Environment(\.colorScheme) private var colorScheme
    let title: String
    let icon: String
    let isSelected: Bool
    let onTap: () -> Void

    var body: some View {
        Button(action: onTap) {
            VStack(spacing: Theme.Spacing.sm) {
                Image(systemName: icon)
                    .font(.title2)
                    .foregroundStyle(isSelected ? Theme.warmOrange : Theme.textSecondary(colorScheme))

                Text(title)
                    .font(.caption)
                    .fontWeight(.medium)
                    .foregroundStyle(isSelected ? Theme.warmOrange : Theme.textPrimary(colorScheme))
                    .multilineTextAlignment(.center)
            }
            .frame(maxWidth: .infinity)
            .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: - Preview

#Preview {
    RepeatCitiesStep(
        allowRepeatCities: .constant(false),
        hasSetRepeatCities: .constant(true)
    )
    .padding()
    .themedBackground()
}
