"use client";

import { useEffect, useRef, useState } from "react";

// The apply chain, offered as ONE action.
//
// The order is the trap. `apply-hook-trims.mjs` closes by telling you to use
// its output with HOOKDIR=<outdir>, which is right for a plain build and WRONG
// for these two: the shipped overlays point at hooks-best/, where hook-01/02/03
// are copies of the winning take, and HOOKDIR overrides BY BASENAME -- so that
// route silently restores each occurrence's own take and throws the take
// selection away.
//
// So the UI never exposes HOOKDIR. It offers the chain, shows the exact argv
// before running it, and the re-mix step is asserted to carry no HOOKDIR at all
// (server-side, in the build route).

type Step = { label: string; argv: string[]; cwd: string; env: Record<string, string> };
type JobView = {
  id: string;
  state: "running" | "done" | "failed";
  stepIndex: number;
  steps: Step[];
  error: string | null;
  log: string[];
  next: number;
};

type MediaFile = { path: string; label: string };

export default function BuildChain({ setId }: { setId: string }) {
  const [body, setBody] = useState("");
  const [files, setFiles] = useState<MediaFile[]>([]);
  const [dry, setDry] = useState<{ steps: Step[]; body: string } | null>(null);
  const [job, setJob] = useState<JobView | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);
  const since = useRef(0);

  useEffect(() => {
    fetch("/api/mix/files", { cache: "no-store" })
      .then((r) => (r.ok ? r.json() : null))
      .then((j) => {
        const list = (j?.files ?? j?.media ?? []) as MediaFile[];
        if (Array.isArray(list)) setFiles(list.filter((f) => /\.(wav|mp4|mp3|flac)$/i.test(f.label)));
      })
      .catch(() => {});
  }, []);

  // Poll while a job is alive. Same shape as MixBench's render poll.
  useEffect(() => {
    if (!job || job.state !== "running") return;
    const t = setInterval(async () => {
      try {
        const r = await fetch(`/api/browse/build?job=${job.id}&since=${since.current}`, {
          cache: "no-store",
        });
        if (!r.ok) return;
        const j = (await r.json()) as JobView;
        since.current = j.next;
        setJob((prev) => (prev ? { ...j, log: [...prev.log, ...j.log] } : j));
      } catch {
        /* keep polling; a dropped tick is not a failure */
      }
    }, 1000);
    return () => clearInterval(t);
  }, [job]);

  const post = async (asDry: boolean) => {
    setBusy(true);
    setError(null);
    try {
      const res = await fetch(`/api/browse/build${asDry ? "?dry=1" : ""}`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ recipe: "mk-hooks-remix", set: setId, body }),
        cache: "no-store",
      });
      const j = await res.json();
      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
      if (asDry) {
        setDry({ steps: j.steps, body: j.body });
      } else {
        setDry({ steps: j.steps, body: j.body });
        since.current = j.job?.next ?? 0;
        setJob(j.job);
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(false);
    }
  };

  return (
    <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
      <div className="micro mb-2">apply the trims</div>

      <p className="mb-2 text-[11px] text-[var(--color-dim)]">
        Three steps in one action:{" "}
        <span className="font-mono text-[var(--color-text)]">apply-hook-trims</span> →{" "}
        <span className="font-mono text-[var(--color-text)]">pick-take --apply</span> →{" "}
        <span className="font-mono text-[var(--color-text)]">mk-mix-hooks</span>. Running the first
        one alone and pointing the build at its output with{" "}
        <span className="font-mono">HOOKDIR=</span> would put each occurrence&apos;s own take back
        and lose the take selection, so that route is not offered.
      </p>

      <div className="flex flex-wrap items-center gap-2">
        <label className="text-[11px] text-[var(--color-dim)]" htmlFor="body">
          body render
        </label>
        <select
          id="body"
          value={body}
          onChange={(e) => setBody(e.target.value)}
          className="max-w-[28rem] rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1.5 py-1 font-mono text-[11px] text-[var(--color-text)]"
        >
          <option value="">— pick the already-rendered song —</option>
          {files.map((f) => (
            <option key={f.label} value={f.label}>
              {f.label}
            </option>
          ))}
        </select>
        <button
          type="button"
          disabled={busy || !body}
          onClick={() => post(true)}
          className="rounded border border-[var(--color-line)] px-2.5 py-1 text-[12px] text-[var(--color-dim)] hover:text-[var(--color-text)] disabled:opacity-40"
        >
          show the commands
        </button>
        <button
          type="button"
          disabled={busy || !body || job?.state === "running"}
          onClick={() => post(false)}
          className="rounded border border-[var(--color-sel)] px-2.5 py-1 text-[12px] text-[var(--color-sel)] disabled:opacity-40"
        >
          run the chain
        </button>
      </div>

      {/* The whole-song .sh builds were never runnable here: they hardcoded
          their own paths, ignored SONG_DIR, and took 20+ minutes. They were
          deleted in release 12 (lib/jobs.ts). */}
      <p className="mt-2 text-[11px] text-[var(--color-dim)]">
        The whole-song rebuild scripts were one-off shell run logs that hardcoded their paths
        and ignored <span className="font-mono">SONG_DIR</span>; they are not in the tree, and
        not runnable from here.
      </p>

      {error && <p className="mt-2 text-[11px] text-[var(--color-bad)]">{error}</p>}

      {dry && (
        <div className="mt-3 space-y-2">
          {dry.steps.map((s, i) => (
            <div key={i} className="rounded bg-[var(--color-panel-2)] p-2">
              <div className="micro mb-1">
                step {i + 1} · {s.label}
                {job && job.stepIndex === i && job.state === "running" && (
                  <span className="ml-2 text-[var(--color-sel)]">running</span>
                )}
              </div>
              <pre
                data-step={i}
                data-env={Object.keys(s.env).join(",")}
                className="overflow-x-auto font-mono text-[11px] text-[var(--color-text)]"
              >
                {Object.entries(s.env)
                  .map(([k, v]) => `${k}=${v}`)
                  .join(" ")}
                {"\n"}
                {s.argv.join(" ")}
              </pre>
            </div>
          ))}
        </div>
      )}

      {job && (
        <div className="mt-3">
          <div className="micro mb-1">
            {job.id} · {job.state}
            {job.error ? ` · ${job.error}` : ""}
          </div>
          <pre className="max-h-64 overflow-auto rounded bg-[var(--color-ink)] p-2 font-mono text-[11px] text-[var(--color-dim)]">
            {job.log.join("\n") || "…"}
          </pre>
        </div>
      )}
    </section>
  );
}