//
//  MustStopsStep.swift
//  SportsTime
//
//  Step 7 of the trip wizard - add must-stop locations.
//

import SwiftUI

struct MustStopsStep: View {
    @Environment(\.colorScheme) private var colorScheme
    @Binding var mustStopLocations: [LocationInput]
    @State private var showLocationSearch = false

    var body: some View {
        VStack(alignment: .leading, spacing: Theme.Spacing.md) {
            StepHeader(
                title: "Any must-stop locations?",
                subtitle: "Optional - add cities you want to visit"
            )

            if !mustStopLocations.isEmpty {
                VStack(spacing: Theme.Spacing.xs) {
                    ForEach(mustStopLocations, id: \.name) { location in
                        HStack {
                            Image(systemName: "mappin.circle.fill")
                                .foregroundStyle(Theme.warmOrange)
                                .accessibilityHidden(true)

                            Text(location.name)
                                .font(.subheadline)
                                .foregroundStyle(Theme.textPrimary(colorScheme))

                            Spacer()

                            Button {
                                mustStopLocations.removeAll { $0.name == location.name }
                            } label: {
                                Image(systemName: "xmark.circle.fill")
                                    .foregroundStyle(Theme.textMuted(colorScheme))
                            }
                            .minimumHitTarget()
                            .accessibilityLabel("Remove location")
                        }
                        .padding(Theme.Spacing.sm)
                        .background(Theme.cardBackgroundElevated(colorScheme))
                        .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
                    }
                }
            }

            Button {
                showLocationSearch = true
            } label: {
                HStack {
                    Image(systemName: "plus.circle.fill")
                    Text(mustStopLocations.isEmpty ? "Add a location" : "Add another")
                }
                .font(.subheadline)
                .foregroundStyle(Theme.warmOrange)
            }
            .accessibilityLabel("Add must-see location")

            Text("Skip this step if you don't have specific cities in mind")
                .font(.caption)
                .foregroundStyle(Theme.textMuted(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)
        }
        .sheet(isPresented: $showLocationSearch) {
            LocationSearchSheet(inputType: .mustStop) { location in
                mustStopLocations.append(location)
            }
        }
    }
}

// MARK: - Preview

#Preview {
    MustStopsStep(mustStopLocations: .constant([]))
        .padding()
        .themedBackground()
}