"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import VerdictChip from "@/components/VerdictChip";
import MomentMarks from "@/components/MomentMarks";
import NoteField from "@/components/NoteField";
import type { Rendition, Variant } from "@/lib/browse";
import type { NoteMap } from "@/lib/notes";
import {
  headToHead,
  summarise,
  type Compare,
  type CompareChoice,
  type CompareDoc,
} from "@/lib/compare-types";
import { fmtBytes, fmtDur } from "@/lib/format";

// Two players, side by side, over the SAME cut.
//
// The files play through /api/mix/media, which already does Range/206 -- the
// whole point of this page is jumping to 0:42 in both and listening, and
// without 206 every seek on a 66 MB render restarts the download.
//
// "Match time" rather than a locked sync: the two files are frequently
// DIFFERENT LENGTHS (that is often what is being judged), so a hard lock would
// drift and then clamp at the shorter one's end. Copying the playhead across on
// demand is what the comparison actually needs, and it cannot lie.
//
// ---------------------------------------------------------------------------
// BLIND MODE
//
// Sighted comparison is the default and is unchanged. Blind is a toggle, and
// when it is on the bench must not name either file ANYWHERE the eye or the
// devtools can reach it:
//
//   * the srcs are opaque tokens (/api/browse/blind?t=), minted server-side
//   * the side order is chosen once, on the server, when the pairing is minted
//     -- re-shuffling on a client re-render would swap the panes mid-listen
//   * no data-rel, no tag, no byte size
//   * NO NATIVE CONTROLS. `controls` draws the duration in the scrubber, and
//     two files of visibly different length are not blind -- the length is
//     frequently the very thing being judged. So blind panes get a transport of
//     their own, with one shared scale (the shorter of the two) and no numbers.
//   * the verdict chip, the marks and the note field are hidden, because every
//     one of them names the file it writes to
//
// Reveal happens only after a call is recorded, and the record is written
// before the mapping is returned -- so there is no ordering in which a label
// reaches the screen before the observation is on disk.
// ---------------------------------------------------------------------------

const mediaUrl = (label: string) => `/api/mix/media?path=${encodeURIComponent(label)}`;
const blindUrl = (token: string) => `/api/browse/blind?t=${encodeURIComponent(token)}`;

type Pairing = { pairing: string; cut: string; left: string; right: string };
type Outcome = {
  reveal: { left: string; right: string };
  head: { a: number; b: number; ties: number };
  winner: CompareChoice;
};

type Props = {
  song: string;
  cut: string;
  shipped: Rendition | null;
  variants: Variant[];
  durations: Record<string, number>;
  initialVariant: string | null;
  notes: NoteMap;
  compares: CompareDoc;
};

export default function CutBench({
  song,
  cut,
  shipped,
  variants,
  durations,
  initialVariant,
  notes,
  compares,
}: Props) {
  const router = useRouter();
  const live = variants.filter((v) => !v.retired);
  const retired = variants.filter((v) => v.retired);

  const [pick, setPick] = useState<string | null>(
    initialVariant && variants.some((v) => v.rel === initialVariant)
      ? initialVariant
      : (live[0]?.rel ?? null),
  );
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [done, setDone] = useState<string | null>(null);

  const [blind, setBlind] = useState(false);
  const [pairing, setPairing] = useState<Pairing | null>(null);
  const [outcome, setOutcome] = useState<Outcome | null>(null);
  const [rows, setRows] = useState<Compare[]>(compares.compares);

  const a = useRef<HTMLVideoElement>(null);
  const b = useRef<HTMLVideoElement>(null);
  const chosen = variants.find((v) => v.rel === pick) ?? null;

  const copyTime = (from: HTMLVideoElement | null, to: HTMLVideoElement | null) => {
    if (!from || !to) return;
    // Clamp: the other cut is often shorter, and setting currentTime past the
    // end leaves the element in a state where nothing plays and nothing says so.
    to.currentTime = Math.min(from.currentTime, Math.max(0, (to.duration || 0) - 0.05));
  };

  const act = async (action: "promote" | "retire" | "restore", rel: string) => {
    setBusy(rel);
    setError(null);
    setDone(null);
    try {
      const res = await fetch("/api/browse/promote", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ song, rel, action }),
        cache: "no-store",
      });
      const j = (await res.json()) as { error?: string; moved?: { from: string; to: string }[] };
      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
      setDone((j.moved ?? []).map((m) => `${m.from} → ${m.to}`).join(" · "));
      router.refresh();
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(null);
    }
  };

  // --- the pair under comparison, and its history --------------------------
  const pair = shipped && chosen ? { left: shipped.rel, right: chosen.rel } : null;
  const history = pair ? headToHead({ version: 1, compares: rows }, pair.left, pair.right) : null;

  const mint = useCallback(async () => {
    if (!pair) return;
    setError(null);
    setOutcome(null);
    setPairing(null);
    try {
      const res = await fetch("/api/browse/compare", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ song, cut, left: pair.left, right: pair.right, mint: true }),
        cache: "no-store",
      });
      const j = (await res.json()) as Pairing & { error?: string };
      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
      setPairing(j);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    }
  }, [song, cut, pair?.left, pair?.right]); // eslint-disable-line react-hooks/exhaustive-deps

  // A new pairing whenever the pair changes while blind, and none at all while
  // sighted -- so switching variants mid-session cannot leave the old tokens on
  // screen under the new labels.
  useEffect(() => {
    if (!blind || !pair) {
      setPairing(null);
      setOutcome(null);
      return;
    }
    void mint();
  }, [blind, mint, pair?.left, pair?.right]); // eslint-disable-line react-hooks/exhaustive-deps

  const decide = async (winner: CompareChoice) => {
    setError(null);
    try {
      const body = pairing
        ? { pairing: pairing.pairing, winner }
        : { song, cut, left: pair!.left, right: pair!.right, winner };
      const res = await fetch("/api/browse/compare", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(body),
        cache: "no-store",
      });
      const j = (await res.json()) as {
        error?: string;
        compare: Compare;
        reveal?: { left: string; right: string };
        head: { a: number; b: number; ties: number };
      };
      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
      setRows((r) => [...r, j.compare]);
      if (pairing) {
        setOutcome({
          reveal: j.reveal ?? { left: j.compare.left, right: j.compare.right },
          head: j.head,
          winner,
        });
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    }
  };

  /** Apply the winner as a standing verdict. A SECOND, explicit click. */
  const applyKeep = async (rel: string) => {
    setBusy(rel);
    setError(null);
    try {
      const res = await fetch("/api/browse/verdict", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({
          song,
          rel,
          verdict: "keep",
          note: `won a blind A/B against the other ${cut} (${summarise(outcome!.head)})`,
        }),
        cache: "no-store",
      });
      const j = (await res.json()) as { error?: string };
      if (!res.ok) throw new Error(j.error || `HTTP ${res.status}`);
      router.refresh();
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(null);
    }
  };

  // One scale for both blind transports: the shorter of the pair. Different
  // maxima would put the duration back on screen as the width of a slider.
  const commonMax = pair
    ? Math.max(0.1, Math.min(durations[pair.left] ?? 0, durations[pair.right] ?? 0) || 0.1)
    : 0.1;

  return (
    <div className="space-y-3 p-4">
      <div className="flex flex-wrap items-center gap-2">
        <button
          type="button"
          data-blind={blind ? "on" : "off"}
          aria-pressed={blind}
          disabled={!pair}
          onClick={() => setBlind((v) => !v)}
          className={`rounded border px-2.5 py-1 text-[12px] disabled:opacity-40 ${
            blind
              ? "border-[var(--color-sel)] text-[var(--color-sel)]"
              : "border-[var(--color-line)] text-[var(--color-dim)] hover:text-[var(--color-text)]"
          }`}
        >
          {blind ? "blind — labels hidden" : "blind A/B"}
        </button>
        {!pair && (
          <span className="text-[11px] text-[var(--color-dim)]">
            a blind comparison needs a shipped cut and a variant to face it
          </span>
        )}
        {history && (history.a || history.b || history.ties) > 0 && (
          <span className="num text-[11px] text-[var(--color-meter)]" data-head-to-head>
            shipped {summarise(history)} against {chosen?.tag}
          </span>
        )}
      </div>

      {blind && !pairing ? (
        // Minting failed or has not landed. The one thing this mode may never
        // do is show labelled panes while the toggle says the labels are
        // hidden, so it shows nothing instead.
        <div className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-6 text-center text-[12px] text-[var(--color-dim)]">
          {error ?? "minting a pairing…"}
        </div>
      ) : blind && pairing ? (
        <>
          <div className="grid gap-3 lg:grid-cols-2">
            <BlindPane
              title="A"
              src={blindUrl(pairing.left)}
              videoRef={a}
              max={commonMax}
              onMatch={() => copyTime(b.current, a.current)}
              revealed={outcome?.reveal.left ?? null}
            />
            <BlindPane
              title="B"
              src={blindUrl(pairing.right)}
              videoRef={b}
              max={commonMax}
              onMatch={() => copyTime(a.current, b.current)}
              revealed={outcome?.reveal.right ?? null}
            />
          </div>

          <div className="flex flex-wrap items-center gap-2 rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
            {outcome ? (
              <>
                <span className="text-[12px] text-[var(--color-text)]">
                  recorded:{" "}
                  <span className="font-mono">
                    {outcome.winner === "tie"
                      ? "no difference"
                      : outcome.winner === "left"
                        ? outcome.reveal.left
                        : outcome.reveal.right}
                  </span>
                </span>
                <span className="num text-[11px] text-[var(--color-meter)]">
                  {summarise(outcome.head)} so far
                </span>
                {outcome.winner !== "tie" && (
                  <button
                    type="button"
                    disabled={busy !== null}
                    onClick={() =>
                      applyKeep(
                        outcome.winner === "left" ? outcome.reveal.left : outcome.reveal.right,
                      )
                    }
                    data-apply-keep
                    className="rounded border border-[var(--color-line)] px-2 py-0.5 text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)] disabled:opacity-40"
                  >
                    also record it as a keep
                  </button>
                )}
                <button
                  type="button"
                  onClick={() => void mint()}
                  data-next-pairing
                  className="ml-auto rounded border border-[var(--color-sel)] px-2 py-0.5 text-[11px] text-[var(--color-sel)]"
                >
                  another pairing
                </button>
                {/* One A/B preference is not the same claim as "this ships", so
                    the keep is offered rather than derived. */}
                <span className="w-full text-[11px] text-[var(--color-dim)]">
                  a compare is one dated observation; a verdict is a standing judgement — neither is
                  written from the other
                </span>
              </>
            ) : (
              <>
                <span className="micro">which is better?</span>
                {(
                  [
                    ["left", "A"],
                    ["tie", "no difference"],
                    ["right", "B"],
                  ] as [CompareChoice, string][]
                ).map(([w, label]) => (
                  <button
                    key={w}
                    type="button"
                    data-choose={w}
                    onClick={() => void decide(w)}
                    className="rounded border border-[var(--color-line)] px-2.5 py-1 text-[12px] text-[var(--color-text)] hover:border-[var(--color-sel)] hover:text-[var(--color-sel)]"
                  >
                    {label}
                  </button>
                ))}
                <span className="ml-auto text-[11px] text-[var(--color-dim)]">
                  labels appear once the call is recorded
                </span>
              </>
            )}
            {error && <span className="w-full text-[11px] text-[var(--color-bad)]">{error}</span>}
          </div>
        </>
      ) : (
        <>
          <div className="grid gap-3 lg:grid-cols-2">
            <Pane
              title="shipped"
              sub={cut}
              rendition={shipped}
              song={song}
              durations={durations}
              videoRef={a}
              onMatch={() => copyTime(b.current, a.current)}
              matchLabel="← match variant"
              notes={notes}
            />
            <Pane
              title="variant"
              sub={chosen ? chosen.tag : "none"}
              rendition={chosen}
              song={song}
              durations={durations}
              videoRef={b}
              onMatch={() => copyTime(a.current, b.current)}
              matchLabel="match shipped →"
              notes={notes}
            />
          </div>

          {pair && (
            <div className="flex flex-wrap items-center gap-2">
              <span className="micro">sighted call</span>
              {(
                [
                  ["left", `shipped ${cut}`],
                  ["tie", "no difference"],
                  ["right", chosen!.tag],
                ] as [CompareChoice, string][]
              ).map(([w, label]) => (
                <button
                  key={w}
                  type="button"
                  data-choose={w}
                  onClick={() => void decide(w)}
                  className="rounded border border-[var(--color-line)] px-2 py-0.5 font-mono text-[11px] text-[var(--color-dim)] hover:border-[var(--color-sel)] hover:text-[var(--color-sel)]"
                >
                  {label}
                </button>
              ))}
              <span className="text-[11px] text-[var(--color-dim)]">
                recorded as sighted — a call made with the labels showing is different evidence
              </span>
            </div>
          )}
        </>
      )}

      {live.length > 0 && (
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="micro">variants</span>
          {live.map((v) => (
            <button
              key={v.rel}
              type="button"
              data-pick={v.rel}
              aria-pressed={pick === v.rel}
              onClick={() => setPick(v.rel)}
              className={`rounded border px-2 py-0.5 font-mono text-[11px] ${
                pick === v.rel
                  ? "border-[var(--color-sel)] text-[var(--color-sel)]"
                  : "border-[var(--color-line)] text-[var(--color-dim)] hover:text-[var(--color-text)]"
              }`}
            >
              {v.tag}
              {!blind && (
                <span className="num ml-1.5 text-[var(--color-meter)]">
                  {fmtDur(durations[v.rel] ?? 0)}
                </span>
              )}
            </button>
          ))}
        </div>
      )}

      {chosen && !blind && (
        <div className="flex flex-wrap items-center gap-2 rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
          <button
            type="button"
            disabled={busy !== null}
            onClick={() => act("promote", chosen.rel)}
            className="rounded border border-[var(--color-sel)] px-2.5 py-1 text-[12px] text-[var(--color-sel)] hover:bg-[color-mix(in_srgb,var(--color-sel)_14%,transparent)] disabled:opacity-40"
          >
            promote {chosen.tag} to {cut}
          </button>
          <button
            type="button"
            disabled={busy !== null}
            onClick={() => act(chosen.retired ? "restore" : "retire", chosen.rel)}
            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"
          >
            {chosen.retired ? "restore" : "retire"}
          </button>
          {/* Say what promote DOES before it is pressed. It is reversible only
              because the current cut is moved aside rather than overwritten,
              and that is worth stating where the button is. */}
          <span className="text-[11px] text-[var(--color-dim)]">
            the current {cut}.mp4 moves into variants/ first — nothing is overwritten, nothing is
            deleted
          </span>
          {done && <span className="num w-full text-[11px] text-[var(--color-meter)]">{done}</span>}
          {error && <span className="w-full text-[11px] text-[var(--color-bad)]">{error}</span>}
        </div>
      )}

      {retired.length > 0 && !blind && (
        <div className="flex flex-wrap items-center gap-1.5">
          <span className="micro">retired</span>
          {retired.map((v) => (
            <button
              key={v.rel}
              type="button"
              data-pick={v.rel}
              aria-pressed={pick === v.rel}
              onClick={() => setPick(v.rel)}
              className={`rounded border border-dashed px-2 py-0.5 font-mono text-[11px] ${
                pick === v.rel
                  ? "border-[var(--color-sel)] text-[var(--color-sel)]"
                  : "border-[var(--color-line)] text-[var(--color-dim)]"
              }`}
            >
              {v.tag}
            </button>
          ))}
        </div>
      )}

      {rows.length > 0 && !blind && (
        <details className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
          <summary className="cursor-pointer text-[12px] text-[var(--color-dim)]">
            {rows.length} recorded comparison{rows.length > 1 ? "s" : ""} on this song
          </summary>
          <ul className="mt-2 space-y-0.5" data-compare-count={rows.length}>
            {[...rows].reverse().map((c, i) => (
              <li key={`${c.at}-${i}`} className="num text-[11px] text-[var(--color-dim)]">
                <span className="text-[var(--color-text)]">{c.cut}</span> ·{" "}
                {c.winner === "tie" ? (
                  <span>no difference between {c.left} and {c.right}</span>
                ) : (
                  <span>
                    <span className="font-mono text-[var(--color-meter)]">
                      {c.winner === "left" ? c.left : c.right}
                    </span>{" "}
                    beat {c.winner === "left" ? c.right : c.left}
                  </span>
                )}{" "}
                · {c.blind ? "blind" : "sighted"} · {c.at.slice(0, 10)}
              </li>
            ))}
          </ul>
        </details>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// A blind pane: a picture, a transport with no numbers, and nothing else.
// ---------------------------------------------------------------------------
function BlindPane({
  title,
  src,
  videoRef,
  max,
  onMatch,
  revealed,
}: {
  title: string;
  src: string;
  videoRef: React.RefObject<HTMLVideoElement | null>;
  max: number;
  onMatch: () => void;
  revealed: string | null;
}) {
  const [playing, setPlaying] = useState(false);
  const [at, setAt] = useState(0);

  // The playhead is polled while playing rather than subscribed to timeupdate
  // on the whole bench: this is the one place a number is drawn, and it is
  // drawn as a slider position, not as a figure.
  useEffect(() => {
    if (!playing) return;
    const t = setInterval(() => setAt(videoRef.current?.currentTime ?? 0), 200);
    return () => clearInterval(t);
  }, [playing, videoRef]);

  const seek = (t: number) => {
    if (videoRef.current) videoRef.current.currentTime = t;
    setAt(t);
  };

  return (
    <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)]">
      <div className="flex flex-wrap items-baseline gap-2 border-b border-[var(--color-line)] px-3 py-1.5">
        <span className="font-mono text-[13px] text-[var(--color-sel)]">{title}</span>
        {revealed ? (
          <span className="font-mono text-[11px] text-[var(--color-text)]" data-revealed={revealed}>
            {revealed}
          </span>
        ) : (
          <span className="micro">unlabelled</span>
        )}
        <button
          type="button"
          onClick={onMatch}
          className="ml-auto rounded border border-[var(--color-line)] px-1.5 py-0.5 text-[10px] text-[var(--color-dim)] hover:text-[var(--color-text)]"
        >
          match the other side
        </button>
      </div>
      <video
        ref={videoRef}
        src={src}
        preload="metadata"
        onPlay={() => setPlaying(true)}
        onPause={() => setPlaying(false)}
        className="aspect-video w-full bg-[var(--color-panel-2)]"
      />
      <div className="flex items-center gap-2 px-3 py-2">
        <button
          type="button"
          onClick={() => {
            const el = videoRef.current;
            if (!el) return;
            if (el.paused) void el.play();
            else el.pause();
          }}
          className="rounded border border-[var(--color-line)] px-2 py-0.5 text-[12px] text-[var(--color-text)]"
        >
          {playing ? "pause" : "play"}
        </button>
        <button
          type="button"
          onClick={() => seek(Math.max(0, (videoRef.current?.currentTime ?? 0) - 5))}
          className="rounded border border-[var(--color-line)] px-1.5 py-0.5 text-[11px] text-[var(--color-dim)]"
        >
          −5s
        </button>
        <input
          type="range"
          min={0}
          max={max}
          step={0.05}
          value={Math.min(at, max)}
          onChange={(e) => seek(Number(e.target.value))}
          aria-label="position"
          className="flex-1 accent-[var(--color-sel)]"
        />
        <button
          type="button"
          onClick={() => seek((videoRef.current?.currentTime ?? 0) + 5)}
          className="rounded border border-[var(--color-line)] px-1.5 py-0.5 text-[11px] text-[var(--color-dim)]"
        >
          +5s
        </button>
      </div>
    </section>
  );
}

function Pane({
  title,
  sub,
  rendition,
  song,
  durations,
  videoRef,
  onMatch,
  matchLabel,
  notes,
}: {
  title: string;
  sub: string;
  rendition: Rendition | null;
  song: string;
  durations: Record<string, number>;
  videoRef: React.RefObject<HTMLVideoElement | null>;
  onMatch: () => void;
  matchLabel: string;
  notes: NoteMap;
}) {
  return (
    <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)]">
      <div className="flex flex-wrap items-baseline gap-2 border-b border-[var(--color-line)] px-3 py-1.5">
        <span className="micro">{title}</span>
        <span className="font-mono text-[12px] text-[var(--color-text)]">{sub}</span>
        {rendition && (
          <span className="num text-[11px] text-[var(--color-meter)]">
            {fmtDur(durations[rendition.rel] ?? 0)}
          </span>
        )}
        {rendition && (
          <span className="num text-[11px] text-[var(--color-dim)]">{fmtBytes(rendition.size)}</span>
        )}
        <button
          type="button"
          onClick={onMatch}
          className="ml-auto rounded border border-[var(--color-line)] px-1.5 py-0.5 text-[10px] text-[var(--color-dim)] hover:text-[var(--color-text)]"
        >
          {matchLabel}
        </button>
      </div>
      {rendition ? (
        <>
          <video
            ref={videoRef}
            src={mediaUrl(rendition.label)}
            controls
            preload="metadata"
            data-rel={rendition.rel}
            className="aspect-video w-full bg-[var(--color-panel-2)]"
          />
          <div className="space-y-2 px-3 py-2">
            <VerdictChip song={song} rel={rendition.rel} initial={rendition.verdict} />
            {/* The playhead is read AT CLICK TIME rather than tracked in state:
                a timeupdate subscription would re-render the whole bench four
                times a second for a number nothing on screen displays. */}
            <MomentMarks
              song={song}
              rel={rendition.rel}
              initial={notes}
              getTime={() => videoRef.current?.currentTime ?? null}
              onSeek={(t) => {
                if (videoRef.current) videoRef.current.currentTime = t;
              }}
            />
            <NoteField
              song={song}
              target={`file:${rendition.rel}`}
              initial={notes[`file:${rendition.rel}`] ?? null}
              label="notes on this file"
              rows={3}
            />
          </div>
        </>
      ) : (
        <div className="flex aspect-video items-center justify-center text-[12px] text-[var(--color-dim)]">
          nothing to play
        </div>
      )}
    </section>
  );
}