"use client";

// The hub's front: what it is, the official instances it searches, the
// archives a visitor added, and the form to add another — in the homepage's
// register (homepage/app/page.tsx): short declarative sentences, no eyebrow
// over a band, no subtitle under a heading (nor under a card's title: the
// site's description is not shown), Title Case headings, and each heading
// after the H1 names what is under it.
//
// Two kinds of number, deliberately kept apart. An official card shows the
// homepage's own figures for that archive, composed at hub build time
// (/hub-summary.json, useHubSummary) — the same numbers the homepage prints,
// omitted one by one when the file lacks them. An added archive has no such
// file behind it, so its card shows only the live channel count its
// descriptor gave. The live federation total is HubStats, under the shelf.
//
// The official cards come in the homepage's order (the summary's `sites`, the
// order its ArchiveCards and growth chart draw in), and each wears the colour
// its homepage card wears (lib/siteColor.ts): its archive's OWN accent when the
// site sets one (the tool has no colour, the archives do) — a named accent at
// its value on the base in force — and its homepage chart colour when it sets
// none (siteChartColors: the palette slot at its index in the summary, or the
// lowest free one when an accent's family holds that). Order and colour are
// useHubSites' (officialInstances), shared with the scope chips, the results'
// stripes and /ask, so an archive is one colour on every surface. With no
// summary the order is hub-sites.json's and the colour the card's place. An
// added archive wears its own published hex fitted to the base in force
// (useHubSites, release 11 O2b), or, with none, the family's signal colour.

import { X } from "lucide-react";
import { Badge } from "yt-dlp-transcript-common/components/ui/badge";
import type { RegisteredSite } from "yt-dlp-transcript-common/components/siteRegistry";
import type { HubSummarySite } from "yt-dlp-transcript-common/lib/hubSummary";
import AddArchive from "./AddArchive";
import { useHubSites } from "./useHubSites";

// Fall back to the family's signal colour when a site declares no accent.
const FALLBACK_ACCENT = "var(--brand)";

function Figure({ value, unit }: { value: number | undefined; unit: string }) {
  if (value === undefined) return null;
  return (
    <div className="flex min-w-0 flex-col-reverse justify-end gap-1">
      <dt className="text-xs text-faint">{unit}</dt>
      <dd className="text-[0.9375rem] tabular-nums text-foreground">
        {value.toLocaleString()}
      </dd>
    </div>
  );
}

function ArchiveCard({
  site,
  figures,
  index,
  accent,
  onRemove,
}: {
  site: RegisteredSite;
  // The stripe's colour, from useHubSites: an official card's, or an added
  // one's own hex fitted per base, or the family's signal colour.
  accent: string;
  // Official: the build-time figures (null when the summary lacks them).
  // Added: undefined — the card shows the descriptor's channel count only.
  figures?: HubSummarySite | null;
  index: number;
  onRemove?: (origin: string) => void;
}) {
  const href = site.siteUrl || site.origin;
  const channels =
    figures === undefined ? site.channelCount : figures?.channels;
  const anyFigure =
    channels !== undefined ||
    figures?.recordings !== undefined ||
    figures?.transcripts !== undefined ||
    figures?.hoursArchived !== undefined;
  return (
    <li
      data-testid="shelf-spine"
      className="shelf-spine group relative flex min-w-0 flex-col gap-4 border-r border-b border-border bg-surface p-5 pl-6"
      style={{ animationDelay: `${Math.min(index, 8) * 45}ms` }}
    >
      <span
        aria-hidden="true"
        className="absolute inset-y-0 left-0 w-[3px]"
        style={{ background: accent }}
      />
      <div className="flex items-start justify-between gap-2">
        <h3 className="font-display text-lg font-semibold text-foreground">
          <a
            href={href}
            target="_blank"
            rel="noopener noreferrer"
            className="underline decoration-transparent underline-offset-4 transition-colors hover:decoration-border-strong"
          >
            {site.siteTitle}
            <span aria-hidden="true" className="ml-1.5 text-sm text-faint">
              ↗
            </span>
          </a>
        </h3>
        {onRemove && (
          <button
            type="button"
            onClick={() => onRemove(site.origin)}
            aria-label={`Remove ${site.siteTitle}`}
            // Reveal-on-hover is not an affordance on a touch screen: a device
            // with no hover shows it always. `hover:` never gates a function.
            className="-mr-1 mt-0.5 rounded p-0.5 text-muted-foreground/60 opacity-0 transition-opacity pointer-coarse:opacity-100 hover:text-destructive focus-visible:opacity-100 group-hover:opacity-100"
          >
            <X className="size-3.5" aria-hidden="true" />
          </button>
        )}
      </div>
      <div className="mt-auto flex flex-col gap-3">
        {anyFigure && (
          <dl className="grid grid-cols-4 gap-3">
            <Figure value={channels} unit="channels" />
            <Figure value={figures?.recordings} unit="recordings" />
            <Figure value={figures?.transcripts} unit="transcripts" />
            <Figure value={figures?.hoursArchived} unit="hours" />
          </dl>
        )}
        <div>
          <Badge variant={site.pwa ? "info" : "ghost"}>
            {site.pwa ? "Installable" : "Data-only"}
          </Badge>
        </div>
      </div>
    </li>
  );
}

const GRID =
  "grid list-none grid-cols-1 border-t border-l border-border sm:grid-cols-2 lg:grid-cols-3";

export default function ArchiveShelf() {
  const { official, added, summary, removeSite } = useHubSites();
  const hours = summary?.official?.hoursArchived;

  return (
    <section className="flex flex-col gap-10 pb-4">
      <div className="flex flex-col gap-4">
        <h1 className="font-display text-[1.75rem] font-semibold leading-[1.12] tracking-[-0.01em] text-foreground sm:text-[2.25rem]">
          {hours ? (
            <>
              <span className="font-medium tabular-nums">
                {hours.toLocaleString()}
              </span>{" "}
              hours of speech from every official archive, searchable at once.
            </>
          ) : (
            <>
              {official.length > 0
                ? "Every official archive, searchable at once."
                : "Every archive you add, searchable at once."}
            </>
          )}
        </h1>
        <p className="max-w-2xl text-[1.0625rem] leading-relaxed text-muted-foreground">
          One search runs across all of them, in your browser. You can add
          any other Archilyzer archive to your own search, below. It stays in
          this browser until you remove it.
        </p>
      </div>

      {official.length > 0 ? (
        <div>
          <h2 className="mb-6 font-display text-2xl font-semibold text-foreground">
            Official Instances
          </h2>
          <ul className={GRID}>
            {official.map(({ site, figures, accent }, i) => (
              <ArchiveCard
                key={site.origin || site.siteId}
                site={site}
                figures={figures}
                index={i}
                accent={accent}
              />
            ))}
          </ul>
        </div>
      ) : (
        <p className="max-w-xl leading-relaxed text-muted-foreground">
          This hub has no official instances. Add an archive to search it.
        </p>
      )}

      <div>
        {added.length > 0 && (
          <>
            <h2 className="font-display text-2xl font-semibold text-foreground">
              Archives You Added
            </h2>
            <ul className={`${GRID} mt-6 mb-6`}>
              {added.map((site, i) => (
                <ArchiveCard
                  key={site.origin || site.siteId}
                  site={site}
                  index={i}
                  accent={site.accent || FALLBACK_ACCENT}
                  onRemove={removeSite}
                />
              ))}
            </ul>
          </>
        )}
        <AddArchive />
      </div>
    </section>
  );
}