"use client";

import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import CopyButton from "@/components/CopyButton";
import type { Evidence } from "@/lib/articles/evidence";
import AddToVideo, { type VideoProjectLink } from "./AddToVideo";

// One citation's evidence: what it quotes, who and when, the transcript around
// it with the cited cues marked, and the media that plays it -- the prepared
// clip, a fetched window or a saved file, seeked to the cited second -- or,
// when there is none on disk, the MCP line that fetches it through the editor.

export type EvidenceHandle = { togglePlay: () => void };

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

export function useEvidence(site: string, report: string, cite: string | null) {
  const [ev, setEv] = useState<Evidence | null>(null);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    if (!cite) return;
    let live = true;
    setEv(null);
    setError(null);
    fetch(`/api/sites/evidence?${new URLSearchParams({ site, report, cite })}`, { cache: "no-store" })
      .then(async (r) => {
        const j = await r.json();
        if (!r.ok) throw new Error(j.error ?? r.statusText);
        if (live) setEv(j);
      })
      .catch((err) => live && setError(err instanceof Error ? err.message : String(err)));
    return () => {
      live = false;
    };
  }, [site, report, cite]);
  return { ev, error };
}

const EvidencePanel = forwardRef<
  EvidenceHandle,
  { ev: Evidence | null; error: string | null; number?: number; autoPlay?: boolean; projects?: VideoProjectLink[] }
>(
  function EvidencePanel({ ev, error, number, autoPlay = false, projects = [] }, ref) {
    const media = useRef<HTMLMediaElement | null>(null);
    useImperativeHandle(ref, () => ({
      togglePlay: () => {
        const m = media.current;
        if (!m) return;
        if (m.paused) void m.play().catch(() => {});
        else m.pause();
      },
    }));

    if (error) return <p className="text-[12px] text-[var(--color-bad)]">{error}</p>;
    if (!ev) return <p className="text-[12px] text-[var(--color-dim)]">loading…</p>;

    const play = ev.play;
    // File time of a record second: the cited span starts `offset` into the file.
    const fileT = (t: number) => (play && ev.start !== undefined ? Math.max(0, t - ev.start + play.offset) : 0);
    const startAt = play ? (play.kind === "prepared" ? 0 : Math.max(0, play.offset - 3)) : 0;
    const seek = (t: number) => {
      if (media.current) {
        media.current.currentTime = fileT(t);
        void media.current.play().catch(() => {});
      }
    };

    return (
      <div data-evidence={ev.cite} className="space-y-2 text-[12px]">
        <blockquote className="border-l-2 border-[var(--color-sel)] pl-2 text-[13px] text-[var(--color-text)]">
          {number !== undefined && <span className="mr-1 font-mono text-[11px] text-[var(--color-sel)]">[{number}]</span>}“{ev.quote}”
        </blockquote>
        <div className="text-[var(--color-dim)]">
          {[ev.speaker ?? ev.record?.channelTitle, ev.date, ev.label].filter(Boolean).join(" · ")}
          {ev.start !== undefined && ev.end !== undefined && (
            <span className="num ml-1">
              @ {fmt(ev.start)}–{fmt(ev.end)}
            </span>
          )}
        </div>
        {ev.record?.title && <div className="text-[var(--color-dim)]">{ev.record.title}</div>}
        {ev.originalUrl && (
          <a href={ev.originalUrl} target="_blank" rel="noopener noreferrer" className="text-[var(--color-sel)] hover:underline">
            original ↗
          </a>
        )}

        {play ? (
          <div data-play={play.kind}>
            {play.audio ? (
              <audio
                ref={(el) => {
                  media.current = el;
                }}
                controls
                src={play.url}
                autoPlay={autoPlay}
                onLoadedMetadata={(e) => {
                  e.currentTarget.currentTime = startAt;
                }}
                className="w-full"
              />
            ) : (
              <video
                ref={(el) => {
                  media.current = el;
                }}
                controls
                src={play.url}
                autoPlay={autoPlay}
                onLoadedMetadata={(e) => {
                  e.currentTarget.currentTime = startAt;
                }}
                className="aspect-video w-full rounded bg-black"
              />
            )}
            <div className="micro mt-0.5">{play.label}</div>
          </div>
        ) : ev.fetchLine ? (
          <div data-play="none" className="space-y-1 rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] p-2">
            <div className="text-[var(--color-dim)]">not on disk — fetch it through the editor:</div>
            <code className="block break-all font-mono text-[11px] text-[var(--color-text)]">{ev.fetchLine}</code>
            <CopyButton text={ev.fetchLine} label="copy fetch_clip" />
          </div>
        ) : null}

        {ev.post && (
          <div data-post className="space-y-1 rounded border border-[var(--color-line)] p-2">
            {ev.post.author && <div className="text-[var(--color-dim)]">{ev.post.author}</div>}
            {ev.post.text && <p className="whitespace-pre-wrap text-[var(--color-text)]">{ev.post.text}</p>}
            {ev.post.shot && (
              // eslint-disable-next-line @next/next/no-img-element
              <img src={ev.post.shot} alt="capture of the post" className="w-full rounded border border-[var(--color-line)]" />
            )}
          </div>
        )}

        {ev.cues.length > 0 ? (
          <ol data-cues className="space-y-0.5">
            {ev.cues.map((c) => (
              <li key={c.start} data-cited={c.cited ? "true" : undefined}>
                <button
                  type="button"
                  onClick={() => seek(c.start)}
                  disabled={!play}
                  className={`flex w-full gap-2 rounded px-1 text-left ${c.cited ? "bg-[var(--color-panel-2)] text-[var(--color-text)]" : "text-[var(--color-dim)]"} enabled:hover:text-[var(--color-text)]`}
                >
                  <span className="num shrink-0 font-mono text-[10px] leading-5">{fmt(c.start)}</span>
                  <span>{c.text}</span>
                </button>
              </li>
            ))}
          </ol>
        ) : ev.cuesNote ? (
          <div className="micro">{ev.cuesNote}</div>
        ) : null}
        <AddToVideo ev={ev} projects={projects} />
      </div>
    );
  },
);

export default EvidencePanel;