// Formación y desarrollo — Capacitación externa (Solicitudes del líder +
// aprobación de GH, Seguimiento y costos). Consume training-requirements-data.jsx.

const trExtEquipoDe = (currentRole) => currentRole === 'jefe' ? FORMATION_EMPLOYEES.filter(e => e.jefeInmediato === 'Luis Miguel Marín') : FORMATION_EMPLOYEES;
const TR_EXT_JEFE_ID = 'E0067';

// ───────────────────────────── Wizard de solicitud (rol Jefe) ─────────
const TrSolicitudWizard = ({ onClose, onCreated, solicitudBase }) => {
  const [step, setStep] = React.useState(1);
  const [empId, setEmpId] = React.useState((solicitudBase && solicitudBase.empId) || '');
  const [categoria, setCategoria] = React.useState((solicitudBase && solicitudBase.categoria) || EXTERNAL_CATEGORIAS[0]);
  const [capacitogramaId, setCapacitogramaId] = React.useState((solicitudBase && solicitudBase.capacitogramaId) || '');

  const equipo = trExtEquipoDe('jefe');
  const emp = getFormationEmployee(empId);
  const cursos = cursosExternosPorCategoria(categoria);
  const curso = FORMATION_CAPACITOGRAMA.find(c => c.id === capacitogramaId);

  const canNext = step === 1 ? !!emp : step === 2 ? true : step === 3 ? !!categoria : step === 4 ? !!capacitogramaId : true;

  const enviar = () => {
    onCreated({
      id: solicitudBase ? solicitudBase.id : `SOLX-${Date.now().toString(36)}`,
      empId, capacitogramaId, categoria, curso: curso.curso,
      solicitadoPor: TR_EXT_JEFE_ID, fecha: FORMATION_DEMO_TODAY, estado: 'En revisión', comentario: null,
    });
  };

  return (
    <Modal open onClose={onClose} title={solicitudBase ? 'Editar y reenviar solicitud' : 'Nueva solicitud de capacitación externa'} subtitle={`Paso ${step} de 5`} width={560}
      footer={<>
        <button className="btn" onClick={onClose}>Cancelar</button>
        {step > 1 && <button className="btn" onClick={() => setStep(step - 1)}><IconChevronLeft size={13} /> Atrás</button>}
        {step < 5 && <button className="btn primary" disabled={!canNext} onClick={() => setStep(step + 1)}>Continuar <IconChevronRight size={13} /></button>}
        {step === 5 && <button className="btn primary" onClick={enviar}><IconCheck size={13} /> Enviar solicitud</button>}
      </>}>
      {step === 1 && (
        <div>
          <p className="muted-xs" style={{ marginBottom: 8 }}>Ingresa o selecciona la cédula del colaborador de tu equipo.</p>
          <select className="form-input" value={empId} onChange={e => setEmpId(e.target.value)}>
            <option value="">— Selecciona —</option>
            {equipo.map(e => <option key={e.id} value={e.id}>{e.doc} · {e.name}</option>)}
          </select>
        </div>
      )}
      {step === 2 && emp && (
        <div className="amp-resumen-grid">
          <div><span className="muted-xs">Nombre</span><div>{emp.name}</div></div>
          <div><span className="muted-xs">Cargo</span><div>{emp.cargo}</div></div>
          <div><span className="muted-xs">Empresa</span><div>{emp.sociedad}</div></div>
          <div><span className="muted-xs">Regional</span><div>{emp.regional}</div></div>
          <div><span className="muted-xs">Planta</span><div>{emp.planta}</div></div>
        </div>
      )}
      {step === 3 && (
        <div>
          <p className="muted-xs" style={{ marginBottom: 8 }}>Elige la categoría del curso.</p>
          <select className="form-input" value={categoria} onChange={e => { setCategoria(e.target.value); setCapacitogramaId(''); }}>
            {EXTERNAL_CATEGORIAS.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
        </div>
      )}
      {step === 4 && (
        <div>
          <p className="muted-xs" style={{ marginBottom: 8 }}>Cursos disponibles en "{categoria}", filtrados desde el Capacitograma.</p>
          <div className="range-list">
            {cursos.map(c => (
              <label key={c.id} className={`range-row ${capacitogramaId === c.id ? 'active' : ''}`}>
                <input type="radio" name="curso-ext" checked={capacitogramaId === c.id} onChange={() => setCapacitogramaId(c.id)} />
                <div><div style={{ fontWeight: 600, fontSize: 13 }}>{c.curso}</div><div className="muted-xs">{c.duracionHoras} h · vigencia {c.vigenciaMeses} meses</div></div>
              </label>
            ))}
            {cursos.length === 0 && <p className="muted-xs">No hay cursos activos en esta categoría.</p>}
          </div>
        </div>
      )}
      {step === 5 && emp && curso && (
        <div className="amp-resumen-grid">
          <div><span className="muted-xs">Colaborador</span><div>{emp.name}</div></div>
          <div><span className="muted-xs">Cargo</span><div>{emp.cargo}</div></div>
          <div><span className="muted-xs">Categoría</span><div>{categoria}</div></div>
          <div><span className="muted-xs">Curso</span><div>{curso.curso}</div></div>
          <div><span className="muted-xs">Duración</span><div className="mono">{curso.duracionHoras} h</div></div>
          <div><span className="muted-xs">Vigencia</span><div className="mono">{curso.vigenciaMeses} meses</div></div>
        </div>
      )}
    </Modal>
  );
};

// ───────────────────────────── Solicitudes (jefe + validación GH) ─────────
const TR_SOLX_ESTADO_TONE = { 'En revisión': 'navy', Aprobado: 'green', Devuelto: 'amber', Rechazado: 'rose' };

const TrDecisionModal = ({ solicitud, decision, onClose, onConfirm }) => {
  const [comentario, setComentario] = React.useState('');
  const requiereComentario = decision !== 'Aprobado';
  return (
    <Modal open onClose={onClose} title={`${decision} solicitud`} subtitle={solicitud.curso} width={460}
      footer={<><button className="btn" onClick={onClose}>Cancelar</button><button className="btn primary" disabled={requiereComentario && !comentario.trim()} onClick={() => onConfirm(comentario)}>Confirmar</button></>}>
      <div className="form-field">
        <label>Comentario{requiereComentario && <span style={{ color: 'var(--rose-600)' }}> *</span>}</label>
        <textarea className="form-input" rows={3} value={comentario} onChange={e => setComentario(e.target.value)} placeholder={requiereComentario ? 'Obligatorio para devolver o rechazar' : 'Opcional'} />
        {requiereComentario && !comentario.trim() && <div className="mp-error" role="alert">El comentario es obligatorio para {decision.toLowerCase()}.</div>}
      </div>
    </Modal>
  );
};

const TrExternalRequests = ({ currentRole, toast }) => {
  const [solicitudes, setSolicitudes] = React.useState(() => [...FORMATION_SOLICITUDES_EXTERNAS]);
  const [seguimiento, setSeguimiento] = React.useState(() => [...FORMATION_SEGUIMIENTO_EXTERNO]);
  const [wizardOpen, setWizardOpen] = React.useState(false);
  const [editando, setEditando] = React.useState(null);
  const [decisionFor, setDecisionFor] = React.useState(null); // { solicitud, decision }
  const [estadoFiltro, setEstadoFiltro] = React.useState('todos');

  const persistirSolicitudes = (next) => { window.FORMATION_SOLICITUDES_EXTERNAS.length = 0; window.FORMATION_SOLICITUDES_EXTERNAS.push(...next); };
  const persistirSeguimiento = (next) => { window.FORMATION_SEGUIMIENTO_EXTERNO.length = 0; window.FORMATION_SEGUIMIENTO_EXTERNO.push(...next); };

  const visibles = currentRole === 'jefe' ? solicitudes.filter(s => s.solicitadoPor === TR_EXT_JEFE_ID) : solicitudes;
  const filas = visibles.filter(s => estadoFiltro === 'todos' || s.estado === estadoFiltro);

  const guardarSolicitud = (solicitud) => {
    const existe = solicitudes.some(s => s.id === solicitud.id);
    const next = existe ? solicitudes.map(s => s.id === solicitud.id ? solicitud : s) : [solicitud, ...solicitudes];
    setSolicitudes(next); persistirSolicitudes(next);
    setWizardOpen(false); setEditando(null);
    toast && toast(existe ? 'Solicitud reenviada a revisión' : 'Solicitud enviada a revisión de GH');
  };

  const decidir = (comentario) => {
    const { solicitud, decision } = decisionFor;
    const next = solicitudes.map(s => s.id === solicitud.id ? { ...s, estado: decision, comentario: comentario || null } : s);
    setSolicitudes(next); persistirSolicitudes(next);
    if (decision === 'Aprobado') {
      const curso = FORMATION_CAPACITOGRAMA.find(c => c.id === solicitud.capacitogramaId);
      const nuevoSeguimiento = {
        id: `SGX-${Date.now().toString(36)}`, empId: solicitud.empId, solicitudId: solicitud.id, capacitogramaId: solicitud.capacitogramaId,
        examenEstado: curso.aplicaExamen ? 'No aplica' : 'No aplica', fechaExamen: null, estadoSolicitud: 'Programado a curso',
        horas: curso.duracionHoras, anio: Number(FORMATION_DEMO_TODAY.slice(0, 4)), fechaRealizacion: null, fechaVencimiento: null, empresaCertificadora: null,
        valorCurso: 0, valorColaborador: 0, autorizaDescuento: 'No', reportaNomina: 'No', centroCosto: getFormationEmployee(solicitud.empId)?.centroCosto || '', costeo: '', ordenCompra: null, liberacionOC: 'No', proveedor: null, factura: null, comentarios: 'Creado automáticamente al aprobar la solicitud.',
        soportes: [{ tipo: 'Certificado del proveedor', nombre: null, estado: 'Pendiente' }],
      };
      const nextSeg = [nuevoSeguimiento, ...seguimiento];
      setSeguimiento(nextSeg); persistirSeguimiento(nextSeg);
    }
    setDecisionFor(null);
    toast && toast(`Solicitud ${decision.toLowerCase()}`);
  };

  return (
    <div>
      <div className="card">
        <div className="card-head">
          <div><h3>{currentRole === 'jefe' ? 'Mis solicitudes de capacitación externa' : 'Aprobación de solicitudes externas'}</h3><div className="sub">{filas.length} solicitudes</div></div>
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            <div className="filter-select">
              <span className="filter-label">Estado</span>
              <select value={estadoFiltro} onChange={e => setEstadoFiltro(e.target.value)}>
                <option value="todos">Todos</option>{EXTERNAL_SOLICITUD_ESTADOS.map(s => <option key={s} value={s}>{s}</option>)}
              </select>
              <IconChevronDown size={13} />
            </div>
            {currentRole === 'jefe' && <button className="btn primary" onClick={() => setWizardOpen(true)}><IconPlus size={14} /> Nueva solicitud</button>}
          </div>
        </div>
        <div className="ep-table-wrap">
          <table className="data-table">
            <thead><tr><th>Colaborador</th><th>Categoría</th><th>Curso</th><th>Fecha</th><th>Estado</th><th>Comentario</th><th></th></tr></thead>
            <tbody>
              {filas.map(s => {
                const emp = getFormationEmployee(s.empId);
                return (
                  <tr key={s.id}>
                    <td style={{ fontWeight: 500 }}>{emp?.name}</td><td>{s.categoria}</td><td>{s.curso}</td>
                    <td className="mono">{_fd_labelCO(s.fecha)}</td>
                    <td><span className={`pill ${TR_SOLX_ESTADO_TONE[s.estado]}`}>{s.estado}</span></td>
                    <td className="muted" style={{ fontSize: 12 }}>{s.comentario || '—'}</td>
                    <td style={{ textAlign: 'right', display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
                      {currentRole === 'jefe' && s.estado === 'Devuelto' && <button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => setEditando(s)}>Editar y reenviar</button>}
                      {currentRole !== 'jefe' && s.estado === 'En revisión' && (
                        <>
                          <button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => setDecisionFor({ solicitud: s, decision: 'Devuelto' })}>Devolver</button>
                          <button className="btn danger" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => setDecisionFor({ solicitud: s, decision: 'Rechazado' })}>Rechazar</button>
                          <button className="btn primary" style={{ padding: '4px 10px', fontSize: 12 }} onClick={() => setDecisionFor({ solicitud: s, decision: 'Aprobado' })}>Aprobar</button>
                        </>
                      )}
                    </td>
                  </tr>
                );
              })}
              {filas.length === 0 && <tr><td colSpan={7} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>No hay solicitudes con este filtro.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>
      {wizardOpen && <TrSolicitudWizard onClose={() => setWizardOpen(false)} onCreated={guardarSolicitud} />}
      {editando && <TrSolicitudWizard solicitudBase={editando} onClose={() => setEditando(null)} onCreated={guardarSolicitud} />}
      {decisionFor && <TrDecisionModal solicitud={decisionFor.solicitud} decision={decisionFor.decision} onClose={() => setDecisionFor(null)} onConfirm={decidir} />}
    </div>
  );
};

// ───────────────────────────── Seguimiento y costos ─────────
const TrExternalTrackingDrawer = ({ registro, currentRole, onClose, onSave, toast }) => {
  const emp = getFormationEmployee(registro.empId);
  const curso = FORMATION_CAPACITOGRAMA.find(c => c.id === registro.capacitogramaId);
  const [form, setForm] = React.useState(registro);
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const esGH = currentRole !== 'jefe';

  return (
    <div className="tr-side-overlay" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="tr-side-panel" style={{ width: 760 }}>
        <div className="tr-side-head">
          <div><div className="tr-side-title">{emp.name}</div><div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{curso?.curso}</div></div>
          <button className="icon-btn" onClick={onClose} aria-label="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="tr-side-body">
          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Datos del empleado y solicitud <IconShield size={12} style={{ opacity: 0.5, marginLeft: 4 }} /></h4>
            <div className="ic-prov-info">
              <div><div className="muted-xs">Documento</div><div className="mono">{emp.doc}</div></div>
              <div><div className="muted-xs">Nombre</div><div>{emp.name}</div></div>
              <div><div className="muted-xs">Empresa</div><div>{emp.sociedad}</div></div>
              <div><div className="muted-xs">Regional</div><div>{emp.regional}</div></div>
              <div><div className="muted-xs">Planta</div><div>{emp.planta}</div></div>
              <div><div className="muted-xs">Línea de negocio</div><div>{emp.lineaNegocio}</div></div>
              <div><div className="muted-xs">Proceso</div><div>{emp.proceso}</div></div>
              <div><div className="muted-xs">Subproceso</div><div>{emp.subproceso}</div></div>
              <div><div className="muted-xs">Cargo</div><div>{emp.cargo}</div></div>
              <div><div className="muted-xs">Género</div><div>{emp.genero}</div></div>
              <div><div className="muted-xs">Fecha de ingreso</div><div className="mono">{_fd_labelCO(emp.fechaIngreso)}</div></div>
              <div><div className="muted-xs">Celular</div><div className="mono">{emp.celular}</div></div>
              <div><div className="muted-xs">Correo</div><div>{emp.correo}</div></div>
              <div><div className="muted-xs">Jefe inmediato</div><div>{emp.jefeInmediato}</div></div>
              <div><div className="muted-xs">Categoría</div><div>{curso?.categoria}</div></div>
              <div><div className="muted-xs">Curso</div><div>{curso?.curso}</div></div>
            </div>
            {emp.historialContractual && (
              <div style={{ marginTop: 12 }}>
                <div className="muted-xs" style={{ marginBottom: 6 }}>Línea de tiempo contractual — el historial de cursos y certificados se conserva pese al cambio</div>
                <div className="tr-reind-timeline">
                  {emp.historialContractual.map((h, i) => (
                    <div key={i} className="tr-reind-year">
                      <div className="tr-reind-dot" />
                      <div><div style={{ fontWeight: 600, fontSize: 12.5 }}>{h.tipo} · {h.empresa}</div><div className="muted-xs mono">{_fd_labelCO(h.desde)} → {h.hasta ? _fd_labelCO(h.hasta) : 'actual'}</div></div>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </section>

          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Reglas del Capacitograma <IconShield size={12} style={{ opacity: 0.5, marginLeft: 4 }} /></h4>
            <div className="ic-prov-info">
              <div><div className="muted-xs">Duración</div><div className="mono">{curso?.duracionHoras} h</div></div>
              <div><div className="muted-xs">Aplica examen</div><div>{curso?.aplicaExamen ? 'Sí' : 'No'}</div></div>
              <div><div className="muted-xs">Periodicidad del examen</div><div>{curso?.periodicidadExamenMeses ? `${curso.periodicidadExamenMeses} meses` : 'No aplica'}</div></div>
              <div><div className="muted-xs">Frecuencia del curso</div><div>{curso?.frecuenciaMeses ? `${curso.frecuenciaMeses} meses` : 'Una vez'}</div></div>
            </div>
          </section>

          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Gestión académica y examen</h4>
            <div className="form-grid">
              <FormField label="Estado del examen" span={3}>
                <select className="form-input" value={form.examenEstado} onChange={e => set('examenEstado', e.target.value)}>
                  {EXTERNAL_EXAMEN_ESTADOS.map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </FormField>
              <FormField label="Fecha del examen" span={3}><input type="date" className="form-input" value={form.fechaExamen || ''} onChange={e => set('fechaExamen', e.target.value)} /></FormField>
              <FormField label="Estado de la solicitud" span={3}>
                <select className="form-input" value={form.estadoSolicitud} onChange={e => set('estadoSolicitud', e.target.value)}>
                  {EXTERNAL_SEGUIMIENTO_ESTADOS.map(s => <option key={s} value={s}>{s}</option>)}
                </select>
              </FormField>
              <FormField label="Horas" span={3}><input type="number" className="form-input" value={form.horas || ''} onChange={e => set('horas', e.target.value)} /></FormField>
              <FormField label="Año" span={3}><input type="number" className="form-input" value={form.anio || ''} onChange={e => set('anio', e.target.value)} /></FormField>
              <FormField label="Fecha de realización" span={3}><input type="date" className="form-input" value={form.fechaRealizacion || ''} onChange={e => set('fechaRealizacion', e.target.value)} /></FormField>
              <FormField label="Fecha de vencimiento" span={3}><input type="date" className="form-input" value={form.fechaVencimiento || ''} onChange={e => set('fechaVencimiento', e.target.value)} /></FormField>
              <FormField label="Empresa certificadora" span={3}><input className="form-input" value={form.empresaCertificadora || ''} onChange={e => set('empresaCertificadora', e.target.value)} /></FormField>
            </div>
          </section>

          {esGH && (
            <section className="ic-prov-section">
              <h4 className="ic-cap-h3">Costos y administración <span className="muted-xs">· Solo Gestión Humana</span></h4>
              <div className="form-grid">
                <FormField label="Valor del curso" span={3}><input type="number" className="form-input" value={form.valorCurso || ''} onChange={e => set('valorCurso', e.target.value)} /></FormField>
                <FormField label="Valor asumido por el colaborador" span={3}><input type="number" className="form-input" value={form.valorColaborador || ''} onChange={e => set('valorColaborador', e.target.value)} /></FormField>
                <FormField label="Autoriza descuento" span={3}>
                  <select className="form-input" value={form.autorizaDescuento} onChange={e => set('autorizaDescuento', e.target.value)}><option>Sí</option><option>No</option></select>
                </FormField>
                <FormField label="Reporta a nómina" span={3}>
                  <select className="form-input" value={form.reportaNomina} onChange={e => set('reportaNomina', e.target.value)}><option>Sí</option><option>No</option></select>
                </FormField>
                <FormField label="Centro de costo" span={3}><input className="form-input" value={form.centroCosto || ''} onChange={e => set('centroCosto', e.target.value)} /></FormField>
                <FormField label="Costeo" span={3}><input className="form-input" value={form.costeo || ''} onChange={e => set('costeo', e.target.value)} /></FormField>
                <FormField label="Orden de compra" span={3}><input className="form-input" value={form.ordenCompra || ''} onChange={e => set('ordenCompra', e.target.value)} /></FormField>
                <FormField label="Liberación de OC" span={3}>
                  <select className="form-input" value={form.liberacionOC} onChange={e => set('liberacionOC', e.target.value)}><option>Sí</option><option>No</option></select>
                </FormField>
                <FormField label="Proveedor" span={3}><input className="form-input" value={form.proveedor || ''} onChange={e => set('proveedor', e.target.value)} /></FormField>
                <FormField label="Factura" span={3}><input className="form-input" value={form.factura || ''} onChange={e => set('factura', e.target.value)} /></FormField>
                <FormField label="Comentarios" span={6}><textarea className="form-input" rows={2} value={form.comentarios || ''} onChange={e => set('comentarios', e.target.value)} /></FormField>
              </div>
            </section>
          )}

          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Soportes e historial</h4>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {form.soportes.map((s, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                  <div style={{ fontSize: 12.5 }}>{s.tipo}</div>
                  {s.estado === 'Cargado' ? (
                    <button className="btn" style={{ padding: '3px 9px', fontSize: 11.5 }} onClick={() => toast && toast(`Simulación · abriendo ${s.nombre || s.tipo}`)}>Ver soporte</button>
                  ) : (
                    <button className="btn" style={{ padding: '3px 9px', fontSize: 11.5 }} onClick={() => set('soportes', form.soportes.map((x, xi) => xi === i ? { ...x, estado: 'Cargado', nombre: `${s.tipo.toLowerCase().replace(/\s+/g, '-')}-${emp.id}.pdf` } : x))}>Simular carga</button>
                  )}
                  <span className={`pill ${s.estado === 'Cargado' ? 'green' : 'amber-soft'}`}>{s.estado}</span>
                </div>
              ))}
            </div>
          </section>
        </div>
        <div className="tr-side-head" style={{ borderTop: '1px solid var(--border)', borderBottom: 'none', justifyContent: 'flex-end', gap: 8 }}>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn primary" onClick={() => onSave(form)}>Guardar</button>
        </div>
      </div>
    </div>
  );
};

const TrExternalTracking = ({ currentRole, toast }) => {
  const [rows, setRows] = React.useState(() => [...FORMATION_SEGUIMIENTO_EXTERNO]);
  const [detalle, setDetalle] = React.useState(null);
  const equipoIds = new Set(trExtEquipoDe(currentRole).map(e => e.id));

  const persistir = (next) => { window.FORMATION_SEGUIMIENTO_EXTERNO.length = 0; window.FORMATION_SEGUIMIENTO_EXTERNO.push(...next); };

  const filas = rows.filter(r => equipoIds.has(r.empId));

  const guardar = (form) => {
    const next = rows.map(r => r.id === form.id ? form : r);
    setRows(next); persistir(next);
    setDetalle(null);
    toast && toast('Seguimiento y costos actualizado');
  };

  return (
    <div className="card">
      <div className="card-head"><div><h3>Seguimiento y costos</h3><div className="sub">{filas.length} cursos externos en seguimiento</div></div></div>
      <div className="ep-table-wrap">
        <table className="data-table">
          <thead><tr><th>Colaborador</th><th>Curso</th><th>Examen</th><th>Estado</th><th>Vencimiento</th><th>Soportes</th><th></th></tr></thead>
          <tbody>
            {filas.map(r => {
              const emp = getFormationEmployee(r.empId);
              const curso = FORMATION_CAPACITOGRAMA.find(c => c.id === r.capacitogramaId);
              const faltantes = r.soportes.filter(s => s.estado === 'Pendiente').length;
              return (
                <tr key={r.id} onClick={() => setDetalle(r)} style={{ cursor: 'pointer' }}>
                  <td style={{ fontWeight: 500 }}>{emp?.name}</td><td>{curso?.curso}</td>
                  <td><span className={`pill ${r.examenEstado === 'Apto' ? 'green' : r.examenEstado === 'En validación de SST' ? 'navy' : r.examenEstado === 'No apto' || r.examenEstado === 'Vencido' ? 'rose' : ''}`}>{r.examenEstado}</span></td>
                  <td><span className={`pill ${r.estadoSolicitud === 'Vigente' ? 'green' : r.estadoSolicitud === 'Próximo a vencer' ? 'amber' : r.estadoSolicitud === 'Vencido' ? 'rose' : 'navy'}`}>{r.estadoSolicitud}</span></td>
                  <td className="mono">{r.fechaVencimiento ? _fd_labelCO(r.fechaVencimiento) : '—'}</td>
                  <td>{faltantes > 0 ? <span className="pill rose">{faltantes} faltante(s)</span> : <span className="pill green">Completos</span>}</td>
                  <td style={{ textAlign: 'right' }}><button className="btn" style={{ padding: '4px 10px', fontSize: 12 }} onClick={(e) => { e.stopPropagation(); setDetalle(r); }}>Ver</button></td>
                </tr>
              );
            })}
            {filas.length === 0 && <tr><td colSpan={7} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>Sin cursos externos en seguimiento para este equipo.</td></tr>}
          </tbody>
        </table>
      </div>
      {detalle && <TrExternalTrackingDrawer registro={detalle} currentRole={currentRole} onClose={() => setDetalle(null)} onSave={guardar} toast={toast} />}
    </div>
  );
};

window.TrExternalRequests = TrExternalRequests;
window.TrExternalTracking = TrExternalTracking;