import { cn } from "cn"
import type { Lampe as LampenDaten, Start } from "@/lib/typen"
import { hauptleuchte } from "@/lib/anzeige"
import { Lampe } from "./Lampe"

type Zustand = Start["zustand"]

const LEUCHTE: Record<ReturnType<typeof hauptleuchte>["art"], string> = {
  ok: "border-gruen-rand bg-gruen-grund text-gruen",
  info: "border-cyan-rand bg-cyan-grund text-cyan",
  stumm: "border-aus-rand bg-aus-grund text-aus-text",
  gelb: "border-2 border-bernstein bg-bernstein-grund text-bernstein-hell lampe-atmet",
  rot: "border-2 border-rot bg-rot-grund text-rot shadow-[0_0_32px_rgba(255,90,79,0.3)]",
}

export function Warnpanel({ zustand, lampen, onAnsehen }: {
  zustand: Zustand
  lampen: LampenDaten[]
  onAnsehen: () => void
}) {
  const h = hauptleuchte(zustand)
  const aktiv = h.art === "gelb" || h.art === "rot"
  return (
    <section aria-label="Warnpanel" className="grid gap-4 md:grid-cols-[260px_minmax(0,1fr)] md:gap-5">
      <button
        type="button"
        onClick={onAnsehen}
        disabled={!aktiv}
        aria-label={`${h.oben} ${h.mitte}`}
        className={cn(
          "flex min-h-[130px] flex-col items-center justify-center gap-1 rounded-2xl border px-4 py-4 font-anzeige transition-colors",
          LEUCHTE[h.art],
          aktiv ? "cursor-pointer" : "cursor-default",
        )}
      >
        <span className="schild text-sm tracking-[0.26em]">{h.oben}</span>
        <span className="text-[40px] leading-none font-bold tracking-[0.04em] sm:text-[44px]">{h.mitte}</span>
        <span className="font-sans text-sm opacity-80">{h.unten}</span>
      </button>
      <ul className="grid grid-cols-2 gap-2.5 rounded-2xl border border-linie bg-panel p-3 sm:grid-cols-4">
        {lampen.map((l) => (
          <Lampe key={l.id} lampe={l} />
        ))}
      </ul>
    </section>
  )
}