/* Starboard · Primitives
   Separator, Label, AspectRatio, VisuallyHidden, ScrollArea, KbdCombo.
   Requires: React 18, primitives.css, a11y.js */

// ─── VisuallyHidden ───
const VisuallyHidden = ({ children, as: Tag = 'span' }) => (
  <Tag className="ad-sr-only">{children}</Tag>
);

// ─── Separator ───
const Separator = ({ orientation = 'horizontal', strong, label, className = '' }) => {
  if (label) {
    return <div role="separator" className={`ad-sep--label ${className}`}>{label}</div>;
  }
  const cls = `ad-sep ad-sep--${orientation === 'vertical' ? 'v' : 'h'}${strong ? ' ad-sep--strong' : ''} ${className}`;
  return <div role="separator" aria-orientation={orientation} className={cls} />;
};

// ─── Label ───
const Label = ({ htmlFor, required, optional, disabled, dimmed, children }) => (
  <label
    htmlFor={htmlFor}
    className={`ad-label${disabled ? ' is-disabled' : ''}${dimmed ? ' is-dimmed' : ''}`}
  >
    {children}
    {required && <span className="ad-label__req" aria-hidden="true">*</span>}
    {optional && <span className="ad-label__optional">(optional)</span>}
  </label>
);

// ─── AspectRatio ───
const AspectRatio = ({ ratio = 16 / 9, radius, children, className = '' }) => (
  <div
    className={`ad-ratio ${className}`}
    style={{ aspectRatio: String(ratio), ...(radius ? { borderRadius: `var(--radius-${radius})` } : {}) }}
  >
    {children}
  </div>
);

// ─── ScrollArea ───
const ScrollArea = ({ maxHeight, shadow = true, horizontal, children, className = '', ...rest }) => (
  <div
    className={`ad-scroll${shadow && !horizontal ? ' ad-scroll--shadow' : ''} ${className}`}
    style={{ maxHeight, ...(horizontal ? { overflowY: 'hidden' } : {}) }}
    tabIndex={0}
    {...rest}
  >
    {children}
  </div>
);

// ─── KbdCombo — modifier glyphs + key sequence ───
const AD_KEY_GLYPHS = { cmd: '⌘', meta: '⌘', shift: '⇧', alt: '⌥', option: '⌥', ctrl: '⌃', enter: '↵', backspace: '⌫', tab: '⇥', esc: 'esc', up: '↑', down: '↓', left: '←', right: '→' };
const KbdCombo = ({ keys = [], sm }) => (
  <span className="ad-kbd-combo">
    {keys.map((k, i) => (
      <React.Fragment key={i}>
        {i > 0 && <span className="ad-kbd-combo__plus" aria-hidden="true">+</span>}
        <kbd className={`ad-kbd${sm ? ' ad-kbd--sm' : ''}`}>{AD_KEY_GLYPHS[String(k).toLowerCase()] || k}</kbd>
      </React.Fragment>
    ))}
  </span>
);

Object.assign(window, { VisuallyHidden, Separator, Label, AspectRatio, ScrollArea, KbdCombo, AD_KEY_GLYPHS });