// Themed dropdown. Drop-in for <select className="f" /> usages — same value
// semantics ({value, label} or just strings), same onChange(newValue) callback.
// Renders a wabi-sabi listbox instead of the native OS chrome.
(function () {
  const { useState, useRef, useEffect, useMemo } = React;

  function normalize(options) {
    return options.map(o => typeof o === "string" ? { value: o, label: o } : o);
  }

  function ThemedSelect({ value, onChange, options, placeholder, disabled, fullWidth = true }) {
    const opts = useMemo(() => normalize(options || []), [options]);
    const current = opts.find(o => o.value === value);
    const [open, setOpen] = useState(false);
    const [focusIdx, setFocusIdx] = useState(-1);
    const rootRef = useRef(null);
    const listRef = useRef(null);

    useEffect(() => {
      if (!open) return;
      const onClick = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) setOpen(false); };
      const onKey = (e) => {
        if (e.key === "Escape") setOpen(false);
        if (e.key === "ArrowDown") { e.preventDefault(); setFocusIdx(i => Math.min(opts.length - 1, i + 1)); }
        if (e.key === "ArrowUp")   { e.preventDefault(); setFocusIdx(i => Math.max(0, i - 1)); }
        if (e.key === "Enter") {
          e.preventDefault();
          const pick = opts[focusIdx];
          if (pick) { onChange(pick.value); setOpen(false); }
        }
      };
      document.addEventListener("pointerdown", onClick);
      window.addEventListener("keydown", onKey);
      return () => {
        document.removeEventListener("pointerdown", onClick);
        window.removeEventListener("keydown", onKey);
      };
    }, [open, opts, focusIdx, onChange]);

    useEffect(() => {
      if (open && focusIdx < 0) {
        const initial = opts.findIndex(o => o.value === value);
        setFocusIdx(initial >= 0 ? initial : 0);
      }
      if (!open) setFocusIdx(-1);
    }, [open]);

    return React.createElement("div", {
      ref: rootRef,
      className: "tsel" + (open ? " open" : "") + (disabled ? " disabled" : ""),
      style: fullWidth ? { width: "100%" } : null,
    },
      React.createElement("button", {
        type: "button",
        className: "tsel-trigger",
        onClick: () => !disabled && setOpen(o => !o),
        disabled,
      },
        React.createElement("span", {
          className: "tsel-value" + (current ? "" : " ghost"),
        }, current ? current.label : (placeholder || "— select —")),
        React.createElement("span", { className: "tsel-caret" }, open ? "▴" : "▾")
      ),
      open ? React.createElement("ul", {
        ref: listRef,
        className: "tsel-list",
        role: "listbox",
      },
        opts.length === 0
          ? React.createElement("li", { className: "tsel-empty" }, "nothing yet")
          : opts.map((o, i) => React.createElement("li", {
              key: o.value || ("__" + i),
              role: "option",
              "aria-selected": o.value === value,
              className: "tsel-opt"
                + (o.value === value ? " selected" : "")
                + (i === focusIdx ? " focused" : ""),
              onMouseEnter: () => setFocusIdx(i),
              onClick: () => { onChange(o.value); setOpen(false); },
            },
              o.label,
              o.value === value ? React.createElement("span", { className: "tsel-tick" }, "·") : null
            ))
      ) : null
    );
  }

  window.ThemedSelect = ThemedSelect;
})();