"use client";

import { useCallback, useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import {
  SHORTLIST_EVENT,
  type Shortlist,
  type ShortlistSummary,
} from "@/lib/shortlist-types";

// The lists, and the active one's order.
//
// ORDER IS THE EDIT, so this is where it gets decided -- and every move sends a
// WHOLE PERMUTATION rather than "move item 3 up". Atomic, idempotent, and a
// disagreement about what the list holds comes back as a 400 instead of being
// reconciled into an order nobody asked for.

const mmss = (t: number) => `${Math.floor(t / 60)}:${String(Math.floor(t % 60)).padStart(2, "0")}`;

export default function ShortlistBar({
  lists,
  active,
  qs,
}: {
  lists: ShortlistSummary[];
  active: Shortlist | null;
  /** The page's current query string, so a list chip keeps the search. */
  qs: string;
}) {
  const router = useRouter();
  const [all, setAll] = useState(lists);
  const [list, setList] = useState(active);
  const [name, setName] = useState("");
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => setAll(lists), [lists]);
  useEffect(() => setList(active), [active]);

  // The rows star; this shows what was starred. One event, carrying the whole
  // list the server just wrote.
  useEffect(() => {
    const onChange = (e: Event) => {
      const l = (e as CustomEvent<Shortlist | null>).detail;
      if (!l) return;
      setList((cur) => (cur && cur.slug === l.slug ? l : cur));
      setAll((cur) =>
        cur.map((s) =>
          s.slug === l.slug ? { ...s, picks: l.picks.length, updated: l.updated } : s,
        ),
      );
    };
    window.addEventListener(SHORTLIST_EVENT, onChange);
    return () => window.removeEventListener(SHORTLIST_EVENT, onChange);
  }, []);

  const post = useCallback(async (body: unknown): Promise<Shortlist | null> => {
    setBusy(true);
    setError(null);
    try {
      const res = await fetch("/api/shortlist", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(body),
        cache: "no-store",
      });
      const j = (await res.json()) as { list?: Shortlist; error?: string };
      if (!res.ok) {
        setError(j.error ?? `failed (${res.status})`);
        return null;
      }
      if (j.list) {
        setList(j.list);
        window.dispatchEvent(new CustomEvent(SHORTLIST_EVENT, { detail: j.list }));
      }
      return j.list ?? null;
    } catch {
      setError("could not reach the shortlist");
      return null;
    } finally {
      setBusy(false);
    }
  }, []);

  const href = (slug: string | null) => {
    const p = new URLSearchParams(qs);
    if (slug) p.set("list", slug);
    else p.delete("list");
    const s = p.toString();
    return `/browse/find${s ? `?${s}` : ""}`;
  };

  const move = async (i: number, d: number) => {
    if (!list) return;
    const ids = list.picks.map((p) => p.id);
    const j = i + d;
    if (j < 0 || j >= ids.length) return;
    [ids[i], ids[j]] = [ids[j], ids[i]];
    await post({ op: "reorder", list: list.slug, ids });
  };

  return (
    <div className="mb-3 rounded border border-[var(--color-line)] bg-[var(--color-panel)] px-3 py-2" data-shortlist-bar>
      <div className="flex flex-wrap items-center gap-1.5">
        <span className="micro">shortlist</span>
        {all.length === 0 && <span className="text-[12px] text-[var(--color-dim)]">none yet</span>}
        {all.map((s) => (
          <a
            key={s.slug}
            href={href(s.slug)}
            data-list-chip={s.slug}
            aria-current={list?.slug === s.slug ? "true" : undefined}
            className={`num rounded border px-1.5 py-0.5 font-mono text-[11px] ${
              list?.slug === s.slug
                ? "border-[var(--color-sel)] text-[var(--color-sel)]"
                : "border-[var(--color-line)] text-[var(--color-dim)] hover:text-[var(--color-text)]"
            }`}
          >
            {s.name} {s.picks}
          </a>
        ))}

        <form
          className="ml-2 flex items-center gap-1"
          onSubmit={async (e) => {
            e.preventDefault();
            if (!name.trim()) return;
            const made = await post({ op: "create", name });
            if (made) {
              setName("");
              router.push(href(made.slug));
            }
          }}
        >
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            onKeyDown={(e) => e.stopPropagation()}
            placeholder="new list"
            aria-label="new shortlist name"
            className="w-36 rounded border border-[var(--color-line)] bg-[var(--color-ink)] px-1.5 py-0.5 font-mono text-[11px] outline-none focus:border-[var(--color-sel)]"
          />
          <button
            type="submit"
            disabled={busy || !name.trim()}
            className="rounded border border-[var(--color-line)] px-1.5 py-0.5 font-mono text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)] disabled:opacity-40"
          >
            create
          </button>
        </form>

        {list && (
          <span className="ml-auto flex items-center gap-2">
            <a
              href={`/api/shortlist?list=${encodeURIComponent(list.slug)}&format=json`}
              className="font-mono text-[11px] text-[var(--color-sel)] hover:underline"
            >
              export json
            </a>
            <a
              href={`/api/shortlist?list=${encodeURIComponent(list.slug)}&format=md`}
              className="font-mono text-[11px] text-[var(--color-sel)] hover:underline"
            >
              markdown
            </a>
            <a href={href(null)} className="micro hover:text-[var(--color-text)]">
              close
            </a>
          </span>
        )}
      </div>

      {error && (
        <p className="mt-1 text-[11px] text-[var(--color-bad)]" role="status">
          {error}
        </p>
      )}

      {!list && all.length > 0 && (
        <p className="mt-1 text-[11px] text-[var(--color-dim)]">
          Pick one to star into it — <kbd>s</kbd> on a row.
        </p>
      )}

      {list && (
        <ol className="mt-2 space-y-1" data-picks={list.slug}>
          {list.picks.length === 0 && (
            <li className="text-[12px] text-[var(--color-dim)]">
              Empty. <kbd>s</kbd> stars the focused row into it; the order you build here is the
              edit.
            </li>
          )}
          {list.picks.map((p, i) => (
            <li
              key={p.id}
              data-pick={p.id}
              data-pos={i}
              className="flex flex-wrap items-baseline gap-2 rounded bg-[var(--color-panel-2)] px-2 py-1"
            >
              <span className="num micro w-6">{i + 1}</span>
              <button
                type="button"
                onClick={() => void move(i, -1)}
                disabled={busy || i === 0}
                aria-label={`move ${p.text} up`}
                className="font-mono text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)] disabled:opacity-30"
              >
                ↑
              </button>
              <button
                type="button"
                onClick={() => void move(i, 1)}
                disabled={busy || i === list.picks.length - 1}
                aria-label={`move ${p.text} down`}
                className="font-mono text-[11px] text-[var(--color-dim)] hover:text-[var(--color-text)] disabled:opacity-30"
              >
                ↓
              </button>
              <span className="font-mono text-[12px] text-[var(--color-text)]">{p.text}</span>
              <span className="num micro">
                {p.video} {mmss(p.start)}
              </span>
              {p.suspect && (
                <span className="text-[10px] text-[var(--color-dirty)]">flagged source</span>
              )}
              <input
                defaultValue={p.note ?? ""}
                placeholder="why this one"
                aria-label={`note on ${p.text}`}
                onKeyDown={(e) => e.stopPropagation()}
                onBlur={(e) => {
                  if ((e.target.value || "") === (p.note ?? "")) return;
                  void post({ op: "note", list: list.slug, id: p.id, note: e.target.value });
                }}
                className="min-w-[8rem] flex-1 rounded border border-transparent bg-transparent px-1 text-[11px] text-[var(--color-dim)] outline-none focus:border-[var(--color-line)] focus:text-[var(--color-text)]"
              />
              <button
                type="button"
                onClick={() => void post({ op: "remove", list: list.slug, id: p.id })}
                disabled={busy}
                aria-label={`remove ${p.text}`}
                className="font-mono text-[11px] text-[var(--color-dim)] hover:text-[var(--color-bad)]"
              >
                ✕
              </button>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}