"use client";

import { useState } from "react";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import {
  MAX_PREVIEW_BRANCH,
  previewAliasUrl,
  previewBranchProblem,
} from "yt-dlp-transcript-common/lib/pagesDeploy";
import { cancelPublishRunAction, deployTargetAction } from "../lib/publishActions";

type Props = {
  // The site whose Publish tab this is — always a real site.
  siteId: string;
  siteTitle: string;
  // The Cloudflare Pages project, when the site has one. Needed to SHOW the
  // preview alias, which is a function of project + branch — so with no project
  // there is no preview to offer, and the control says that instead of linking
  // a hostname that cannot exist.
  cloudflareProject?: string | null;
  // settings.publish.previewBranch: the preview box starts on it.
  previewBranch?: string;
};

const DEFAULT_PREVIEW_BRANCH = "preview";

// Two deploys of the site's built bundle (`export/.export-builds/<id>/out`):
// to production, or to a Cloudflare Pages preview branch — each a deploy
// stage on the publish queue, forced (a click always deploys).
//
// THE PRODUCTION BUTTON SAYS "PRODUCTION" NOW. With a preview control beside
// it, a button labelled only "Deploy" is the one an operator clicks by reflex
// when they meant the safe one; the extra word is the whole cost of not doing
// that.
export function DeployButton({ siteId, siteTitle, cloudflareProject, previewBranch }: Props) {
  return (
    <div className="flex flex-col gap-6">
      <StreamActionLog
        trigger={() => deployTargetAction(siteId, { where: "production" })}
        cancelAction={cancelPublishRunAction}
        buttonLabel="Deploy to production"
        runningLabel="Deploying…"
        label="Deploy export"
        extraControls={
          <p className="text-sm text-muted-foreground">
            Deploying <strong>{siteTitle}</strong> (<code>{siteId}</code>).
          </p>
        }
      />
      <PreviewDeploy
        siteId={siteId}
        cloudflareProject={cloudflareProject ?? null}
        initialBranch={previewBranch || DEFAULT_PREVIEW_BRANCH}
      />
    </div>
  );
}

function PreviewDeploy({
  siteId,
  cloudflareProject,
  initialBranch,
}: {
  siteId: string;
  cloudflareProject: string | null;
  initialBranch: string;
}) {
  const [branch, setBranch] = useState(initialBranch);
  const [deployed, setDeployed] = useState<string | null>(null);
  // The SAME function the action and the ops route refuse with, so the button
  // greys out on exactly the names the server would have rejected and the
  // sentence an operator reads here is the sentence they would have got back.
  const problem = previewBranchProblem(branch);
  // The alias is knowable the moment the name is valid — project + branch and
  // nothing else — so it is shown before the deploy rather than fished out of
  // the finished log afterwards.
  const alias =
    problem === null && cloudflareProject
      ? previewAliasUrl(cloudflareProject, branch)
      : null;

  return (
    <section
      aria-label="Deploy preview"
      className="flex flex-col gap-2 border-t border-border pt-4"
    >
      <div>
        <h4 className="text-sm font-semibold">Deploy a preview</h4>
        <p className="text-sm text-muted-foreground">
          Publishes the same bundle to a Cloudflare Pages branch instead of
          production, so you can look at it first. The live site is untouched.
          Previews share the production archive bucket.
        </p>
      </div>
      <StreamActionLog
        trigger={() => deployTargetAction(siteId, { where: "preview", preview: branch })}
        cancelAction={cancelPublishRunAction}
        buttonLabel="Deploy preview"
        runningLabel="Deploying preview…"
        label="Deploy preview"
        disabled={problem !== null}
        // `started` only says a job began — the link's wording is all that
        // changes, and a failed deploy leaves the PREVIOUS preview at the same
        // address, so the link is never a lie about what is there.
        onSettled={(started) => {
          if (started && alias) setDeployed(alias);
        }}
        extraControls={
          <label className="flex items-center gap-2 text-sm">
            <span className="text-muted-foreground">Branch</span>
            <input
              type="text"
              aria-label="preview branch"
              placeholder="preview"
              value={branch}
              // Twice the limit, so an over-long name is refused with the
              // sentence that says WHY rather than silently truncated into a
              // different branch than the one that was typed.
              maxLength={MAX_PREVIEW_BRANCH * 2}
              onChange={(e) => setBranch(e.target.value)}
              className="w-44 rounded-md border border-border bg-background px-2 py-1 font-mono text-sm"
            />
          </label>
        }
      />
      {problem ? (
        <p
          role="status"
          // NOT "preview branch problem". An accessible name that CONTAINS
          // another control's name makes every by-label lookup for the input
          // ambiguous — a real screen-reader confusion as much as a test one.
          // Only the input answers to "preview branch".
          aria-label="preview problem"
          className="text-sm text-destructive"
        >
          {problem}
        </p>
      ) : alias ? (
        <p className="text-sm text-muted-foreground break-all">
          {deployed === alias ? "Deployed to " : "Will deploy to "}
          <a
            className="font-mono underline"
            href={alias}
            target="_blank"
            rel="noreferrer"
          >
            {alias}
          </a>
        </p>
      ) : (
        <p className="text-sm text-muted-foreground">
          Set a Cloudflare Pages project for this site to preview it.
        </p>
      )}
    </section>
  );
}