"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { previewWindow, type PhraseHit } from "@/lib/phrase-types";
import { SHORTLIST_EVENT, type Pick, type Shortlist } from "@/lib/shortlist-types";

// The rows, and ONE island for all of them.
//
// The obvious shape is a component per row. It is also the doubling
// ProvenancePanel warns about: 50 rows of HTML plus 50 sets of serialised
// island props is the page sent twice, and every row carries a title, two
// context lines and an archive URL. So this takes the array once.
//
// It FETCHES NOTHING for the list. Ordering, filtering, paging and totals are
// server decisions, arrived at over a URL that is shareable and back-button
// correct. The only network this component does is the audio and picture for
// the one hit being auditioned.

const fmtTime = (t: number) => {
  const s = Math.floor(t);
  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
};

export default function PhraseConsole({
  hits,
  q,
  list,
  starred,
}: {
  hits: PhraseHit[];
  /** The query that found these, snapshotted into every pick. */
  q: string;
  /** The active shortlist's slug, or null -- `s` needs somewhere to put it. */
  list: string | null;
  /** Which of these hits are already on that list, decided by the server. */
  starred: string[];
}) {
  const [cursor, setCursor] = useState(0);
  const [stars, setStars] = useState<Set<string>>(() => new Set(starred));
  const [starring, setStarring] = useState(false);
  const [playing, setPlaying] = useState<string | null>(null);
  const [playhead, setPlayhead] = useState<number | null>(null);
  // The id whose picture is mounted. Never set on load -- see below.
  const [picture, setPicture] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  const audio = useRef<HTMLAudioElement | null>(null);
  const objectUrl = useRef<string | null>(null);
  const origin = useRef(0);
  const raf = useRef<number | null>(null);
  const rows = useRef<(HTMLLIElement | null)[]>([]);

  const stop = useCallback(() => {
    audio.current?.pause();
    audio.current = null;
    if (objectUrl.current) URL.revokeObjectURL(objectUrl.current);
    objectUrl.current = null;
    if (raf.current !== null) cancelAnimationFrame(raf.current);
    raf.current = null;
    setPlaying(null);
    setPlayhead(null);
  }, []);

  // THE PREVIEW, and it reuses the clip routes verbatim rather than growing a
  // media route of its own.
  //
  //   const key = `${h.video}@${h.start.toFixed(2)}`
  //
  // That key is a media ADDRESS, not the hit's identity -- the identity is
  // `<video>#<wordIndex>`, because about one pair per 100k words shares a
  // start. Two properties come free from addressing it this way:
  //
  //   * `from` is LEAD_PAD before the word, so the late parakeet timestamp
  //     cannot clip the first phoneme.
  //   * the audio route takes its gain from a FIXED reference (candStart ±1s,
  //     parsed from after the @), and that reference lands on the hit itself --
  //     so the level does not jump between the tight and the wide audition.
  const play = useCallback(
    async (h: PhraseHit, wide: boolean) => {
      stop();
      setError(null);
      const { from, to } = previewWindow(h, wide);
      const key = `${h.video}@${h.start.toFixed(2)}`;
      try {
        const res = await fetch(
          `/api/clip/${encodeURIComponent(key)}/audio?from=${from}&to=${to}`,
          { cache: "no-store" },
        );
        if (!res.ok) {
          setError(res.status === 404 ? "no audio for that episode" : "could not read that window");
          return;
        }
        // The playhead's origin is the window the route ECHOED, not the one
        // asked for. A hit at 0.28s asks for -0.07 and is clamped, and a
        // playhead measured from the request would run 70ms ahead of the sound.
        const hdr = res.headers.get("x-window")?.split(",").map(Number);
        origin.current = hdr && hdr.length === 2 && Number.isFinite(hdr[0]) ? hdr[0] : from;
        const url = URL.createObjectURL(await res.blob());
        objectUrl.current = url;
        const el = new Audio(url);
        audio.current = el;
        const tick = () => {
          if (!audio.current) return;
          setPlayhead(origin.current + audio.current.currentTime);
          raf.current = requestAnimationFrame(tick);
        };
        el.addEventListener("ended", stop);
        setPlaying(h.id);
        await el.play();
        tick();
      } catch {
        setError("could not play that window");
      }
    },
    [stop],
  );

  useEffect(() => stop, [stop]);

  useEffect(() => setStars(new Set(starred)), [starred]);

  // The bar can unstar too, and both must agree a moment later. Every mutation
  // returns the whole list, so one event carrying it keeps them exact -- where
  // a router.refresh() would re-run the search and lose the focused row on
  // every single star.
  useEffect(() => {
    const onChange = (e: Event) => {
      const l = (e as CustomEvent<Shortlist | null>).detail;
      if (!l || l.slug !== list) return;
      setStars(new Set(l.picks.map((p) => p.id)));
    };
    window.addEventListener(SHORTLIST_EVENT, onChange);
    return () => window.removeEventListener(SHORTLIST_EVENT, onChange);
  }, [list]);

  // STAR, and it snapshots rather than referencing. A pick that held only an id
  // would be silently re-pointed at a different word by a re-transcription;
  // with the text and the window written down, a drift is DETECTABLE.
  const star = useCallback(
    async (h: PhraseHit) => {
      if (!list) {
        setError("no shortlist selected — make one first");
        return;
      }
      const on = stars.has(h.id);
      setStarring(true);
      setError(null);
      const pick: Pick = {
        id: h.id,
        video: h.video,
        i: h.i,
        start: h.start,
        end: h.end,
        text: h.text,
        from: h.from,
        to: h.to,
        q,
        conf: h.confMin,
        suspect: h.suspect,
        at: new Date().toISOString(),
      };
      try {
        const res = await fetch("/api/shortlist", {
          method: "POST",
          headers: { "content-type": "application/json" },
          body: JSON.stringify(
            on ? { op: "remove", list, id: h.id } : { op: "add", list, pick },
          ),
          cache: "no-store",
        });
        const j = (await res.json()) as { list?: Shortlist; error?: string };
        if (!res.ok || !j.list) {
          setError(j.error ?? `could not ${on ? "unstar" : "star"} that`);
          return;
        }
        setStars(new Set(j.list.picks.map((p) => p.id)));
        window.dispatchEvent(new CustomEvent(SHORTLIST_EVENT, { detail: j.list }));
      } catch {
        setError("could not reach the shortlist");
      } finally {
        setStarring(false);
      }
    },
    [list, q, stars],
  );

  // A new page of results is a new list. Anything held about the old one --
  // which row was focused, what was mid-play -- is about hits that are gone.
  useEffect(() => {
    setCursor(0);
    setPicture(null);
    stop();
  }, [hits, stop]);

  const move = useCallback(
    (d: number) => {
      setCursor((c) => {
        const next = Math.max(0, Math.min(hits.length - 1, c + d));
        rows.current[next]?.scrollIntoView({ block: "nearest" });
        return next;
      });
    },
    [hits.length],
  );

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      // Typing in the search box or a note is typing, not driving. WordSelector
      // stops propagation at its own inputs for the same reason; this is the
      // other half of that contract, for the keys that live on window.
      const t = e.target as HTMLElement | null;
      if (t && (t.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName))) return;
      const h = hits[cursor];
      if (e.key === "/") {
        e.preventDefault();
        const box = document.getElementById("phrase-q") as HTMLInputElement | null;
        box?.focus();
        box?.select();
        return;
      }
      if (!h) return;
      if (e.key === "j" || e.key === "ArrowDown") {
        e.preventDefault();
        move(1);
      } else if (e.key === "k" || e.key === "ArrowUp") {
        e.preventDefault();
        move(-1);
      } else if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        void play(h, false);
      } else if (e.key === "x") {
        e.preventDefault();
        void play(h, true);
      } else if (e.key === "v") {
        e.preventDefault();
        if (h.hasVideo) setPicture((p) => (p === h.id ? null : h.id));
      } else if (e.key === "s") {
        e.preventDefault();
        void star(h);
      } else if (e.key === "Escape") {
        e.preventDefault();
        stop();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [hits, cursor, move, play, stop, star]);

  if (!hits.length) return null;

  return (
    <>
      {error && (
        <p className="mb-2 text-[12px] text-[var(--color-bad)]" role="status">
          {error}
        </p>
      )}
      <ul className="space-y-1" data-console>
        {hits.map((h, i) => {
          const on = i === cursor;
          const wide = previewWindow(h, true);
          return (
            <li
              key={h.id}
              ref={(el) => {
                rows.current[i] = el;
              }}
              data-hit={h.id}
              data-video={h.video}
              data-start={h.start}
              data-from={h.from}
              data-to={h.to}
              data-conf={h.confMin ?? ""}
              data-suspect={h.suspect ? "1" : "0"}
              data-dupes={h.dupes}
              data-starred={stars.has(h.id) ? "1" : "0"}
              onClick={() => setCursor(i)}
              className={`rounded border px-3 py-2 ${
                on
                  ? "border-[var(--color-sel)] bg-[var(--color-panel-2)]"
                  : "border-[var(--color-line)] bg-[var(--color-panel)]"
              }`}
            >
              <div className="flex flex-wrap items-baseline gap-2">
                <button
                  type="button"
                  onClick={() => {
                    setCursor(i);
                    void play(h, false);
                  }}
                  aria-label={`play ${h.text}`}
                  className="num rounded border border-[var(--color-line)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-sel)] hover:border-[var(--color-sel)]"
                >
                  {fmtTime(h.start)}
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setCursor(i);
                    void play(h, true);
                  }}
                  title={`the line around it — ${wide.from.toFixed(2)}s to ${wide.to.toFixed(2)}s`}
                  className="rounded border border-[var(--color-line)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)]"
                >
                  wide
                </button>
                <button
                  type="button"
                  onClick={() => {
                    setCursor(i);
                    void star(h);
                  }}
                  disabled={starring}
                  aria-label={`${stars.has(h.id) ? "unstar" : "star"} ${h.text}`}
                  title={list ? `${stars.has(h.id) ? "remove from" : "add to"} ${list}` : "no shortlist selected"}
                  className={`rounded border px-1.5 py-0.5 font-mono text-[11px] ${
                    stars.has(h.id)
                      ? "border-[var(--color-sel)] text-[var(--color-sel)]"
                      : "border-[var(--color-line)] text-[var(--color-dim)] hover:text-[var(--color-text)]"
                  }`}
                >
                  {stars.has(h.id) ? "★" : "☆"}
                </button>
                <span className="truncate text-[12px] text-[var(--color-dim)]" title={h.video}>
                  {h.title}
                </span>
                {h.date && <span className="num micro">{h.date}</span>}

                <span className="num ml-auto flex items-baseline gap-2 text-[11px]">
                  {/* A READING, in the measurement colour. Never a verdict hue:
                      a low confidence is often the interesting token, not a bad
                      one. */}
                  <span className="text-[var(--color-meter)]">
                    {h.confMin === null ? "conf ?" : `conf ${h.confMin.toFixed(2)}`}
                  </span>
                  {h.dupes > 0 && (
                    <span className="micro" title="chunk twins folded into this hit">
                      +{h.dupes} twin
                    </span>
                  )}
                  {h.stutter && (
                    <span className="micro" title="a real repeat, outside any chunk seam">
                      stutter
                    </span>
                  )}
                  {h.suspect && (
                    <span
                      className="text-[11px] text-[var(--color-dirty)]"
                      title="a clip somewhere in this episode was judged another speaker — per-episode, not per-moment"
                    >
                      flagged source
                    </span>
                  )}
                </span>
              </div>

              <p className="mt-1 text-[13px] leading-relaxed" data-context>
                <span className="text-[var(--color-dim)]">{h.before} </span>
                <span className="font-mono font-medium tracking-wide text-[var(--color-text)]">
                  {h.text}
                </span>
                <span className="text-[var(--color-dim)]"> {h.after}</span>
              </p>

              {on && playing === h.id && playhead !== null && (
                <p className="num mt-1 text-[11px] text-[var(--color-meter)]" data-playhead>
                  {playhead.toFixed(2)}s
                </p>
              )}

              {on && (
                <div className="mt-1 flex flex-wrap items-center gap-2">
                  {h.hasVideo ? (
                    <button
                      type="button"
                      onClick={() => setPicture((p) => (p === h.id ? null : h.id))}
                      className="rounded border border-[var(--color-line)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)]"
                    >
                      {picture === h.id ? "hide picture" : "picture"} <kbd>v</kbd>
                    </button>
                  ) : (
                    <span className="micro">no media/ for this episode</span>
                  )}
                  {h.archive && (
                    <a
                      href={h.archive}
                      target="_blank"
                      rel="noreferrer"
                      className="font-mono text-[11px] text-[var(--color-sel)] hover:underline"
                    >
                      in the archive
                    </a>
                  )}
                  <span className="micro">
                    word {h.i}
                    {h.n > 1 ? `–${h.i + h.n - 1}` : ""} · {h.from.toFixed(2)}–{h.to.toFixed(2)}s
                  </span>
                </div>
              )}

              {/* THE PICTURE NEVER LOADS ON PAGE LOAD. That route spawns an
                  ffmpeg per window, so 50 mounted players would be 50 processes
                  on a navigation. Focused hit only, after `v` only, and only
                  when media/ actually holds the episode. */}
              {picture === h.id && h.hasVideo && (
                <video
                  key={h.id}
                  src={`/api/clip/${encodeURIComponent(`${h.video}@${h.start.toFixed(2)}`)}/video?from=${wide.from}&to=${wide.to}`}
                  controls
                  autoPlay
                  data-picture={h.id}
                  className="mt-2 w-[360px] max-w-full rounded bg-[var(--color-panel-2)]"
                />
              )}
            </li>
          );
        })}
      </ul>
    </>
  );
}