// 360° Evaluation · piezas que extienden Performance
// 1) MatrixModal (admin · diseña quién evalúa a quién)
// 2) Pending360Sidebar (reorganiza pendientes por perspectiva)
// 3) PerspectiveBanner (header del form cuando evalúas en 360°)
// 4) Results360Section (radar + gap + quotes)
// 5) RadarChart SVG inline
const { useState: _e3_useState } = React;

// ─── Data: 6 competencias de liderazgo ──────────────────

const COMP_360 = [
  { id: 'l1', name: 'Comunicación efectiva',     short: 'Comunicación',   axis: 'Comunicación' },
  { id: 'l2', name: 'Liderazgo situacional',     short: 'Liderazgo',      axis: 'Liderazgo' },
  { id: 'l3', name: 'Visión estratégica',        short: 'Visión',          axis: 'Visión' },
  { id: 'l4', name: 'Coaching y desarrollo',     short: 'Coaching',       axis: 'Coaching' },
  { id: 'l5', name: 'Toma de decisiones',        short: 'Decisiones',     axis: 'Decisiones' },
  { id: 'l6', name: 'Adaptabilidad al cambio',   short: 'Adaptabilidad',  axis: 'Adaptabilidad' },
];

const PERSPECTIVES = {
  self:    { label: 'Autoevaluación',     short: 'Yo',         tone: 'navy',  icon: 'IconUsers',  color: '#2E1A46', desc: 'Tu propia visión sobre tus competencias' },
  manager: { label: 'Jefe directo',       short: 'Mi jefe',     tone: 'blue',  icon: 'IconShield', color: '#0E5964', desc: 'Quien lidera tu equipo te evalúa' },
  peer:    { label: 'Pares',              short: 'Mis pares',   tone: 'amber', icon: 'IconStar',   color: '#B57609', desc: 'Personas con tu mismo nivel jerárquico · anónimo' },
  report:  { label: 'Equipo a cargo',     short: 'Mi equipo',   tone: 'green', icon: 'IconRocket', color: '#2AB36E', desc: 'Las personas que reportan a ti · anónimo' },
  stake:   { label: 'Stakeholders',       short: 'Stakeholders',tone: 'rose',  icon: 'IconExternal',color: '#EF435C', desc: 'Clientes internos / proveedores críticos · opcional' },
};

// ─── Líderes evaluados en el ciclo 360° Q4 2025 ───────

const EVALUATED_360 = [
  { id: 'E0023', initials: 'CR', name: 'Carolina Restrepo Salazar', role: 'Jefe de RRHH',         area: 'Administración',  reportsCount: 2, peersCount: 4, responseRate: 95 },
  { id: 'E0067', initials: 'LM', name: 'Luis Miguel Marín',         role: 'Líder de Aprovechamiento',     area: 'Aprovechamiento',         reportsCount: 12, peersCount: 4, responseRate: 88 },
  { id: 'E0244', initials: 'SO', name: 'Sandra Milena Ortiz',       role: 'Coord. Compras',       area: 'Administración',  reportsCount: 3, peersCount: 4, responseRate: 100 },
  { id: 'E0177', initials: 'JP', name: 'Jorge Iván Patiño',         role: 'Líder de Recolección', area: 'Recolección',   reportsCount: 6, peersCount: 3, responseRate: 78 },
];

// Para cada evaluado · quién lo evalúa por perspectiva (ejemplo · Luis Miguel Marín)
const EVAL_MATRIX_LM = {
  self:    [{ id: 'E0067', name: 'Luis Miguel Marín',           initials: 'LM', state: 'completed', date: '08/12/2025' }],
  manager: [{ id: 'E0023', name: 'Carolina Restrepo Salazar',   initials: 'CR', state: 'completed', date: '12/12/2025' }],
  peer: [
    { id: 'E0244', name: 'Sandra Milena Ortiz',  initials: 'SO', state: 'completed', date: '10/12/2025' },
    { id: 'E0094', name: 'María Trujillo Henao',  initials: 'MT', state: 'completed', date: '14/12/2025' },
    { id: 'E0177', name: 'Jorge Iván Patiño',     initials: 'JP', state: 'completed', date: '11/12/2025' },
    { id: 'E0156', name: 'Paula Valencia Ríos',   initials: 'PV', state: 'pending',   date: '—' },
  ],
  report: [
    { id: 'E0142', name: 'Diego Andrés Toro',     initials: 'DT', state: 'completed', date: '09/12/2025', anon: true },
    { id: 'E0198', name: 'María Fernanda López',  initials: 'MF', state: 'completed', date: '15/12/2025', anon: true },
    { id: 'E0246', name: 'Laura Gómez Restrepo',  initials: 'LG', state: 'completed', date: '13/12/2025', anon: true },
    { id: 'E0205', name: 'Carlos Andrés Vélez',   initials: 'CV', state: 'completed', date: '16/12/2025', anon: true },
    { id: 'E0247', name: 'Andrés Felipe Mejía',   initials: 'AM', state: 'pending',   date: '—',           anon: true },
  ],
  stake: [],
};

// Resultados consolidados de Luis Miguel Marín · todos los puntajes 0-5
const RESULT_360_LM = {
  evaluated: EVALUATED_360[1],
  byPerspective: {
    self:    { l1: 4.0, l2: 4.0, l3: 5.0, l4: 4.0, l5: 3.0, l6: 3.0, n: 1, responseRate: 100 },
    manager: { l1: 4.0, l2: 5.0, l3: 5.0, l4: 5.0, l5: 4.0, l6: 4.0, n: 1, responseRate: 100 },
    peer:    { l1: 4.5, l2: 4.2, l3: 5.0, l4: 4.8, l5: 4.5, l6: 4.0, n: 3, responseRate: 75 },
    report:  { l1: 5.0, l2: 4.5, l3: 5.0, l4: 5.0, l5: 4.5, l6: 4.0, n: 4, responseRate: 80 },
  },
  quotes: {
    keepDoing: [
      { text: 'Su forma de comunicar las metas semanales en la reunión de lunes es clarísima. Todos salimos sabiendo qué prioriza la línea.', from: 'peer', who: '—' },
      { text: 'El acompañamiento que da a personas nuevas en sus primeras semanas. Hace sentir parte del equipo a todos.', from: 'report', who: '—' },
      { text: 'Mantener la calma cuando hay paradas no programadas. Eso baja la ansiedad de toda la línea.', from: 'manager', who: 'Carolina Restrepo' },
    ],
    stopDoing: [
      { text: 'A veces toma decisiones técnicas sin consultar al técnico de mantenimiento. Su criterio es bueno pero perdemos perspectiva.', from: 'peer', who: '—' },
      { text: 'Llevarse trabajo emocional del turno a casa. Lo notamos cansado y eso se siente en el equipo.', from: 'report', who: '—' },
    ],
    startDoing: [
      { text: 'Compartir más visión a 6 meses, no solo de la semana. Quiero entender hacia dónde va Aprovechamiento.', from: 'report', who: '—' },
      { text: 'Pedir ayuda externa cuando un problema lo supera. Tiene un equipo dispuesto a apoyar.', from: 'peer', who: '—' },
      { text: 'Documentar las decisiones operativas para que no se pierdan al cambiar de turno.', from: 'manager', who: 'Carolina Restrepo' },
    ],
  },
  selfPredictions: {
    // Lo que Luis pensó que sus pares le calificarían
    l1: 4, l2: 4, l3: 4, l4: 4, l5: 3, l6: 3,
  },
};

// Pendientes 360° del usuario actual (Carolina Restrepo · ver como admin/jefe)
const MY_360_PENDING = {
  cycleName: 'Evaluación 360° Liderazgo · Q4 2025',
  cycleClose: 'Cierra el 22/12/2025',
  daysLeft: 14,
  tasks: {
    self: [
      { evaluated: { id: 'E0023', initials: 'CR', name: 'Carolina Restrepo (Yo)' }, state: 'pending' },
    ],
    manager: [
      // Quién es jefe directo de Carolina · en este caso CEO/Dirección — asumamos que evalúa a Sandra y Luis
    ],
    peer: [
      { evaluated: { id: 'E0244', initials: 'SO', name: 'Sandra Milena Ortiz', role: 'Coord. Compras' }, state: 'pending' },
      { evaluated: { id: 'E0177', initials: 'JP', name: 'Jorge Iván Patiño',  role: 'Líder de Recolección' }, state: 'completed' },
    ],
    report: [
      // Las personas a su cargo
      { evaluated: { id: 'E0067', initials: 'LM', name: 'Luis Miguel Marín',  role: 'Líder de Aprovechamiento' }, state: 'pending' },
      { evaluated: { id: 'E0094', initials: 'MT', name: 'María Trujillo Henao', role: 'Aux. RRHH' }, state: 'completed' },
    ],
  },
};

// ─── 1. MatrixModal · diseño matriz de evaluadores (admin) ──

const Matrix360Modal = ({ onClose }) => {
  const [evaluatedId, setEvaluatedId] = _e3_useState('E0067');
  const evaluated = EVALUATED_360.find(e => e.id === evaluatedId) || EVALUATED_360[0];
  const matrix = EVAL_MATRIX_LM;  // Mock · siempre LM para el demo

  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onEsc = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onEsc);
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onEsc); };
  }, []);

  const totalAssigned = Object.values(matrix).reduce((s, list) => s + list.length, 0);
  const completed = Object.values(matrix).reduce((s, list) => s + list.filter(p => p.state === 'completed').length, 0);
  const responseRate = Math.round((completed / totalAssigned) * 100);

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 1080, height: 'calc(100vh - 64px)' }}>
        <div className="modal-head">
          <div>
            <div className="muted mono" style={{ fontSize: 11 }}>cy-2025-q4-360</div>
            <div className="modal-title">Matriz de evaluadores · Q4 2025 360°</div>
            <div className="modal-sub">
              Define quién evalúa a cada líder en cada perspectiva. <b>{EVALUATED_360.length} líderes evaluados</b> · {EVALUATED_360.reduce((s, e) => s + e.peersCount + e.reportsCount + 2, 0)} invitaciones programadas.
            </div>
          </div>
          <button className="icon-btn" onClick={onClose} title="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="modal-body" style={{ padding: 0, display: 'grid', gridTemplateColumns: '260px minmax(0, 1fr)', height: 'calc(100% - 0px)' }}>
          {/* Sidebar · lista de evaluados */}
          <aside className="e360-mx-side">
            <div className="muted-xs" style={{ padding: '14px 14px 8px' }}>Líderes evaluados · {EVALUATED_360.length}</div>
            {EVALUATED_360.map(e => (
              <button
                key={e.id}
                className={`e360-mx-evaluado ${evaluatedId === e.id ? 'active' : ''}`}
                onClick={() => setEvaluatedId(e.id)}
              >
                <div className="doc-avatar">{e.initials}</div>
                <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
                  <div style={{ fontSize: 12.5, fontWeight: 700 }}>{e.name}</div>
                  <div className="muted" style={{ fontSize: 10.5, marginTop: 1 }}>{e.role}</div>
                  <div className="muted mono" style={{ fontSize: 10, marginTop: 3 }}>
                    {e.peersCount} pares · {e.reportsCount} reportes
                  </div>
                </div>
                {e.responseRate >= 80
                  ? <span className="pill green" style={{ fontSize: 10 }}>{e.responseRate}%</span>
                  : <span className="pill amber-soft" style={{ fontSize: 10 }}>{e.responseRate}%</span>}
              </button>
            ))}
          </aside>

          {/* Detalle del evaluado */}
          <div className="e360-mx-detail">
            <div className="e360-mx-head">
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div className="doc-avatar lg" style={{ width: 48, height: 48, fontSize: 16, borderRadius: 12 }}>{evaluated.initials}</div>
                <div>
                  <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.01em' }}>{evaluated.name}</div>
                  <div className="muted" style={{ fontSize: 12.5 }}>{evaluated.role} · {evaluated.area}</div>
                </div>
              </div>
              <div className="e360-mx-summary">
                <div><div className="muted-xs">Evaluadores</div><div className="e360-mx-num">{totalAssigned}</div></div>
                <div><div className="muted-xs">Completados</div><div className="e360-mx-num pos">{completed}</div></div>
                <div><div className="muted-xs">Respuesta</div><div className="e360-mx-num">{responseRate}%</div></div>
              </div>
            </div>

            <div className="e360-mx-body">
              {Object.entries(PERSPECTIVES).map(([key, p]) => {
                const list = matrix[key] || [];
                if (key === 'stake') return null;
                const Ico = window[p.icon] || IconUsers;
                return (
                  <div key={key} className={`e360-mx-pers e360-pers-${p.tone}`}>
                    <div className="e360-mx-pers-head">
                      <div className="e360-mx-pers-name">
                        <span className={`e360-mx-pers-icon ${p.tone}`}><Ico size={13} /></span>
                        <span>{p.label}</span>
                        {(key === 'peer' || key === 'report') && <span className="e360-mx-anon">anónimo</span>}
                      </div>
                      <span className="muted" style={{ fontSize: 11 }}>{list.filter(p => p.state === 'completed').length} de {list.length} respondieron</span>
                    </div>
                    <div className="e360-mx-pers-list">
                      {list.length === 0
                        ? <div className="e360-mx-empty">No hay evaluadores en esta perspectiva</div>
                        : list.map((ev, i) => (
                          <div key={i} className={`e360-mx-ev ${ev.state}`}>
                            <div className="doc-avatar" style={{ width: 28, height: 28, fontSize: 11 }}>{ev.initials}</div>
                            <div style={{ flex: 1, minWidth: 0 }}>
                              <div style={{ fontSize: 12, fontWeight: 600 }}>{ev.name}</div>
                              {ev.state === 'completed' && <div className="muted mono" style={{ fontSize: 10 }}>respondió {ev.date}</div>}
                              {ev.state === 'pending' && <div className="mono" style={{ fontSize: 10, color: 'var(--amber-600)' }}>pendiente · recordatorio el {MY_360_PENDING.daysLeft - 7}/12</div>}
                            </div>
                            {ev.state === 'completed'
                              ? <span className="e360-mx-state-tag green"><IconCheck size={10} /></span>
                              : <span className="e360-mx-state-tag amber"><IconClock size={10} /></span>}
                          </div>
                        ))
                      }
                      <button className="e360-mx-add">
                        <IconPlus size={11} /> Agregar evaluador
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>

        <div className="modal-foot">
          <span className="muted" style={{ fontSize: 12, marginRight: 'auto' }}>
            <IconShield size={12} /> Las invitaciones se envían por email + portal · respuestas anónimas para pares y reportes
          </span>
          <button className="btn" onClick={onClose}>Cerrar</button>
          <button className="btn"><IconExternal size={14} /> Reenviar pendientes</button>
          <button className="btn primary"><IconCheck size={14} /> Guardar matriz</button>
        </div>
      </div>
    </div>
  );
};

// ─── 2. Pending360Sidebar · pendientes agrupados por perspectiva ─

const Pending360Sidebar = ({ onPick }) => {
  const tasks = MY_360_PENDING.tasks;
  const totalPending = Object.values(tasks).reduce((s, list) => s + list.filter(t => t.state === 'pending').length, 0);

  return (
    <aside className="pf-pending e360-pending">
      <div className="e360-pending-head">
        <span className="e360-pending-tag">360°</span>
        <div>
          <div className="e360-pending-cycle">{MY_360_PENDING.cycleName}</div>
          <div className="muted mono" style={{ fontSize: 10.5, marginTop: 2 }}>{MY_360_PENDING.cycleClose} · {MY_360_PENDING.daysLeft} días</div>
        </div>
      </div>

      <div className="e360-pending-summary">
        <div className="muted-xs">Tu participación</div>
        <div className="e360-pending-summary-num">{totalPending}<small>/4</small></div>
        <div className="muted" style={{ fontSize: 10.5 }}>evaluaciones pendientes</div>
      </div>

      <div className="e360-pending-groups">
        {Object.entries(PERSPECTIVES).map(([key, p]) => {
          if (key === 'stake') return null;
          const list = tasks[key] || [];
          if (list.length === 0) return null;
          const Ico = window[p.icon] || IconUsers;
          return (
            <div key={key} className={`e360-pending-group ${p.tone}`}>
              <div className="e360-pending-group-head">
                <span className={`e360-pending-group-icon ${p.tone}`}><Ico size={11} /></span>
                <span className="e360-pending-group-name">
                  {p.label}
                  {(key === 'peer' || key === 'report') && <span className="e360-anon-mini">anón.</span>}
                </span>
                <span className="e360-pending-group-count">{list.length}</span>
              </div>
              {list.map((t, i) => (
                <button
                  key={i}
                  className={`e360-pending-task ${t.state === 'completed' ? 'done' : ''}`}
                  onClick={() => onPick && onPick(key, t.evaluated)}
                  disabled={t.state === 'completed'}
                >
                  <div className="doc-avatar" style={{ width: 24, height: 24, fontSize: 10, background: 'var(--surface-2)', color: 'var(--text)' }}>
                    {t.evaluated.initials}
                  </div>
                  <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
                    <div style={{ fontSize: 11.5, fontWeight: 600 }}>{t.evaluated.name}</div>
                    {t.evaluated.role && <div className="muted" style={{ fontSize: 10 }}>{t.evaluated.role}</div>}
                  </div>
                  {t.state === 'completed' ? <IconCheck size={12} style={{ color: 'var(--green-600)' }} /> : <span className="e360-due-dot" />}
                </button>
              ))}
            </div>
          );
        })}
      </div>

      <div className="pf-pending-foot e360-pending-foot">
        <div className="muted-xs">Tasa global del ciclo</div>
        <div className="e360-pending-bar">
          <div className="e360-pending-bar-fill" style={{ width: '64%' }} />
          <span>64% respondidos</span>
        </div>
        <div className="muted" style={{ fontSize: 10.5, marginTop: 6, lineHeight: 1.4 }}>
          22 evaluadores activos · 4 líderes evaluados · cierra en 14 días
        </div>
      </div>
    </aside>
  );
};

// ─── 3. PerspectiveBanner · header del form 360° ──────────

const PerspectiveBanner = ({ perspective, evaluated }) => {
  const p = PERSPECTIVES[perspective];
  if (!p) return null;
  const Ico = window[p.icon] || IconUsers;
  const isAnon = perspective === 'peer' || perspective === 'report';

  const tipsByPerspective = {
    self:    'Sé honesto. La autoevaluación se compara con cómo otros te ven · los gaps te dan claridad sobre tus puntos ciegos.',
    manager: 'Como jefe directo, tu peso es alto. Enfócate en evidencia concreta del trimestre, no en impresiones generales.',
    peer:    'Como par, enfócate en colaboración del día a día · cómo trabaja contigo, no en dirección estratégica que no observas.',
    report:  'Como reporte directo, eres quien mejor conoce su liderazgo cotidiano. Tu voz importa · responde con franqueza.',
    stake:   'Como stakeholder externo, tu mirada complementa la interna · enfócate en confiabilidad y entrega de compromisos.',
  };

  return (
    <div className={`e360-banner e360-banner-${p.tone}`}>
      <div className={`e360-banner-icon ${p.tone}`}><Ico size={18} /></div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="e360-banner-title">
          Evaluación 360° · estás evaluando como <b>{p.label.toLowerCase()}</b>
          {isAnon && <span className="e360-banner-anon"><IconShield size={10} /> anónimo</span>}
        </div>
        <div className="e360-banner-evaluated">
          a <b>{evaluated?.name || 'Luis Miguel Marín'}</b> · {evaluated?.role || 'Líder de Aprovechamiento'}
        </div>
        <div className="e360-banner-tip">
          <IconShield size={11} /> {tipsByPerspective[perspective]}
        </div>
      </div>
    </div>
  );
};

// ─── 4. RadarChart SVG · multi-perspectiva ────────────────

const RadarChart = ({ data, size = 320 }) => {
  // data = { axes: [...], series: [{ key, label, values: [v1..v6], color, opacity }] }
  const cx = size / 2, cy = size / 2;
  const r = (size / 2) - 40;
  const n = data.axes.length;

  const angle = (i) => -Math.PI / 2 + (Math.PI * 2 * i) / n;
  const point = (val, i, maxVal = 5) => {
    const ratio = val / maxVal;
    const ang = angle(i);
    return [cx + Math.cos(ang) * r * ratio, cy + Math.sin(ang) * r * ratio];
  };

  // Background polygon at each step
  const steps = [1, 2, 3, 4, 5];

  return (
    <svg viewBox={`0 0 ${size} ${size}`} className="e360-radar">
      {/* concentric polygons */}
      {steps.map((s) => {
        const pts = data.axes.map((_, i) => {
          const [x, y] = point(s, i);
          return `${x.toFixed(1)},${y.toFixed(1)}`;
        }).join(' ');
        return <polygon key={s} points={pts} fill={s === 5 ? 'var(--surface)' : 'none'} stroke="var(--border)" strokeWidth="0.8" strokeDasharray={s === 5 ? '' : '2,3'} />;
      })}

      {/* axis spokes */}
      {data.axes.map((_, i) => {
        const [x, y] = point(5, i);
        return <line key={i} x1={cx} y1={cy} x2={x} y2={y} stroke="var(--border)" strokeWidth="0.8" />;
      })}

      {/* axis labels */}
      {data.axes.map((axis, i) => {
        const ang = angle(i);
        const lx = cx + Math.cos(ang) * (r + 22);
        const ly = cy + Math.sin(ang) * (r + 22);
        const anchor = Math.abs(Math.cos(ang)) < 0.3 ? 'middle' : Math.cos(ang) > 0 ? 'start' : 'end';
        return (
          <text key={i} x={lx} y={ly} textAnchor={anchor} dominantBaseline="middle" fontSize="10.5" fontWeight="700" fill="var(--text)" fontFamily="Inter">
            {axis}
          </text>
        );
      })}

      {/* series · de fondo a frente · self primero (más transparente), luego manager, peer, report */}
      {data.series.map((serie) => {
        const pts = serie.values.map((v, i) => {
          const [x, y] = point(v, i);
          return `${x.toFixed(1)},${y.toFixed(1)}`;
        }).join(' ');
        return (
          <g key={serie.key}>
            <polygon points={pts} fill={serie.color} fillOpacity={serie.opacity || 0.16} stroke={serie.color} strokeWidth="2" strokeLinejoin="round" />
            {serie.values.map((v, i) => {
              const [x, y] = point(v, i);
              return <circle key={i} cx={x} cy={y} r="3" fill="white" stroke={serie.color} strokeWidth="2" />;
            })}
          </g>
        );
      })}

      {/* center label */}
      <text x={cx} y={cy - 4} textAnchor="middle" fontSize="9" fill="var(--text-subtle)" fontWeight="700">ESCALA</text>
      <text x={cx} y={cy + 8} textAnchor="middle" fontSize="9" fill="var(--text-muted)" fontFamily="JetBrains Mono">1 → 5</text>
    </svg>
  );
};

// ─── 5. Results360Section · radar + gap + quotes ──────────

const Results360Section = () => {
  const [evaluatedId, setEvaluatedId] = _e3_useState('E0067');
  const result = RESULT_360_LM;  // mock siempre devuelve LM
  const r = result;

  const radarData = {
    axes: COMP_360.map(c => c.short),
    series: [
      { key: 'self',    label: 'Autoevaluación', values: COMP_360.map(c => r.byPerspective.self[c.id]),    color: PERSPECTIVES.self.color,    opacity: 0.10 },
      { key: 'manager', label: 'Jefe',           values: COMP_360.map(c => r.byPerspective.manager[c.id]), color: PERSPECTIVES.manager.color, opacity: 0.14 },
      { key: 'peer',    label: 'Pares',          values: COMP_360.map(c => r.byPerspective.peer[c.id]),    color: PERSPECTIVES.peer.color,    opacity: 0.18 },
      { key: 'report',  label: 'Equipo',         values: COMP_360.map(c => r.byPerspective.report[c.id]),  color: PERSPECTIVES.report.color,  opacity: 0.18 },
    ],
  };

  // Gap analysis · self vs others (avg de manager+peer+report)
  const gaps = COMP_360.map(c => {
    const self = r.byPerspective.self[c.id];
    const others = (r.byPerspective.manager[c.id] + r.byPerspective.peer[c.id] + r.byPerspective.report[c.id]) / 3;
    return { comp: c, self, others, gap: others - self };
  });

  const sortedByOthers = [...gaps].sort((a, b) => b.others - a.others);
  const topStrengths = sortedByOthers.slice(0, 3);
  const development  = sortedByOthers.slice(-3).reverse();
  const blindSpots = gaps.filter(g => g.gap > 0.5).sort((a, b) => b.gap - a.gap);
  const overrated  = gaps.filter(g => g.gap < -0.5).sort((a, b) => a.gap - b.gap);

  const overallAvg = (gaps.reduce((s, g) => s + g.others, 0) / gaps.length).toFixed(2);

  return (
    <div className="e360-results">
      {/* Selector */}
      <div className="e360-results-head">
        <div>
          <h2 className="cf-section-title">Resultados 360° · Q4 2025</h2>
          <p className="cf-section-sub">Visión consolidada de las 4 perspectivas · 9 evaluadores respondieron · ciclo cerrado el 22/12/2025.</p>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <select className="e360-results-select" value={evaluatedId} onChange={(e) => setEvaluatedId(e.target.value)}>
            {EVALUATED_360.map(e => <option key={e.id} value={e.id}>{e.name} · {e.role}</option>)}
          </select>
          <button className="btn"><IconExternal size={13} /> Exportar reporte PDF</button>
        </div>
      </div>

      {/* Hero · evaluado + score consolidado */}
      <div className="e360-hero">
        <div className="doc-avatar lg" style={{ width: 56, height: 56, fontSize: 18, borderRadius: 14 }}>{r.evaluated.initials}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="e360-hero-name">{r.evaluated.name}</div>
          <div className="muted" style={{ fontSize: 13 }}>{r.evaluated.role} · {r.evaluated.area}</div>
          <div className="e360-hero-meta">
            <span className="e360-hero-pill"><IconUsers size={11} /> 9 evaluadores</span>
            <span className="e360-hero-pill"><IconCheck size={11} /> 88% respuesta</span>
            <span className="e360-hero-pill"><IconShield size={11} /> ciclo cerrado</span>
          </div>
        </div>
        <div className="e360-hero-score">
          <div className="muted-xs">Score consolidado</div>
          <div className="e360-hero-num">{overallAvg}<small>/5</small></div>
          <div className="muted" style={{ fontSize: 10.5 }}>promedio jefe + pares + equipo</div>
        </div>
      </div>

      <div className="e360-grid-main">
        {/* Radar */}
        <div className="e360-card">
          <div className="e360-card-head">
            <h3>Visión por perspectiva</h3>
            <span className="muted" style={{ fontSize: 11.5 }}>cada anillo es una perspectiva · escala 1-5</span>
          </div>
          <div className="e360-radar-wrap">
            <RadarChart data={radarData} size={360} />
          </div>
          <div className="e360-radar-legend">
            {radarData.series.map(s => (
              <div key={s.key} className="e360-legend-item">
                <span className="e360-legend-dot" style={{ background: s.color }} />
                <span style={{ fontSize: 11.5 }}>{s.label}</span>
                <span className="muted mono" style={{ fontSize: 10.5 }}>n={r.byPerspective[s.key].n}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Gap analysis */}
        <div className="e360-card">
          <div className="e360-card-head">
            <h3>Gap analysis · cómo te ves vs cómo te ven</h3>
            <span className="muted" style={{ fontSize: 11.5 }}>others = promedio jefe + pares + equipo</span>
          </div>
          <div className="e360-gap-table">
            <div className="e360-gap-head">
              <div>Competencia</div>
              <div>Tú</div>
              <div>Otros</div>
              <div>Gap</div>
            </div>
            {gaps.map((g, i) => {
              const arrow = g.gap > 0.3 ? 'up' : g.gap < -0.3 ? 'down' : 'flat';
              return (
                <div key={i} className={`e360-gap-row gap-${arrow}`}>
                  <div className="e360-gap-name">{g.comp.short}</div>
                  <div className="mono" style={{ textAlign: 'center', fontSize: 13, fontWeight: 700 }}>{g.self.toFixed(1)}</div>
                  <div className="mono" style={{ textAlign: 'center', fontSize: 13, fontWeight: 700 }}>{g.others.toFixed(2)}</div>
                  <div className={`e360-gap-val ${arrow}`}>
                    {arrow === 'up' && '▲'}
                    {arrow === 'down' && '▼'}
                    {arrow === 'flat' && '·'}
                    <span className="mono">{g.gap > 0 ? '+' : ''}{g.gap.toFixed(2)}</span>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="e360-gap-legend">
            <span><span className="e360-gap-dot up" /> Otros te ven mejor que tú · fortaleza no reconocida</span>
            <span><span className="e360-gap-dot down" /> Tú te ves mejor que otros · <b>blind spot</b></span>
          </div>
        </div>
      </div>

      {/* Strengths + Development */}
      <div className="e360-grid-strengths">
        <div className="e360-card">
          <div className="e360-card-head">
            <h3>Top 3 fortalezas reconocidas</h3>
            <span className="muted" style={{ fontSize: 11.5 }}>según otros</span>
          </div>
          <div className="e360-list">
            {topStrengths.map((s, i) => (
              <div key={i} className="e360-rank-row green">
                <span className="e360-rank">{i + 1}</span>
                <div style={{ flex: 1 }}>
                  <div className="e360-rank-name">{s.comp.name}</div>
                  <div className="muted" style={{ fontSize: 11 }}>Pares te dan {r.byPerspective.peer[s.comp.id]} · equipo te da {r.byPerspective.report[s.comp.id]}</div>
                </div>
                <div className="mono e360-rank-num pos">{s.others.toFixed(2)}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="e360-card">
          <div className="e360-card-head">
            <h3>Áreas de desarrollo</h3>
            <span className="muted" style={{ fontSize: 11.5 }}>foco para próximo trimestre</span>
          </div>
          <div className="e360-list">
            {development.map((s, i) => (
              <div key={i} className="e360-rank-row amber">
                <span className="e360-rank">{i + 1}</span>
                <div style={{ flex: 1 }}>
                  <div className="e360-rank-name">{s.comp.name}</div>
                  <div className="muted" style={{ fontSize: 11 }}>Pares te dan {r.byPerspective.peer[s.comp.id]} · equipo te da {r.byPerspective.report[s.comp.id]}</div>
                </div>
                <div className="mono e360-rank-num neg">{s.others.toFixed(2)}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Blind spots */}
      {(blindSpots.length > 0 || overrated.length > 0) && (
        <div className="e360-card e360-blindspots">
          <div className="e360-card-head">
            <h3>Detectores · gaps significativos</h3>
            <span className="muted" style={{ fontSize: 11.5 }}>gap &gt; ±0.5 puntos</span>
          </div>
          <div className="e360-blind-grid">
            {blindSpots.length > 0 && (
              <div>
                <div className="muted-xs" style={{ marginBottom: 6 }}>🌟 Fortalezas no reconocidas · otros te ven mejor</div>
                {blindSpots.map((b, i) => (
                  <div key={i} className="e360-blind-row up">
                    <span className="e360-blind-arrow">▲</span>
                    <span style={{ flex: 1, fontSize: 12, fontWeight: 600 }}>{b.comp.name}</span>
                    <span className="mono" style={{ fontWeight: 800, fontSize: 13, color: 'var(--green-600)' }}>+{b.gap.toFixed(2)}</span>
                  </div>
                ))}
              </div>
            )}
            {overrated.length > 0 && (
              <div>
                <div className="muted-xs" style={{ marginBottom: 6 }}>⚠️ Blind spots · te ves mejor de lo que te ven</div>
                {overrated.map((b, i) => (
                  <div key={i} className="e360-blind-row down">
                    <span className="e360-blind-arrow">▼</span>
                    <span style={{ flex: 1, fontSize: 12, fontWeight: 600 }}>{b.comp.name}</span>
                    <span className="mono" style={{ fontWeight: 800, fontSize: 13, color: 'var(--rose-600)' }}>{b.gap.toFixed(2)}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
          <div className="e360-blind-tip">
            <IconShield size={13} />
            <div>
              <b>¿Cómo leer esto?</b> Las fortalezas no reconocidas son áreas donde puedes apoyar a otros con más confianza. Los blind spots son las áreas más importantes a trabajar — son comportamientos que tú das por sentados pero el equipo no percibe igual.
            </div>
          </div>
        </div>
      )}

      {/* Quote highlights */}
      <div className="e360-card">
        <div className="e360-card-head">
          <h3>Voces del entorno</h3>
          <span className="muted" style={{ fontSize: 11.5 }}>respuestas anónimas a las 3 preguntas abiertas</span>
        </div>
        <div className="e360-quotes-grid">
          <div className="e360-quote-col">
            <div className="e360-quote-h green">✅ Que sigas haciendo</div>
            {r.quotes.keepDoing.map((q, i) => (
              <div key={i} className="e360-quote">
                <div className="e360-quote-text">"{q.text}"</div>
                <div className="e360-quote-from">
                  <span className={`e360-pers-tag ${PERSPECTIVES[q.from === 'manager' ? 'manager' : q.from].tone}`}>
                    {PERSPECTIVES[q.from === 'manager' ? 'manager' : q.from].short}
                  </span>
                  {q.who !== '—' ? <span style={{ fontSize: 10.5 }}>{q.who}</span> : <span style={{ fontSize: 10.5, fontStyle: 'italic' }}>anónimo</span>}
                </div>
              </div>
            ))}
          </div>
          <div className="e360-quote-col">
            <div className="e360-quote-h rose">🚫 Que dejes de hacer</div>
            {r.quotes.stopDoing.map((q, i) => (
              <div key={i} className="e360-quote">
                <div className="e360-quote-text">"{q.text}"</div>
                <div className="e360-quote-from">
                  <span className={`e360-pers-tag ${PERSPECTIVES[q.from].tone}`}>{PERSPECTIVES[q.from].short}</span>
                  <span style={{ fontSize: 10.5, fontStyle: 'italic' }}>anónimo</span>
                </div>
              </div>
            ))}
          </div>
          <div className="e360-quote-col">
            <div className="e360-quote-h amber">💡 Que comiences a hacer</div>
            {r.quotes.startDoing.map((q, i) => (
              <div key={i} className="e360-quote">
                <div className="e360-quote-text">"{q.text}"</div>
                <div className="e360-quote-from">
                  <span className={`e360-pers-tag ${PERSPECTIVES[q.from === 'manager' ? 'manager' : q.from].tone}`}>
                    {PERSPECTIVES[q.from === 'manager' ? 'manager' : q.from].short}
                  </span>
                  {q.who !== '—' ? <span style={{ fontSize: 10.5 }}>{q.who}</span> : <span style={{ fontSize: 10.5, fontStyle: 'italic' }}>anónimo</span>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Follow-up · plan de desarrollo */}
      <div className="e360-card e360-plan">
        <div className="e360-plan-head">
          <div>
            <h3 style={{ fontSize: 15, fontWeight: 800, letterSpacing: '-0.01em', margin: 0 }}>Plan de desarrollo · próximo trimestre</h3>
            <div className="muted" style={{ fontSize: 12, marginTop: 3 }}>Convierte estos hallazgos en compromisos concretos · revisión en abril 2026</div>
          </div>
          <button className="btn primary"><IconPlus size={13} /> Crear plan con {r.evaluated.name.split(' ')[0]}</button>
        </div>
      </div>
    </div>
  );
};

window.Matrix360Modal     = Matrix360Modal;
window.Pending360Sidebar  = Pending360Sidebar;
window.PerspectiveBanner  = PerspectiveBanner;
window.Results360Section  = Results360Section;
window.PERSPECTIVES_360   = PERSPECTIVES;
