// Reusable modal shell + Export modal + Import wizard + New Employee wizard

const Modal = ({ open, onClose, title, subtitle, width = 720, children, footer, hideHeader = false, noPad = false }) => {
  React.useEffect(() => {
    const onEsc = (e) => { if (e.key === 'Escape') onClose && onClose(); };
    if (open) {
      document.body.style.overflow = 'hidden';
      window.addEventListener('keydown', onEsc);
    }
    return () => {
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onEsc);
    };
  }, [open]);
  if (!open) return null;
  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: width }}>
        {!hideHeader && (
          <div className="modal-head">
            <div>
              <div className="modal-title">{title}</div>
              {subtitle && <div className="modal-sub">{subtitle}</div>}
            </div>
            <button className="icon-btn" onClick={onClose} title="Cerrar">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12" /></svg>
            </button>
          </div>
        )}
        <div className={`modal-body${noPad ? ' noPad' : ''}`}>{children}</div>
        {footer && <div className="modal-foot">{footer}</div>}
      </div>
    </div>
  );
};

// ───────────────────────── Export ─────────────────────────
const ExportModal = ({ open, onClose, scope }) => {
  const [format, setFormat] = React.useState('xlsx');
  const [range, setRange] = React.useState('filtered');
  const [cols, setCols] = React.useState({
    name: true, doc: true, role: true, area: true, site: true,
    contract: true, hire: true, status: true, salary: false, leader: false, cc: false, email: false, phone: false,
  });
  const [includeAlerts, setIncludeAlerts] = React.useState(true);
  const [stage, setStage] = React.useState('setup'); // setup | running | done

  const handleExport = () => {
    setStage('running');
    setTimeout(() => setStage('done'), 1400);
  };

  const COLS = [
    ['name', 'Nombre completo'], ['doc', 'Documento'], ['role', 'Cargo'],
    ['area', 'Área'], ['site', 'Sede'], ['contract', 'Tipo de contrato'],
    ['hire', 'Fecha de ingreso'], ['status', 'Estado'],
    ['salary', 'Salario base'], ['leader', 'Jefe directo'],
    ['cc', 'Centro de costo'], ['email', 'Correo'], ['phone', 'Teléfono'],
  ];

  const colCount = Object.values(cols).filter(Boolean).length;

  if (stage === 'running') {
    return (
      <Modal open={open} onClose={onClose} title="Exportando…" subtitle={`${scope || 'Empleados'} · formato ${format.toUpperCase()}`} width={520} hideHeader>
        <div className="export-running">
          <div className="export-spinner" />
          <div style={{ fontSize: 16, fontWeight: 600 }}>Generando archivo</div>
          <div className="muted" style={{ fontSize: 13 }}>Procesando registros y aplicando formato…</div>
        </div>
      </Modal>
    );
  }
  if (stage === 'done') {
    return (
      <Modal open={open} onClose={onClose} title="Exportación lista" width={520}
        footer={
          <>
            <button className="btn" onClick={onClose}>Cerrar</button>
            <button className="btn primary"><IconDoc size={14} /> Descargar archivo</button>
          </>
        }>
        <div className="export-done">
          <div className="success-ring"><IconCheck size={28} /></div>
          <div style={{ fontSize: 16, fontWeight: 600 }}>Archivo generado correctamente</div>
          <div className="muted" style={{ fontSize: 13, textAlign: 'center', maxWidth: 360 }}>
            Tu exportación está disponible. También se envió una copia al correo registrado.
          </div>
          <div className="export-file">
            <div className="export-file-icon"><IconDoc size={18} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600 }}>atica-{(scope || 'empleados').toLowerCase()}-2026-05-05.{format}</div>
              <div className="muted mono" style={{ fontSize: 11.5 }}>{format.toUpperCase()} · 847 filas · {colCount} columnas · 124 KB</div>
            </div>
          </div>
        </div>
      </Modal>
    );
  }

  return (
    <Modal open={open} onClose={onClose}
      title={`Exportar ${scope ? scope.toLowerCase() : 'datos'}`}
      subtitle="Personaliza el formato, las columnas y el alcance del archivo"
      width={680}
      footer={
        <>
          <span className="muted" style={{ fontSize: 12.5, marginRight: 'auto' }}>
            <b>{colCount}</b> columnas · {range === 'all' ? '847' : range === 'filtered' ? '15' : '1'} registros
          </span>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn primary" onClick={handleExport}><IconDoc size={14} /> Exportar</button>
        </>
      }>
      <div className="export-grid">
        <div>
          <div className="export-section-title">Formato</div>
          <div className="format-grid">
            {[
              { id: 'xlsx', name: 'Excel', sub: '.xlsx · recomendado', icon: '📊' },
              { id: 'csv', name: 'CSV', sub: '.csv · texto plano', icon: '📄' },
              { id: 'pdf', name: 'PDF', sub: '.pdf · listado imprimible', icon: '📕' },
            ].map(f => (
              <button key={f.id} className={`format-tile ${format === f.id ? 'active' : ''}`} onClick={() => setFormat(f.id)}>
                <div className="format-emoji">{f.icon}</div>
                <div style={{ fontWeight: 600, fontSize: 13 }}>{f.name}</div>
                <div className="muted" style={{ fontSize: 11.5 }}>{f.sub}</div>
              </button>
            ))}
          </div>

          <div className="export-section-title" style={{ marginTop: 22 }}>Alcance</div>
          <div className="range-list">
            {[
              ['filtered', 'Resultados filtrados', '15 registros visibles ahora'],
              ['all', 'Toda la base', '847 colaboradores activos + inactivos'],
              ['selected', 'Solo seleccionados', '0 registros seleccionados'],
            ].map(([id, lbl, sub]) => (
              <label key={id} className={`range-row ${range === id ? 'active' : ''}`}>
                <input type="radio" checked={range === id} onChange={() => setRange(id)} />
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500 }}>{lbl}</div>
                  <div className="muted" style={{ fontSize: 11.5 }}>{sub}</div>
                </div>
              </label>
            ))}
          </div>
        </div>

        <div>
          <div className="export-section-title">
            Columnas a incluir
            <button className="link-btn" onClick={() => setCols(Object.fromEntries(COLS.map(([k]) => [k, true])))}>Todas</button>
          </div>
          <div className="col-list">
            {COLS.map(([k, lbl]) => (
              <label key={k} className="col-row">
                <input type="checkbox" checked={cols[k]} onChange={(e) => setCols({ ...cols, [k]: e.target.checked })} />
                <span>{lbl}</span>
              </label>
            ))}
          </div>

          <div className="export-section-title" style={{ marginTop: 22 }}>Opciones</div>
          <label className="col-row">
            <input type="checkbox" checked={includeAlerts} onChange={(e) => setIncludeAlerts(e.target.checked)} />
            <span>Incluir columna de alertas activas</span>
          </label>
          <label className="col-row">
            <input type="checkbox" />
            <span>Enviar copia a mi correo</span>
          </label>
          <label className="col-row">
            <input type="checkbox" />
            <span>Programar como reporte recurrente</span>
          </label>
        </div>
      </div>
    </Modal>
  );
};

// ───────────────────────── Import ─────────────────────────
const ImportModal = ({ open, onClose }) => {
  const [step, setStep] = React.useState(1);
  const [file, setFile] = React.useState(null);
  const reset = () => { setStep(1); setFile(null); };
  React.useEffect(() => { if (open) reset(); }, [open]);

  const STEPS = ['Cargar archivo', 'Mapear columnas', 'Validar y revisar', 'Confirmar'];

  return (
    <Modal open={open} onClose={onClose}
      title="Importar empleados"
      subtitle="Carga masiva desde Excel o CSV. El motor generará obligaciones automáticas para cada registro válido."
      width={840}
      footer={
        <>
          <button className="btn" onClick={onClose}>Cancelar</button>
          {step > 1 && step < 4 && <button className="btn" onClick={() => setStep(step - 1)}>Atrás</button>}
          {step < 4 && <button className="btn primary" onClick={() => setStep(step + 1)} disabled={step === 1 && !file}>Continuar →</button>}
          {step === 4 && <button className="btn danger" onClick={onClose}>Importar 12 registros</button>}
        </>
      }>
      <div className="stepper">
        {STEPS.map((s, i) => (
          <div key={i} className={`step ${step === i + 1 ? 'active' : ''} ${step > i + 1 ? 'done' : ''}`}>
            <div className="step-num">{step > i + 1 ? <IconCheck size={12} /> : i + 1}</div>
            <span>{s}</span>
            {i < STEPS.length - 1 && <span className="step-line" />}
          </div>
        ))}
      </div>

      {step === 1 && (
        <div className="import-step">
          <div className="dropzone" onClick={() => setFile({ name: 'empleados-mayo-2026.xlsx', size: '24 KB', rows: 14 })}>
            <div className="dropzone-icon"><IconDoc size={28} /></div>
            <div style={{ fontSize: 15, fontWeight: 600 }}>Arrastra tu archivo aquí o haz click para seleccionar</div>
            <div className="muted" style={{ fontSize: 12.5 }}>Formatos: .xlsx, .xls, .csv · Máximo 5 MB · Hasta 1000 filas</div>
            <button className="btn" style={{ marginTop: 10 }}>Seleccionar archivo</button>
          </div>

          {file && (
            <div className="file-preview">
              <div className="export-file-icon" style={{ background: 'var(--green-100)', color: 'var(--green-600)' }}><IconCheck size={18} /></div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 13.5, fontWeight: 600 }}>{file.name}</div>
                <div className="muted mono" style={{ fontSize: 11.5 }}>{file.size} · {file.rows} filas detectadas · 14 columnas</div>
              </div>
              <button className="link-btn" onClick={() => setFile(null)}>Quitar</button>
            </div>
          )}

          <div className="info-panel">
            <div className="info-panel-icon"><IconDoc size={16} /></div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600 }}>¿Primera vez? Descarga la plantilla oficial</div>
              <div className="muted" style={{ fontSize: 12 }}>Incluye los 14 campos requeridos y los formatos válidos para cada uno.</div>
            </div>
            <button className="btn">Plantilla Excel</button>
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="import-step">
          <div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>
            Asigna cada columna de tu archivo a un campo de Atica SOMOS. Detectamos coincidencias automáticamente.
          </div>
          <div className="map-table">
            <div className="map-head">
              <div>Columna del archivo</div>
              <div>Vista previa</div>
              <div>Campo Atica</div>
              <div></div>
            </div>
            {[
              ['nombre_completo', 'Andrés F. Mejía', 'Nombre completo', 'auto'],
              ['cedula', '1.087.456.231', 'Documento', 'auto'],
              ['cargo', 'Op. Clasificación', 'Cargo', 'auto'],
              ['area', 'Operaciones', 'Área', 'auto'],
              ['sede', 'Cali', 'Sede', 'auto'],
              ['tipo_contrato', 'Fijo', 'Tipo de contrato', 'auto'],
              ['fecha_inicio', '2026-05-12', 'Fecha de ingreso', 'auto'],
              ['salario', '1620000', 'Salario base', 'auto'],
              ['email', 'andres.m@correo.com', 'Correo personal', 'auto'],
              ['celular', '+57 311 4567821', 'Teléfono celular', 'manual'],
              ['extra_1', 'Turno A', 'Sin asignar', 'unmapped'],
              ['extra_2', 'CC-040', 'Centro de costo', 'manual'],
            ].map((r, i) => (
              <div key={i} className="map-row">
                <div className="mono" style={{ fontSize: 12, color: 'var(--text)' }}>{r[0]}</div>
                <div className="muted mono" style={{ fontSize: 12 }}>{r[1]}</div>
                <div>
                  <div className={`map-select ${r[3]}`}>
                    {r[2]} <IconChevronDown size={14} />
                  </div>
                </div>
                <div>
                  {r[3] === 'auto' && <span className="pill green" style={{ fontSize: 10.5 }}>Auto</span>}
                  {r[3] === 'manual' && <span className="pill amber" style={{ fontSize: 10.5 }}>Manual</span>}
                  {r[3] === 'unmapped' && <span className="pill rose" style={{ fontSize: 10.5 }}>Sin asignar</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {step === 3 && (
        <div className="import-step">
          <div className="validation-summary">
            <div className="val-tile" style={{ borderLeft: '3px solid var(--green-600)' }}>
              <div className="val-num">12</div>
              <div className="val-lbl">Registros válidos</div>
              <div className="muted" style={{ fontSize: 11.5 }}>Listos para crear</div>
            </div>
            <div className="val-tile" style={{ borderLeft: '3px solid var(--amber-600)' }}>
              <div className="val-num" style={{ color: 'var(--amber-600)' }}>2</div>
              <div className="val-lbl">Con advertencias</div>
              <div className="muted" style={{ fontSize: 11.5 }}>Revisa antes de continuar</div>
            </div>
            <div className="val-tile" style={{ borderLeft: '3px solid var(--aguila-600)' }}>
              <div className="val-num" style={{ color: 'var(--aguila-600)' }}>0</div>
              <div className="val-lbl">Errores</div>
              <div className="muted" style={{ fontSize: 11.5 }}>Bloquean importación</div>
            </div>
          </div>
          <table className="data-table" style={{ marginTop: 14 }}>
            <thead><tr><th>#</th><th>Nombre</th><th>Documento</th><th>Cargo</th><th>Resultado</th></tr></thead>
            <tbody>
              {[
                ['1', 'Andrés Felipe Mejía', '1.087.456.231', 'Op. Clasificación', 'ok'],
                ['2', 'Laura Gómez Restrepo', '1.094.221.087', 'Op. Planta', 'ok'],
                ['3', 'Juan David Ruiz', '1.067.892.103', 'Aux. Calidad', 'ok'],
                ['4', 'Sandra Milena Ortiz', '52.487.123', 'Coord. Compras', 'warn'],
                ['5', 'Adriana Restrepo C.', '32.998.221', 'Aux. Calidad', 'ok'],
                ['6', 'Catalina Mesa V.', '1.013.776.554', 'Op. Aprovechamiento', 'warn'],
              ].map(r => (
                <tr key={r[0]}>
                  <td className="mono muted">{r[0]}</td>
                  <td style={{ fontWeight: 500 }}>{r[1]}</td>
                  <td className="mono">{r[2]}</td>
                  <td>{r[3]}</td>
                  <td>
                    {r[4] === 'ok' && <span className="pill green">✓ Válido</span>}
                    {r[4] === 'warn' && <span className="pill amber">Falta correo</span>}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
          <div className="muted" style={{ fontSize: 12.5, marginTop: 8 }}>Mostrando 6 de 14 registros · ver completo</div>
        </div>
      )}

      {step === 4 && (
        <div className="import-step">
          <div className="confirm-card">
            <div className="success-ring small"><IconRocket size={22} /></div>
            <div style={{ fontWeight: 600, fontSize: 17 }}>Listo para importar 12 colaboradores</div>
            <div className="muted" style={{ fontSize: 13, textAlign: 'center', maxWidth: 460 }}>
              Al confirmar, el motor de automatización generará obligaciones por cada cargo: dotación, capacitaciones, exámenes SST, documentos y checklist de onboarding.
            </div>
            <div className="confirm-grid">
              <div><div className="muted" style={{ fontSize: 11 }}>Empleados</div><div style={{ fontWeight: 700, fontSize: 18 }}>12</div></div>
              <div><div className="muted" style={{ fontSize: 11 }}>Tareas auto</div><div style={{ fontWeight: 700, fontSize: 18 }}>~144</div></div>
              <div><div className="muted" style={{ fontSize: 11 }}>Documentos</div><div style={{ fontWeight: 700, fontSize: 18 }}>~72</div></div>
              <div><div className="muted" style={{ fontSize: 11 }}>Notif. líderes</div><div style={{ fontWeight: 700, fontSize: 18 }}>5</div></div>
            </div>
          </div>
        </div>
      )}
    </Modal>
  );
};

// ───────────────────────── New Employee ─────────────────────────
// Per-cargo automation matrix preview (mock — values that the engine would emit)
const ROLE_MATRIX = {
  'Operario de Clasificación':       { area: 'Operaciones',   shift: 'Turno A · 6:00–14:00', cc: 'CC-040 Operaciones', leader: 'Luis Miguel Marín · Líder Operaciones',   risk: 'IV',  epp: 5, training: 4, exams: 3, docs: 6, onb: 12, salary: '1620000' },
  'Operaria de Planta':        { area: 'Operaciones',   shift: 'Turno A · 6:00–14:00', cc: 'CC-040 Operaciones', leader: 'Luis Miguel Marín · Líder Operaciones',   risk: 'IV',  epp: 4, training: 4, exams: 3, docs: 6, onb: 12, salary: '1450000' },
  'Operaria de Aprovechamiento':       { area: 'Aprovechamiento',      shift: 'Turno B · 14:00–22:00', cc: 'CC-041 Aprovechamiento',   leader: 'Patricia Ocampo · Líder Aprovechamiento',        risk: 'III', epp: 4, training: 3, exams: 2, docs: 6, onb: 10, salary: '1420000' },
  'Auxiliar de Calidad':       { area: 'Calidad',      shift: 'Tiempo completo',       cc: 'CC-050 Calidad',   leader: 'Carolina Restrepo · Jefe RRHH',          risk: 'II',  epp: 3, training: 5, exams: 2, docs: 6, onb: 10, salary: '1680000' },
  'Conductor':                 { area: 'Recolección', shift: 'Tiempo completo',       cc: 'CC-070 Logística', leader: 'Jorge Iván Patiño · Coord. Logística',   risk: 'V',   epp: 6, training: 5, exams: 4, docs: 7, onb: 12, salary: '1820000' },
  'Técnico de Mantenimiento':  { area: 'Mantenimiento',shift: 'Tiempo completo',       cc: 'CC-060 Mantto',    leader: 'Carolina Restrepo · Jefe RRHH',          risk: 'IV',  epp: 7, training: 6, exams: 3, docs: 6, onb: 12, salary: '2150000' },
};

const NewEmployeeModal = ({ open, onClose }) => {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    docType: 'CC', doc: '', firstName: '', lastName: '',
    birth: '14/03/1994', gender: 'Masculino', email: '', phone: '',
    role: 'Operario de Clasificación', area: 'Operaciones', site: 'Cali',
    cc: 'CC-040 Operaciones', shift: 'Turno A · 6:00–14:00',
    leader: 'Luis Miguel Marín · Líder Operaciones', vinc: 'Vinculación directa',
    contractType: 'Fijo a término', start: '12/05/2026', months: '6', probation: '60',
    workday: 'Tiempo completo', salary: '1620000', auxTransport: 'Sí — $ 200.000',
    eps: 'SURA', afp: 'Protección', cess: 'Porvenir', arl: 'SURA — Clase IV',
    box: 'Comfamiliar Valle del Cauca', bank: 'Bancolombia', accountType: 'Ahorros',
  });
  const reset = () => {
    setStep(1);
    setData(d => ({ ...d, doc: '', firstName: '', lastName: '', email: '', phone: '' }));
  };
  React.useEffect(() => { if (open) reset(); }, [open]);
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  // Sync defaults when role changes
  React.useEffect(() => {
    const m = ROLE_MATRIX[data.role];
    if (!m) return;
    setData(d => ({ ...d, area: m.area, shift: m.shift, cc: m.cc, leader: m.leader, salary: m.salary, arl: `SURA — Clase ${m.risk}` }));
  }, [data.role]);

  const matrix = ROLE_MATRIX[data.role] || ROLE_MATRIX['Operario de Clasificación'];
  const totalTasks = matrix.epp + matrix.training + matrix.exams + matrix.docs + matrix.onb;

  const STEPS = [
    { lbl: 'Identidad',    sub: 'Documento y datos personales' },
    { lbl: 'Cargo y sede', sub: 'Asignación operativa' },
    { lbl: 'Contrato',     sub: 'Compensación y afiliaciones' },
    { lbl: 'Revisar',      sub: 'Confirmar y activar motor' },
  ];

  const canPrev = step > 1;
  const canNext = step < 4;

  return (
    <Modal open={open} onClose={onClose}
      title="Nuevo empleado"
      subtitle="Al guardar, el motor generará obligaciones automáticas según el cargo, área y sede"
      width={960}
      noPad
      footer={
        <>
          <span className="muted" style={{ fontSize: 12.5, marginRight: 'auto' }}>
            Paso <b>{step}</b> de 4 · El motor creará <b>{totalTasks}</b> obligaciones al guardar
          </span>
          <button className="btn" onClick={onClose}>Cancelar</button>
          {canPrev && <button className="btn" onClick={() => setStep(step - 1)}><IconChevronLeft size={14} /> Atrás</button>}
          {canNext && <button className="btn primary" onClick={() => setStep(step + 1)}>Continuar <IconChevronRight size={14} /></button>}
          {step === 4 && <button className="btn danger" onClick={onClose}><IconZap size={14} /> Crear y activar motor</button>}
        </>
      }>
      <div className="ne-split">
        {/* ── Left rail: vertical stepper + sticky engine preview ── */}
        <aside className="ne-rail">
          <div className="ne-rail-eyebrow">Asistente · Nuevo empleado</div>
          {STEPS.map((s, i) => {
            const n = i + 1;
            const status = step === n ? 'active' : step > n ? 'done' : '';
            return (
              <button key={i} className={`ne-vstep ${status}`} onClick={() => step > n && setStep(n)} type="button">
                <div className="ne-vstep-num">{step > n ? <IconCheck size={13} /> : n}</div>
                <div>
                  <div className="ne-vstep-lbl">{s.lbl}</div>
                  <div className="ne-vstep-sub">{s.sub}</div>
                </div>
              </button>
            );
          })}

          <div className="ne-rail-engine">
            <div className="ne-rail-engine-ttl"><span className="dot" />Motor — Vista previa</div>
            <div className="ne-rail-engine-sub">Obligaciones que se crearán para <b style={{ color: 'white' }}>{data.role}</b></div>
            <div className="ne-rail-engine-row"><span><IconShirt size={12} /> Dotación</span><b>{matrix.epp}</b></div>
            <div className="ne-rail-engine-row"><span><IconBook size={12} /> Capacitaciones</span><b>{matrix.training}</b></div>
            <div className="ne-rail-engine-row"><span><IconShield size={12} /> Exámenes SST</span><b>{matrix.exams}</b></div>
            <div className="ne-rail-engine-row"><span><IconDoc size={12} /> Documentos</span><b>{matrix.docs}</b></div>
            <div className="ne-rail-engine-row"><span><IconRocket size={12} /> Pasos onboarding</span><b>{matrix.onb}</b></div>
          </div>
        </aside>

        {/* ── Right content ── */}
        <section className="ne-content">
          {step === 1 && (
            <>
              <div className="ne-step-head">
                <div className="ne-step-title">Identidad del colaborador</div>
                <div className="ne-step-sub">Datos personales y de contacto. Aplican para HV, contratos y portal del colaborador.</div>
              </div>

              <div className="ne-section">
                <div className="ne-section-ttl">Identificación</div>
                <div className="form-grid">
                  <FormField label="Tipo de documento" span={2}>
                    <select className="form-input" value={data.docType} onChange={e => set('docType', e.target.value)}>
                      <option>CC</option><option>CE</option><option>PA</option><option>PEP</option><option>TI</option>
                    </select>
                  </FormField>
                  <FormField label="Número de documento" span={4}>
                    <input className="form-input" placeholder="Ej. 1.087.456.231" value={data.doc} onChange={e => set('doc', e.target.value)} />
                  </FormField>
                </div>
              </div>

              <div className="ne-section">
                <div className="ne-section-ttl">Datos personales</div>
                <div className="form-grid">
                  <FormField label="Primer nombre y segundo (opcional)" span={3}>
                    <input className="form-input" placeholder="Andrés Felipe" value={data.firstName} onChange={e => set('firstName', e.target.value)} />
                  </FormField>
                  <FormField label="Apellidos" span={3}>
                    <input className="form-input" placeholder="Mejía Cardona" value={data.lastName} onChange={e => set('lastName', e.target.value)} />
                  </FormField>
                  <FormField label="Fecha de nacimiento" span={2}>
                    <input className="form-input" type="text" placeholder="DD/MM/AAAA" value={data.birth} onChange={e => set('birth', e.target.value)} />
                  </FormField>
                  <FormField label="Género" span={2}>
                    <select className="form-input" value={data.gender} onChange={e => set('gender', e.target.value)}>
                      <option>Masculino</option><option>Femenino</option><option>Otro</option>
                    </select>
                  </FormField>
                  <FormField label="Tipo de sangre" span={2}>
                    <select className="form-input"><option>O+</option><option>O-</option><option>A+</option><option>A-</option><option>B+</option><option>B-</option><option>AB+</option><option>AB-</option></select>
                  </FormField>
                </div>
              </div>

              <div className="ne-section">
                <div className="ne-section-ttl">Contacto</div>
                <div className="form-grid">
                  <FormField label="Correo personal" span={3}>
                    <input className="form-input" placeholder="ejemplo@correo.com" value={data.email} onChange={e => set('email', e.target.value)} />
                  </FormField>
                  <FormField label="Celular" span={3}>
                    <input className="form-input" placeholder="+57 311 ..." value={data.phone} onChange={e => set('phone', e.target.value)} />
                  </FormField>
                </div>
              </div>

              <div className="ne-callout">
                <IconAlert size={16} />
                <div>
                  <b>Validación SISBÉN y Registraduría:</b> al continuar, Atica SOMOS verificará el documento contra la base oficial. Los datos sensibles se almacenan bajo la <b>Política de tratamiento de datos</b> Ley 1581/2012.
                </div>
              </div>
            </>
          )}

          {step === 2 && (
            <>
              <div className="ne-step-head">
                <div className="ne-step-title">Cargo, sede y reporte</div>
                <div className="ne-step-sub">El cargo determina automáticamente la matriz de dotación, capacitaciones, exámenes SST y onboarding.</div>
              </div>

              <div className="ne-section">
                <div className="ne-section-ttl">Asignación</div>
                <div className="form-grid">
                  <FormField label="Cargo" span={3}>
                    <select className="form-input" value={data.role} onChange={e => set('role', e.target.value)}>
                      {Object.keys(ROLE_MATRIX).map(r => <option key={r}>{r}</option>)}
                    </select>
                  </FormField>
                  <FormField label="Área" span={3}>
                    <select className="form-input" value={data.area} onChange={e => set('area', e.target.value)}>
                      <option>Operaciones</option><option>Aprovechamiento</option><option>Calidad</option>
                      <option>Recolección</option><option>Mantenimiento</option><option>Administración</option>
                    </select>
                  </FormField>
                  <FormField label="Sede" span={2}>
                    <select className="form-input" value={data.site} onChange={e => set('site', e.target.value)}>
                      <option>Cali</option><option>Barranquilla</option><option>Bogotá</option>
                    </select>
                  </FormField>
                  <FormField label="Centro de costo" span={2}>
                    <select className="form-input" value={data.cc} onChange={e => set('cc', e.target.value)}>
                      <option>CC-040 Operaciones</option><option>CC-041 Aprovechamiento</option>
                      <option>CC-050 Calidad</option><option>CC-060 Mantto</option><option>CC-070 Logística</option>
                    </select>
                  </FormField>
                  <FormField label="Turno" span={2}>
                    <select className="form-input" value={data.shift} onChange={e => set('shift', e.target.value)}>
                      <option>Turno A · 6:00–14:00</option><option>Turno B · 14:00–22:00</option>
                      <option>Turno C · 22:00–6:00</option><option>Tiempo completo</option>
                    </select>
                  </FormField>
                </div>
              </div>

              <div className="ne-section">
                <div className="ne-section-ttl">Reporte y vinculación</div>
                <div className="form-grid">
                  <FormField label="Jefe directo" span={3}>
                    <select className="form-input" value={data.leader} onChange={e => set('leader', e.target.value)}>
                      <option>Luis Miguel Marín · Líder Operaciones</option>
                      <option>Patricia Ocampo · Líder Aprovechamiento</option>
                      <option>Carolina Restrepo · Jefe RRHH</option>
                      <option>Jorge Iván Patiño · Coord. Logística</option>
                    </select>
                  </FormField>
                  <FormField label="Tipo de vinculación" span={3}>
                    <select className="form-input" value={data.vinc} onChange={e => set('vinc', e.target.value)}>
                      <option>Vinculación directa</option><option>Aprendiz SENA</option>
                      <option>Outsourcing temporal</option><option>Practicante universitario</option>
                    </select>
                  </FormField>
                </div>
              </div>

              <div className="ne-role-summary">
                <div>
                  <div className="lbl">Riesgo SST (ARL)</div>
                  <div className="val">
                    <span className={`pill ${matrix.risk === 'V' ? 'rose' : matrix.risk === 'IV' ? 'amber' : 'green'}`}>Clase {matrix.risk}</span>
                  </div>
                </div>
                <div>
                  <div className="lbl">Salario sugerido</div>
                  <div className="val mono">$ {Number(matrix.salary).toLocaleString('es-CO')}</div>
                </div>
                <div>
                  <div className="lbl">Empleados activos en cargo</div>
                  <div className="val">{Math.max(2, matrix.epp + 1)} colaboradores</div>
                </div>
              </div>

              <div className="engine-preview">
                <div className="engine-preview-head">
                  <span className="engine-badge"><span className="dot" />Motor de automatización</span>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>Matriz "{data.role}" · {totalTasks} tareas</span>
                </div>
                <div className="ne-engine-tasks" style={{ padding: 14 }}>
                  <div className="ne-engine-task"><div className="icon-wrap"><IconShirt size={14} /></div><div><b>{matrix.epp} ítems de dotación</b><small>Uniforme, EPP, calzado · matriz por cargo</small></div></div>
                  <div className="ne-engine-task"><div className="icon-wrap"><IconBook size={14} /></div><div><b>{matrix.training} capacitaciones</b><small>Inducción + obligatorias del cargo</small></div></div>
                  <div className="ne-engine-task"><div className="icon-wrap"><IconShield size={14} /></div><div><b>{matrix.exams} exámenes ocupacionales</b><small>Ingreso, audiometría, espirometría</small></div></div>
                  <div className="ne-engine-task"><div className="icon-wrap"><IconDoc size={14} /></div><div><b>{matrix.docs} documentos</b><small>Para firma electrónica colaborador</small></div></div>
                </div>
              </div>
            </>
          )}

          {step === 3 && (
            <>
              <div className="ne-step-head">
                <div className="ne-step-title">Contrato, compensación y afiliaciones</div>
                <div className="ne-step-sub">La vinculación se generará en el formato legal correspondiente y enviará a firma electrónica.</div>
              </div>

              <div className="ne-section">
                <div className="ne-section-ttl">Contrato</div>
                <div className="form-grid">
                  <FormField label="Tipo de contrato" span={3}>
                    <select className="form-input" value={data.contractType} onChange={e => set('contractType', e.target.value)}>
                      <option>Fijo a término</option><option>Indefinido</option>
                      <option>Obra labor</option><option>Aprendizaje</option>
                    </select>
                  </FormField>
                  <FormField label="Duración (meses)" span={3}>
                    <input className="form-input" value={data.months} onChange={e => set('months', e.target.value)} />
                  </FormField>
                  <FormField label="Fecha de inicio" span={2}>
                    <input className="form-input" type="text" value={data.start} onChange={e => set('start', e.target.value)} />
                  </FormField>
                  <FormField label="Período de prueba (días)" span={2}>
                    <input className="form-input" value={data.probation} onChange={e => set('probation', e.target.value)} />
                  </FormField>
                  <FormField label="Jornada" span={2}>
                    <select className="form-input" value={data.workday} onChange={e => set('workday', e.target.value)}>
                      <option>Tiempo completo</option><option>Medio tiempo</option><option>Hora cátedra</option>
                    </select>
                  </FormField>
                </div>
              </div>

              <div className="ne-section">
                <div className="ne-section-ttl">Compensación</div>
                <div className="form-grid">
                  <FormField label="Salario base" span={3}>
                    <input className="form-input mono" value={data.salary} onChange={e => set('salary', e.target.value)} />
                  </FormField>
                  <FormField label="Auxilio de transporte" span={3}>
                    <select className="form-input" value={data.auxTransport} onChange={e => set('auxTransport', e.target.value)}>
                      <option>Sí — $ 200.000</option><option>No</option>
                    </select>
                  </FormField>
                </div>
              </div>

              <div className="ne-section">
                <div className="ne-section-ttl">Seguridad social y afiliaciones</div>
                <div className="form-grid">
                  <FormField label="EPS" span={2}><select className="form-input" value={data.eps} onChange={e => set('eps', e.target.value)}><option>SURA</option><option>Sanitas</option><option>Nueva EPS</option><option>Salud Total</option></select></FormField>
                  <FormField label="AFP" span={2}><select className="form-input" value={data.afp} onChange={e => set('afp', e.target.value)}><option>Protección</option><option>Porvenir</option><option>Colpensiones</option></select></FormField>
                  <FormField label="Cesantías" span={2}><select className="form-input" value={data.cess} onChange={e => set('cess', e.target.value)}><option>Porvenir</option><option>Protección</option><option>Colfondos</option></select></FormField>
                  <FormField label="ARL" span={3}><input className="form-input" value={data.arl} onChange={e => set('arl', e.target.value)} /></FormField>
                  <FormField label="Caja de compensación" span={3}><select className="form-input" value={data.box} onChange={e => set('box', e.target.value)}><option>Comfamiliar Valle del Cauca</option><option>Confa Atlántico</option><option>Compensar</option></select></FormField>
                </div>
              </div>

              <div className="ne-section">
                <div className="ne-section-ttl">Cuenta bancaria para nómina</div>
                <div className="form-grid">
                  <FormField label="Banco" span={3}><select className="form-input" value={data.bank} onChange={e => set('bank', e.target.value)}><option>Bancolombia</option><option>Davivienda</option><option>BBVA</option><option>Banco de Bogotá</option></select></FormField>
                  <FormField label="Tipo de cuenta" span={3}><select className="form-input" value={data.accountType} onChange={e => set('accountType', e.target.value)}><option>Ahorros</option><option>Corriente</option></select></FormField>
                </div>
              </div>
            </>
          )}

          {step === 4 && (
            <>
              <div className="ne-step-head">
                <div className="ne-step-title">Revisar y crear</div>
                <div className="ne-step-sub">Verifica los datos antes de activar el motor de automatización.</div>
              </div>

              <div className="review-card">
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div className="avatar" style={{ width: 56, height: 56, fontSize: 18 }}>
                    {(data.firstName?.[0] || 'A')}{(data.lastName?.[0] || 'M')}
                  </div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 18, fontWeight: 700 }}>{data.firstName || 'Andrés Felipe'} {data.lastName || 'Mejía Cardona'}</div>
                    <div className="muted" style={{ fontSize: 13 }}>{data.role} · {data.area} · {data.site}</div>
                  </div>
                  <span className="pill navy">● Pendiente activación</span>
                </div>
              </div>

              <div className="ne-review-grid">
                <div className="ne-review-card">
                  <div className="ne-review-card-ttl"><IconUsers size={14} /> Identidad</div>
                  <div className="ne-review-rows">
                    <div className="ne-review-row"><span className="k">Documento</span><span className="v mono">{data.docType} {data.doc || '1.087.456.231'}</span></div>
                    <div className="ne-review-row"><span className="k">Fecha nac.</span><span className="v mono">{data.birth}</span></div>
                    <div className="ne-review-row"><span className="k">Género</span><span className="v">{data.gender}</span></div>
                    <div className="ne-review-row"><span className="k">Correo</span><span className="v">{data.email || '—'}</span></div>
                    <div className="ne-review-row"><span className="k">Celular</span><span className="v mono">{data.phone || '—'}</span></div>
                  </div>
                </div>

                <div className="ne-review-card">
                  <div className="ne-review-card-ttl"><IconHome size={14} /> Cargo y sede</div>
                  <div className="ne-review-rows">
                    <div className="ne-review-row"><span className="k">Cargo</span><span className="v">{data.role}</span></div>
                    <div className="ne-review-row"><span className="k">Sede</span><span className="v">{data.site}</span></div>
                    <div className="ne-review-row"><span className="k">Centro de costo</span><span className="v">{data.cc}</span></div>
                    <div className="ne-review-row"><span className="k">Turno</span><span className="v">{data.shift}</span></div>
                    <div className="ne-review-row"><span className="k">Jefe directo</span><span className="v">{data.leader.split('·')[0].trim()}</span></div>
                  </div>
                </div>

                <div className="ne-review-card">
                  <div className="ne-review-card-ttl"><IconDoc size={14} /> Contrato</div>
                  <div className="ne-review-rows">
                    <div className="ne-review-row"><span className="k">Tipo</span><span className="v">{data.contractType} · {data.months} m</span></div>
                    <div className="ne-review-row"><span className="k">Inicio</span><span className="v mono">{data.start}</span></div>
                    <div className="ne-review-row"><span className="k">Período prueba</span><span className="v">{data.probation} días</span></div>
                    <div className="ne-review-row"><span className="k">Jornada</span><span className="v">{data.workday}</span></div>
                    <div className="ne-review-row"><span className="k">Salario</span><span className="v mono">$ {Number(data.salary || 0).toLocaleString('es-CO')}</span></div>
                  </div>
                </div>

                <div className="ne-review-card">
                  <div className="ne-review-card-ttl"><IconShield size={14} /> Afiliaciones</div>
                  <div className="ne-review-rows">
                    <div className="ne-review-row"><span className="k">EPS</span><span className="v">{data.eps}</span></div>
                    <div className="ne-review-row"><span className="k">AFP</span><span className="v">{data.afp}</span></div>
                    <div className="ne-review-row"><span className="k">Cesantías</span><span className="v">{data.cess}</span></div>
                    <div className="ne-review-row"><span className="k">ARL</span><span className="v">{data.arl}</span></div>
                    <div className="ne-review-row"><span className="k">Caja</span><span className="v">{data.box}</span></div>
                  </div>
                </div>
              </div>

              <div className="engine-preview">
                <div className="engine-preview-head">
                  <span className="engine-badge"><span className="dot" />Se generarán automáticamente</span>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>{totalTasks} obligaciones · 4 notificaciones</span>
                </div>
                <ul className="engine-list">
                  <li><IconShirt size={14} /> {matrix.epp} ítems de dotación según matriz "{data.role}"</li>
                  <li><IconBook size={14} /> {matrix.training} capacitaciones obligatorias asignadas</li>
                  <li><IconShield size={14} /> {matrix.exams} exámenes médicos ocupacionales programados</li>
                  <li><IconDoc size={14} /> {matrix.docs} documentos para firma del colaborador</li>
                  <li><IconRocket size={14} /> Checklist de onboarding de {matrix.onb} pasos creada</li>
                  <li><IconMegaphone size={14} /> Notificaciones a Líder, Almacén, SST, TI y Nómina</li>
                </ul>
              </div>
            </>
          )}
        </section>
      </div>
    </Modal>
  );
};

const FormField = ({ label, children, span = 3 }) => (
  <div className="form-field" style={{ gridColumn: `span ${span}` }}>
    <label>{label}</label>
    {children}
  </div>
);

window.ExportModal = ExportModal;
window.ImportModal = ImportModal;
window.NewEmployeeModal = NewEmployeeModal;