// Multiselect — pill button + dropdown panel with checkboxes.
// `options` is an array of { value, label, color? }.
// `selected` is an array of values (empty = no filter / all shown).
// onChange(newSelectedArray) is called on every toggle.
const { useState: useMsState, useEffect: useMsEffect, useRef: useMsRef } = React;

window.MultiSelect = function MultiSelect({ label, options, selected, onChange, allLabel }) {
  const [open, setOpen] = useMsState(false);
  const ref = useMsRef(null);

  useMsEffect(() => {
    if (!open) return;
    function onClick(e) {
      if (ref.current && !ref.current.contains(e.target)) setOpen(false);
    }
    function onKey(e) { if (e.key === "Escape") setOpen(false); }
    document.addEventListener("mousedown", onClick);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onClick);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  const sel = new Set(selected || []);

  function toggle(v) {
    const next = new Set(sel);
    if (next.has(v)) next.delete(v); else next.add(v);
    onChange(Array.from(next));
  }

  function clear() { onChange([]); }
  function selectAll() { onChange(options.map((o) => o.value)); }

  const summary = sel.size === 0 ? (allLabel || "Alla")
    : sel.size === options.length ? (allLabel || "Alla")
    : sel.size === 1 ? Array.from(sel)[0]
    : sel.size + " valda";

  return (
    <div className="multiselect" ref={ref}>
      <button
        type="button"
        className={"multiselect-trigger" + (sel.size && sel.size !== options.length ? " has-selection" : "")}
        onClick={() => setOpen(!open)}
        aria-expanded={open}>
        <span className="multiselect-label">{label}</span>
        <span className="multiselect-summary">{summary}</span>
        <span className="multiselect-chevron">{open ? "▴" : "▾"}</span>
      </button>

      {open && (
        <div className="multiselect-panel">
          <div className="multiselect-actions">
            <button type="button" className="multiselect-link" onClick={selectAll}>Välj alla</button>
            <button type="button" className="multiselect-link" onClick={clear}>Rensa</button>
          </div>
          <div className="multiselect-options">
            {options.map((o) => {
              const checked = sel.has(o.value);
              return (
                <label key={o.value} className={"multiselect-option" + (checked ? " checked" : "")}>
                  <input
                    type="checkbox"
                    checked={checked}
                    onChange={() => toggle(o.value)}
                  />
                  {o.color && <span className="multiselect-dot" style={{background: o.color}} />}
                  <span className="multiselect-option-label">{o.label}</span>
                  {o.count !== undefined && <span className="multiselect-count">{o.count}</span>}
                </label>
              );
            })}
            {options.length === 0 && (
              <div style={{padding: "12px 14px", color: "var(--ink-400)", fontSize: 12}}>
                Inga alternativ
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
};