import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import { getSettings } from "yt-dlp-transcript-common/lib/settings";
import {
  readBuiltStamp,
  readDeployedFile,
  type DeployRecord,
} from "yt-dlp-transcript-common/publish/stamps";
import { BuildDeployButton } from "../../components/BuildDeployButton";
import { BuildExportButton } from "../../components/BuildExportButton";
import { DeployButton } from "../../components/DeployButton";
import { getSiteCached } from "../lib/siteCache";

export const dynamic = "force-dynamic";
// → "Publish — <id> — Sites" through the layout's title template.
export const metadata: Metadata = { title: "Publish" };

const VERDICT: Record<string, string> = {
  ok: "live check ok",
  "stale-edge": "live check: the edge still serves an older build",
  mismatch: "live check: a different build answers",
  unreachable: "live check: unreachable",
  skipped: "live check skipped",
};

function when(at: number): string {
  return new Date(at).toLocaleString();
}

function recordLine(r: DeployRecord): string {
  const verdict = r.liveCheck ? ` · ${VERDICT[r.liveCheck.verdict] ?? r.liveCheck.verdict}` : "";
  return `${when(r.at)}${r.url ? ` · ${r.url}` : ""}${verdict}`;
}

export default async function SitePublishPage({
  params,
}: {
  params: Promise<{ siteId: string }>;
}) {
  const { siteId } = await params;
  const site = getSiteCached(siteId);
  if (!site) notFound();
  const siteTitle = site.siteTitle || siteId;
  const paths = getPaths();
  // This site's own records (release 18): its bundle's built.json and what
  // was shipped from it, deployed.json — no longer export/out's mtime, which
  // was the family's last build, whichever site that was.
  const [built, deployed] = await Promise.all([
    readBuiltStamp(paths, siteId),
    readDeployedFile(paths, siteId),
  ]);
  const previews = Object.entries(deployed?.previews ?? {}).sort((a, b) => b[1].at - a[1].at);
  const lastPreview = previews[0];
  const previewBranch = getSettings().publish.previewBranch;

  return (
    <div className="flex flex-col gap-8 max-w-3xl">
      {/* 1 — Build & deploy (primary path) for this site. */}
      <section className="flex flex-col gap-3">
        <div>
          <h2 className="text-lg font-semibold">Build &amp; deploy</h2>
          <p className="text-sm text-muted-foreground">
            Updates the index when it is stale, builds this site into its own
            bundle, then deploys that bundle to Cloudflare Pages production —
            stages on the publish queue, one at a time. Cancelling the build
            leaves the deploy nothing new to ship: it ends refused.
          </p>
          <dl
            className="mt-1 grid grid-cols-[auto_1fr] gap-x-3 text-sm text-muted-foreground"
            data-testid="last-deployed"
          >
            <dt>Built:</dt>
            <dd>{built ? `${when(built.builtAt)}${built.branch ? ` from ${built.branch}` : ""}` : "never"}</dd>
            <dt>Last deployed:</dt>
            <dd>{deployed?.production ? recordLine(deployed.production) : "never"}</dd>
            <dt>Last preview:</dt>
            <dd>{lastPreview ? `${lastPreview[0]} · ${recordLine(lastPreview[1])}` : "never"}</dd>
          </dl>
        </div>
        <BuildDeployButton
          siteId={siteId}
          siteTitle={siteTitle}
          cloudflareProject={site.cloudflareProject ?? null}
        />
      </section>

      {/* 2 — Individual steps, for when you only want one half. */}
      <section className="flex flex-col gap-3 border-t border-border pt-6">
        <details>
          <summary className="cursor-pointer text-lg font-semibold select-none">
            Individual steps
          </summary>
          <div className="flex flex-col gap-6 pt-4">
            <div className="flex flex-col gap-3">
              <div>
                <h3 className="font-semibold">Build static export</h3>
                <p className="text-sm text-muted-foreground">
                  The site&rsquo;s build stage: compose, then{" "}
                  <code>next build</code> into{" "}
                  <code>export/.export-builds/{siteId}/out</code> (and{" "}
                  <code>export/out</code> links to it). The index is updated
                  first when it is stale. No deploy.
                </p>
              </div>
              <BuildExportButton siteId={siteId} siteTitle={siteTitle} />
            </div>
            <div className="flex flex-col gap-3">
              <div>
                <h3 className="font-semibold">Deploy static export</h3>
                <p className="text-sm text-muted-foreground">
                  Publishes this site&rsquo;s built bundle to Cloudflare Pages
                  — to production, or to a preview branch you can look at
                  first — and checks the live site. Build first.
                </p>
              </div>
              <DeployButton
                siteId={siteId}
                siteTitle={siteTitle}
                cloudflareProject={site.cloudflareProject ?? null}
                previewBranch={previewBranch}
              />
            </div>
          </div>
        </details>
      </section>
    </div>
  );
}