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

// Ein Messwert als Ring (Design v5, 25.09.2026): der Bogen füllt sich bis zum Wert, im Normalfall in der Farbe des
// Bereichs, ab der gelben Grenze bernstein, ab der roten rot — dazu das Wort („hoch“, „kritisch“), damit es nicht
// nur an der Farbe hängt. Zwei feine Striche am Rand zeigen, wo die Grenzen liegen; darunter die Linie der Stunde.

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

const MITTE = 48
const RADIUS = 37
const UMFANG = 2 * Math.PI * RADIUS
const BOGEN = UMFANG * 0.75

/** Punkt auf dem Rand für einen Anteil 0…1 des 270°-Bogens (Beginn unten links, im Uhrzeigersinn). */
function randpunkt(anteil: number, r: number) {
  const winkel = ((135 + 270 * anteil) * Math.PI) / 180
  return { x: MITTE + r * Math.cos(winkel), y: MITTE + r * Math.sin(winkel) }
}

export function Messring({ label, wert, einheit, punkte, zustand = "ruhig", bereich, grenzen, max = 100, zeitraumText, i = 0 }: {
  label: string
  wert: number | null | undefined
  einheit: Einheit
  punkte?: Messpunkt[]
  zustand?: keyof typeof ZUSTAND
  bereich: Bereich
  /** Gelbe und rote Grenze in der Einheit des Werts. */
  grenzen: [number, number]
  max?: number
  zeitraumText: string
  /** Reihenfolge für das Auftauchen. */
  i?: number
}) {
  const z = ZUSTAND[zustand]
  const farbe = zustand === "rot" ? "var(--rot)" : zustand === "gelb" ? "var(--bernstein)" : bereich === "box" ? "var(--box)" : "var(--lab)"
  const anteil = wert == null ? 0 : Math.min(Math.max(wert / max, 0), 1)
  const [zahl, einheitText] = wertText(wert, einheit).split(" ")
  return (
    <div className="flaeche-innen flex min-w-0 flex-col items-center gap-1 rounded-2xl px-2 pt-2.5 pb-2">
      <div className="relative size-[88px]">
        <svg viewBox="0 0 96 96" className="size-full" aria-hidden>
          <circle cx={MITTE} cy={MITTE} r={RADIUS} fill="none" stroke="rgb(255 255 255 / 0.07)" strokeWidth={7}
            strokeLinecap="round" strokeDasharray={`${BOGEN} ${UMFANG}`} transform={`rotate(135 ${MITTE} ${MITTE})`} />
          {grenzen.map((g, n) => {
            const a = randpunkt(Math.min(g / max, 1), RADIUS + 6)
            const b = randpunkt(Math.min(g / max, 1), RADIUS + 9.5)
            return <line key={g} x1={a.x} y1={a.y} x2={b.x} y2={b.y} strokeWidth={1.5} strokeLinecap="round"
              stroke={n === 0 ? "var(--bernstein)" : "var(--rot)"} opacity={0.55} />
          })}
          {wert != null && anteil > 0 && (
            <circle cx={MITTE} cy={MITTE} r={RADIUS} fill="none" stroke={farbe} strokeWidth={7} strokeLinecap="round"
              strokeDasharray={`${Math.max(BOGEN * anteil, 0.5)} ${UMFANG}`} transform={`rotate(135 ${MITTE} ${MITTE})`}
              className="ring-fuellt transition-[stroke-dasharray] duration-700"
              style={{ "--i": i, filter: `drop-shadow(0 0 5px color-mix(in srgb, ${farbe} 65%, transparent))` } as CSSProperties} />
          )}
        </svg>
        <span className="absolute inset-0 flex items-center justify-center pt-1">
          <span className={cn("font-anzeige text-[26px] leading-none font-semibold tabular-nums", z.wert)}>{zahl}</span>
          {einheitText && <span className="ml-0.5 self-center pt-1.5 text-[12px] font-medium text-text-3">{einheitText}</span>}
        </span>
      </div>
      <span className="etikett -mt-1 flex items-center gap-1.5 text-[10.5px] text-text-3">
        {label}
        {z.marke && <span className={z.wert}>· {z.marke}</span>}
      </span>
      <div className="w-full px-1">
        {punkte && punkte.length > 1
          ? <Sparkline punkte={punkte} max={max} farbe={farbe} hoehe={20} beschriftung={`${label}, ${zeitraumText}`} />
          : <span className="block h-5" aria-hidden />}
      </div>
    </div>
  )
}