/**
 * Fahrzeugstatus im Detail. Vorlage: `vSicherheit()` im alten Panel.
 *
 * Vier Sammelzeilen statt der früheren flachen Liste: Fahrzeug verriegelt /
 * Türen und Klappen geschlossen / Fenster und Dach geschlossen / Licht
 * ausgeschaltet - jede fasst mehrere Punkte aus `_sicherheitscheck` über
 * deren `gruppe`-Feld zusammen (siehe `gruppenErgebnis()` in bausteine.tsx).
 * Entscheidend bleibt: `ok === null` heißt „Sensor meldet nichts" und wird
 * als unbekannt dargestellt — nie als grün geraten. Nur "Türen und Klappen
 * geschlossen" führt zu einer Detailseite (TuerenKlappen.tsx) mit jeder Tür,
 * Motorhaube und dem Kofferraum einzeln.
 */

import { StatusRow, Tile } from "@audi-dash/ui"

import { useDaten } from "../daten/DatenKontext"
import { datumZeit } from "../format"
import type { SeitenName } from "../navigation"
import { gruppenErgebnis, Leerzustand, StatusKreis } from "./bausteine"

export function Fahrzeugstatus({ geheZu }: { geheZu: (name: SeitenName) => void }) {
  const { fahrzeug, statusStand } = useDaten()
  if (!fahrzeug) return null

  const punkte = fahrzeug.sicherheitscheck
  if (punkte.length === 0) {
    return (
      <Leerzustand
        titel="Keine Zustandsdaten"
        text="Das Fahrzeug meldet derzeit keine Tür-, Fenster- und Schlossdaten. Sobald es das tut, stehen sie hier."
      />
    )
  }

  const verriegelt = gruppenErgebnis(punkte.filter((p) => p.gruppe === "verriegelt"))
  const tuerenKlappen = gruppenErgebnis(punkte.filter((p) => p.gruppe === "tueren_klappen"))
  const fensterDach = gruppenErgebnis(punkte.filter((p) => p.gruppe === "fenster_dach"))
  const licht = gruppenErgebnis(punkte.filter((p) => p.gruppe === "licht"))

  return (
    <>
      <StatusRow
        status={fahrzeug.gesichert === true ? "ok" : fahrzeug.gesichert === false ? "bad" : "warn"}
        title={
          fahrzeug.gesichert === true
            ? "Fahrzeug ist sicher abgestellt"
            : fahrzeug.gesichert === false
              ? "Bitte prüfen"
              : "Zustand nicht vollständig bekannt"
        }
        {...(statusStand ? { subtitle: `Stand ${datumZeit(statusStand)}` } : {})}
      />

      <Tile>
        <div className="dm-sicherheitsliste">
          <div className="dm-sicherheitszeile">
            <StatusKreis ok={verriegelt} />
            <span className="dm-sicherheitszeile__text">
              {verriegelt === null ? "Verriegelung unbekannt" : verriegelt ? "Fahrzeug verriegelt" : "Fahrzeug nicht verriegelt"}
            </span>
          </div>
          <button type="button" className="dm-sicherheitszeile" onClick={() => geheZu("tuerenklappen")}>
            <StatusKreis ok={tuerenKlappen} />
            <span className="dm-sicherheitszeile__text">
              {tuerenKlappen === null
                ? "Türen/Klappen unbekannt"
                : tuerenKlappen
                  ? "Türen und Klappen geschlossen"
                  : "Türen oder Klappen offen"}
            </span>
            <svg className="dm-sicherheitszeile__chev" viewBox="0 0 6 10" width="6" height="10" aria-hidden="true">
              <path d="M1 1l4 4-4 4" fill="none" stroke="currentColor" strokeWidth="1.4" />
            </svg>
          </button>
          <div className="dm-sicherheitszeile">
            <StatusKreis ok={fensterDach} />
            <span className="dm-sicherheitszeile__text">
              {fensterDach === null ? "Fenster/Dach unbekannt" : fensterDach ? "Fenster und Dach geschlossen" : "Fenster oder Dach offen"}
            </span>
          </div>
          <div className="dm-sicherheitszeile">
            <StatusKreis ok={licht} />
            <span className="dm-sicherheitszeile__text">
              {licht === null ? "Licht unbekannt" : licht ? "Licht ausgeschaltet" : "Licht eingeschaltet"}
            </span>
          </div>
        </div>
      </Tile>
    </>
  )
}
