// Portal del Colaborador · pantalla "Mi desempeño" (Fase D)
// Cuatro secciones:
//   1) Mis evaluaciones pendientes (con form para responder + firma)
//   2) Mis resultados del último ciclo (anonimizado N≥3)
//   3) Mis objetivos del período (con check-in inline)
//   4) Plan de desarrollo (PIP) + 1-on-1 próximo + incidentes positivos + kudos recibidos
//
// Banner Habeas Data al inicio · enlace a "Descargar todos mis datos de desempeño".

const { useState: _pd_useState, useMemo: _pd_useMemo, useEffect: _pd_useEffect } = React;

// El usuario del portal en el demo es Andrés Mejía
const _PORTAL_USER_ID = 'E0247';

// ─── PerformanceScreen ────────────────────────────────────

const PerformanceScreen = ({ variant }) => {
  const m = variant === 'mobile';
  const [tick, setTick] = _pd_useState(0);
  const [openEval, setOpenEval] = _pd_useState(null);  // instancia a responder
  const [openHabeasData, setOpenHabeasData] = _pd_useState(false);

  const myId = _PORTAL_USER_ID;
  const me = (window.PERSONAS_DESEMPENO || {})[myId] || { nombre: 'Andrés Felipe Mejía', initials: 'AM' };

  const pendientes = _pd_useMemo(() => (window.evaluacionesPendientesPara && window.evaluacionesPendientesPara(myId)) || [], [tick]);
  const objetivos  = _pd_useMemo(() => (window.objetivosVigentesPara && window.objetivosVigentesPara(myId)) || [], [tick]);
  const incidentes = _pd_useMemo(() => (window.incidentesVisiblesPara && window.incidentesVisiblesPara(myId)) || [], [tick]);
  const kudos      = _pd_useMemo(() => (window.kudosRecibidos && window.kudosRecibidos(myId)) || [], [tick]);
  const proximo    = (window.proximo1on1 && window.proximo1on1(myId)) || null;
  const ultimos1o1 = (window.ultimos1on1 && window.ultimos1on1(myId, 2)) || [];
  const pip        = (window.pipActivoPara && window.pipActivoPara(myId)) || null;

  return (
    <div className={`po-screen po-pdesem ${m ? 'mobile' : 'desktop'}`}>
      <div className="po-screen-head">
        <h2>Mi desempeño</h2>
        <div className="muted" style={{ fontSize: 12 }}>Aquí ves tus evaluaciones, objetivos, plan y reconocimientos.</div>
      </div>

      {/* Banner Habeas Data */}
      <button className="pd-habeas-banner" onClick={() => setOpenHabeasData(true)}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        <div style={{ flex: 1, textAlign: 'left' }}>
          <div style={{ fontSize: 12.5, fontWeight: 700 }}>Tus datos están protegidos</div>
          <div className="muted" style={{ fontSize: 11 }}>Ley 1581/2012 · qué se evalúa, quién lo evalúa, qué se anonimiza</div>
        </div>
        <span style={{ fontSize: 12, color: 'var(--navy-800)', fontWeight: 700 }}>Ver →</span>
      </button>

      {/* 1 · Pendientes */}
      <div className="pd-card">
        <div className="pd-card-head">
          <h3>Evaluaciones pendientes</h3>
          {pendientes.length > 0 && <span className="pill rose" style={{ fontSize: 10.5 }}>{pendientes.length}</span>}
        </div>
        {pendientes.length === 0 ? (
          <div className="muted" style={{ fontSize: 12, padding: '8px 0' }}>
            <IconCheck size={12} style={{ color: 'var(--green-600)' }} /> Sin pendientes · estás al día.
          </div>
        ) : (
          <div className="pd-pending-list">
            {pendientes.map(e => {
              const ciclo = (window.CICLOS_EVALUACION || []).find(c => c.id === e.cicloId);
              const evaluado = (window.PERSONAS_DESEMPENO || {})[e.evaluadoId];
              const esAuto = e.evaluadorId === e.evaluadoId;
              return (
                <button key={e.id} className="pd-pending-row" onClick={() => setOpenEval(e)}>
                  <div className="pd-pending-icon">
                    {esAuto ? <IconUsers size={14} /> : <IconStar size={14} />}
                  </div>
                  <div style={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
                    <div style={{ fontWeight: 700, fontSize: 13 }}>
                      {esAuto ? 'Tu autoevaluación' : `Evaluar a ${evaluado?.nombre || e.evaluadoId}`}
                    </div>
                    <div className="muted" style={{ fontSize: 11 }}>{ciclo?.nombre || e.cicloId} · vence {e.plazoVence}</div>
                  </div>
                  <span className="pd-pending-cta">Responder →</span>
                </button>
              );
            })}
          </div>
        )}
      </div>

      {/* 2 · Resultados último ciclo */}
      <PortalResultsCard myId={myId} />

      {/* 3 · Mis objetivos */}
      <div className="pd-card">
        <div className="pd-card-head">
          <h3>Mis objetivos · S1 2026</h3>
          <span className="muted mono" style={{ fontSize: 11 }}>{objetivos.length} objetivos</span>
        </div>
        {objetivos.length === 0 ? (
          <div className="muted" style={{ fontSize: 12, padding: '8px 0' }}>Sin objetivos asignados.</div>
        ) : (
          <div className="pd-objs">
            {objetivos.map(o => {
              const tone = o.logroPct >= 90 ? 'green' : o.logroPct >= 70 ? 'amber' : 'rose';
              return (
                <div key={o.id} className="pd-obj-row">
                  <div className="pd-obj-head">
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="muted mono" style={{ fontSize: 10.5 }}>{o.id}</div>
                      <div style={{ fontWeight: 700, fontSize: 13.5, lineHeight: 1.4 }}>{o.descripcion}</div>
                      <div className="muted" style={{ fontSize: 11.5, marginTop: 3 }}>
                        Meta: <b style={{ color: 'var(--text)' }}>{o.target} {o.unidad}</b> · peso {Math.round(o.peso * 100)}%
                      </div>
                    </div>
                    <div className={`pd-obj-pct ${tone}`}>{o.logroPct}<small>%</small></div>
                  </div>
                  <div className="pd-obj-bar">
                    <div className={`pd-obj-bar-fill ${tone}`} style={{ width: `${o.logroPct}%` }} />
                  </div>
                  <div className="pd-obj-foot">
                    <span className="muted" style={{ fontSize: 11 }}>
                      {o.evidencias > 0 ? `${o.evidencias} evidencia${o.evidencias === 1 ? '' : 's'}` : 'Sin evidencias adjuntas'}
                    </span>
                    {o.estado === 'aceptado-firmado' && o.firmaColaborador && (
                      <span className="muted" style={{ fontSize: 10.5 }}>
                        <IconShield size={10} /> firmado {o.firmaColaborador.fecha}
                      </span>
                    )}
                    <button className="link-btn" style={{ marginLeft: 'auto' }}>+ Adjuntar evidencia</button>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {/* 4 · PIP · 1-on-1 · Incidentes positivos · Kudos */}
      <div className="pd-extras">
        {pip && (
          <div className="pd-card pd-pip">
            <div className="pd-card-head">
              <h3>Mi plan de desarrollo</h3>
              <span className="pill green" style={{ fontSize: 10 }}>activo · firmado</span>
            </div>
            <div className="muted" style={{ fontSize: 12, marginBottom: 10 }}>
              Vigencia hasta <b>{pip.vigenciaHasta}</b> · próxima revisión <b>{pip.proximaRevision}</b>
            </div>
            <div style={{ marginBottom: 10 }}>
              <div className="muted-xs" style={{ marginBottom: 4 }}>Compromisos</div>
              {pip.objetivosMejora.map((o, i) => (
                <div key={i} className="pd-pip-objeto">
                  <IconCheck size={11} style={{ color: 'var(--navy-800)' }} />
                  <span>{o.descripcion}</span>
                  <span className="muted mono" style={{ fontSize: 10.5, marginLeft: 'auto' }}>{o.plazo}</span>
                </div>
              ))}
            </div>
            {pip.capacitacionesSugeridas.length > 0 && (
              <div>
                <div className="muted-xs" style={{ marginBottom: 4 }}>Capacitaciones a completar</div>
                {pip.capacitacionesSugeridas.map((c, i) => (
                  <div key={i} className="pd-pip-curso">
                    <IconBook size={11} />
                    <span style={{ fontSize: 12 }}>{c.cursoId}</span>
                    <span className="muted" style={{ fontSize: 11 }}>· {c.razon}</span>
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

        {proximo && (
          <div className="pd-card">
            <div className="pd-card-head">
              <h3>Próximo 1-on-1</h3>
              <span className="muted mono" style={{ fontSize: 11 }}>{proximo.fecha}</span>
            </div>
            <div className="muted" style={{ fontSize: 12 }}>
              Con tu jefe · <b>{((window.PERSONAS_DESEMPENO || {})[proximo.jefeId] || {}).nombre || '—'}</b> · {proximo.duracionMin} min
            </div>
            <div className="pd-1o1-agenda" style={{ marginTop: 8 }}>
              {(proximo.agenda || []).map((a, i) => <span key={i} className="o1-agenda-chip">{a}</span>)}
            </div>
          </div>
        )}

        {incidentes.length > 0 && (
          <div className="pd-card">
            <div className="pd-card-head">
              <h3>Incidentes registrados sobre ti</h3>
              <span className="muted mono" style={{ fontSize: 11 }}>{incidentes.length}</span>
            </div>
            <div className="pd-inc-list">
              {incidentes.map(i => (
                <div key={i.id} className={`pd-inc-row ${i.tipo}`}>
                  <span className={`pd-inc-icon ${i.tipo}`}>{i.tipo === 'positivo' ? '+' : '!'}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 600 }}>{i.descripcion}</div>
                    <div className="muted" style={{ fontSize: 10.5, marginTop: 2 }}>
                      {i.fecha} · por {i.autorNombre}
                    </div>
                  </div>
                  {i.tipo === 'negativo' && i.estadoDescargos === 'pendiente' && (
                    <button className="btn primary" style={{ padding: '4px 8px', fontSize: 11 }}>
                      Presentar descargos
                    </button>
                  )}
                </div>
              ))}
            </div>
          </div>
        )}

        {kudos.length > 0 && (
          <div className="pd-card">
            <div className="pd-card-head">
              <h3>Reconocimientos recibidos</h3>
              <span className="muted mono" style={{ fontSize: 11 }}>{kudos.length}</span>
            </div>
            <div className="pd-kudos-list">
              {kudos.map(k => {
                const de = (window.PERSONAS_DESEMPENO || {})[k.deId] || {};
                const impacto = k.impacto || 'bajo';
                return (
                  <div key={k.id} className={`pd-kudo-row ku-impacto-${impacto}`}>
                    <div className="doc-avatar" style={{ width: 30, height: 30, fontSize: 11 }}>{de.initials || '??'}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                        <span className={`ku-impacto-badge ku-impacto-${impacto}`}>impacto {impacto}</span>
                        {k.evidenciaUrl && <span style={{ fontSize: 10.5, color: 'var(--text-muted)' }}>📎 con evidencia</span>}
                      </div>
                      <div style={{ fontSize: 12.5, fontStyle: 'italic', lineHeight: 1.5 }}>"{k.mensaje}"</div>
                      <div className="muted" style={{ fontSize: 10.5, marginTop: 4 }}>de {de.nombre || k.deId} · {k.fecha}</div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>

      {openEval && <EvalRespondModal instancia={openEval} onClose={() => setOpenEval(null)} onSave={() => setTick(t => t + 1)} />}
      {openHabeasData && <HabeasDataModal myId={myId} onClose={() => setOpenHabeasData(false)} />}
    </div>
  );
};

window.PerformanceScreen = PerformanceScreen;

// ─── Card de resultados (último ciclo publicado · anonimato) ─

const PortalResultsCard = ({ myId }) => {
  const ciclo = (window.ultimoCicloPublicado && window.ultimoCicloPublicado()) || null;

  // Para el demo: si el usuario es Luis Miguel, mostrar resultados 360°.
  // Si es Andrés Mejía (E0247), aún no tiene ciclo publicado para él.
  if (!ciclo) return null;

  // Mock: solo Luis Miguel tiene resultados 360° (E0067 vs E0247).
  // En este demo Andrés Mejía no tiene aún resultado publicado · mensaje informativo.
  if (myId === 'E0247') {
    return (
      <div className="pd-card">
        <div className="pd-card-head">
          <h3>Mis resultados</h3>
        </div>
        <div className="pd-empty-results">
          <IconStar size={20} style={{ color: 'var(--text-subtle)' }} />
          <div>
            <div style={{ fontSize: 12.5, fontWeight: 700 }}>Aún no tienes resultados publicados</div>
            <div className="muted" style={{ fontSize: 11.5, lineHeight: 1.5, marginTop: 2 }}>
              Tu primera evaluación se cierra el <b>30/06/2026</b>.
              Tu autoevaluación 90° de período de prueba se cerrará al cumplir 60 días.
            </div>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="pd-card">
      <div className="pd-card-head">
        <h3>Mis resultados · {ciclo.nombre}</h3>
        <span className="pill green" style={{ fontSize: 10 }}>publicado</span>
      </div>
      <div className="pd-results-meta">
        <div className="pd-anon-banner">
          <IconShield size={12} />
          <span style={{ fontSize: 11.5 }}>
            Resultados anonimizados · regla N≥{ciclo.anonimatoMinN || 3} · perspectivas con menos evaluadores se omiten.
          </span>
        </div>
      </div>
      <div className="pd-results-stats">
        <div><div className="muted-xs">Score consolidado</div><div className="pd-result-num">4.4<small>/5</small></div></div>
        <div><div className="muted-xs">Tu autopercepción</div><div className="pd-result-num">3.8<small>/5</small></div></div>
        <div><div className="muted-xs">Gap</div><div className="pd-result-num pos">+0.6</div></div>
      </div>
      <button className="btn" style={{ width: '100%', marginTop: 10 }}>
        <IconExternal size={12} /> Ver radar y comentarios completos
      </button>
    </div>
  );
};

window.PortalResultsCard = PortalResultsCard;

// ─── Modal · Responder evaluación ─────────────────────────

const EvalRespondModal = ({ instancia, onClose, onSave }) => {
  const ciclo = (window.CICLOS_EVALUACION || []).find(c => c.id === instancia.cicloId);
  const evaluado = (window.PERSONAS_DESEMPENO || {})[instancia.evaluadoId] || {};
  const cargo = (window.CARGOS || []).find(c => c.id === evaluado.cargoId);
  const competencias = (window.cargoToCompetenciasConductuales && window.cargoToCompetenciasConductuales(evaluado.cargoId)) || [];

  const [scores, setScores] = _pd_useState(competencias.reduce((acc, c) => ({ ...acc, [c.id]: 3 }), {}));
  const [comentario, setComentario] = _pd_useState('');
  const [acepto, setAcepto] = _pd_useState(false);

  _pd_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 esAuto = instancia.evaluadorId === instancia.evaluadoId;
  const promedio = competencias.length
    ? (Object.values(scores).reduce((s, v) => s + v, 0) / competencias.length).toFixed(2)
    : '—';

  const submit = () => {
    if (!acepto) return;
    instancia.estado = 'enviado-firmado';
    instancia.fechaEnvio = new Date().toLocaleDateString('es-CO');
    instancia.competencias = Object.entries(scores).map(([compId, score]) => ({ compId, score }));
    instancia.firmaElectronica = {
      nombre: evaluado.nombre || 'Andrés Felipe Mejía',
      fecha: instancia.fechaEnvio,
      hash: `sha-${instancia.id}-${Date.now().toString(36)}`,
      leyDerivado: 'Ley 527/1999',
    };
    onSave && onSave(instancia);
    onClose();
  };

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 760, height: 'calc(100vh - 64px)' }}>
        <div className="modal-head">
          <div>
            <div className="muted mono" style={{ fontSize: 11 }}>{instancia.id}</div>
            <div className="modal-title">{esAuto ? 'Tu autoevaluación' : `Evaluar a ${evaluado.nombre}`}</div>
            <div className="modal-sub">{ciclo?.nombre} · {cargo?.nombre || '—'} · vence {instancia.plazoVence}</div>
          </div>
          <button className="icon-btn" onClick={onClose}>
            <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: '20px 24px', overflow: 'auto' }}>
          <div className="pd-anon-banner" style={{ marginBottom: 14 }}>
            <IconShield size={12} />
            <span style={{ fontSize: 11.5 }}>
              {esAuto
                ? 'Tu autoevaluación se compara con cómo otros te ven. Sé honesto/a — los gaps son insumo, no juicio.'
                : 'Tu respuesta es anónima. Se agrupa con la de otros pares para preservar tu identidad (Habeas Data Ley 1581/2012).'}
            </span>
          </div>

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <div className="muted-xs">Competencias a evaluar · {competencias.length}</div>
            <div style={{ fontSize: 13, fontWeight: 700 }}>Promedio: <span className="mono">{promedio}</span><small>/5</small></div>
          </div>

          {competencias.map(c => (
            <div key={c.id} className="pd-eval-comp">
              <div style={{ marginBottom: 6 }}>
                <div style={{ fontWeight: 700, fontSize: 13.5 }}>{c.nombre}</div>
                <div className="muted" style={{ fontSize: 11.5, lineHeight: 1.4, marginTop: 2 }}>{c.descripcion}</div>
                {c.diccionarioPorNivel && (
                  <div className="muted" style={{ fontSize: 10.5, marginTop: 4, fontStyle: 'italic' }}>
                    {scores[c.id] || 3}: {c.diccionarioPorNivel[scores[c.id] || 3]}
                  </div>
                )}
              </div>
              <div className="pd-eval-scale">
                {[1, 2, 3, 4, 5].map(v => (
                  <button key={v} type="button"
                    className={`pd-eval-step ${scores[c.id] === v ? 'active' : ''}`}
                    onClick={() => setScores(s => ({ ...s, [c.id]: v }))}>
                    {v}
                  </button>
                ))}
              </div>
            </div>
          ))}

          <div className="form-field" style={{ marginTop: 16 }}>
            <label>Comentario / evidencia (opcional)</label>
            <textarea rows={3} value={comentario} onChange={(e) => setComentario(e.target.value)} placeholder="Ejemplos concretos del período evaluado." />
          </div>

          <label className="pc-check-line" style={{ marginTop: 14, background: 'var(--surface-2)' }}>
            <input type="checkbox" checked={acepto} onChange={(e) => setAcepto(e.target.checked)} />
            <div>
              <b>Declaro bajo responsabilidad la veracidad de mis respuestas</b>
              <div className="muted" style={{ fontSize: 11.5 }}>
                Esta declaración constituye firma electrónica · Ley 527/1999 + Dec. 2364/2012.
              </div>
            </div>
          </label>
        </div>

        <div className="modal-foot">
          <button className="btn" onClick={onClose}>Guardar borrador</button>
          <span style={{ marginLeft: 'auto' }} />
          <button className="btn primary" disabled={!acepto} onClick={submit}>
            <IconCheck size={14} /> Firmar y enviar
          </button>
        </div>
      </div>
    </div>
  );
};

window.EvalRespondModal = EvalRespondModal;

// ─── Modal · Habeas Data ──────────────────────────────────

const HabeasDataModal = ({ myId, onClose }) => {
  _pd_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); };
  }, []);

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 640 }}>
        <div className="modal-head">
          <div>
            <div className="muted mono" style={{ fontSize: 11 }}>Habeas Data · Ley 1581/2012</div>
            <div className="modal-title">Cómo se protegen tus datos</div>
          </div>
          <button className="icon-btn" onClick={onClose}>
            <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: '20px 24px', fontSize: 13, lineHeight: 1.6 }}>
          <h4 style={{ fontSize: 13.5, marginTop: 0 }}>Qué se evalúa</h4>
          <p style={{ margin: '6px 0' }}>
            Competencias conductuales asociadas a tu cargo · cumplimiento de objetivos pactados · incidentes críticos del período.
            Todo bajo el marco <b>CST · Ley 2466/2025 · ICONTEC ISO 9001</b>.
          </p>

          <h4 style={{ fontSize: 13.5, marginTop: 14 }}>Quién te evalúa</h4>
          <p style={{ margin: '6px 0' }}>
            <b>Tú mismo/a</b> (autoevaluación), <b>tu jefe directo</b> (siempre identificado),
            <b> tus pares y reportes</b> (anónimos, en ciclos 360°).
          </p>

          <h4 style={{ fontSize: 13.5, marginTop: 14 }}>Anonimato</h4>
          <p style={{ margin: '6px 0' }}>
            Las respuestas de pares y reportes <b>nunca</b> te se identifican.
            Si una perspectiva tiene menos de <b>3 evaluadores</b>, los resultados se omiten para evitar reidentificación.
          </p>

          <h4 style={{ fontSize: 13.5, marginTop: 14 }}>Tus derechos</h4>
          <ul style={{ margin: '6px 0', paddingLeft: 20 }}>
            <li>Conocer qué datos tenemos sobre ti.</li>
            <li>Solicitar copia (descargable a continuación).</li>
            <li>Objetar incidentes negativos dentro de 5 días hábiles (descargos).</li>
            <li>Solicitar rectificación de errores · contacta a <b>RRHH</b>.</li>
          </ul>

          <div className="pd-habeas-actions">
            <button className="btn">
              <IconExternal size={12} /> Descargar mis datos (PDF)
            </button>
            <button className="btn">
              <IconExternal size={12} /> Descargar mis datos (JSON)
            </button>
          </div>
        </div>

        <div className="modal-foot">
          <button className="btn" onClick={onClose}>Cerrar</button>
        </div>
      </div>
    </div>
  );
};

window.HabeasDataModal = HabeasDataModal;