// Performance · Fase C · Reconocimientos
// Reconocimientos vinculados a una competencia conductual + impacto (bajo/medio/alto).
// Los de alto impacto reemplazan la idea de "incidente positivo" — quedan en bitácora con evidencia.
// Identificador interno se mantiene como KUDOS por consistencia técnica.

const { useState: _ku_useState, useMemo: _ku_useMemo, useEffect: _ku_useEffect } = React;

const KudosTab = () => {
  const [tick, setTick] = _ku_useState(0);
  const [openCapture, setOpenCapture] = _ku_useState(false);
  const [filterPara, setFilterPara] = _ku_useState('todos');

  const all = _ku_useMemo(() => {
    return [...(window.KUDOS || [])].sort((a, b) => {
      const pa = a.fecha.split('/').reverse().join('-');
      const pb = b.fecha.split('/').reverse().join('-');
      return pb.localeCompare(pa);
    });
  }, [tick]);

  const filtered = filterPara === 'todos' ? all : all.filter(k => k.paraId === filterPara);

  // Top receptores (mes)
  const topReceptores = _ku_useMemo(() => {
    const counts = {};
    all.forEach(k => { counts[k.paraId] = (counts[k.paraId] || 0) + 1; });
    return Object.entries(counts)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 5)
      .map(([id, n]) => ({ empId: id, count: n, persona: (window.PERSONAS_DESEMPENO || {})[id] }));
  }, [tick]);

  const altos = all.filter(k => k.impacto === 'alto').length;

  return (
    <div className="ku-tab">
      <div className="tr-kpis">
        <div className="tr-kpi">
          <div className="tr-kpi-icon green"><IconStar size={18} /></div>
          <div>
            <div className="tr-kpi-num">{all.length}</div>
            <div className="tr-kpi-lbl">Reconocimientos enviados</div>
            <div className="tr-kpi-foot">Peer-to-peer + alto impacto</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon navy"><IconUsers size={18} /></div>
          <div>
            <div className="tr-kpi-num">{new Set(all.map(k => k.deId)).size}</div>
            <div className="tr-kpi-lbl">Personas que reconocieron</div>
            <div className="tr-kpi-foot">Cobertura de la cultura</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon amber"><IconBarChart size={18} /></div>
          <div>
            <div className="tr-kpi-num">{altos}</div>
            <div className="tr-kpi-lbl">De alto impacto</div>
            <div className="tr-kpi-foot">Con evidencia · van a bitácora</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon rose"><IconRocket size={18} /></div>
          <div>
            <div className="tr-kpi-num">{all.filter(k => k.publico).length}</div>
            <div className="tr-kpi-lbl">Públicos</div>
            <div className="tr-kpi-foot">Visibles en feed de Comunicaciones</div>
          </div>
        </div>
      </div>

      <div className="ku-grid">
        <div className="ku-feed">
          <div className="sst-quickfilter" style={{ marginBottom: 12 }}>
            <select value={filterPara} onChange={(e) => setFilterPara(e.target.value)}>
              <option value="todos">Todos los receptores</option>
              {Object.entries(window.PERSONAS_DESEMPENO || {}).map(([id, p]) =>
                <option key={id} value={id}>{p.nombre}</option>
              )}
            </select>
            <button className="btn primary" style={{ marginLeft: 'auto' }} onClick={() => setOpenCapture(true)}>
              <IconPlus size={14} /> Dar reconocimiento
            </button>
          </div>

          <div className="ku-list">
            {filtered.map(k => {
              const de = (window.PERSONAS_DESEMPENO || {})[k.deId] || {};
              const para = (window.PERSONAS_DESEMPENO || {})[k.paraId] || {};
              const comp = (window.COMPETENCIAS_CONDUCTUALES || []).find(c => c.id === k.competenciaId);
              const impacto = k.impacto || 'bajo';
              return (
                <div key={k.id} className={`ku-card ku-impacto-${impacto}`}>
                  <div className="ku-card-head">
                    <div className="ku-card-flow">
                      <div className="doc-avatar" style={{ width: 30, height: 30, fontSize: 11 }}>{de.initials || '??'}</div>
                      <span className="ku-arrow">→</span>
                      <div className="doc-avatar" style={{ width: 30, height: 30, fontSize: 11, background: 'var(--green-600)', color: 'white' }}>{para.initials || '??'}</div>
                    </div>
                    <span className={`ku-impacto-badge ku-impacto-${impacto}`}>impacto {impacto}</span>
                    <span className="muted mono" style={{ fontSize: 11, marginLeft: 'auto' }}>{k.fecha}</span>
                  </div>
                  <div style={{ marginTop: 8, fontSize: 13, lineHeight: 1.55, fontStyle: 'italic' }}>
                    "{k.mensaje}"
                  </div>
                  <div className="ku-card-foot">
                    <span className="muted" style={{ fontSize: 11.5 }}>{de.nombre} → <b style={{ color: 'var(--text)' }}>{para.nombre}</b></span>
                    {comp && <span className="ku-card-tag">{comp.nombre}</span>}
                    {k.evidenciaUrl && <span className="ku-card-tag" style={{ background: 'rgba(31,79,160,0.10)', color: '#1F4FA0' }}>📎 evidencia</span>}
                    {k.publico ? <span className="pill green" style={{ fontSize: 10 }}>público</span> : <span className="pill navy" style={{ fontSize: 10 }}>privado</span>}
                  </div>
                </div>
              );
            })}
            {filtered.length === 0 && (
              <div className="empty-state" style={{ padding: 32 }}>
                <IconStar size={28} style={{ color: 'var(--text-subtle)' }} />
                <div style={{ fontWeight: 600, marginTop: 8 }}>Sin kudos en este filtro</div>
              </div>
            )}
          </div>
        </div>

        <aside className="ku-side">
          <div className="ku-side-card">
            <div className="muted-xs">Top receptores · este mes</div>
            <div className="ku-top-list">
              {topReceptores.map((t, i) => (
                <div key={t.empId} className="ku-top-row">
                  <span className="ku-top-rank">{i + 1}</span>
                  <div className="doc-avatar" style={{ width: 28, height: 28, fontSize: 11 }}>{t.persona?.initials || '??'}</div>
                  <span style={{ flex: 1, fontSize: 12.5, fontWeight: 600 }}>{t.persona?.nombre || t.empId}</span>
                  <span className="ku-top-count">{t.count}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="ku-side-card" style={{ marginTop: 14 }}>
            <div className="muted-xs">¿Cómo dar buenos reconocimientos?</div>
            <div style={{ fontSize: 12, lineHeight: 1.55, marginTop: 8 }}>
              <p style={{ margin: '4px 0' }}>• Sé <b>específico</b> · cuenta el qué, cuándo y por qué impactó.</p>
              <p style={{ margin: '4px 0' }}>• Vincúlalo a una <b>competencia</b> · ayuda a fortalecer la cultura.</p>
              <p style={{ margin: '4px 0' }}>• Eleva el impacto a <b>alto</b> cuando el evento merezca quedar en bitácora con evidencia.</p>
              <p style={{ margin: '4px 0' }}>• Si es público, otros aprenden del ejemplo.</p>
            </div>
          </div>
        </aside>
      </div>

      {openCapture && <KudosCaptureModal onClose={() => setOpenCapture(false)} onSave={() => setTick(t => t + 1)} />}
    </div>
  );
};

window.KudosTab = KudosTab;

// ─── Captura de kudos ─────────────────────────────────────

const KudosCaptureModal = ({ onClose, onSave, defaultParaId }) => {
  const [form, setForm] = _ku_useState({
    paraId: defaultParaId || 'E0247',
    competenciaId: 'CDC-03',
    impacto: 'bajo',
    mensaje: '',
    evidenciaUrl: '',
    publico: true,
  });

  _ku_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 update = (patch) => setForm(f => ({ ...f, ...patch }));
  const canSave = form.paraId && form.competenciaId && form.mensaje.trim().length >= 15;

  const submit = () => {
    if (!canSave) return;
    const today = new Date();
    const fecha = `${String(today.getDate()).padStart(2, '0')}/${String(today.getMonth() + 1).padStart(2, '0')}/${today.getFullYear()}`;
    const id = `K-${String(((window.KUDOS || []).length + 1)).padStart(3, '0')}`;
    const k = {
      id,
      deId: 'E0023', deNombre: 'Carolina Restrepo',  // mock · usuario actual
      paraId: form.paraId, fecha,
      competenciaId: form.competenciaId,
      impacto: form.impacto,
      mensaje: form.mensaje.trim(),
      evidenciaUrl: form.evidenciaUrl || null,
      publico: form.publico,
    };
    (window.KUDOS || []).unshift(k);
    onSave && onSave(k);
    onClose();
  };

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 600 }}>
        <div className="modal-head">
          <div>
            <div className="muted mono" style={{ fontSize: 11 }}>Nuevo reconocimiento</div>
            <div className="modal-title">Dar reconocimiento</div>
            <div className="modal-sub">Vincúlalo a una competencia conductual y elige el impacto. Los de alto impacto van a la bitácora del colaborador.</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' }}>
          <div className="form-field">
            <label>¿A quién?</label>
            <select value={form.paraId} onChange={(e) => update({ paraId: e.target.value })}>
              {Object.entries(window.PERSONAS_DESEMPENO || {}).map(([id, p]) =>
                <option key={id} value={id}>{p.nombre}</option>
              )}
            </select>
          </div>

          <div className="pc-form-row">
            <div className="form-field">
              <label>Por cuál competencia</label>
              <select value={form.competenciaId} onChange={(e) => update({ competenciaId: e.target.value })}>
                {(window.COMPETENCIAS_CONDUCTUALES || []).map(c =>
                  <option key={c.id} value={c.id}>{c.nombre}</option>
                )}
              </select>
            </div>
            <div className="form-field">
              <label>Impacto *</label>
              <div className="ku-impacto-pills">
                {[
                  ['bajo',  'Bajo',  'Reconocimiento casual · sin evidencia'],
                  ['medio', 'Medio', 'Reconocimiento formal · evidencia opcional'],
                  ['alto',  'Alto',  'Alto impacto · evidencia + bitácora'],
                ].map(([v, l, d]) => (
                  <button key={v} type="button"
                    className={`ku-impacto-pill ${v} ${form.impacto === v ? 'active' : ''}`}
                    onClick={() => update({ impacto: v })}
                    title={d}>
                    {l}
                  </button>
                ))}
              </div>
            </div>
          </div>

          <div className="form-field">
            <label>Mensaje *</label>
            <textarea rows={4} value={form.mensaje} onChange={(e) => update({ mensaje: e.target.value })}
              placeholder="Sé específico · cuenta qué hizo, cuándo, dónde y por qué te impactó. Mínimo 15 caracteres." />
          </div>

          {(form.impacto === 'medio' || form.impacto === 'alto') && (
            <div className="form-field">
              <label>Evidencia {form.impacto === 'alto' ? '*' : '(opcional)'}</label>
              <input type="text" value={form.evidenciaUrl} onChange={(e) => update({ evidenciaUrl: e.target.value })}
                placeholder="URL del documento / acta / foto / reporte que respalda el reconocimiento" />
            </div>
          )}

          {form.impacto === 'alto' && (
            <div className="ku-warn-box">
              <IconShield size={14} />
              <div>
                <b>Reconocimiento de alto impacto</b>
                <div style={{ fontSize: 11.5, marginTop: 3 }}>
                  Quedará registrado en la bitácora del colaborador y será insumo positivo para evaluaciones del período.
                  Adjunta evidencia (acta, foto, reporte) que respalde el evento.
                </div>
              </div>
            </div>
          )}

          <label className="pc-check-line">
            <input type="checkbox" checked={form.publico} onChange={(e) => update({ publico: e.target.checked })} />
            <div>
              <b>Hacer público</b>
              <div className="muted" style={{ fontSize: 11.5 }}>Aparece en el feed de Comunicaciones · todos pueden verlo.</div>
            </div>
          </label>
        </div>

        <div className="modal-foot">
          <button className="btn" onClick={onClose}>Cancelar</button>
          <span style={{ marginLeft: 'auto' }} />
          <button className="btn primary" disabled={!canSave} onClick={submit}>
            <IconStar size={14} /> Enviar reconocimiento
          </button>
        </div>
      </div>
    </div>
  );
};

window.KudosCaptureModal = KudosCaptureModal;