/**
 * Kleine, über mehrere Seiten geteilte Bausteine. Alles, was mehr als einmal
 * gebraucht wird, aber zu speziell für das Design-System ist.
 */

import type { ReactNode } from "react"

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

import type { SicherheitsPunkt } from "../api"

/**
 * Leerzustand. Aus dem Design-Auftrag: freundlich formuliert, mit einem
 * Hinweis, was als Nächstes passiert — nie nur „keine Daten".
 * Wird real gebraucht: Fahrten und Tankvorgänge sind zu Beginn leer.
 */
export function Leerzustand({
  titel,
  text,
  aktion,
}: {
  titel: string
  text: string
  aktion?: { beschriftung: string; beiKlick: () => void }
}) {
  return (
    <div className="dm-leer">
      <div className="dm-leer__titel">{titel}</div>
      <p className="dm-leer__text">{text}</p>
      {aktion && (
        <div style={{ marginTop: 8 }}>
          <ActionButton onClick={aktion.beiKlick}>{aktion.beschriftung}</ActionButton>
        </div>
      )}
    </div>
  )
}

/** Abschnittsüberschrift zwischen Kacheln. */
export function Abschnitt({ titel, kinder }: { titel: string; kinder?: ReactNode }) {
  return (
    <div className="dm-abschnitt">
      <span className="ads-eyebrow">{titel}</span>
      {kinder}
    </div>
  )
}

/** Kachel, die zu einer Unterseite führt. */
export function NaviKachel({
  titel,
  wert,
  beiKlick,
}: {
  titel: string
  wert?: ReactNode
  beiKlick: () => void
}) {
  return (
    <Tile variant="button" chevron onClick={beiKlick}>
      <span className="ads-eyebrow">{titel}</span>
      {wert !== undefined && <div className="dm-navikachel__wert">{wert}</div>}
    </Tile>
  )
}

/**
 * Ein Wert mit Beschriftung. „—" statt eines erfundenen Werts, wenn nichts
 * bekannt ist — die Regel zieht sich durch die ganze App.
 */
export function Wertzeile({
  label,
  wert,
  zusatz,
}: {
  label: ReactNode
  wert: ReactNode
  zusatz?: ReactNode
}) {
  return (
    <div className="dm-wertzeile">
      <dt>{label}</dt>
      <dd>
        {wert}
        {zusatz && <small>{zusatz}</small>}
      </dd>
    </div>
  )
}

export function Werteliste({ kinder }: { kinder: ReactNode }) {
  return <dl className="dm-werteliste">{kinder}</dl>
}

/** Bestätigung vor unwiderruflichen Aktionen. */
export function bestaetigen(frage: string): boolean {
  return window.confirm(frage)
}

/**
 * Kreis-Häkchen (ok) / Kreis-Kreuz (nicht ok) / Kreis-Fragezeichen (unbekannt)
 * statt eines einfarbigen Punkts, für die Sicherheit-Seiten (Fahrzeugstatus,
 * TuerenKlappen) - Zustand ist so schon am Symbol selbst erkennbar, nicht nur
 * an der Farbe (Vorlage vom Nutzer geliefert).
 */
export function StatusKreis({ ok }: { ok: boolean | null }) {
  const klasse =
    ok === null ? "dm-statuskreis dm-statuskreis--warn" : ok ? "dm-statuskreis" : "dm-statuskreis dm-statuskreis--bad"
  return (
    <span className={klasse} aria-hidden="true">
      <svg viewBox="0 0 16 16" width="13" height="13">
        {ok === null ? (
          <path
            d="M5.7 6a2.3 2.3 0 1 1 2.7 2.27c-.5.09-.7.5-.7 1.03v.2M8 11.6v.01"
            stroke="#fff"
            strokeWidth="1.5"
            strokeLinecap="round"
            fill="none"
          />
        ) : ok ? (
          <path
            d="M3 8.3 6.2 11.5 13 4.5"
            stroke="#fff"
            strokeWidth="1.8"
            fill="none"
            strokeLinecap="round"
            strokeLinejoin="round"
          />
        ) : (
          <path d="M4 4l8 8M12 4l-8 8" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" />
        )}
      </svg>
    </span>
  )
}

/** Fasst ok über eine Gruppe zusammen: unbekannt, sobald ein Punkt unbekannt
    ist oder die Gruppe ganz ohne Einträge dasteht (kein Sensor dieser Rolle
    zugeordnet) - nie true durch eine leere Liste erschlichen. */
export function gruppenErgebnis(punkte: readonly SicherheitsPunkt[]): boolean | null {
  if (punkte.length === 0 || punkte.some((p) => p.ok === null)) return null
  return punkte.every((p) => p.ok === true)
}
