/* global React */

const { useState: useStateD } = React;

const TITULO_DETALLE_DEFAULT = 'Fortalecimiento del régimen de declaración jurada de funcionarios públicos';
const ARCHIVOS_DEFAULT = [
  { name: 'reporte_MESICIC_RondaV_PRY.pdf', size: '2.4 MB' },
  { name: 'matriz_cobertura_DJBe_2025.xlsx', size: '318 KB' },
];
const ACCIONES_DEFAULT = [
  {
    descripcion: 'Ampliar la cobertura del sistema de declaración jurada electrónica (DJB-e) al 100% de los funcionarios obligados.',
    estado: 'partial',
    instituciones: [
      { inst: 'Secretaría Nacional Anticorrupción', rol: 'Líder', plazo: '2026-06-12', responsable: 'u-005' },
      { inst: 'Ministerio de Hacienda', rol: 'Apoyo', plazo: '2026-06-30', responsable: null },
    ],
    avances: [
      { fecha: '2026-05-10', autor: 'R. Mendoza', inst: 'SENAC', texto: 'Cobertura DJB-e alcanzó el 76% de los obligados; se sumó el módulo de carga masiva.', archivos: [{ name: 'cobertura_djbe_may2026.xlsx', size: '214 KB' }] },
    ],
  },
  {
    descripcion: 'Implementar el módulo de verificación cruzada con la base patrimonial de la SET.',
    estado: 'pending',
    instituciones: [
      { inst: 'Ministerio de Hacienda', rol: 'Líder', plazo: '2026-09-30', responsable: null },
    ],
    avances: [],
  },
  {
    descripcion: 'Habilitar el mecanismo de consulta pública con anonimización parcial y protección de datos.',
    estado: 'pending',
    instituciones: [
      { inst: 'Contraloría General de la República', rol: 'Coordinación', plazo: '2026-08-15', responsable: null },
    ],
    avances: [],
  },
];
const RESULTADOS_DEFAULT = '217.000 declaraciones presentadas electrónicamente · 32 verificaciones sustantivas iniciadas · 4 procesos administrativos derivados a Fiscalía.';
const JUSTIF_DEFAULT = 'La Contraloría General de la República implementó en 2025 la plataforma DJB-e con cobertura del 76% de los obligados. Quedan pendientes los módulos de verificación cruzada con la base patrimonial de la SET y el sistema de consulta pública con anonimización parcial — ambos en fase de desarrollo.';
const ALERTAS_DEF = [
  { code: 'D-7', label: 'Aviso de proximidad' },
  { code: 'D-3', label: 'Recordatorio' },
  { code: 'D-1', label: 'Urgencia' },
  { code: 'D',   label: 'Vencimiento' },
  { code: 'D+1', label: 'Sin avance (escalamiento)' },
];
const MECANISMOS = ['MESICIC', 'UNCAC', 'OCDE'];
const TIPOS_INFORME = ['Informe', 'Informe tratado', 'Anexo', 'Evidencia', 'Resolución', 'Acta'];
const INFORMES_DEFAULT = [
  { name: 'informe_de_avance_DJBe_2026Q1.pdf', tipo: 'Informe tratado', size: '2.1 MB', fecha: '2026-05-12' },
  { name: 'matriz_cobertura_institucional.xlsx', tipo: 'Anexo', size: '318 KB', fecha: '2026-05-10' },
  { name: 'resolucion_CGR_114-2026.pdf', tipo: 'Resolución', size: '540 KB', fecha: '2026-04-28' },
];
const ESTADO_OPTS = [
  { v: 'pending', l: 'Pendiente' },
  { v: 'partial', l: 'Parcial' },
  { v: 'ok',      l: 'Cumplido' },
  { v: 'bad',     l: 'No cumplido' },
  { v: 'overdue', l: 'Vencido s/avance' },
];

function DetalleScreen({ onBack, onOpenTablero }) {
  const I = window.Icons;
  const d = window.COMP_DETAIL;
  const [tab, setTab] = useStateD('info');

  const buildData = () => ({
    id: d.id,
    idInternacional: d.idInternacional,
    mecanismo: d.mecanismo,
    ronda: d.ronda,
    recibida: d.recibida,
    vence: d.vence,
    titulo: d.titulo || TITULO_DETALLE_DEFAULT,
    estado: d.estado,
    eje: d.eje, tipo: d.tipo, evaluacion: d.evaluacion,
    recomendacion: d.recomendacion,
    archivos: ARCHIVOS_DEFAULT.map(a => ({ ...a })),
    acciones: ACCIONES_DEFAULT.map(a => ({ ...a })),
    resultados: RESULTADOS_DEFAULT,
    justificacion: JUSTIF_DEFAULT,
    informes: INFORMES_DEFAULT.map(a => ({ ...a })),
    alertas: { 'D-7': true, 'D-3': true, 'D-1': true, 'D': true, 'D+1': true },
  });
  const [data, setData] = window.usePersistentState('detalle_' + d.id, buildData);
  const [heroEdit, setHeroEdit] = useStateD(false);
  const [confirmDel, setConfirmDel] = useStateD(false);

  const update = (k, v) => setData(s => ({ ...s, [k]: v }));
  const removeArchivo = (i) => setData(s => ({ ...s, archivos: s.archivos.filter((_, idx) => idx !== i) }));
  const setAccion = (i, k, v) => setData(s => ({ ...s, acciones: s.acciones.map((a, idx) => idx === i ? { ...a, [k]: v } : a) }));
  const addAccion = () => setData(s => ({ ...s, acciones: [...s.acciones, { descripcion: '', estado: 'pending', instituciones: [{ inst: '', rol: 'Líder', plazo: '', responsable: null }], avances: [] }] }));
  const removeAccion = (i) => setData(s => ({ ...s, acciones: s.acciones.filter((_, idx) => idx !== i) }));
  const setAccionInst = (ai, ii, k, v) => setData(s => ({ ...s, acciones: s.acciones.map((a, idx) => idx === ai ? { ...a, instituciones: a.instituciones.map((r, j) => j === ii ? { ...r, [k]: v } : r) } : a) }));
  const addAccionInst = (ai) => setData(s => ({ ...s, acciones: s.acciones.map((a, idx) => idx === ai ? { ...a, instituciones: [...a.instituciones, { inst: '', rol: 'Apoyo', plazo: '', responsable: null }] } : a) }));
  const removeAccionInst = (ai, ii) => setData(s => ({ ...s, acciones: s.acciones.map((a, idx) => idx === ai ? { ...a, instituciones: a.instituciones.filter((_, j) => j !== ii) } : a) }));
  const setAccionInstResponsable = (ai, ii, uid) => setData(s => ({ ...s, acciones: s.acciones.map((a, idx) => idx === ai ? { ...a, instituciones: a.instituciones.map((r, j) => j === ii ? { ...r, responsable: uid } : r) } : a) }));
  const addAvanceAccion = (ai, payload) => setData(s => ({ ...s, acciones: s.acciones.map((a, idx) => idx === ai ? { ...a, avances: [{ fecha: new Date().toISOString().slice(0, 10), autor: payload.autor || 'C. Benítez', inst: payload.inst || '', texto: payload.texto, archivos: payload.archivos || [] }, ...a.avances] } : a) }));
  const removeAvanceAccion = (ai, k) => setData(s => ({ ...s, acciones: s.acciones.map((a, idx) => idx === ai ? { ...a, avances: a.avances.filter((_, j) => j !== k) } : a) }));
  const editAvanceAccion = (ai, k, texto) => setData(s => ({ ...s, acciones: s.acciones.map((a, idx) => idx === ai ? { ...a, avances: a.avances.map((av, j) => j === k ? { ...av, texto } : av) } : a) }));
  const toggleAlerta = (code) => setData(s => ({ ...s, alertas: { ...s.alertas, [code]: !s.alertas[code] } }));
  const removeInforme = (i) => setData(s => ({ ...s, informes: s.informes.filter((_, idx) => idx !== i) }));
  const addInforme = (payload) => setData(s => ({ ...s, informes: [{ fecha: new Date().toISOString().slice(0, 10), tipo: payload.tipo || 'Informe', name: payload.name, size: payload.size || '—' }, ...s.informes] }));

  const [heroErr, setHeroErr] = useStateD({});
  const otrosComp = (window.COMPROMISOS || []).filter(c => c.id !== d.id);
  const guardarHero = () => {
    const e = {};
    const id = (data.id || '').trim();
    const idInt = (data.idInternacional || '').trim();
    if (!id) e.id = 'Ingresa el ID interno.';
    else if (otrosComp.some(c => (c.id || '').toLowerCase() === id.toLowerCase())) e.id = 'Ese ID interno ya está en uso por otro compromiso.';
    if (!idInt) e.idInternacional = 'Ingresa el ID internacional.';
    else if (otrosComp.some(c => (c.idInternacional || '').toLowerCase() === idInt.toLowerCase())) e.idInternacional = 'Ese ID internacional ya está en uso por otro compromiso.';
    if (!(data.mecanismo || '').trim()) e.mecanismo = 'Indica el mecanismo.';
    setHeroErr(e);
    if (Object.keys(e).length === 0) setHeroEdit(false);
  };
  const abrirHeroEdit = () => { setHeroErr({}); setHeroEdit(true); };
  const cancelarHeroEdit = () => { setHeroErr({}); setHeroEdit(false); };

  return (
    <div data-screen-label="04 Detalle de Compromiso">
      <div className="detalle-back">
        <button type="button" className="detalle-back__link" onClick={onOpenTablero}>
          <I.ChevronRight size={12} style={{ transform: 'rotate(180deg)' }} /> Volver al tablero
        </button>
        <div className="detalle-back__crumb">
          <span>Compromisos</span>
          <I.ChevronRight size={12} />
          <span>{data.mecanismo} · {data.ronda}</span>
          <I.ChevronRight size={12} />
          <strong className="mono">{data.id}</strong>
        </div>
      </div>

      {/* Hero card */}
      <div className="detalle-hero">
        {heroEdit ? (
          <div className="detalle-hero__editform">
            <div className="hero-grid">
              <label className="pa-fld">
                <span className="pa-lbl">ID interno</span>
                <input className={`nip-input mono${heroErr.id ? ' is-invalid' : ''}`} value={data.id} onChange={e => update('id', e.target.value)} />
                {heroErr.id && <small className="hero-err"><I.AlertCircle size={11} /> {heroErr.id}</small>}
              </label>
              <label className="pa-fld">
                <span className="pa-lbl">ID internacional</span>
                <input className={`nip-input mono${heroErr.idInternacional ? ' is-invalid' : ''}`} value={data.idInternacional} onChange={e => update('idInternacional', e.target.value)} />
                {heroErr.idInternacional && <small className="hero-err"><I.AlertCircle size={11} /> {heroErr.idInternacional}</small>}
              </label>
              <label className="pa-fld">
                <span className="pa-lbl">Estado</span>
                <select className="nip-select" value={data.estado} onChange={e => update('estado', e.target.value)}>
                  {ESTADO_OPTS.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
                </select>
              </label>
              <label className="pa-fld">
                <span className="pa-lbl">Mecanismo</span>
                <input className={`nip-input${heroErr.mecanismo ? ' is-invalid' : ''}`} list="hero-mecs" value={data.mecanismo} onChange={e => update('mecanismo', e.target.value)} />
                <datalist id="hero-mecs">{MECANISMOS.map(m => <option key={m} value={m} />)}</datalist>
                {heroErr.mecanismo && <small className="hero-err"><I.AlertCircle size={11} /> {heroErr.mecanismo}</small>}
              </label>
              <label className="pa-fld">
                <span className="pa-lbl">Ronda / Fase</span>
                <input className="nip-input" value={data.ronda} placeholder="Ej. Ronda V" onChange={e => update('ronda', e.target.value)} />
              </label>
              <label className="pa-fld">
                <span className="pa-lbl">Fecha de recepción</span>
                <input className="nip-input" value={data.recibida} placeholder="Ej. 18 mar 2024" onChange={e => update('recibida', e.target.value)} />
              </label>
              <label className="pa-fld">
                <span className="pa-lbl">Fecha de vencimiento</span>
                <input className="nip-input" value={data.vence} placeholder="Ej. 12 jun 2026" onChange={e => update('vence', e.target.value)} />
              </label>
            </div>
            <label className="pa-fld">
              <span className="pa-lbl">Título de la recomendación</span>
              <input type="text" className="detalle-title-input" value={data.titulo} onChange={e => update('titulo', e.target.value)} />
            </label>
            <div className="detalle-hero__editactions">
              <button type="button" className="btn btn--ghost btn--sm" onClick={cancelarHeroEdit}>Cancelar</button>
              <button type="button" className="btn btn--primary btn--sm" onClick={guardarHero}><I.CheckCircle2 size={13} /> Guardar</button>
            </div>
          </div>
        ) : (
          <>
            <div className="detalle-hero__head">
              <div className="detalle-hero__ids">
                <span className="id-block"><small>ID interno</small><strong className="mono">{data.id}</strong></span>
                <span className="id-block"><small>ID internacional</small><strong className="mono id-block__intl">{data.idInternacional}</strong></span>
                <span className="id-block">
                  <small>Mecanismo · Ronda</small>
                  <strong>
                    <span className={`mech-tag mech-tag--${(data.mecanismo || '').toLowerCase()}`}>{data.mecanismo}</span>
                    <span style={{ marginLeft: 8 }}>{data.ronda}</span>
                  </strong>
                </span>
              </div>
              <div className="detalle-hero__tools">
                <window.StatusPill estado={data.estado} />
                <button
                  type="button"
                  className="pa-iconbtn"
                  title="Exportar plan de acción (Excel)"
                  aria-label="Exportar plan de acción (Excel)"
                  onClick={() => window.cgrStore.exportRows(
                    data.acciones.map((a, i) => ({
                      n: i + 1,
                      descripcion: a.descripcion,
                      estado: a.estado,
                      instituciones: (a.instituciones || []).map(x => x.inst).join(', '),
                      plazos: (a.instituciones || []).map(x => x.plazo).filter(Boolean).join(' · '),
                      avances: (a.avances || []).length,
                    })),
                    [
                      { key: 'n', label: '#' },
                      { key: 'descripcion', label: 'Acción' },
                      { key: 'estado', label: 'Estado', format: v => ({ pending: 'Pendiente', partial: 'Parcial', ok: 'Cumplido', bad: 'No cumplido', overdue: 'Vencido s/avance' }[v] || v) },
                      { key: 'instituciones', label: 'Instituciones' },
                      { key: 'plazos', label: 'Plazos' },
                      { key: 'avances', label: 'N° avances' },
                    ],
                    'ficha_' + (data.id || 'recomendacion'),
                    'Plan de acción'
                  )}
                ><I.Download size={14} /></button>
                <button type="button" className="pa-iconbtn" title="Editar recomendación" aria-label="Editar recomendación" onClick={abrirHeroEdit}><I.Edit size={14} /></button>
                <button type="button" className="pa-iconbtn pa-iconbtn--danger" title="Eliminar recomendación" aria-label="Eliminar recomendación" onClick={() => setConfirmDel(true)}><I.Trash2 size={14} /></button>
              </div>
            </div>

            <h1 className="detalle-hero__title">{data.titulo}</h1>

            <div className="detalle-hero__meta">
              <span><I.Calendar size={13} /> Recibida {data.recibida}</span>
              <span><I.Clock size={13} /> Vence {data.vence}</span>
              <span><I.ListChecks size={13} /> {data.acciones.length} acciones</span>
            </div>
          </>
        )}

        {confirmDel && (
          <div className="detalle-confirm">
            <span><I.AlertTriangle size={14} /> ¿Eliminar esta recomendación y todo su seguimiento? Esta acción no se puede deshacer.</span>
            <div className="detalle-confirm__actions">
              <button type="button" className="btn btn--ghost btn--sm" onClick={() => setConfirmDel(false)}>Cancelar</button>
              <button type="button" className="btn btn--danger btn--sm" onClick={() => { setConfirmDel(false); onOpenTablero && onOpenTablero(); }}><I.Trash2 size={13} /> Eliminar</button>
            </div>
          </div>
        )}
      </div>

      {/* Tabs */}
      <div className="tabs" role="tablist">
        <Tab id="info"  label="Información" icon="FileText"      active={tab} onSel={setTab} />
        <Tab id="acc"   label="Acciones"    icon="ListChecks"    active={tab} onSel={setTab} badge={String(data.acciones.length)} />
        <Tab id="av"    label="Avances"     icon="Clock"         active={tab} onSel={setTab} badge="7" />
        <Tab id="al"    label="Alertas"     icon="Bell"          active={tab} onSel={setTab} />
        <Tab id="msg"   label="Mensajería"  icon="MessageSquare" active={tab} onSel={setTab} badge="2" />
        <Tab id="res"   label="Resultados"  icon="BarChart"      active={tab} onSel={setTab} />
      </div>

      <div className="detalle-body detalle-body--full">
        <div className="detalle-main">
          {tab === 'info' && <TabInfo data={data} update={update} removeArchivo={removeArchivo} />}
          {tab === 'acc'  && <TabAcciones data={data} setAccion={setAccion} addAccion={addAccion} removeAccion={removeAccion} setAccionInst={setAccionInst} addAccionInst={addAccionInst} removeAccionInst={removeAccionInst} setAccionInstResponsable={setAccionInstResponsable} addAvanceAccion={addAvanceAccion} removeAvanceAccion={removeAvanceAccion} editAvanceAccion={editAvanceAccion} />}
          {tab === 'av'   && <TabAvances d={d} data={data} />}
          {tab === 'al'   && <TabAlertas data={data} toggleAlerta={toggleAlerta} />}
          {tab === 'msg'  && <TabMensajeria d={d} data={data} />}
          {tab === 'res'  && <TabResultados data={data} update={update} removeInforme={removeInforme} addInforme={addInforme} />}
        </div>

      </div>
    </div>
  );
}

function Tab({ id, label, icon, active, onSel, badge }) {
  const I = window.Icons;
  const Ico = I[icon] || I.FileText;
  return (
    <button type="button" role="tab" aria-selected={active === id}
      className={`tab${active === id ? ' is-active' : ''}`} onClick={() => onSel(id)}>
      <Ico size={14} />
      <span>{label}</span>
      {badge && <span className="tab__badge">{badge}</span>}
    </button>
  );
}

// ---------- Encabezado de sección con acciones (editar / eliminar) ----------
function SectionCard({ label, sub, editing, onEdit, onDone, onDelete, children }) {
  const I = window.Icons;
  return (
    <div className="section">
      <div className="section__bar">
        <div className="section__bar-l">
          <div className="section__label">{label}</div>
          {sub && <p className="section__hint section__hint--tight">{sub}</p>}
        </div>
        <div className="section__tools">
          {editing ? (
            <button type="button" className="pa-iconbtn" title="Listo" aria-label="Listo" onClick={onDone}><I.CheckCircle2 size={14} /></button>
          ) : (
            <>
              {onEdit && <button type="button" className="pa-iconbtn" title="Editar" aria-label="Editar" onClick={onEdit}><I.Edit size={14} /></button>}
              {onDelete && <button type="button" className="pa-iconbtn pa-iconbtn--danger" title="Eliminar" aria-label="Eliminar" onClick={onDelete}><I.Trash2 size={14} /></button>}
            </>
          )}
        </div>
      </div>
      {children}
    </div>
  );
}

// ---------- Información (base) ----------
function TabInfo({ data, update, removeArchivo }) {
  const I = window.Icons;
  const [eRec, setERec] = useStateD(false);
  const [eClas, setEClas] = useStateD(false);
  const [eFiles, setEFiles] = useStateD(false);
  return (
    <>
      <SectionCard label="Texto completo de la recomendación" editing={eRec} onEdit={() => setERec(true)} onDone={() => setERec(false)}>
        {eRec
          ? <textarea className="nip-textarea" rows="6" value={data.recomendacion} onChange={e => update('recomendacion', e.target.value)} />
          : <div className="prose">{data.recomendacion}</div>}
      </SectionCard>

      <SectionCard label="Clasificación" editing={eClas} onEdit={() => setEClas(true)} onDone={() => setEClas(false)}>
        {eClas ? (
          <div className="clasif-edit">
            <div className="nip-field"><label className="nip-label">Eje temático</label><input className="nip-input" value={data.eje} onChange={e => update('eje', e.target.value)} /></div>
            <div className="nip-field"><label className="nip-label">Tipo</label><input className="nip-input" value={data.tipo} onChange={e => update('tipo', e.target.value)} /></div>
            <div className="nip-field"><label className="nip-label">Evaluación de origen</label><input className="nip-input" value={data.evaluacion} onChange={e => update('evaluacion', e.target.value)} /></div>
          </div>
        ) : (
          <div className="clasif-grid">
            <div className="rail-pair"><small>Eje temático</small><strong>{data.eje}</strong></div>
            <div className="rail-pair"><small>Tipo</small><strong>{data.tipo}</strong></div>
            <div className="rail-pair"><small>Evaluación de origen</small><strong>{data.evaluacion}</strong></div>
          </div>
        )}
      </SectionCard>

      <SectionCard label={`Archivos adjuntos — ${data.archivos.length}`} editing={eFiles} onEdit={() => setEFiles(true)} onDone={() => setEFiles(false)}>
        {data.archivos.length === 0 && !eFiles ? (
          <div className="prose">Sin archivos adjuntos.</div>
        ) : (
          <ul className="files">
            {data.archivos.map((f, i) => (
              <li key={i} className="file">
                <I.FileText size={14} />
                <span>{f.name}</span>
                <small>· {f.size}</small>
                {eFiles
                  ? <button type="button" className="file__del" aria-label="Quitar archivo" onClick={() => removeArchivo(i)}><I.XCircle size={14} /></button>
                  : <button type="button" className="file__del" aria-label="Descargar archivo" title="Descargar"><I.Download size={13} /></button>}
              </li>
            ))}
          </ul>
        )}
        {eFiles && (
          <div className="filedrop" style={{ marginTop: 10 }}>
            <div className="filedrop__zone">
              <I.Upload size={22} />
              <strong>Arrastra los archivos aquí o haz clic para seleccionar</strong>
              <small>PDF, DOCX, XLSX, PNG, JPG · máximo 25 MB cada uno</small>
            </div>
          </div>
        )}
      </SectionCard>
    </>
  );
}

// ---------- Acciones (plan de acción: institución + responsable opcional) ----------
const MESES_ABBR = ['ene', 'feb', 'mar', 'abr', 'may', 'jun', 'jul', 'ago', 'sep', 'oct', 'nov', 'dic'];
const HOY_REF = new Date('2026-06-06T00:00:00');
const ROL_KEY = { 'Líder': 'lider', 'Coordinación': 'coord', 'Apoyo': 'apoyo' };

function instMetaOf(nombre) {
  if (!nombre) return null;
  return window.cgrData.instituciones().find(o => o.nombre === nombre || o.sigla === nombre) || null;
}
function siglaOf(nombre) {
  const o = instMetaOf(nombre);
  if (o) return o.sigla;
  return nombre ? nombre.split(/\s+/).map(w => w[0]).join('').slice(0, 3).toUpperCase() : '—';
}
function userById(uid) {
  return window.cgrData.usuarios().find(u => u.id === uid) || null;
}
function nombreFocal(nombre) {
  const o = instMetaOf(nombre);
  if (!o || !o.contacto) return null;
  const n = o.contacto.split('·')[0].trim();
  return n && n.toLowerCase().indexOf('sin contacto') === -1 ? n : null;
}
function iniciales(nombre) {
  if (!nombre) return '—';
  const limpio = nombre.replace(/\(.*?\)/g, '').trim();
  const parts = limpio.split(/\s+/).filter(Boolean);
  if (parts.length === 0) return '—';
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}
function usersOf(instNombre) {
  if (!instNombre) return [];
  const cat = instMetaOf(instNombre);
  if (!cat) return [];
  const sig = cat.sigla.toLowerCase();
  const nom = cat.nombre.toLowerCase();
  const seen = {};
  return window.cgrData.usuarios().filter(u => {
    const seg = (u.institucion || '').toLowerCase().split('·')[0].trim();
    const match = seg === sig || seg === nom || nom.startsWith(seg) || seg.startsWith(nom);
    if (!match || seen[u.id]) return false; // sin duplicados
    seen[u.id] = true;
    return true;
  });
}
function fmtFecha(iso) {
  if (!iso) return 'sin plazo';
  const p = iso.split('-');
  if (p.length !== 3) return iso;
  return `${+p[2]} ${MESES_ABBR[+p[1] - 1]} ${p[0]}`;
}
function plazoTone(iso) {
  if (!iso) return '';
  const dt = new Date(iso + 'T00:00:00');
  const days = Math.round((dt - HOY_REF) / 86400000);
  if (days < 0) return 'is-overdue';
  if (days <= 7) return 'is-soon';
  return '';
}

function TabAcciones({ data, setAccion, addAccion, removeAccion, setAccionInst, addAccionInst, removeAccionInst, setAccionInstResponsable, addAvanceAccion, removeAvanceAccion, editAvanceAccion }) {
  const I = window.Icons;
  return (
    <div className="section">
      <div className="section__label">Plan de acción — {data.acciones.length} acciones</div>
      <p className="section__hint">Cada acción se asigna a una o más instituciones (con rol y plazo). <strong>Todos los usuarios de cada institución ven la acción y pueden subir evidencia.</strong> El responsable queda en el punto focal de la institución, salvo que designes a otra persona.</p>

      <div className="pa-list">
        {data.acciones.map((a, i) => (
          <AccionCard
            key={i}
            index={i}
            a={a}
            setAccion={setAccion}
            removeAccion={removeAccion}
            setAccionInst={setAccionInst}
            addAccionInst={addAccionInst}
            removeAccionInst={removeAccionInst}
            setAccionInstResponsable={setAccionInstResponsable}
            addAvanceAccion={addAvanceAccion}
            removeAvanceAccion={removeAvanceAccion}
            editAvanceAccion={editAvanceAccion}
          />
        ))}
      </div>

      <button type="button" className="pa-add" onClick={addAccion}>
        <I.Plus size={16} /> Agregar acción
      </button>
    </div>
  );
}

function AccionCard({ index, a, setAccion, removeAccion, setAccionInst, addAccionInst, removeAccionInst, setAccionInstResponsable, addAvanceAccion, removeAvanceAccion, editAvanceAccion }) {
  const I = window.Icons;
  const instOpts = window.cgrData.instituciones();
  const [editing, setEditing] = useStateD(!a.descripcion);
  const [composing, setComposing] = useStateD(false);
  const [avTexto, setAvTexto] = useStateD('');
  const [avInst, setAvInst] = useStateD('');
  const [avFile, setAvFile] = useStateD(null);
  const [confirmDel, setConfirmDel] = useStateD(false);
  const [avEdit, setAvEdit] = useStateD(-1);
  const [avEditText, setAvEditText] = useStateD('');
  const [avDel, setAvDel] = useStateD(-1);
  const cardAlt = index % 2 === 0 ? ' pa-card--alt' : '';

  const evidenciasDe = (sig) => (a.avances || []).filter(av => (av.inst || '') === sig).length;

  const abrirComposer = () => {
    const first = a.instituciones.find(r => r.inst);
    setAvInst(first ? siglaOf(first.inst) : '');
    setAvTexto(''); setAvFile(null); setComposing(true);
  };
  const guardarEvidencia = () => {
    if (!avTexto.trim()) return;
    const meta = instOpts.find(o => o.sigla === avInst);
    const autor = nombreFocal(meta ? meta.nombre : '') || (avInst ? `Enlace ${avInst}` : 'CGR');
    addAvanceAccion(index, {
      texto: avTexto.trim(),
      inst: avInst,
      autor,
      archivos: avFile ? [{ name: avFile, size: '—' }] : [],
    });
    setComposing(false); setAvTexto(''); setAvFile(null);
  };

  const delBanner = confirmDel ? (
    <div className="pa-confirm">
      <span className="pa-confirm__sp"><I.AlertTriangle size={14} /> ¿Eliminar la Acción {index + 1} y toda su evidencia? Esta acción no se puede deshacer.</span>
      <div className="pa-confirm__actions">
        <button type="button" className="btn btn--ghost btn--sm" onClick={() => setConfirmDel(false)}>Cancelar</button>
        <button type="button" className="btn btn--danger btn--sm" onClick={() => removeAccion(index)}><I.Trash2 size={13} /> Eliminar acción</button>
      </div>
    </div>
  ) : null;

  // ---------- Modo edición ----------
  if (editing) {
    return (
      <article className={`pa-card pa-card--edit${cardAlt}`}>
        <header className="pa-card__bar">
          <span className="pa-card__n">Acción {index + 1}</span>
          <label className="pa-estado">
            <span className="pa-estado__lbl">Estado</span>
            <select className="nip-select" value={a.estado} onChange={e => setAccion(index, 'estado', e.target.value)}>
              {ESTADO_OPTS.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
            </select>
          </label>
          <button type="button" className="pa-iconbtn pa-iconbtn--danger" title="Eliminar acción" aria-label="Eliminar acción" onClick={() => setConfirmDel(true)}><I.Trash2 size={15} /></button>
        </header>
        {delBanner}

        <label className="pa-fld">
          <span className="pa-lbl">Descripción de la acción</span>
          <textarea className="nip-textarea" rows="2" value={a.descripcion} placeholder="Describe la acción o medida a ejecutar…" onChange={e => setAccion(index, 'descripcion', e.target.value)} />
        </label>

        <div className="pa-block">
          <div className="pa-block__h"><I.Building2 size={14} /> Instituciones responsables <span className="pa-count">{a.instituciones.length}</span></div>
          <p className="pa-help">Se asigna a la institución: todos sus usuarios verán la acción y podrán subir evidencia. El responsable queda en el punto focal salvo que designes a otra persona.</p>
          {a.instituciones.map((r, ii) => {
            const users = usersOf(r.inst);
            const focal = nombreFocal(r.inst);
            return (
              <div className="pa-inst-edit" key={ii}>
                <div className="pa-inst-edit__grid">
                  <label className="pa-fld">
                    <span className="pa-lbl">Institución</span>
                    <select className="nip-select" value={r.inst} onChange={e => setAccionInst(index, ii, 'inst', e.target.value)}>
                      <option value="">Seleccionar…</option>
                      {r.inst && !instOpts.some(o => o.nombre === r.inst || o.sigla === r.inst) && <option value={r.inst}>{r.inst}</option>}
                      {instOpts.map(o => { const off = o.estado === 'desactivado'; return <option key={o.id} value={o.nombre} disabled={off}>{o.nombre} ({o.sigla}){off ? ' — desactivada' : ''}</option>; })}
                    </select>
                  </label>
                  <label className="pa-fld pa-fld--sm">
                    <span className="pa-lbl">Rol</span>
                    <select className="nip-select" value={r.rol} onChange={e => setAccionInst(index, ii, 'rol', e.target.value)}>
                      <option>Líder</option><option>Coordinación</option><option>Apoyo</option>
                    </select>
                  </label>
                  <label className="pa-fld pa-fld--sm">
                    <span className="pa-lbl">Plazo interno</span>
                    <input type="date" className="nip-input" value={r.plazo} onChange={e => setAccionInst(index, ii, 'plazo', e.target.value)} />
                  </label>
                  <button type="button" className="pa-iconbtn" title="Quitar institución" aria-label="Quitar institución" onClick={() => removeAccionInst(index, ii)} disabled={a.instituciones.length === 1}><I.XCircle size={15} /></button>
                </div>
                {r.inst && (
                  <label className="pa-resp-edit">
                    <span className="pa-lbl"><I.Users size={12} /> Responsable (opcional)</span>
                    <select className="nip-select" value={r.responsable || ''} onChange={e => setAccionInstResponsable(index, ii, e.target.value || null)}>
                      <option value="">{focal ? `Punto focal — ${focal} (por defecto)` : 'Punto focal de la institución (por defecto)'}</option>
                      {users.filter(u => window.cgrData.usuarioSeleccionable(u)).map(u => <option key={u.id} value={u.id}>{u.nombre}</option>)}
                    </select>
                    <small className="pa-note">Todos los usuarios de {siglaOf(r.inst)} verán la acción y recibirán aviso. El responsable es solo el contacto principal.</small>
                  </label>
                )}
              </div>
            );
          })}
          <button type="button" className="pa-add-inst" onClick={() => addAccionInst(index)}><I.Plus size={13} /> Agregar institución</button>
        </div>

        <footer className="pa-card__foot">
          <button type="button" className="btn btn--primary btn--sm" onClick={() => setEditing(false)}><I.CheckCircle2 size={13} /> Listo</button>
        </footer>
      </article>
    );
  }

  // ---------- Modo lectura ----------
  const instAsignadas = a.instituciones.filter(r => r.inst);
  return (
    <article className={`pa-card${cardAlt}`}>
      <header className="pa-card__bar">
        <span className="pa-card__n">Acción {index + 1}</span>
        <window.StatusPill estado={a.estado} />
        <div className="pa-card__tools">
          <button type="button" className="pa-iconbtn" title="Editar acción" aria-label="Editar acción" onClick={() => setEditing(true)}><I.Edit size={14} /></button>
          <button type="button" className="pa-iconbtn pa-iconbtn--danger" title="Eliminar acción" aria-label="Eliminar acción" onClick={() => setConfirmDel(true)}><I.Trash2 size={14} /></button>
        </div>
      </header>
      {delBanner}

      <p className="pa-card__desc">{a.descripcion || <span className="pa-muted">Sin descripción.</span>}</p>

      <div className="pa-block">
        <div className="pa-block__h"><I.Building2 size={14} /> Instituciones responsables <span className="pa-count">{instAsignadas.length}</span></div>
        <div className="pa-insts">
          {instAsignadas.length === 0 && <div className="pa-muted pa-muted--pad">Sin instituciones asignadas todavía.</div>}
          {instAsignadas.map((r, ii) => {
            const sig = siglaOf(r.inst);
            const meta = instMetaOf(r.inst);
            const respUser = r.responsable ? userById(r.responsable) : null;
            const respNombre = respUser ? respUser.nombre : (nombreFocal(r.inst) || '— sin punto focal —');
            const respInit = respUser ? respUser.initials : iniciales(nombreFocal(r.inst));
            const esFocal = !r.responsable;
            const ev = evidenciasDe(sig);
            const rolKey = ROL_KEY[r.rol] || 'apoyo';
            return (
              <div className="pa-inst" key={ii}>
                <span className={`pa-inst__sigla pa-inst__sigla--${rolKey}`}>{sig}</span>
                <div className="pa-inst__main">
                  <div className="pa-inst__top">
                    <strong className="pa-inst__name">{meta ? meta.nombre : r.inst}</strong>
                    <span className={`pa-rol pa-rol--${rolKey}`}>{r.rol}</span>
                  </div>
                  <div className="pa-inst__meta">
                    <span className={`pa-chip ${plazoTone(r.plazo)}`}><I.Calendar size={12} /> Plazo {fmtFecha(r.plazo)}</span>
                    <span className="pa-resp">
                      <span className="pa-ava">{respInit}</span>
                      <span className="pa-resp__txt">{respNombre}</span>
                      <span className={`pa-resp__tag ${esFocal ? 'is-focal' : 'is-named'}`}>{esFocal ? 'Punto focal' : 'Responsable'}</span>
                    </span>
                    <span className="pa-chip pa-chip--ev"><I.FileText size={12} /> {ev} evidencia{ev === 1 ? '' : 's'}</span>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="pa-block">
        <div className="pa-block__h">
          <I.Upload size={14} /> Evidencia y avances <span className="pa-count">{a.avances.length}</span>
          {!composing && <button type="button" className="pa-block__cta" onClick={abrirComposer}><I.Plus size={13} /> Cargar evidencia</button>}
        </div>

        {composing && (
          <div className="pa-ev-form">
            <div className="pa-ev-form__top">
              <label className="pa-fld pa-fld--sm">
                <span className="pa-lbl">Subir como institución</span>
                <select className="nip-select" value={avInst} onChange={e => setAvInst(e.target.value)}>
                  {instAsignadas.map((r, k) => {
                    const s = siglaOf(r.inst);
                    const m = instMetaOf(r.inst);
                    return <option key={k} value={s}>{s} — {m ? m.nombre : r.inst}</option>;
                  })}
                </select>
              </label>
            </div>
            <textarea className="nip-textarea" rows="2" value={avTexto} placeholder="Describe el avance o la evidencia que vas a cargar…" onChange={e => setAvTexto(e.target.value)} autoFocus />
            <label className="pa-drop">
              <I.Upload size={16} />
              <span>{avFile ? avFile : 'Adjuntar archivo de evidencia (PDF, DOCX, XLSX, imagen)'}</span>
              <input type="file" hidden onChange={e => setAvFile(e.target.files && e.target.files[0] ? e.target.files[0].name : null)} />
            </label>
            <div className="pa-ev-form__foot">
              <button type="button" className="btn btn--ghost btn--sm" onClick={() => setComposing(false)}>Cancelar</button>
              <button type="button" className="btn btn--primary btn--sm" disabled={!avTexto.trim()} onClick={guardarEvidencia}><I.CheckCircle2 size={13} /> Guardar evidencia</button>
            </div>
          </div>
        )}

        {a.avances.length === 0 && !composing && <div className="pa-muted pa-muted--pad">Aún no se cargó evidencia para esta acción.</div>}

        <div className="pa-ev-list">
          {a.avances.map((av, k) => (
            <div className="pa-ev" key={k}>
              <span className="pa-ava pa-ava--lg">{iniciales(av.autor)}</span>
              <div className="pa-ev__body">
                <div className="pa-ev__top">
                  <strong>{av.autor}</strong>
                  {av.inst && <span className="pa-inst-tag">{av.inst}</span>}
                  <span className="pa-ev__date mono">{fmtFecha(av.fecha)}</span>
                  {avEdit !== k && avDel !== k && (
                    <span className="pa-ev__tools">
                      <button type="button" className="pa-iconbtn" title="Editar comentario" aria-label="Editar comentario" onClick={() => { setAvEdit(k); setAvEditText(av.texto); }}><I.Edit size={13} /></button>
                      <button type="button" className="pa-iconbtn pa-iconbtn--danger" title="Eliminar evidencia" aria-label="Eliminar evidencia" onClick={() => setAvDel(k)}><I.Trash2 size={13} /></button>
                    </span>
                  )}
                </div>
                {avEdit === k ? (
                  <div className="pa-ev-edit">
                    <textarea className="nip-textarea" rows="2" value={avEditText} onChange={e => setAvEditText(e.target.value)} autoFocus />
                    <div className="pa-ev-edit__actions">
                      <button type="button" className="btn btn--ghost btn--sm" onClick={() => setAvEdit(-1)}>Cancelar</button>
                      <button type="button" className="btn btn--primary btn--sm" disabled={!avEditText.trim()} onClick={() => { editAvanceAccion(index, k, avEditText.trim()); setAvEdit(-1); }}><I.CheckCircle2 size={13} /> Guardar</button>
                    </div>
                  </div>
                ) : (
                  <p>{av.texto}</p>
                )}
                {avDel === k && (
                  <div className="pa-ev__del">
                    <span className="pa-confirm__sp"><I.AlertTriangle size={13} /> ¿Eliminar esta evidencia? No se puede deshacer.</span>
                    <div className="pa-confirm__actions">
                      <button type="button" className="btn btn--ghost btn--sm" onClick={() => setAvDel(-1)}>Cancelar</button>
                      <button type="button" className="btn btn--danger btn--sm" onClick={() => { removeAvanceAccion(index, k); setAvDel(-1); }}><I.Trash2 size={13} /> Eliminar</button>
                    </div>
                  </div>
                )}
                {avEdit !== k && (av.archivos || []).map((f, fi) => (
                  <span className="pa-file" key={fi}><I.FileText size={13} /> {f.name}{f.size && f.size !== '—' ? <small> · {f.size}</small> : null}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </article>
  );
}

// ---------- Avances ----------
function TabAvances({ d, data }) {
  const I = window.Icons;
  const avances = [];
  (data.acciones || []).forEach((a, ai) => (a.avances || []).forEach(av => avances.push({ ...av, accion: ai + 1 })));
  avances.sort((x, y) => (y.fecha || '').localeCompare(x.fecha || ''));
  const iconFor = t => {
    if (t === 'submitted') return { icon: 'Upload',        tone: 'default', label: 'Avance cargado' };
    if (t === 'returned')  return { icon: 'AlertCircle',   tone: 'warn',    label: 'Devolución para ajuste' };
    if (t === 'state')     return { icon: 'CheckCircle2',  tone: 'ok',      label: 'Cambio de estado' };
    if (t === 'message')   return { icon: 'MessageSquare', tone: 'default', label: 'Mensaje enviado' };
    if (t === 'assigned')  return { icon: 'Users',         tone: 'default', label: 'Asignación' };
    if (t === 'created')   return { icon: 'PlusCircle',    tone: 'default', label: 'Recomendación creada' };
    return { icon: 'FileText', tone: 'default', label: 'Acción' };
  };
  return (
    <>
      <div className="section">
        <div className="section__label">Avances reportados · {avances.length}</div>
        <p className="section__hint">Los avances se cargan sobre cada acción (en la pestaña Acciones). Aquí se ven todos juntos, indicando a qué acción pertenecen.</p>
        {avances.length === 0 ? (
          <div className="prose">Aún no se cargaron avances.</div>
        ) : (
          <div className="avances-agg">
            {avances.map((av, k) => (
              <div className="accion-avance" key={k}>
                <div className="accion-avance__dot"><I.Upload size={12} /></div>
                <div className="accion-avance__body">
                  <div className="accion-avance__top">
                    <span className="avance-accion-tag">Acción {av.accion}</span>
                    <strong>{av.autor}</strong>
                    <span className="mono">{av.fecha}</span>
                  </div>
                  <p>{av.texto}</p>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="section">
        <div className="section__label">Actividad del sistema — {d.historial.length}</div>
        <ol className="detalle-timeline">
        {d.historial.map((h, i) => {
          const m = iconFor(h.type);
          return (
            <li className={`detalle-timeline__item is-${m.tone}`} key={i}>
              <div className="detalle-timeline__dot">{React.createElement(I[m.icon], { size: 13 })}</div>
              <div className="detalle-timeline__body">
                <div className="detalle-timeline__top">
                  <span className="tag-action">{m.label}</span>
                  <span className="detalle-timeline__date mono">{h.date}</span>
                </div>
                <div className="detalle-timeline__msg"><strong>{h.actor}</strong> {h.body}</div>
                {h.detail && <div className="detalle-timeline__detail">{h.detail}</div>}
              </div>
            </li>
          );
        })}
        </ol>
      </div>
    </>
  );
}

// ---------- Alertas (vista admin: configurar, próximas y registro) ----------
const ALERTA_OFFSETS = [
  { code: 'D-7', dias: 7,  sev: 'info',   label: 'Aviso de proximidad', desc: '7 días antes del plazo' },
  { code: 'D-3', dias: 3,  sev: 'warn',   label: 'Recordatorio',        desc: '3 días antes del plazo' },
  { code: 'D-1', dias: 1,  sev: 'danger', label: 'Urgencia',            desc: '24 h antes del plazo' },
  { code: 'D',   dias: 0,  sev: 'danger', label: 'Vencimiento',         desc: 'El día del plazo interno' },
  { code: 'D+1', dias: -1, sev: 'dark',   label: 'Sin avance',          desc: 'Día siguiente sin carga · escala al punto focal' },
];

function buildAlertSchedule(acciones, enabled) {
  const out = [];
  (acciones || []).forEach((a, ai) => {
    (a.instituciones || []).filter(r => r.inst && r.plazo).forEach(r => {
      ALERTA_OFFSETS.forEach(o => {
        if (!enabled[o.code]) return;
        const base = new Date(r.plazo + 'T00:00:00');
        const dt = new Date(base.getTime() - o.dias * 86400000);
        out.push({
          key: `${ai}-${siglaOf(r.inst)}-${o.code}`,
          code: o.code, sev: o.sev, date: dt, iso: dt.toISOString().slice(0, 10),
          accion: ai + 1, inst: r.inst, plazo: r.plazo, responsable: r.responsable,
        });
      });
    });
  });
  return out;
}
function diasEntre(date) { return Math.round((date - HOY_REF) / 86400000); }
function diasTxt(n) {
  if (n === 0) return 'hoy';
  if (n === 1) return 'mañana';
  if (n > 1) return `en ${n} días`;
  if (n === -1) return 'ayer';
  return `hace ${Math.abs(n)} días`;
}
function destinatarioDe(r) {
  const u = r.responsable ? userById(r.responsable) : null;
  return {
    nombre: u ? u.nombre : (nombreFocal(r.inst) || 'Punto focal'),
    init: u ? u.initials : iniciales(nombreFocal(r.inst)),
    esFocal: !r.responsable,
  };
}

function TabAlertas({ data, toggleAlerta }) {
  const I = window.Icons;
  const [sent, setSent] = useStateD({});
  const enabled = data.alertas || {};
  const schedule = buildAlertSchedule(data.acciones, enabled);
  const proximas = schedule.filter(s => diasEntre(s.date) >= 0).sort((a, b) => a.date - b.date);
  const enviadasAuto = schedule.filter(s => diasEntre(s.date) < 0).sort((a, b) => b.date - a.date);
  const enviarAhora = (key) => setSent(s => ({ ...s, [key]: true }));
  const sentKeys = Object.keys(sent);

  return (
    <>
      <div className="section">
        <div className="section__label">Configuración de recordatorios automáticos</div>
        <p className="section__hint">Se calculan sobre el plazo interno de cada acción y se envían a la institución responsable (todos sus usuarios) por los canales activos.</p>
        <div className="al-config">
          {ALERTA_OFFSETS.map(o => {
            const on = !!enabled[o.code];
            return (
              <div className={`al-cfg${on ? ' is-on' : ''}`} key={o.code}>
                <span className={`al-code al-code--${o.sev}`}>{o.code}</span>
                <div className="al-cfg__txt">
                  <strong>{o.label}</strong>
                  <small>{o.desc}</small>
                </div>
                <div className="al-cfg__ch">
                  <span className="al-ch"><I.Mail size={12} /> Correo</span>
                  <span className="al-ch"><I.Bell size={12} /> Plataforma</span>
                </div>
                <button type="button" role="switch" aria-checked={on} aria-label={`Activar ${o.label}`} className={`al-switch${on ? ' is-on' : ''}`} onClick={() => toggleAlerta(o.code)}>
                  <span className="al-switch__knob" />
                </button>
              </div>
            );
          })}
        </div>
      </div>

      <div className="section">
        <div className="section__label">Próximas alertas — {proximas.length}</div>
        <p className="section__hint">Calculadas a partir de los plazos de cada acción. Puedes adelantar el envío con “Enviar ahora”.</p>
        {proximas.length === 0 ? (
          <div className="pa-muted pa-muted--pad">No hay alertas próximas con la configuración actual.</div>
        ) : (
          <div className="al-list">
            {proximas.slice(0, 8).map(s => {
              const dest = destinatarioDe(s);
              const n = diasEntre(s.date);
              return (
                <div className="al-row" key={s.key}>
                  <span className={`al-code al-code--${s.sev}`}>{s.code}</span>
                  <div className="al-row__main">
                    <div className="al-row__top"><strong>{fmtFecha(s.iso)}</strong><span className="al-when">{diasTxt(n)}</span></div>
                    <div className="al-row__sub">
                      <span className="pa-inst-tag">{siglaOf(s.inst)}</span>
                      <span>Acción {s.accion} · vence {fmtFecha(s.plazo)}</span>
                    </div>
                  </div>
                  <span className="al-dest"><span className="pa-ava">{dest.init}</span><span className="al-dest__txt">{dest.nombre}</span></span>
                  {sent[s.key]
                    ? <span className="al-sent-badge"><I.CheckCircle2 size={13} /> Enviada</span>
                    : <button type="button" className="al-send" onClick={() => enviarAhora(s.key)}><I.Send size={12} /> Enviar ahora</button>}
                </div>
              );
            })}
          </div>
        )}
      </div>

      <div className="section">
        <div className="section__label">Alertas enviadas — registro</div>
        <p className="section__hint">Historial de avisos disparados por la plataforma para este compromiso.</p>
        <div className="al-log">
          {sentKeys.map(k => {
            const s = schedule.find(x => x.key === k);
            if (!s) return null;
            const dest = destinatarioDe(s);
            return (
              <div className="al-logrow" key={'m-' + k}>
                <span className="al-dot is-manual"><I.Send size={11} /></span>
                <div className="al-logrow__body">
                  <div className="al-logrow__top"><span className={`al-code al-code--${s.sev}`}>{s.code}</span><strong>{siglaOf(s.inst)} · Acción {s.accion}</strong><span className="al-logrow__date">recién · manual</span></div>
                  <small>Enviada a {dest.nombre} · correo + plataforma</small>
                </div>
              </div>
            );
          })}
          {enviadasAuto.slice(0, 8).map(s => {
            const dest = destinatarioDe(s);
            return (
              <div className="al-logrow" key={s.key}>
                <span className={`al-dot al-dot--${s.sev}`}><I.Bell size={11} /></span>
                <div className="al-logrow__body">
                  <div className="al-logrow__top"><span className={`al-code al-code--${s.sev}`}>{s.code}</span><strong>{siglaOf(s.inst)} · Acción {s.accion}</strong><span className="al-logrow__date">{fmtFecha(s.iso)} · {diasTxt(diasEntre(s.date))}</span></div>
                  <small>Enviada a {dest.nombre} · correo + plataforma</small>
                </div>
              </div>
            );
          })}
          {enviadasAuto.length === 0 && sentKeys.length === 0 && <div className="pa-muted pa-muted--pad">Todavía no se enviaron alertas para este compromiso.</div>}
        </div>
      </div>
    </>
  );
}

// ---------- Mensajería (vista admin: un hilo por institución asignada) ----------
function TabMensajeria({ d, data }) {
  const I = window.Icons;
  const asignadas = [];
  (data.acciones || []).forEach(a => (a.instituciones || []).forEach(r => {
    if (!r.inst) return;
    const sig = siglaOf(r.inst);
    if (sig === 'CGR') return;
    if (!asignadas.some(x => x.sig === sig)) asignadas.push({ sig, inst: r.inst, responsable: r.responsable });
  }));

  const seed = () => {
    const t = {};
    asignadas.forEach(x => { t[x.sig] = []; });
    if (t['SENAC']) t['SENAC'] = [
      { from: 'in',  author: 'R. Mendoza (SENAC)', date: '14 may · 09:12', text: 'Subimos el primer ciclo de avance con las evidencias de implementación inicial del módulo DJB-e.', files: [] },
      { from: 'out', author: 'C. Benítez (CGR)',   date: '18 may · 14:33', text: 'Gracias. Observamos que la conciliación del 2do trimestre 2025 no cuadra con el reporte semestral; necesitamos la matriz que cruza cobertura declarada con base SET.', files: [] },
      { from: 'in',  author: 'R. Mendoza (SENAC)', date: 'Hoy · 10:48',    text: 'Cargamos el tercer ciclo con la matriz de conciliación y la tabla de cobertura por dependencia. Quedamos atentos a observaciones.', files: [{ name: 'matriz_conciliacion_2026Q1.xlsx', size: '412 KB' }] },
    ];
    if (t['MH']) t['MH'] = [
      { from: 'out', author: 'C. Benítez (CGR)',  date: '12 may · 11:05', text: 'Recordatorio: el módulo de verificación cruzada con la base SET sigue pendiente. ¿Pueden confirmar fecha estimada?', files: [] },
      { from: 'in',  author: 'L. Ramírez (MH)',   date: '12 may · 16:40', text: 'Estamos coordinando con la SET el acceso a la base patrimonial. Estimamos cargar el avance antes del 30 de junio.', files: [] },
    ];
    return t;
  };
  const [threads, setThreads] = useStateD(seed);
  const [active, setActive] = useStateD(asignadas.length ? asignadas[0].sig : '');
  const [unread, setUnread] = useStateD(() => {
    const u = {}; asignadas.forEach(x => { u[x.sig] = x.sig === 'SENAC' ? 2 : 0; }); return u;
  });
  const [draft, setDraft] = useStateD('');

  if (asignadas.length === 0) {
    return <div className="section"><div className="pa-muted pa-muted--pad">Asigna instituciones en la pestaña Acciones para habilitar la mensajería.</div></div>;
  }

  const seleccionar = (sig) => { setActive(sig); setUnread(u => ({ ...u, [sig]: 0 })); };
  const enviar = () => {
    if (!draft.trim()) return;
    setThreads(t => ({ ...t, [active]: [...(t[active] || []), { from: 'out', author: 'C. Benítez (CGR)', date: 'Ahora', text: draft.trim(), files: [] }] }));
    setDraft('');
  };

  const activeInst = asignadas.find(x => x.sig === active) || asignadas[0];
  const dest = destinatarioDe(activeInst);
  const msgs = threads[active] || [];

  return (
    <div className="section">
      <div className="section__label">Mensajería con las instituciones asignadas</div>
      <p className="section__hint">Un hilo por institución: escribes a la institución y lo ven todos sus usuarios; el punto focal o responsable queda notificado.</p>

      <div className="mg">
        <aside className="mg-rail">
          {asignadas.map(x => {
            const arr = threads[x.sig] || [];
            const last = arr[arr.length - 1];
            const u = unread[x.sig] || 0;
            return (
              <button type="button" key={x.sig} className={`mg-conv${active === x.sig ? ' is-active' : ''}`} onClick={() => seleccionar(x.sig)}>
                <span className="mg-sig">{x.sig}</span>
                <span className="mg-conv__main">
                  <span className="mg-conv__top"><strong>{x.sig}</strong>{u > 0 && <span className="mg-conv__badge">{u}</span>}</span>
                  <small>{last ? (last.from === 'out' ? 'Tú: ' : '') + last.text : 'Sin mensajes'}</small>
                </span>
              </button>
            );
          })}
        </aside>

        <div className="mg-pane">
          <div className="mg-pane__head">
            <span className="mg-sig">{activeInst.sig}</span>
            <div className="mg-pane__id">
              <strong>{instMetaOf(activeInst.inst) ? instMetaOf(activeInst.inst).nombre : activeInst.inst}</strong>
              <small><I.Users size={11} /> {dest.esFocal ? 'Punto focal' : 'Responsable'}: {dest.nombre}</small>
            </div>
            <span className="mg-pane__tag mono">{d.id}</span>
          </div>

          <div className="mg-thread">
            {msgs.length === 0 && <div className="pa-muted pa-muted--pad">No hay mensajes con {activeInst.sig} todavía.</div>}
            {msgs.map((m, k) => (
              <div className={`mg-msg mg-msg--${m.from}`} key={k}>
                {m.from === 'in' && <span className="mg-msg__av">{iniciales(m.author)}</span>}
                <div className="mg-msg__bubble">
                  <div className="mg-msg__head"><strong>{m.author}</strong><span>{m.date}</span></div>
                  <p>{m.text}</p>
                  {(m.files || []).map((f, fi) => <span className="pa-file" key={fi}><I.FileText size={13} /> {f.name} <small>· {f.size}</small></span>)}
                </div>
                {m.from === 'out' && <span className="mg-msg__av mg-msg__av--out">CB</span>}
              </div>
            ))}
          </div>

          <div className="mg-composer">
            <div className="mg-composer__to"><I.Send size={12} /> Para: <strong>{activeInst.sig}</strong> — llega a todos sus usuarios</div>
            <textarea value={draft} onChange={e => setDraft(e.target.value)} rows={2} placeholder={`Escribir a ${activeInst.sig}…`} />
            <div className="mg-composer__foot">
              <button type="button" className="btn btn--ghost btn--sm"><I.FileText size={14} /> Adjuntar</button>
              <button type="button" className="btn btn--primary btn--sm" disabled={!draft.trim()} onClick={enviar}><I.Send size={14} /> Enviar</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ---------- Resultados ----------
function TabResultados({ data, update, removeInforme, addInforme }) {
  const I = window.Icons;
  const [eRes, setERes] = useStateD(false);
  const [eDocs, setEDocs] = useStateD(false);
  const [eJus, setEJus] = useStateD(false);
  const [docTipo, setDocTipo] = useStateD('Informe');
  const [docFile, setDocFile] = useStateD(null);
  const agregarDoc = () => { if (!docFile) return; addInforme({ name: docFile, tipo: docTipo, size: '—' }); setDocFile(null); setDocTipo('Informe'); };
  return (
    <>
      <SectionCard label="Resultados e impacto" editing={eRes} onEdit={() => setERes(true)} onDone={() => setERes(false)}>
        {eRes
          ? <textarea className="nip-textarea" rows="4" value={data.resultados} onChange={e => update('resultados', e.target.value)} />
          : <div className="prose">{data.resultados}</div>}
      </SectionCard>

      <SectionCard label={`Informes y documentos de resultado — ${data.informes.length}`} editing={eDocs} onEdit={() => setEDocs(true)} onDone={() => setEDocs(false)}>
        <p className="section__hint section__hint--tight">Informes, anexos y resoluciones que respaldan el resultado de la recomendación.</p>
        {eDocs && (
          <div className="res-doc-form">
            <label className="pa-fld pa-fld--sm">
              <span className="pa-lbl">Tipo de documento</span>
              <select className="nip-select" value={docTipo} onChange={e => setDocTipo(e.target.value)}>
                {TIPOS_INFORME.map(t => <option key={t} value={t}>{t}</option>)}
              </select>
            </label>
            <label className="res-doc-drop">
              <I.Upload size={15} />
              <span>{docFile ? docFile : 'Seleccionar archivo (PDF, DOCX, XLSX, imagen)'}</span>
              <input type="file" hidden onChange={e => setDocFile(e.target.files && e.target.files[0] ? e.target.files[0].name : null)} />
            </label>
            <button type="button" className="btn btn--primary btn--sm" disabled={!docFile} onClick={agregarDoc}><I.Plus size={13} /> Agregar</button>
          </div>
        )}
        {data.informes.length === 0 ? (
          <div className="pa-muted pa-muted--pad">Todavía no se cargaron informes.</div>
        ) : (
          <ul className="res-docs">
            {data.informes.map((f, i) => (
              <li className="res-doc" key={i}>
                <span className="res-doc__ic"><I.FileText size={16} /></span>
                <div className="res-doc__main">
                  <strong className="res-doc__name">{f.name}</strong>
                  <div className="res-doc__meta">
                    <span className="res-doc__tipo">{f.tipo}</span>
                    <span>{fmtFecha(f.fecha)}{f.size && f.size !== '—' ? ` · ${f.size}` : ''}</span>
                  </div>
                </div>
                {eDocs
                  ? <button type="button" className="pa-iconbtn pa-iconbtn--danger" aria-label="Quitar informe" title="Quitar" onClick={() => removeInforme(i)}><I.XCircle size={14} /></button>
                  : <button type="button" className="pa-iconbtn" aria-label="Descargar informe" title="Descargar"><I.Download size={14} /></button>}
              </li>
            ))}
          </ul>
        )}
      </SectionCard>

      <SectionCard label="Justificación del estado actual" editing={eJus} onEdit={() => setEJus(true)} onDone={() => setEJus(false)}>
        {eJus
          ? <textarea className="nip-textarea" rows="4" value={data.justificacion} onChange={e => update('justificacion', e.target.value)} />
          : (
            <>
              <div className="prose">{data.justificacion}</div>
              <div className="evidence-meta">
                Última edición por <strong>M. Acosta (CGR)</strong> · 14 may 2026 ·
                <button type="button" className="link"> Ver historial de cambios</button>
              </div>
            </>
          )}
      </SectionCard>
    </>
  );
}

Object.assign(window, { DetalleScreen });