import { cn } from "cn"
import { type Einheit, wertText } from "@/lib/messung"
import type { Messpunkt } from "@/lib/typen"
import { Sparkline } from "./Sparkline"

const ZUSTAND = {
  ruhig: { wert: "text-foreground", marke: null },
  gelb: { wert: "text-bernstein", marke: "hoch" },
  rot: { wert: "text-rot-text", marke: "kritisch" },
} as const

/**
 * Eine Kennzahl mit Verlauf: Beschriftung, der aktuelle Wert groß, darunter die Linie des Zeitraums.
 * Überschreitet der Wert eine Grenze, färbt er sich und sagt es auch in Worten („hoch“, „kritisch“).
 */
export function Kennzahl({ label, wert, einheit, punkte, max, zustand = "ruhig", farbe, zeitraumText }: {
  label: string
  wert: number | null | undefined
  einheit: Einheit
  punkte?: Messpunkt[]
  max: number
  zustand?: keyof typeof ZUSTAND
  farbe?: string
  /** z. B. „letzte Stunde“ — für die Beschreibung der Linie. */
  zeitraumText: string
}) {
  const z = ZUSTAND[zustand]
  return (
    <div className="flaeche-innen flex min-w-0 flex-col gap-1.5 rounded-xl px-3.5 pt-3 pb-2">
      <span className="etikett text-[11px] text-text-3">{label}</span>
      <span className="flex items-baseline gap-2">
        <span className={cn("font-anzeige text-[28px] leading-none font-semibold tabular-nums", z.wert)}>{wertText(wert, einheit)}</span>
        {z.marke && <span className={cn("etikett text-[10.5px]", z.wert)}>{z.marke}</span>}
      </span>
      {punkte && punkte.length > 1 && (
        <Sparkline punkte={punkte} max={max} farbe={farbe} beschriftung={`${label}, ${zeitraumText}`} />
      )}
      {/* Kommt der Verlauf noch (erster Abruf), bleibt die Höhe gleich — kein Springen der Kacheln. */}
      {punkte && punkte.length <= 1 && <span className="h-9" aria-hidden />}
    </div>
  )
}