// Performance · Tabs admin nuevas (vista organizacional)
//   PendientesSeguimientoTab — tasa de respuesta, alertas de plazo
//   AnalisisTab              — distribuciones agregadas, gaps por área
//   CalibracionGlobalTab     — sesgos por jefe / por área
//   ConfiguracionTab         — catálogos: competencias, escalas, niveles esperados

const { useState: _pt_useState, useMemo: _pt_useMemo } = React;

// ─── PendientesSeguimientoTab ─────────────────────────────

const PendientesSeguimientoTab = () => {
  const ciclos = (window.CICLOS_EVALUACION || []).filter(c => c.estado !== 'publicado' && c.estado !== 'archivado');
  const todasInstancias = (window.EVALUACIONES_INSTANCIA || []);
  const pendientes = todasInstancias.filter(e => e.estado === 'pendiente' || e.estado === 'borrador');
  const enviadas = todasInstancias.filter(e => e.estado === 'enviado-firmado');
  const tasa = todasInstancias.length > 0 ? Math.round((enviadas.length / todasInstancias.length) * 100) : 0;

  const hoy = new Date();
  const venceParse = (s) => s ? new Date(s.split('/').reverse().join('-')) : null;
  const vencidos = pendientes.filter(e => {
    const v = venceParse(e.plazoVence);
    return v && v < hoy;
  });

  // Top morosos (evaluadores con más pendientes)
  const morosos = {};
  pendientes.forEach(e => { morosos[e.evaluadorId] = (morosos[e.evaluadorId] || 0) + 1; });
  const topMorosos = Object.entries(morosos)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 5)
    .map(([id, n]) => ({ id, n, persona: (window.PERSONAS_DESEMPENO || {})[id] }));

  return (
    <div className="cd-subtab">
      <div className="tr-kpis">
        <div className="tr-kpi">
          <div className="tr-kpi-icon green"><IconCheck size={18} /></div>
          <div>
            <div className="tr-kpi-num">{tasa}<small>%</small></div>
            <div className="tr-kpi-lbl">Tasa de respuesta global</div>
            <div className="tr-kpi-foot">{enviadas.length} de {todasInstancias.length} respondidas</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon amber"><IconClock size={18} /></div>
          <div>
            <div className="tr-kpi-num">{pendientes.length}</div>
            <div className="tr-kpi-lbl">Pendientes en gestión</div>
            <div className="tr-kpi-foot">{ciclos.length} ciclos activos</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon rose"><IconShield size={18} /></div>
          <div>
            <div className="tr-kpi-num">{vencidos.length}</div>
            <div className="tr-kpi-lbl">Vencidos · escalar a jefe</div>
            <div className="tr-kpi-foot">Plazo superado · acción inmediata</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon navy"><IconCalendar size={18} /></div>
          <div>
            <div className="tr-kpi-num">{ciclos.length}</div>
            <div className="tr-kpi-lbl">Ciclos activos</div>
            <div className="tr-kpi-foot">Configurando o en progreso</div>
          </div>
        </div>
      </div>

      <div className="cd-grid-2" style={{ marginTop: 16 }}>
        <div className="pd-card">
          <div className="pd-card-head">
            <h3>Ciclos activos · tasa de respuesta</h3>
          </div>
          {ciclos.length === 0 && <div className="muted" style={{ fontSize: 12.5, padding: 12 }}>Sin ciclos activos.</div>}
          {ciclos.map(c => (
            <div key={c.id} className="pf-cycle-prog" style={{ padding: '10px 0', borderBottom: '1px solid var(--border)' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontWeight: 700, fontSize: 13 }}>{c.nombre}</div>
                <div className="muted" style={{ fontSize: 11 }}>{c.estado} · cierra {c.cierre}</div>
              </div>
              <div className="tr-prog-track" style={{ flex: 1 }}>
                <div className={`tr-prog-fill ${c.completitudPct >= 80 ? 'green' : c.completitudPct >= 40 ? 'amber' : 'rose'}`}
                  style={{ width: `${c.completitudPct}%` }} />
              </div>
              <span className="pf-cycle-pct">{c.completitudPct}%</span>
            </div>
          ))}
        </div>

        <div className="pd-card">
          <div className="pd-card-head">
            <h3>Top evaluadores con más pendientes</h3>
          </div>
          {topMorosos.length === 0 ? (
            <div className="muted" style={{ fontSize: 12.5, padding: 8 }}>Sin pendientes.</div>
          ) : (
            <div>
              {topMorosos.map((m, i) => (
                <div key={m.id} className="ku-top-row">
                  <span className="ku-top-rank">{i + 1}</span>
                  <div className="doc-avatar" style={{ width: 28, height: 28, fontSize: 11 }}>{m.persona?.initials || '??'}</div>
                  <span style={{ flex: 1, fontSize: 12.5, fontWeight: 600 }}>{m.persona?.nombre || m.id}</span>
                  <span className="ku-top-count" style={{ background: 'rgba(200,16,46,0.10)', color: 'var(--aguila-600)' }}>{m.n}</span>
                </div>
              ))}
              <button className="btn primary" style={{ width: '100%', marginTop: 12 }}>
                <IconExternal size={13} /> Enviar recordatorio masivo
              </button>
            </div>
          )}
        </div>
      </div>

      <div className="pd-card" style={{ marginTop: 16 }}>
        <div className="pd-card-head">
          <h3>Vencidos · {vencidos.length}</h3>
          <span className="muted" style={{ fontSize: 11.5 }}>Acción: escalar al jefe directo · CST debido proceso</span>
        </div>
        {vencidos.length === 0 ? (
          <div className="muted" style={{ fontSize: 12.5, padding: 8 }}>
            <IconCheck size={12} style={{ color: 'var(--green-600)' }} /> Sin vencidos.
          </div>
        ) : (
          <table className="cd-matriz-table">
            <thead>
              <tr><th>Evaluador</th><th>Evaluado</th><th>Ciclo</th><th>Vencido desde</th><th>Acción</th></tr>
            </thead>
            <tbody>
              {vencidos.map(e => {
                const evaluador = (window.PERSONAS_DESEMPENO || {})[e.evaluadorId] || {};
                const evaluado  = (window.PERSONAS_DESEMPENO || {})[e.evaluadoId] || {};
                const ciclo     = (window.CICLOS_EVALUACION || []).find(c => c.id === e.cicloId);
                return (
                  <tr key={e.id}>
                    <td style={{ fontSize: 12 }}>{evaluador.nombre || e.evaluadorId}</td>
                    <td style={{ fontSize: 12 }}>{evaluado.nombre || e.evaluadoId}</td>
                    <td className="mono" style={{ fontSize: 11 }}>{ciclo?.nombre || e.cicloId}</td>
                    <td className="mono" style={{ fontSize: 11 }}>{e.plazoVence}</td>
                    <td>
                      <button className="btn" style={{ padding: '3px 8px', fontSize: 11 }}>Escalar a jefe</button>
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};

window.PendientesSeguimientoTab = PendientesSeguimientoTab;

// ─── AnalisisTab (organizacional) ─────────────────────────

const AnalisisTab = () => {
  const [filterArea, setFilterArea] = _pt_useState('todas');
  const areas = Array.from(new Set((window.CARGOS || []).map(c => c.area)));

  // Mock: distribución organizacional + gaps por área
  const distribucion = [
    { lvl: 1, n: 8 },
    { lvl: 2, n: 32 },
    { lvl: 3, n: 142 },
    { lvl: 4, n: 195 },
    { lvl: 5, n: 47 },
  ];
  const totalN = distribucion.reduce((s, d) => s + d.n, 0);

  const fortalezasOrg = [
    { compId: 'CDC-02', nombre: 'Seguridad y autocuidado',     promedio: 4.2 },
    { compId: 'CDC-01', nombre: 'Compromiso con calidad',      promedio: 4.1 },
    { compId: 'CDF-02', nombre: 'Conocimiento técnico',         promedio: 3.9 },
  ];
  const desarrolloOrg = [
    { compId: 'CDC-04', nombre: 'Adaptabilidad y mejora',       promedio: 3.0 },
    { compId: 'CDN-02', nombre: 'Comunicación efectiva',        promedio: 3.2 },
    { compId: 'CDN-04', nombre: 'Visión estratégica',            promedio: 3.4 },
  ];

  // Mock: comparativo por área
  const porArea = [
    { area: 'Operaciones',     promedio: 3.7, headcount: 180, vsOrg: -0.1 },
    { area: 'Aprovechamiento',        promedio: 3.8, headcount: 92,  vsOrg: 0.0 },
    { area: 'Calidad',        promedio: 4.0, headcount: 12,  vsOrg: +0.2 },
    { area: 'Mantenimiento',  promedio: 3.5, headcount: 8,   vsOrg: -0.3 },
    { area: 'Administración', promedio: 4.1, headcount: 12,  vsOrg: +0.3 },
    { area: 'Logística',      promedio: 3.6, headcount: 4,   vsOrg: -0.2 },
  ];

  return (
    <div className="cd-subtab">
      <div className="page-head" style={{ paddingBottom: 0, marginBottom: 12 }}>
        <div>
          <h2 className="cf-section-title">Análisis organizacional</h2>
          <p className="cf-section-sub">Distribuciones agregadas y gaps por área. Vista que NO expone resultados individuales — Habeas Data.</p>
        </div>
        <div>
          <select value={filterArea} onChange={(e) => setFilterArea(e.target.value)}>
            <option value="todas">Todas las áreas</option>
            {areas.map(a => <option key={a}>{a}</option>)}
          </select>
        </div>
      </div>

      <div className="pd-card">
        <div className="pd-card-head">
          <h3>Recolección general · {totalN} colaboradores</h3>
          <span className="muted" style={{ fontSize: 11.5 }}>scores consolidados del último ciclo cerrado</span>
        </div>
        <div className="cd-dist">
          {distribucion.map((d, i) => {
            const pct = Math.round((d.n / totalN) * 100);
            return (
              <div key={i} className="cd-dist-row">
                <div className="cd-dist-lbl">Nivel {d.lvl}</div>
                <div className="cd-dist-bar"><div className={`cd-dist-fill cd-dist-${d.lvl}`} style={{ width: `${pct}%` }} /></div>
                <div className="mono cd-dist-count">{d.n} <small>({pct}%)</small></div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="cd-grid-2" style={{ marginTop: 16 }}>
        <div className="pd-card">
          <div className="pd-card-head"><h3>Top fortalezas organizacionales</h3></div>
          <div className="cd-rank">
            {fortalezasOrg.map((f, i) => (
              <div key={i} className="cd-rank-row green">
                <span className="cd-rank-num">{i + 1}</span>
                <span style={{ flex: 1 }}>
                  <b>{f.nombre}</b>
                  <span className="muted mono" style={{ fontSize: 10.5, marginLeft: 8 }}>{f.compId}</span>
                </span>
                <span className="mono">{f.promedio.toFixed(1)}</span>
              </div>
            ))}
          </div>
        </div>
        <div className="pd-card">
          <div className="pd-card-head"><h3>Áreas de desarrollo organizacionales</h3></div>
          <div className="cd-rank">
            {desarrolloOrg.map((f, i) => (
              <div key={i} className="cd-rank-row amber">
                <span className="cd-rank-num">{i + 1}</span>
                <span style={{ flex: 1 }}>
                  <b>{f.nombre}</b>
                  <span className="muted mono" style={{ fontSize: 10.5, marginLeft: 8 }}>{f.compId}</span>
                </span>
                <span className="mono">{f.promedio.toFixed(1)}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="pd-card" style={{ marginTop: 16 }}>
        <div className="pd-card-head"><h3>Comparativo por área · vs. promedio organización</h3></div>
        <table className="cd-matriz-table">
          <thead>
            <tr>
              <th>Área</th>
              <th>Headcount</th>
              <th>Promedio</th>
              <th>Vs. organización</th>
              <th>Tendencia</th>
            </tr>
          </thead>
          <tbody>
            {porArea.map((a, i) => (
              <tr key={i}>
                <td><b>{a.area}</b></td>
                <td className="mono">{a.headcount}</td>
                <td className="mono">{a.promedio.toFixed(2)}</td>
                <td className="mono" style={{ color: a.vsOrg > 0 ? 'var(--green-600)' : a.vsOrg < 0 ? 'var(--aguila-600)' : 'var(--text-muted)', fontWeight: 700 }}>
                  {a.vsOrg > 0 ? '+' : ''}{a.vsOrg.toFixed(2)}
                </td>
                <td>
                  <div className="cd-spark">
                    <div className={`cd-spark-bar ${a.vsOrg > 0 ? 'pos' : a.vsOrg < 0 ? 'neg' : ''}`}
                      style={{ width: `${Math.min(100, Math.abs(a.vsOrg) * 200)}%` }} />
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

window.AnalisisTab = AnalisisTab;

// ─── CalibracionGlobalTab ─────────────────────────────────

const CalibracionGlobalTab = () => {
  // Mock: distribución por jefe (detección de leniencia/severidad)
  const porJefe = [
    { jefeId: 'E0023', jefeNombre: 'Carolina Restrepo', n: 4,  promedio: 4.0, sesgo: 'leniencia',         delta: '+0.4 vs org' },
    { jefeId: 'E0067', jefeNombre: 'Luis Miguel Marín', n: 5,  promedio: 3.5, sesgo: null,                delta: '-0.1 vs org' },
    { jefeId: 'E0177', jefeNombre: 'Jorge Iván Patiño', n: 1,  promedio: 4.0, sesgo: 'muestra-pequeña',    delta: '+0.4 vs org' },
  ];

  return (
    <div className="cd-subtab">
      <div className="page-head" style={{ paddingBottom: 0, marginBottom: 12 }}>
        <div>
          <h2 className="cf-section-title">Calibración organizacional</h2>
          <p className="cf-section-sub">Detección de sesgos por jefe directo. Ley 2466/2025 exige motivación de las decisiones de talento.</p>
        </div>
      </div>

      <div className="pd-card">
        <div className="pd-card-head">
          <h3>Sesgos detectados por evaluador</h3>
          <span className="muted" style={{ fontSize: 11.5 }}>jefes con calificaciones que se desvían &gt; ±0.3 del promedio</span>
        </div>
        <table className="cd-matriz-table">
          <thead>
            <tr>
              <th>Jefe directo</th>
              <th>N evaluados</th>
              <th>Promedio dado</th>
              <th>Desviación</th>
              <th>Sesgo</th>
              <th>Acción sugerida</th>
            </tr>
          </thead>
          <tbody>
            {porJefe.map(j => (
              <tr key={j.jefeId}>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div className="doc-avatar" style={{ width: 26, height: 26, fontSize: 10 }}>
                      {((window.PERSONAS_DESEMPENO || {})[j.jefeId] || {}).initials || '??'}
                    </div>
                    <span style={{ fontWeight: 600, fontSize: 12.5 }}>{j.jefeNombre}</span>
                  </div>
                </td>
                <td className="mono">{j.n}</td>
                <td className="mono"><b>{j.promedio.toFixed(2)}</b></td>
                <td className="mono">{j.delta}</td>
                <td>
                  {j.sesgo
                    ? <span className="pill amber-soft" style={{ fontSize: 10 }}>{j.sesgo}</span>
                    : <span className="muted" style={{ fontSize: 11 }}>—</span>}
                </td>
                <td>
                  {j.sesgo === 'leniencia' && <span className="muted" style={{ fontSize: 11 }}>Sesión de calibración 1:1 con RRHH</span>}
                  {j.sesgo === 'muestra-pequeña' && <span className="muted" style={{ fontSize: 11 }}>Calibrar contra promedio del área</span>}
                  {!j.sesgo && <span className="muted" style={{ fontSize: 11 }}>Sin acción</span>}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="pd-card" style={{ marginTop: 16 }}>
        <div className="pd-card-head"><h3>Patrones detectados (Ley 1010/2006)</h3></div>
        <div className="muted" style={{ fontSize: 12.5, padding: 4 }}>
          Sin patrones de calificaciones sistemáticamente bajas que sugieran posible acoso laboral.
          El sistema monitorea: jefes que califican a un mismo subordinado por debajo del promedio del cargo en 2+ ciclos consecutivos.
        </div>
      </div>
    </div>
  );
};

window.CalibracionGlobalTab = CalibracionGlobalTab;

// ─── ConfiguracionTab ─────────────────────────────────────

const ConfiguracionTab = () => {
  const [sub, setSub] = _pt_useState('competencias');

  return (
    <div className="cd-subtab">
      <div className="page-head" style={{ paddingBottom: 0, marginBottom: 12 }}>
        <div>
          <h2 className="cf-section-title">Configuración del módulo</h2>
          <p className="cf-section-sub">Catálogos reutilizables por todos los ciclos · cambios se aplican a futuros ciclos.</p>
        </div>
      </div>

      <div className="doc-tabs" style={{ marginBottom: 12 }}>
        <button className={`doc-tab ${sub === 'competencias' ? 'active' : ''}`} onClick={() => setSub('competencias')}>Competencias conductuales</button>
        <button className={`doc-tab ${sub === 'escalas' ? 'active' : ''}`} onClick={() => setSub('escalas')}>Plantillas de escala</button>
        <button className={`doc-tab ${sub === 'niveles' ? 'active' : ''}`} onClick={() => setSub('niveles')}>Niveles esperados por cargo</button>
        <button className={`doc-tab ${sub === 'cruce' ? 'active' : ''}`} onClick={() => setSub('cruce')}>Cruce con Capacitaciones</button>
      </div>

      {sub === 'competencias' && <CfgCompetencias />}
      {sub === 'escalas'      && <CfgEscalas />}
      {sub === 'niveles'      && <CfgNiveles />}
      {sub === 'cruce'        && <CfgCruce />}
    </div>
  );
};

window.ConfiguracionTab = ConfiguracionTab;

const CfgCompetencias = () => {
  const comps = window.COMPETENCIAS_CONDUCTUALES || [];
  const familias = ['cardinal', 'funcional', 'de-nivel'];
  return (
    <div>
      {familias.map(f => {
        const list = comps.filter(c => c.familia === f);
        return (
          <div key={f} className="pd-card" style={{ marginBottom: 12 }}>
            <div className="pd-card-head">
              <h3>Familia · {f === 'cardinal' ? 'Cardinales (toda la org)' : f === 'funcional' ? 'Funcionales (por área)' : 'De nivel (por jerarquía)'}</h3>
              <span className="muted mono" style={{ fontSize: 11 }}>{list.length} competencias</span>
            </div>
            <div className="cd-comp-grid">
              {list.map(c => (
                <div key={c.id} className="cd-comp-mini">
                  <div className="cd-comp-mini-head">
                    <span className={`cd-fam fam-${c.familia}`}>{c.categoria}</span>
                    <span className="cd-comp-mini-id mono">{c.id}</span>
                  </div>
                  <div className="cd-comp-mini-name">{c.nombre}</div>
                  <div className="muted" style={{ fontSize: 11.5, marginTop: 4, lineHeight: 1.4 }}>{c.descripcion}</div>
                  <div className="muted" style={{ fontSize: 11, marginTop: 6 }}>
                    <b>{c.indicadoresConductuales.length}</b> indicadores · diccionario 1–5
                  </div>
                </div>
              ))}
            </div>
          </div>
        );
      })}
    </div>
  );
};

const CfgEscalas = () => {
  const escalas = window.ESCALAS_PLANTILLAS || [];
  return (
    <div>
      {escalas.map(e => (
        <div key={e.id} className="pd-card" style={{ marginBottom: 12 }}>
          <div className="pd-card-head">
            <h3>{e.nombre}</h3>
            <span className="muted mono" style={{ fontSize: 11 }}>{e.id} · cargos: {e.aplicaCargosIds.join(', ')}</span>
          </div>
          <div className="cd-factors">
            {e.factores.map(f => (
              <div key={f.id} className="cd-factor-row">
                <span className="cd-factor-name">{f.nombre}</span>
                <span className="muted" style={{ fontSize: 11.5 }}>{f.descriptor}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
};

const CfgNiveles = () => {
  const niveles = window.NIVELES_ESPERADOS_CARGO || [];
  const cargos = window.CARGOS || [];
  return (
    <div className="pd-card">
      <div className="pd-card-head"><h3>Matriz cargo ↔ competencia conductual</h3></div>
      <table className="cd-matriz-table">
        <thead>
          <tr>
            <th>Cargo</th>
            <th>Competencia</th>
            <th>Nivel esperado</th>
            <th>Peso</th>
          </tr>
        </thead>
        <tbody>
          {niveles.map((n, i) => {
            const cargo = cargos.find(c => c.id === n.cargoId);
            const comp = (window.COMPETENCIAS_CONDUCTUALES || []).find(c => c.id === n.compId);
            return (
              <tr key={i}>
                <td><b>{cargo?.nombre || n.cargoId}</b></td>
                <td>{comp?.nombre || n.compId} <span className="muted mono" style={{ fontSize: 10.5 }}>{n.compId}</span></td>
                <td><span className={`td-nivel-badge n-${n.nivelEsperado}`} style={{ width: 22, height: 22, fontSize: 11 }}>{n.nivelEsperado}</span></td>
                <td className="mono">{Math.round(n.peso * 100)}%</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

const CfgCruce = () => {
  const cruce = window.CRUCE_TECNICO_CONDUCTUAL || [];
  return (
    <div className="pd-card">
      <div className="pd-card-head">
        <h3>Cruce con catálogo de Capacitaciones</h3>
        <span className="muted" style={{ fontSize: 11.5 }}>cuando una competencia conductual baja, sugiere cursos del módulo Capacitaciones</span>
      </div>
      <table className="cd-matriz-table">
        <thead>
          <tr><th>Conductual baja</th><th>Cursos sugeridos</th><th>Razón</th></tr>
        </thead>
        <tbody>
          {cruce.map((c, i) => {
            const comp = (window.COMPETENCIAS_CONDUCTUALES || []).find(x => x.id === c.conductualId);
            return (
              <tr key={i}>
                <td><b>{comp?.nombre || c.conductualId}</b></td>
                <td>
                  <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                    {c.tecnicasIds.map(id => <span key={id} className="ic-row-tag green">{id}</span>)}
                  </div>
                </td>
                <td className="muted" style={{ fontSize: 11.5 }}>{c.razon}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};