// Crear empleado — vincula a un empleado nuevo con una posición vacante del
// Organigrama, sin pasar por Reclutamiento ni por una solicitud de personal.
// La posición es el origen de toda la información organizacional; el usuario
// solo diligencia los datos propios de la persona y sus condiciones
// laborales. Consume window.OrgDataStore.crearEmpleadoEnPosicion
// (data-providers.jsx). El nombre técnico del componente cambia a
// CreateEmployeeWizard — el flujo anterior (DirectHireWizard, basado en
// solicitud aprobada) se reemplaza por completo; los métodos de
// contratación por solicitud en OrgDataStore se conservan sin usar, porque
// Solicitudes de personal todavía lee sus campos (estadoCierre, etc.).

const CE_STEPS = [
  { lbl: 'Seleccionar posición', sub: 'La posición vacante que ocupará el nuevo empleado' },
  { lbl: 'Datos del empleado', sub: 'Información personal y condiciones laborales' },
  { lbl: 'Revisar y crear', sub: 'Confirma el impacto antes de crear el empleado' },
];

const CE_DOC_TYPES = ['CC', 'CE', 'PA', 'PEP'];
const CE_EMPLOYEE_GROUPS = ['Operativo', 'Técnico', 'Liderazgo', 'Directivo', 'Aprendiz'];
const CE_PAYROLL_GROUPS = ['Nómina quincenal operativa', 'Nómina mensual administrativa', 'Nómina mensual directiva'];
const CE_SCHEDULES = ['Turno mañana (6:00 a.m. – 2:00 p.m.)', 'Turno tarde (2:00 p.m. – 10:00 p.m.)', 'Turno noche (10:00 p.m. – 6:00 a.m.)', 'Horario administrativo (7:00 a.m. – 5:00 p.m.)', 'Turnos rotativos'];
const CE_WORK_MODES = ['Presencial', 'Remoto', 'Híbrido'];

const _ce_todayISO = () => {
  const d = new Date();
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
};
const _ce_isEmail = (s) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(s || '');

const CE_FORM_EMPTY = () => ({
  tipoDocumento: 'CC', numeroDocumento: '', primerNombre: '', otrosNombres: '', primerApellido: '', segundoApellido: '',
  telefonoPersonal: '', correoPersonal: '', fechaIngreso: _ce_todayISO(),
  tipoContrato: 'Indefinido', fechaFinContrato: '', tipoEmpleado: 'Operativo', salario: '',
  grupoNomina: 'Nómina quincenal operativa', horario: 'Turnos rotativos', modalidad: 'Presencial',
});

const CERequired = () => <span aria-hidden="true" style={{ color: 'var(--rose-600)' }}> *</span>;

// ───────────────────────────── Paso 1 · Seleccionar posición ─────────────────────────────
const CE_POS_FILTROS_VACIOS = { pais: 'todos', sociedad: 'todas', area: 'todas' };

const CEPositionCard = ({ p, selected, onSelect }) => (
  <label className={`pos-select-card ${selected ? 'active' : ''}`}>
    <input type="radio" name="ce-posicion" checked={selected} onChange={onSelect} />
    <div className="pos-select-body">
      <div className="pos-select-top">
        <span className="mono pos-select-code">{p.codigo}</span>
        <span className="pill rose">Vacante</span>
      </div>
      <div className="pos-select-cargo">{p.cargo}</div>
      <div className="pos-select-meta">
        <span>{(COUNTRY_META[p.pais] || {}).flag} {(COUNTRY_META[p.pais] || {}).label || p.pais}</span>
        <span className="dotsep">·</span><span>{p.sociedad}</span>
        <span className="dotsep">·</span><span>{p.regional}</span>
        <span className="dotsep">·</span><span>{p.sede}</span>
        <span className="dotsep">·</span><span>{p.area}</span>
        <span className="dotsep">·</span><span className="mono">CC {p.centroCosto}</span>
      </div>
      <div className="pos-select-jefe muted mono">Reporta a {p.parentPositionCode || '—'} · {p.parentPositionLabel || 'Sin jefe asignado'}</div>
    </div>
  </label>
);

const CEPaso1 = ({ posiciones, posFiltros, setPosFiltros, posBusqueda, setPosBusqueda, posicionCodigo, setPosicionCodigo, posicionSeleccionada }) => {
  const paisOpts = [...new Set(posiciones.map(p => p.pais))];
  const sociedadOpts = [...new Set(posiciones.filter(p => posFiltros.pais === 'todos' || p.pais === posFiltros.pais).map(p => p.sociedad))];
  const areaOpts = [...new Set(posiciones
    .filter(p => posFiltros.pais === 'todos' || p.pais === posFiltros.pais)
    .filter(p => posFiltros.sociedad === 'todas' || p.sociedad === posFiltros.sociedad)
    .map(p => p.area))];

  const setFiltro = (k, v) => setPosFiltros((f) => {
    const next = { ...f, [k]: v };
    if (k === 'pais') { next.sociedad = 'todas'; next.area = 'todas'; }
    if (k === 'sociedad') next.area = 'todas';
    return next;
  });

  const q = posBusqueda.trim().toLowerCase();
  const posicionesFiltradas = posiciones.filter((p) => {
    if (posFiltros.pais !== 'todos' && p.pais !== posFiltros.pais) return false;
    if (posFiltros.sociedad !== 'todas' && p.sociedad !== posFiltros.sociedad) return false;
    if (posFiltros.area !== 'todas' && p.area !== posFiltros.area) return false;
    if (!q) return true;
    return [p.codigo, p.cargo, p.sociedad, p.regional, p.sede, p.area, p.centroCosto, p.parentPositionLabel]
      .filter(Boolean).some(v => v.toLowerCase().includes(q));
  });

  return (
    <>
      <div className="ne-step-head">
        <div className="ne-step-title">Seleccionar posición</div>
        <div className="ne-step-sub">Selecciona la posición vacante que ocupará el nuevo empleado. La información organizacional se cargará automáticamente.</div>
      </div>

      <div className="ne-section">
        <div className="ce-pos-toolbar">
          <div className="search" style={{ flex: 1, minWidth: 220, margin: 0 }}>
            <span className="icon"><IconSearch size={16} /></span>
            <input placeholder="Código, cargo, sociedad, sede, área, centro de costos…" value={posBusqueda} onChange={e => setPosBusqueda(e.target.value)} style={{ background: 'white' }} />
          </div>
          <div className="filter-select">
            <span className="filter-label">País</span>
            <select value={posFiltros.pais} onChange={e => setFiltro('pais', e.target.value)}>
              <option value="todos">Todos</option>
              {paisOpts.map(c => <option key={c} value={c}>{(COUNTRY_META[c] || {}).label || c}</option>)}
            </select>
            <IconChevronDown size={13} />
          </div>
          <div className="filter-select">
            <span className="filter-label">Sociedad</span>
            <select value={posFiltros.sociedad} onChange={e => setFiltro('sociedad', e.target.value)}>
              <option value="todas">Todas</option>
              {sociedadOpts.map(s => <option key={s} value={s}>{s}</option>)}
            </select>
            <IconChevronDown size={13} />
          </div>
          <div className="filter-select">
            <span className="filter-label">Área</span>
            <select value={posFiltros.area} onChange={e => setFiltro('area', e.target.value)}>
              <option value="todas">Todas</option>
              {areaOpts.map(a => <option key={a} value={a}>{a}</option>)}
            </select>
            <IconChevronDown size={13} />
          </div>
          <span className="muted" style={{ fontSize: 12, marginLeft: 'auto' }}>{posicionesFiltradas.length} posiciones vacantes</span>
        </div>

        {posicionesFiltradas.length === 0 ? (
          <div className="muted" style={{ fontSize: 12.5, padding: '18px 4px', textAlign: 'center' }}>
            Ninguna posición vacante coincide con la búsqueda o los filtros.
          </div>
        ) : (
          <div className="pos-select-list">
            {posicionesFiltradas.map(p => (
              <CEPositionCard key={p.codigo} p={p} selected={posicionCodigo === p.codigo} onSelect={() => setPosicionCodigo(p.codigo)} />
            ))}
          </div>
        )}
      </div>

      {posicionSeleccionada && (
        <div className="ne-section">
          <div className="ne-section-ttl">Resumen de la posición seleccionada</div>
          <div className="amp-resumen-grid">
            <div><span className="muted-xs">Código de posición</span><div className="mono">{posicionSeleccionada.codigo}</div></div>
            <div><span className="muted-xs">Cargo</span><div>{posicionSeleccionada.cargo}</div></div>
            <div><span className="muted-xs">País</span><div>{(COUNTRY_META[posicionSeleccionada.pais] || {}).label || posicionSeleccionada.pais}</div></div>
            <div><span className="muted-xs">Sociedad</span><div>{posicionSeleccionada.sociedad}</div></div>
            <div><span className="muted-xs">Regional</span><div>{posicionSeleccionada.regional}</div></div>
            <div><span className="muted-xs">Sede u oficina</span><div>{posicionSeleccionada.sede}</div></div>
            <div><span className="muted-xs">Área</span><div>{posicionSeleccionada.area}</div></div>
            {posicionSeleccionada.proceso && <div><span className="muted-xs">Proceso</span><div>{posicionSeleccionada.proceso}</div></div>}
            {posicionSeleccionada.subproceso && <div><span className="muted-xs">Subproceso</span><div>{posicionSeleccionada.subproceso}</div></div>}
            <div><span className="muted-xs">Centro de costos</span><div className="mono">{posicionSeleccionada.centroCosto}</div></div>
            {posicionSeleccionada.lineaNegocio && <div><span className="muted-xs">Línea de negocio</span><div>{posicionSeleccionada.lineaNegocio}</div></div>}
            <div><span className="muted-xs">Jefe inmediato</span><div>{posicionSeleccionada.parentPositionLabel || 'Sin jefe asignado'}{posicionSeleccionada.parentPositionCode ? <span className="mono muted"> ({posicionSeleccionada.parentPositionCode})</span> : null}</div></div>
          </div>
          <p className="muted-xs" style={{ marginTop: 10 }}>Si esta información no es correcta, la posición debe actualizarse desde el Organigrama antes de continuar.</p>
        </div>
      )}
    </>
  );
};

// ───────────────────────────── Paso 2 · Datos del empleado ─────────────────────────────
const CEPaso2 = ({ form, set, docError }) => {
  const emailError = form.correoPersonal && !_ce_isEmail(form.correoPersonal) ? 'Ingresa un correo electrónico válido.' : null;
  const phoneDigits = form.telefonoPersonal.replace(/\D/g, '');
  const phoneError = form.telefonoPersonal && phoneDigits.length < 7 ? 'Ingresa un número de teléfono válido.' : null;
  const fechaError = form.fechaIngreso && form.fechaIngreso > _ce_todayISO() ? 'La fecha de ingreso no puede ser posterior a la fecha actual.' : null;

  return (
    <>
      <div className="ne-step-head">
        <div className="ne-step-title">Datos del empleado</div>
        <div className="ne-step-sub">La posición ya definió el cargo y la ubicación organizacional — aquí solo se registran los datos propios de la persona.</div>
      </div>

      <div className="ne-section">
        <div className="ne-section-ttl">Información personal</div>
        <div className="form-grid">
          <FormField label={<>Tipo de documento<CERequired /></>} span={2}>
            <select className="form-input" value={form.tipoDocumento} onChange={e => set('tipoDocumento', e.target.value)}>
              {CE_DOC_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </FormField>
          <FormField label={<>Número de documento<CERequired /></>} span={4}>
            <input className="form-input" placeholder="Ej. 1.098.554.221" value={form.numeroDocumento} onChange={e => set('numeroDocumento', e.target.value)} aria-invalid={!!docError} />
            {docError && <div className="mp-error" role="alert">{docError}</div>}
          </FormField>
          <FormField label={<>Primer nombre<CERequired /></>} span={2}>
            <input className="form-input" placeholder="Ej. Jhon" value={form.primerNombre} onChange={e => set('primerNombre', e.target.value)} />
          </FormField>
          <FormField label="Otros nombres" span={2}>
            <input className="form-input" placeholder="Opcional" value={form.otrosNombres} onChange={e => set('otrosNombres', e.target.value)} />
          </FormField>
          <FormField label={<>Primer apellido<CERequired /></>} span={2}>
            <input className="form-input" placeholder="Ej. Cárdenas" value={form.primerApellido} onChange={e => set('primerApellido', e.target.value)} />
          </FormField>
          <FormField label="Segundo apellido" span={3}>
            <input className="form-input" placeholder="Opcional" value={form.segundoApellido} onChange={e => set('segundoApellido', e.target.value)} />
          </FormField>
          <FormField label={<>Fecha de ingreso<CERequired /></>} span={3}>
            <input className="form-input" type="date" max={_ce_todayISO()} value={form.fechaIngreso} onChange={e => set('fechaIngreso', e.target.value)} aria-invalid={!!fechaError} />
            {fechaError && <div className="mp-error" role="alert">{fechaError}</div>}
          </FormField>
          <FormField label={<>Teléfono personal<CERequired /></>} span={3}>
            <input className="form-input" type="tel" inputMode="numeric" maxLength={10} placeholder="10 dígitos" value={form.telefonoPersonal}
              onChange={e => set('telefonoPersonal', e.target.value.replace(/\D/g, '').slice(0, 10))} aria-invalid={!!phoneError} />
            {phoneError && <div className="mp-error" role="alert">{phoneError}</div>}
            <div className="mp-help">Este número se utilizará para la activación del usuario y la recuperación de contraseña.</div>
          </FormField>
          <FormField label="Correo electrónico personal" span={3}>
            <input className="form-input" type="email" placeholder="Opcional" value={form.correoPersonal} onChange={e => set('correoPersonal', e.target.value)} aria-invalid={!!emailError} />
            {emailError && <div className="mp-error" role="alert">{emailError}</div>}
          </FormField>
        </div>
      </div>

      <div className="ne-section">
        <div className="ne-section-ttl">Información laboral</div>
        <div className="form-grid">
          <FormField label="Tipo de contrato" span={3}>
            <select className="form-input" value={form.tipoContrato} onChange={e => set('tipoContrato', e.target.value)}>
              {EMP_CONTRACT_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </FormField>
          {form.tipoContrato !== 'Indefinido' && (
            <FormField label="Fecha de finalización" span={3}>
              <input className="form-input" type="date" value={form.fechaFinContrato} onChange={e => set('fechaFinContrato', e.target.value)} />
            </FormField>
          )}
          <FormField label="Tipo o grupo de empleado" span={3}>
            <select className="form-input" value={form.tipoEmpleado} onChange={e => set('tipoEmpleado', e.target.value)}>
              {CE_EMPLOYEE_GROUPS.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </FormField>
          <FormField label="Salario o asignación básica" span={3}>
            <input className="form-input mono" placeholder="$ 1.620.000" value={form.salario} onChange={e => set('salario', e.target.value)} />
          </FormField>
          <FormField label="Área o grupo de nómina" span={3}>
            <select className="form-input" value={form.grupoNomina} onChange={e => set('grupoNomina', e.target.value)}>
              {CE_PAYROLL_GROUPS.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </FormField>
          <FormField label="Horario o turno" span={3}>
            <select className="form-input" value={form.horario} onChange={e => set('horario', e.target.value)}>
              {CE_SCHEDULES.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </FormField>
          <FormField label="Modalidad de trabajo" span={3}>
            <select className="form-input" value={form.modalidad} onChange={e => set('modalidad', e.target.value)}>
              {CE_WORK_MODES.map(t => <option key={t} value={t}>{t}</option>)}
            </select>
          </FormField>
        </div>
      </div>
    </>
  );
};

// ───────────────────────────── Paso 3 · Revisar y crear ─────────────────────────────
const CEPaso3 = ({ form, posicion, headBefore, error }) => {
  const nombreCompleto = [form.primerNombre, form.otrosNombres, form.primerApellido, form.segundoApellido].map(s => s.trim()).filter(Boolean).join(' ');
  const ocupadoAntes = headBefore.real, ocupadoDespues = headBefore.real + 1;
  const vacanteAntes = headBefore.vacantes, vacanteDespues = headBefore.vacantes - 1;
  return (
    <>
      <div className="ne-step-head">
        <div className="ne-step-title">Revisar y crear</div>
        <div className="ne-step-sub">Verifica los datos y el impacto en el headcount antes de confirmar la creación.</div>
      </div>

      {error && (
        <div className="ne-callout" style={{ borderColor: 'var(--rose-600)' }}>
          <IconAlert size={16} />
          <div><b>No se pudo crear el empleado:</b> {error}</div>
        </div>
      )}

      <div className="ne-section">
        <div className="ne-section-ttl">Persona</div>
        <div className="amp-resumen-grid">
          <div><span className="muted-xs">Nombre completo</span><div>{nombreCompleto}</div></div>
          <div><span className="muted-xs">Tipo y número de documento</span><div className="mono">{form.tipoDocumento} {form.numeroDocumento}</div></div>
          <div><span className="muted-xs">Teléfono personal</span><div className="mono">{form.telefonoPersonal}</div></div>
          <div><span className="muted-xs">Correo personal</span><div>{form.correoPersonal || 'No registrado'}</div></div>
          <div><span className="muted-xs">Fecha de ingreso</span><div className="mono">{form.fechaIngreso}</div></div>
        </div>
      </div>

      <div className="ne-section">
        <div className="ne-section-ttl">Posición y estructura</div>
        <div className="amp-resumen-grid">
          <div><span className="muted-xs">Código de posición</span><div className="mono">{posicion.codigo}</div></div>
          <div><span className="muted-xs">Cargo</span><div>{posicion.cargo}</div></div>
          <div><span className="muted-xs">País</span><div>{(COUNTRY_META[posicion.pais] || {}).label || posicion.pais}</div></div>
          <div><span className="muted-xs">Sociedad</span><div>{posicion.sociedad}</div></div>
          <div><span className="muted-xs">Regional</span><div>{posicion.regional}</div></div>
          <div><span className="muted-xs">Sede</span><div>{posicion.sede}</div></div>
          <div><span className="muted-xs">Área</span><div>{posicion.area}</div></div>
          <div><span className="muted-xs">Centro de costos</span><div className="mono">{posicion.centroCosto}</div></div>
          <div><span className="muted-xs">Jefe inmediato</span><div>{posicion.parentPositionLabel || 'Sin jefe asignado'}</div></div>
        </div>
      </div>

      <div className="ne-section">
        <div className="ne-section-ttl">Condiciones laborales</div>
        <div className="amp-resumen-grid">
          <div><span className="muted-xs">Tipo de contrato</span><div>{form.tipoContrato}</div></div>
          {form.tipoContrato !== 'Indefinido' && <div><span className="muted-xs">Fecha de finalización</span><div className="mono">{form.fechaFinContrato || 'Sin información'}</div></div>}
          <div><span className="muted-xs">Grupo de empleado</span><div>{form.tipoEmpleado}</div></div>
          <div><span className="muted-xs">Salario</span><div className="mono">{form.salario || 'Sin información'}</div></div>
          <div><span className="muted-xs">Grupo de nómina</span><div>{form.grupoNomina}</div></div>
          <div><span className="muted-xs">Horario</span><div>{form.horario}</div></div>
          <div><span className="muted-xs">Modalidad</span><div>{form.modalidad}</div></div>
        </div>
      </div>

      <div className="ne-section-ttl">Impacto sobre el headcount</div>
      <div className="org-exp-before-after">
        <div className="org-exp-ba-col">
          <h5>Antes</h5>
          <div className="org-exp-stat-row">
            <div className="org-exp-stat"><span className="org-exp-stat-num">{headBefore.aprobado}</span><span className="muted-xs">Autorizado</span></div>
            <div className="org-exp-stat"><span className="org-exp-stat-num">{ocupadoAntes}</span><span className="muted-xs">Real</span></div>
            <div className="org-exp-stat"><span className="org-exp-stat-num" style={{ color: 'var(--rose-600)' }}>{vacanteAntes}</span><span className="muted-xs">Vacante</span></div>
          </div>
          <div style={{ marginTop: 10 }}><span className="pill rose">Vacante</span> <span className="muted" style={{ fontSize: 12 }}>{posicion.codigo}</span></div>
        </div>
        <div className="org-exp-ba-col">
          <h5>Después</h5>
          <div className="org-exp-stat-row">
            <div className="org-exp-stat"><span className="org-exp-stat-num">{headBefore.aprobado}</span><span className="muted-xs">Autorizado</span></div>
            <div className="org-exp-stat"><span className="org-exp-stat-num" style={{ color: 'var(--green-600)' }}>{ocupadoDespues}</span><span className="muted-xs">Real</span></div>
            <div className="org-exp-stat"><span className="org-exp-stat-num">{vacanteDespues}</span><span className="muted-xs">Vacante</span></div>
          </div>
          <div style={{ marginTop: 10 }}><span className="pill green">Ocupada</span> <span className="muted" style={{ fontSize: 12 }}>{posicion.codigo} · {nombreCompleto || 'Nuevo colaborador'}</span></div>
        </div>
      </div>
      <p className="muted" style={{ fontSize: 12, marginTop: 10 }}>El headcount autorizado no cambia. Solo cambian el headcount real y las posiciones vacantes de esta posición.</p>

      <div className="ne-section-ttl" style={{ marginTop: 4 }}>Fragmento del Organigrama afectado</div>
      <div className="dh-mini-tree">
        <div className="orgpos-card" style={{ opacity: .65, maxWidth: 220 }}>
          <div className="orgpos-code mono">{posicion.parentPositionCode || '—'}</div>
          <div className="orgpos-cargo">{posicion.parentPositionLabel || 'Sin jefe asignado'}</div>
        </div>
        <div className="orgpos-line-v" style={{ height: 20 }} />
        <div className="orgpos-card highlighted" style={{ maxWidth: 220 }}>
          <div className="orgpos-code mono">{posicion.codigo}</div>
          <div className="orgpos-cargo">{posicion.cargo}</div>
          <span className="pill green" style={{ marginTop: 6 }}>Ocupada tras confirmar</span>
        </div>
      </div>
    </>
  );
};

// ───────────────────────────── Confirmación ─────────────────────────────
const CEConfirmacion = ({ resultado, onClose, onVerEnListado }) => {
  const { empleado, posicion } = resultado;
  const [sapStatus, setSapStatus] = React.useState(empleado.sapSyncStatus);

  React.useEffect(() => {
    const onSync = (ev) => { if (ev.detail.empleadoId === empleado.id) setSapStatus(ev.detail.status); };
    window.addEventListener('atica:employee-sap-sync', onSync);
    return () => window.removeEventListener('atica:employee-sap-sync', onSync);
  }, [empleado.id]);

  const SAP_META = { pendiente: { label: 'Pendiente', pill: 'amber-soft' }, sincronizado: { label: 'Sincronizado', pill: 'green' }, fallida: { label: 'Pendiente de reintento', pill: 'rose' } };
  const sapMeta = SAP_META[sapStatus] || SAP_META.pendiente;

  return (
    <Modal open onClose={onClose} title="Empleado creado" subtitle="El cambio ya es visible en Empleados y en el Organigrama" width={620}
      footer={<button className="btn primary" onClick={onClose}>Cerrar</button>}>
      <div className="ne-callout" style={{ borderColor: 'var(--green-600)', marginBottom: 16 }}>
        <IconCheck size={16} style={{ color: 'var(--green-600)' }} />
        <div>El empleado fue creado correctamente y la posición ha sido ocupada.</div>
      </div>
      <div className="amp-resumen-grid">
        <div><span className="muted-xs">ID del empleado</span><div className="mono">{empleado.id}</div></div>
        <div><span className="muted-xs">Nombre completo</span><div>{empleado.name}</div></div>
        <div><span className="muted-xs">Usuario generado</span><div className="mono">{empleado.usuario.username}</div></div>
        <div><span className="muted-xs">Estado del usuario</span><div><span className="pill amber-soft">Pendiente</span></div></div>
        <div><span className="muted-xs">Código de posición</span><div className="mono">{posicion.codigo}</div></div>
        <div><span className="muted-xs">Cargo</span><div>{posicion.cargo}</div></div>
        <div><span className="muted-xs">Estado de la posición</span><div><span className="pill green">Ocupada</span></div></div>
        <div><span className="muted-xs">Fecha de ingreso</span><div className="mono">{empleado.hire}</div></div>
        <div><span className="muted-xs">Automatizaciones</span><div><span className="pill navy">Generadas</span></div></div>
        <div><span className="muted-xs">Sincronización con SAP</span><div><span className={`pill ${sapMeta.pill}`}>{sapMeta.label}</span></div></div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 18 }}>
        <button className="btn" onClick={() => onVerEnListado(empleado)}>
          <IconUsers size={14} /> Ver empleado en el listado
        </button>
        <button className="btn" onClick={() => { onClose(); window.__navigateToModule && window.__navigateToModule('orgchart', { tab: 'aprobado', focusCode: posicion.codigo }); }}>
          <IconSitemap size={14} /> Ver en el Organigrama
        </button>
      </div>
    </Modal>
  );
};

// ───────────────────────────── Confirmación de salida sin guardar ─────────────────────────────
const CEExitConfirm = ({ onContinue, onDiscard }) => (
  <Modal open onClose={onContinue} title="Se perderán los datos diligenciados en este proceso." width={420}
    footer={<>
      <button className="btn" onClick={onContinue}>Continuar editando</button>
      <button className="btn danger solid" onClick={onDiscard}>Salir sin guardar</button>
    </>}>
    <p className="muted" style={{ fontSize: 13, lineHeight: 1.5 }}>No se creará el empleado, no se modificará la posición y el headcount no cambiará.</p>
  </Modal>
);

// ───────────────────────────── Asistente ─────────────────────────────
const CreateEmployeeWizard = ({ open, onClose, onCreated }) => {
  const [step, setStep] = React.useState(1);
  const [posFiltros, setPosFiltros] = React.useState(CE_POS_FILTROS_VACIOS);
  const [posBusqueda, setPosBusqueda] = React.useState('');
  const [posicionCodigo, setPosicionCodigo] = React.useState(null);
  const [form, setForm] = React.useState(CE_FORM_EMPTY());
  const [resultado, setResultado] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [showExitConfirm, setShowExitConfirm] = React.useState(false);

  const reset = () => {
    setStep(1); setPosFiltros(CE_POS_FILTROS_VACIOS); setPosBusqueda(''); setPosicionCodigo(null);
    setForm(CE_FORM_EMPTY()); setResultado(null); setError(null); setShowExitConfirm(false);
  };
  React.useEffect(() => { if (open) reset(); }, [open]);

  if (!open) return null;

  const posiciones = window.OrgDataStore.getPosicionesDisponiblesParaContratacion();
  const posicionSeleccionada = posicionCodigo ? posiciones.find(p => p.codigo === posicionCodigo) : null;

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const numDoc = form.numeroDocumento.trim();
  const docMatch = numDoc ? window.OrgDataStore.buscarEmpleadoPorDocumento(form.tipoDocumento, numDoc) : null;
  const docError = docMatch
    ? (docMatch.status === 'activo' || docMatch.status === 'onboarding'
      ? 'Ya existe un empleado activo con este tipo y número de documento.'
      : 'Esta persona cuenta con un historial laboral previo. No es posible crear un registro duplicado.')
    : null;
  const emailValido = !form.correoPersonal || _ce_isEmail(form.correoPersonal);
  const phoneValido = form.telefonoPersonal.replace(/\D/g, '').length >= 7;
  const fechaValida = !!form.fechaIngreso && form.fechaIngreso <= _ce_todayISO();

  const paso1Valido = !!posicionSeleccionada;
  const paso2Valido = !!numDoc && !docError && !!form.primerNombre.trim() && !!form.primerApellido.trim()
    && !!form.telefonoPersonal.trim() && phoneValido && emailValido && fechaValida;

  const hayDatosDiligenciados = !!posicionCodigo || !!numDoc || !!form.primerNombre.trim() || !!form.primerApellido.trim() || !!form.telefonoPersonal.trim();

  const requestClose = () => {
    if (resultado) { onClose(); return; }
    if (hayDatosDiligenciados) { setShowExitConfirm(true); return; }
    onClose();
  };

  const confirmar = () => {
    const r = window.OrgDataStore.crearEmpleadoEnPosicion({
      posicionCodigo,
      tipoDocumento: form.tipoDocumento, numeroDocumento: numDoc,
      primerNombre: form.primerNombre.trim(), otrosNombres: form.otrosNombres.trim(),
      primerApellido: form.primerApellido.trim(), segundoApellido: form.segundoApellido.trim(),
      telefono: form.telefonoPersonal.trim(), email: form.correoPersonal.trim(),
      fechaIngreso: form.fechaIngreso,
      tipoContrato: form.tipoContrato, fechaFinContrato: form.fechaFinContrato,
      tipoEmpleado: form.tipoEmpleado, salario: form.salario, grupoNomina: form.grupoNomina,
      horario: form.horario, modalidad: form.modalidad,
    });
    if (r.error) { setError(r.error); return; }
    setError(null);
    setResultado(r);
  };

  const headBefore = posicionSeleccionada ? window.OrgDataStore.getHeadcountPorCargo(posicionSeleccionada.cargoId) : null;

  if (resultado) {
    return (
      <CEConfirmacion
        resultado={resultado}
        onClose={onClose}
        onVerEnListado={(empleado) => { onClose(); onCreated && onCreated(empleado); }}
      />
    );
  }

  const canPrev = step > 1;
  const canNext = step === 1 ? paso1Valido : paso2Valido;

  return (
    <>
      <Modal open={open} onClose={requestClose}
        title="Crear empleado"
        subtitle="Vincula a un nuevo empleado con una posición vacante del Organigrama"
        width={960} noPad
        footer={
          <>
            <span className="muted" style={{ fontSize: 12.5, marginRight: 'auto' }}>Paso <b>{step}</b> de 3</span>
            <button className="btn" onClick={requestClose}>Cancelar</button>
            {canPrev && <button className="btn" onClick={() => setStep(step - 1)}><IconChevronLeft size={14} /> Atrás</button>}
            {step < 3 && <button className="btn primary" disabled={!canNext} onClick={() => setStep(step + 1)}>Continuar <IconChevronRight size={14} /></button>}
            {step === 3 && <button className="btn primary" disabled={!posicionSeleccionada} onClick={confirmar}><IconCheck size={14} /> Crear empleado</button>}
          </>
        }>
        <div className="ne-split">
          <aside className="ne-rail">
            <div className="ne-rail-eyebrow">Asistente · Crear empleado</div>
            {CE_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>
              );
            })}
          </aside>

          <section className="ne-content">
            {step === 1 && (
              <CEPaso1
                posiciones={posiciones} posFiltros={posFiltros} setPosFiltros={setPosFiltros}
                posBusqueda={posBusqueda} setPosBusqueda={setPosBusqueda}
                posicionCodigo={posicionCodigo} setPosicionCodigo={setPosicionCodigo}
                posicionSeleccionada={posicionSeleccionada}
              />
            )}
            {step === 2 && <CEPaso2 form={form} set={set} docError={docError} />}
            {step === 3 && posicionSeleccionada && headBefore && (
              <CEPaso3 form={form} posicion={posicionSeleccionada} headBefore={headBefore} error={error} />
            )}
            {step === 3 && !posicionSeleccionada && (
              <div className="ne-callout" style={{ borderColor: 'var(--rose-600)' }}>
                <IconAlert size={16} />
                <div>La posición seleccionada ya no se encuentra disponible. Selecciona otra posición para continuar.</div>
              </div>
            )}
          </section>
        </div>
      </Modal>

      {showExitConfirm && (
        <CEExitConfirm
          onContinue={() => setShowExitConfirm(false)}
          onDiscard={() => { setShowExitConfirm(false); onClose(); }}
        />
      )}
    </>
  );
};

window.CreateEmployeeWizard = CreateEmployeeWizard;