import SwiftUI

/// One running ride, with the numbers already computed so the bar does no arithmetic.
struct RunningRide: Identifiable {
    let ride: RideResponse
    let elapsedSeconds: Int
    let fare: Double

    var id: String { ride.id }
}

/// The rides this rider has going right now, shown over the map.
///
/// A rider can hold several scooters at once (for a friend, for a family), so a ride that is not
/// on screen still has a meter running. This bar keeps those visible and one tap away: without
/// it, starting a second ride would bury the first.
///
/// Deliberately not a sheet. It sits above the scan control and stays out of the way, because the
/// map is still the primary surface while a ride is running.
struct RunningRidesBar: View {
    let rides: [RunningRide]
    let onOpen: (RideResponse) -> Void

    var body: some View {
        if !rides.isEmpty {
            VStack(alignment: .leading, spacing: 6) {
                Text(
                    rides.count == 1
                        ? "running_rides_one".localized
                        : String(format: "running_rides_many".localized, rides.count)
                )
                .font(.beebCaption)
                .foregroundStyle(Color.muted)
                .padding(.leading, 4)

                ScrollView(.horizontal, showsIndicators: false) {
                    HStack(spacing: 10) {
                        ForEach(rides) { running in
                            RunningRideCard(running: running, onOpen: onOpen)
                        }
                    }
                }
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.horizontal, 16)
        }
    }
}

private struct RunningRideCard: View {
    let running: RunningRide
    let onOpen: (RideResponse) -> Void

    var body: some View {
        Button {
            onOpen(running.ride)
        } label: {
            HStack(spacing: 10) {
                Image(systemName: "scooter")
                    .foregroundStyle(Color.brand)
                VStack(alignment: .leading, spacing: 2) {
                    Text(running.ride.qrCode ?? String(running.ride.id.prefix(8)).uppercased())
                        .font(.beebCaption)
                        .foregroundStyle(Color.muted)
                    HStack(spacing: 8) {
                        Text(RideFormat.duration(running.elapsedSeconds))
                            .font(.beebNumeric)
                            .fontWeight(.bold)
                        Text(RideFormat.money(running.fare, running.ride.currency))
                            .font(.beebNumeric)
                            .foregroundStyle(Color.brand)
                    }
                }
            }
            .padding(.horizontal, 14)
            .padding(.vertical, 10)
            .background(Color.surfaceRaised)
            .clipShape(RoundedRectangle(cornerRadius: BeebRadius.card))
            .overlay(
                RoundedRectangle(cornerRadius: BeebRadius.card)
                    .strokeBorder(Color.lineStrong, lineWidth: 1)
            )
        }
        .buttonStyle(.plain)
    }
}