import { useMemo } from "react"
import type { ChronikItem } from "@/lib/api"
import { cn } from "@/lib/utils"

// Aktivitäts-Dichte über der Chronik (v3-Umbau P6, Spezifikation §4.5).
//
// Der eigentliche Zugewinn gegenüber einer reinen Liste: Sie zeigt, WANN die Box aktiv
// war, bevor man liest, WAS sie getan hat. Ein stiller Tag und eine durchgearbeitete
// Nacht sehen in einer Liste gleich aus — man muss scrollen, um es zu merken.
//
// Bewusst eigenes SVG statt einer Diagramm-Bibliothek: Es sind Rechtecke über einer
// Zeitachse. Recharts dafür zu laden wäre 95 kB für etwas, das in 30 Zeilen passt —
// und genau dieser Reflex hat in P0 das Startbündel aufgebläht.

const STUNDE = 3_600
const EIMER = 48   // 48 Stufen über den gezeigten Zeitraum

export function Dichteleiste({ items, aktiv }: {
  items: ChronikItem[]
  /** Farbe für den Fall, dass gefiltert wird — dann zeigt die Leiste nur die Treffer. */
  aktiv?: boolean
}) {
  const { balken, von, bis, max } = useMemo(() => {
    if (!items.length) return { balken: [] as number[], von: 0, bis: 0, max: 0 }
    // Die Chronik kommt neueste zuerst; für die Achse brauchen wir beide Enden.
    const zeiten = items.map((i) => i.ts)
    const von = Math.min(...zeiten)
    const bis = Math.max(...zeiten)
    const spanne = Math.max(bis - von, STUNDE)
    const balken = new Array(EIMER).fill(0)
    for (const t of zeiten) {
      const i = Math.min(EIMER - 1, Math.floor(((t - von) / spanne) * EIMER))
      balken[i]++
    }
    return { balken, von, bis, max: Math.max(...balken, 1) }
  }, [items])

  if (balken.length === 0) return null

  const zeitpunkt = (ts: number) =>
    new Date(ts * 1000).toLocaleDateString("de-DE", {
      day: "2-digit", month: "2-digit",
      ...(bis - von < 2 * 86_400 ? { hour: "2-digit", minute: "2-digit" } : {}),
    })

  return (
    <div className="space-y-1">
      <div
        className="flex h-8 items-end gap-px"
        role="img"
        aria-label={`Aktivitätsdichte: ${items.length} Einträge zwischen ${zeitpunkt(von)} und ${zeitpunkt(bis)}`}
      >
        {balken.map((n, i) => (
          <div
            key={i}
            title={n === 1 ? "1 Eintrag" : `${n} Einträge`}
            className={cn(
              "min-w-px flex-1 rounded-t-sm transition-colors",
              n === 0 ? "bg-border/25" : aktiv ? "bg-primary/70" : "bg-primary/40",
            )}
            // Auch ein einzelner Eintrag muss sichtbar sein — sonst sieht ein ruhiger
            // Tag aus wie gar nichts.
            style={{ height: n === 0 ? "2px" : `${Math.max(12, (n / max) * 100)}%` }}
          />
        ))}
      </div>
      <div className="flex justify-between font-mono text-[9px] text-muted-foreground/60">
        <span>{zeitpunkt(von)}</span>
        <span className="tabular-nums">{items.length} Einträge</span>
        <span>{zeitpunkt(bis)}</span>
      </div>
    </div>
  )
}