// Formación y desarrollo — Resumen (portada orientada a personas).
// Consume training-requirements-data.jsx (debe cargar antes). Sin estado
// propio relevante — todo se deriva en cada render de los stores mock.

const TR_OV_CYCLE = ['Matriz / Capacitograma', 'Asignación', 'Ejecución', 'Evaluación', 'Soporte', 'Vencimiento', 'Renovación'];

const trOvPersonasConFormacion = () => {
  const ids = new Set();
  FORMATION_ENTRENAMIENTOS.forEach(r => ids.add(r.empId));
  FORMATION_REENTRENAMIENTOS.forEach(r => ids.add(r.empId));
  FORMATION_SEGUIMIENTO_INTERNO.forEach(r => ids.add(r.empId));
  FORMATION_SEGUIMIENTO_EXTERNO.forEach(r => ids.add(r.empId));
  return ids.size;
};
const trOvPendientes = () => (
  FORMATION_ENTRENAMIENTOS.filter(r => r.estado === 'Pendiente por ejecutar').length
  + FORMATION_REENTRENAMIENTOS.filter(r => r.estado === 'Pendiente por ejecutar').length
  + FORMATION_SEGUIMIENTO_INTERNO.filter(r => r.estadoOperativo === 'Pendiente por ejecutar').length
);
const trOvVencimientosProximos = (hoy) => {
  let n = FORMATION_ENTRENAMIENTOS.filter(r => clasificarAlertaEntrenamiento(r.fechaEjecutada, (getFormationEmployee(r.empId) || {}).frecuenciaReentrenoMeses, hoy) === 'proxima').length;
  Object.entries(FORMATION_REINDUCCION).forEach(([empId, r]) => {
    const emp = getFormationEmployee(empId);
    if (!emp) return;
    const venc = calcVencimientoReinduccion(emp.fechaIngreso, r.ultimaEjecutada);
    if (clasificarEstadoReinduccion(venc, hoy) === 'proxima') n++;
  });
  n += FORMATION_SEGUIMIENTO_EXTERNO.filter(r => r.estadoSolicitud === 'Próximo a vencer').length;
  return n;
};
const trOvCumplimiento = () => {
  const total = FORMATION_ENTRENAMIENTOS.length + FORMATION_REENTRENAMIENTOS.length + FORMATION_SEGUIMIENTO_INTERNO.length;
  const ok = FORMATION_ENTRENAMIENTOS.filter(r => r.estado === 'Ejecutado').length
    + FORMATION_REENTRENAMIENTOS.filter(r => r.estado === 'Ejecutado').length
    + FORMATION_SEGUIMIENTO_INTERNO.filter(r => r.estadoAcademico === 'Aprobado').length;
  return total ? Math.round((ok / total) * 100) : 0;
};

const TrAssumptionsCard = () => (
  <div className="card tr-assumptions-card">
    <div className="card-head">
      <div>
        <h3>Supuestos por validar con GH</h3>
        <div className="sub">Estas decisiones aún son ambiguas — señálalas en la sesión sin que bloqueen el recorrido del prototipo</div>
      </div>
    </div>
    <div className="card-body" style={{ paddingTop: 6 }}>
      <ul className="tr-assumptions-list">
        {FORMATION_ASSUMPTIONS.map(a => (
          <li key={a.id}>
            <span className="pill amber-soft">Por confirmar</span>
            <span>{a.texto}</span>
          </li>
        ))}
      </ul>
    </div>
  </div>
);

const TrCycleStrip = () => (
  <div className="card">
    <div className="card-head"><div><h3>Ciclo del dato formativo</h3><div className="sub">De dónde viene cada obligación y a dónde llega cuando se cumple</div></div></div>
    <div className="card-body">
      <div className="tr-cycle-strip">
        {TR_OV_CYCLE.map((step, i) => (
          <React.Fragment key={step}>
            <div className="tr-cycle-step">{step}</div>
            {i < TR_OV_CYCLE.length - 1 && <IconArrowRight size={14} className="tr-cycle-arrow" />}
          </React.Fragment>
        ))}
      </div>
    </div>
  </div>
);

const TrAttentionRow = ({ icon, tone, label, count, onClick }) => (
  <button type="button" className="tr-attn-row" onClick={onClick} disabled={count === 0}>
    <span className={`tr-attn-icon ${tone}`}>{icon}</span>
    <span className="tr-attn-label">{label}</span>
    <span className={`pill ${count > 0 ? tone : ''}`}>{count}</span>
  </button>
);

const TrOverviewTab = ({ onNavigate, currentRole }) => {
  const hoy = FORMATION_DEMO_TODAY;

  const induccionesPendientes = Object.values(FORMATION_INDUCCION).filter(r => r.estado === 'Pendiente por revisar').length;
  const reinduccionesVencidas = Object.entries(FORMATION_REINDUCCION).filter(([empId, r]) => {
    const emp = getFormationEmployee(empId);
    return emp && clasificarEstadoReinduccion(calcVencimientoReinduccion(emp.fechaIngreso, r.ultimaEjecutada), hoy) === 'vencida';
  }).length;
  const entrenamientosCambioCargo = FORMATION_ENTRENAMIENTOS.filter(r => r.motivo === 'Cambio de cargo' && r.estado === 'Pendiente por ejecutar').length;
  const reentrenamientosProximos = FORMATION_REENTRENAMIENTOS.filter(r => r.estado === 'Pendiente por ejecutar').length;
  const solicitudesPorRevisar = FORMATION_SOLICITUDES_EXTERNAS.filter(s => s.estado === 'En revisión').length;
  const soportesFaltantes = FORMATION_SEGUIMIENTO_EXTERNO.reduce((acc, r) => acc + r.soportes.filter(s => s.estado === 'Pendiente').length, 0)
    + FORMATION_ENTRENAMIENTOS.filter(r => r.soportesPendientes === 'Sí').length + FORMATION_REENTRENAMIENTOS.filter(r => r.soportesPendientes === 'Sí').length;

  const meses = ['2026-03', '2026-04', '2026-05'].map(m => calcConsolidadoInduccion(m));

  return (
    <>
      <div className="tr-kpis">
        <div className="tr-kpi">
          <div className="tr-kpi-icon navy"><IconUsers size={18} /></div>
          <div>
            <div className="tr-kpi-num">{trOvPersonasConFormacion()}</div>
            <div className="tr-kpi-lbl">Personas con formación asignada</div>
            <div className="tr-kpi-foot muted">en inducción, entrenamiento, interna o externa</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon amber"><IconClock size={18} /></div>
          <div>
            <div className="tr-kpi-num">{trOvPendientes()}</div>
            <div className="tr-kpi-lbl">Pendientes por ejecutar</div>
            <div className="tr-kpi-foot muted">entrenamiento, reentrenamiento e interna</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon rose"><IconAlert size={18} /></div>
          <div>
            <div className="tr-kpi-num">{trOvVencimientosProximos(hoy)}</div>
            <div className="tr-kpi-lbl">Vencimientos en los próximos 30 días</div>
            <div className="tr-kpi-foot muted">regla demo — ver supuesto #3</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon green"><IconCheck size={18} /></div>
          <div>
            <div className="tr-kpi-num">{trOvCumplimiento()}<small>%</small></div>
            <div className="tr-kpi-lbl">Cumplimiento general</div>
            <div className="tr-kpi-foot muted">ejecutado o aprobado sobre lo asignado</div>
          </div>
        </div>
      </div>

      <TrAssumptionsCard />

      <div className="grid row-1-1" style={{ marginTop: 18, alignItems: 'start' }}>
        <div className="card">
          <div className="card-head"><div><h3>Atención requerida</h3><div className="sub">Accesos directos a lo que necesita revisión hoy</div></div></div>
          <div className="card-body" style={{ paddingTop: 6, display: 'flex', flexDirection: 'column', gap: 6 }}>
            <TrAttentionRow icon={<IconRocket size={14} />} tone="navy" label="Inducciones pendientes por revisar" count={induccionesPendientes} onClick={() => onNavigate('induccion', 'seguimiento')} />
            <TrAttentionRow icon={<IconAlert size={14} />} tone="rose" label="Reinducciones vencidas" count={reinduccionesVencidas} onClick={() => onNavigate('induccion', 'reinduccion')} />
            <TrAttentionRow icon={<IconZap size={14} />} tone="amber" label="Entrenamientos por cambio de cargo" count={entrenamientosCambioCargo} onClick={() => onNavigate('cargo', 'ejecutados')} />
            <TrAttentionRow icon={<IconClock size={14} />} tone="amber" label="Reentrenamientos próximos" count={reentrenamientosProximos} onClick={() => onNavigate('cargo', 'reentrenamientos')} />
            <TrAttentionRow icon={<IconExternal size={14} />} tone="navy" label="Solicitudes externas por revisar" count={solicitudesPorRevisar} onClick={() => onNavigate('externa', 'solicitudes')} />
            <TrAttentionRow icon={<IconDoc size={14} />} tone="rose" label="Soportes faltantes" count={soportesFaltantes} onClick={() => onNavigate('cargo', 'ejecutados')} />
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div><h3>Consolidado mensual de inducción</h3><div className="sub">Ingresos reportados vs. inducciones realizadas</div></div></div>
          <div className="card-body" style={{ paddingTop: 6 }}>
            <table className="data-table">
              <thead><tr><th>Mes</th><th>Ingresos reportados</th><th>Inducciones realizadas</th><th>%</th></tr></thead>
              <tbody>
                {meses.map(m => (
                  <tr key={m.mes}>
                    <td style={{ textTransform: 'capitalize' }}>{_fd_monthLabelCO(`${m.mes}-01`)}</td>
                    <td>{m.ingresos}</td>
                    <td>{m.realizadas}</td>
                    <td><span className={`pill ${m.pct >= 80 ? 'green' : m.pct >= 50 ? 'amber' : 'rose'}`}>{m.pct}%</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
            <p className="muted-xs" style={{ marginTop: 8 }}>Inducciones realizadas = estado "Ejecutado" o "Corrieron la fecha de ingreso" — ver supuesto #1.</p>
          </div>
        </div>
      </div>

      <TrCycleStrip />

      {currentRole === 'admin' && (
        <div className="card" style={{ marginTop: 18 }}>
          <div className="card-head"><div><h3>Accesos directos</h3><div className="sub">Ir directo a cada dominio del módulo</div></div></div>
          <div className="card-body" style={{ paddingTop: 6 }}>
            <div className="tr-shortcut-grid">
              <button className="tr-shortcut" onClick={() => onNavigate('induccion')}><IconRocket size={16} /> Inducción</button>
              <button className="tr-shortcut" onClick={() => onNavigate('cargo')}><IconZap size={16} /> Entrenamiento al cargo</button>
              <button className="tr-shortcut" onClick={() => onNavigate('interna')}><IconBook size={16} /> Capacitación interna</button>
              <button className="tr-shortcut" onClick={() => onNavigate('externa')}><IconExternal size={16} /> Capacitación externa</button>
              <button className="tr-shortcut" onClick={() => onNavigate('config')}><IconSettings size={16} /> Configuración</button>
            </div>
          </div>
        </div>
      )}
    </>
  );
};

window.TrOverviewTab = TrOverviewTab;