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

// The family's numbers as one readout strip: hairline cells, a figure and a
// plain label each. Everything is the sum over the official instances (the
// summary's `official`), which is what the caption claims.
//
// The "gone" cell is the one that carries the project's argument, so it is the
// one that gets the width: a full row on a phone, two cells on a wide screen.

export function FamilyStats({
  official,
  generatedAt,
}: {
  official: HomepageOfficialTotals;
  generatedAt: string | null;
}) {
  const cells = [
    { value: official.hoursArchived, label: "Hours of speech" },
    { value: official.transcripts, label: "Transcripts" },
    { value: official.recordings, label: "Recordings" },
    { value: official.channels, label: "Channels" },
    { value: official.sites, label: "Official instances" },
  ];
  const built = generatedAt ? new Date(generatedAt) : null;
  const builtOk = built && !Number.isNaN(built.getTime());
  return (
    <div className="flex flex-col gap-3">
      {/* Seven lg columns when the gone cell (span 2) is drawn, five when it
          is not — otherwise the row ends in two empty columns. Both class
          strings are complete literals (Tailwind v4 scans source). */}
      <dl
        className={`grid grid-cols-2 sm:grid-cols-3 ${
          official.gone > 0 ? "lg:grid-cols-7" : "lg:grid-cols-5"
        } border-t border-l border-[var(--border)]`}
      >
        {cells.map((c, i) => (
          <div
            key={c.label}
            // Five cells in a two-column phone grid: the fifth takes the row.
            className={`flex flex-col-reverse justify-end gap-2 border-r border-b border-[var(--border)] px-4 py-5 ${
              i === cells.length - 1 ? "col-span-2 sm:col-span-1" : ""
            }`}
          >
            <dt className="text-sm text-[var(--muted-foreground)]">{c.label}</dt>
            <dd className="tabular text-[1.5rem] sm:text-[1.75rem] font-medium leading-none tracking-[-0.02em] text-[var(--foreground)]">
              {c.value.toLocaleString()}
            </dd>
          </div>
        ))}
        {official.gone > 0 && (
          <div className="col-span-2 flex flex-col-reverse justify-end gap-2 border-r border-b border-[var(--border)] px-4 py-5 sm:col-span-1 lg:col-span-2">
            <dt className="text-sm text-[var(--muted-foreground)]">
              Recordings gone at the source, still here
            </dt>
            <dd className="tabular text-[1.5rem] sm:text-[1.75rem] font-medium leading-none tracking-[-0.02em] text-[var(--state-gone)]">
              {official.gone.toLocaleString()}
            </dd>
          </div>
        )}
      </dl>
      {builtOk && (
        <p className="text-sm text-[var(--faint)]">
          Across the official instances · index built{" "}
          <time dateTime={built.toISOString().slice(0, 10)}>
            {built.toLocaleDateString("en-US", {
              year: "numeric",
              month: "long",
              day: "numeric",
              timeZone: "UTC",
            })}
          </time>
        </p>
      )}
    </div>
  );
}