"use client";

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

// ---------------------------------------------------------------------------
// Running a build, and watching it per clip.
//
// BuildChain's step boxes are the right model for the chain -- preflight,
// resolve, build, verify -- but the build step alone is twenty minutes of work
// on nineteen clips, and "step 3 of 4, running" is not progress. So the build
// step also renders a grid: one box per timeline entry, lit by the NDJSON events
// the pipeline emits (fetch / snap / segment / entry-failed).
//
// Polling, not streaming, like every other job here.
// ---------------------------------------------------------------------------

type StepView = { label: string; argv: string[]; cwd: string; timeoutMs: number | null };
type Ev = Record<string, unknown> & { ev: string; id?: string };
type JobView = {
  id: string;
  state: "running" | "done" | "failed";
  stepIndex: number;
  steps: StepView[];
  error: string | null;
  log: string[];
  next: number;
  events: Ev[];
  nextEvent: number;
};

type Preset = { id: string; label: string };

const CLIP_STATE = {
  pending: "border-[var(--color-line)] text-[var(--color-dim)]",
  fetching: "border-[var(--color-meter)] text-[var(--color-meter)]",
  cutting: "border-[var(--color-sel)] text-[var(--color-sel)]",
  done: "border-[var(--color-good)] text-[var(--color-good)]",
  failed: "border-[var(--color-bad)] text-[var(--color-bad)]",
} as const;
type ClipState = keyof typeof CLIP_STATE;

export default function ReportBuildChain({
  project,
  entries,
}: {
  project: string;
  entries: { id: string; kind: string }[];
}) {
  const [presets, setPresets] = useState<Preset[]>([]);
  const [variants, setVariants] = useState<string[]>([]);
  const [preset, setPreset] = useState("fast");
  const [only, setOnly] = useState("");
  // The options the pipeline has and the driver used to hide. The dry-run
  // argv panel is the proof of what each one does.
  const [variant, setVariant] = useState("");
  const [noXfade, setNoXfade] = useState(false);
  const [chaptersOnly, setChaptersOnly] = useState(false);
  const [previewOn, setPreviewOn] = useState(false);
  const [previewAt, setPreviewAt] = useState("0");
  const [previewDur, setPreviewDur] = useState("20");
  const [dry, setDry] = useState<StepView[] | null>(null);
  const [job, setJob] = useState<JobView | null>(null);
  const [events, setEvents] = useState<Ev[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [needsReplace, setNeedsReplace] = useState(false);
  const [busy, setBusy] = useState(false);
  const since = useRef(0);
  const sinceEvent = useRef(0);

  useEffect(() => {
    void fetch("/api/report/build", { cache: "no-store" })
      .then((r) => r.json())
      .then((j) => {
        setPresets(j.presets ?? []);
        setVariants(j.variants ?? []);
        // Adopt a build already running, so a reload does not lose it.
        if (j.running) {
          setJob(j.running as JobView);
          setEvents((j.running as JobView).events ?? []);
        }
      })
      .catch(() => {});
  }, []);

  useEffect(() => {
    if (!job || job.state !== "running") return;
    const t = setInterval(async () => {
      const r = await fetch(
        `/api/report/build?job=${job.id}&since=${since.current}&sinceEvent=${sinceEvent.current}`,
        { cache: "no-store" },
      );
      if (!r.ok) return;
      const j = (await r.json()) as JobView;
      since.current = j.next;
      sinceEvent.current = j.nextEvent;
      setEvents((prev) => [...prev, ...(j.events ?? [])]);
      setJob((prev) => (prev ? { ...j, log: [...prev.log, ...j.log] } : j));
    }, 800);
    return () => clearInterval(t);
  }, [job]);

  const post = useCallback(
    async (qs: string, extra: Record<string, unknown> = {}) => {
      setBusy(true);
      setError(null);
      const options: Record<string, unknown> = {};
      if (variant) options.variant = variant;
      if (noXfade) options.xfade = false;
      if (chaptersOnly) options.chaptersOnly = true;
      if (previewOn) options.preview = { at: Number(previewAt), dur: Number(previewDur) };
      const r = await fetch(`/api/report/build${qs}`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ project, preset, only: only || null, options, ...extra }),
      });
      const j = (await r.json()) as Record<string, unknown>;
      setBusy(false);
      if (!r.ok) {
        setError(String(j.error ?? r.status));
        setNeedsReplace(!!j.needsReplace);
        return null;
      }
      setNeedsReplace(false);
      return j;
    },
    [project, preset, only, variant, noXfade, chaptersOnly, previewOn, previewAt, previewDur],
  );

  const clipStates = new Map<string, ClipState>();
  for (const e of events) {
    const id = e.id as string | undefined;
    if (!id) continue;
    if (e.ev === "fetch") clipStates.set(id, e.cached ? "cutting" : "fetching");
    else if (e.ev === "clip" || e.ev === "card") clipStates.set(id, "cutting");
    else if (e.ev === "snap") clipStates.set(id, "cutting");
    else if (e.ev === "segment") clipStates.set(id, "done");
    else if (e.ev === "entry-failed") clipStates.set(id, "failed");
  }
  const failed = events.filter((e) => e.ev === "entry-failed");

  return (
    <section className="space-y-2 rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
      <div className="flex flex-wrap items-center gap-2">
        <span className="micro">build</span>
        <select
          value={preset}
          onChange={(e) => setPreset(e.target.value)}
          data-preset=""
          className="rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-1 text-[12px]"
        >
          {presets.map((p) => (
            <option key={p.id} value={p.id}>
              {p.label}
            </option>
          ))}
        </select>
        {preset === "preview" && (
          <select
            value={only}
            onChange={(e) => setOnly(e.target.value)}
            data-only=""
            className="rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-1 font-mono text-[12px]"
          >
            <option value="">— which clip —</option>
            {entries.filter((e) => e.kind === "clip").map((e) => (
              <option key={e.id} value={e.id}>
                {e.id}
              </option>
            ))}
          </select>
        )}

        <button
          type="button"
          data-action="dry"
          className={buttonVariants({ size: "sm" })}
          disabled={busy}
          onClick={async () => {
            const j = await post("?dry=1");
            if (j) setDry(j.steps as StepView[]);
          }}
        >
          show the command
        </button>
        <button
          type="button"
          data-action="run"
          className={buttonVariants({ variant: "primary", size: "sm" })}
          disabled={busy || job?.state === "running"}
          onClick={async () => {
            const j = await post("");
            if (j?.job) {
              since.current = 0;
              sinceEvent.current = 0;
              setEvents([]);
              setJob(j.job as JobView);
            }
          }}
        >
          run
        </button>
        {job?.state === "running" && (
          <button
            type="button"
            data-action="cancel"
            className={buttonVariants({ variant: "destructive", size: "sm" })}
            onClick={() => void fetch(`/api/report/build?cancel=${job.id}`, { method: "POST" })}
          >
            cancel
          </button>
        )}
      </div>

      {/* The options row. Each maps to one flag of build-video.mjs; "show the
          command" is where to see it land. */}
      <div className="flex flex-wrap items-center gap-3 text-[11px] text-[var(--color-dim)]" data-build-options="">
        <label className="flex items-center gap-1">
          variant
          <select
            value={variant}
            onChange={(e) => setVariant(e.target.value)}
            data-option="variant"
            className="rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-1.5 py-0.5 font-mono text-[11px]"
          >
            <option value="">default (sourced)</option>
            {variants.map((v) => (
              <option key={v} value={v}>
                {v}
              </option>
            ))}
          </select>
        </label>
        <label className="flex items-center gap-1">
          <input type="checkbox" checked={noXfade} onChange={(e) => setNoXfade(e.target.checked)} data-option="no-xfade" />
          hard cuts (--no-xfade)
        </label>
        <label className="flex items-center gap-1">
          <input
            type="checkbox"
            checked={chaptersOnly}
            onChange={(e) => {
              setChaptersOnly(e.target.checked);
              if (e.target.checked) setPreviewOn(false);
            }}
            data-option="chapters-only"
          />
          chapters only (no encode)
        </label>
        <label className="flex items-center gap-1">
          <input
            type="checkbox"
            checked={previewOn}
            onChange={(e) => {
              setPreviewOn(e.target.checked);
              if (e.target.checked) setChaptersOnly(false);
            }}
            data-option="preview"
          />
          rail preview
        </label>
        {previewOn && (
          <span className="flex items-center gap-1">
            at
            <input
              type="number"
              min={0}
              step={1}
              value={previewAt}
              onChange={(e) => setPreviewAt(e.target.value)}
              data-option="preview-at"
              className="w-16 rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1 py-0.5 text-[11px]"
            />
            s for
            <input
              type="number"
              min={1}
              step={1}
              value={previewDur}
              onChange={(e) => setPreviewDur(e.target.value)}
              data-option="preview-dur"
              className="w-16 rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1 py-0.5 text-[11px]"
            />
            s
          </span>
        )}
      </div>

      {error && (
        <p data-build-error="" className="text-[12px] text-[var(--color-bad)]">
          {error}
          {needsReplace && (
            <>
              {" "}
              <button
                type="button"
                data-action="replace"
                className={buttonVariants({ variant: "destructive", size: "sm" })}
                onClick={async () => {
                  const j = await post("?replace=1");
                  if (j?.job) {
                    since.current = 0;
                    sinceEvent.current = 0;
                    setEvents([]);
                    setJob(j.job as JobView);
                  }
                }}
              >
                stamp it aside and build
              </button>
            </>
          )}
        </p>
      )}

      {dry && !job && (
        <pre
          data-dry=""
          className="max-h-56 overflow-auto rounded border border-[var(--color-line)] bg-[var(--color-ink)] p-2 font-mono text-[11px] text-[var(--color-dim)]"
        >
          {dry.map((s) => `# ${s.label}\n${s.argv.join(" ")}\n`).join("\n")}
        </pre>
      )}

      {job && (
        <div className="space-y-2">
          <ol className="flex flex-wrap gap-1.5">
            {job.steps.map((s, i) => (
              <li
                key={s.label}
                data-step={i}
                data-step-state={
                  job.state !== "running" && i <= job.stepIndex
                    ? job.state
                    : i < job.stepIndex
                      ? "done"
                      : i === job.stepIndex
                        ? "running"
                        : "pending"
                }
                className={badgeVariants({
                  variant:
                    i < job.stepIndex || (job.state === "done" && i <= job.stepIndex)
                      ? "meter"
                      : i === job.stepIndex && job.state === "running"
                        ? "on"
                        : job.state === "failed" && i === job.stepIndex
                          ? "blocking"
                          : "neutral",
                })}
              >
                {s.label}
              </li>
            ))}
          </ol>

          {/* One box per entry, lit by the pipeline's own events. "Step 3 of 4,
              running" is not progress when step 3 is twenty minutes long. */}
          <div className="flex flex-wrap gap-1">
            {entries.map((e) => {
              const st = clipStates.get(e.id) ?? "pending";
              return (
                <span
                  key={e.id}
                  data-clip-box={e.id}
                  data-clip-state={st}
                  className={`rounded border px-1.5 py-0.5 font-mono text-[10px] ${CLIP_STATE[st]}`}
                >
                  {e.id}
                </span>
              );
            })}
          </div>

          {failed.length > 0 && (
            <p data-build-failed="" className="text-[12px] text-[var(--color-bad)]">
              {failed.length} entr{failed.length === 1 ? "y" : "ies"} failed (
              {failed.map((f) => String(f.id)).join(", ")}). Everything buildable was built and the
              segments are kept — but the timeline was NOT concatenated, because a finished file
              quietly missing a citation looks complete.
            </p>
          )}

          <pre className="max-h-56 overflow-auto rounded border border-[var(--color-line)] bg-[var(--color-ink)] p-2 font-mono text-[11px] text-[var(--color-dim)]">
            {job.log.slice(-120).join("\n")}
          </pre>

          <div className="micro" data-job-state={job.state}>
            {job.state}
            {job.error ? ` — ${job.error}` : ""}
          </div>
        </div>
      )}
    </section>
  );
}