import SwiftUI
import PoseCore

struct PairComparisonView: View {
    @ObservedObject var model: ReviewerModel
    var body: some View {
        VSplitView {
            HStack(alignment: .top, spacing: 12) {
                if let pair = model.pair, let reference = pair.referenceID {
                    FramePane(model: model, frameID: pair.subjectID)
                    FramePane(model: model, frameID: reference)
                }
            }.frame(minHeight: 240)
            ScrollView { PairFeedbackView(model: model).padding(.vertical, 8) }.frame(minHeight: 160, idealHeight: 260)
        }
    }
}
struct FramePane: View {
    @ObservedObject var model: ReviewerModel
    let frameID: String
    @State private var displayedZoom = 1.0
    private var settings: Binding<ReviewerModel.Presentation> {
        Binding(get: { model.settings(frameID) }, set: { model.setSettings(frameID, $0) })
    }
    var body: some View {
        if let frame = model.frame(frameID) {
            VStack(alignment: .leading, spacing: 6) {
                Button { model.activate(frameID) } label: {
                    Text("\(frame.riderDisplayName)\(model.frame?.id == frameID ? " · active" : "")").font(.headline)
                }.buttonStyle(.plain)
                Picker("Detection", selection: settings.kind) {
                    Text("3D projection").tag("3D"); Text("2D detection").tag("2D")
                }.labelsHidden()
                HStack {
                    Button("Fit rider") {
                        var s = model.settings(frameID); s.autoFrame = true; s.framingRequest += 1; model.setSettings(frameID, s)
                    }.disabled(model.framingRegions[frameID] == nil)
                    Button("Full photo") {
                        var s = model.settings(frameID); s.autoFrame = false; s.zoom = 1; s.framingRequest += 1; model.setSettings(frameID, s)
                    }
                    Slider(value: Binding(get: { displayedZoom }, set: { value in
                        displayedZoom = value
                        var s = model.settings(frameID); s.autoFrame = false; s.zoom = value; model.setSettings(frameID, s)
                    }), in: 1...4).frame(minWidth: 40, maxWidth: 100).accessibilityLabel("Photo zoom")
                    Text(String(format: "%.1f×", displayedZoom)).font(.caption).monospacedDigit()
                }
                Toggle("Show original points", isOn: settings.showRaw).font(.caption)
                FramedPhotoCanvas(model: model, frameID: frameID, displayedZoom: $displayedZoom)
                    .overlay(Rectangle().stroke(model.frame?.id == frameID ? Color.accentColor : .clear, lineWidth: 2))
                Text("Independent photo view · \(Int(frame.panel.width)) × \(Int(frame.panel.height)) px").font(.caption2).foregroundStyle(.secondary)
            }.frame(maxWidth: .infinity)
        }
    }
}