/* Starboard · Foundational Components
   Reusable React components for Admiral products.
   Load with: <script type="text/babel" src="FormControls.jsx"></script>
   Requires: React 18, components.css */

// ─── Checkbox ───
const Checkbox = ({ checked, indeterminate, disabled, label, description, onChange }) => {
  const cls = `ad-ck__box${checked ? ' is-checked' : ''}${indeterminate ? ' is-indeterminate' : ''}${disabled ? ' is-disabled' : ''}`;
  return (
    <label className="ad-ck" style={disabled ? {cursor:'not-allowed'} : {}}>
      <div className={cls} onClick={disabled ? undefined : onChange}>
        {checked && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5 9-11"/></svg>}
        {indeterminate && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="3" strokeLinecap="round"><path d="M6 12h12"/></svg>}
      </div>
      <div>
        <div className="ad-ck__label" style={disabled ? {color:'var(--neutral-500)'} : {}}>{label}</div>
        {description && <div className="ad-ck__desc">{description}</div>}
      </div>
    </label>
  );
};

// ─── Radio ───
const Radio = ({ selected, disabled, label, description, onChange }) => {
  const cls = `ad-rad__dot${selected ? ' is-selected' : ''}${disabled ? ' is-disabled' : ''}`;
  return (
    <label className="ad-rad" onClick={disabled ? undefined : onChange} style={disabled ? {cursor:'not-allowed'} : {}}>
      <div className={cls} />
      <div>
        <div className="ad-ck__label" style={disabled ? {color:'var(--neutral-500)'} : {}}>{label}</div>
        {description && <div className="ad-ck__desc">{description}</div>}
      </div>
    </label>
  );
};

const RadioGroup = ({ value, onChange, options, label, help, direction = 'vertical' }) => {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:10}}>
      {label && <div style={{fontFamily:"'Plus Jakarta Sans'", fontWeight:600, fontSize:13, color:'var(--fg-strong)'}}>{label}</div>}
      {help && <div style={{fontSize:12, color:'var(--fg-muted)', marginTop:-4}}>{help}</div>}
      <div style={{display:'flex', flexDirection: direction === 'horizontal' ? 'row' : 'column', gap: direction === 'horizontal' ? 16 : 10}}>
        {options.map(opt => (
          <Radio key={opt.value} selected={value === opt.value} disabled={opt.disabled} label={opt.label} description={opt.description} onChange={() => onChange(opt.value)} />
        ))}
      </div>
    </div>
  );
};

// ─── Switch ───
const Switch = ({ on, disabled, onChange, label, description }) => {
  const cls = `ad-sw${on ? ' is-on' : ''}${disabled ? ' is-disabled' : ''}`;
  const row = (
    <div className={cls} onClick={disabled ? undefined : onChange} role="switch" aria-checked={on} />
  );
  if (!label) return row;
  return (
    <div style={{display:'flex', alignItems:'flex-start', gap:12}}>
      <div style={{flex:1, minWidth:0}}>
        <div style={{fontSize:14, fontWeight:500, color:'var(--fg-strong)'}}>{label}</div>
        {description && <div style={{fontSize:12, color:'var(--fg-muted)', marginTop:2, lineHeight:1.5}}>{description}</div>}
      </div>
      {row}
    </div>
  );
};

// ─── Select ───
const Select = ({ value, placeholder, options, open, onChange, onToggle, label, help }) => {
  return (
    <div style={{display:'flex', flexDirection:'column', gap:6}}>
      {label && <label style={{fontFamily:"'Plus Jakarta Sans'", fontWeight:600, fontSize:13, color:'var(--fg-strong)'}}>{label}</label>}
      <div className={`ad-sel${open ? ' is-open' : ''}`} onClick={onToggle}>
        <span className={`ad-sel__text${!value ? ' ad-sel__placeholder' : ''}`}>{value || placeholder || 'Select…'}</span>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{color:'var(--neutral-500)', transition:'transform 140ms ease', transform: open ? 'rotate(180deg)' : 'none'}}><path d="m6 9 6 6 6-6"/></svg>
      </div>
      {help && <span style={{fontSize:12, color:'var(--fg-muted)'}}>{help}</span>}
    </div>
  );
};

// ─── Slider ───
const Slider = ({ value, min = 0, max = 100, label, unit, onChange }) => {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{display:'flex', flexDirection:'column', gap:8}}>
      {label && (
        <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
          <span style={{fontFamily:"'Plus Jakarta Sans'", fontWeight:600, fontSize:13, color:'var(--fg-strong)'}}>{label}</span>
          <span style={{fontFamily:'var(--font-mono)', fontWeight:500, fontSize:14, color:'var(--primary-700)'}}>{value}{unit && ` ${unit}`}</span>
        </div>
      )}
      <div className="ad-slider__track">
        <div className="ad-slider__fill" style={{width:`${pct}%`}} />
        <div className="ad-slider__thumb" style={{left:`${pct}%`}} />
      </div>
    </div>
  );
};

// Export
Object.assign(window, { Checkbox, Radio, RadioGroup, Switch, Select, Slider });