/**
 * Fahrzeugstatus im Detail. Vorlage: `vSicherheit()` im alten Panel.
 *
 * Zeigt die 16 Einzelprüfungen aus `_sicherheitscheck`. Entscheidend:
 * `ok === null` heißt „Sensor meldet nichts" und wird als unbekannt
 * dargestellt — nie als grün geraten. Deshalb ist auch die Gesamtaussage
 * unbekannt, sobald eine einzige Prüfung unbekannt ist.
 */

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

import { useDaten } from "../daten/DatenKontext"
import { datumZeit } from "../format"
import { Leerzustand } from "./bausteine"

export function Fahrzeugstatus() {
  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 unbekannt = punkte.filter((p) => p.ok === null).length
  const offen = punkte.filter((p) => p.ok === false)

  return (
    <>
      <StatusRow
        status={fahrzeug.gesichert === true ? "ok" : fahrzeug.gesichert === false ? "bad" : "warn"}
        title={
          fahrzeug.gesichert === true
            ? "Alles verschlossen"
            : fahrzeug.gesichert === false
              ? `${offen.length} Stelle${offen.length === 1 ? "" : "n"} offen`
              : "Zustand nicht vollständig bekannt"
        }
        {...(statusStand ? { subtitle: `Stand ${datumZeit(statusStand)}` } : {})}
      />

      <Tile>
        <span className="ads-eyebrow">Einzelprüfungen</span>
        <ul className="dm-pruefliste">
          {punkte.map((punkt) => (
            <li key={punkt.label} className="dm-pruefliste__zeile">
              <span
                className={
                  punkt.ok === true
                    ? "dm-punkt dm-punkt--ok"
                    : punkt.ok === false
                      ? "dm-punkt dm-punkt--offen"
                      : "dm-punkt dm-punkt--unbekannt"
                }
                aria-hidden="true"
              />
              <span className="dm-pruefliste__label">{punkt.label}</span>
              <span className="dm-pruefliste__wert">
                {punkt.ok === true ? "zu" : punkt.ok === false ? "offen" : "unbekannt"}
              </span>
            </li>
          ))}
        </ul>
      </Tile>

      {unbekannt > 0 && (
        <p className="dm-fussnote">
          {unbekannt === 1 ? "Eine Prüfung ist" : `${unbekannt} Prüfungen sind`} unbekannt, weil das
          Fahrzeug dazu nichts meldet. Solange das so ist, gilt die Gesamtaussage bewusst als
          unbekannt statt als sicher.
        </p>
      )}
    </>
  )
}
