import SwiftUI

// MARK: - iOS Transport Bar

/// Bottom transport bar for iPhone/iPad with play, stop, and record controls.
/// Designed to be thumb-friendly at the bottom of the screen.
struct TransportBar_iOS: View {
    @ObservedObject var playbackState: PlaybackState
    let partNames: [String]

    var onPlay: () -> Void
    var onStop: () -> Void
    var onRecord: () -> Void
    var onStopRecording: () -> Void

    var body: some View {
        VStack(spacing: 0) {
            Divider()

            HStack(spacing: 20) {
                // Loop toggle
                Button(action: { playbackState.isLooping.toggle() }) {
                    Image(systemName: playbackState.isLooping ? "repeat.circle.fill" : "repeat")
                        .font(.system(size: 20))
                        .foregroundColor(playbackState.isLooping ? .accentColor : .secondary)
                }
                .accessibilityLabel("Toggle loop")

                Spacer()

                // Record button
                Button(action: {
                    if playbackState.isRecording {
                        onStopRecording()
                    } else {
                        onRecord()
                    }
                }) {
                    ZStack {
                        Circle()
                            .fill(playbackState.isRecording ? Color.red : Color.clear)
                            .frame(width: 44, height: 44)
                        Circle()
                            .strokeBorder(Color.red, lineWidth: 2)
                            .frame(width: 44, height: 44)
                        if playbackState.isRecording {
                            RoundedRectangle(cornerRadius: 3)
                                .fill(Color.white)
                                .frame(width: 16, height: 16)
                        } else {
                            Circle()
                                .fill(Color.red)
                                .frame(width: 20, height: 20)
                        }
                    }
                }
                .disabled(playbackState.currentPart == "All")
                .opacity(playbackState.currentPart == "All" ? 0.4 : 1.0)

                // Play/Stop button — large and centered
                Button(action: {
                    if playbackState.isPlaying {
                        onStop()
                    } else {
                        onPlay()
                    }
                }) {
                    ZStack {
                        Circle()
                            .fill(Color.accentColor)
                            .frame(width: 56, height: 56)
                        Image(systemName: playbackState.isPlaying ? "stop.fill" : "play.fill")
                            .font(.system(size: 24))
                            .foregroundColor(.white)
                    }
                }

                Spacer()

                // BPM display / stepper
                BPMControl(tempo: $playbackState.tempo)
            }
            .padding(.horizontal, 20)
            .padding(.vertical, 12)
            .background(Color(uiColor: .systemGroupedBackground))
        }
    }
}

// MARK: - Part & Mode Selector Bar

/// Horizontal bar above the sheet music with part picker and playback mode toggles.
struct PartSelectorBar_iOS: View {
    @ObservedObject var playbackState: PlaybackState
    let partNames: [String]

    var body: some View {
        VStack(spacing: 8) {
            HStack(spacing: 12) {
                // Part picker
                Menu {
                    Button("All") { playbackState.currentPart = "All" }
                    Divider()
                    ForEach(partNames, id: \.self) { name in
                        Button(name) { playbackState.currentPart = name }
                    }
                } label: {
                    HStack(spacing: 4) {
                        Image(systemName: "person.wave.2")
                            .font(.system(size: 12))
                        Text(playbackState.currentPart)
                            .font(.system(size: 14, weight: .medium))
                        Image(systemName: "chevron.down")
                            .font(.system(size: 10))
                    }
                    .padding(.horizontal, 12)
                    .padding(.vertical, 6)
                    .background(Color(uiColor: .secondarySystemGroupedBackground))
                    .cornerRadius(8)
                }

                // Play All vs Play Current
                Picker("", selection: $playbackState.partMode) {
                    Text("All").tag(PlaybackState.PartMode.all)
                    Text("Current").tag(PlaybackState.PartMode.current)
                }
                .pickerStyle(.segmented)
                .frame(maxWidth: 160)

                // Tones vs Recorded
                Picker("", selection: $playbackState.audioSource) {
                    Text("Tones").tag(PlaybackState.AudioSource.tones)
                    Text("Recorded").tag(PlaybackState.AudioSource.recorded)
                }
                .pickerStyle(.segmented)
                .frame(maxWidth: 160)

                Spacer()
            }
            .padding(.horizontal, 16)
            .padding(.vertical, 6)
        }
        .background(Color(uiColor: .systemGroupedBackground))
    }
}

// MARK: - BPM Control

/// Compact BPM display with tap-to-adjust stepper.
struct BPMControl: View {
    @Binding var tempo: Int

    @State private var showSlider = false

    var body: some View {
        Button(action: { showSlider.toggle() }) {
            VStack(spacing: 1) {
                Text("\(tempo)")
                    .font(.system(size: 16, weight: .bold, design: .monospaced))
                Text("BPM")
                    .font(.system(size: 9, weight: .medium))
                    .foregroundColor(.secondary)
            }
            .frame(width: 48)
        }
        .popover(isPresented: $showSlider) {
            VStack(spacing: 12) {
                Text("Tempo: \(tempo) BPM")
                    .font(.headline)

                Slider(
                    value: Binding(
                        get: { Double(tempo) },
                        set: { tempo = Int($0) }
                    ),
                    in: Double(AppConstants.minTempo)...Double(AppConstants.maxTempo),
                    step: 1
                )
                .frame(width: 200)

                HStack {
                    Button("-5") { tempo = max(AppConstants.minTempo, tempo - 5) }
                        .buttonStyle(.bordered)
                    Button("-1") { tempo = max(AppConstants.minTempo, tempo - 1) }
                        .buttonStyle(.bordered)
                    Spacer()
                    Button("+1") { tempo = min(AppConstants.maxTempo, tempo + 1) }
                        .buttonStyle(.bordered)
                    Button("+5") { tempo = min(AppConstants.maxTempo, tempo + 5) }
                        .buttonStyle(.bordered)
                }
            }
            .padding()
            .presentationCompactAdaptation(.popover)
        }
    }
}