//
//  DatesStep.swift
//  SportsTime
//
//  Step 3 of the trip wizard - select travel dates.
//

import SwiftUI

struct DatesStep: View {
    @Environment(\.colorScheme) private var colorScheme
    @Binding var startDate: Date
    @Binding var endDate: Date
    @Binding var hasSetDates: Bool
    let onDatesChanged: () -> Void

    var body: some View {
        VStack(alignment: .leading, spacing: Theme.Spacing.md) {
            StepHeader(
                title: "When would you like to travel?",
                subtitle: "Pick your trip dates"
            )

            VStack(spacing: Theme.Spacing.md) {
                DatePicker(
                    "Start Date",
                    selection: $startDate,
                    in: Date()...,
                    displayedComponents: .date
                )
                .datePickerStyle(.compact)
                .onChange(of: startDate) { _, newValue in
                    // Ensure end date is after start date
                    if endDate < newValue {
                        endDate = newValue.addingTimeInterval(86400)
                    }
                    hasSetDates = true
                    onDatesChanged()
                }

                DatePicker(
                    "End Date",
                    selection: $endDate,
                    in: startDate...,
                    displayedComponents: .date
                )
                .datePickerStyle(.compact)
                .onChange(of: endDate) { _, _ in
                    hasSetDates = true
                    onDatesChanged()
                }
            }
            .padding(Theme.Spacing.sm)
            .background(Theme.cardBackgroundElevated(colorScheme))
            .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))

            // Trip duration indicator
            HStack {
                Image(systemName: "calendar.badge.clock")
                    .foregroundStyle(Theme.textMuted(colorScheme))
                Text(durationText)
                    .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 var durationText: String {
        let days = Calendar.current.dateComponents([.day], from: startDate, to: endDate).day ?? 0
        if days == 0 {
            return "Same day trip"
        } else if days == 1 {
            return "1 day trip"
        } else {
            return "\(days) day trip"
        }
    }
}

// MARK: - Preview

#Preview {
    DatesStep(
        startDate: .constant(Date()),
        endDate: .constant(Date().addingTimeInterval(86400 * 5)),
        hasSetDates: .constant(true),
        onDatesChanged: {}
    )
    .padding()
    .themedBackground()
}