"use client";

import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/navigation";
import {
  MAX_PREVIEW_BRANCH,
  previewAliasUrl,
  previewBranchProblem,
} from "yt-dlp-transcript-common/lib/pagesDeploy";
import { useHydrated } from "../../operations/components/useOperationsStatus";
import {
  buildAllStaleAction,
  buildAndDeployTargetAction,
  buildTargetAction,
  cancelPublishRunAction,
  deployTargetAction,
  publishNowAction,
} from "../lib/publishActions";
import { JobLane } from "./JobLane";

// THE PUBLISH PANEL (release 18): one row per site, then the hub, then the
// homepage — each with the four chips the publish status computes (index |
// built | deployed | live, publish/publishPlan.ts) and its buttons, each
// button one run of publish stages on the `publish` queue
// (sites/lib/publishActions.ts). Above the rows: Publish now (what the lane
// would run — the stale index, then each policy target, never forced), Build
// all stale (every stale site, whatever its policy, no deploys), the lane's
// chip, and the plan Publish now would enqueue, so the button is predictable.
//
// The chips are the server's: a lane that settles refreshes the page.

export type PanelChip = { tone: "ok" | "stale" | "blocked" | "busy" | "warn" | "off"; text: string };

export type PanelRow = {
  // A site id, "_hub" or "_homepage".
  target: string;
  kind: "site" | "hub" | "homepage";
  title: string;
  chips: { index: PanelChip; built: PanelChip; deployed: PanelChip; live: PanelChip };
  policy: string;
  next: string;
  cloudflareProject: string | null;
  // Why it never deploys (a private site), or null.
  deployProblem: string | null;
  // The preview alias of the policy's branch, when known.
  previewUrl: string | null;
  // When its bundle was built (ms), or null.
  builtAt: number | null;
  // The public URL a production deploy answers on, or null.
  url: string | null;
};

export type PanelPlan = {
  steps: { kind: string; target: string; reason: string; preview?: string }[];
  skipped: { kind: string; target: string; reason: string }[];
};

type Props = {
  rows: PanelRow[];
  index: PanelChip;
  lane: PanelChip;
  plan: PanelPlan;
  // settings.publish.previewBranch: a site row's preview textbox starts on it.
  previewBranch: string;
  // ARCHILYZER_SITE_OUT / ARCHILYZER_HOMEPAGE_OUT are set: "Deploy local".
  siteOut: boolean;
  homepageOut: boolean;
};

const TONE: Record<PanelChip["tone"], string> = {
  ok: "border-success/30 bg-success-soft text-success",
  stale: "border-warning/30 bg-warning-soft text-warning",
  blocked: "border-destructive/30 bg-destructive-soft text-destructive",
  busy: "border-info/30 bg-info-soft text-info",
  warn: "border-warning/30 bg-warning-soft text-warning",
  off: "border-border bg-muted text-muted-foreground",
};

export function Chip({ name, chip }: { name: string; chip: PanelChip }) {
  return (
    <span
      data-chip={name}
      data-tone={chip.tone}
      className={`inline-flex max-w-full items-center gap-1 rounded-full border px-2 py-0.5 text-xs ${TONE[chip.tone]}`}
    >
      <span className="font-mono uppercase tracking-wide opacity-70">{name}</span>
      <span className="truncate">{chip.text}</span>
    </span>
  );
}

const PRIMARY =
  "px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50";
const SECONDARY =
  "px-3 py-2 rounded-md border border-border text-sm font-medium hover:bg-muted disabled:opacity-50";

type Lane = { key: number; title: string; subtitle: string; run: () => ReturnType<typeof publishNowAction> };

function useLane() {
  const [lane, setLane] = useState<Lane | null>(null);
  const [n, setN] = useState(0);
  const launch = (l: Omit<Lane, "key">) => {
    const key = n + 1;
    setN(key);
    setLane({ ...l, key });
  };
  return { lane, launch };
}

export function PublishPanel({ rows, index, lane, plan, previewBranch, siteOut, homepageOut }: Props) {
  const router = useRouter();
  const hydrated = useHydrated();
  const { lane: head, launch } = useLane();

  return (
    <div className="flex flex-col gap-4" data-hydrated={hydrated ? "true" : undefined}>
      <div role="group" aria-label="Publish all" className="flex flex-col gap-3">
        <div className="flex flex-wrap items-center gap-3">
          <button
            type="button"
            className={PRIMARY}
            onClick={() =>
              launch({ title: "Publish now", subtitle: "the plan below, in order", run: () => publishNowAction() })
            }
          >
            Publish now
          </button>
          <button
            type="button"
            className={SECONDARY}
            onClick={() =>
              launch({
                title: "Build all stale",
                subtitle: "every stale site, whatever its policy; nothing deployed",
                run: () => buildAllStaleAction(),
              })
            }
          >
            Build all stale
          </button>
          <Chip name="index" chip={index} />
          <Link href="/operations/publish" aria-label="publish lane" className="no-underline">
            <Chip name="lane" chip={lane} />
          </Link>
        </div>
        <div className="text-sm" data-testid="publish-plan">
          {plan.steps.length === 0 ? (
            <p className="text-muted-foreground">Publish now has nothing to run: everything its policies cover is current.</p>
          ) : (
            <>
              <p className="text-muted-foreground">Publish now would run, in order:</p>
              <ol className="ml-5 list-decimal">
                {plan.steps.map((s) => (
                  <li key={`${s.kind}:${s.target}:${s.preview ?? ""}`}>
                    <code>
                      {s.kind} {s.target}
                    </code>{" "}
                    <span className="text-muted-foreground">— {s.reason}</span>
                  </li>
                ))}
              </ol>
            </>
          )}
          {plan.skipped.length > 0 && (
            <details className="mt-1">
              <summary className="cursor-pointer text-xs text-muted-foreground select-none">
                {plan.skipped.length} left out
              </summary>
              <ul className="ml-5 list-disc text-xs text-muted-foreground">
                {plan.skipped.map((s) => (
                  <li key={`${s.kind}:${s.target}`}>
                    <code>
                      {s.kind} {s.target}
                    </code>
                    : {s.reason}
                  </li>
                ))}
              </ul>
            </details>
          )}
        </div>
        {head && (
          <JobLane
            key={head.key}
            title={head.title}
            subtitle={head.subtitle}
            trigger={head.run}
            onSettled={() => router.refresh()}
            cancelAction={cancelPublishRunAction}
          />
        )}
      </div>

      <ul className="flex flex-col divide-y divide-border rounded-md border border-border">
        {rows.map((row) => (
          <li key={row.target} className="p-3">
            {row.kind === "site" ? (
              <SiteRow row={row} previewBranch={previewBranch} siteOut={siteOut} hydrated={hydrated} />
            ) : (
              <FamilyRow row={row} localOut={row.kind === "homepage" && homepageOut} hydrated={hydrated} />
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

function RowHead({ row }: { row: PanelRow }) {
  return (
    <div className="flex flex-col gap-1">
      <div className="flex flex-wrap items-baseline gap-x-2">
        <h3 className="font-semibold">{row.title}</h3>
        {row.kind === "site" && (
          <Link href={`/sites/${row.target}/publish`} className="text-xs text-muted-foreground underline">
            <code>{row.target}</code>
          </Link>
        )}
        <span className="text-xs text-muted-foreground">policy: {row.policy}</span>
      </div>
      <div className="flex flex-wrap gap-1.5">
        <Chip name="index" chip={row.chips.index} />
        <Chip name="built" chip={row.chips.built} />
        <Chip name="deployed" chip={row.chips.deployed} />
        <Chip name="live" chip={row.chips.live} />
      </div>
      <p className="text-xs text-muted-foreground">next: {row.next}</p>
    </div>
  );
}

function PreviewInput({
  value,
  onChange,
  placeholder,
}: {
  value: string;
  onChange: (v: string) => void;
  placeholder: string;
}) {
  return (
    <label className="flex items-center gap-2 text-sm">
      <span className="text-muted-foreground">Preview branch</span>
      <input
        type="text"
        aria-label="preview branch"
        placeholder={placeholder}
        value={value}
        // Twice the limit, so an over-long name is refused with the sentence
        // that says WHY rather than silently truncated.
        maxLength={MAX_PREVIEW_BRANCH * 2}
        onChange={(e) => onChange(e.target.value)}
        className="w-44 rounded-md border border-border bg-background px-2 py-1 font-mono text-sm"
      />
    </label>
  );
}

function PreviewProblem({ problem }: { problem: string | null }) {
  if (problem === null) return null;
  return (
    // Not "preview branch problem": a name that CONTAINS the input's would
    // make every by-label lookup for the input ambiguous.
    <p role="status" aria-label="preview problem" className="text-sm text-destructive">
      {problem}
    </p>
  );
}

function SiteRow({
  row,
  previewBranch,
  siteOut,
  hydrated,
}: {
  row: PanelRow;
  previewBranch: string;
  siteOut: boolean;
  hydrated: boolean;
}) {
  const router = useRouter();
  const { lane, launch } = useLane();
  const [preview, setPreview] = useState(previewBranch);
  const branch = preview.trim();
  const problem = previewBranchProblem(branch);
  const project = row.cloudflareProject;
  const pages = row.deployProblem === null && project !== null;
  const id = row.target;

  return (
    <div
      role="group"
      aria-label={`Publish ${id}`}
      className="flex flex-col gap-2"
      data-hydrated={hydrated ? "true" : undefined}
    >
      <RowHead row={row} />
      <div className="flex flex-wrap items-center gap-2">
        <button
          type="button"
          className={PRIMARY}
          onClick={() =>
            launch({ title: `Build ${id}`, subtitle: `.export-builds/${id}/out`, run: () => buildTargetAction(id) })
          }
        >
          Build
        </button>
        {pages && (
          <>
            <button
              type="button"
              className={SECONDARY}
              disabled={problem !== null}
              onClick={() =>
                launch({
                  title: `Deploy preview ${id}`,
                  subtitle: `${project} (preview ${branch})`,
                  run: () => deployTargetAction(id, { where: "preview", preview: branch }),
                })
              }
            >
              Deploy preview
            </button>
            <PreviewInput value={preview} onChange={setPreview} placeholder={previewBranch} />
            <button
              type="button"
              className={SECONDARY}
              onClick={() =>
                launch({
                  title: `Deploy production ${id}`,
                  subtitle: `${project} (production)`,
                  run: () => deployTargetAction(id, { where: "production" }),
                })
              }
            >
              Deploy production
            </button>
          </>
        )}
        {siteOut && row.deployProblem === null && (
          <button
            type="button"
            className={SECONDARY}
            onClick={() =>
              launch({
                title: `Deploy local ${id}`,
                subtitle: "ARCHILYZER_SITE_OUT",
                run: () => deployTargetAction(id, { where: "local" }),
              })
            }
          >
            Deploy local
          </button>
        )}
      </div>
      {pages && <PreviewProblem problem={problem} />}
      {pages && problem === null && branch && (
        <p className="text-xs text-muted-foreground">
          A preview goes to <UrlLink url={previewAliasUrl(project!, branch)} />; production to{" "}
          {row.url ? <UrlLink url={row.url} /> : <code>{project}</code>}.
        </p>
      )}
      {row.deployProblem !== null && <p className="text-xs text-muted-foreground">{row.deployProblem}.</p>}
      {row.deployProblem === null && project === null && (
        <p className="text-xs text-warning">
          No Cloudflare Pages project — set one on the site&apos;s page to deploy.
        </p>
      )}
      {lane && (
        <JobLane
          key={lane.key}
          title={lane.title}
          subtitle={lane.subtitle}
          trigger={lane.run}
          onSettled={() => router.refresh()}
          cancelAction={cancelPublishRunAction}
        />
      )}
    </div>
  );
}

// The hub's and the homepage's row: the names they have always had ("Build
// hub", "Deploy homepage", "Deploy after build", a preview box that starts
// empty = production), so the family's two sites read as they did.
function FamilyRow({ row, localOut, hydrated }: { row: PanelRow; localOut: boolean; hydrated: boolean }) {
  const router = useRouter();
  const { lane, launch } = useLane();
  const [deploy, setDeploy] = useState(false);
  const [preview, setPreview] = useState("");
  const noun = row.kind === "hub" ? "hub" : "homepage";
  const target = row.target;
  const branch = preview.trim();
  const problem = branch ? previewBranchProblem(branch) : null;
  const project = row.cloudflareProject;
  const alias = branch && problem === null && project ? previewAliasUrl(project, branch) : null;
  const where = branch ? ({ where: "preview", preview: branch } as const) : ({ where: "production" } as const);
  const dest = `${project ?? "no project"}${branch ? ` (preview ${branch})` : " (production)"}`;
  const out = row.kind === "hub" ? ".export-builds/_hub/out" : "homepage/out";
  const built = row.builtAt === null ? null : new Date(row.builtAt).toLocaleString();

  return (
    <div
      role="group"
      aria-label={row.kind === "hub" ? "Hub build" : "Homepage build"}
      className="flex flex-col gap-2"
      data-hydrated={hydrated ? "true" : undefined}
    >
      <RowHead row={row} />
      <div className="flex flex-wrap items-center gap-3">
        <button
          type="button"
          className={PRIMARY}
          // A build alone deploys nothing, so only a build that will deploy is
          // held back by a bad preview name.
          disabled={deploy && problem !== null}
          onClick={() =>
            deploy
              ? launch({
                  title: `Build & deploy ${noun}`,
                  subtitle: `${out} · ${dest}`,
                  run: () => buildAndDeployTargetAction(target, where),
                })
              : launch({ title: `Build ${noun}`, subtitle: out, run: () => buildTargetAction(target) })
          }
        >
          Build {noun}
        </button>
        <label className="flex items-center gap-2 text-sm text-muted-foreground">
          <input type="checkbox" checked={deploy} onChange={(e) => setDeploy(e.target.checked)} />
          Deploy after build
        </label>
        <button
          type="button"
          className={SECONDARY}
          disabled={problem !== null}
          onClick={() =>
            launch({ title: `Deploy ${noun}`, subtitle: `${out} · ${dest}`, run: () => deployTargetAction(target, where) })
          }
        >
          Deploy {noun}
        </button>
        <PreviewInput value={preview} onChange={setPreview} placeholder="none: production" />
        {localOut && (
          <button
            type="button"
            className={SECONDARY}
            onClick={() =>
              launch({
                title: `Deploy local ${noun}`,
                subtitle: "ARCHILYZER_HOMEPAGE_OUT",
                run: () => deployTargetAction(target, { where: "local" }),
              })
            }
          >
            Deploy local
          </button>
        )}
      </div>
      <PreviewProblem problem={problem} />
      <p className="text-xs text-muted-foreground" data-testid={`${noun}-ships`}>
        {built ? (
          <>
            Deploy {noun} ships <code>{out}</code>, built {built},
          </>
        ) : (
          <>
            <code>{out}</code> holds no build yet, so Deploy {noun} has nothing to ship. A deploy goes
          </>
        )}{" "}
        to <code>{project ?? "no Pages project"}</code>{" "}
        {!branch ? (
          <>(production){row.url ? <>: <UrlLink url={row.url} />.</> : "."}</>
        ) : alias ? (
          <>
            (preview <code>{branch}</code>): <UrlLink url={alias} />; the live site is left alone.
          </>
        ) : (
          <>
            (preview <code>{branch}</code>).
          </>
        )}
      </p>
      {row.kind === "homepage" && (
        <p className="text-xs text-muted-foreground">
          Build homepage also publishes the source mirror (<code>archilyzer source publish</code>) and refuses if
          a denied string survives the scrub; a refusal removes the last published source, from homepage/out too.
          Deploy homepage refuses a build whose source was not audited under today&rsquo;s rules.
        </p>
      )}
      {lane && (
        <JobLane
          key={lane.key}
          title={lane.title}
          subtitle={lane.subtitle}
          trigger={lane.run}
          onSettled={() => router.refresh()}
          cancelAction={cancelPublishRunAction}
        />
      )}
    </div>
  );
}

function UrlLink({ url }: { url: string }) {
  return (
    <a className="font-mono underline" href={url} target="_blank" rel="noreferrer">
      {url}
    </a>
  );
}