// VMAX prototype — shared widgets used across both apps:
// Avatar, Toaster/pushToast, PinPad, PinDialog, EmptyState, Field, TextInput,
// NumberInput, Toggle, Select.
(function () {
  const { Icon } = window.VMAXUI;

  function Avatar({ name, size = 40, tone = 'mint', style }) {
    const bg = tone === 'red' ? 'var(--vmax-red)' : tone === 'ground' ? 'var(--surface-ground)' : 'var(--vmax-mint)';
    const fg = tone === 'red' ? '#fff' : 'var(--vmax-red-deep)';
    return <span style={{ width: size, height: size, borderRadius: '50%', background: bg, display: 'grid', placeItems: 'center', color: fg, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: size * 0.42, flex: 'none', ...style }}>{(name || '?')[0]}</span>;
  }

  // ---- Toasts (module event bus) ----
  const bus = new EventTarget();
  function pushToast(msg, tone) { bus.dispatchEvent(new CustomEvent('t', { detail: { msg, tone, id: Math.random() } })); }
  function Toaster() {
    const [items, setItems] = React.useState([]);
    React.useEffect(() => {
      const on = (e) => { const it = e.detail; setItems((a) => [...a, it]); setTimeout(() => setItems((a) => a.filter((x) => x.id !== it.id)), 2600); };
      bus.addEventListener('t', on); return () => bus.removeEventListener('t', on);
    }, []);
    return (
      <div style={{ position: 'fixed', left: '50%', bottom: 28, transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', gap: 8, zIndex: 200, alignItems: 'center', pointerEvents: 'none' }}>
        {items.map((it) => (
          <div key={it.id} style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '11px 16px', borderRadius: 999, background: 'var(--vmax-ink)', color: '#fff', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13.5, boxShadow: 'var(--shadow-pop)', animation: 'vmaxToast .26s cubic-bezier(.2,.9,.3,1.2)' }}>
            <Icon name={it.tone === 'warn' ? 'alert' : 'check'} size={17} color={it.tone === 'warn' ? 'var(--vmax-amber)' : 'var(--vmax-ok)'} strokeWidth={2.2} />{it.msg}
          </div>
        ))}
      </div>
    );
  }

  // ---- PIN pad ----
  function PinPad({ value, onChange, max = 4 }) {
    const press = (d) => { if (value.length < max) onChange(value + d); };
    const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'del'];
    return (
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, width: 264, margin: '0 auto' }}>
        {keys.map((k, i) => k === '' ? <div key={i} /> : (
          <button key={i} onClick={() => (k === 'del' ? onChange(value.slice(0, -1)) : press(k))}
            style={{ height: 60, borderRadius: 'var(--radius-lg)', border: '1.5px solid var(--vmax-line)', background: 'var(--surface-card)', cursor: 'pointer', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--vmax-ink)', display: 'grid', placeItems: 'center', transition: '.12s' }}
            onMouseDown={(e) => { e.currentTarget.style.background = 'var(--vmax-mint)'; }}
            onMouseUp={(e) => { e.currentTarget.style.background = 'var(--surface-card)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--surface-card)'; }}>
            {k === 'del' ? <Icon name="backspace" size={24} color="var(--vmax-ink-soft)" /> : k}
          </button>
        ))}
      </div>
    );
  }

  function Dots({ n, max = 4, error }) {
    return (
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', animation: error ? 'vmaxShake .34s' : 'none' }}>
        {Array.from({ length: max }).map((_, i) => (
          <span key={i} style={{ width: 14, height: 14, borderRadius: '50%', background: error ? 'var(--vmax-danger)' : i < n ? 'var(--vmax-ink)' : 'transparent', border: '2px solid ' + (error ? 'var(--vmax-danger)' : i < n ? 'var(--vmax-ink)' : 'var(--vmax-line)'), transition: '.12s' }} />
        ))}
      </div>
    );
  }

  // PIN dialog. mode 'verify' (checks via verify(pin)) or 'set' (captures a new PIN).
  function PinDialog({ person, title, sub, mode = 'verify', verify, onSuccess, onClose }) {
    const [pin, setPin] = React.useState('');
    const [err, setErr] = React.useState(false);
    React.useEffect(() => { setPin(''); setErr(false); }, [person && person.id]);
    React.useEffect(() => {
      if (pin.length === 4) {
        if (mode === 'set') { const v = pin; setTimeout(() => onSuccess(v), 120); }
        else if (verify(pin)) { const v = pin; setTimeout(() => onSuccess(v), 120); }
        else { setErr(true); setTimeout(() => { setErr(false); setPin(''); }, 480); }
      } else setErr(false);
    }, [pin]);
    const { Sheet } = window.VMAXUI;
    return (
      <Sheet open={!!person} onClose={onClose} width={360}>
        <div style={{ padding: '26px 24px 28px', textAlign: 'center' }}>
          {person && <Avatar name={person.name} size={56} style={{ margin: '0 auto 12px' }} />}
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 20 }}>{title || (person && person.name)}</div>
          {sub && <div style={{ color: 'var(--vmax-ink-soft)', fontSize: 13, marginTop: 4 }}>{sub}</div>}
          <div style={{ margin: '22px 0 24px' }}><Dots n={pin.length} error={err} /></div>
          <PinPad value={pin} onChange={setPin} />
          <button onClick={onClose} style={{ marginTop: 18, border: 'none', background: 'transparent', color: 'var(--vmax-ink-soft)', fontWeight: 600, fontSize: 13.5, cursor: 'pointer' }}>Cancel</button>
        </div>
      </Sheet>
    );
  }

  function EmptyState({ icon = 'box', title, text, action, tone = 'soft' }) {
    return (
      <div style={{ display: 'grid', placeItems: 'center', padding: '46px 20px', textAlign: 'center' }}>
        <div style={{ width: 56, height: 56, borderRadius: '50%', background: tone === 'warn' ? 'var(--vmax-warn-tint)' : 'var(--surface-ground)', display: 'grid', placeItems: 'center', marginBottom: 14 }}>
          <Icon name={icon} size={26} color={tone === 'warn' ? 'var(--vmax-amber-deep)' : 'var(--vmax-ink-soft)'} />
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18 }}>{title}</div>
        {text && <p style={{ fontSize: 13.5, color: 'var(--vmax-ink-soft)', marginTop: 7, maxWidth: 320, lineHeight: 1.5 }}>{text}</p>}
        {action && <div style={{ marginTop: 16 }}>{action}</div>}
      </div>
    );
  }

  function Field({ label, hint, children, style }) {
    return (
      <label style={{ display: 'block', ...style }}>
        <div style={{ fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 12.5, color: 'var(--vmax-ink-soft)', marginBottom: 6 }}>{label}{hint && <span style={{ fontWeight: 500, marginLeft: 6, opacity: .8 }}>{hint}</span>}</div>
        {children}
      </label>
    );
  }
  const inputBase = { width: '100%', border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-md)', padding: '11px 13px', fontFamily: 'var(--font-body)', fontSize: 14.5, outline: 'none', background: 'var(--surface-card)', color: 'var(--vmax-ink)' };
  function TextInput({ value, onChange, placeholder, autoFocus, type = 'text', style }) {
    return <input type={type} autoFocus={autoFocus} value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)} style={{ ...inputBase, ...style }} onFocus={(e) => (e.target.style.borderColor = 'var(--vmax-ink-soft)')} onBlur={(e) => (e.target.style.borderColor = 'var(--vmax-line)')} />;
  }
  function NumberInput({ value, onChange, prefix, suffix, width = 96 }) {
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, border: '1.5px solid var(--vmax-line)', borderRadius: 'var(--radius-md)', padding: '0 12px', background: 'var(--surface-card)' }}>
        {prefix && <span style={{ color: 'var(--vmax-ink-soft)', fontWeight: 600 }}>{prefix}</span>}
        <input type="number" value={value} onChange={(e) => onChange(e.target.value === '' ? '' : Number(e.target.value))} style={{ border: 'none', outline: 'none', width, padding: '11px 0', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, textAlign: 'right', background: 'transparent', color: 'var(--vmax-ink)' }} />
        {suffix && <span style={{ color: 'var(--vmax-ink-soft)', fontWeight: 600, fontSize: 13 }}>{suffix}</span>}
      </div>
    );
  }
  function Toggle({ on, onChange, label }) {
    return (
      <label style={{ display: 'flex', alignItems: 'center', gap: 11, cursor: 'pointer' }}>
        <button type="button" onClick={() => onChange(!on)} style={{ width: 44, height: 26, borderRadius: 999, border: 'none', cursor: 'pointer', background: on ? 'var(--vmax-red)' : 'var(--vmax-line)', position: 'relative', transition: '.15s', flex: 'none' }}>
          <span style={{ position: 'absolute', top: 3, left: on ? 21 : 3, width: 20, height: 20, borderRadius: '50%', background: '#fff', transition: '.15s', boxShadow: '0 1px 3px rgba(0,0,0,.2)' }} />
        </button>
        {label && <span style={{ fontSize: 14, fontWeight: 600 }}>{label}</span>}
      </label>
    );
  }
  function Select({ value, onChange, options, style }) {
    return (
      <select value={value} onChange={(e) => onChange(e.target.value)} style={{ ...inputBase, fontWeight: 600, cursor: 'pointer', ...style }}>
        {options.map((o) => { const v = typeof o === 'string' ? o : o.value; const l = typeof o === 'string' ? o : o.label; return <option key={v} value={v}>{l}</option>; })}
      </select>
    );
  }

  function NotifBadge({ count, dot, tone = 'red', style }) {
    if (!count && !dot) return null;
    const bg = tone === 'amber' ? 'var(--vmax-amber)' : 'var(--vmax-red)';
    return <span style={{ position: 'absolute', top: -5, right: -5, minWidth: dot ? 9 : 18, height: dot ? 9 : 18, padding: dot ? 0 : '0 5px', borderRadius: 999, background: bg, color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11, lineHeight: 1, display: 'grid', placeItems: 'center', border: '2px solid var(--surface-card)', boxShadow: '0 1px 3px rgba(0,0,0,.25)', pointerEvents: 'none', ...style }}>{dot ? '' : count}</span>;
  }

  window.VMAXW = { Avatar, pushToast, Toaster, PinPad, Dots, PinDialog, EmptyState, Field, TextInput, NumberInput, Toggle, Select, NotifBadge };
})();