/* WPSiteBeam — Toggle.jsx (shared pill toggle component)
   v1.0.0 — 2026-05-26
   Adopted from Claude Design concept review (2026-05-26).
   Used by: Security page, Settings notifications, any binary on/off.

   Usage:
     <window.Toggle checked={val} onChange={fn} label="Two-factor auth" />
     <window.Toggle checked={val} onChange={fn} />   // no label
     <window.Toggle checked={val} onChange={fn} disabled />

   Props:
     checked  : boolean — controlled value
     onChange : fn(newBool) — called on click
     label    : string (optional) — visible label to the right
     disabled : boolean (optional)
     size     : 'sm' | 'md' (default md)
     id       : string (optional) — for aria-labelledby
*/
(function() {
  'use strict';
  if (typeof window === 'undefined' || !window.React) return;
  const { useState } = React;

  function Toggle({ checked, onChange, label, disabled, size = 'md', id }) {
    const width  = size === 'sm' ? 28 : 32;
    const height = size === 'sm' ? 16 : 18;
    const dot    = size === 'sm' ? 12 : 14;
    const pad    = 2;

    const handleClick = () => {
      if (disabled) return;
      onChange && onChange(!checked);
    };

    return (
      <span style={{ display:'inline-flex', alignItems:'center', gap:8, cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.5 : 1 }}
            onClick={handleClick}>
        <button
          role="switch"
          aria-checked={!!checked}
          id={id}
          disabled={disabled}
          style={{
            width, height, borderRadius:999, flexShrink:0,
            background: checked ? 'var(--cyan,#06b6d4)' : 'var(--border-2,rgba(0,0,0,.18))',
            position:'relative', transition:'background .15s ease',
            border:'none', padding:0, cursor: disabled ? 'not-allowed' : 'pointer',
            outline:'none',
          }}
          onKeyDown={e => { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); handleClick(); } }}
        >
          <span style={{
            position:'absolute',
            top: pad,
            left: checked ? (width - dot - pad) : pad,
            width: dot, height: dot,
            borderRadius:'50%',
            background:'#fff',
            transition:'left .15s ease',
            boxShadow:'0 1px 3px rgba(0,0,0,.25)',
          }}/>
        </button>
        {label && (
          <span style={{ fontSize:'.88rem', color:'var(--text)', userSelect:'none' }}>
            {label}
          </span>
        )}
      </span>
    );
  }

  window.Toggle = Toggle;
  console.log('[WPSB] Toggle v1.0.0 loaded');
})();