"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import AnchoredNotes from "@/components/notes/AnchoredNotes";
import { NotesProvider, useSharedNotes } from "@/components/notes/NotesProvider";
import TimedNotes from "@/components/notes/TimedNotes";
import { badgeVariants, type BadgeVariants } from "@/components/ui/badge";
import { buttonVariants } from "@/components/ui/button";
import { fmtAgo } from "@/lib/format";

// The takes of one project, a group at a time, every preview on screen at once.
//
// ONE AUDIO SOURCE. Every preview is muted except the one being listened to:
// the "listen" toggle picks it, and so does pressing play (or unmuting) on a
// single preview -- the last thing you reached for is what you hear. "Play all
// from start" keeps whichever is being listened to, so a group can be watched
// in sync against one soundtrack, or in silence.
//
// Buttons stay disabled until mount, as VerdictChip's do: a click before
// hydration sends nothing, and a verdict lost that way looks like one never
// given.

export type Take = {
  id: string;
  group: string;
  order: number;
  label: string;
  kind: "reference" | "similar" | "different";
  summary: string;
  changes: string[];
  preview: string;
  seconds: number | null;
  builtAt: string | null;
  previewSize: number | null;
  previewMtimeMs: number | null;
};

export type Verdict = "like" | "maybe" | "no";
export type TakeVerdict = { verdict: Verdict | null; note: string; at: string };

const KIND_TONE: Record<Take["kind"], BadgeVariants["variant"]> = {
  reference: "on",
  similar: "info",
  different: "meter",
};

// Literal class strings, as VerdictChip's are: Tailwind finds classes by
// reading the source, so a class assembled from a variable is never generated.
const TONES = {
  good: {
    on: "border-[var(--color-good)] bg-[color-mix(in_srgb,var(--color-good)_18%,transparent)] text-[var(--color-good)]",
    off: "border-[var(--color-line)] text-[var(--color-dim)] hover:border-[var(--color-good)] hover:text-[var(--color-good)]",
  },
  dirty: {
    on: "border-[var(--color-dirty)] bg-[color-mix(in_srgb,var(--color-dirty)_18%,transparent)] text-[var(--color-dirty)]",
    off: "border-[var(--color-line)] text-[var(--color-dim)] hover:border-[var(--color-dirty)] hover:text-[var(--color-dirty)]",
  },
  bad: {
    on: "border-[var(--color-bad)] bg-[color-mix(in_srgb,var(--color-bad)_18%,transparent)] text-[var(--color-bad)]",
    off: "border-[var(--color-line)] text-[var(--color-dim)] hover:border-[var(--color-bad)] hover:text-[var(--color-bad)]",
  },
  sel: {
    on: "border-[var(--color-sel)] bg-[color-mix(in_srgb,var(--color-sel)_18%,transparent)] text-[var(--color-sel)]",
    off: "border-[var(--color-line)] text-[var(--color-dim)] hover:border-[var(--color-sel)] hover:text-[var(--color-sel)]",
  },
} as const;
type Tone = keyof typeof TONES;
const tone = (t: Tone, on: boolean) => (on ? TONES[t].on : TONES[t].off);

const VERDICTS: { id: Verdict; label: string; tone: Tone }[] = [
  { id: "like", label: "Like", tone: "good" },
  { id: "maybe", label: "Maybe", tone: "dirty" },
  { id: "no", label: "No", tone: "bad" },
];

const previewSrc = (project: string, t: Take) =>
  `/api/report/takes/preview?${new URLSearchParams({
    project,
    take: t.id,
    ...(t.previewMtimeMs != null ? { v: String(t.previewMtimeMs) } : {}),
  })}`;

export default function TakesBench({
  project,
  groups,
  initial,
}: {
  project: string;
  groups: { group: string; takes: Take[] }[];
  initial: Record<string, TakeVerdict>;
}) {
  const [verdicts, setVerdicts] = useState(initial);
  const [listen, setListen] = useState<string | null>(null);
  const [ready, setReady] = useState(false);
  const videos = useRef(new Map<string, HTMLVideoElement>());
  const listenRef = useRef<string | null>(null);
  // True while "play all" is starting its videos, so their play events do not
  // each claim the audio.
  const starting = useRef(false);

  useEffect(() => setReady(true), []);
  useEffect(() => {
    listenRef.current = listen;
    for (const [id, v] of videos.current) v.muted = id !== listen;
  }, [listen]);

  const els = (g: { takes: Take[] }) =>
    g.takes.map((t) => videos.current.get(t.id)).filter((v): v is HTMLVideoElement => !!v);

  const playAll = async (g: { takes: Take[] }) => {
    starting.current = true;
    const list = els(g);
    for (const v of list) {
      v.pause();
      v.currentTime = 0;
    }
    await Promise.allSettled(list.map((v) => v.play()));
    starting.current = false;
  };

  const save = async (take: string, patch: { verdict?: Verdict | null; note?: string }) => {
    const r = await fetch("/api/report/takes/verdict", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ project, take, ...patch }),
      cache: "no-store",
    });
    const j = (await r.json()) as { error?: string; verdicts?: Record<string, TakeVerdict> };
    if (!r.ok || !j.verdicts) throw new Error(j.error ?? `HTTP ${r.status}`);
    setVerdicts(j.verdicts);
  };

  return (
    <NotesProvider target={{ project }}>
    <div className="space-y-6">
      {groups.map((g) => {
        const tally = VERDICTS.map((v) => [v.id, g.takes.filter((t) => verdicts[t.id]?.verdict === v.id).length] as const)
          .filter(([, n]) => n > 0)
          .map(([id, n]) => `${n} ${id}`)
          .join(" · ");
        return (
          <section key={g.group} data-group={g.group}>
            <div className="mb-2 flex flex-wrap items-center gap-2">
              <h2 className="micro">
                {g.group} — {g.takes.length}
              </h2>
              {tally && <span className="num text-[11px] text-[var(--color-dim)]">{tally}</span>}
              <span className="ml-auto flex gap-1.5">
                <button
                  type="button"
                  data-action="play-all"
                  disabled={!ready}
                  className={buttonVariants({ variant: "primary", size: "sm" })}
                  onClick={() => void playAll(g)}
                >
                  Play all from start
                </button>
                <button
                  type="button"
                  data-action="pause-all"
                  disabled={!ready}
                  className={buttonVariants({ size: "sm" })}
                  onClick={() => els(g).forEach((v) => v.pause())}
                >
                  Pause all
                </button>
              </span>
            </div>
            <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
              {g.takes.map((t) => (
                <TakeCard
                  key={t.id}
                  project={project}
                  take={t}
                  src={previewSrc(project, t)}
                  verdict={verdicts[t.id] ?? null}
                  listening={listen === t.id}
                  ready={ready}
                  onListen={() => setListen((cur) => (cur === t.id ? null : t.id))}
                  videoRef={(el) => {
                    if (el) {
                      el.muted = t.id !== listenRef.current;
                      videos.current.set(t.id, el);
                    } else {
                      videos.current.delete(t.id);
                    }
                  }}
                  onPlay={() => {
                    if (!starting.current && listenRef.current !== t.id) setListen(t.id);
                  }}
                  onUnmute={() => {
                    if (listenRef.current !== t.id) setListen(t.id);
                  }}
                  save={(patch) => save(t.id, patch)}
                />
              ))}
            </div>
          </section>
        );
      })}
    </div>
    </NotesProvider>
  );
}

function TakeCard({
  project,
  take: t,
  src,
  verdict,
  listening,
  ready,
  onListen,
  videoRef,
  onPlay,
  onUnmute,
  save,
}: {
  project: string;
  take: Take;
  src: string;
  verdict: TakeVerdict | null;
  listening: boolean;
  ready: boolean;
  onListen: () => void;
  videoRef: (el: HTMLVideoElement | null) => void;
  onPlay: () => void;
  onUnmute: () => void;
  save: (patch: { verdict?: Verdict | null; note?: string }) => Promise<void>;
}) {
  const notes = useSharedNotes({ project });
  // The element, for the timed notes; the parent's callback (audio routing)
  // still gets it. Stable, so it runs once per mount, not once per render.
  const [el, setEl] = useState<HTMLVideoElement | null>(null);
  const parentRef = useRef(videoRef);
  parentRef.current = videoRef;
  const bindVideo = useCallback((node: HTMLVideoElement | null) => {
    parentRef.current(node);
    setEl(node);
  }, []);
  const [note, setNote] = useState(verdict?.note ?? "");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const saved = verdict?.note ?? "";
  // Adopt a server value that moved underneath (another tab, a refresh).
  useEffect(() => setNote(verdict?.note ?? ""), [verdict?.note]);

  const run = async (patch: { verdict?: Verdict | null; note?: string }) => {
    setBusy(true);
    setError(null);
    try {
      await save(patch);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(false);
    }
  };
  const commitNote = () => {
    if (note.replace(/\s+$/, "") !== saved) void run({ note });
  };
  const current = verdict?.verdict ?? null;
  const hue = VERDICTS.find((v) => v.id === current)?.tone;

  return (
    <article
      data-take={t.id}
      data-kind={t.kind}
      data-verdict={current ?? ""}
      className="flex flex-col overflow-hidden rounded border bg-[var(--color-panel)]"
      style={{ borderColor: `var(--color-${hue ?? "line"})` }}
    >
      {t.previewSize != null ? (
        <video
          ref={bindVideo}
          src={src}
          controls
          preload="metadata"
          playsInline
          onPlay={onPlay}
          onVolumeChange={(e) => {
            if (!e.currentTarget.muted) onUnmute();
          }}
          className="aspect-video w-full bg-black"
        />
      ) : (
        <div data-no-preview="" className="flex aspect-video w-full items-center justify-center bg-black text-[11px] text-[var(--color-dim)]">
          no preview yet
        </div>
      )}
      <div className="flex flex-1 flex-col gap-1.5 px-3 py-2">
        <div className="flex flex-wrap items-center gap-2">
          <h3 className="text-[13px] text-[var(--color-text)]">{t.label}</h3>
          <span className={badgeVariants({ variant: KIND_TONE[t.kind], size: "sm" })}>{t.kind}</span>
          <span className="num text-[11px] text-[var(--color-dim)]" suppressHydrationWarning>
            {t.seconds != null && `${t.seconds.toFixed(1)} s`}
            {t.builtAt && !Number.isNaN(Date.parse(t.builtAt)) && ` · ${fmtAgo(Date.parse(t.builtAt))}`}
          </span>
          <button
            type="button"
            data-action="listen"
            aria-pressed={listening}
            disabled={!ready || t.previewSize == null}
            className={`ml-auto rounded border px-2 py-0.5 text-[11px] ${tone("sel", listening)}`}
            onClick={onListen}
          >
            {listening ? "listening" : "listen"}
          </button>
        </div>
        {t.summary && <p className="text-[12px] text-[var(--color-text)]">{t.summary}</p>}
        {t.changes.length > 0 && (
          <ul className="list-disc pl-4 text-[11px] text-[var(--color-dim)]">
            {t.changes.map((c, i) => (
              <li key={i}>{c}</li>
            ))}
          </ul>
        )}
        <div className="mt-auto flex flex-wrap items-center gap-1.5 pt-1">
          {VERDICTS.map((v) => (
            <button
              key={v.id}
              type="button"
              data-verdict-button={v.id}
              aria-pressed={current === v.id}
              disabled={!ready || busy}
              className={`rounded border px-2.5 py-1 text-[12px] ${tone(v.tone, current === v.id)}`}
              onClick={() => void run({ verdict: current === v.id ? null : v.id })}
            >
              {v.label}
            </button>
          ))}
          <input
            value={note}
            onChange={(e) => setNote(e.target.value)}
            onBlur={commitNote}
            onKeyDown={(e) => {
              if (e.key === "Enter") commitNote();
            }}
            disabled={!ready}
            placeholder="note"
            aria-label={`note on ${t.label}`}
            data-take-note=""
            maxLength={2000}
            className="min-w-0 flex-1 rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1.5 py-1 text-[12px] text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]"
          />
        </div>
        {error && <span className="text-[11px] text-[var(--color-bad)]">{error}</span>}
        {/* The conversation about this take: notes on the take as a whole, and
            notes at a second of its preview, resolved to the entry on screen.
            Both land in the project's notes.json, which the agent that made
            the takes reads back (`umtool notes`) beside verdicts.json. */}
        <AnchoredNotes notes={notes} pin={{ kind: "take", take: t.id }} label="take notes" />
        {t.previewSize != null && (
          <TimedNotes notes={notes} file={`takes/${t.id}/${t.preview}`} video={el} take={t.id} resolveProject={project} />
        )}
      </div>
    </article>
  );
}