/* global React */
const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;

// ─────────── Icons (stroke-only, 18px grid) ───────────
const Icon = ({ name, size = 16, stroke = 1.6 }) => {
  const common = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor',
    strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round'
  };
  const paths = {
    arrow: <><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>,
    arrowL: <><path d="M19 12H5"/><path d="M11 6l-6 6 6 6"/></>,
    check: <path d="M5 12l4 4 10-10"/>,
    x: <><path d="M6 6l12 12"/><path d="M18 6l-6 12"/></>,
    plus: <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    minus: <path d="M5 12h14"/>,
    chev: <path d="M9 6l6 6-6 6"/>,
    chevD: <path d="M6 9l6 6 6-6"/>,
    dot: <circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6"/></>,
    users: <><circle cx="9" cy="8" r="3.5"/><path d="M3 20c1-3 3-5 6-5s5 2 6 5"/><path d="M16 4a3.5 3.5 0 1 1 0 7"/><path d="M20 20c-.3-1.8-1.1-3.3-2.5-4.2"/></>,
    lock: <><rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></>,
    shield: <path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6z"/>,
    eye: <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></>,
    phone: <path d="M4 4c0 10 6 16 16 16l1.5-3-4-2-2 2c-3-1-5-3-6-6l2-2-2-4z"/>,
    doc: <><path d="M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/></>,
    docCheck: <><path d="M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/><path d="M14 3v5h5"/><path d="M9 14l2 2 4-4"/></>,
    upload: <><path d="M12 16V4"/><path d="M7 9l5-5 5 5"/><path d="M4 20h16"/></>,
    folder: <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M16 3v4M8 3v4M3 10h18"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></>,
    filter: <path d="M4 5h16l-6 8v6l-4-2v-4z"/>,
    bell: <><path d="M6 8a6 6 0 1 1 12 0c0 7 2 8 2 8H4s2-1 2-8z"/><path d="M10 20a2 2 0 0 0 4 0"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.5 1.5 0 0 0 .3 1.6l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.5 1.5 0 0 0-1.6-.3 1.5 1.5 0 0 0-.9 1.4V21a2 2 0 1 1-4 0v-.1a1.5 1.5 0 0 0-1-1.4 1.5 1.5 0 0 0-1.6.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.5 1.5 0 0 0 .3-1.6 1.5 1.5 0 0 0-1.4-.9H3a2 2 0 1 1 0-4h.1a1.5 1.5 0 0 0 1.4-1 1.5 1.5 0 0 0-.3-1.6l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.5 1.5 0 0 0 1.6.3H9a1.5 1.5 0 0 0 .9-1.4V3a2 2 0 1 1 4 0v.1a1.5 1.5 0 0 0 1 1.4 1.5 1.5 0 0 0 1.6-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.5 1.5 0 0 0-.3 1.6v0a1.5 1.5 0 0 0 1.4.9H21a2 2 0 1 1 0 4h-.1a1.5 1.5 0 0 0-1.5 1z"/></>,
    globe: <><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></>,
    home: <><path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></>,
    chat: <path d="M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-8l-4 4v-4H6a2 2 0 0 1-2-2z"/>,
    sparkle: <><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"/><path d="M19 17l.7 2 2 .7-2 .7-.7 2-.7-2-2-.7 2-.7z"/></>,
    warn: <><path d="M12 3l10 18H2z"/><path d="M12 10v5"/><circle cx="12" cy="18" r=".6" fill="currentColor"/></>,
    info: <><circle cx="12" cy="12" r="9"/><path d="M12 11v5"/><circle cx="12" cy="8" r=".6" fill="currentColor"/></>,
    flag: <><path d="M5 21V4"/><path d="M5 4h13l-2 4 2 4H5"/></>,
    send: <><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></>,
    download: <><path d="M12 4v12"/><path d="M7 11l5 5 5-5"/><path d="M4 20h16"/></>,
    link: <><path d="M10 13a5 5 0 0 0 7 0l3-3a5 5 0 0 0-7-7l-1 1"/><path d="M14 11a5 5 0 0 0-7 0l-3 3a5 5 0 0 0 7 7l1-1"/></>,
    shieldCheck: <><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></>,
    moon: <path d="M21 12.5A8.5 8.5 0 1 1 11.5 3a6.5 6.5 0 0 0 9.5 9.5z"/>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.5 5.5l1.5 1.5M17 17l1.5 1.5M5.5 18.5L7 17M17 7l1.5-1.5"/></>,
    grid: <><rect x="3" y="3" width="8" height="8" rx="1"/><rect x="13" y="3" width="8" height="8" rx="1"/><rect x="3" y="13" width="8" height="8" rx="1"/><rect x="13" y="13" width="8" height="8" rx="1"/></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1" fill="currentColor"/><circle cx="4" cy="12" r="1" fill="currentColor"/><circle cx="4" cy="18" r="1" fill="currentColor"/></>,
    menu: <><path d="M4 6h16M4 12h16M4 18h16"/></>,
    more: <><circle cx="5" cy="12" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/><circle cx="19" cy="12" r="1.5" fill="currentColor"/></>,
    trash: <><path d="M4 7h16"/><path d="M10 11v6M14 11v6"/><path d="M6 7l1 13a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-13"/><path d="M9 7V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></>,
    refresh: <><path d="M21 12a9 9 0 1 1-3-6.7L21 8"/><path d="M21 3v5h-5"/></>,
    zap: <path d="M13 2L4 14h7l-1 8 9-12h-7z"/>,
    book: <><path d="M4 4a2 2 0 0 1 2-2h14v18H6a2 2 0 0 0-2 2z"/><path d="M4 20a2 2 0 0 1 2-2h14"/></>,
    print: <><path d="M6 9V3h12v6"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></>,
    brain: <path d="M9 3a3 3 0 0 0-3 3v1a3 3 0 0 0-2 5 3 3 0 0 0 2 5 3 3 0 0 0 3 3V3zM15 3a3 3 0 0 1 3 3v1a3 3 0 0 1 2 5 3 3 0 0 1-2 5 3 3 0 0 1-3 3V3z"/>,
    server: <><rect x="3" y="4" width="18" height="7" rx="1"/><rect x="3" y="13" width="18" height="7" rx="1"/><circle cx="7" cy="7.5" r=".6" fill="currentColor"/><circle cx="7" cy="16.5" r=".6" fill="currentColor"/></>,
    activity: <path d="M3 12h4l2-7 4 14 2-7h6"/>,
    bolt: <path d="M13 3L4 14h7l-1 7 9-12h-7z"/>,
    play: <path d="M6 4l14 8-14 8z"/>,
    logout: <><path d="M15 4h4a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-4"/><path d="M10 17l-5-5 5-5"/><path d="M15 12H5"/></>,
    pin: <path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6L3 10l6-1z"/>,
    pen: <><path d="M15 4l5 5-11 11H4v-5z"/><path d="M13 6l5 5"/></>,
    cpu: <><rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M9 2v3M15 2v3M9 19v3M15 19v3M2 9h3M2 15h3M19 9h3M19 15h3"/></>,
    gavel: <><path d="M14 2l8 8-4 4-8-8z"/><path d="M8 8L2 14l4 4 6-6"/><path d="M3 22h18"/></>,
    balance: <><path d="M12 3v18"/><path d="M4 21h16"/><path d="M3 8l5 9h-10z" transform="translate(0,-1)"/><path d="M21 8l-5 9h10z" transform="translate(-16,-1)"/></>,
    eyeOff: <><path d="M3 3l18 18"/><path d="M10.5 10.7a2 2 0 1 0 2.8 2.8"/><path d="M9.4 5.2A10 10 0 0 1 22 12a11 11 0 0 1-3 3.8M6 6.5A11 11 0 0 0 2 12s3.5 7 10 7c1.7 0 3.3-.4 4.6-1.1"/></>,
  };
  return <svg {...common}>{paths[name] || paths.dot}</svg>;
};

// ─────────── Small components ───────────
const Btn = ({ variant='secondary', size, block, children, ...rest }) => {
  const cls = ['btn', 'btn-'+variant, size === 'lg' ? 'btn-lg' : size === 'sm' ? 'btn-sm' : '', block ? 'btn-block' : ''].filter(Boolean).join(' ');
  return <button className={cls} {...rest}>{children}</button>;
};

const Field = ({ label, hint, children, optional }) => (
  <div className="field">
    {label && <div className="label">{label} {optional && <span className="muted" style={{fontWeight:400}}>(optional)</span>}</div>}
    {children}
    {hint && <div className="hint">{hint}</div>}
  </div>
);

const Badge = ({ variant, children, dot }) => (
  <span className={['badge', variant].filter(Boolean).join(' ')}>
    {dot && <span className="dot"/>}
    {children}
  </span>
);

const Progress = ({ value }) => (
  <div className="progress"><div style={{width: `${value}%`}}/></div>
);

const StatCard = ({ label, value, delta, deltaDir, note }) => (
  <div className="card stat-card">
    <div className="label">{label}</div>
    <div className="val">{value}</div>
    {delta && <div className={`delta ${deltaDir || ''}`}>{delta} {note && <span className="muted">{note}</span>}</div>}
    {!delta && note && <div className="tiny">{note}</div>}
  </div>
);

const Explainer = ({ children }) => (
  <div className="explainer">
    <Icon name="info" size={15}/>
    <div>{children}</div>
  </div>
);

const Modal = ({ title, onClose, children, footer, wide }) => (
  <div className="modal-backdrop" onClick={onClose}>
    <div className="modal" style={wide ? {maxWidth: 720} : null} onClick={e=>e.stopPropagation()}>
      <div className="modal-head">
        <h3 style={{fontFamily:'var(--serif)', fontSize:22, fontWeight:400}}>{title}</h3>
        <button className="icon-btn" onClick={onClose}><Icon name="x" size={16}/></button>
      </div>
      <div className="modal-body">{children}</div>
      {footer && <div className="modal-foot">{footer}</div>}
    </div>
  </div>
);

const Stepper = ({ steps, current }) => (
  <div className="stepper">
    <span className="mono" style={{fontSize:10.5, letterSpacing:'.14em', textTransform:'uppercase', color:'var(--ink-4)'}}>Step</span>
    <span className="cur mono">{String(current).padStart(2,'0')}</span>
    <span>/</span>
    <span className="mono">{String(steps).padStart(2,'0')}</span>
  </div>
);

Object.assign(window, { Icon, Btn, Field, Badge, Progress, StatCard, Explainer, Modal, Stepper });