/* Custom single-select dropdown matching the design system.
   Drop-in replacement for native <select> with a swatch + popover.
*/

const { useState: useStateS, useRef: useRefS, useEffect: useEffectS } = React;

function CustomSelect({ value, options, onChange, placeholder, swatchColor, className, style, mono, allowClear, dataAttr, getOptionLabel, getOptionColor, getOptionGroup }) {
  const [open, setOpen] = useStateS(false);
  const ref = useRefS(null);

  useEffectS(() => {
    if (!open) return;
    const onDoc = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onKey = e => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  const _label = opt => getOptionLabel ? getOptionLabel(opt) : (opt.name || opt.label || opt.id);
  const _color = opt => getOptionColor ? getOptionColor(opt) : opt.color;
  const _group = opt => getOptionGroup ? getOptionGroup(opt) : null;

  const current = options.find(o => o.id === value);
  const valueLabel = current ? _label(current) : (placeholder || '—');
  const valueColor = current ? _color(current) : null;

  // Group items if any have a group attribute
  const groups = {};
  const ungrouped = [];
  options.forEach(opt => {
    const g = _group(opt);
    if (g) {
      if (!groups[g]) groups[g] = [];
      groups[g].push(opt);
    } else {
      ungrouped.push(opt);
    }
  });
  const groupKeys = Object.keys(groups);

  return (
    <div className={'mcal-select' + (className ? ' ' + className : '') + (open ? ' open' : '')} ref={ref} style={style} {...(dataAttr || {})}>
      <button
        type="button"
        className={'mcs-trigger' + (mono ? ' mono' : '')}
        onClick={() => setOpen(o => !o)}
      >
        {valueColor && <span className="mcs-swatch" style={{ background: valueColor }}></span>}
        {!valueColor && swatchColor && <span className="mcs-swatch" style={{ background: swatchColor }}></span>}
        <span className={'mcs-label' + (current ? '' : ' empty')}>{valueLabel}</span>
        <span className="mcs-caret">▾</span>
      </button>
      {open && (
        <div className="mcs-popover fade-in">
          {allowClear && (
            <>
              <div className={'mcs-item' + (!current ? ' on' : '')} onClick={() => { onChange(''); setOpen(false); }}>
                <span className="mcs-swatch" style={{ background: 'transparent', borderStyle: 'dashed' }}></span>
                <span className="mcs-name" style={{ color: 'var(--fg-3)' }}>— None —</span>
              </div>
              <div className="mcs-divider"></div>
            </>
          )}
          {ungrouped.map(opt => (
            <Item key={opt.id} opt={opt} current={current} onChange={v => { onChange(v); setOpen(false); }} _label={_label} _color={_color} />
          ))}
          {groupKeys.map(gk => (
            <React.Fragment key={gk}>
              <div className="mcs-group">{gk}</div>
              {groups[gk].map(opt => (
                <Item key={opt.id} opt={opt} current={current} onChange={v => { onChange(v); setOpen(false); }} _label={_label} _color={_color} />
              ))}
            </React.Fragment>
          ))}
        </div>
      )}
    </div>
  );
}

function Item({ opt, current, onChange, _label, _color }) {
  const c = _color(opt);
  return (
    <div className={'mcs-item' + (current && current.id === opt.id ? ' on' : '')} onClick={() => onChange(opt.id)}>
      {c
        ? <span className="mcs-swatch" style={{ background: c }}></span>
        : <span className="mcs-swatch" style={{ background: 'transparent', borderStyle: 'dashed' }}></span>}
      <span className="mcs-name">{_label(opt)}</span>
      {current && current.id === opt.id && <span className="mcs-check">✓</span>}
    </div>
  );
}

window.mcalSelect = { CustomSelect };