"use client";

import type { VideoProjectLink } from "./AddToVideo";
import Link from "next/link";
import { useCallback, useEffect, useRef, useState } from "react";
import type { NotesRead } from "@/lib/annotations/types";
import { useNotes } from "@/lib/annotations/useNotes";
import EvidencePanel, { useEvidence, type EvidenceHandle } from "./EvidencePanel";
import { Composer, NoteCard } from "./NoteCards";

// Every citation of one article, one per screen: the evidence on the left, its
// notes on the right. j/k (or ←/→) move, space plays, n notes it, Esc cancels.
// The citation in view is in the URL (`?c=`), so a walk can be resumed.

export type WalkItem = { id: string; number: number; kind: string; quote: string };

export default function EvidenceWalk({
  site,
  report,
  items,
  initial,
  initialNotes,
  videoProjects = [],
}: {
  site: string;
  report: string;
  items: WalkItem[];
  initial: number;
  initialNotes: NotesRead;
  videoProjects?: VideoProjectLink[];
}) {
  const [idx, setIdx] = useState(initial);
  const [composing, setComposing] = useState(false);
  const item = items[idx];
  const { ev, error } = useEvidence(site, report, item?.id ?? null);
  const { notes, write, busy, error: notesError } = useNotes({ article: `${site}/${report}` }, { initial: initialNotes });
  const panel = useRef<EvidenceHandle>(null);

  const go = useCallback(
    (to: number) => {
      const next = Math.max(0, Math.min(items.length - 1, to));
      setIdx(next);
      setComposing(false);
      const url = new URL(window.location.href);
      url.searchParams.set("c", items[next].id);
      window.history.replaceState(null, "", url);
    },
    [items],
  );

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const t = e.target as HTMLElement | null;
      if (t?.closest("input, textarea, select, [contenteditable=true]") || e.metaKey || e.ctrlKey || e.altKey) return;
      if (e.key === "j" || e.key === "ArrowRight") {
        e.preventDefault();
        go(idx + 1);
      } else if (e.key === "k" || e.key === "ArrowLeft") {
        e.preventDefault();
        go(idx - 1);
      } else if (e.key === " ") {
        e.preventDefault();
        panel.current?.togglePlay();
      } else if (e.key === "n") {
        e.preventDefault();
        setComposing(true);
      } else if (e.key === "Escape") {
        setComposing(false);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [idx, go]);

  if (!item) return <p className="p-4 text-[12px] text-[var(--color-dim)]">no citations</p>;
  const mine = notes.filter((n) => n.anchor.kind === "cite" && n.anchor.cite === item.id);

  return (
    <div data-walk={item.id} className="grid min-h-0 flex-1 grid-cols-1 gap-4 overflow-auto p-4 min-[1100px]:grid-cols-[minmax(0,1.3fr)_minmax(320px,1fr)]">
      <div className="min-w-0 space-y-2">
        <div className="flex items-center gap-2 text-[12px]">
          <button type="button" onClick={() => go(idx - 1)} disabled={idx === 0} className="rounded border border-[var(--color-line)] px-2 disabled:opacity-30">
            ← k
          </button>
          <span className="num" data-walk-position>
            {idx + 1} / {items.length}
          </span>
          <button type="button" onClick={() => go(idx + 1)} disabled={idx === items.length - 1} className="rounded border border-[var(--color-line)] px-2 disabled:opacity-30">
            j →
          </button>
          <span className="micro ml-2">{item.kind}</span>
          <span className="micro ml-auto">space plays · n notes</span>
        </div>
        <EvidencePanel key={item.id} ref={panel} ev={ev} error={error} number={item.number} projects={videoProjects} />
      </div>
      <div className="min-w-0 space-y-2">
        <div className="micro">notes on [{item.number}]</div>
        {notesError && <p className="text-[12px] text-[var(--color-bad)]">{notesError}</p>}
        {mine.length > 0 && (
          <ul className="space-y-2">
            {mine.map((n) => (
              <NoteCard key={n.id} note={n} label={`citation [${item.number}]`} busy={busy} write={write} />
            ))}
          </ul>
        )}
        {composing ? (
          <Composer
            label={`citation [${item.number}]`}
            busy={busy}
            onSave={async (text) => {
              const note = await write({ op: "add", text, anchor: { kind: "cite", cite: item.id } });
              if (note) setComposing(false);
            }}
            onCancel={() => setComposing(false)}
          />
        ) : (
          <button type="button" onClick={() => setComposing(true)} className="text-[12px] text-[var(--color-dim)] hover:text-[var(--color-sel)]">
            + note on this citation
          </button>
        )}
        <div className="pt-2">
          <Link href={`/sites/${site}/${report}`} className="text-[12px] text-[var(--color-dim)] hover:text-[var(--color-text)]">
            ← article
          </Link>
        </div>
      </div>
    </div>
  );
}