import Link from "next/link";
import type { ProjectSummary } from "@/lib/project-types";
import { fmtAgo, fmtBytes } from "@/lib/format";
import Panel from "./Panel";

// Built count, total bytes, newest, stale -- all from `attrs.finalBytes` and
// each project's state. Nothing here stats a file; the summariser already did.
export default function DeliverablesPanel({ projects }: { projects: ProjectSummary[] }) {
  const built = projects.filter((p) => p.attrs?.["final-bytes"]);
  const bytes = built.reduce((n, p) => n + Number(p.attrs?.["final-bytes"] ?? 0), 0);
  const newest = [...built].sort((a, b) => b.newestMtimeMs - a.newestMtimeMs)[0] ?? null;
  const stale = projects.filter((p) => p.state === "stale");
  return (
    <Panel title="deliverables" testid="deliverables" more={{ href: "/browse?state=built", label: "built →" }}>
      <div className="flex flex-wrap gap-3 text-[11px] text-[var(--color-dim)]" data-deliverables={`${built.length}/${bytes}`}>
        <span>
          <b className="num text-[var(--color-text)]">{built.length}</b> built
        </span>
        <span>
          <b className="num text-[var(--color-meter)]">{fmtBytes(bytes)}</b> on disk
        </span>
        {newest && (
          <span>
            newest{" "}
            <Link href={`/browse/${newest.id}`} className="font-mono text-[var(--color-sel)] hover:underline">
              {newest.id}
            </Link>{" "}
            <span className="num">{fmtAgo(newest.newestMtimeMs)}</span>
          </span>
        )}
        {stale.length > 0 && (
          <Link href="/browse?state=stale" className="text-[var(--color-dirty)] hover:underline" data-stale={stale.length}>
            {stale.length} stale
          </Link>
        )}
      </div>
    </Panel>
  );
}