"use client";

import { useState } from "react";
import { StreamActionLog } from "yt-dlp-transcript-common/components/StreamActionLog";
import { cancelPublishRunAction, buildAndDeployTargetAction } from "../lib/publishActions";

type Props = {
  // The site whose Publish tab this is. Always a real site now — the control
  // lives at /sites/<id>/publish, so there is no "all sites" state to disable.
  siteId: string;
  siteTitle: string;
  // The site's Cloudflare Pages project, or null if it has none (can't deploy).
  cloudflareProject: string | null;
};

// One-click build-then-deploy for this site: the index update when it is
// stale, the build (forced), then its production deploy — publish stages on
// the publish queue, followed in one log (publishActions.ts). The deploy waits
// ON DISK for this run's build: a failed or cancelled build ends it refused.
export function BuildDeployButton({
  siteId,
  siteTitle,
  cloudflareProject,
}: Props) {
  const ready = Boolean(cloudflareProject);
  const [skipArchives, setSkipArchives] = useState(false);

  let notice: React.ReactNode;
  if (!cloudflareProject) {
    notice = (
      <p className="text-sm text-warning">
        <strong>{siteTitle}</strong> has no Cloudflare Pages project
        configured — set one on the site&apos;s page to deploy.
      </p>
    );
  } else {
    notice = (
      <p className="text-sm text-muted-foreground">
        Builds then deploys <strong>{siteTitle}</strong> (
        <code>{siteId}</code> → <code>{cloudflareProject}</code>).
      </p>
    );
  }

  return (
    <StreamActionLog
      trigger={() => buildAndDeployTargetAction(siteId, { where: "production", skipArchives })}
      cancelAction={cancelPublishRunAction}
      buttonLabel="Build & deploy"
      runningLabel="Building & deploying…"
      label="Build and deploy"
      disabled={!ready}
      extraControls={
        <div className="flex flex-col gap-2">
          {notice}
          {ready && (
            <label className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                checked={skipArchives}
                onChange={(e) => setSkipArchives(e.target.checked)}
              />
              Skip archive zips (transcript &amp; live-chat downloads)
            </label>
          )}
        </div>
      }
    />
  );
}