import type { HomepageSummary } from "yt-dlp-transcript-common/lib/homepageSummary";

// The headline numbers, as a tabular strip rather than a row of cards.
//
// It used to be five rounded, blurred tiles with a brass gradient down the left
// edge — the archive-room look. This family reads numbers as instrument
// readout: hairline-divided cells, monospaced tabular figures, a machine label
// underneath. Nothing here is decorated; the number IS the graphic.
//
// Server-safe (no "use client"), so it renders into the static HTML on both the
// home page and /stats/.

function Cell({
  value,
  label,
  delay,
}: {
  value: number;
  label: string;
  delay: number;
}) {
  return (
    <div
      className="reveal flex flex-col gap-2 px-4 py-5 sm:px-5 border-t border-[var(--border)] sm:border-t-0 sm:border-l first:border-l-0 first:border-t-0"
      style={{ "--d": `${delay}ms` } as React.CSSProperties}
    >
      <span className="tabular text-[1.75rem] sm:text-[2rem] font-medium leading-none tracking-[-0.02em] text-[var(--foreground)]">
        {value.toLocaleString()}
      </span>
      <span className="label-machine">{label}</span>
    </div>
  );
}

export function KpiHeader({ summary }: { summary: HomepageSummary }) {
  const t = summary.totals;
  const updated = summary.generatedAt
    ? new Date(summary.generatedAt).toLocaleDateString(undefined, {
        year: "numeric",
        month: "short",
        day: "numeric",
      })
    : null;
  const stats = [
    { value: t.downloads, label: "Recordings" },
    { value: t.transcripts, label: "Transcribed" },
    { value: t.hoursArchived, label: "Hours" },
    { value: t.channels, label: "Channels" },
    { value: t.sites, label: "Archives" },
  ];
  return (
    <section className="flex flex-col gap-3">
      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 border border-[var(--border)] bg-[var(--surface)]">
        {stats.map((s, i) => (
          <Cell key={s.label} value={s.value} label={s.label} delay={i * 60} />
        ))}
      </div>
      {updated && (
        <p className="label-machine">Index built · {updated}</p>
      )}
    </section>
  );
}