import type { HomepageSummarySite } from "yt-dlp-transcript-common/lib/homepageSummary";
import {
  siteAccentColor,
  siteChartColors,
  siteColor,
} from "yt-dlp-transcript-common/lib/siteColor";
import { Wordmark } from "yt-dlp-transcript-common/components/Wordmark";

// The official instances: one card per public archive, its title linking out,
// its own numbers underneath. No description line under the title — the
// page's copy rule is no subtitles unless needed, and the name plus the
// numbers say what the archive is.
//
// THE STRIPE IS THE SITE'S OWN ACCENT (release 10, the operator's ask):
// siteColor() — a named accent as `var(--swatch-<id>)`, its value on the base
// in force, from the summary's `accentId`; a custom hex fitted to each base as
// the site's own pages fit it (release 11: a pale hex published as is was
// ~1.4:1 on light); a site with no accent its chart colour. The
// hub's official cards wear the same (lib/hubSummary.ts officialInstances).
//
// A CARD STILL READS AS ITS LAYER'S LEGEND, BY HUE. The growth chart draws
// each site in the validated chart slot of its accent's hue family
// (siteChartColors: Brass → amber, Blue → blue, Violet → violet, Green →
// green, Sakura → magenta, Vermilion → rust), not in the accent itself — the
// accents fail as a chart palette (Brass↔Vermilion ΔE 1.0 deutan, Blue↔Violet
// 8.5 normal). So a family accent's stripe and its layer are one hue at two
// values, and a site with no accent matches its layer exactly. Signal and a
// custom hex have no family, so their layer is a palette colour of its own;
// ArchiveGrowthChart's legend names every layer either way.
//
// Numbers are v5 fields; a pre-v5 summary lacks them and the card shows only
// the transcript count it always had.

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-[var(--faint)]">{unit}</dt>
      <dd className="tabular text-[0.9375rem] text-[var(--foreground)]">
        {value.toLocaleString()}
      </dd>
    </div>
  );
}

// THE NAME IS THE SITE'S WORDMARK when the summary carries its lead: the lead
// heavy, the rest light (common/components/Wordmark.tsx, as the site's own
// header sets it), at the card title's size. The lead is TINTED in the site's
// own accent (siteAccentColor: a named accent's swatch, a custom hex fitted to
// the base in force — above 4:1 on the card on every base); a site with no
// accent keeps the foreground. The two spans are adjacent inline text, so the
// link's accessible name stays the plain title. With no lead (none configured,
// or a summary from before release 14) the title is plain, as it was. In forced
// colours the tint is the system's text colour, like any text.
function SiteName({ site }: { site: HomepageSummarySite }) {
  if (!site.wordmarkLead) return <>{site.siteTitle}</>;
  const accent = siteAccentColor(site);
  return (
    <Wordmark
      title={site.siteTitle}
      lead={site.wordmarkLead}
      className="tracking-[-0.01em]"
      leadStyle={accent ? { color: accent } : undefined}
    />
  );
}

export function ArchiveCards({ sites }: { sites: HomepageSummarySite[] }) {
  if (sites.length === 0) return null;
  const chart = siteChartColors(sites);
  return (
    <ul className="grid grid-cols-1 border-t border-l border-[var(--border)] sm:grid-cols-2 lg:grid-cols-3 list-none">
      {sites.map((site, i) => (
        <li
          key={site.siteId}
          className="relative flex flex-col gap-4 border-r border-b border-[var(--border)] bg-[var(--surface)] p-5 pl-6"
        >
          <span
            aria-hidden="true"
            className="absolute left-0 top-0 h-full w-[3px]"
            style={{ backgroundColor: siteColor(site, chart[i]) }}
          />
          <h3 className="font-display text-lg font-semibold text-[var(--foreground)]">
            <a
              href={site.siteUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="underline decoration-transparent underline-offset-4 transition-colors hover:decoration-[var(--border-strong)]"
            >
              <SiteName site={site} />
              <span aria-hidden="true" className="ml-1.5 text-sm text-[var(--faint)]">↗</span>
            </a>
          </h3>
          <dl className="mt-auto grid grid-cols-4 gap-3">
            <Figure value={site.channels} unit="channels" />
            <Figure value={site.recordings} unit="recordings" />
            <Figure value={site.transcribed.total} unit="transcripts" />
            <Figure value={site.hoursArchived} unit="hours" />
          </dl>
        </li>
      ))}
    </ul>
  );
}