// Performance · Fase C · Incidentes Críticos (solo negativos)
// Bitácora inmutable de eventos problemáticos. Sustento del debido proceso laboral.
// CST Art. 62 (causal justa) · Ley 1010/2006 (acoso) · descargos en 5 días hábiles.
// Los eventos positivos viven en Reconocimientos (window.KUDOS).

const { useState: _ic_useState, useMemo: _ic_useMemo, useEffect: _ic_useEffect } = React;

// ─── IncidentesTab ─────────────────────────────────────────

const IncidentesTab = () => {
  const [tick, setTick] = _ic_useState(0);
  const [filterSev, setFilterSev] = _ic_useState('todos');
  const [filterEmp, setFilterEmp] = _ic_useState('todos');
  const [filterEstado, setFilterEstado] = _ic_useState('todos');
  const [openCapture, setOpenCapture] = _ic_useState(false);
  const [openDetail, setOpenDetail]   = _ic_useState(null);

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

  const filtered = all.filter(i => {
    if (filterSev !== 'todos' && i.severidad !== filterSev) return false;
    if (filterEmp !== 'todos' && i.empId !== filterEmp) return false;
    if (filterEstado === 'pendientes' && (i.estadoDescargos === 'recibidos-aceptados' || !i.descargosNotificados)) return false;
    if (filterEstado === 'resueltos' && i.estadoDescargos !== 'recibidos-aceptados') return false;
    return true;
  });

  const conDescargosPendientes = all.filter(i => i.descargosNotificados && (!i.estadoDescargos || i.estadoDescargos === 'pendiente')).length;
  const resueltos = all.filter(i => i.estadoDescargos === 'recibidos-aceptados').length;
  const altos = all.filter(i => i.severidad === 'alto').length;

  return (
    <div className="ic-tab">
      {/* KPIs */}
      <div className="tr-kpis">
        <div className="tr-kpi">
          <div className="tr-kpi-icon rose"><IconShield size={18} /></div>
          <div>
            <div className="tr-kpi-num">{all.length}</div>
            <div className="tr-kpi-lbl">Incidentes registrados</div>
            <div className="tr-kpi-foot">Bitácora inmutable · CST Art. 62</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon amber"><IconClock size={18} /></div>
          <div>
            <div className="tr-kpi-num">{conDescargosPendientes}</div>
            <div className="tr-kpi-lbl">Descargos por recibir</div>
            <div className="tr-kpi-foot">Ley 1010/2006 · plazo 5 días hábiles</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon green"><IconCheck size={18} /></div>
          <div>
            <div className="tr-kpi-num">{resueltos}</div>
            <div className="tr-kpi-lbl">Resueltos · descargos aceptados</div>
            <div className="tr-kpi-foot">Debido proceso completado</div>
          </div>
        </div>
        <div className="tr-kpi">
          <div className="tr-kpi-icon navy"><IconStar size={18} /></div>
          <div>
            <div className="tr-kpi-num">{altos}</div>
            <div className="tr-kpi-lbl">Severidad alta</div>
            <div className="tr-kpi-foot">Atención prioritaria de RRHH</div>
          </div>
        </div>
      </div>

      {/* Header + filtros */}
      <div className="sst-quickfilter" style={{ marginTop: 16 }}>
        <select value={filterSev} onChange={(e) => setFilterSev(e.target.value)}>
          <option value="todos">Todas las severidades</option>
          <option value="alto">Alta</option>
          <option value="medio">Media</option>
          <option value="bajo">Baja</option>
        </select>
        <select value={filterEstado} onChange={(e) => setFilterEstado(e.target.value)}>
          <option value="todos">Todos los estados</option>
          <option value="pendientes">Con descargos pendientes</option>
          <option value="resueltos">Resueltos</option>
        </select>
        <select value={filterEmp} onChange={(e) => setFilterEmp(e.target.value)}>
          <option value="todos">Todos los colaboradores</option>
          {Object.entries(window.PERSONAS_DESEMPENO || {}).map(([id, p]) =>
            <option key={id} value={id}>{p.nombre}</option>
          )}
        </select>
        <span className="muted" style={{ fontSize: 12, marginLeft: 'auto' }}>
          {filtered.length} de {all.length}
        </span>
        <button className="btn primary" onClick={() => setOpenCapture(true)}>
          <IconPlus size={14} /> Registrar incidente
        </button>
      </div>

      {/* Lista */}
      <div className="ic-list">
        {filtered.map(i => {
          const persona = (window.PERSONAS_DESEMPENO || {})[i.empId] || {};
          const comp = (window.COMPETENCIAS_CONDUCTUALES || []).find(c => c.id === i.competenciaRelacionadaId);
          return (
            <button key={i.id} className="ic-row ic-negativo" onClick={() => setOpenDetail(i)}>
              <div className="ic-row-icon negativo">!</div>
              <div className="ic-row-body">
                <div className="ic-row-head">
                  <span className="ic-row-name">{persona.nombre || i.empId}</span>
                  <span className={`pill ${i.severidad === 'alto' ? 'rose' : i.severidad === 'medio' ? 'amber-soft' : 'navy'}`} style={{ fontSize: 10 }}>
                    severidad {i.severidad}
                  </span>
                  <span className="muted mono" style={{ fontSize: 11, marginLeft: 'auto' }}>{i.fecha}</span>
                </div>
                <div className="ic-row-desc">{i.descripcion}</div>
                <div className="ic-row-meta">
                  {comp && <span className="ic-row-tag">{comp.nombre}</span>}
                  <span className="muted" style={{ fontSize: 11 }}>por {i.autorNombre}</span>
                  {i.evidenciaUrl && <span className="ic-row-tag green">📎 evidencia</span>}
                  {i.descargosNotificados && (
                    <span className={`ic-row-tag ${i.estadoDescargos === 'recibidos-aceptados' ? 'green' : 'amber'}`}>
                      {i.estadoDescargos === 'recibidos-aceptados' ? '✓ descargos aceptados' : `descargos vence ${i.plazoDescargosVence}`}
                    </span>
                  )}
                </div>
              </div>
            </button>
          );
        })}
        {filtered.length === 0 && (
          <div className="empty-state" style={{ padding: 40 }}>
            <IconShield size={28} style={{ color: 'var(--text-subtle)' }} />
            <div style={{ fontWeight: 600, marginTop: 8 }}>Sin incidentes en este filtro</div>
            <div className="muted" style={{ fontSize: 12, maxWidth: 360, textAlign: 'center' }}>
              Para reconocer comportamientos positivos, usa la pestaña <b>Reconocimientos</b>.
            </div>
          </div>
        )}
      </div>

      {openCapture && <IncidenteCaptureModal onClose={() => setOpenCapture(false)} onSave={() => setTick(t => t + 1)} />}
      {openDetail && <IncidenteDetailModal incidente={openDetail} onClose={() => setOpenDetail(null)} />}
    </div>
  );
};

window.IncidentesTab = IncidentesTab;

// ─── Captura de incidente ─────────────────────────────────

const IncidenteCaptureModal = ({ onClose, onSave, defaultEmpId }) => {
  const [form, setForm] = _ic_useState({
    empId: defaultEmpId || 'E0247',
    severidad: 'medio',
    competenciaRelacionadaId: 'CDC-04',
    descripcion: '',
    evidenciaUrl: '',
    visibleAlEvaluado: true,
  });

  _ic_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.empId && form.descripcion.trim().length >= 20;

  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 = `IC-${today.getFullYear()}-${String(((window.INCIDENTES_CRITICOS || []).length + 1)).padStart(3, '0')}`;
    const plazoD = new Date(); plazoD.setDate(plazoD.getDate() + 5);
    const plazoStr = `${String(plazoD.getDate()).padStart(2, '0')}/${String(plazoD.getMonth() + 1).padStart(2, '0')}/${plazoD.getFullYear()}`;
    const incidente = {
      id, empId: form.empId, autorId: 'E0023', autorNombre: 'Carolina Restrepo',
      fecha, severidad: form.severidad,
      competenciaRelacionadaId: form.competenciaRelacionadaId,
      descripcion: form.descripcion.trim(),
      evidenciaUrl: form.evidenciaUrl || null,
      visibleAlEvaluado: true,                // Habeas Data · siempre visible al colaborador
      descargosNotificados: true,              // siempre notifica descargos
      plazoDescargosVence: plazoStr,
      estadoDescargos: 'pendiente',
    };
    (window.INCIDENTES_CRITICOS || []).unshift(incidente);
    onSave && onSave(incidente);
    onClose();
  };

  return (
    <div className="modal-overlay" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" style={{ maxWidth: 720 }}>
        <div className="modal-head">
          <div>
            <div className="muted mono" style={{ fontSize: 11 }}>Nuevo incidente</div>
            <div className="modal-title">Registrar incidente crítico</div>
            <div className="modal-sub">Bitácora inmutable. Soporta debido proceso · CST Art. 62 · Ley 1010/2006.</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: '20px 24px' }}>
          <div className="ic-warn-box" style={{ marginBottom: 16 }}>
            <IconShield size={14} />
            <div>
              <b>Debido proceso laboral</b>
              <div style={{ fontSize: 11.5, marginTop: 3 }}>
                Al guardar, el colaborador recibe notificación con plazo de <b>5 días hábiles</b> para presentar descargos (Ley 1010/2006).
                Esto soporta una eventual decisión disciplinaria conforme CST Art. 62. Para reconocer comportamientos positivos, usa <b>Reconocimientos</b>.
              </div>
            </div>
          </div>

          <div className="pc-form-row">
            <div className="form-field">
              <label>Colaborador *</label>
              <select value={form.empId} onChange={(e) => update({ empId: e.target.value })}>
                {Object.entries(window.PERSONAS_DESEMPENO || {}).map(([id, p]) =>
                  <option key={id} value={id}>{p.nombre}</option>
                )}
              </select>
            </div>
            <div className="form-field">
              <label>Severidad *</label>
              <select value={form.severidad} onChange={(e) => update({ severidad: e.target.value })}>
                <option value="bajo">Baja</option>
                <option value="medio">Media</option>
                <option value="alto">Alta</option>
              </select>
            </div>
          </div>

          <div className="form-field">
            <label>Competencia relacionada</label>
            <select value={form.competenciaRelacionadaId} onChange={(e) => update({ competenciaRelacionadaId: 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>Descripción del evento * <span className="muted" style={{ fontWeight: 400 }}>(mínimo 20 caracteres · concreto y observable)</span></label>
            <textarea rows={4} value={form.descripcion}
              onChange={(e) => update({ descripcion: e.target.value })}
              placeholder="Describe el evento de forma específica · qué pasó, cuándo, dónde, qué impacto tuvo. Evita juicios de valor — enfócate en conductas observables." />
          </div>

          <div className="form-field">
            <label>Evidencia (opcional)</label>
            <input type="text" value={form.evidenciaUrl} onChange={(e) => update({ evidenciaUrl: e.target.value })}
              placeholder="URL del documento / foto / acta / reporte" />
          </div>
        </div>

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

window.IncidenteCaptureModal = IncidenteCaptureModal;

// ─── Detalle ──────────────────────────────────────────────

const IncidenteDetailModal = ({ incidente, onClose }) => {
  const i = incidente;
  const persona = (window.PERSONAS_DESEMPENO || {})[i.empId] || {};
  const comp = (window.COMPETENCIAS_CONDUCTUALES || []).find(c => c.id === i.competenciaRelacionadaId);

  _ic_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: 680 }}>
        <div className="modal-head">
          <div>
            <div className="muted mono" style={{ fontSize: 11 }}>{i.id}</div>
            <div className="modal-title">Incidente crítico · severidad {i.severidad}</div>
            <div className="modal-sub">Registro inmutable · {i.fecha} · por {i.autorNombre}</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: '20px 24px' }}>
          <div className="ic-detail-head">
            <div className="ic-row-icon negativo" style={{ width: 44, height: 44 }}>!</div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 800 }}>{persona.nombre || i.empId}</div>
              <div className="muted" style={{ fontSize: 12.5 }}>{comp?.nombre || '—'} · severidad {i.severidad}</div>
            </div>
          </div>

          <div style={{ background: 'var(--surface)', padding: 14, borderRadius: 8, border: '1px solid var(--border)', marginTop: 14 }}>
            <div className="muted-xs" style={{ marginBottom: 6 }}>Descripción</div>
            <div style={{ fontSize: 13.5, lineHeight: 1.55 }}>{i.descripcion}</div>
          </div>

          {i.evidenciaUrl && (
            <div style={{ marginTop: 12 }}>
              <div className="muted-xs">Evidencia</div>
              <a href={i.evidenciaUrl} target="_blank" rel="noreferrer" className="link-btn" style={{ marginLeft: 0 }}>
                <IconExternal size={12} /> Ver archivo
              </a>
            </div>
          )}

          {i.descargosNotificados && (
            <div className="ic-warn-box" style={{ marginTop: 12 }}>
              <IconShield size={14} />
              <div>
                <b>Descargos · debido proceso</b>
                <div style={{ fontSize: 12, marginTop: 4 }}>
                  Plazo: <span className="mono">{i.plazoDescargosVence || '—'}</span>
                </div>
                {i.descargosTexto && (
                  <div style={{ fontSize: 12, marginTop: 6, fontStyle: 'italic' }}>
                    "{i.descargosTexto}"
                  </div>
                )}
                <div style={{ fontSize: 11.5, marginTop: 6 }}>
                  Estado: <b>{i.estadoDescargos || 'pendiente'}</b>
                </div>
              </div>
            </div>
          )}

          <div style={{ marginTop: 14, padding: 10, background: 'var(--surface-2)', borderRadius: 6 }}>
            <div className="muted" style={{ fontSize: 11.5 }}>
              <IconShield size={11} /> Marco normativo aplicable: <b>CST Art. 62 · Ley 1010/2006 · Ley 1581/2012 (Habeas Data)</b>.
              Este registro es <b>inmutable</b> y será insumo para evaluaciones del período.
            </div>
          </div>
        </div>

        <div className="modal-foot">
          <button className="btn" onClick={onClose}>Cerrar</button>
          <button className="btn"><IconExternal size={13} /> Exportar PDF</button>
          {i.descargosNotificados && i.estadoDescargos === 'pendiente' && (
            <button className="btn primary"><IconCheck size={13} /> Recibir descargos</button>
          )}
        </div>
      </div>
    </div>
  );
};

window.IncidenteDetailModal = IncidenteDetailModal;