// Performance · Detalle de un ciclo (Fase B+)
// Pantalla completa con stepper de fases y 6 sub-tabs:
//   1) Configuración · 2) Matriz · 3) Seguimiento · 4) Resultados ·
//   5) Calibración · 6) Publicación.
//
// Se abre cuando el admin hace click en una card de ciclo.
// Reemplaza la idea de "Mi evaluación" — el admin GESTIONA el ciclo,
// los evaluadores responden desde su portal.

const { useState: _cd_useState, useMemo: _cd_useMemo } = React;

const FASES_CICLO = [
  { id: 'configurando',         label: 'Configuración',     desc: 'Define la regla del ciclo' },
  { id: 'invitaciones-enviadas',label: 'Invitaciones',       desc: 'Notifica a evaluadores' },
  { id: 'en-progreso',          label: 'Ejecución',          desc: 'Evaluadores responden' },
  { id: 'cerrando',             label: 'Cierre',             desc: 'Verifica respuestas' },
  { id: 'calibrando',           label: 'Calibración',        desc: 'Comité ajusta sesgos' },
  { id: 'publicado',            label: 'Publicación',        desc: 'Resultados visibles' },
];

const _faseIdx = (estado) => {
  const i = FASES_CICLO.findIndex(f => f.id === estado);
  return i < 0 ? 0 : i;
};

// ─── CycleDetailScreen ────────────────────────────────────

const CycleDetailScreen = ({ cicloId, onBack }) => {
  const [tab, setTab] = _cd_useState('config');
  const [editOpen, setEditOpen] = _cd_useState(false);
  const [tick, setTick] = _cd_useState(0);

  const ciclo = _cd_useMemo(() =>
    (window.CICLOS_EVALUACION || []).find(c => c.id === cicloId),
    [cicloId, tick]);

  if (!ciclo) {
    return (
      <div className="main">
        <div className="empty-state" style={{ padding: 60 }}>
          <div style={{ fontWeight: 700 }}>Ciclo no encontrado</div>
          <button className="btn" onClick={onBack}>← Volver</button>
        </div>
      </div>
    );
  }

  const faseActual = _faseIdx(ciclo.estado);
  const audienciaResolved = _resolverAudiencia(ciclo);

  const advancePhase = () => {
    const next = FASES_CICLO[Math.min(FASES_CICLO.length - 1, faseActual + 1)];
    ciclo.estado = next.id;
    if (next.id === 'publicado') ciclo.completitudPct = 100;
    setTick(t => t + 1);
  };

  return (
    <div className="main" data-screen-label="Ciclo">
      {/* Header con back */}
      <div className="page-head">
        <div>
          <button className="cd-back" onClick={onBack}>← Volver a ciclos</button>
          <h1 className="page-title" style={{ marginTop: 6 }}>{ciclo.nombre}</h1>
          <div className="page-subtitle">
            <span className="mono">{ciclo.id}</span> · período {ciclo.periodo.inicio} → {ciclo.periodo.fin} · responsable {ciclo.responsable}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button className="btn" onClick={() => setEditOpen(true)}>
            <IconExternal size={13} /> Editar configuración
          </button>
          {ciclo.estado !== 'publicado' && ciclo.estado !== 'archivado' && (
            <button className="btn primary" onClick={advancePhase}>
              {ciclo.estado === 'configurando' ? '→ Lanzar ciclo' :
               ciclo.estado === 'invitaciones-enviadas' ? '→ Marcar en progreso' :
               ciclo.estado === 'en-progreso' ? '→ Cerrar respuestas' :
               ciclo.estado === 'cerrando' ? '→ Iniciar calibración' :
               ciclo.estado === 'calibrando' ? '→ Publicar resultados' : '→ Avanzar'}
            </button>
          )}
        </div>
      </div>

      {/* Stepper de fases */}
      <div className="cd-fases">
        {FASES_CICLO.map((f, i) => (
          <div key={f.id} className={`cd-fase ${i === faseActual ? 'active' : ''} ${i < faseActual ? 'done' : ''}`}>
            <div className="cd-fase-bullet">
              {i < faseActual ? <IconCheck size={11} /> : <span>{i + 1}</span>}
            </div>
            <div className="cd-fase-text">
              <div className="cd-fase-label">{f.label}</div>
              <div className="cd-fase-desc">{f.desc}</div>
            </div>
            {i < FASES_CICLO.length - 1 && <div className="cd-fase-line" />}
          </div>
        ))}
      </div>

      {/* Resumen del ciclo */}
      <div className="cd-resumen">
        <div className="cd-resumen-card">
          <div className="muted-xs">Metodologías</div>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', marginTop: 6 }}>
            {ciclo.metodologias.map(m => <MetodologiaChip key={m} id={m} size="sm" />)}
          </div>
        </div>
        <div className="cd-resumen-card">
          <div className="muted-xs">Audiencia</div>
          <div className="cd-resumen-num">{audienciaResolved.length}</div>
          <div className="muted" style={{ fontSize: 11 }}>colaboradores · {ciclo.audiencia.tipo}</div>
        </div>
        <div className="cd-resumen-card">
          <div className="muted-xs">Tasa de respuesta</div>
          <div className="cd-resumen-num">{ciclo.completitudPct}<small>%</small></div>
          <div className="muted" style={{ fontSize: 11 }}>{ciclo.completados} de {ciclo.invitados}</div>
        </div>
        <div className="cd-resumen-card">
          <div className="muted-xs">Anonimato mín.</div>
          <div className="cd-resumen-num">N≥{ciclo.anonimatoMinN || 3}</div>
          <div className="muted" style={{ fontSize: 11 }}>Habeas Data Ley 1581</div>
        </div>
        <div className="cd-resumen-card">
          <div className="muted-xs">Ponderación</div>
          <div className="cd-resumen-pond">
            <span><b>{Math.round(ciclo.pondCompetencias * 100)}%</b> comp.</span>
            <span><b>{Math.round(ciclo.pondObjetivos * 100)}%</b> obj.</span>
          </div>
        </div>
      </div>

      {/* Sub-tabs */}
      <div className="doc-tabs" style={{ marginTop: 16 }}>
        <button className={`doc-tab ${tab === 'config' ? 'active' : ''}`} onClick={() => setTab('config')}>Configuración</button>
        <button className={`doc-tab ${tab === 'matriz' ? 'active' : ''}`} onClick={() => setTab('matriz')}>Matriz de evaluadores</button>
        <button className={`doc-tab ${tab === 'seguimiento' ? 'active' : ''}`} onClick={() => setTab('seguimiento')}>Seguimiento</button>
        <button className={`doc-tab ${tab === 'resultados' ? 'active' : ''}`} onClick={() => setTab('resultados')}>Resultados</button>
        <button className={`doc-tab ${tab === 'calibracion' ? 'active' : ''}`} onClick={() => setTab('calibracion')}>Calibración</button>
        <button className={`doc-tab ${tab === 'publicacion' ? 'active' : ''}`} onClick={() => setTab('publicacion')}>Publicación</button>
      </div>

      {tab === 'config'      && <CycleConfigSubtab ciclo={ciclo} audiencia={audienciaResolved} />}
      {tab === 'matriz'      && <CycleMatrizSubtab ciclo={ciclo} audiencia={audienciaResolved} />}
      {tab === 'seguimiento' && <CycleSeguimientoSubtab ciclo={ciclo} audiencia={audienciaResolved} />}
      {tab === 'resultados'  && <CycleResultadosSubtab ciclo={ciclo} />}
      {tab === 'calibracion' && <CycleCalibracionSubtab ciclo={ciclo} />}
      {tab === 'publicacion' && <CyclePublicacionSubtab ciclo={ciclo} faseActual={faseActual} />}

      {editOpen && window.NewCycleModal && (
        <NewCycleModal onClose={() => setEditOpen(false)} onSave={() => setTick(t => t + 1)} />
      )}
    </div>
  );
};

window.CycleDetailScreen = CycleDetailScreen;

// Resuelve la lista de empIds según la audiencia del ciclo
function _resolverAudiencia(ciclo) {
  const personas = window.PERSONAS_DESEMPENO || {};
  const cargos = window.CARGOS || [];
  if (ciclo.audiencia.tipo === 'todos') return Object.keys(personas);
  if (ciclo.audiencia.tipo === 'liderazgos') {
    return Object.entries(personas).filter(([_, p]) => {
      const c = cargos.find(c => c.id === p.cargoId);
      return c && (c.nivel === 'liderazgo' || c.nivel === 'directivo');
    }).map(([id]) => id);
  }
  return [];
}
window._resolverAudienciaCiclo = _resolverAudiencia;

// ─── Subtab 1: Configuración ──────────────────────────────

const CycleConfigSubtab = ({ ciclo, audiencia }) => {
  const escalasUsadas = ciclo.metodologias.includes('escalas')
    ? (window.ESCALAS_PLANTILLAS || [])
    : [];

  return (
    <div className="cd-subtab">
      <div className="cd-config-grid">
        <div className="pd-card">
          <div className="pd-card-head"><h3>Identidad</h3></div>
          <div className="cd-kv">
            <div><span>Nombre</span><b>{ciclo.nombre}</b></div>
            <div><span>ID</span><span className="mono">{ciclo.id}</span></div>
            <div><span>Período evaluado</span><span className="mono">{ciclo.periodo.inicio} → {ciclo.periodo.fin}</span></div>
            <div><span>Apertura</span><span className="mono">{ciclo.apertura}</span></div>
            <div><span>Cierre</span><span className="mono">{ciclo.cierre}</span></div>
            <div><span>Responsable</span><b>{ciclo.responsable}</b></div>
          </div>
        </div>

        <div className="pd-card">
          <div className="pd-card-head"><h3>Reglas del ciclo</h3></div>
          <div className="cd-kv">
            <div><span>Metodologías</span>
              <span style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
                {ciclo.metodologias.map(m => <MetodologiaChip key={m} id={m} size="sm" />)}
              </span>
            </div>
            <div><span>Peso competencias</span><b>{Math.round(ciclo.pondCompetencias * 100)}%</b></div>
            <div><span>Peso objetivos</span><b>{Math.round(ciclo.pondObjetivos * 100)}%</b></div>
            <div><span>Anonimato mínimo</span><b>N ≥ {ciclo.anonimatoMinN || 3}</b></div>
            <div><span>Firma electrónica</span><b>{ciclo.requireFirmaElectronica ? 'Requerida (Ley 527)' : 'Opcional'}</b></div>
            <div><span>Audiencia</span><b>{ciclo.audiencia.tipo}</b> <span className="muted">· {audiencia.length} colaboradores</span></div>
          </div>
        </div>
      </div>

      {ciclo.metodologias.includes('competencias') && (
        <div className="pd-card" style={{ marginTop: 16 }}>
          <div className="pd-card-head">
            <h3>Competencias evaluadas</h3>
            <span className="muted" style={{ fontSize: 11.5 }}>derivadas del catálogo y del cargo de cada evaluado</span>
          </div>
          <div className="cd-comp-grid">
            {(window.COMPETENCIAS_CONDUCTUALES || []).map(c => (
              <div key={c.id} className="cd-comp-mini">
                <div className="cd-comp-mini-head">
                  <span className={`cd-fam fam-${c.familia}`}>{c.familia}</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 }}>{c.indicadoresConductuales.length} indicadores</div>
              </div>
            ))}
          </div>
        </div>
      )}

      {escalasUsadas.length > 0 && (
        <div className="pd-card" style={{ marginTop: 16 }}>
          <div className="pd-card-head"><h3>Plantillas de escala</h3></div>
          {escalasUsadas.map(e => (
            <div key={e.id} style={{ marginBottom: 12 }}>
              <div style={{ fontWeight: 700, fontSize: 13 }}>{e.nombre} <span className="muted mono" style={{ fontSize: 11 }}>· {e.id}</span></div>
              <div className="muted" style={{ fontSize: 11.5, marginBottom: 6 }}>Aplica a: {e.aplicaCargosIds.join(', ')}</div>
              <div className="cd-factors">
                {e.factores.map(f => <span key={f.id} className="cd-factor">{f.nombre}</span>)}
              </div>
            </div>
          ))}
        </div>
      )}

      <div className="pd-card" style={{ marginTop: 16 }}>
        <div className="pd-card-head"><h3>Marco normativo aplicable</h3></div>
        <div className="cd-normas">
          {(window.MARCO_NORMATIVO_DESEMPENO || []).map((n, i) => (
            <div key={i} className="cd-norma">
              <div className="cd-norma-head"><b>{n.norma}</b></div>
              <div className="muted" style={{ fontSize: 11.5 }}>{n.tema}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── Subtab 2: Matriz ──────────────────────────────────────

const CycleMatrizSubtab = ({ ciclo, audiencia }) => {
  const [matrixOpen, setMatrixOpen] = _cd_useState(false);
  const minN = ciclo.anonimatoMinN || 3;

  const matrices = audiencia.map(empId => {
    const m = window.matrizDesdeOrganigrama ? window.matrizDesdeOrganigrama(empId) : { self: [empId], manager: [], peers: [], reports: [] };
    const persona = (window.PERSONAS_DESEMPENO || {})[empId] || {};
    const peerOk = m.peers.length >= minN;
    const reportOk = m.reports.length >= minN;
    const degradado = ciclo.metodologias.includes('360') && !peerOk && !reportOk;
    return { empId, persona, m, peerOk, reportOk, degradado };
  });

  const totalEvaluadores = matrices.reduce((s, x) => s + x.m.self.length + x.m.manager.length + x.m.peers.length + x.m.reports.length, 0);
  const degradados = matrices.filter(x => x.degradado).length;

  return (
    <div className="cd-subtab">
      <div className="pd-card">
        <div className="pd-card-head">
          <h3>Vista organizacional · matriz auto-poblada desde organigrama</h3>
          <button className="btn" onClick={() => setMatrixOpen(true)}>
            <IconExternal size={13} /> Diseñar matriz manual
          </button>
        </div>
        <div className="cd-matriz-stats">
          <div><div className="muted-xs">Evaluadores invitados</div><div className="cd-resumen-num">{totalEvaluadores}</div></div>
          <div><div className="muted-xs">Evaluados</div><div className="cd-resumen-num">{matrices.length}</div></div>
          {ciclo.metodologias.includes('360') && (
            <div>
              <div className="muted-xs">Degradan a 180°</div>
              <div className="cd-resumen-num" style={{ color: degradados > 0 ? 'var(--amber-600)' : 'var(--green-600)' }}>
                {degradados}
              </div>
              <div className="muted" style={{ fontSize: 11 }}>por anonimato N&lt;{minN}</div>
            </div>
          )}
        </div>

        <table className="cd-matriz-table">
          <thead>
            <tr>
              <th>Evaluado</th>
              <th>Self</th>
              <th>Jefe</th>
              <th>Pares</th>
              <th>Reportes</th>
              <th>Modo efectivo</th>
            </tr>
          </thead>
          <tbody>
            {matrices.map(({ empId, persona, m, peerOk, reportOk, degradado }) => (
              <tr key={empId} className={degradado ? 'degrad' : ''}>
                <td>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                    <div className="doc-avatar" style={{ width: 26, height: 26, fontSize: 10 }}>{persona.initials || '??'}</div>
                    <span style={{ fontWeight: 600, fontSize: 12.5 }}>{persona.nombre || empId}</span>
                  </div>
                </td>
                <td className="mono">{m.self.length}</td>
                <td className="mono">{m.manager.length || '—'}</td>
                <td>
                  <span className={`cd-cell-num ${peerOk ? 'ok' : 'warn'}`}>{m.peers.length}</span>
                </td>
                <td>
                  <span className={`cd-cell-num ${reportOk ? 'ok' : 'warn'}`}>{m.reports.length}</span>
                </td>
                <td>
                  <span className={`pill ${degradado ? 'amber-soft' : 'green'}`} style={{ fontSize: 10 }}>
                    {ciclo.metodologias.includes('360') && !degradado ? '360°' : ciclo.metodologias.includes('180') ? '180°' : '90°'}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {matrixOpen && window.Matrix360Modal && <Matrix360Modal onClose={() => setMatrixOpen(false)} />}
    </div>
  );
};

// ─── Subtab 3: Seguimiento ────────────────────────────────

const CycleSeguimientoSubtab = ({ ciclo, audiencia }) => {
  const todasInstancias = (window.EVALUACIONES_INSTANCIA || []).filter(e => e.cicloId === ciclo.id);
  const enviadas = todasInstancias.filter(e => e.estado === 'enviado-firmado').length;
  const pendientes = todasInstancias.filter(e => e.estado === 'pendiente').length;
  const borradores = todasInstancias.filter(e => e.estado === 'borrador').length;
  const total = todasInstancias.length;
  const tasa = total > 0 ? Math.round((enviadas / total) * 100) : 0;

  // Pendientes vencidos vs en plazo
  const hoy = new Date();
  const venceParse = (s) => s ? new Date(s.split('/').reverse().join('-')) : null;
  const vencidos = todasInstancias.filter(e => {
    if (e.estado !== 'pendiente') return false;
    const v = venceParse(e.plazoVence);
    return v && v < hoy;
  }).length;

  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">{enviadas}<small> / {total}</small></div>
            <div className="tr-kpi-lbl">Enviadas y firmadas</div>
            <div className="tr-kpi-foot">{tasa}% · firma electrónica Ley 527</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon amber"><IconClock size={18} /></div>
          <div>
            <div className="tr-kpi-num">{pendientes}</div>
            <div className="tr-kpi-lbl">Pendientes</div>
            <div className="tr-kpi-foot">{vencidos} vencidos · escalar al jefe</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon navy"><IconExternal size={18} /></div>
          <div>
            <div className="tr-kpi-num">{borradores}</div>
            <div className="tr-kpi-lbl">En borrador</div>
            <div className="tr-kpi-foot">Iniciados sin firmar</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon rose"><IconUsers size={18} /></div>
          <div>
            <div className="tr-kpi-num">{audiencia.length}</div>
            <div className="tr-kpi-lbl">Colaboradores en alcance</div>
            <div className="tr-kpi-foot">{ciclo.audiencia.tipo}</div>
          </div>
        </div>
      </div>

      <div className="pd-card" style={{ marginTop: 16 }}>
        <div className="pd-card-head">
          <h3>Bandeja de respuestas</h3>
          <button className="btn primary"><IconExternal size={13} /> Enviar recordatorio masivo</button>
        </div>
        {todasInstancias.length === 0 ? (
          <div className="muted" style={{ fontSize: 12.5, padding: 12 }}>
            Sin instancias de evaluación creadas aún. Lanza el ciclo desde la cabecera para enviar invitaciones.
          </div>
        ) : (
          <table className="cd-matriz-table">
            <thead>
              <tr>
                <th>Evaluador</th>
                <th>Evaluado</th>
                <th>Perspectiva</th>
                <th>Estado</th>
                <th>Vence</th>
                <th>Firmado</th>
              </tr>
            </thead>
            <tbody>
              {todasInstancias.map(e => {
                const evaluador = (window.PERSONAS_DESEMPENO || {})[e.evaluadorId] || {};
                const evaluado  = (window.PERSONAS_DESEMPENO || {})[e.evaluadoId] || {};
                return (
                  <tr key={e.id}>
                    <td>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        <div className="doc-avatar" style={{ width: 22, height: 22, fontSize: 9 }}>{evaluador.initials || '??'}</div>
                        <span style={{ fontSize: 12 }}>{evaluador.nombre || e.evaluadorId}</span>
                      </div>
                    </td>
                    <td>
                      <span style={{ fontSize: 12 }}>{evaluado.nombre || e.evaluadoId}</span>
                    </td>
                    <td><span className={`pill navy`} style={{ fontSize: 10 }}>{e.perspectiva}</span></td>
                    <td>
                      <span className={`pill ${e.estado === 'enviado-firmado' ? 'green' : e.estado === 'borrador' ? 'amber-soft' : 'rose'}`} style={{ fontSize: 10 }}>
                        {e.estado}
                      </span>
                    </td>
                    <td className="mono" style={{ fontSize: 11 }}>{e.plazoVence || '—'}</td>
                    <td className="mono" style={{ fontSize: 11 }}>{e.fechaEnvio || '—'}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
};

// ─── Subtab 4: Resultados ──────────────────────────────────

const CycleResultadosSubtab = ({ ciclo }) => {
  const isPubOrCal = ['cerrando', 'calibrando', 'publicado', 'archivado'].includes(ciclo.estado);

  if (!isPubOrCal) {
    return (
      <div className="cd-subtab">
        <div className="empty-state" style={{ padding: 50 }}>
          <IconBarChart size={32} style={{ color: 'var(--text-subtle)' }} />
          <div style={{ fontWeight: 700, marginTop: 8 }}>Resultados no disponibles aún</div>
          <div className="muted" style={{ fontSize: 12.5, maxWidth: 480, textAlign: 'center' }}>
            El ciclo está en fase <b>{ciclo.estado}</b>. Los resultados se agregan al cerrar respuestas y aplicar la regla de anonimato N≥{ciclo.anonimatoMinN || 3}.
          </div>
        </div>
      </div>
    );
  }

  // Mock: demostrar la estructura usando los resultados de Luis Miguel del 360°
  // En operaciones, el agregador del ciclo entrega esta estructura.
  return (
    <div className="cd-subtab">
      <div className="pd-card">
        <div className="pd-card-head">
          <h3>Recolección organizacional</h3>
          <span className="muted" style={{ fontSize: 11.5 }}>Score consolidado · agregado anónimo</span>
        </div>
        <div className="cd-dist">
          {[
            { lbl: '1 - No cumple', count: 1, pct: 5 },
            { lbl: '2 - Por desarrollar', count: 3, pct: 15 },
            { lbl: '3 - Cumple', count: 6, pct: 31 },
            { lbl: '4 - Supera', count: 7, pct: 36 },
            { lbl: '5 - Referente', count: 3, pct: 13 },
          ].map((d, i) => (
            <div key={i} className="cd-dist-row">
              <div className="cd-dist-lbl">{d.lbl}</div>
              <div className="cd-dist-bar">
                <div className={`cd-dist-fill cd-dist-${i + 1}`} style={{ width: `${d.pct}%` }} />
              </div>
              <div className="mono cd-dist-count">{d.count} <small>({d.pct}%)</small></div>
            </div>
          ))}
        </div>
      </div>

      <div className="cd-grid-2">
        <div className="pd-card">
          <div className="pd-card-head"><h3>Top 3 fortalezas organizacionales</h3></div>
          <div className="cd-rank">
            <div className="cd-rank-row green"><span className="cd-rank-num">1</span><span style={{ flex: 1 }}>Seguridad y autocuidado (CDC-02)</span><span className="mono">4.2</span></div>
            <div className="cd-rank-row green"><span className="cd-rank-num">2</span><span style={{ flex: 1 }}>Compromiso con la calidad (CDC-01)</span><span className="mono">4.1</span></div>
            <div className="cd-rank-row green"><span className="cd-rank-num">3</span><span style={{ flex: 1 }}>Conocimiento técnico (CDF-02)</span><span className="mono">3.9</span></div>
          </div>
        </div>
        <div className="pd-card">
          <div className="pd-card-head"><h3>Áreas de desarrollo</h3></div>
          <div className="cd-rank">
            <div className="cd-rank-row amber"><span className="cd-rank-num">1</span><span style={{ flex: 1 }}>Adaptabilidad y mejora continua (CDC-04)</span><span className="mono">3.0</span></div>
            <div className="cd-rank-row amber"><span className="cd-rank-num">2</span><span style={{ flex: 1 }}>Comunicación efectiva (CDN-02)</span><span className="mono">3.2</span></div>
            <div className="cd-rank-row amber"><span className="cd-rank-num">3</span><span style={{ flex: 1 }}>Visión estratégica (CDN-04)</span><span className="mono">3.4</span></div>
          </div>
        </div>
      </div>

      <div className="pd-card" style={{ marginTop: 16 }}>
        <div className="pd-card-head"><h3>Aplicación de regla de anonimato</h3></div>
        <div className="cd-anon-summary">
          <div className="pc-anon-badge ok"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>15 evaluados · regla N≥{ciclo.anonimatoMinN || 3} cumplida</div>
          <div className="pc-anon-badge warn"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>3 evaluados · degradados a 180° automáticamente</div>
        </div>
      </div>
    </div>
  );
};

// ─── Subtab 5: Calibración ────────────────────────────────

const CycleCalibracionSubtab = ({ ciclo }) => {
  const [ajustes, setAjustes] = _cd_useState([]);

  // Mock: distribución por área (simulación)
  const distArea = [
    { area: 'Operaciones',     dist: [1, 4, 12, 18, 4],  promedio: 3.5, sesgo: null },
    { area: 'Aprovechamiento',        dist: [0, 1, 6,  10, 3],  promedio: 3.7, sesgo: null },
    { area: 'Calidad',        dist: [0, 0, 2,  8,  2],  promedio: 4.0, sesgo: 'leniencia' },
    { area: 'Mantenimiento',  dist: [0, 1, 5,  2,  0],  promedio: 3.1, sesgo: null },
    { area: 'Administración', dist: [0, 0, 0,  3,  0],  promedio: 4.0, sesgo: 'tendencia-central' },
  ];

  const aplicarAjuste = (area, delta) => {
    setAjustes(arr => [...arr, { area, delta, autor: 'Carolina Restrepo', fecha: new Date().toLocaleDateString('es-CO'), motivo: 'Ajuste manual del comité' }]);
  };

  return (
    <div className="cd-subtab">
      <div className="pd-card">
        <div className="pd-card-head">
          <h3>Comité de calibración</h3>
          <span className="muted" style={{ fontSize: 11.5 }}>Detección de sesgos · Ley 2466/2025 motivación</span>
        </div>
        <div className="cd-cal-info">
          <IconShield size={14} />
          <div style={{ fontSize: 12, lineHeight: 1.5 }}>
            La calibración es una <b>fase obligatoria</b> antes de publicar resultados. El comité revisa la distribución por área
            para detectar sesgos comunes (tendencia central, leniencia, halo, contraste). Los ajustes quedan en bitácora con autor + motivo.
          </div>
        </div>

        <table className="cd-matriz-table" style={{ marginTop: 14 }}>
          <thead>
            <tr>
              <th>Área</th>
              <th>1</th><th>2</th><th>3</th><th>4</th><th>5</th>
              <th>Promedio</th>
              <th>Sesgo detectado</th>
              <th>Acción</th>
            </tr>
          </thead>
          <tbody>
            {distArea.map((a, i) => (
              <tr key={i}>
                <td><b>{a.area}</b></td>
                {a.dist.map((n, j) => <td key={j} className="mono">{n}</td>)}
                <td className="mono"><b>{a.promedio.toFixed(1)}</b></td>
                <td>
                  {a.sesgo
                    ? <span className="pill amber-soft" style={{ fontSize: 10 }}>{a.sesgo}</span>
                    : <span className="muted" style={{ fontSize: 11 }}>—</span>}
                </td>
                <td>
                  {a.sesgo && (
                    <div style={{ display: 'flex', gap: 4 }}>
                      <button className="btn" style={{ padding: '3px 8px', fontSize: 11 }} onClick={() => aplicarAjuste(a.area, -0.2)}>-0.2</button>
                      <button className="btn" style={{ padding: '3px 8px', fontSize: 11 }} onClick={() => aplicarAjuste(a.area, +0.2)}>+0.2</button>
                    </div>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {ajustes.length > 0 && (
        <div className="pd-card" style={{ marginTop: 16 }}>
          <div className="pd-card-head"><h3>Bitácora de ajustes · {ajustes.length}</h3></div>
          {ajustes.map((a, i) => (
            <div key={i} className="cd-ajuste">
              <span className="mono">{a.fecha}</span>
              <b style={{ marginLeft: 8 }}>{a.area}</b>
              <span className="mono" style={{ color: a.delta > 0 ? 'var(--green-600)' : 'var(--aguila-600)', marginLeft: 8 }}>
                {a.delta > 0 ? '+' : ''}{a.delta}
              </span>
              <span className="muted" style={{ marginLeft: 'auto', fontSize: 11.5 }}>{a.autor} · {a.motivo}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

// ─── Subtab 6: Publicación ────────────────────────────────

const CyclePublicacionSubtab = ({ ciclo, faseActual }) => {
  const isPub = ciclo.estado === 'publicado';

  const checklist = [
    { id: 'c1', label: 'Tasa de respuesta ≥ 80%', ok: ciclo.completitudPct >= 80 },
    { id: 'c2', label: 'Calibración aplicada', ok: ciclo.estado === 'calibrando' || ciclo.estado === 'publicado' },
    { id: 'c3', label: 'Regla de anonimato N≥3 verificada', ok: true },
    { id: 'c4', label: 'Firmas electrónicas Ley 527 completas', ok: ciclo.completitudPct === 100 },
    { id: 'c5', label: 'Comité de talento aprobó publicación', ok: ciclo.estado === 'publicado' },
  ];

  const todoOk = checklist.every(c => c.ok);

  return (
    <div className="cd-subtab">
      <div className="pd-card">
        <div className="pd-card-head"><h3>Checklist pre-publicación</h3></div>
        <div className="cd-checklist">
          {checklist.map(c => (
            <div key={c.id} className={`cd-check ${c.ok ? 'ok' : 'no'}`}>
              <span className="cd-check-bullet">{c.ok ? <IconCheck size={11} /> : '○'}</span>
              <span style={{ flex: 1 }}>{c.label}</span>
              <span className={`pill ${c.ok ? 'green' : 'amber-soft'}`} style={{ fontSize: 10 }}>{c.ok ? 'cumplido' : 'pendiente'}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="pd-card" style={{ marginTop: 16 }}>
        <div className="pd-card-head"><h3>Qué pasa al publicar</h3></div>
        <ul className="cd-pub-impacts">
          <li>Cada colaborador ve sus resultados en <b>portal → Mi desempeño</b> (anonimizado N≥{ciclo.anonimatoMinN || 3}).</li>
          <li>Snapshot Nine-Box se congela como <span className="mono">NB-{ciclo.id}</span> (auditable, no editable).</li>
          <li>Se sugieren PIPs a RRHH para casos con gaps significativos.</li>
          <li>Notificación por correo + portal a evaluados y evaluadores.</li>
          <li>Bitácora inmutable para auditoría ICONTEC ISO 9001:2015 · cap. 7.2.</li>
          <li>Resultados quedan disponibles en <b>ficha del empleado → tab Desempeño</b>.</li>
        </ul>
      </div>

      {!isPub && todoOk && (
        <div className="cd-pub-ready">
          <IconCheck size={16} />
          <span>El ciclo cumple todos los criterios. Usa "Publicar resultados" en la cabecera para hacer públicos los resultados a los colaboradores.</span>
        </div>
      )}

      {isPub && (
        <div className="cd-pub-done">
          <IconCheck size={16} />
          <span>Ciclo publicado el <b>{ciclo.cierre}</b>. Resultados disponibles para colaboradores y RRHH.</span>
        </div>
      )}
    </div>
  );
};