import { AlertTriangle, CheckCircle2, OctagonAlert } from "lucide-react";
import { RATING_TONE_CLASS } from "@/lib/forms/rating";
import { formatMitesPerDay, formatThreshold } from "@/lib/varroa/format";
import { VarroaLight, varroaLight } from "@/lib/varroa/rate";
import { cn } from "@/lib/utils";

const LIGHTS: Record<VarroaLight, { Icon: typeof CheckCircle2; tone: string }> = {
  green: { Icon: CheckCircle2, tone: RATING_TONE_CLASS[4] },
  yellow: { Icon: AlertTriangle, tone: RATING_TONE_CLASS[3] },
  red: { Icon: OctagonAlert, tone: RATING_TONE_CLASS[1] },
};

function lightText(light: VarroaLight, threshold: number): string {
  if (light === "red") return "über der Schwelle, Behandlung prüfen";
  if (light === "yellow") return "nahe an der Schwelle";
  return `unter der Schwelle (${formatThreshold(threshold)}/Tag)`;
}

/**
 * The live result of the count. The state is always spelled out and has an
 * icon, so it never depends on the colour alone.
 */
export function VarroaRateLight({
  rate,
  threshold,
}: {
  rate: number | null;
  threshold: number | null;
}) {
  const light = varroaLight(rate, threshold);
  if (rate === null) {
    return <div role="status" aria-live="polite" />;
  }
  const base = `${formatMitesPerDay(rate)} Milben/Tag`;
  if (light === null || threshold === null) {
    return (
      <p role="status" aria-live="polite" className="text-sm font-medium">
        {base}
      </p>
    );
  }
  const { Icon, tone } = LIGHTS[light];
  return (
    <p
      role="status"
      aria-live="polite"
      className={cn("flex min-h-11 items-center gap-2 rounded-lg border px-3 text-sm font-medium", tone)}
    >
      <Icon aria-hidden className="size-5 shrink-0" />
      <span>
        {base} – {lightText(light, threshold)}
      </span>
    </p>
  );
}