"use client";

import Link from "next/link";
import { useState } from "react";
import {
  clearAllIncompleteTranscriptsAction,
  redownloadAllIncompleteTranscriptsAction,
  type GlobalIncompleteResult,
} from "../../lib/actionable/actions";

type Mode = "clear" | "redownload";

type Status =
  | { kind: "idle" }
  | { kind: "running"; mode: Mode }
  | { kind: "done"; mode: Mode; result: GlobalIncompleteResult }
  | { kind: "error"; message: string };

export function FixAllIncompleteButton() {
  const [status, setStatus] = useState<Status>({ kind: "idle" });

  async function run(mode: Mode) {
    if (
      mode === "clear" &&
      !window.confirm(
        "Delete the truncated audio + transcript for every flagged video across ALL channels and enable the auto-download/transcribe runners? The current partial transcripts are removed and re-fetched. This cannot be undone.",
      )
    ) {
      return;
    }
    setStatus({ kind: "running", mode });
    try {
      const result =
        mode === "clear"
          ? await clearAllIncompleteTranscriptsAction()
          : await redownloadAllIncompleteTranscriptsAction();
      setStatus({ kind: "done", mode, result });
    } catch (e) {
      setStatus({ kind: "error", message: (e as Error).message });
    }
  }

  const running = status.kind === "running";
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <button
        type="button"
        onClick={() => run("redownload")}
        disabled={running}
        aria-label="re-download all incomplete transcripts"
        className="px-2.5 py-1 rounded-md bg-primary text-primary-foreground text-xs font-medium hover:opacity-90 disabled:opacity-50 whitespace-nowrap"
      >
        {status.kind === "running" && status.mode === "redownload"
          ? "Queuing…"
          : "Re-fix all"}
      </button>
      <button
        type="button"
        onClick={() => run("clear")}
        disabled={running}
        aria-label="clear all incomplete transcripts"
        className="px-2.5 py-1 rounded-md border border-border text-xs font-medium hover:bg-muted disabled:opacity-50 whitespace-nowrap"
      >
        {status.kind === "running" && status.mode === "clear"
          ? "Clearing…"
          : "Clear & re-queue all"}
      </button>
      {status.kind === "done" && (
        <span
          aria-label="fix all incomplete transcripts result"
          className="text-xs text-muted-foreground"
        >
          {status.result.ok ? (
            <>
              {status.mode === "clear" ? "Cleared" : "Queued"}{" "}
              {status.result.affected} across {status.result.channels} channel
              {status.result.channels === 1 ? "" : "s"} ·{" "}
              <Link
                href="/jobs"
                className="underline hover:text-foreground"
              >
                view jobs
              </Link>
            </>
          ) : (
            status.result.error
          )}
        </span>
      )}
      {status.kind === "error" && (
        <span
          role="alert"
          aria-label="fix all incomplete transcripts error"
          className="text-xs text-destructive"
        >
          {status.message}
        </span>
      )}
    </div>
  );
}