// Formación y desarrollo — Inducción (Seguimiento de inducción + Reinducción).
// Consume training-requirements-data.jsx. Componentes: TrInductionTracking,
// TrReinduction (registrados en window al final).

// ─────────────────────────────────────────── Seguimiento de inducción ─────────
const TR_IND_HIST_PREVIEW = [
  { cedula: '1.099.887.221', nombre: 'Juliana Marcela Ríos', fechaIngreso: '05/05/2026', linea: 'Operaciones', estado: 'válida' },
  { cedula: '1.087.556.332', nombre: 'Andrés Felipe Mejía', fechaIngreso: '28/04/2026', linea: 'Operaciones', estado: 'válida' },
  { cedula: '—', nombre: 'Sin nombre reportado', fechaIngreso: '30/04/2026', linea: 'Aprovechamiento', estado: 'error' },
  { cedula: '1.076.221.445', nombre: 'Tatiana Marcela Sánchez', fechaIngreso: '32/04/2026', linea: 'Aprovechamiento', estado: 'advertencia' },
  { cedula: '1.045.667.882', nombre: 'Valentina Duarte Rincón', fechaIngreso: '14/07/2025', linea: 'Administración', estado: 'válida' },
];
const TR_IMPORT_ROW_META = { válida: { tone: 'green', label: 'Válida' }, advertencia: { tone: 'amber', label: 'Advertencia · revisar fecha' }, error: { tone: 'rose', label: 'Error · falta nombre' } };

const TrImportHistoricoModal = ({ onClose }) => {
  const [stage, setStage] = React.useState('drop'); // drop | preview | done
  const resumen = { validas: TR_IND_HIST_PREVIEW.filter(r => r.estado === 'válida').length, advertencias: TR_IND_HIST_PREVIEW.filter(r => r.estado === 'advertencia').length, errores: TR_IND_HIST_PREVIEW.filter(r => r.estado === 'error').length };
  return (
    <Modal open onClose={onClose} title="Cargar histórico de inducción" subtitle="Simulación — no se procesa un archivo real" width={640}
      footer={stage === 'preview' ? (
        <><button className="btn" onClick={onClose}>Cancelar</button><button className="btn primary" onClick={() => setStage('done')}>Confirmar importación</button></>
      ) : <button className="btn" onClick={onClose}>Cerrar</button>}>
      {stage === 'drop' && (
        <div>
          <div className="tr-dropzone" onClick={() => setStage('preview')}>
            <IconDoc size={28} />
            <div style={{ fontWeight: 600, marginTop: 8 }}>Arrastra el archivo Excel aquí o haz clic para simular la carga</div>
            <div className="muted-xs" style={{ marginTop: 4 }}>Formato esperado: cédula, nombre, fecha de ingreso, línea de negocio</div>
          </div>
        </div>
      )}
      {stage === 'preview' && (
        <div>
          <p className="muted-xs" style={{ marginBottom: 10 }}>Vista previa de las primeras 5 filas · <span className="mono">historico-induccion-abril.xlsx</span> · 412 KB</p>
          <table className="data-table">
            <thead><tr><th>Cédula</th><th>Nombre</th><th>Fecha de ingreso</th><th>Línea de negocio</th><th>Estado</th></tr></thead>
            <tbody>
              {TR_IND_HIST_PREVIEW.map((r, i) => (
                <tr key={i}>
                  <td className="mono">{r.cedula}</td><td>{r.nombre}</td><td className="mono">{r.fechaIngreso}</td><td>{r.linea}</td>
                  <td><span className={`pill ${TR_IMPORT_ROW_META[r.estado].tone}`}>{TR_IMPORT_ROW_META[r.estado].label}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {stage === 'done' && (
        <div className="ne-callout" style={{ borderColor: 'var(--green-600)' }}>
          <IconCheck size={16} style={{ color: 'var(--green-600)' }} />
          <div><b>Simulación completada.</b> {resumen.validas} filas válidas, {resumen.advertencias} con advertencia y {resumen.errores} con error. Ningún registro real fue modificado — esta carga es solo demostrativa.</div>
        </div>
      )}
    </Modal>
  );
};

const TrInductionDrawer = ({ emp, registro, onClose, onSave }) => {
  const [soportes, setSoportes] = React.useState(registro.soportes);
  const [estado, setEstado] = React.useState(registro.estado);
  React.useEffect(() => {
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => window.removeEventListener('keydown', onEsc);
  }, []);
  return (
    <div className="tr-side-overlay" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="tr-side-panel" style={{ width: 560 }}>
        <div className="tr-side-head">
          <div style={{ minWidth: 0 }}>
            <div className="muted mono" style={{ fontSize: 11 }}>{emp.doc}</div>
            <div className="tr-side-title" style={{ marginTop: 4 }}>{emp.name}</div>
            <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{emp.cargo} · {emp.planta}</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 automáticos <IconShield size={12} style={{ opacity: 0.5, marginLeft: 4 }} /></h4>
            <p className="muted-xs" style={{ margin: '0 0 8px' }}>Provienen de la ficha del empleado — no editables aquí.</p>
            <div className="ic-prov-info">
              <div><div className="muted-xs">Fecha de ingreso</div><div className="mono">{_fd_labelCO(emp.fechaIngreso)}</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>
          </section>
          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Datos manuales de gestión humana</h4>
            <div className="form-grid">
              <FormField label="Soportes archivados" span={3}>
                <select className="form-input" value={soportes} onChange={e => setSoportes(e.target.value)}>
                  {IND_SOPORTE_OPCIONES.map(o => <option key={o} value={o}>{o}</option>)}
                </select>
              </FormField>
              <FormField label="Estado de seguimiento" span={3}>
                <select className="form-input" value={estado} onChange={e => setEstado(e.target.value)}>
                  {IND_ESTADO_OPCIONES.map(o => <option key={o} value={o}>{o}</option>)}
                </select>
              </FormField>
            </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({ soportes, estado })}>Guardar</button>
        </div>
      </div>
    </div>
  );
};

const TrInductionTracking = ({ currentRole, toast }) => {
  const [registros, setRegistros] = React.useState(() => ({ ...FORMATION_INDUCCION }));
  const [q, setQ] = React.useState('');
  const [mesFiltro, setMesFiltro] = React.useState('todos');
  const [estadoFiltro, setEstadoFiltro] = React.useState('todos');
  const [soporteFiltro, setSoporteFiltro] = React.useState('todos');
  const [openId, setOpenId] = React.useState(null);
  const [importOpen, setImportOpen] = React.useState(false);

  const equipo = currentRole === 'jefe' ? FORMATION_EMPLOYEES.filter(e => e.jefeInmediato === 'Luis Miguel Marín') : FORMATION_EMPLOYEES;
  const filas = equipo
    .filter(e => registros[e.id])
    .filter(e => !q || e.name.toLowerCase().includes(q.toLowerCase()) || e.doc.includes(q))
    .filter(e => mesFiltro === 'todos' || _fd_isSameMonth(e.fechaIngreso, mesFiltro))
    .filter(e => estadoFiltro === 'todos' || registros[e.id].estado === estadoFiltro)
    .filter(e => soporteFiltro === 'todos' || registros[e.id].soportes === soporteFiltro);

  const mesesDisponibles = [...new Set(equipo.map(e => e.fechaIngreso.slice(0, 7)))].sort().reverse();
  const consolidado = calcConsolidadoInduccion(FORMATION_DEMO_TODAY.slice(0, 7), equipo, registros);

  const guardar = (empId, cambios) => {
    const updated = { ...registros[empId], ...cambios, actualizadoEn: FORMATION_DEMO_TODAY };
    FORMATION_INDUCCION[empId] = updated;
    setRegistros({ ...FORMATION_INDUCCION });
    setOpenId(null);
    toast && toast('Seguimiento de inducción actualizado');
  };

  return (
    <div>
      <div className="card" style={{ marginBottom: 16 }}>
        <div className="card-head">
          <div><h3>Consolidado del mes en curso</h3><div className="sub">{_fd_monthLabelCO(`${FORMATION_DEMO_TODAY.slice(0, 7)}-01`)}</div></div>
        </div>
        <div className="card-body" style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          <div><div className="tr-kpi-num">{consolidado.ingresos}</div><div className="tr-kpi-lbl">Ingresos reportados</div></div>
          <div><div className="tr-kpi-num">{consolidado.realizadas}</div><div className="tr-kpi-lbl">Inducciones realizadas</div></div>
          <div><div className="tr-kpi-num">{consolidado.pct}<small>%</small></div><div className="tr-kpi-lbl">Cumplimiento del mes</div></div>
        </div>
      </div>

      <div className="card">
        <div className="card-head">
          <div><h3>Seguimiento de inducción</h3><div className="sub">{filas.length} de {equipo.length} colaboradores</div></div>
          {currentRole === 'admin' && <button className="btn" onClick={() => setImportOpen(true)}><IconDoc size={14} /> Cargar histórico</button>}
        </div>
        <div className="filters-bar">
          <div className="search" style={{ flex: 'none', width: 260, margin: 0 }}>
            <span className="icon"><IconSearch size={16} /></span>
            <input placeholder="Nombre o documento…" value={q} onChange={e => setQ(e.target.value)} style={{ background: 'white' }} />
          </div>
          <div className="filter-select">
            <span className="filter-label">Mes de ingreso</span>
            <select value={mesFiltro} onChange={e => setMesFiltro(e.target.value)}>
              <option value="todos">Todos</option>
              {mesesDisponibles.map(m => <option key={m} value={m} style={{ textTransform: 'capitalize' }}>{_fd_monthLabelCO(`${m}-01`)}</option>)}
            </select>
            <IconChevronDown size={13} />
          </div>
          <div className="filter-select">
            <span className="filter-label">Estado</span>
            <select value={estadoFiltro} onChange={e => setEstadoFiltro(e.target.value)}>
              <option value="todos">Todos</option>
              {IND_ESTADO_OPCIONES.map(o => <option key={o} value={o}>{o}</option>)}
            </select>
            <IconChevronDown size={13} />
          </div>
          <div className="filter-select">
            <span className="filter-label">Soporte</span>
            <select value={soporteFiltro} onChange={e => setSoporteFiltro(e.target.value)}>
              <option value="todos">Todos</option>
              {IND_SOPORTE_OPCIONES.map(o => <option key={o} value={o}>{o}</option>)}
            </select>
            <IconChevronDown size={13} />
          </div>
        </div>
        <div className="ep-table-wrap">
          <table className="data-table">
            <thead>
              <tr><th>Cédula</th><th>Colaborador</th><th>Fecha de ingreso</th><th>Línea</th><th>Proceso</th><th>Subproceso</th><th>Soportes</th><th>Estado</th><th>Última actualización</th></tr>
            </thead>
            <tbody>
              {filas.map((e) => {
                const r = registros[e.id];
                return (
                  <tr key={e.id} onClick={() => setOpenId(e.id)} style={{ cursor: 'pointer' }}>
                    <td className="mono">{e.doc}</td>
                    <td style={{ fontWeight: 500 }}>{e.name}</td>
                    <td className="mono">{_fd_labelCO(e.fechaIngreso)}</td>
                    <td>{e.lineaNegocio}</td>
                    <td>{e.proceso}</td>
                    <td>{e.subproceso}</td>
                    <td><span className={`pill ${r.soportes === 'Sí' ? 'green' : r.soportes === 'No' ? 'rose' : 'amber-soft'}`}>{r.soportes}</span></td>
                    <td><span className={`pill ${IND_ESTADO_META[r.estado].tone}`}>{r.estado}</span></td>
                    <td className="mono muted">{_fd_labelCO(r.actualizadoEn)}</td>
                  </tr>
                );
              })}
              {filas.length === 0 && <tr><td colSpan={9} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>Ningún registro coincide con la búsqueda o los filtros.</td></tr>}
            </tbody>
          </table>
        </div>
      </div>

      {openId && <TrInductionDrawer emp={getFormationEmployee(openId)} registro={registros[openId]} onClose={() => setOpenId(null)} onSave={(c) => guardar(openId, c)} />}
      {importOpen && <TrImportHistoricoModal onClose={() => setImportOpen(false)} />}
    </div>
  );
};

// ─────────────────────────────────────────── Reinducción ─────────
const TrReinductionTimeline = ({ historial, vencimiento }) => (
  <div className="tr-reind-timeline">
    {historial.map((h, i) => (
      <div key={i} className="tr-reind-year">
        <div className="tr-reind-dot" />
        <div>
          <div style={{ fontWeight: 600, fontSize: 12.5 }}>{h.anio}</div>
          <div className="muted-xs mono">{_fd_labelCO(h.fecha)}</div>
        </div>
      </div>
    ))}
    <div className="tr-reind-year">
      <div className="tr-reind-dot next" />
      <div>
        <div style={{ fontWeight: 600, fontSize: 12.5 }}>Próximo</div>
        <div className="muted-xs mono">{_fd_labelCO(vencimiento)}</div>
      </div>
    </div>
  </div>
);

const TrReinductionDrawer = ({ emp, registro, onClose, onSave }) => {
  const [ultima, setUltima] = React.useState(registro.ultimaEjecutada || '');
  const [mesRealizacion, setMesRealizacion] = React.useState((registro.ultimaEjecutada || '').slice(0, 7));
  const [certificado, setCertificado] = React.useState(registro.certificadoDescargado);
  const vencimientoPreview = calcVencimientoReinduccion(emp.fechaIngreso, ultima || null);
  const estadoPreview = clasificarEstadoReinduccion(vencimientoPreview);
  return (
    <div className="tr-side-overlay" onMouseDown={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="tr-side-panel" style={{ width: 620 }}>
        <div className="tr-side-head">
          <div><div className="tr-side-title">{emp.name}</div><div className="muted" style={{ fontSize: 12, marginTop: 4 }}>{emp.cargo} · {emp.planta}</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 automáticos <IconShield size={12} style={{ opacity: 0.5, marginLeft: 4 }} /></h4>
            <div className="ic-prov-info">
              <div><div className="muted-xs">Fecha de ingreso</div><div className="mono">{_fd_labelCO(emp.fechaIngreso)}</div></div>
              <div><div className="muted-xs">Jefe inmediato</div><div>{emp.jefeInmediato}</div></div>
              <div><div className="muted-xs">Director / gerencia</div><div>{emp.director}</div></div>
              <div><div className="muted-xs">Celular</div><div className="mono">{emp.celular}</div></div>
            </div>
          </section>
          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Ciclo de reinducción <span className="muted-xs" title="Regla demo">· Regla demo</span></h4>
            <TrReinductionTimeline historial={registro.historial} vencimiento={vencimientoPreview} />
            <p className="muted-xs" style={{ marginTop: 4 }}>El vencimiento se calcula desde la última reinducción ejecutada + 1 año — ver supuesto #2 en Resumen.</p>
          </section>
          <section className="ic-prov-section">
            <h4 className="ic-cap-h3">Datos manuales</h4>
            <div className="form-grid">
              <FormField label="Última reinducción ejecutada" span={3}>
                <input type="date" className="form-input" value={ultima} onChange={e => { setUltima(e.target.value); setMesRealizacion(e.target.value.slice(0, 7)); }} />
              </FormField>
              <FormField label="Mes de realización" span={3}>
                <input type="month" className="form-input" value={mesRealizacion} onChange={e => setMesRealizacion(e.target.value)} />
              </FormField>
              <FormField label="Certificado descargado" span={3}>
                <select className="form-input" value={certificado} onChange={e => setCertificado(e.target.value)}>
                  <option>Sí</option><option>No</option>
                </select>
              </FormField>
              <FormField label="Estado" span={3}>
                <div style={{ paddingTop: 8 }}><span className={`pill ${REIND_ESTADO_META[estadoPreview].tone}`}>{REIND_ESTADO_META[estadoPreview].label}</span></div>
              </FormField>
            </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({ ultimaEjecutada: ultima, certificadoDescargado: certificado, historial: [...registro.historial, ...(ultima && ultima !== registro.ultimaEjecutada ? [{ anio: Number(ultima.slice(0, 4)), fecha: ultima }] : [])] })}>Guardar</button>
        </div>
      </div>
    </div>
  );
};

const TrReinduction = ({ currentRole, toast }) => {
  const [registros, setRegistros] = React.useState(() => ({ ...FORMATION_REINDUCCION }));
  const [openId, setOpenId] = React.useState(null);
  const [estadoFiltro, setEstadoFiltro] = React.useState('todos');

  const equipo = (currentRole === 'jefe' ? FORMATION_EMPLOYEES.filter(e => e.jefeInmediato === 'Luis Miguel Marín') : FORMATION_EMPLOYEES)
    .filter(e => registros[e.id]);

  const filas = equipo.map((e) => {
    const r = registros[e.id];
    const vencimiento = calcVencimientoReinduccion(e.fechaIngreso, r.ultimaEjecutada);
    const estado = clasificarEstadoReinduccion(vencimiento);
    return { emp: e, r, vencimiento, estado };
  }).filter(f => estadoFiltro === 'todos' || f.estado === estadoFiltro);

  const guardar = (empId, cambios) => {
    const updated = { ...registros[empId], ...cambios };
    FORMATION_REINDUCCION[empId] = updated;
    setRegistros({ ...FORMATION_REINDUCCION });
    setOpenId(null);
    toast && toast('Reinducción actualizada');
  };

  return (
    <div className="card">
      <div className="card-head">
        <div><h3>Reinducción</h3><div className="sub">Ciclo anual desde la fecha de ingreso o la última reinducción ejecutada</div></div>
        <div className="filter-select">
          <span className="filter-label">Estado</span>
          <select value={estadoFiltro} onChange={e => setEstadoFiltro(e.target.value)}>
            <option value="todos">Todos</option>
            <option value="vencida">Vencida</option>
            <option value="proxima">Próxima a vencer</option>
            <option value="completa">Completa</option>
          </select>
          <IconChevronDown size={13} />
        </div>
      </div>
      <div className="ep-table-wrap">
        <table className="data-table">
          <thead><tr><th>Colaborador</th><th>Fecha de ingreso</th><th>Mes de vencimiento</th><th>Línea</th><th>Proceso</th><th>Jefe inmediato</th><th>Celular</th><th>Estado</th></tr></thead>
          <tbody>
            {filas.map(({ emp, vencimiento, estado }) => (
              <tr key={emp.id} onClick={() => setOpenId(emp.id)} style={{ cursor: 'pointer' }}>
                <td style={{ fontWeight: 500 }}>{emp.name}</td>
                <td className="mono">{_fd_labelCO(emp.fechaIngreso)}</td>
                <td className="mono">{_fd_labelCO(vencimiento)}</td>
                <td>{emp.lineaNegocio}</td>
                <td>{emp.proceso}</td>
                <td>{emp.jefeInmediato}</td>
                <td className="mono">{emp.celular}</td>
                <td><span className={`pill ${REIND_ESTADO_META[estado].tone}`}>{REIND_ESTADO_META[estado].label}</span></td>
              </tr>
            ))}
            {filas.length === 0 && <tr><td colSpan={8} className="muted" style={{ textAlign: 'center', padding: 20, fontSize: 12.5 }}>Ningún registro coincide con el filtro.</td></tr>}
          </tbody>
        </table>
      </div>
      {openId && <TrReinductionDrawer emp={getFormationEmployee(openId)} registro={registros[openId]} onClose={() => setOpenId(null)} onSave={(c) => guardar(openId, c)} />}
    </div>
  );
};

window.TrInductionTracking = TrInductionTracking;
window.TrReinduction = TrReinduction;