"use client";

import { useEffect, useState } from "react";
import { buttonVariants } from "@/components/ui/button";

// ---------------------------------------------------------------------------
// "Tag cited videos as …"
//
// A walked report is a set of adjudicated claims about specific recordings.
// That is exactly what the archive's curated tags record, so this hands the
// judgement over instead of making somebody re-derive it there — whole project,
// or one section at a time when the sections mean different things ("on mic" in
// A, "discussed" in C).
//
// IT ASKS THE EDITOR; IT DOES NOT WRITE THE CORPUS. The POST goes to this
// tool's own route, which forwards to /api/ops/tag-videos with the shared
// WORKER_TOKEN — the same convention report-to-video/fetch-via-editor.mjs uses
// for a clip window. The token never reaches the browser, which is why the
// vocabulary is fetched through that route too rather than from the editor
// directly.
//
// WHAT IT REPORTS IS THE EDITOR'S NUMBER. `changed` is how many videos actually
// moved: re-tagging what is already tagged changes nothing, and printing "90
// tagged" over an answer of 0 would be this page lying about the archive.
// ---------------------------------------------------------------------------

type State = {
  configured: boolean;
  reachable: boolean;
  editor: string;
  tags: { id: string; label: string }[];
  sections: { letter: string; clips: number; videos: number }[];
  videos: number;
  clips: number;
  missing: string[];
};

export default function TagCitedButton({ project }: { project: string }) {
  const [state, setState] = useState<State | null>(null);
  const [tag, setTag] = useState("");
  const [section, setSection] = useState("");
  const [op, setOp] = useState<"add" | "remove">("add");
  const [busy, setBusy] = useState(false);
  const [msg, setMsg] = useState<string | null>(null);
  const [failed, setFailed] = useState(false);

  useEffect(() => {
    let live = true;
    void fetch(`/api/report/tag?project=${encodeURIComponent(project)}`, {
      cache: "no-store",
    })
      .then((r) => r.json())
      .then((s: State & { error?: string }) => {
        if (!live || s.error) return;
        setState(s);
        setTag((t) => t || s.tags[0]?.id || "");
      })
      .catch(() => {});
    return () => {
      live = false;
    };
  }, [project]);

  if (!state) return null;

  const scopeVideos = section
    ? (state.sections.find((s) => s.letter === section)?.videos ?? 0)
    : state.videos;

  async function run() {
    setBusy(true);
    setFailed(false);
    setMsg(null);
    try {
      const res = await fetch("/api/report/tag", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          project,
          tag,
          op,
          ...(section ? { section } : {}),
        }),
      });
      const body = (await res.json().catch(() => ({}))) as {
        error?: string;
        changed?: number;
        videos?: number;
        missing?: string[];
      };
      if (!res.ok || body.error) {
        setFailed(true);
        setMsg(body.error ?? `HTTP ${res.status}`);
        return;
      }
      const verb = op === "add" ? "tagged" : "untagged";
      setMsg(
        `${verb} ${body.changed ?? 0} of ${body.videos ?? 0} cited video${
          (body.videos ?? 0) === 1 ? "" : "s"
        }` +
          (body.missing?.length
            ? ` — ${body.missing.length} clip(s) name no channel: ${body.missing.join(", ")}`
            : ""),
      );
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="flex flex-wrap items-center gap-2" data-tag-cited="">
      <span className="micro">tag cited videos</span>
      {!state.configured ? (
        <span className="text-[11px] text-[var(--color-dim)]">
          WORKER_TOKEN is not set here, so the editor cannot be asked.
        </span>
      ) : !state.reachable ? (
        <span className="text-[11px] text-[var(--color-dim)]">
          no editor at <code className="font-mono">{state.editor}</code>
        </span>
      ) : state.tags.length === 0 ? (
        <span className="text-[11px] text-[var(--color-dim)]">
          the archive defines no tags yet — define one on the editor&rsquo;s
          Tags page
        </span>
      ) : (
        <>
          <select
            aria-label="tag"
            data-tag-cited-tag=""
            value={tag}
            onChange={(e) => setTag(e.target.value)}
            className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-1.5 py-1 text-[11px]"
          >
            {state.tags.map((t) => (
              <option key={t.id} value={t.id}>
                {t.label}
              </option>
            ))}
          </select>
          <select
            aria-label="scope"
            data-tag-cited-scope=""
            value={section}
            onChange={(e) => setSection(e.target.value)}
            className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-1.5 py-1 text-[11px]"
          >
            <option value="">whole project ({state.videos})</option>
            {state.sections.map((s) => (
              <option key={s.letter} value={s.letter}>
                section {s.letter} ({s.videos})
              </option>
            ))}
          </select>
          <select
            aria-label="operation"
            data-tag-cited-op=""
            value={op}
            onChange={(e) => setOp(e.target.value as "add" | "remove")}
            className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-1.5 py-1 text-[11px]"
          >
            <option value="add">tag</option>
            <option value="remove">untag</option>
          </select>
          <button
            type="button"
            data-action="tag-cited"
            data-state={busy ? "busy" : failed ? "failed" : msg ? "done" : "idle"}
            disabled={busy || !tag || scopeVideos === 0}
            className={buttonVariants({ size: "sm" })}
            onClick={() => void run()}
          >
            {busy
              ? "asking the editor…"
              : `${op === "add" ? "tag" : "untag"} ${scopeVideos} video${scopeVideos === 1 ? "" : "s"}`}
          </button>
        </>
      )}
      {msg && (
        <span
          data-tag-cited-msg=""
          className={`text-[11px] ${failed ? "text-[var(--color-bad)]" : "text-[var(--color-dim)]"}`}
        >
          {msg}
        </span>
      )}
    </div>
  );
}