"use client";

// One line under the shelf: what this browser is searching right now. These
// numbers are the LIVE federation — computed from the merged data of every
// archive on the hub, the visitor's added ones included — so they are not the
// cards' numbers and are not meant to match them. The official cards show the
// build-time figures the homepage prints (hub-summary.json); this line shows
// what actually loaded, from the archives this browser has in scope.

import { useSearchData } from "yt-dlp-transcript-common/components/SearchDataContext";

function part(n: number, one: string, many: string) {
  return (
    <>
      <span className="tabular-nums text-foreground">{n.toLocaleString()}</span>{" "}
      {n === 1 ? one : many}
    </>
  );
}

export default function HubStats() {
  const { summariesState, channels, federation } = useSearchData();
  // The archives the search knows (the list the chips draw), those in scope,
  // and what has arrived from them: channels as each manifest lands, videos as
  // each archive is ready.
  const known = federation?.sites ?? [];
  const archives = known.filter((s) => s.status !== "off").length;
  // The ready archives' record counts — the same figures the chips show.
  const videos = summariesState.manifest?.totalCount ?? 0;

  if (known.length === 0) return null;

  return (
    <p className="text-sm text-muted-foreground">
      Searching {part(archives, "archive", "archives")}
      <span className="mx-2 text-muted-foreground/40">·</span>
      {part(channels.length, "channel", "channels")}
      <span className="mx-2 text-muted-foreground/40">·</span>
      {part(videos, "video", "videos")} right now.
    </p>
  );
}