Camper-Monitor/VanControlWatch/Views/WatchVehicleView.swift

import SwiftUI

/// Die Neigung am Fahrzeug selbst, wie am iPhone – nur auf Uhrgrösse gebracht.
///
/// Zwei Ansichten, jede um ihre Achse gekippt: die Seitenansicht für längs
/// (Front links, Heck rechts) und die Heckansicht für quer. Die Heckansicht
/// teilt die Blickrichtung des Fahrers, links im Bild ist also links am
/// Fahrzeug.
struct WatchVehicleView: View {
    let pitch: Double?
    let roll: Double?

    /// Wie am iPhone dreifach überhöht – zwei Grad wären sonst kaum zu sehen.
    /// Die angeschriebenen Gradzahlen bleiben echt.
    var body: some View {
        VStack(spacing: 8) {
            panel(image: "VansterSide", angle: pitch, title: "Längs",
                  lower: "Front", upper: "Heck", aspect: VehicleTilt.sideAspect)
            panel(image: "VansterRear", angle: roll, title: "Quer",
                  lower: "links", upper: "rechts", aspect: VehicleTilt.rearAspect)
        }
    }

    private func panel(image: String,
                       angle: Double?,
                       title: String,
                       lower: String,
                       upper: String,
                       aspect: Double) -> some View {
        VStack(spacing: 2) {
            HStack {
                Text(title)
                Spacer()
                Text(angle.map { String(format: "%.1f°", $0) } ?? "–")
                    .monospacedDigit()
                    .foregroundStyle(VehicleTilt.colour(for: angle))
            }
            .font(.caption2)

            ZStack {
                // Die Waagerechte als Bezug – ohne sie ist eine kleine Neigung
                // nicht einzuschätzen.
                Rectangle()
                    .fill(Color.secondary.opacity(0.35))
                    .frame(height: 1)

                Image(image)
                    .resizable()
                    .scaledToFit()
                    .foregroundStyle(VehicleTilt.colour(for: angle))
                    .aspectRatio(aspect, contentMode: .fit)
                    .rotationEffect(.degrees(-(angle ?? 0) * VehicleTilt.exaggeration))
                    .animation(.spring(duration: 0.4), value: angle)
                    .opacity(angle == nil ? 0.3 : 1)
            }
            .frame(height: 52)

            HStack {
                Text(lower)
                Spacer()
                Text(upper)
            }
            .font(.system(size: 9))
            .foregroundStyle(.secondary)
        }
    }
}