"use client";

import { useRouter } from "next/navigation";
import { useCallback, useEffect, useRef, useState } from "react";
import { announceNotesChanged, wroteNotes } from "@/components/notes/NotesProvider";
import { buttonVariants } from "@/components/ui/button";
import { MANIFEST_CHANGED, announceManifestChanged, refusalOf, timelineOp } from "./timelineApi";

// The parts of the cut that are lists, edited in place: each teaser's lines
// and timing, the posts, and the fact-check's labels and colours. Every save
// is one structural write (POST /api/report/timeline): checked by the build's
// own validators, snapshotted first, and -- on a generated manifest -- noted
// for the agent.

type Teaser = { at: number; id: string; lines: unknown[]; beat: number | null; dip: { fade: number; black: number } | null; tail: string | null; tailWait: number | null };
type Post = Record<string, unknown> & { id: string };
type Verdict = { label: string; color: string };
type Doc = {
  teasers: Teaser[];
  posts: Post[];
  deckOn: boolean;
  factcheck: { verdicts?: Record<string, Partial<Verdict>>; stamp?: Record<string, unknown>; tally?: Record<string, unknown> } | null;
  factcheckResolved: { verdicts: Record<string, Verdict>; stamp: { seconds: number; position: string }; tally: { show: boolean; position: string } };
  verdicts: string[];
  token: string | null;
};

const input =
  "rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1.5 py-0.5 text-[12px] text-[var(--color-text)] outline-none focus:border-[var(--color-sel)]";
const num = (v: string) => (v.trim() === "" ? null : Number(v));

export default function StructureEditors({ project }: { project: string }) {
  const router = useRouter();
  const [doc, setDoc] = useState<Doc | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  const load = useCallback(async () => {
    const r = await fetch(`/api/report/timeline?project=${encodeURIComponent(project)}`, { cache: "no-store" });
    const j = await r.json();
    if (r.ok) setDoc(j as Doc);
    else setError(String(j.error ?? r.status));
  }, [project]);

  useEffect(() => {
    void load();
    const on = (e: Event) => {
      if ((e as CustomEvent).detail?.project === project) void load();
    };
    window.addEventListener(MANIFEST_CHANGED, on);
    return () => window.removeEventListener(MANIFEST_CHANGED, on);
  }, [load, project]);

  const run = async (op: string, args: Record<string, unknown>) => {
    setBusy(true);
    setError(null);
    const res = await timelineOp(project, doc?.token ?? null, op, args);
    setBusy(false);
    if (!res.ok) {
      setError(refusalOf(res));
      if (res.json.stale) await load();
      return false;
    }
    // Adopt the new token now: the reload the announcement starts may land
    // after the next save is pressed.
    if (typeof res.json.token === "string") setDoc((d) => (d ? { ...d, token: res.json.token as string } : d));
    announceManifestChanged(project);
    if (wroteNotes(res.json)) announceNotesChanged(project);
    router.refresh();
    return true;
  };

  if (!doc) return error ? <p className="text-[11px] text-[var(--color-bad)]">{error}</p> : null;
  return (
    <div data-testid="structure-editors" className="space-y-3">
      {error && (
        <p data-testid="structure-error" className="text-[11px] text-[var(--color-bad)]">
          {error}
        </p>
      )}
      {doc.teasers.map((t) => (
        <TeaserEditor key={`${t.id}@${t.at}`} teaser={t} busy={busy} save={(patch) => run("teaser", { id: t.id, at: t.at, patch })} />
      ))}
      <PostsEditor posts={doc.posts} busy={busy} save={(post) => run("post", { post })} remove={(id) => run("post-remove", { id })} />
      {doc.deckOn && <FactcheckEditor doc={doc} busy={busy} save={(factcheck) => run("factcheck", { factcheck })} />}
    </div>
  );
}

function TeaserEditor({ teaser: t, busy, save }: { teaser: Teaser; busy: boolean; save: (patch: Record<string, unknown>) => Promise<boolean> }) {
  // Plain lines edit as one per row; a teaser whose lines carry settings
  // (break, role, replace…) edits as the JSON it is, so nothing is dropped.
  const plain = t.lines.every((l) => typeof l === "string");
  const linesText = () => (plain ? (t.lines as string[]).join("\n") : JSON.stringify(t.lines, null, 2));
  const [lines, setLines] = useState(linesText);
  const [beat, setBeat] = useState(t.beat == null ? "" : String(t.beat));
  const [tail, setTail] = useState(t.tail ?? "");
  const [tailWait, setTailWait] = useState(t.tailWait == null ? "" : String(t.tailWait));
  const [fade, setFade] = useState(t.dip ? String(t.dip.fade) : "");
  const [black, setBlack] = useState(t.dip ? String(t.dip.black) : "");
  const [local, setLocal] = useState<string | null>(null);
  // Unsaved edits win over a reload: the re-read every structural write sets
  // off can land after somebody has started typing again.
  const dirty = useRef(false);
  const edit = <T,>(set: (v: T) => void) => (v: T) => {
    dirty.current = true;
    set(v);
  };
  useEffect(() => {
    if (dirty.current) return;
    setLines(linesText());
    setBeat(t.beat == null ? "" : String(t.beat));
    setTail(t.tail ?? "");
    setTailWait(t.tailWait == null ? "" : String(t.tailWait));
    setFade(t.dip ? String(t.dip.fade) : "");
    setBlack(t.dip ? String(t.dip.black) : "");
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [t]);

  const submit = () => {
    setLocal(null);
    let parsed: unknown[];
    try {
      parsed = plain ? lines.split("\n").map((l) => l.trim()).filter(Boolean) : JSON.parse(lines);
    } catch {
      setLocal("the lines are not valid JSON");
      return;
    }
    const dip = fade.trim() || black.trim() ? { fade: num(fade), black: num(black) } : null;
    void save({ lines: parsed, beat: num(beat), tail: tail.trim() || null, tailWait: num(tailWait), dip }).then((ok) => {
      if (ok) dirty.current = false;
    });
  };

  return (
    <div data-teaser-editor={t.id} className="space-y-1 rounded border border-[var(--color-line)] p-2">
      <div className="micro">teaser · {t.id}</div>
      <textarea data-testid={`teaser-lines-${t.id}`} rows={Math.min(8, Math.max(2, lines.split("\n").length))} value={lines} onChange={(e) => edit(setLines)(e.target.value)} className={`${input} w-full font-mono`} />
      <div className="flex flex-wrap items-center gap-2 text-[11px] text-[var(--color-dim)]">
        <label>beat <input data-testid={`teaser-beat-${t.id}`} value={beat} onChange={(e) => edit(setBeat)(e.target.value)} className={`${input} w-14`} /></label>
        <label>tail <input value={tail} onChange={(e) => edit(setTail)(e.target.value)} className={`${input} w-16`} /></label>
        <label>tail wait <input value={tailWait} onChange={(e) => edit(setTailWait)(e.target.value)} className={`${input} w-14`} /></label>
        <label>dip fade <input value={fade} onChange={(e) => edit(setFade)(e.target.value)} className={`${input} w-14`} /></label>
        <label>black <input value={black} onChange={(e) => edit(setBlack)(e.target.value)} className={`${input} w-14`} /></label>
        <button type="button" data-testid={`teaser-save-${t.id}`} disabled={busy} onClick={submit} className={buttonVariants({ variant: "primary", size: "sm" })}>
          Save teaser
        </button>
        {local && <span className="text-[var(--color-bad)]">{local}</span>}
      </div>
    </div>
  );
}

const POST_FIELDS = ["platform", "author", "handle", "date", "url", "shot", "flag"] as const;

function PostsEditor({
  posts,
  busy,
  save,
  remove,
}: {
  posts: Post[];
  busy: boolean;
  save: (post: Post) => Promise<boolean>;
  remove: (id: string) => Promise<boolean>;
}) {
  const [adding, setAdding] = useState(false);
  return (
    <div data-testid="posts-editor" className="space-y-1">
      <div className="flex items-center gap-2">
        <span className="micro">posts — {posts.length}</span>
        <button type="button" data-testid="post-add" onClick={() => setAdding((a) => !a)} className="text-[11px] text-[var(--color-sel)] hover:underline">
          + post
        </button>
      </div>
      {adding && <PostRow post={{ id: "", platform: "x" }} fresh busy={busy} save={async (p) => (await save(p)) && (setAdding(false), true)} />}
      {posts.map((p) => (
        <PostRow key={p.id} post={p} busy={busy} save={save} remove={() => void remove(p.id)} />
      ))}
    </div>
  );
}

function PostRow({ post, fresh = false, busy, save, remove }: { post: Post; fresh?: boolean; busy: boolean; save: (p: Post) => Promise<boolean>; remove?: () => void }) {
  const [d, setD] = useState<Record<string, string>>(() => {
    const out: Record<string, string> = { id: post.id, text: String(post.text ?? "") };
    for (const k of POST_FIELDS) out[k] = post[k] == null ? "" : String(post[k]);
    return out;
  });
  const set = (k: string, v: string) => setD((x) => ({ ...x, [k]: v }));
  return (
    <div data-post-row={post.id || "new"} className="space-y-1 rounded border border-[var(--color-line)] p-2 text-[11px]">
      <div className="flex flex-wrap items-center gap-1.5 text-[var(--color-dim)]">
        {fresh ? (
          <label>id <input data-testid="post-id" value={d.id} onChange={(e) => set("id", e.target.value)} className={`${input} w-28 font-mono`} /></label>
        ) : (
          <span className="font-mono text-[var(--color-text)]">{post.id}</span>
        )}
        <select value={d.platform} onChange={(e) => set("platform", e.target.value)} className={`${input} text-[11px]`}>
          {["x", "bluesky", "web"].map((p) => (
            <option key={p}>{p}</option>
          ))}
        </select>
        {(["author", "handle", "date", "url", "shot", "flag"] as const).map((k) => (
          <label key={k}>
            {k} <input data-testid={`post-${k}`} value={d[k]} onChange={(e) => set(k, e.target.value)} className={`${input} ${k === "url" ? "w-56" : "w-28"}`} />
          </label>
        ))}
      </div>
      <textarea data-testid="post-text" rows={2} value={d.text} onChange={(e) => set("text", e.target.value)} className={`${input} w-full`} />
      <div className="flex gap-2">
        <button
          type="button"
          data-testid="post-save"
          disabled={busy}
          onClick={() => {
            const p: Post = { id: d.id.trim(), text: d.text };
            for (const k of POST_FIELDS) p[k] = d[k];
            void save(p);
          }}
          className={buttonVariants({ variant: "primary", size: "sm" })}
        >
          {fresh ? "Add post" : "Save post"}
        </button>
        {remove && (
          <button type="button" data-testid="post-remove" disabled={busy} onClick={remove} className={buttonVariants({ variant: "destructive", size: "sm" })}>
            Remove
          </button>
        )}
      </div>
    </div>
  );
}

function FactcheckEditor({ doc, busy, save }: { doc: Doc; busy: boolean; save: (f: Record<string, unknown> | null) => Promise<boolean> }) {
  const given = doc.factcheck ?? {};
  const [v, setV] = useState<Record<string, { label: string; color: string }>>(() =>
    Object.fromEntries(doc.verdicts.map((k) => [k, { label: String(given.verdicts?.[k]?.label ?? ""), color: String(given.verdicts?.[k]?.color ?? "") }])),
  );
  const [seconds, setSeconds] = useState(given.stamp?.seconds == null ? "" : String(given.stamp.seconds));
  const submit = () => {
    const verdicts: Record<string, Record<string, string>> = {};
    for (const [k, o] of Object.entries(v)) {
      const one: Record<string, string> = {};
      if (o.label.trim()) one.label = o.label.trim();
      if (o.color.trim()) one.color = o.color.trim();
      if (Object.keys(one).length) verdicts[k] = one;
    }
    // Only what differs from the defaults is written, as the deck's settings are.
    const out: Record<string, unknown> = { ...given };
    if (Object.keys(verdicts).length) out.verdicts = verdicts;
    else delete out.verdicts;
    const stamp = { ...(given.stamp ?? {}) } as Record<string, unknown>;
    if (seconds.trim()) stamp.seconds = Number(seconds);
    else delete stamp.seconds;
    if (Object.keys(stamp).length) out.stamp = stamp;
    else delete out.stamp;
    void save(Object.keys(out).length ? out : null);
  };
  return (
    <div data-testid="factcheck-editor" className="space-y-1 rounded border border-[var(--color-line)] p-2 text-[11px]">
      <div className="micro">fact-check labels</div>
      <div className="grid grid-cols-[max-content_1fr_max-content] items-center gap-x-2 gap-y-1">
        {doc.verdicts.map((k) => {
          const def = doc.factcheckResolved.verdicts[k];
          return (
            <div key={k} className="contents">
              <span className="font-mono text-[var(--color-dim)]">{k}</span>
              <input data-testid={`fc-label-${k}`} placeholder={def?.label} value={v[k]?.label ?? ""} onChange={(e) => setV((x) => ({ ...x, [k]: { ...x[k], label: e.target.value } }))} className={input} />
              <span className="flex items-center gap-1">
                <input data-testid={`fc-color-${k}`} placeholder={def?.color} value={v[k]?.color ?? ""} onChange={(e) => setV((x) => ({ ...x, [k]: { ...x[k], color: e.target.value } }))} className={`${input} w-20 font-mono`} />
                <span className="inline-block h-3 w-3 rounded" style={{ background: v[k]?.color || def?.color }} />
              </span>
            </div>
          );
        })}
      </div>
      <div className="flex items-center gap-2 text-[var(--color-dim)]">
        <label>stamp seconds <input value={seconds} placeholder={String(doc.factcheckResolved.stamp.seconds)} onChange={(e) => setSeconds(e.target.value)} className={`${input} w-14`} /></label>
        <button type="button" data-testid="fc-save" disabled={busy} onClick={submit} className={buttonVariants({ variant: "primary", size: "sm" })}>
          Save labels
        </button>
      </div>
    </div>
  );
}