/**
 * 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"

/**
 * 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)
}
