// Sistema de diseño — design system reference page
// Documents tokens, components, empty states, micro-interactions, mobile shell
const { useState: _ds_useState } = React;

const TOKENS = [
  { name: '--aubergine-800', hex: '#2E1A46', role: 'Berenjena · sidebar, titulares, primario' },
  { name: '--teal-800',      hex: '#0E5964', role: 'Teal · botones, enlaces, acciones' },
  { name: '--teal-500',      hex: '#289FB0', role: 'Teal medio · acentos, íconos, hovers' },
  { name: '--sky-500',       hex: '#98E7D9', role: 'Cielo · highlights, gradiente' },
  { name: '--sky-100',       hex: '#C5E7E1', role: 'Cielo suave · badges, fondos' },
  { name: '--cta-500',       hex: '#FFE342', role: 'Amarillo CTA · acción destacada' },
  { name: '--green-600',     hex: '#2AB36E', role: 'Aprobado · activo · al día' },
  { name: '--amber-600',     hex: '#B5730A', role: 'Pendiente · advertencia · por vencer' },
  { name: '--aguila-600',    hex: '#EF435C', role: 'Rojo crítico · vencido · rechazado' },
  { name: '--text',          hex: '#1B1030', role: 'Texto principal (Ink berenjena)' },
  { name: '--text-muted',    hex: '#5B5468', role: 'Texto secundario' },
  { name: '--surface',       hex: '#F8FAFC', role: 'Fondo de la app' },
  { name: '--border',        hex: '#E7E4EC', role: 'Bordes y separadores' },
];

const TYPE_SAMPLES = [
  { name: 'page-title',    size: '20 / 22px', sample: 'Título de página', cls: 'ds-type-sample-20' },
  { name: 'section-title', size: '16 px',     sample: 'Título de sección', cls: 'ds-type-sample-16' },
  { name: 'body',          size: '14 px',     sample: 'Texto del cuerpo · 14px Mulish regular', cls: 'ds-type-sample-14' },
  { name: 'label',         size: '12 px',     sample: 'LABEL · MUTED · UPPERCASE', cls: 'ds-type-sample-12' },
  { name: 'mono',          size: '12 px',     sample: 'JetBrains Mono · IDs · timestamps · hashes', cls: 'mono ds-type-sample-14' },
];

const DesignSystem = () => {
  const [stampKey, setStampKey]         = _ds_useState(0);
  const [confettiKey, setConfettiKey]   = _ds_useState(0);
  const [celebrateKey, setCelebrateKey] = _ds_useState(0);
  const [motorOn, setMotorOn]           = _ds_useState(true);

  return (
    <div className="main" data-screen-label="Diseño">
      <div className="page-head">
        <div>
          <h1 className="page-title">Sistema de diseño</h1>
          <div className="page-subtitle">
            <b>Atica SOMOS · referencia visual</b> · tokens, componentes, estados vacíos, micro-interacciones y shell mobile
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn"><IconExternal size={14} /> Exportar tokens</button>
        </div>
      </div>

      {/* 1 · Color tokens */}
      <div className="ds-panel">
        <div className="ds-panel-head">
          <div>
            <h2 className="ds-panel-title">Tokens de color · roles</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>
              Los roles definen <b>cuándo</b> usar cada color. Cualquier valor fuera de esta paleta debe agregarse a <code className="mono">:root</code> antes de usarse.
            </div>
          </div>
          <span className="ds-panel-num">01</span>
        </div>
        <div className="ds-token-grid">
          {TOKENS.map(t => (
            <div key={t.name} className="ds-token">
              <div className="ds-token-swatch" style={{ background: t.hex }} />
              <div style={{ minWidth: 0 }}>
                <div className="ds-token-name">{t.name}</div>
                <div className="ds-token-hex">{t.hex}</div>
                <div className="ds-token-role">{t.role}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* 2 · Typography */}
      <div className="ds-panel">
        <div className="ds-panel-head">
          <div>
            <h2 className="ds-panel-title">Tipografía</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>
              <b>Inter</b> para UI · <b>JetBrains Mono</b> para datos técnicos (IDs, fechas, hashes, valores numéricos).
            </div>
          </div>
          <span className="ds-panel-num">02</span>
        </div>
        {TYPE_SAMPLES.map(t => (
          <div key={t.name} className="ds-type-row">
            <div className="ds-type-meta">{t.name}<br />{t.size}</div>
            <div className={t.cls}>{t.sample}</div>
          </div>
        ))}
      </div>

      {/* 3 · Components catalog */}
      <div className="ds-panel">
        <div className="ds-panel-head">
          <div>
            <h2 className="ds-panel-title">Componentes estandarizados</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>
              Todos los módulos consumen estas piezas. No se duplican — se reusan o se extienden.
            </div>
          </div>
          <span className="ds-panel-num">03</span>
        </div>

        <div className="ds-component-grid">
          {/* Buttons */}
          <div className="ds-component">
            <div className="ds-component-title">Botones</div>
            <div className="ds-component-row">
              <button className="btn">Secundario</button>
              <button className="btn primary">Primario</button>
              <button className="btn danger">Peligro</button>
              <button className="btn danger solid">Crítico</button>
            </div>
            <div className="ds-component-row">
              <button className="btn" disabled>Deshabilitado</button>
              <button className="btn primary" style={{ padding: '5px 11px', fontSize: 12 }}>
                <IconCheck size={13} /> Compacto
              </button>
            </div>
          </div>

          {/* Search */}
          <div className="ds-component">
            <div className="ds-component-title">Buscador estándar</div>
            <div className="ob-search" style={{ width: '100%', maxWidth: 'none' }}>
              <IconSearch size={15} />
              <input placeholder="Buscar empleados, documentos, cargos…" />
            </div>
            <div className="muted" style={{ fontSize: 11 }}>Ícono <code className="mono">IconSearch</code> a la izquierda · placeholder <code className="mono">--text-subtle</code></div>
          </div>

          {/* Pills / status */}
          <div className="ds-component">
            <div className="ds-component-title">Estados · pildoras</div>
            <div className="ds-component-row">
              <span className="pill green"><span className="status-dot" style={{ background: 'var(--green-600)' }} /> Aprobado</span>
              <span className="pill amber-soft"><span className="status-dot" style={{ background: '#854D0E' }} /> Pendiente</span>
              <span className="pill rose"><span className="status-dot" style={{ background: 'var(--rose-600)' }} /> Vencido</span>
              <span className="pill navy"><span className="status-dot" style={{ background: 'var(--navy-800)' }} /> Info</span>
            </div>
            <div className="muted" style={{ fontSize: 11 }}>S: simple · M: con dot indicador · siempre fijar dot a la izquierda</div>
          </div>

          {/* Inputs */}
          <div className="ds-component">
            <div className="ds-component-title">Inputs · dropdown</div>
            <div className="ds-component-row" style={{ flexDirection: 'column', alignItems: 'stretch', gap: 6 }}>
              <input style={{ font: 'inherit', fontSize: 13, padding: '8px 11px', background: 'white', border: '1px solid var(--border)', borderRadius: 8 }} placeholder="Texto · Placeholder" />
              <select style={{ font: 'inherit', fontSize: 13, padding: '8px 11px', background: 'white', border: '1px solid var(--border)', borderRadius: 8 }}>
                <option>Selecciona…</option>
                <option>Opción A</option>
              </select>
            </div>
          </div>

          {/* Toggle */}
          <div className="ds-component">
            <div className="ds-component-title">Toggle · checkbox</div>
            <div className="ds-component-row">
              <label className="epp-toggle">
                <input type="checkbox" defaultChecked />
                <span className="epp-toggle-track" />
              </label>
              <label className="epp-toggle">
                <input type="checkbox" />
                <span className="epp-toggle-track" />
              </label>
              <input type="checkbox" defaultChecked style={{ width: 18, height: 18, accentColor: 'var(--navy-800)' }} />
              <input type="checkbox" style={{ width: 18, height: 18, accentColor: 'var(--navy-800)' }} />
            </div>
          </div>

          {/* Avatar / chip */}
          <div className="ds-component">
            <div className="ds-component-title">Avatar · chips</div>
            <div className="ds-component-row">
              <div className="doc-avatar">CV</div>
              <div className="doc-avatar" style={{ background: 'var(--navy-50)', color: 'var(--navy-800)' }}>AM</div>
              <span className="signer-chip"><IconCheck size={10} /> firmante</span>
              <span className="signer-chip signed"><IconCheck size={10} /> firmado</span>
            </div>
          </div>
        </div>
      </div>

      {/* 4 · Tables */}
      <div className="ds-panel">
        <div className="ds-panel-head">
          <div>
            <h2 className="ds-panel-title">Tablas estándar</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>
              Todas las tablas heredan <code className="mono">.doc-table</code>: header gris claro, filas con hover, fila <code className="mono">.selected</code> con border-left navy. En mobile se transforman a tarjetas apiladas automáticamente.
            </div>
          </div>
          <span className="ds-panel-num">04</span>
        </div>
        <div className="doc-list-card">
          <table className="doc-table">
            <thead>
              <tr><th>Columna A</th><th>Columna B</th><th>Estado</th><th></th></tr>
            </thead>
            <tbody>
              <tr><td data-label="A">Fila normal</td><td data-label="B">Hover sobre la fila</td><td data-label="Estado"><span className="pill green">Activo</span></td><td><button className="icon-action"><IconExternal size={14} /></button></td></tr>
              <tr className="selected"><td data-label="A">Fila seleccionada</td><td data-label="B">Border-left navy</td><td data-label="Estado"><span className="pill amber-soft">Pendiente</span></td><td><button className="icon-action"><IconExternal size={14} /></button></td></tr>
              <tr><td data-label="A">Fila normal</td><td data-label="B">Otro registro</td><td data-label="Estado"><span className="pill rose">Vencido</span></td><td><button className="icon-action"><IconExternal size={14} /></button></td></tr>
            </tbody>
          </table>
        </div>
      </div>

      {/* 5 · Empty states */}
      <div className="ds-panel">
        <div className="ds-panel-head">
          <div>
            <h2 className="ds-panel-title">Estados vacíos</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>
              Componente <code className="mono">{`<EmptyState />`}</code> con 4 tonos (green / amber / navy / blue), título, descripción, meta-tags opcionales y hasta 2 acciones.
            </div>
          </div>
          <span className="ds-panel-num">05</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 12 }}>
          <ESCoursesEmpty onAssign={() => {}} />
          <ESDocsEmpty />
          <ESRequestsEmpty />
        </div>
      </div>

      {/* 6 · Micro-interactions */}
      <div className="ds-panel">
        <div className="ds-panel-head">
          <div>
            <h2 className="ds-panel-title">Micro-interacciones</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>
              Animaciones puntuales que dan textura emocional al producto. Usa <b>Replay</b> para volver a verlas.
            </div>
          </div>
          <span className="ds-panel-num">06</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 14 }}>
          <div className="ds-mi-card">
            <h4 className="ds-component-title">Aprobar solicitud</h4>
            <div className="ds-mi-stage">
              <span className="mi-confetti" key={confettiKey}>
                <span className="mi-success-pop"><IconCheck size={12} /> Aprobada</span>
              </span>
            </div>
            <div className="ds-mi-meta">Confetti rápido + badge verde "pop". Aplica al confirmar una aprobación de solicitud.</div>
            <button className="ds-mi-replay" onClick={() => setConfettiKey(k => k + 1)}>↻ Replay</button>
          </div>

          <div className="ds-mi-card">
            <h4 className="ds-component-title">Firmar documento</h4>
            <div className="ds-mi-stage">
              <div className="mi-stamp" key={stampKey}>
                <div className="mi-stamp-mark">
                  FIRMADO
                  <span>05/05/2026</span>
                </div>
              </div>
            </div>
            <div className="ds-mi-meta">Sello de tinta verde con rotación −12° y rebote. Aplica al completar la firma electrónica.</div>
            <button className="ds-mi-replay" onClick={() => setStampKey(k => k + 1)}>↻ Replay</button>
          </div>

          <div className="ds-mi-card">
            <h4 className="ds-component-title">Onboarding completo</h4>
            <div className="ds-mi-stage" style={{ alignItems: 'center', flexDirection: 'column', gap: 14 }}>
              <div style={{ width: '100%', maxWidth: 240 }}>
                <div className="mi-celebrate" key={celebrateKey}>
                  <div className="mi-celebrate-fill" />
                </div>
                <div style={{ marginTop: 8, fontSize: 11, color: 'var(--text-muted)', textAlign: 'center' }}>
                  Día 90 · Bienvenido formalmente al equipo
                </div>
              </div>
            </div>
            <div className="ds-mi-meta">Barra de progreso que se llena del 0 al 100% + confetti que sube. Al cierre formal de onboarding.</div>
            <button className="ds-mi-replay" onClick={() => setCelebrateKey(k => k + 1)}>↻ Replay</button>
          </div>

          <div className="ds-mi-card">
            <h4 className="ds-component-title">Motor automatización</h4>
            <div className="ds-mi-stage">
              {motorOn ? (
                <div className="mi-motor">
                  <div className="mi-motor-spinner" />
                  <span>Generando obligaciones<span className="mi-motor-text" /></span>
                </div>
              ) : (
                <span className="mi-success-pop"><IconCheck size={12} /> 12 obligaciones generadas</span>
              )}
            </div>
            <div className="ds-mi-meta">Spinner navy + texto "Generando obligaciones..." con dots. Se muestra mientras el motor procesa la matriz del cargo.</div>
            <button className="ds-mi-replay" onClick={() => setMotorOn(o => !o)}>↻ Toggle</button>
          </div>
        </div>
      </div>

      {/* 7 · Mobile shell */}
      <div className="ds-panel">
        <div className="ds-panel-head">
          <div>
            <h2 className="ds-panel-title">Shell mobile · panel admin</h2>
            <div className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>
              Reduce el viewport bajo <b>760px</b> para ver el shell adaptado en vivo: hamburger en el topbar, sidebar como overlay, bottom-tab-bar con los 5 módulos más usados, y tablas que se transforman en tarjetas apiladas.
            </div>
          </div>
          <span className="ds-panel-num">07</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 18, alignItems: 'start' }}>
          <div>
            <h4 className="ds-component-title" style={{ marginBottom: 10 }}>1 · Topbar con hamburger</h4>
            <div className="ds-mob-frame" style={{ width: 320 }}>
              <div className="ds-mob-bar">
                <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11 }}>9:41</span>
                <span>Aticade colaboradores</span>
                <span style={{ width: 22 }} />
              </div>
              <div className="ds-mob-content" style={{ minHeight: 120, padding: '10px 12px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: 8, background: 'white', border: '1px solid var(--border)', borderRadius: 8 }}>
                  <div className="tb-burger" style={{ display: 'inline-flex' }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
                  </div>
                  <span style={{ fontSize: 11, fontWeight: 700 }}>Inicio / Empleados</span>
                  <div style={{ flex: 1 }} />
                  <span className="po-bell-dot" style={{ position: 'static' }}>3</span>
                </div>
              </div>
            </div>
            <div className="ds-mob-hint">Topbar compacto · sin búsqueda · CTA portal oculto</div>
          </div>

          <div>
            <h4 className="ds-component-title" style={{ marginBottom: 10 }}>2 · Sidebar como overlay</h4>
            <div className="ds-mob-frame" style={{ width: 320 }}>
              <div className="ds-mob-bar"><span>Drawer abierto</span></div>
              <div className="ds-mob-content" style={{ background: 'rgba(15, 23, 42, 0.45)', position: 'relative', padding: 0 }}>
                <div style={{ background: 'var(--navy-800)', color: 'white', width: 200, height: '100%', padding: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div style={{ fontWeight: 800, fontSize: 14, marginBottom: 8 }}>Atica <small style={{ fontSize: 10, opacity: 0.7 }}>SOMOS</small></div>
                  {['Inicio', 'Empleados', 'Documentos', 'Capacitaciones', 'SST', 'Reportes'].map((l, i) => (
                    <div key={l} style={{ padding: '7px 10px', borderRadius: 7, fontSize: 11.5, background: i === 0 ? 'rgba(255,255,255,0.12)' : 'transparent', fontWeight: i === 0 ? 700 : 500 }}>
                      {l}
                    </div>
                  ))}
                </div>
              </div>
            </div>
            <div className="ds-mob-hint">Backdrop con blur · cierra al tap fuera · ancho 280px</div>
          </div>

          <div>
            <h4 className="ds-component-title" style={{ marginBottom: 10 }}>3 · Bottom tab bar</h4>
            <div className="ds-mob-frame" style={{ width: 320 }}>
              <div className="ds-mob-bar"><span>Pantalla activa</span></div>
              <div className="ds-mob-content" style={{ minHeight: 200 }}>
                <div style={{ background: 'white', padding: 10, borderRadius: 8, border: '1px solid var(--border)', fontSize: 11 }}>
                  Tabla en mobile se renderiza como tarjeta apilada con label inline.
                </div>
                <div style={{ background: 'white', padding: 10, borderRadius: 8, border: '1px solid var(--border)', fontSize: 11 }}>
                  Cada celda usa <code className="mono">data-label</code> como prefijo.
                </div>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', background: 'white', borderTop: '1px solid var(--border)', padding: '6px 4px 10px' }}>
                {[
                  ['Inicio',    'IconHome',     true],
                  ['Empleados', 'IconUsers',    false],
                  ['Docs',      'IconDoc',      false],
                  ['Cursos',    'IconBook',     false],
                  ['Más',       'IconMenu',     false],
                ].map(([l, ic, on]) => {
                  const I = window[ic] || IconHome;
                  return (
                    <div key={l} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, fontSize: 9, fontWeight: on ? 700 : 500, color: on ? 'var(--navy-800)' : 'var(--text-muted)' }}>
                      <I size={16} />
                      {l}
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="ds-mob-hint">5 módulos más usados · resto via "Más"</div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.DesignSystem = DesignSystem;