import SwiftUI

struct TransportBar: View {
    @Bindable var model: ProjectModel
    var onSettings: () -> Void

    @State private var showTempo = false

    var body: some View {
        HStack(spacing: 18) {
            // Loop
            Button {
                model.looping.toggle()
            } label: {
                Image(systemName: "repeat")
                    .font(.title3)
                    .foregroundStyle(model.looping ? Color.accentColor : .secondary)
            }

            // Selection indicator / clear
            if let selection = model.selectedMeasures {
                Button {
                    model.selectedMeasures = nil
                } label: {
                    HStack(spacing: 3) {
                        Text(selection.count == 1
                             ? "m. \(selection.lowerBound + 1)"
                             : "m. \(selection.lowerBound + 1)–\(selection.upperBound + 1)")
                        Image(systemName: "xmark.circle.fill")
                    }
                    .font(.caption)
                    .padding(.horizontal, 8)
                    .padding(.vertical, 4)
                    .background(Capsule().fill(Color.accentColor.opacity(0.15)))
                }
            }

            Spacer()

            // Play/stop — the big control
            Button {
                model.togglePlay()
            } label: {
                Image(systemName: model.isPlaying ? "stop.circle.fill" : "play.circle.fill")
                    .font(.system(size: 44))
                    .foregroundStyle(model.recordPhase != .idle ? .red : Color.accentColor)
            }

            Spacer()

            // Tempo
            Button {
                showTempo.toggle()
            } label: {
                VStack(spacing: 0) {
                    Image(systemName: "metronome")
                        .font(.title3)
                    Text("×\(model.tempoMultiplier, specifier: "%.2f")")
                        .font(.system(size: 9).monospacedDigit())
                }
                .foregroundStyle(.secondary)
            }
            .popover(isPresented: $showTempo) {
                VStack(spacing: 8) {
                    Text("Tempo ×\(model.tempoMultiplier, specifier: "%.2f")")
                        .font(.headline.monospacedDigit())
                    Slider(value: $model.tempoMultiplier, in: 0.5...1.5, step: 0.05) {
                        Text("Tempo")
                    } onEditingChanged: { editing in
                        if !editing { model.tempoChanged() }
                    }
                    .frame(width: 240)
                    if !model.mismatchedTakeParts.isEmpty {
                        Text("Recorded takes only play at their recorded tempo")
                            .font(.caption2)
                            .foregroundStyle(.orange)
                    }
                    Button("Reset") {
                        model.tempoMultiplier = 1.0
                        model.tempoChanged()
                    }
                    .font(.caption)
                }
                .padding()
                .presentationCompactAdaptation(.popover)
            }

            // Settings
            Button(action: onSettings) {
                Image(systemName: "gearshape")
                    .font(.title3)
                    .foregroundStyle(.secondary)
            }
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 8)
        .background(.bar)
    }
}