import { readFileSync } from "node:fs";
import type { Metadata } from "next";
import Link from "next/link";
import { Changelog } from "yt-dlp-transcript-common/components/Changelog";
import {
  extractUnreleasedSection,
  getLatestReleasedVersion,
  suggestNextVersion,
} from "yt-dlp-transcript-common/lib/changelog";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { getHomepageConfig } from "yt-dlp-transcript-common/lib/homepage";
import { listSites } from "yt-dlp-transcript-common/lib/site";
import { getRegistry } from "yt-dlp-transcript-common/jobs/registry";
import type { PublishTargetStatus } from "yt-dlp-transcript-common/views/publishStatus";
import { readPublishStatus } from "yt-dlp-transcript-common/publish/publishState";
import { liveJobRows } from "../jobs/active/buildActiveJobs";
import { RunningJobsList } from "../jobs/components/RunningJobsList";
import { BuildButtons } from "./components/BuildButtons";
import { CutReleaseForm } from "./components/CutReleaseForm";
import { HomepageConfigForm } from "./components/HomepageConfigForm";
import { PublishPanel, type PanelRow } from "./components/PublishPanel";
import { DeleteSiteButton, MigrateButton } from "./components/SiteListActions";

export const dynamic = "force-dynamic";
export const metadata: Metadata = { title: "Sites" };

// Which live jobs the Pool section lists: the kinds the Pool's own buttons
// enqueue (BuildButtons.tsx), and only those — the index update included
// (Build index is a `publish-update-index` stage now, release 18). Every other
// publish stage has its console on its row of the Publish panel.
const BUILD_KINDS = new Set([
  "publish-update-index",
  "normalize-transcripts",
  "archive-transcripts",
  "archive-combined-transcripts",
  "normalize-live-chat",
  "archive-live-chat",
  "archive-combined-live-chat",
]);

// The same file the Cut release form rewrites (`exportChangelogFile`, which
// EXPORT_CHANGELOG_FILE overrides for the e2e server), or the page would show
// one changelog while the form cut another.
function loadExportChangelog(): string | null {
  try {
    return readFileSync(getPaths().exportChangelogFile, "utf8");
  } catch {
    return null;
  }
}

// The family page: the list of sites, then everything that applies to the whole
// family rather than to one of them. A site's own controls — its settings, its
// charts, its search aliases, its build & deploy — are its TABS, under
// /sites/<id>.
//
// Section order is the noun first, then the lifecycle the retired /deploy page
// read as: the list (the family is what this page is about), then the release,
// then the batch build.
export default async function SitesPage() {
  const paths = getPaths();
  const sites = listSites(paths);
  const source = loadExportChangelog();
  const lastVersion = source ? getLatestReleasedVersion(source) : null;
  const suggestedVersion = suggestNextVersion(lastVersion);
  const unreleased = source ? extractUnreleasedSection(source) : "";
  const hasUnreleased = unreleased.length > 0;
  const existingQueues = getRegistry().activeQueueNames();
  // Through the one builder, so this list has the same progress bars /jobs does
  // (it used to drop `progress`, `tasks`, `drainable` and the reorder bounds).
  const activeJobs = await liveJobRows((j) => BUILD_KINDS.has(j.kind));
  const hubConfig = getHomepageConfig(paths);
  const status = await readPublishStatus(paths);

  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-4">
        <div className="flex items-center justify-between gap-2">
          <h1 className="text-2xl font-semibold">Sites</h1>
          <Link
            href="/sites/new"
            className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90"
          >
            + New site
          </Link>
        </div>
        {sites.length === 0 && (
          <div className="flex flex-col gap-3 rounded border border-border p-4">
            <p className="text-sm">
              No sites configured yet. If you&apos;re upgrading an existing
              single-site install, migrate your current branding, channel groups,
              and charts into a first site:
            </p>
            <MigrateButton />
          </div>
        )}
        <ul className="flex flex-col divide-y divide-border">
          {sites.map((s) => (
            <li
              key={s.siteId}
              className="flex items-center justify-between gap-3 py-3"
            >
              <Link href={`/sites/${s.siteId}`} className="min-w-0">
                <div className="font-medium">{s.siteTitle}</div>
                <div className="text-xs text-muted-foreground">
                  <code>{s.siteId}</code> · {s.channels.length} channel
                  {s.channels.length === 1 ? "" : "s"} · {s.groups.length} group
                  {s.groups.length === 1 ? "" : "s"}
                  {s.cloudflareProject ? ` · ${s.cloudflareProject}` : ""}
                </div>
              </Link>
              <DeleteSiteButton siteId={s.siteId} />
            </li>
          ))}
        </ul>
      </section>

      {/* Release: stage the changelog before shipping anything. */}
      <section className="flex flex-col gap-3 border-t border-border pt-6">
        <div>
          <h2 className="text-lg font-semibold">Release notes</h2>
          <p className="text-sm text-muted-foreground">
            Bullets under <code>## [Unreleased]</code> in{" "}
            <code>export/CHANGELOG.md</code> become the next cut release. Cut it
            before you build &amp; deploy.
          </p>
        </div>
        {hasUnreleased && source ? (
          <div className="rounded-md border border-border bg-card px-4 py-3">
            <Changelog source={source} limit={1} />
          </div>
        ) : (
          <div className="text-sm italic text-muted-foreground">
            No pending changes yet.
          </div>
        )}
        <CutReleaseForm
          workspace="export"
          lastVersion={lastVersion}
          suggestedVersion={suggestedVersion}
          hasUnreleased={hasUnreleased}
        />
      </section>

      {/* Publish: every site, the hub and the homepage as stages (release
          18) — the index update shared by all of them, one build and one
          deploy at a time on the publish queue. Replaces "Build all sites"
          and the hub's and the homepage's own build sections. */}
      <section className="flex flex-col gap-3 border-t border-border pt-6">
        <div>
          <h2 className="text-lg font-semibold">Publish</h2>
          <p className="text-sm text-muted-foreground">
            The index is updated once and every site, the hub and the homepage
            are built from it, each into its own bundle; deploys ship that
            bundle and check the live site. A site&rsquo;s policy (its
            settings: off, build, preview, production) is what Publish now and
            the{" "}
            <Link href="/operations/publish" className="underline">
              publish lane
            </Link>{" "}
            do for it; the buttons on a row always run.
          </p>
        </div>
        <PublishPanel
          rows={[...status.sites, status.hub, status.homepage].map(panelRow)}
          index={status.index.chip}
          lane={status.lane.chip}
          plan={{
            steps: status.plan.steps.map((x) => ({
              kind: x.kind,
              target: x.target,
              reason: x.reason,
              ...(x.preview ? { preview: x.preview } : {}),
            })),
            skipped: status.plan.skipped,
          }}
          previewBranch={status.settings.previewBranch}
          siteOut={Boolean(process.env.ARCHILYZER_SITE_OUT?.trim())}
          homepageOut={Boolean(process.env.ARCHILYZER_HOMEPAGE_OUT?.trim())}
        />
      </section>

      {/* The family's own hub — a site of sorts, but never a [siteId]: its
          config lives in sites/_homepage, which isValidSiteId rejects. Its
          build and deploy are its row of the Publish panel above. */}
      <section className="flex flex-col gap-3 border-t border-border pt-6">
        <div>
          <h2 className="text-lg font-semibold">Hub config</h2>
          <p className="mt-1 text-sm text-muted-foreground">
            The hub is the export app built in hub mode: one search over every
            site that has a public URL, reading each archive where it is
            published. This config names and brands it, and its Public URL and
            Cloudflare Pages project are the hub&rsquo;s own (for example{" "}
            <code>archilyzer-hub</code>). The homepage (Archilyzer&rsquo;s own
            site) shares its social links.
          </p>
        </div>
        <HomepageConfigForm config={hubConfig} />
      </section>

      {/* The shared pool: corpus-wide, no site involved. */}
      <section className="flex flex-col gap-3 border-t border-border pt-6">
        <div>
          <h2 className="text-lg font-semibold">Pool</h2>
          <p className="text-sm text-muted-foreground">
            The shared channel pool every site is a selection over: the search
            index, the stats dataset, the transcript and live-chat sidecars and
            the downloadable archives. Corpus-wide — no site is involved.
          </p>
        </div>
        {/* Above the disclosure: a running pool job must be visible without a
            click. */}
        <RunningJobsList jobs={activeJobs} />
        {/* Eight job consoles; the family page does not open on them. */}
        <details>
          <summary className="cursor-pointer text-lg font-semibold select-none">
            Pool jobs
          </summary>
          <div className="pt-4">
            <BuildButtons existingQueues={existingQueues} />
          </div>
        </details>
      </section>
    </div>
  );
}

// The panel's row: what the client needs of a target's status, and no more.
function panelRow(t: PublishTargetStatus): PanelRow {
  return {
    target: t.target,
    kind: t.kind,
    title: t.title,
    chips: t.chips,
    policy: t.policy,
    next: t.next,
    cloudflareProject: t.cloudflareProject,
    deployProblem: t.deployProblem ?? null,
    previewUrl: t.previewUrl ?? null,
    builtAt: t.built?.builtAt ?? null,
    url: t.url,
  };
}