"use client";

import { useState } from "react";
import Link from "next/link";
import NoteField from "@/components/NoteField";
import type { NoteMap } from "@/lib/notes";
import type { ThumbView } from "@/lib/thumbs";

// The cover art, and what accepting one would spend.
//
// The gimmick this enforces is that NO FACE APPEARS ON TWO COVERS, and the
// currency is source episodes: four per cover, and once spent they are gone
// from the pool the next cover draws from. So the bench shows the four corner
// videos of every candidate, each linking to the exact moment in the archive,
// and says up front which ones a proposal would spend.
//
// Accepting runs song/accept-thumb.mjs -- see the route for why the app reads
// these files and never writes them.

const mediaUrl = (label: string) => `/api/mix/media?path=${encodeURIComponent(label)}`;

export default function ThumbBench({
  song,
  view,
  notes,
}: {
  song: string;
  view: ThumbView;
  notes: NoteMap;
}) {
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);
  const [log, setLog] = useState<string[]>([]);

  if (!view.candidates.length && !view.accepted) return null;

  const accept = async (name: string, file: string) => {
    setBusy(name);
    setError(null);
    setLog([]);
    try {
      const res = await fetch("/api/browse/thumbs", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ song, name, file }),
        cache: "no-store",
      });
      const j = (await res.json()) as { error?: string; job?: { id: string } };
      if (!res.ok || !j.job) throw new Error(j.error || `HTTP ${res.status}`);

      // Poll the same way every other job in this app is polled. The script
      // finishes in milliseconds, but its OUTPUT is the point -- it prints the
      // videos the cover claims and re-verifies the rule.
      for (let i = 0; i < 40; i += 1) {
        await new Promise((r) => setTimeout(r, 150));
        const s = await fetch(`/api/browse/build?job=${encodeURIComponent(j.job.id)}`, {
          cache: "no-store",
        });
        const view2 = (await s.json()) as { state: string; log: string[]; error: string | null };
        setLog(view2.log ?? []);
        if (view2.state === "done") break;
        if (view2.state === "failed") throw new Error(view2.error || "accept-thumb failed");
      }
      // A reload rather than router.refresh(): thumbFor() memoises the accepted
      // manifest for a few seconds, so an immediate re-render can still draw
      // the old cover.
      setTimeout(() => window.location.reload(), 600);
    } catch (e) {
      setError(e instanceof Error ? e.message : String(e));
    } finally {
      setBusy(null);
    }
  };

  return (
    <section className="rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-3">
      <div className="flex flex-wrap items-center gap-2">
        <span className="micro">cover art</span>
        <span
          className={`text-[11px] ${view.check.ok ? "text-[var(--color-meter)]" : "text-[var(--color-bad)]"}`}
          data-face-rule={view.check.ok ? "ok" : "broken"}
        >
          {view.check.ok
            ? `unique-face rule holds — ${view.check.covers} covers, ${view.check.videos} distinct source videos`
            : `RULE BROKEN: ${view.check.dupes.map((d) => `${d.video} on ${d.covers.join(" + ")}`).join("; ")}`}
        </span>
      </div>

      {!view.accepted && (
        <p className="mt-1 text-[11px] text-[var(--color-dirty)]" data-thumb-accepted="none">
          nothing accepted for this song — the index is drawing a frame by filename convention
        </p>
      )}

      <ul className="mt-2 space-y-2">
        {view.candidates.map((c) => (
          <li
            key={c.name}
            data-thumb={c.name}
            data-thumb-state={c.accepted ? "accepted" : c.clash ? "clash" : "candidate"}
            className={`rounded border p-2 ${
              c.accepted ? "border-[var(--color-sel)]" : "border-[var(--color-line)]"
            }`}
          >
            <div className="flex flex-wrap items-start gap-3">
              {c.label ? (
                /* eslint-disable-next-line @next/next/no-img-element */
                <img
                  src={mediaUrl(c.label)}
                  alt=""
                  width={160}
                  height={90}
                  className="w-40 shrink-0 rounded bg-[var(--color-panel-2)] object-cover"
                />
              ) : (
                <div className="flex h-[90px] w-40 shrink-0 items-center justify-center rounded border border-dashed border-[var(--color-line)] text-[10px] text-[var(--color-dim)]">
                  outside the roots
                </div>
              )}
              <div className="min-w-0 flex-1 space-y-1">
                <div className="flex flex-wrap items-baseline gap-2">
                  <span className="font-mono text-[12px] text-[var(--color-text)]">{c.name}</span>
                  {c.accepted && <span className="micro text-[var(--color-sel)]">accepted</span>}
                  <span className="num truncate text-[11px] text-[var(--color-dim)]">{c.file}</span>
                </div>

                {/* Which four episodes this cover spends. The clip: note target
                    is the one the arrangement already uses, so a note written
                    here shows up beside the same clip everywhere else. */}
                <ul className="flex flex-wrap items-baseline gap-x-3 gap-y-0.5">
                  {c.corners.map((v) => (
                    <li key={v.clipId} className="num text-[11px]">
                      {v.link ? (
                        <a
                          href={v.link}
                          target="_blank"
                          rel="noreferrer"
                          className="text-[var(--color-sel)] underline"
                        >
                          {v.video}
                        </a>
                      ) : (
                        <span className="text-[var(--color-dim)]">{v.video}</span>
                      )}
                      <span className="ml-1 text-[var(--color-dim)]">@{v.srcStart.toFixed(1)}</span>
                    </li>
                  ))}
                  {/* THE WAY IN to the face judger. It is here rather than in
                      the nav -- AppNav is at nine items and a tenth wraps the
                      header -- and here is also where the question comes up: a
                      person looking at these four faces is the person who
                      notices one of them is a strip of YouTube chrome. */}
                  {c.corners.length > 0 && (
                    <li>
                      <Link
                        href={`/browse/faces?cover=${encodeURIComponent(c.name)}`}
                        data-judge-faces={c.name}
                        className="text-[11px] text-[var(--color-sel)] hover:underline"
                      >
                        judge {c.corners.length === 1 ? "this face" : `these ${c.corners.length} faces`} →
                      </Link>
                    </li>
                  )}
                </ul>

                {c.clash ? (
                  <p className="text-[11px] text-[var(--color-bad)]">
                    accepting this would break the rule — {c.clash}
                  </p>
                ) : (
                  !c.accepted && (
                    <button
                      type="button"
                      disabled={busy !== null}
                      onClick={() => void accept(c.name, c.file)}
                      data-accept={c.name}
                      className="rounded border border-[var(--color-sel)] px-2 py-0.5 text-[11px] text-[var(--color-sel)] disabled:opacity-40"
                    >
                      {busy === c.name ? "accepting…" : `accept — spends ${c.corners.length} videos`}
                    </button>
                  )
                )}

                <NoteField
                  song={song}
                  target={`thumb:${c.name}`}
                  initial={notes[`thumb:${c.name}`] ?? null}
                  label="notes on this cover"
                  rows={2}
                />
              </div>
            </div>
          </li>
        ))}
      </ul>

      {log.length > 0 && (
        <pre className="mt-2 max-h-40 overflow-auto rounded bg-[var(--color-panel-2)] p-2 text-[10px] text-[var(--color-dim)]">
          {log.join("\n")}
        </pre>
      )}
      {error && <p className="mt-2 text-[11px] text-[var(--color-bad)]">{error}</p>}
    </section>
  );
}