"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import MixLanes, { type Analysis, type Marker } from "./MixLanes";

type FileRow = { path: string; label: string; size: number; mtimeMs: number };
type FileGroup = { project: string; label: string; kind: string; files: FileRow[] };
type Info = { path: string; label: string; duration: number; hasVideo: boolean; hasAudio: boolean };
type Track = { info: Info; analysis: Analysis | null };

type Job = {
  id: string;
  state: "running" | "done" | "failed";
  startedAt: number;
  endedAt: number | null;
  label: string;
  cmd: string;
  error: string | null;
  duration: number;
};

type Spec = {
  body: string;
  bg: string | null;
  handover: number;
  fade: number;
  bgGain: number;
  duck: number;
  start: number;
  end: number;
  out: string;
};

const BLANK: Spec = {
  body: "",
  bg: null,
  handover: 0,
  fade: 0.12,
  bgGain: 1,
  duck: 0,
  start: 0,
  end: 0,
  out: "",
};

const mediaUrl = (p: string) => `/api/mix/media?path=${encodeURIComponent(p)}`;
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
const fmt = (t: number) => `${t.toFixed(3)}s`;

/**
 * The gain the background should have at time t, in the SAME shape
 * `bgVolumeExpr` renders. This function existing twice would defeat the whole
 * purpose of the bench -- what you hear has to be what gets written -- so it is
 * written once here and mirrored by one expression builder on the server, and
 * the spec e2e asserts the two agree at the interesting instants.
 */
export function bgGainAt(t: number, s: Pick<Spec, "handover" | "fade" | "bgGain" | "duck">): number {
  if (t < s.handover) return s.bgGain;
  if (s.fade <= 0.0005 || t >= s.handover + s.fade) return s.duck;
  return s.bgGain + (s.duck - s.bgGain) * ((t - s.handover) / s.fade);
}

export type MixPresetProp = {
  body: string;
  label: string;
  start: number;
  end: number;
  duration: number;
  from: string | null;
  clip: string | null;
  fileFrom: number;
  fileTo: number;
} | null;

export default function MixBench({ preset = null }: { preset?: MixPresetProp }) {
  const [groups, setGroups] = useState<FileGroup[]>([]);
  const [other, setOther] = useState<FileRow[]>([]);
  // The only client state the picker adds. A twelve-project tree makes the
  // select long enough that scrolling it is worse than typing three letters.
  const [filter, setFilter] = useState("");
  const [spec, setSpec] = useState<Spec>(BLANK);
  const [body, setBody] = useState<Track | null>(null);
  const [bg, setBg] = useState<Track | null>(null);
  const [loading, setLoading] = useState<string>("");
  const [note, setNote] = useState<string>("");
  const [job, setJob] = useState<Job | null>(null);
  const [playing, setPlaying] = useState(false);
  const [playhead, setPlayhead] = useState<number | null>(null);
  const [view, setView] = useState({ from: 0, to: 30 });

  const vidRef = useRef<HTMLVideoElement | null>(null);
  const bgRef = useRef<HTMLAudioElement | null>(null);
  const ctxRef = useRef<AudioContext | null>(null);
  const songSrc = useRef<MediaElementAudioSourceNode | null>(null);
  const bgSrc = useRef<MediaElementAudioSourceNode | null>(null);
  const bgGainNode = useRef<GainNode | null>(null);
  const rafRef = useRef<number | null>(null);

  const duration = body?.info.duration ?? 0;
  const end = spec.end > 0 ? Math.min(spec.end, duration) : duration;

  // ---- loading -------------------------------------------------------------
  useEffect(() => {
    void (async () => {
      const [f, s] = await Promise.all([
        fetch("/api/mix/files?group=project", { cache: "no-store" }).then((r) => r.json()),
        fetch("/api/mix/session", { cache: "no-store" }).then((r) => r.json()),
      ]);
      setGroups(f.groups ?? []);
      setOther(f.other ?? []);

      // PRECEDENCE: preset > the saved pair > BLANK. `last` is used only when
      // there is no preset -- a link that named a file and a window must not
      // lose to whatever this bench was last pointed at.
      if (preset) {
        // The per-pair knobs are still worth having: handover, fade, gain and
        // duck are things learned about THIS pair, while body/start/end came
        // from the link.
        const pair = s?.byPair?.[`${preset.body}|`] ?? {};
        setSpec({
          ...BLANK,
          ...pair,
          body: preset.body,
          bg: null,
          start: preset.start,
          end: preset.end,
        });
        return;
      }
      const last = s?.last ? s.byPair?.[s.last] : null;
      if (last?.body) setSpec({ ...BLANK, ...last });
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [preset?.body, preset?.start, preset?.end]);

  const loadTrack = useCallback(async (which: "body" | "bg", path: string | null) => {
    if (!path) {
      if (which === "bg") setBg(null);
      else setBody(null);
      return;
    }
    setLoading(`analysing ${path.split("/").pop()}…`);
    try {
      const r = await fetch(`/api/mix/track?path=${encodeURIComponent(path)}`, { cache: "no-store" });
      const j = (await r.json()) as Track & { error?: string };
      if (!r.ok || j.error) {
        setNote(`could not read ${path}: ${j.error ?? r.status}`);
        return;
      }
      if (which === "body") setBody(j);
      else setBg(j);
      setNote("");
    } finally {
      setLoading("");
    }
  }, []);

  useEffect(() => {
    void loadTrack("body", spec.body || null);
  }, [spec.body, loadTrack]);
  useEffect(() => {
    void loadTrack("bg", spec.bg);
  }, [spec.bg, loadTrack]);

  // A freshly-loaded body sets the view and, if nothing has been chosen yet,
  // seeds the handover at the moment the song starts -- which is the answer in
  // the common case and a visible starting point in the rest.
  useEffect(() => {
    if (!body) return;
    setView({ from: 0, to: Math.max(4, body.info.duration) });
    setSpec((s) => {
      const next = { ...s };
      if (!next.out) {
        const base = body.info.label.replace(/\.[^.]+$/, "").replace(/[^\w.-]+/g, "-");
        next.out = `${base}-mix.mp4`;
      }
      if (!next.handover && body.analysis?.firstSound != null) next.handover = body.analysis.firstSound;
      return next;
    });
  }, [body]);

  // ---- audio graph ---------------------------------------------------------
  const ctx = () => {
    if (!ctxRef.current) ctxRef.current = new AudioContext();
    return ctxRef.current;
  };

  const wire = useCallback(() => {
    const c = ctx();
    if (vidRef.current && !songSrc.current) {
      songSrc.current = c.createMediaElementSource(vidRef.current);
      songSrc.current.connect(c.destination);
    }
    if (bgRef.current && !bgSrc.current) {
      bgSrc.current = c.createMediaElementSource(bgRef.current);
      const g = c.createGain();
      bgSrc.current.connect(g);
      g.connect(c.destination);
      bgGainNode.current = g;
    }
  }, []);

  const scheduleBg = useCallback(
    (from: number) => {
      const g = bgGainNode.current;
      const c = ctxRef.current;
      if (!g || !c) return;
      const now = c.currentTime;
      g.gain.cancelScheduledValues(now);
      const { handover: H, fade: F, duck } = spec;
      g.gain.setValueAtTime(bgGainAt(from, spec), now);
      if (from < H) {
        g.gain.setValueAtTime(spec.bgGain, now + (H - from));
        if (F > 0.0005) g.gain.linearRampToValueAtTime(duck, now + (H - from) + F);
        else g.gain.setValueAtTime(duck, now + (H - from));
      } else if (from < H + F) {
        g.gain.linearRampToValueAtTime(duck, now + (H + F - from));
      }
    },
    [spec],
  );

  const stop = useCallback(() => {
    vidRef.current?.pause();
    bgRef.current?.pause();
    if (rafRef.current) cancelAnimationFrame(rafRef.current);
    rafRef.current = null;
    setPlaying(false);
  }, []);

  const play = useCallback(
    async (from?: number) => {
      const v = vidRef.current;
      if (!v || !body) return;
      wire();
      const c = ctx();
      if (c.state === "suspended") await c.resume();
      const t0 = clamp(from ?? playhead ?? spec.start, spec.start, Math.max(spec.start, end - 0.05));
      v.currentTime = t0;
      if (bgRef.current) bgRef.current.currentTime = t0;
      scheduleBg(t0);
      await v.play().catch(() => {});
      if (bgRef.current) await bgRef.current.play().catch(() => {});
      setPlaying(true);
      const tick = () => {
        const t = vidRef.current?.currentTime ?? 0;
        setPlayhead(t);
        if (t >= end - 0.01) {
          stop();
          return;
        }
        rafRef.current = requestAnimationFrame(tick);
      };
      rafRef.current = requestAnimationFrame(tick);
    },
    [body, playhead, spec.start, end, scheduleBg, stop, wire],
  );

  // A parameter changed mid-play: re-arm the ramp from where we are, so the
  // preview reflects the edit immediately instead of on the next play.
  useEffect(() => {
    if (playing) scheduleBg(vidRef.current?.currentTime ?? 0);
  }, [playing, scheduleBg]);

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

  // ---- editing -------------------------------------------------------------
  const set = useCallback((patch: Partial<Spec>) => setSpec((s) => ({ ...s, ...patch })), []);

  const onMove = useCallback(
    (which: Marker, t: number, _dragging: boolean) => {
      const d = duration || t;
      if (which === "handover") set({ handover: +clamp(t, 0, d).toFixed(3) });
      else if (which === "start") set({ start: +clamp(t, 0, Math.max(0, end - 0.1)).toFixed(3) });
      else set({ end: +clamp(t, spec.start + 0.1, d).toFixed(3) });
    },
    [duration, end, spec.start, set],
  );

  const seek = useCallback(
    (t: number) => {
      const to = clamp(t, 0, duration || t);
      setPlayhead(to);
      if (vidRef.current) vidRef.current.currentTime = to;
      if (bgRef.current) bgRef.current.currentTime = to;
      if (playing) scheduleBg(to);
    },
    [duration, playing, scheduleBg],
  );

  // ---- render --------------------------------------------------------------
  const submit = useCallback(
    async (dry: boolean) => {
      setNote("");
      const r = await fetch(`/api/mix/render${dry ? "?dry=1" : ""}`, {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ ...spec, end: spec.end || 0 }),
      });
      const j = await r.json();
      if (!r.ok || j.error) {
        setNote(`render refused: ${j.error ?? r.status}`);
        return;
      }
      if (dry) {
        setNote(`${j.reencode ? "re-encode" : "stream copy"} · ${j.duration}s → ${j.out}`);
        return;
      }
      setJob(j.job);
      void fetch("/api/mix/session", {
        method: "PUT",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(spec),
      });
    },
    [spec],
  );

  useEffect(() => {
    if (!job || job.state !== "running") return;
    const id = setInterval(async () => {
      const r = await fetch(`/api/mix/render?job=${job.id}`, { cache: "no-store" });
      const j = await r.json();
      if (j.job) setJob(j.job);
    }, 1000);
    return () => clearInterval(id);
  }, [job]);

  // ---- keyboard ------------------------------------------------------------
  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const el = e.target as HTMLElement | null;
      if (el && (el.tagName === "INPUT" || el.tagName === "SELECT" || el.tagName === "TEXTAREA")) return;
      const nudge = e.shiftKey ? 0.01 : 0.1;
      if (e.key === " ") {
        e.preventDefault();
        if (playing) stop();
        else void play();
      } else if (e.key === "[") {
        e.preventDefault();
        set({ handover: +Math.max(0, spec.handover - nudge).toFixed(3) });
      } else if (e.key === "]") {
        e.preventDefault();
        set({ handover: +(spec.handover + nudge).toFixed(3) });
      } else if (e.key === "h") {
        e.preventDefault();
        void play(Math.max(0, spec.handover - 2));
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [playing, play, stop, set, spec.handover]);

  // The cues worth offering are the ones NEAR where you are working, not the
  // loudest in the file. Prefer what is inside the current view, then order by
  // distance from the handover.
  const steps = (() => {
    const all = bg?.analysis?.steps ?? [];
    if (!all.length) return [];
    const inView = all.filter((s) => s.at >= view.from && s.at <= view.to);
    return (inView.length ? inView : all)
      .slice()
      .sort((a, b) => Math.abs(a.at - spec.handover) - Math.abs(b.at - spec.handover));
  })();
  const zoomHandover = useCallback(() => {
    setView({ from: Math.max(0, spec.handover - 3), to: Math.min(duration || spec.handover + 3, spec.handover + 3) });
  }, [spec.handover, duration]);

  // ---- the picker ----------------------------------------------------------
  //
  // Grouped by project, because a flat newest-first list with a cap could not
  // show them all: four of six report deliverables fell off the end of a
  // 600-entry list, and per-song cuts never appeared at all.
  //
  // The <option value> stays the ABSOLUTE path. That is what dodges the
  // relative-binding hazard in resolveInRoots -- a relative label is tried
  // against each root in order and never stats, so it binds to the first root it
  // COULD live under whether or not it is there. Displaying the short label and
  // sending the full path is what keeps that from mattering.
  const needle = filter.trim().toLowerCase();
  const keep = (f: FileRow) => !needle || f.label.toLowerCase().includes(needle);
  const shownGroups = groups
    .map((g) => ({ ...g, files: g.files.filter(keep) }))
    .filter((g) => g.files.length > 0);
  const shownOther = other.filter(keep);
  const nShown = shownGroups.reduce((n, g) => n + g.files.length, 0) + shownOther.length;

  const picker = (which: "body" | "bg") => (
    <select
      value={(which === "body" ? spec.body : spec.bg) ?? ""}
      onChange={(e) => set(which === "body" ? { body: e.target.value } : { bg: e.target.value || null })}
      data-picker={which}
      className="w-full rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-1.5 text-[13px] outline-none focus:border-[var(--color-sel)]"
    >
      <option value="">{which === "bg" ? "— none (song only) —" : "— choose a render —"}</option>
      {shownGroups.map((g) => (
        <optgroup key={g.project} label={g.label}>
          {g.files.map((f) => (
            <option key={f.path} value={f.path}>
              {f.label}
            </option>
          ))}
        </optgroup>
      ))}
      {shownOther.length > 0 && (
        <optgroup label="— other —">
          {shownOther.map((f) => (
            <option key={f.path} value={f.path}>
              {f.label}
            </option>
          ))}
        </optgroup>
      )}
    </select>
  );

  const pickerFilter = (
    <label className="flex items-center gap-1.5">
      <input
        type="search"
        value={filter}
        onChange={(e) => setFilter(e.target.value)}
        placeholder="filter files…"
        aria-label="filter the file list"
        data-picker-filter=""
        className="w-full rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-1 font-mono text-[11px] outline-none focus:border-[var(--color-sel)]"
      />
      <span className="micro whitespace-nowrap" data-picker-count={nShown}>
        {nShown}
      </span>
    </label>
  );

  const field = (
    label: string,
    key: "handover" | "fade" | "bgGain" | "duck" | "start" | "end",
    step: number,
    hint: string,
  ) => (
    <label className="flex flex-col gap-1">
      <span className="micro">{label}</span>
      <input
        type="number"
        step={step}
        value={spec[key]}
        onChange={(e) => set({ [key]: Number(e.target.value) } as Partial<Spec>)}
        className="num w-full rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-1 text-[13px] text-[var(--color-meter)] outline-none focus:border-[var(--color-sel)]"
      />
      <span className="text-[10px] text-[var(--color-dim)]">{hint}</span>
    </label>
  );

  return (
    <div className="mx-auto w-full max-w-6xl p-4">
      {preset && (
        // The window came from a clip, but the FILE is wider than the clip --
        // saying so is what stops the material outside it looking unreachable.
        <p className="mb-2 text-[11px] text-[var(--color-dim)]" data-mix-preset={preset.clip ?? ""}>
          this window came from{" "}
          <span className="font-mono text-[var(--color-text)]">
            {preset.from}
            {preset.clip ? ` / ${preset.clip}` : ""}
          </span>{" "}
          — the file itself runs {preset.fileFrom.toFixed(2)}–{preset.fileTo.toFixed(2)}s
        </p>
      )}
      <div className="mb-2">{pickerFilter}</div>
      <div className="mb-3 grid gap-3 md:grid-cols-2">
        <div>
          <div className="micro mb-1">song — the render with the picture</div>
          {picker("body")}
        </div>
        <div>
          <div className="micro mb-1">background — the track it hands over from</div>
          {picker("bg")}
        </div>
      </div>

      {loading ? <div className="mb-2 text-[12px] text-[var(--color-meter)]">{loading}</div> : null}

      <div className="rounded-lg border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
        <div className="mb-3 flex flex-wrap items-start gap-3">
          <div className="min-w-0 flex-1">
            {body ? (
              <video
                ref={vidRef}
                key={body.info.path}
                src={mediaUrl(body.info.path)}
                playsInline
                preload="auto"
                className="max-h-64 w-full rounded border border-[var(--color-line)] bg-black object-contain"
              />
            ) : (
              <div className="grid h-40 place-items-center rounded border border-dashed border-[var(--color-line)] text-[13px] text-[var(--color-dim)]">
                choose a song render to begin
              </div>
            )}
            {bg ? <audio ref={bgRef} key={bg.info.path} src={mediaUrl(bg.info.path)} preload="auto" /> : null}
          </div>

          <div className="w-full shrink-0 md:w-56">
            <div className="micro mb-1">readings</div>
            <dl className="num space-y-1 text-[12px]">
              <Row k="song starts" v={body?.analysis?.firstSound != null ? fmt(body.analysis.firstSound) : "—"} />
              <Row k="song length" v={duration ? `${duration.toFixed(2)}s` : "—"} />
              <Row k="bg length" v={bg?.info.duration ? `${bg.info.duration.toFixed(2)}s` : "—"} />
              <Row k="output" v={`${Math.max(0, end - spec.start).toFixed(2)}s`} />
            </dl>
            {steps.length ? (
              <>
                <div className="micro mt-3 mb-1">background cues</div>
                <div className="flex flex-wrap gap-1">
                  {steps.slice(0, 5).map((s) => (
                    <button
                      key={s.at}
                      type="button"
                      onClick={() => {
                        set({ handover: s.at });
                        void play(Math.max(0, s.at - 1.5));
                      }}
                      title={`band ratio steps up ${s.gain}x here`}
                      className="num rounded border border-[var(--color-meter)] px-1.5 py-0.5 text-[11px] text-[var(--color-meter)] hover:bg-[color-mix(in_srgb,var(--color-meter)_14%,transparent)]"
                    >
                      {s.at.toFixed(2)}s ×{s.gain}
                    </button>
                  ))}
                </div>
              </>
            ) : null}
          </div>
        </div>

        <MixLanes
          bg={bg?.analysis ?? null}
          body={body?.analysis ?? null}
          view={view}
          handover={spec.handover}
          fade={spec.fade}
          start={spec.start}
          end={end || 1}
          playhead={playhead}
          onMove={onMove}
          onScrub={seek}
        />

        <div className="mt-2 flex flex-wrap items-center gap-2 text-[11px] text-[var(--color-dim)]">
          <button
            type="button"
            onClick={() => (playing ? stop() : void play())}
            disabled={!body}
            className="rounded border border-[var(--color-sel)] px-2 py-1 text-[var(--color-sel)] disabled:opacity-30"
          >
            <kbd>space</kbd> {playing ? "stop" : "play"}
          </button>
          <button
            type="button"
            onClick={() => void play(Math.max(0, spec.handover - 2))}
            disabled={!body}
            className="rounded border border-[var(--color-line)] px-2 py-1 disabled:opacity-30"
          >
            <kbd>h</kbd> hear the handover
          </button>
          <button type="button" onClick={zoomHandover} className="rounded border border-[var(--color-line)] px-2 py-1">
            zoom to handover
          </button>
          <button
            type="button"
            onClick={() => setView({ from: 0, to: Math.max(4, duration) })}
            className="rounded border border-[var(--color-line)] px-2 py-1"
          >
            fit
          </button>
          <span className="num">
            playhead {playhead != null ? fmt(playhead) : "—"} · bg gain{" "}
            <b className="text-[var(--color-meter)]">{bgGainAt(playhead ?? 0, spec).toFixed(2)}</b>
          </span>
          <span>
            <kbd>[</kbd>/<kbd>]</kbd> nudge handover (shift = 10ms)
          </span>
        </div>

        <div className="mt-3 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
          {field("handover", "handover", 0.01, "bg ducks here")}
          {field("fade", "fade", 0.01, "ramp, not a click")}
          {field("bg before", "bgGain", 0.05, "level before")}
          {field("bg after", "duck", 0.05, "0 = cut")}
          {field("start", "start", 0.05, "trims the head")}
          {field("end", "end", 0.5, "0 = song's end")}
        </div>

        <div className="mt-3 flex flex-wrap items-end gap-2">
          <label className="min-w-0 flex-1">
            <span className="micro">output</span>
            <input
              value={spec.out}
              onChange={(e) => set({ out: e.target.value })}
              placeholder="quartering-something-v5.mp4"
              className="w-full rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-1.5 text-[13px] outline-none focus:border-[var(--color-sel)]"
            />
          </label>
          <button
            type="button"
            onClick={() => void submit(true)}
            disabled={!body}
            className="rounded border border-[var(--color-line)] px-3 py-2 text-[13px] disabled:opacity-30"
          >
            show the command
          </button>
          <button
            type="button"
            onClick={() => void submit(false)}
            disabled={!body || job?.state === "running"}
            className="rounded border border-[var(--color-good)] px-3 py-2 text-[13px] text-[var(--color-good)] hover:bg-[color-mix(in_srgb,var(--color-good)_14%,transparent)] disabled:opacity-30"
          >
            {job?.state === "running" ? "rendering…" : "render"}
          </button>
        </div>

        {note ? <div className="num mt-2 break-all text-[11px] text-[var(--color-dirty)]">{note}</div> : null}
        {job ? (
          <div className="mt-2 text-[12px]">
            <span
              className={
                job.state === "done"
                  ? "text-[var(--color-good)]"
                  : job.state === "failed"
                    ? "text-[var(--color-bad)]"
                    : "text-[var(--color-meter)]"
              }
            >
              {job.state}
            </span>{" "}
            <span className="num text-[var(--color-dim)]">{job.label}</span>
            {job.error ? <div className="mt-1 break-all text-[11px] text-[var(--color-bad)]">{job.error}</div> : null}
          </div>
        ) : null}
      </div>

      <p className="mt-3 text-[11px] leading-relaxed text-[var(--color-dim)]">
        The preview applies the same ramp the render does, so what you hear is what gets written —
        the one difference is the output limiter, which only engages if the two tracks sum above
        0.98. The teal curve on the background lane is high-band over low-band energy: a music cue
        steps it up and holds it, which is how an alarm is found when it is no louder than what it
        interrupts.
      </p>
    </div>
  );
}

function Row({ k, v }: { k: string; v: string }) {
  return (
    <div className="flex justify-between gap-3">
      <dt className="text-[var(--color-dim)]">{k}</dt>
      <dd className="text-[var(--color-meter)]">{v}</dd>
    </div>
  );
}