//
//  TravelItemRow.swift
//  SportsTime
//
//  Row view for displaying travel segments in the itinerary.
//  Uses gold/amber styling and includes a drag handle for reordering.
//

import SwiftUI

struct TravelItemRow: View {
    let item: ItineraryItem
    let isHighlighted: Bool

    @Environment(\.colorScheme) private var colorScheme

    private var travelInfo: TravelInfo? {
        item.travelInfo
    }

    var body: some View {
        HStack(spacing: Theme.Spacing.md) {
            // Drag handle
            Image(systemName: "line.3.horizontal")
                .font(.title3)
                .foregroundStyle(Theme.textMuted(colorScheme))

            // Car icon
            ZStack {
                Circle()
                    .fill(Theme.routeGold.opacity(0.2))
                    .frame(width: 36, height: 36)

                Image(systemName: "car.fill")
                    .font(.body)
                    .foregroundStyle(Theme.routeGold)
            }

            VStack(alignment: .leading, spacing: 2) {
                if let info = travelInfo {
                    Text("\(info.fromCity) \u{2192} \(info.toCity)")
                        .font(.body)
                        .foregroundStyle(Theme.textPrimary(colorScheme))

                    HStack(spacing: Theme.Spacing.xs) {
                        if !info.formattedDistance.isEmpty {
                            Text(info.formattedDistance)
                                .font(.caption)
                        }
                        if !info.formattedDistance.isEmpty && !info.formattedDuration.isEmpty {
                            Text("\u{2022}")
                        }
                        if !info.formattedDuration.isEmpty {
                            Text(info.formattedDuration)
                                .font(.caption)
                        }
                    }
                    .foregroundStyle(Theme.textSecondary(colorScheme))
                }
            }

            Spacer()
        }
        .padding(Theme.Spacing.md)
        .background(Theme.cardBackground(colorScheme))
        .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
        .overlay {
            RoundedRectangle(cornerRadius: Theme.CornerRadius.medium)
                .strokeBorder(isHighlighted ? Theme.routeGold : Theme.routeGold.opacity(0.3), lineWidth: isHighlighted ? 2 : 1)
        }
    }
}

#Preview {
    let travelInfo = TravelInfo(
        fromCity: "Boston",
        toCity: "New York",
        distanceMeters: 350000,
        durationSeconds: 14400
    )
    let item = ItineraryItem(
        tripId: UUID(),
        day: 1,
        sortOrder: 1.0,
        kind: .travel(travelInfo)
    )

    VStack(spacing: 16) {
        TravelItemRow(item: item, isHighlighted: false)
        TravelItemRow(item: item, isHighlighted: true)
    }
    .padding()
    .background(Color.gray.opacity(0.1))
}