"use client";

import Link from "next/link";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
  POPULATIONS,
  SCOPES,
  SCOPE_CONFIDENCE,
  VALUE_KINDS,
  rosterLine,
} from "umtool-report-to-video/ledger-totals";

// Ruling on one claim.
//
// The layout puts the CONTEXT first and the controls second, on purpose. The
// temptation this page exists to resist is adjudicating from the quote -- the
// quote is what produced the four hazards in the first place, and every one of
// them is invisible inside it. So the cited cue is highlighted inside a
// ninety-second paragraph, and the audio starts a few seconds early.

export type ClaimBenchData = {
  project: string;
  claim: {
    id: string;
    date: string;
    company: string | null;
    value: number | null;
    display: string | null;
    label: string | null;
    quote: string | null;
    src: string | null;
    video: string | null;
    channel: string | null;
    cite: number | null;
    scope: string | null;
    scopeBasis: string | null;
    scopeConfidence: string | null;
    population: string | null;
    valueKind: string | null;
    flags: string[] | null;
    roles: Array<{ role: string; count: number; verbatim: string }> | null;
  };
  at: number | null;
  view: { from: number; to: number };
  pad: number;
  cues: Array<{ start: number; end: number; text: string; cited: boolean }>;
  source: { title: string | null; uploadDate: string | null; duration: number | null; webpageUrl: string | null } | null;
  noCues: boolean;
  windows: Array<{ name: string; from: number; to: number }>;
  gaps: string[];
  fired: Array<{ rule: string; text: string }>;
  prev: string | null;
  next: string | null;
  token: string | null;
};

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

/** What each vocabulary term means, so nobody has to guess at the radio. */
const HELP: Record<string, string> = {
  media: "The Quartering — the media team",
  coffee: "Coffee Brand Coffee",
  publica: "The Publica",
  all: "spans everything he owns",
  clear: "the quote itself settles it",
  read: "the context settles it; the quote alone would not",
  unresolved: "genuinely ambiguous — feeds NEITHER total",
  uttered: "he says this number, as one number, for this scope",
  derived: "our arithmetic over his per-company claims",
  synthetic: "our midpoint of a range he gave",
  employees: "“employees”",
  "full-time": "“full-time”",
  salaried: "“salaried”",
  contractor: "“contractors”",
  "1099": "“1099”",
  people: "“people”",
};

function Choice({
  label,
  options,
  value,
  onChange,
  name,
}: {
  label: string;
  options: readonly string[];
  value: string | null;
  onChange: (v: string) => void;
  name: string;
}) {
  return (
    <div>
      <div className="micro mb-1">{label}</div>
      <div className="flex flex-wrap gap-1">
        {options.map((o) => (
          <button
            key={o}
            type="button"
            data-testid={`${name}-${o}`}
            aria-pressed={value === o}
            title={HELP[o] ?? o}
            onClick={() => onChange(o)}
            className={
              "rounded border px-2 py-1 text-[11px] " +
              (value === o
                ? "border-[var(--color-sel)] bg-[var(--color-sel)]/15 text-[var(--color-sel)]"
                : "border-[var(--color-line)] text-[var(--color-dim)] hover:text-[var(--color-fg)]")
            }
          >
            {o}
          </button>
        ))}
      </div>
      {value && HELP[value] ? (
        <div className="mt-1 text-[10px] text-[var(--color-dim)]">{HELP[value]}</div>
      ) : null}
    </div>
  );
}

type Role = { role: string; count: number; verbatim: string };

const rolesToText = (roles: ClaimBenchData["claim"]["roles"]) =>
  (roles ?? []).map((r) => `${r.count} | ${r.role} | ${r.verbatim}`).join("\n");

/**
 * `2 | video editor | two video editors` per line.
 *
 * `verbatim` is required and is the point of the field: the count and the role
 * name are OUR reading, and without his own words beside them nobody can check
 * the reading against the audio.
 */
function parseRoles(text: string): { ok: true; list: Role[] } | { ok: false; error: string } {
  const lines = text.split("\n").map((l) => l.trim()).filter(Boolean);
  const list: Role[] = [];
  for (const [i, line] of lines.entries()) {
    const parts = line.split("|").map((s) => s.trim());
    if (parts.length !== 3) return { ok: false, error: `line ${i + 1} needs count | role | his words` };
    const count = Number(parts[0]);
    if (!Number.isFinite(count) || count < 0) return { ok: false, error: `line ${i + 1}: count is not a number` };
    if (!parts[1]) return { ok: false, error: `line ${i + 1}: no role` };
    if (!parts[2]) return { ok: false, error: `line ${i + 1}: quote his words for it` };
    list.push({ count, role: parts[1], verbatim: parts[2] });
  }
  return { ok: true, list };
}

export default function ClaimBench({ data }: { data: ClaimBenchData }) {
  const { claim, at, view, cues } = data;
  const video = useRef<HTMLVideoElement>(null);

  const [scope, setScope] = useState(claim.scope);
  const [confidence, setConfidence] = useState(claim.scopeConfidence);
  const [population, setPopulation] = useState(claim.population);
  const [valueKind, setValueKind] = useState(claim.valueKind);
  const [basis, setBasis] = useState(claim.scopeBasis ?? "");
  const [flagText, setFlagText] = useState((claim.flags ?? []).join("\n"));
  // The roster, as one line per role: `2 | video editor | two video editors`.
  // A textarea rather than a row of inputs because most claims have none and
  // the handful that do are a two-line list -- a repeater widget would be more
  // chrome than the field it edits.
  const [roleText, setRoleText] = useState(rolesToText(claim.roles));
  const [token, setToken] = useState(data.token ?? "");
  const [busy, setBusy] = useState<string | null>(null);
  const [note, setNote] = useState<string | null>(null);
  const [fetching, setFetching] = useState(false);

  // The widest cached window containing the cite. When there is one the moment
  // is playable with no download at all -- which is most of them once a build
  // has run, because the build already over-fetched around every clip.
  const cached = data.windows[0] ?? null;

  const roles = useMemo(() => parseRoles(roleText), [roleText]);
  const rosterPreview = roles.ok ? rosterLine(roles.list) : null;

  const dirty =
    roleText !== rolesToText(claim.roles) ||
    scope !== claim.scope ||
    confidence !== claim.scopeConfidence ||
    population !== claim.population ||
    valueKind !== claim.valueKind ||
    basis !== (claim.scopeBasis ?? "") ||
    flagText !== (claim.flags ?? []).join("\n");

  const complete = !!(scope && confidence && population && valueKind && basis.trim());

  // Start a few seconds EARLY. Landing exactly on the cited word is landing
  // mid-sentence, which is the position this page exists to get out of.
  const seekTo = useCallback(
    (t: number) => {
      const el = video.current;
      if (!el || !cached) return;
      el.currentTime = Math.max(0, t - cached.from);
      void el.play().catch(() => {});
    },
    [cached],
  );

  useEffect(() => {
    if (at != null && cached) {
      const el = video.current;
      if (el) el.currentTime = Math.max(0, at - cached.from - 4);
    }
  }, [at, cached]);

  const save = useCallback(async () => {
    setBusy("saving…");
    setNote(null);
    const r = await fetch("/api/report/claim", {
      method: "PUT",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        project: data.project,
        claim: claim.id,
        token,
        scope,
        scopeConfidence: confidence,
        population,
        valueKind,
        scopeBasis: basis,
        flags: flagText.split("\n").map((s) => s.trim()).filter(Boolean),
        roles: roles.ok ? roles.list : undefined,
      }),
    });
    const j = (await r.json()) as Record<string, unknown>;
    setBusy(null);
    if (!r.ok) {
      setNote(
        j.stale
          ? "the manifest changed since you opened this — reload before saving, or your ruling would overwrite whatever was written"
          : `could not save: ${String(j.error ?? r.status)}`,
      );
      return;
    }
    setToken(String(j.token ?? ""));
    const gaps = (j.gaps as string[]) ?? [];
    setNote(gaps.length ? `saved — still missing ${gaps.join(", ")}` : "saved — adjudicated");
  }, [data.project, claim.id, token, scope, confidence, population, valueKind, basis, flagText, roles]);

  const fetchWindow = useCallback(async () => {
    setFetching(true);
    setNote(null);
    const r = await fetch("/api/report/fetch", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({ project: data.project, clip: claim.id, pad: data.pad + 5 }),
    });
    const j = (await r.json()) as Record<string, unknown>;
    if (!r.ok) {
      setFetching(false);
      setNote(`could not fetch: ${String(j.error ?? r.status)}`);
      return;
    }
    // The job runs on the server; poll it rather than guess how long it takes.
    const job = j.job as { id: string } | undefined;
    for (let i = 0; i < 300 && job; i += 1) {
      await new Promise((res) => setTimeout(res, 1000));
      const s = await fetch(`/api/report/fetch?job=${job.id}`, { cache: "no-store" });
      const sj = (await s.json()) as { job?: { state?: string } };
      if (!sj.job || sj.job.state === "done" || sj.job.state === "failed") break;
    }
    setFetching(false);
    window.location.reload();
  }, [data.project, claim.id, data.pad]);

  const paragraph = useMemo(
    () =>
      cues.map((c, i) => (
        <span
          key={`${c.start}-${i}`}
          data-cited={c.cited ? "1" : undefined}
          onClick={() => seekTo(c.start)}
          className={
            "cursor-pointer " +
            (c.cited
              ? "bg-[var(--color-sel)]/25 text-[var(--color-fg)]"
              : "text-[var(--color-dim)] hover:text-[var(--color-fg)]")
          }
        >
          {c.text}{" "}
        </span>
      )),
    [cues, seekTo],
  );

  return (
    <div className="space-y-3" data-claim={claim.id}>
      <div className="flex items-baseline gap-3">
        <div className="font-mono text-[13px] text-[var(--color-fg)]">{claim.id}</div>
        <div className="text-[12px] text-[var(--color-dim)]">{claim.date}</div>
        <div className="text-[13px] text-[var(--color-meter)]">
          {claim.display ?? (claim.value == null ? "—" : String(claim.value))}
        </div>
        <div className="flex-1" />
        {data.prev ? (
          <Link className="text-[11px] text-[var(--color-sel)] hover:underline" href={`/browse/${data.project}/claim/${data.prev}`}>
            ← {data.prev}
          </Link>
        ) : null}
        {data.next ? (
          <Link className="text-[11px] text-[var(--color-sel)] hover:underline" href={`/browse/${data.project}/claim/${data.next}`}>
            {data.next} →
          </Link>
        ) : null}
      </div>

      <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_360px]">
        <div className="space-y-3">
          {cached ? (
            <video
              ref={video}
              data-testid="claim-video"
              src={`/api/report/raw?project=${encodeURIComponent(data.project)}&claim=${encodeURIComponent(claim.id)}&file=${encodeURIComponent(cached.name)}`}
              className="aspect-video w-full rounded border border-[var(--color-line)] bg-black"
              preload="metadata"
              controls
            />
          ) : (
            <div className="flex aspect-video w-full flex-col items-center justify-center gap-2 rounded border border-dashed border-[var(--color-line)] text-[12px] text-[var(--color-dim)]">
              <div>no cached window covers this moment</div>
              <button
                type="button"
                data-testid="claim-fetch"
                disabled={fetching || !claim.video}
                onClick={() => void fetchWindow()}
                className="rounded border border-[var(--color-line)] px-2 py-1 text-[11px] hover:text-[var(--color-fg)] disabled:opacity-40"
              >
                {fetching ? "fetching…" : `fetch ±${data.pad}s`}
              </button>
            </div>
          )}

          <div className="rounded border border-[var(--color-line)] p-3">
            <div className="micro mb-2">
              ±{data.pad}s of context · {hms(view.from)}–{hms(view.to)}
              {at != null ? ` · cited at ${hms(at)}` : ""}
            </div>
            {data.noCues ? (
              <div className="text-[12px] text-[var(--color-dim)]">
                no transcript.cues.json for {claim.channel}/{claim.video} — on Rumble, check the
                directory is the URL slug and not the site id
              </div>
            ) : (
              <p
                data-testid="claim-context"
                className="max-h-[320px] overflow-y-auto text-[12px] leading-relaxed"
              >
                {paragraph}
              </p>
            )}
          </div>

          <div className="rounded border border-[var(--color-line)] p-3 text-[12px]">
            <div className="micro mb-1">as recorded</div>
            <div className="text-[var(--color-fg)]">“{claim.quote}”</div>
            <div className="mt-1 text-[11px] text-[var(--color-dim)]">
              {claim.label} · {claim.src}
            </div>
          </div>
        </div>

        <div className="space-y-3 text-[12px]">
          {data.gaps.length ? (
            <div className="rounded border border-[var(--color-warn,#E8A33F)] p-2 text-[11px] text-[var(--color-dim)]">
              unadjudicated — missing {data.gaps.join(", ")}
            </div>
          ) : (
            <div className="rounded border border-[var(--color-line)] p-2 text-[11px] text-[var(--color-dim)]">
              adjudicated
            </div>
          )}

          <Choice name="scope" label="scope" options={SCOPES} value={scope} onChange={setScope} />
          <Choice
            name="confidence"
            label="scope confidence"
            options={SCOPE_CONFIDENCE}
            value={confidence}
            onChange={setConfidence}
          />
          <Choice
            name="population"
            label="population"
            options={POPULATIONS}
            value={population}
            onChange={setPopulation}
          />
          <Choice
            name="valuekind"
            label="value kind"
            options={VALUE_KINDS}
            value={valueKind}
            onChange={setValueKind}
          />

          <div>
            <div className="micro mb-1">scope basis — the phrase that settles it</div>
            <textarea
              data-testid="claim-basis"
              value={basis}
              onChange={(e) => setBasis(e.target.value)}
              rows={3}
              className="w-full rounded border border-[var(--color-line)] bg-transparent p-2 text-[11px]"
              placeholder="quote the words from the context that decide the scope"
            />
          </div>

          <div>
            <div className="micro mb-1">
              roster — one role per line: <span className="font-mono">count | role | his words</span>
            </div>
            <textarea
              data-testid="claim-roles"
              value={roleText}
              onChange={(e) => setRoleText(e.target.value)}
              rows={3}
              className="w-full rounded border border-[var(--color-line)] bg-transparent p-2 text-[11px]"
              placeholder="2 | video editor | two video editors"
            />
            <div className="mt-1 text-[10px] text-[var(--color-dim)]">
              {roleText.trim() === ""
                ? "only for a claim where he ENUMERATES who works for him"
                : roles.ok
                  ? `reads as “${rosterPreview}”`
                  : `not saveable yet — ${roles.error}`}
            </div>
          </div>

          <div>
            <div className="micro mb-1">flags — one per line, free text</div>
            <textarea
              data-testid="claim-flags"
              value={flagText}
              onChange={(e) => setFlagText(e.target.value)}
              rows={2}
              className="w-full rounded border border-[var(--color-line)] bg-transparent p-2 text-[11px]"
              placeholder="e.g. reading someone else's tweet aloud"
            />
          </div>

          {data.fired.length ? (
            <div className="rounded border border-[var(--color-line)] p-2">
              <div className="micro mb-1">predicates firing on this claim</div>
              <ul className="space-y-1 text-[11px] text-[var(--color-dim)]">
                {data.fired.map((f, i) => (
                  <li key={i}>
                    <span className="font-mono text-[10px] text-[var(--color-meter)]">{f.rule}</span>{" "}
                    {f.text}
                  </li>
                ))}
              </ul>
            </div>
          ) : null}

          <div className="flex items-center gap-2">
            <button
              type="button"
              data-testid="claim-save"
              disabled={!dirty || !!busy || !roles.ok}
              onClick={() => void save()}
              className="rounded border border-[var(--color-sel)] px-3 py-1 text-[11px] text-[var(--color-sel)] disabled:opacity-40"
            >
              {busy ?? "save ruling"}
            </button>
            {!complete ? (
              <span className="text-[10px] text-[var(--color-dim)]">all six fields, or it stays blocking</span>
            ) : null}
          </div>
          {note ? <div data-testid="claim-note" className="text-[11px] text-[var(--color-dim)]">{note}</div> : null}
        </div>
      </div>
    </div>
  );
}