"use client";

import { useEffect, useMemo, useRef, useState } from "react";

export type Vocab = { curated: string[]; compounds: string[]; custom: string[] };

type Props = {
  open: boolean;
  value: string;
  /** The ASR token, shown as the fallback when nothing has been chosen. */
  token: string;
  /** This clip's own neighbours, so the right compound is one keystroke. */
  neighbours: { before: string; after: string };
  vocab: Vocab;
  onPick: (word: string, custom: boolean) => void;
  onOpen: (open: boolean) => void;
};

type Group = { label: string; items: string[] };

export default function WordSelector({
  open,
  value,
  token,
  neighbours,
  vocab,
  onPick,
  onOpen,
}: Props) {
  const [q, setQ] = useState("");
  const [cursor, setCursor] = useState(0);
  const inputRef = useRef<HTMLInputElement | null>(null);

  useEffect(() => {
    if (open) {
      setQ("");
      setCursor(0);
      // Focus after paint, or the keystroke that opened the list types into the
      // deck's global handler instead of the box.
      requestAnimationFrame(() => inputRef.current?.focus());
    }
  }, [open]);

  // This clip's own neighbours, built into compounds. The last pass produced
  // "do uh", "to uh", "when uhh" and "uhh literally" as free text; every one of
  // those is a neighbour of the clip that was being judged.
  const fromClip = useMemo(() => {
    const base = (token || "uh").toLowerCase().replace(/[^a-z-]/g, "") || "uh";
    const out: string[] = [];
    const b = neighbours.before?.replace(/[^A-Za-z'-]/g, "").toLowerCase();
    const a = neighbours.after?.replace(/[^A-Za-z'-]/g, "").toLowerCase();
    if (b) out.push(`${b} ${base}`);
    if (a) out.push(`${base} ${a}`);
    if (b && a) out.push(`${b} ${base} ${a}`);
    return out;
  }, [token, neighbours.before, neighbours.after]);

  const groups: Group[] = useMemo(() => {
    const seen = new Set<string>();
    const uniq = (list: string[]) =>
      list.filter((w) => {
        const k = w.toLowerCase();
        if (seen.has(k)) return false;
        seen.add(k);
        return true;
      });
    const g: Group[] = [
      { label: "this clip", items: uniq(fromClip) },
      { label: "words", items: uniq(vocab.curated) },
      { label: "compounds", items: uniq(vocab.compounds) },
    ];
    if (vocab.custom.length) g.push({ label: "yours", items: uniq(vocab.custom) });
    return g;
  }, [fromClip, vocab]);

  const filtered = useMemo(() => {
    const needle = q.trim().toLowerCase();
    return groups
      .map((g) => ({ ...g, items: needle ? g.items.filter((w) => w.toLowerCase().includes(needle)) : g.items }))
      .filter((g) => g.items.length);
  }, [groups, q]);

  const flat = useMemo(() => filtered.flatMap((g) => g.items), [filtered]);
  const typed = q.trim();
  const canAdd =
    typed.length > 0 && !flat.some((w) => w.toLowerCase() === typed.toLowerCase());
  const total = flat.length + (canAdd ? 1 : 0);

  useEffect(() => {
    if (cursor >= total) setCursor(Math.max(0, total - 1));
  }, [total, cursor]);

  const commit = (i: number) => {
    if (canAdd && i === flat.length) {
      onPick(typed, true);
    } else if (flat[i]) {
      onPick(flat[i], false);
    }
    onOpen(false);
  };

  const shown = value || token || "?";

  return (
    <div className="relative">
      <button
        type="button"
        onClick={() => onOpen(!open)}
        className="flex items-baseline gap-2 rounded-md border border-[var(--color-line)] bg-[var(--color-panel-2)] px-3 py-1.5 text-left hover:border-[var(--color-sel)]"
        title="Choose the word this clip actually contains (W)"
      >
        {/* The word IS the display element -- what is being decided is a word,
            so it is set as a specimen rather than as a caption. */}
        <span className="specimen">{shown}</span>
        {!value && token ? (
          <span className="text-[11px] text-[var(--color-dim)]">from ASR</span>
        ) : value ? (
          <span className="text-[11px] text-[var(--color-sel)]">labelled</span>
        ) : null}
        {/* The binding, VISIBLE. It has always existed and lived only in a
            title attribute, so it was discoverable by hovering a control you
            had no reason to hover -- while every other control on the card
            wears its key on its face. */}
        <kbd>W</kbd>
        <span className="text-[var(--color-dim)]">▾</span>
      </button>

      {open ? (
        <div className="absolute left-0 top-full z-30 mt-1 w-80 rounded-md border border-[var(--color-line)] bg-[var(--color-panel)] shadow-2xl">
          <input
            ref={inputRef}
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              setCursor(0);
            }}
            onKeyDown={(e) => {
              e.stopPropagation();
              if (e.key === "Escape") {
                e.preventDefault();
                onOpen(false);
              } else if (e.key === "ArrowDown") {
                e.preventDefault();
                setCursor((c) => Math.min(total - 1, c + 1));
              } else if (e.key === "ArrowUp") {
                e.preventDefault();
                setCursor((c) => Math.max(0, c - 1));
              } else if (e.key === "Enter") {
                e.preventDefault();
                commit(cursor);
              }
            }}
            placeholder="type to filter, Enter picks"
            className="w-full rounded-t-md border-b border-[var(--color-line)] bg-transparent px-3 py-2 text-sm outline-none"
          />
          <div className="max-h-72 overflow-auto py-1">
            {filtered.map((g) => (
              <div key={g.label}>
                <div className="px-3 py-1 text-[10px] uppercase tracking-wider text-[var(--color-dim)]">
                  {g.label}
                </div>
                {g.items.map((w) => {
                  const i = flat.indexOf(w);
                  return (
                    <button
                      key={`${g.label}-${w}`}
                      type="button"
                      onMouseEnter={() => setCursor(i)}
                      onClick={() => commit(i)}
                      className={`block w-full px-3 py-1.5 text-left font-mono text-sm ${
                        i === cursor ? "bg-[var(--color-panel-2)] text-[var(--color-sel)]" : ""
                      }`}
                    >
                      {w}
                    </button>
                  );
                })}
              </div>
            ))}
            {canAdd ? (
              <button
                type="button"
                onMouseEnter={() => setCursor(flat.length)}
                onClick={() => commit(flat.length)}
                className={`block w-full px-3 py-2 text-left text-sm ${
                  cursor === flat.length ? "bg-[var(--color-panel-2)]" : ""
                }`}
              >
                <span className="text-[var(--color-sel)]">＋ add</span>{" "}
                <span className="font-mono">&ldquo;{typed}&rdquo;</span>
                <span className="ml-1 text-[11px] text-[var(--color-dim)]">
                  — kept for every later clip
                </span>
              </button>
            ) : null}
            {!filtered.length && !canAdd ? (
              <div className="px-3 py-3 text-sm text-[var(--color-dim)]">nothing matches</div>
            ) : null}
          </div>
        </div>
      ) : null}
    </div>
  );
}