// ─── Reestructuración (2026-09-08) ─────────────────────────────────────────────
// Corrige errores de captura de Compras: reasigna a qué proyecto pertenece una
// OC, o a qué clave de insumo pertenece una de sus partidas, dejando un motivo
// obligatorio con historial. Acceso restringido por defecto a Director de
// Proyectos + Administrador (ver api/config.php ROLE_ACCESS / api/permisos.php).
// No crea OCs ni toca montos/proveedor/fecha/pagos — solo estas 2 reasignaciones.

// ── Sub-modal: cambiar el proyecto de la OC completa ──────────────────────────
function CambiarProyectoModal({ open, onClose, oc, proyectos, onSaved }) {
  const [proyectoidNuevo, setProyectoidNuevo] = useState('');
  const [motivo, setMotivo] = useState('');
  const [saving, setSaving] = useState(false);

  useEffect(() => {
    if (open) { setProyectoidNuevo(''); setMotivo(''); }
  }, [open, oc]);

  async function guardar() {
    if (!proyectoidNuevo) { toast.error('Selecciona el proyecto nuevo'); return; }
    if (motivo.trim().length < 10) { toast.error('Escribe un motivo de al menos 10 caracteres'); return; }
    const nombreNuevo = (proyectos || []).find(p => p.id === Number(proyectoidNuevo))?.nombre || '';
    if (!window.confirm(`¿Mover la OC #${fmtFolio(oc.folio)} de "${oc.proyecto_nombre}" a "${nombreNuevo}"?\n\nEsto cambia a qué presupuesto se le suma este gasto.`)) return;
    setSaving(true);
    try {
      await apiFetch(`reclasificacion.php?action=proyecto&ocid=${oc.id}`, 'PUT', {
        proyectoid_nuevo: Number(proyectoidNuevo), motivo: motivo.trim(),
      });
      toast.success('Proyecto reasignado');
      onSaved();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  if (!oc) return null;
  return (
    <RgModal open={open} onClose={onClose} title="Cambiar proyecto de la OC" width={480}
      footer={<>
        <button className="rg-btn" onClick={onClose}>Cancelar</button>
        <button className="rg-btn primary" disabled={saving} onClick={guardar}>{saving ? 'Guardando…' : 'Confirmar cambio'}</button>
      </>}>
      <div className="rg-field"><label>Proyecto actual</label>
        <input className="rg-input" disabled value={oc.proyecto_nombre || '—'}/>
      </div>
      <div className="rg-field"><label>Proyecto nuevo</label>
        <select className="rg-select" value={proyectoidNuevo} onChange={e => setProyectoidNuevo(e.target.value)}>
          <option value="">Selecciona…</option>
          {(proyectos || []).filter(p => p.id !== oc.proyectoid).map(p => (
            <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>
          ))}
        </select>
      </div>
      <div className="rg-field"><label>Motivo (obligatorio, mín. 10 caracteres)</label>
        <textarea className="rg-input" rows="3" value={motivo} onChange={e => setMotivo(e.target.value)}
          placeholder="Ej: Compras asignó esta OC al proyecto equivocado; corresponde a…"/>
      </div>
    </RgModal>
  );
}

// ── Sub-modal: cambiar la clave de UNA partida (acotado a la matriz vigente) ──
function CambiarClaveModal({ open, onClose, partida, grupo, onSaved, preseleccion, motivoInicial }) {
  const [q, setQ] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [seleccion, setSeleccion] = useState(null);
  const [motivo, setMotivo] = useState('');
  const [saving, setSaving] = useState(false);
  const dq = useDebounce(q, 300);

  // preseleccion/motivoInicial: los usa el detector de inconsistencias para abrir
  // el modal con la clave sugerida ya elegida y el motivo redactado (editables).
  useEffect(() => {
    if (open) { setQ(''); setSeleccion(preseleccion || null); setMotivo(motivoInicial || ''); }
  }, [open, partida]);

  useEffect(() => {
    if (!open) return;
    let cancel = false;
    setLoading(true);
    apiFetch('insumos.php', 'GET', null, { q: dq, activo: '1', limit: 50, grupo: grupo || '' })
      .then(d => { if (!cancel) setResults(d?.rows || []); })
      .catch(() => { if (!cancel) setResults([]); })
      .finally(() => { if (!cancel) setLoading(false); });
    return () => { cancel = true; };
  }, [open, dq, grupo]);

  async function guardar() {
    if (!seleccion) { toast.error('Selecciona la clave nueva'); return; }
    if (motivo.trim().length < 10) { toast.error('Escribe un motivo de al menos 10 caracteres'); return; }
    if (!window.confirm(`¿Cambiar la clave de esta partida de "${partida.clave_vigente || partida.claveinsumo}" a "${seleccion.clave}"?\n\nEsto mueve el gasto de esta partida a otro presupuesto.`)) return;
    setSaving(true);
    try {
      await apiFetch(`reclasificacion.php?action=clave&partidaid=${partida.id}`, 'PUT', {
        insumoid_nuevo: seleccion.id, motivo: motivo.trim(),
      });
      toast.success('Clave reasignada');
      onSaved();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  if (!partida) return null;
  return (
    <RgModal open={open} onClose={onClose} title="Cambiar clave de la partida" width={560}
      footer={<>
        <button className="rg-btn" onClick={onClose}>Cancelar</button>
        <button className="rg-btn primary" disabled={saving || !seleccion} onClick={guardar}>{saving ? 'Guardando…' : 'Confirmar cambio'}</button>
      </>}>
      <div style={{ fontSize: 12.5, marginBottom: 10, color: 'var(--rg-muted)' }}>
        Clave actual: <strong className="rg-mono" style={{ color: 'var(--rg-ink)' }}>{partida.clave_vigente || partida.claveinsumo}</strong> — {partida.insumo_descripcion_vigente || partida.descripcion}
      </div>
      <div className="rg-field"><label>Buscar clave nueva (solo la matriz de {grupo || 'este proyecto'})</label>
        <input className="rg-input" placeholder="Clave o descripción…" value={q} onChange={e => setQ(e.target.value)}/>
      </div>
      <div style={{ maxHeight: 220, overflowY: 'auto', border: '1px solid var(--rg-line-2)', borderRadius: 8, margin: '8px 0' }}>
        {loading && <div style={{ padding: 12, fontSize: 12, color: 'var(--rg-muted)' }}>Buscando…</div>}
        {!loading && results.length === 0 && (
          <div style={{ padding: 12, fontSize: 12, color: 'var(--rg-muted)' }}>Sin resultados en la matriz de {grupo}.</div>
        )}
        {results.map(r => (
          <div key={r.id} onClick={() => setSeleccion(r)}
            style={{
              padding: '8px 12px', cursor: 'pointer', borderBottom: '1px solid var(--rg-line-2)',
              background: seleccion?.id === r.id ? 'var(--rg-cream)' : 'transparent',
            }}>
            <span className="rg-mono" style={{ fontWeight: 700, marginRight: 8 }}>{r.clave}</span>
            <span style={{ fontSize: 12.5 }}>{r.descripcion}</span>
          </div>
        ))}
      </div>
      <div className="rg-field"><label>Motivo (obligatorio, mín. 10 caracteres)</label>
        <textarea className="rg-input" rows="3" value={motivo} onChange={e => setMotivo(e.target.value)}
          placeholder="Ej: Compras codificó esta partida con la clave equivocada; corresponde a…"/>
      </div>
    </RgModal>
  );
}

// ── Modal de detalle de una OC: header + partidas + historial ────────────────
function ReclasificarDetalleModal({ open, onClose, ocid, proyectos, onChanged }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [cambiarProyecto, setCambiarProyecto] = useState(false);
  const [claveModal, setClaveModal] = useState(null);

  function load() {
    if (!ocid) return;
    setLoading(true);
    setError('');
    apiFetch('reclasificacion.php', 'GET', null, { ocid })
      .then(d => setData(d))
      .catch(e => { setError(e.message || 'No se pudo cargar la OC.'); setData(null); })
      .finally(() => setLoading(false));
  }
  useEffect(() => { if (open) load(); }, [open, ocid]);

  // Un cambio guardado aquí (proyecto o clave) también debe refrescar la tabla
  // de búsqueda de la vista principal — antes se quedaba con datos viejos hasta
  // cambiar de página o recargar el navegador (hallazgo de revisión 2026-09-09).
  function onSavedChange() {
    load();
    if (onChanged) onChanged();
  }

  const oc        = data?.oc || null;
  const partidas  = data?.partidas || [];
  const historial = data?.historial || [];

  return (
    <RgModal open={open} onClose={onClose} width={780}
      title={oc ? `OC #${fmtFolio(oc.folio)}` : 'Detalle de la OC'}>
      {loading && <div style={{ padding: 20, textAlign: 'center', color: 'var(--rg-muted)' }}>Cargando…</div>}
      {!loading && error && (
        <div style={{ padding: 20, textAlign: 'center' }}>
          <div style={{ color: 'var(--rg-flag-over)', fontSize: 13, marginBottom: 10 }}>{error}</div>
          <button className="rg-btn" onClick={load}>Reintentar</button>
        </div>
      )}
      {!loading && !error && oc && (
        <>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginBottom: 16, paddingBottom: 14, borderBottom: '1px solid var(--rg-line)' }}>
            <div style={{ fontSize: 12.5 }}>
              <div>Proyecto actual: <strong>{oc.proyecto_nombre || '—'}</strong> <span style={{ color: 'var(--rg-muted)' }}>({oc.catalogo_grupo})</span></div>
              <div style={{ color: 'var(--rg-muted)', marginTop: 3 }}>
                {oc.proveedor_nombre || '—'} · {fmtFecha(oc.fecha)} · <span className="rg-mono">${fmtMoney(oc.total)} {oc.moneda}</span>
              </div>
            </div>
            <button className="rg-btn" onClick={() => setCambiarProyecto(true)}>Cambiar proyecto</button>
          </div>

          <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--rg-muted)', marginBottom: 8 }}>
            Partidas ({partidas.length})
          </div>
          <div style={{ border: '1px solid var(--rg-line-2)', borderRadius: 8, marginBottom: 20, overflow: 'hidden' }}>
            {partidas.map(p => (
              <div key={p.id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px', borderBottom: '1px solid var(--rg-line-2)' }}>
                <span className="rg-mono" style={{ fontWeight: 700, minWidth: 90 }}>{p.clave_vigente || p.claveinsumo}</span>
                <span style={{ flex: 1, minWidth: 0, fontSize: 12.5 }} title={p.insumo_descripcion_vigente || p.descripcion}>
                  {p.insumo_descripcion_vigente || p.descripcion}
                </span>
                <span className="rg-mono" style={{ fontSize: 12, minWidth: 90, textAlign: 'right' }}>${fmtMoney(p.importe)}</span>
                <button className="rg-btn" style={{ padding: '3px 10px', fontSize: 11 }} onClick={() => setClaveModal(p)}>Cambiar clave</button>
              </div>
            ))}
            {partidas.length === 0 && <div style={{ padding: 14, fontSize: 12, color: 'var(--rg-muted)' }}>Sin partidas.</div>}
          </div>

          <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--rg-muted)', marginBottom: 8 }}>
            Historial de reclasificaciones
          </div>
          {historial.length === 0 ? (
            <div style={{ fontSize: 12, color: 'var(--rg-muted)' }}>Esta OC no tiene cambios registrados todavía.</div>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {historial.map(h => (
                <div key={h.id} style={{ background: 'var(--rg-cream)', borderRadius: 8, padding: '10px 12px' }}>
                  <div style={{ fontSize: 12.5 }}>
                    <strong>{h.tipo === 'proyecto' ? 'Proyecto' : 'Clave'}:</strong>{' '}
                    <span className="rg-mono">{h.valor_anterior_txt || h.valor_anterior}</span>
                    {' → '}
                    <span className="rg-mono" style={{ fontWeight: 700 }}>{h.valor_nuevo_txt || h.valor_nuevo}</span>
                  </div>
                  <div style={{ fontSize: 12, color: 'var(--rg-ink)', marginTop: 4 }}>{h.motivo}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--rg-muted)', marginTop: 4 }}>
                    {h.usuario_nombre || 'Usuario eliminado'} · {fmtFecha(h.created_at)}
                  </div>
                </div>
              ))}
            </div>
          )}
        </>
      )}

      <CambiarProyectoModal open={cambiarProyecto} onClose={() => setCambiarProyecto(false)} oc={oc} proyectos={proyectos}
        onSaved={() => { setCambiarProyecto(false); onSavedChange(); }}/>
      <CambiarClaveModal open={!!claveModal} onClose={() => setClaveModal(null)} partida={claveModal} grupo={oc?.catalogo_grupo}
        onSaved={() => { setClaveModal(null); onSavedChange(); }}/>
    </RgModal>
  );
}

// ── Modal: aplicar varias correcciones de una vez ────────────────────────────
function AplicarLoteModal({ open, onClose, items, onDone }) {
  const [motivo, setMotivo] = useState('');
  const [saving, setSaving] = useState(false);
  useEffect(() => { if (open) setMotivo(''); }, [open]);

  async function guardar() {
    if (motivo.trim().length < 10) { toast.error('Escribe un motivo de al menos 10 caracteres'); return; }
    if (!window.confirm(`¿Reclasificar ${items.length} partida(s)?\n\nEsto mueve ese gasto a otras claves de presupuesto. Cada cambio queda en el historial de su OC.`)) return;
    setSaving(true);
    try {
      const r = await apiFetch('reclasificacion.php?action=clave_lote', 'PUT', {
        motivo: motivo.trim(),
        items: items.map(i => ({ partidaid: i.partidaid, insumoid_nuevo: i.insumoid })),
      });
      const fallidas = (r.resultados || []).filter(x => !x.ok);
      if (fallidas.length) toast.error(`${r.aplicadas} aplicada(s) · ${fallidas.length} con error: ${fallidas[0].error}`);
      else toast.success(`${r.aplicadas} partida(s) reclasificadas`);
      onDone();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  return (
    <RgModal open={open} onClose={onClose} title={`Aplicar ${items.length} corrección(es)`} width={620}
      footer={<>
        <button className="rg-btn" onClick={onClose}>Cancelar</button>
        <button className="rg-btn primary" disabled={saving} onClick={guardar}>{saving ? 'Aplicando…' : 'Confirmar'}</button>
      </>}>
      <div style={{ maxHeight: 240, overflowY: 'auto', border: '1px solid var(--rg-line-2)', borderRadius: 8, marginBottom: 12 }}>
        {items.map(i => (
          <div key={i.partidaid} style={{ display: 'flex', gap: 8, alignItems: 'center', padding: '7px 11px', borderBottom: '1px solid var(--rg-line-2)', fontSize: 12 }}>
            <span className="rg-mono" style={{ minWidth: 68 }}>OC {fmtFolio(i.folio)}</span>
            <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{i.descripcion}</span>
            <span className="rg-mono" style={{ color: 'var(--rg-muted)' }}>{i.clave_actual || '(sin clave)'}</span>
            <span>→</span>
            <span className="rg-mono" style={{ fontWeight: 700 }}>{i.clave}</span>
          </div>
        ))}
      </div>
      <div className="rg-field"><label>Motivo para todas (obligatorio, mín. 10 caracteres)</label>
        <textarea className="rg-input" rows="3" value={motivo} onChange={e => setMotivo(e.target.value)}
          placeholder="Ej: Revisión de claves 30-sep: Compras capturó claves fuera de la matriz del proyecto; se corrigen a la clave equivalente."/>
      </div>
      <div style={{ fontSize: 11.5, color: 'var(--rg-muted)' }}>
        Cada partida se valida por separado contra la matriz del proyecto y guarda su propio registro en el historial.
      </div>
    </RgModal>
  );
}

// ── Revisión de claves: detecta partidas mal clasificadas y propone la correcta ─
// Dos casos, los mismos que aparecieron al conciliar Torreón y Rancho El Paraguas:
// partidas SIN clave de insumo (la clave quedó solo como texto y no cuenta en
// ningún reporte) y partidas con una clave que NO está en la matriz del proyecto.
function InconsistenciasPanel({ proyectos }) {
  const [proyectoid,  setProyectoid]  = useState('');
  const [soloPagadas, setSoloPagadas] = useState(false);
  const [data,    setData]    = useState(null);
  const [loading, setLoading] = useState(false);
  const [error,   setError]   = useState('');
  const [sel,     setSel]     = useState({});
  const [ia,      setIa]      = useState({});
  const [iaLoading, setIaLoading] = useState(false);
  const [lote,       setLote]       = useState(null);
  const [claveModal, setClaveModal] = useState(null);

  const rows    = data?.rows || [];
  const resumen = data?.resumen || null;
  const proyecto = (proyectos || []).find(p => String(p.id) === String(proyectoid));
  const sugDe = r => ia[r.partidaid] || r.sugerencia || null;

  function analizar(pid) {
    const id = pid || proyectoid;
    if (!id) { toast.error('Selecciona un proyecto'); return; }
    setLoading(true); setError(''); setSel({}); setIa({});
    apiFetch('reclasificacion.php', 'GET', null, { action: 'inconsistencias', proyectoid: id, solo_pagadas: soloPagadas ? 1 : 0 })
      .then(d => setData(d))
      .catch(e => { setError(e.message || 'No se pudo analizar el proyecto.'); setData(null); })
      .finally(() => setLoading(false));
  }

  const seleccionadas = rows.filter(r => sel[r.partidaid]);
  const aplicables = seleccionadas.filter(r => sugDe(r)).map(r => ({
    partidaid: r.partidaid, folio: r.folio, descripcion: r.descripcion,
    clave_actual: r.clave_actual, clave: sugDe(r).clave, insumoid: sugDe(r).insumoid,
  }));

  async function sugerirIA() {
    const ids = seleccionadas.map(r => r.partidaid).slice(0, 60);
    if (!ids.length) { toast.error('Selecciona al menos una partida'); return; }
    setIaLoading(true);
    try {
      const r = await apiFetch('reclasificacion.php?action=sugerir_ia', 'POST', { proyectoid: Number(proyectoid), partidaids: ids });
      const map = {};
      (r.sugerencias || []).forEach(s => { map[s.partidaid] = s; });
      setIa(prev => ({ ...prev, ...map }));
      toast.success(`La IA revisó ${r.analizadas} partida(s) y propuso ${(r.sugerencias || []).length}`
        + (r.descartadas ? ` (${r.descartadas} descartada(s) por no existir en la matriz)` : ''));
    } catch (e) { toast.error(e.message); }
    finally { setIaLoading(false); }
  }

  const tipoBadge = t => t === 'sin_clave'
    ? <span className="rg-pill" style={{ background: 'rgba(178,34,34,0.10)', color: 'var(--rg-flag-over)' }}>Sin clave</span>
    : <span className="rg-pill" style={{ background: 'rgba(212,160,23,0.14)', color: '#8a6d1f' }}>Fuera de matriz</span>;

  return (
    <>
      <div className="rg-card" style={{ padding: '14px 18px', marginBottom: 16, fontSize: 12.5 }}>
        Busca las partidas mal clasificadas de un proyecto: las que quedaron <strong>sin clave de insumo</strong> (no cuentan
        en ningún reporte) y las que usan una <strong>clave fuera de la matriz</strong> de Contraloría de ese proyecto.
        Propone la clave correcta —con el análisis de IA o por parecido de descripción— y la aplica con un motivo,
        igual que cualquier otro cambio del módulo. La IA solo sugiere: toda clave se valida contra la matriz y el cambio lo confirmas tú.
      </div>

      <div className="rg-filter-bar" style={{ gridTemplateColumns: '320px auto auto 1fr' }}>
        <div className="rg-field"><label>Proyecto</label>
          <select className="rg-select" value={proyectoid} onChange={e => { setProyectoid(e.target.value); setData(null); }}>
            <option value="">Selecciona…</option>
            {(proyectos || []).map(p => <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>)}
          </select>
        </div>
        <div className="rg-field"><label>&nbsp;</label>
          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, height: 34 }}>
            <input type="checkbox" checked={soloPagadas} onChange={e => setSoloPagadas(e.target.checked)}/>
            Solo OCs pagadas
          </label>
        </div>
        <div className="rg-field"><label>&nbsp;</label>
          <button className="rg-btn primary" disabled={!proyectoid || loading} onClick={() => analizar()}>
            {loading ? 'Analizando…' : 'Analizar proyecto'}
          </button>
        </div>
      </div>

      {error && (
        <div className="rg-card" style={{ padding: 18, textAlign: 'center' }}>
          <div style={{ color: 'var(--rg-flag-over)', fontSize: 13, marginBottom: 10 }}>{error}</div>
          <button className="rg-btn" onClick={() => analizar()}>Reintentar</button>
        </div>
      )}

      {resumen && (
        <>
          <div className="rg-kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', marginBottom: 14 }}>
            <div className="rg-kpi">
              <div className="label">Hallazgos</div>
              <div className="value" style={{ fontSize: 26 }}>{resumen.total}</div>
              <div className="delta"><span className="pill">matriz {data.grupo} · {data.matriz_claves} claves</span></div>
            </div>
            <div className="rg-kpi">
              <div className="label">Fuera de la matriz</div>
              <div className="value" style={{ fontSize: 22, color: '#8a6d1f' }}>{resumen.fuera_matriz}</div>
              <div className="delta"><span className="pill" title="En pesos. Lo que está en otra moneda se convierte al tipo de cambio de Configuración.">${fmtMoney(resumen.importe_fuera_matriz)}</span></div>
            </div>
            <div className="rg-kpi">
              <div className="label">Sin clave de insumo</div>
              <div className="value" style={{ fontSize: 22, color: 'var(--rg-flag-over)' }}>{resumen.sin_clave}</div>
              <div className="delta"><span className="pill" title="En pesos. Lo que está en otra moneda se convierte al tipo de cambio de Configuración.">${fmtMoney(resumen.importe_sin_clave)}</span></div>
            </div>
            <div className="rg-kpi">
              <div className="label">Seleccionadas</div>
              <div className="value" style={{ fontSize: 26 }}>{seleccionadas.length}</div>
              <div className="delta">
                <span className="pill">{aplicables.length} con clave propuesta</span>
              </div>
            </div>
          </div>

          <div className="rg-card">
            <div className="rg-card-header">
              <div>
                <h3>Partidas a revisar</h3>
                <div className="sub">
                  {resumen.anticipos_caja_omitidos > 0
                    ? `${resumen.anticipos_caja_omitidos} anticipo(s) de caja chica omitidos: por diseño no llevan clave`
                    : 'Marca las que quieras corregir'}
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button className="rg-btn" disabled={iaLoading || !seleccionadas.length} onClick={sugerirIA}>
                  {iaLoading ? 'Consultando a la IA…' : `Analizar con IA (${seleccionadas.length})`}
                </button>
                <button className="rg-btn primary" disabled={!aplicables.length} onClick={() => setLote(aplicables)}>
                  Aplicar {aplicables.length || ''}
                </button>
              </div>
            </div>
            <div style={{ overflowX: 'auto' }}>
              <table className="rg-table" style={{ width: '100%', minWidth: 980 }}>
                <thead>
                  <tr>
                    <th style={{ width: 30 }}>
                      <input type="checkbox"
                        checked={rows.length > 0 && rows.every(r => sel[r.partidaid])}
                        onChange={e => setSel(e.target.checked ? Object.fromEntries(rows.map(r => [r.partidaid, true])) : {})}/>
                    </th>
                    <th>OC</th><th>Partida</th><th style={{ textAlign: 'right' }}>Importe</th>
                    <th>Tipo</th><th>Clave actual</th><th>Clave propuesta</th><th style={{ textAlign: 'right' }}>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.length === 0 && (
                    <tr><td colSpan="8" style={{ textAlign: 'center', padding: 22, color: 'var(--rg-muted)' }}>
                      Sin inconsistencias en este proyecto. Todas las partidas tienen una clave de la matriz.
                    </td></tr>
                  )}
                  {rows.map(r => {
                    const s = sugDe(r);
                    return (
                      <tr key={r.partidaid} style={{ background: sel[r.partidaid] ? 'var(--rg-cream)' : undefined }}>
                        <td>
                          <input type="checkbox" checked={!!sel[r.partidaid]}
                            onChange={() => setSel(p => ({ ...p, [r.partidaid]: !p[r.partidaid] }))}/>
                        </td>
                        <td className="rg-mono" style={{ whiteSpace: 'nowrap' }}>
                          {fmtFolio(r.folio)}
                          <div style={{ fontSize: 10, color: 'var(--rg-muted)' }}>{fmtFecha(r.fecha)} · {r.statuspago === 'PAGADO' ? 'pagada' : r.statuspago.toLowerCase()}</div>
                        </td>
                        <td style={{ maxWidth: 300 }}>
                          <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} title={r.descripcion}>{r.descripcion}</div>
                          <div style={{ fontSize: 10.5, color: 'var(--rg-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                            {r.proveedor_nombre || '—'}{r.viatico ? ' · viático' : ''}
                          </div>
                        </td>
                        <td className="rg-mono" style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>${fmtMoney(r.importe)} {r.moneda !== 'MXN' ? r.moneda : ''}</td>
                        <td>{tipoBadge(r.tipo)}</td>
                        <td className="rg-mono" style={{ fontSize: 11.5 }}>
                          {r.clave_actual || <span style={{ color: 'var(--rg-muted)' }}>(sin clave)</span>}
                          {r.insumo_actual && <div style={{ fontSize: 10.5, color: 'var(--rg-muted)', fontFamily: 'var(--rg-font)' }}>{r.insumo_actual}</div>}
                        </td>
                        <td>
                          {!s && <span style={{ fontSize: 11.5, color: 'var(--rg-muted)' }}>Sin propuesta — elige la clave a mano</span>}
                          {s && (
                            <div>
                              <span className="rg-mono" style={{ fontWeight: 700 }}>{s.clave}</span>
                              <span style={{ fontSize: 11.5 }}> {s.descripcion}</span>
                              <div style={{ fontSize: 10.5, color: 'var(--rg-muted)', display: 'flex', alignItems: 'center', gap: 5, flexWrap: 'wrap' }}>
                                <span className="rg-pill" style={{ background: s.origen === 'ia' ? 'rgba(45,106,68,0.14)' : 'var(--rg-cream)', color: s.origen === 'ia' ? 'var(--rg-green-700)' : 'var(--rg-muted)' }}>
                                  {s.origen === 'ia' ? 'IA' : s.origen === 'clave' ? 'por clave' : 'por descripción'}
                                </span>
                                <span>confianza {s.confianza}%</span>
                                {s.razon && <span title={s.razon} style={{ cursor: 'help' }}>· {s.razon.slice(0, 46)}{s.razon.length > 46 ? '…' : ''}</span>}
                                {r.aviso && <HelpHint text={r.aviso} style={{ color: '#b3261e', opacity: 1 }}/>}
                              </div>
                            </div>
                          )}
                        </td>
                        <td style={{ textAlign: 'right' }}>
                          <button className="rg-btn" style={{ padding: '3px 10px', fontSize: 11 }}
                            onClick={() => setClaveModal(r)}>Elegir clave</button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}

      <AplicarLoteModal open={!!lote} onClose={() => setLote(null)} items={lote || []}
        onDone={() => { setLote(null); analizar(); }}/>
      <CambiarClaveModal
        open={!!claveModal} onClose={() => setClaveModal(null)}
        partida={claveModal ? { id: claveModal.partidaid, claveinsumo: claveModal.clave_actual, clave_vigente: claveModal.clave_actual, descripcion: claveModal.descripcion, insumo_descripcion_vigente: claveModal.insumo_actual } : null}
        grupo={data?.grupo}
        preseleccion={claveModal && sugDe(claveModal) ? { id: sugDe(claveModal).insumoid, clave: sugDe(claveModal).clave, descripcion: sugDe(claveModal).descripcion } : null}
        motivoInicial={claveModal ? `Revisión de claves de ${proyecto?.nombre || 'el proyecto'}: la partida ${claveModal.tipo === 'sin_clave' ? 'no tenía clave de insumo' : 'usaba una clave fuera de la matriz'}; corresponde a ` : ''}
        onSaved={() => { setClaveModal(null); analizar(); }}/>
    </>
  );
}

// ── Modal: elegir la clave general de caja chica del grupo ───────────────────
function ClaveGeneralModal({ open, onClose, grupo, actual, onSaved }) {
  const [q, setQ] = useState('');
  const [results, setResults] = useState([]);
  const [sel, setSel] = useState(null);
  const [saving, setSaving] = useState(false);
  const dq = useDebounce(q, 300);

  useEffect(() => {
    if (open) { setQ(''); setSel(actual ? { id: actual.insumoid, clave: actual.clave, descripcion: actual.descripcion } : null); }
  }, [open, actual]);

  useEffect(() => {
    if (!open) return;
    let cancel = false;
    apiFetch('insumos.php', 'GET', null, { q: dq, activo: '1', limit: 50, grupo: grupo || '' })
      .then(d => { if (!cancel) setResults(d?.rows || []); })
      .catch(() => { if (!cancel) setResults([]); });
    return () => { cancel = true; };
  }, [open, dq, grupo]);

  async function guardar() {
    if (!sel) { toast.error('Selecciona una clave'); return; }
    setSaving(true);
    try {
      await apiFetch('reclasificacion.php?action=caja_chica_clave', 'PUT', { grupo, insumoid: sel.id });
      toast.success(`Clave general del grupo ${grupo}: ${sel.clave}`);
      onSaved();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  return (
    <RgModal open={open} onClose={onClose} title={`Clave general de caja chica · grupo ${grupo || ''}`} width={560}
      footer={<>
        <button className="rg-btn" onClick={onClose}>Cancelar</button>
        <button className="rg-btn primary" disabled={saving || !sel} onClick={guardar}>{saving ? 'Guardando…' : 'Guardar clave general'}</button>
      </>}>
      <div style={{ fontSize: 12.5, color: 'var(--rg-muted)', marginBottom: 10 }}>
        Es la clave a la que se contabilizan los anticipos de caja chica cuando su comprobación no permite
        deducir una. Se guarda para todo el grupo <strong>{grupo}</strong>, así que aplica a todos sus proyectos.
      </div>
      <div className="rg-field"><label>Buscar en la matriz de {grupo}</label>
        <input className="rg-input" placeholder="Clave o descripción…" value={q} onChange={e => setQ(e.target.value)}/>
      </div>
      <div style={{ maxHeight: 240, overflowY: 'auto', border: '1px solid var(--rg-line-2)', borderRadius: 8, margin: '8px 0' }}>
        {results.length === 0 && <div style={{ padding: 12, fontSize: 12, color: 'var(--rg-muted)' }}>Sin resultados.</div>}
        {results.map(r => (
          <div key={r.id} onClick={() => setSel(r)}
            style={{ padding: '8px 12px', cursor: 'pointer', borderBottom: '1px solid var(--rg-line-2)',
                     background: sel?.id === r.id ? 'var(--rg-cream)' : 'transparent' }}>
            <span className="rg-mono" style={{ fontWeight: 700, marginRight: 8 }}>{r.clave}</span>
            <span style={{ fontSize: 12.5 }}>{r.descripcion}</span>
          </div>
        ))}
      </div>
    </RgModal>
  );
}

// ── Cajas chicas: asignarles clave para que su gasto se contabilice ──────────
// Un anticipo de caja chica se captura sin clave de insumo, así que hoy no entra
// a ningún reporte por clave ni al costo acumulado. La clasificación real está en
// su comprobación (que suele repartirse en varias claves); como una partida solo
// admite una, se propone la clave DOMINANTE de esa comprobación y, cuando no hay,
// la clave general del grupo.
function CajasChicasPanel({ proyectos }) {
  const [proyectoid, setProyectoid] = useState('');
  const [data,    setData]    = useState(null);
  const [loading, setLoading] = useState(false);
  const [error,   setError]   = useState('');
  const [sel,     setSel]     = useState({});
  const [lote,       setLote]       = useState(null);
  const [claveGen,   setClaveGen]   = useState(false);
  const [claveModal, setClaveModal] = useState(null);

  const rows    = data?.rows || [];
  const resumen = data?.resumen || null;
  const general = data?.clave_general || null;

  function cargar(pid) {
    const id = pid || proyectoid;
    if (!id) { toast.error('Selecciona un proyecto'); return; }
    setLoading(true); setError(''); setSel({});
    apiFetch('reclasificacion.php', 'GET', null, { action: 'cajas_chicas', proyectoid: id })
      .then(d => setData(d))
      .catch(e => { setError(e.message || 'No se pudieron cargar las cajas chicas.'); setData(null); })
      .finally(() => setLoading(false));
  }

  // Un anticipo puede tener más de una partida sin clave: todas van a la misma clave.
  const seleccionadas = rows.filter(r => sel[r.ocid] && r.sugerencia && r.partidas.length);
  const items = seleccionadas.flatMap(r => r.partidas.map(p => ({
    partidaid: p.partidaid, folio: r.folio, descripcion: p.descripcion,
    clave_actual: '(anticipo sin clave)', clave: r.sugerencia.clave, insumoid: r.sugerencia.insumoid,
  })));

  return (
    <>
      <div className="rg-card" style={{ padding: '14px 18px', marginBottom: 16, fontSize: 12.5 }}>
        Los anticipos de caja chica se capturan <strong>sin clave de insumo</strong>, así que su gasto no entra a ningún
        reporte por clave ni al costo acumulado de Admin. de Proyecto. Aquí se les asigna una: la
        <strong> clave dominante de su propia comprobación</strong> cuando se puede deducir, o la <strong>clave general</strong> del grupo.
        Es una aproximación consciente: una comprobación suele repartirse en varias claves y una partida solo admite una.
      </div>

      <div className="rg-filter-bar" style={{ gridTemplateColumns: '320px auto 1fr' }}>
        <div className="rg-field"><label>Proyecto</label>
          <select className="rg-select" value={proyectoid} onChange={e => { setProyectoid(e.target.value); setData(null); }}>
            <option value="">Selecciona…</option>
            {(proyectos || []).map(p => <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>)}
          </select>
        </div>
        <div className="rg-field"><label>&nbsp;</label>
          <button className="rg-btn primary" disabled={!proyectoid || loading} onClick={() => cargar()}>
            {loading ? 'Cargando…' : 'Ver cajas chicas'}
          </button>
        </div>
      </div>

      {error && (
        <div className="rg-card" style={{ padding: 18, textAlign: 'center' }}>
          <div style={{ color: 'var(--rg-flag-over)', fontSize: 13, marginBottom: 10 }}>{error}</div>
          <button className="rg-btn" onClick={() => cargar()}>Reintentar</button>
        </div>
      )}

      {resumen && (
        <>
          <div className="rg-card" style={{ padding: '12px 18px', marginBottom: 14, display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
            <div style={{ fontSize: 12.5 }}>
              <strong>Clave general del grupo {data.grupo}:</strong>{' '}
              {general
                ? <><span className="rg-mono" style={{ fontWeight: 700 }}>{general.clave}</span> <span>{general.descripcion}</span></>
                : <span style={{ color: 'var(--rg-flag-over)' }}>sin configurar — elígela para poder asignar los anticipos sin comprobación</span>}
            </div>
            <button className="rg-btn" style={{ marginLeft: 'auto' }} onClick={() => setClaveGen(true)}>
              {general ? 'Cambiar clave general' : 'Elegir clave general'}
            </button>
          </div>

          <div className="rg-kpi-grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', marginBottom: 14 }}>
            <div className="rg-kpi">
              <div className="label">Anticipos</div>
              <div className="value" style={{ fontSize: 26 }}>{resumen.ocs}</div>
              <div className="delta"><span className="pill">${fmtMoney(resumen.importe)}</span></div>
            </div>
            <div className="rg-kpi">
              <div className="label">Partidas sin clave</div>
              <div className="value" style={{ fontSize: 26, color: resumen.pendientes ? 'var(--rg-flag-over)' : 'var(--rg-green-700)' }}>{resumen.pendientes}</div>
              <div className="delta"><span className="pill">por asignar</span></div>
            </div>
            <div className="rg-kpi">
              <div className="label">Con comprobación</div>
              <div className="value" style={{ fontSize: 26 }}>{resumen.con_comprobacion}</div>
              <div className="delta"><span className="pill">de {resumen.ocs}</span></div>
            </div>
            <div className="rg-kpi">
              <div className="label">Seleccionados</div>
              <div className="value" style={{ fontSize: 26 }}>{seleccionadas.length}</div>
              <div className="delta"><span className="pill">{items.length} partida(s)</span></div>
            </div>
          </div>

          <div className="rg-card">
            <div className="rg-card-header">
              <div><h3>Anticipos de caja chica</h3>
                <div className="sub">Cada uno se contabilizará en la clave propuesta; puedes cambiarla antes de aplicar</div>
              </div>
              <button className="rg-btn primary" disabled={!items.length} onClick={() => setLote(items)}>
                Asignar {items.length || ''}
              </button>
            </div>
            <div style={{ overflowX: 'auto' }}>
              <table className="rg-table" style={{ width: '100%', minWidth: 940 }}>
                <thead>
                  <tr>
                    <th style={{ width: 30 }}>
                      <input type="checkbox"
                        checked={rows.length > 0 && rows.every(r => sel[r.ocid])}
                        onChange={e => setSel(e.target.checked ? Object.fromEntries(rows.map(r => [r.ocid, true])) : {})}/>
                    </th>
                    <th>OC</th><th>Caja chica</th><th style={{ textAlign: 'right' }}>Importe</th>
                    <th>Comprobación</th><th>Clave propuesta</th><th style={{ textAlign: 'right' }}>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {rows.length === 0 && (
                    <tr><td colSpan="7" style={{ textAlign: 'center', padding: 22, color: 'var(--rg-muted)' }}>
                      Este proyecto no tiene anticipos de caja chica.
                    </td></tr>
                  )}
                  {rows.map(r => {
                    const comp = r.comprobacion;
                    const yaAsignado = r.partidas.length === 0;
                    return (
                      <tr key={r.ocid} style={{ background: sel[r.ocid] ? 'var(--rg-cream)' : undefined, opacity: yaAsignado ? 0.55 : 1 }}>
                        <td>
                          <input type="checkbox" disabled={yaAsignado || !r.sugerencia} checked={!!sel[r.ocid]}
                            onChange={() => setSel(p => ({ ...p, [r.ocid]: !p[r.ocid] }))}/>
                        </td>
                        <td className="rg-mono" style={{ whiteSpace: 'nowrap' }}>
                          {fmtFolio(r.folio)}
                          <div style={{ fontSize: 10, color: 'var(--rg-muted)' }}>{fmtFecha(r.fecha)} · {r.statuspago === 'PAGADO' ? 'pagada' : r.statuspago.toLowerCase()}</div>
                        </td>
                        <td style={{ fontSize: 12 }}>
                          {r.caja_folio ? <>CAJA-{String(r.caja_folio).padStart(4, '0')}<div style={{ fontSize: 10.5, color: 'var(--rg-muted)' }}>{r.caja_status}</div></>
                            : <span style={{ color: 'var(--rg-muted)' }}>sin solicitud ligada</span>}
                        </td>
                        <td className="rg-mono" style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>${fmtMoney(r.total)}</td>
                        <td style={{ fontSize: 11.5 }}>
                          {comp.n_claves === 0 ? <span style={{ color: 'var(--rg-muted)' }}>sin comprobación</span> : (
                            <span title={comp.claves.map(c => `${c.concepto}${c.en_matriz ? '' : ' (fuera de la matriz)'} · $${c.importe.toFixed(2)}`).join('\n')} style={{ cursor: 'help' }}>
                              {comp.n_claves} clave(s) · ${fmtMoney(comp.total)}
                              <div style={{ fontSize: 10.5, color: 'var(--rg-muted)' }}>
                                {comp.claves.slice(0, 3).map(c => c.concepto).join(', ')}{comp.n_claves > 3 ? '…' : ''}
                              </div>
                            </span>
                          )}
                        </td>
                        <td>
                          {yaAsignado && <span style={{ fontSize: 11.5, color: 'var(--rg-green-700)' }}>Ya tiene clave asignada</span>}
                          {!yaAsignado && !r.sugerencia && <span style={{ fontSize: 11.5, color: 'var(--rg-flag-over)' }}>Configura la clave general o elige una</span>}
                          {!yaAsignado && r.sugerencia && (
                            <div>
                              <span className="rg-mono" style={{ fontWeight: 700 }}>{r.sugerencia.clave}</span>
                              <span style={{ fontSize: 11.5 }}> {r.sugerencia.descripcion}</span>
                              <div style={{ fontSize: 10.5, color: 'var(--rg-muted)' }}>
                                <span className="rg-pill" style={{ background: r.sugerencia.origen === 'comprobacion' ? 'rgba(45,106,68,0.14)' : 'var(--rg-cream)', color: r.sugerencia.origen === 'comprobacion' ? 'var(--rg-green-700)' : 'var(--rg-muted)' }}>
                                  {r.sugerencia.origen === 'comprobacion' ? 'de su comprobación' : 'clave general'}
                                </span>{' '}
                                {r.sugerencia.razon}
                              </div>
                            </div>
                          )}
                        </td>
                        <td style={{ textAlign: 'right' }}>
                          {!yaAsignado && r.partidas.length > 0 && (
                            <button className="rg-btn" style={{ padding: '3px 10px', fontSize: 11 }}
                              onClick={() => setClaveModal(r)}>Elegir otra</button>
                          )}
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>
        </>
      )}

      <ClaveGeneralModal open={claveGen} onClose={() => setClaveGen(false)} grupo={data?.grupo} actual={general}
        onSaved={() => { setClaveGen(false); cargar(); }}/>
      <AplicarLoteModal open={!!lote} onClose={() => setLote(null)} items={lote || []}
        onDone={() => { setLote(null); cargar(); }}/>
      <CambiarClaveModal
        open={!!claveModal} onClose={() => setClaveModal(null)}
        partida={claveModal ? { id: claveModal.partidas[0]?.partidaid, claveinsumo: '(sin clave)', clave_vigente: '(sin clave)', descripcion: claveModal.partidas[0]?.descripcion } : null}
        grupo={data?.grupo}
        preseleccion={claveModal?.sugerencia ? { id: claveModal.sugerencia.insumoid, clave: claveModal.sugerencia.clave, descripcion: claveModal.sugerencia.descripcion } : null}
        motivoInicial={claveModal ? `Caja chica ${claveModal.caja_folio ? 'CAJA-' + String(claveModal.caja_folio).padStart(4, '0') : fmtFolio(claveModal.folio)}: el anticipo no tenía clave de insumo; se contabiliza en ` : ''}
        onSaved={() => { setClaveModal(null); cargar(); }}/>
    </>
  );
}

// ── Vista principal ────────────────────────────────────────────────────────────
function moneyR(n) { try { return '$' + fmtMoney(Number(n) || 0); } catch { return '$' + (Number(n)||0).toFixed(2); } }

// ── Histórico importado con clave fuera de la matriz ────────────────────────
// Mismo problema que InconsistenciasPanel resuelve en las partidas vivas, pero
// sobre los folios de rg_oc_importadas: mientras su clave no sea de la matriz del
// grupo, ese gasto no entra a ninguna Proyección de Costos.
function ImportadasPanel({ proyectos }) {
  const [proyectoid, setProyectoid] = useState('');
  const [data,    setData]    = useState(null);
  const [loading, setLoading] = useState(false);
  const [error,   setError]   = useState('');
  const [sel,     setSel]     = useState({});   // id -> true
  const [elegido, setElegido] = useState({});   // id -> insumoid elegido
  const [ia,      setIa]      = useState({});   // id -> sugerencia de la IA
  const [iaLoading, setIaLoading] = useState(false);
  const [motivo,  setMotivo]  = useState('');
  const [guardando, setGuardando] = useState(false);

  const filas  = data?.filas  || [];
  const matriz = data?.matriz || [];
  const porInsumo = useMemo(() => {
    const m = {}; matriz.forEach(x => { m[x.id] = x; }); return m;
  }, [matriz]);

  const seleccionados = filas.filter(f => sel[f.id]);
  const listos = seleccionados.filter(f => elegido[f.id]);

  function buscar(pid) {
    const id = pid || proyectoid;
    if (!id) { toast.error('Selecciona un proyecto'); return; }
    setLoading(true); setError(''); setSel({}); setIa({}); setElegido({});
    apiFetch('reclasificacion.php', 'GET', null, { action: 'importadas_fuera', proyectoid: id })
      .then(d => setData(d))
      .catch(e => { setError(e.message); setData(null); })
      .finally(() => setLoading(false));
  }

  async function analizarIA() {
    const ids = seleccionados.map(f => f.id);
    if (!ids.length) { toast.error('Selecciona al menos un folio'); return; }
    if (ids.length > 60 && !window.confirm(
      `La IA analiza máximo 60 folios por vez y tienes ${ids.length} seleccionados.\n\n` +
      `Se analizarán los primeros 60; los otros ${ids.length - 60} quedarán sin propuesta. ¿Continuar?`)) return;
    setIaLoading(true);
    try {
      const r = await apiFetch('reclasificacion.php', 'POST',
        { proyectoid, ids: ids.slice(0, 60) }, { action: 'sugerir_ia_importadas' });
      const mapa = {}; (r.sugerencias || []).forEach(x => { mapa[x.id] = x; });
      setIa(mapa);
      // La sugerencia se precarga como clave elegida, pero NO se aplica sola.
      setElegido(prev => {
        const n = { ...prev };
        (r.sugerencias || []).forEach(x => { n[x.id] = x.insumoid; });
        return n;
      });
      toast.success(`La IA revisó ${r.analizadas} de ${ids.length} y propuso ${(r.sugerencias || []).length}`
        + (ids.length > 60 ? ` — faltan ${ids.length - 60}` : '')
        + (r.descartadas ? ` (${r.descartadas} descartada(s) por no estar en la matriz)` : ''));
    } catch (e) { toast.error(e.message); }
    finally { setIaLoading(false); }
  }

  async function aplicar() {
    if (!listos.length) { toast.error('Ninguno de los seleccionados tiene clave elegida'); return; }
    if (motivo.trim().length < 10) { toast.error('Escribe un motivo de al menos 10 caracteres'); return; }
    if (!window.confirm(
      `¿Reclasificar ${listos.length} folio(s) del histórico importado?\n\n` +
      `Su gasto pasará a contar en la Proyección de Costos de la clave elegida.`)) return;
    setGuardando(true);
    try {
      const r = await apiFetch('reclasificacion.php', 'PUT', {
        proyectoid, motivo: motivo.trim(),
        items: listos.map(f => ({ id: f.id, insumoid: elegido[f.id] })),
      }, { action: 'importada_clave_lote' });
      const malas = (r.resultados || []).filter(x => !x.ok);
      if (malas.length) {
        toast.error(`${r.aplicadas} aplicada(s), ${malas.length} con problema: ${malas[0].error}`);
      } else {
        toast.success(r.aplicadas === 1 ? 'Folio reclasificado' : `${r.aplicadas} folios reclasificados`);
      }
      setMotivo('');
      buscar(proyectoid);
    } catch (e) { toast.error(e.message); }
    finally { setGuardando(false); }
  }

  const motivoFalla = m => m === 'sin_clave' ? 'sin clave'
                        : m === 'no_existe' ? 'la clave no existe en el catálogo'
                        : m === 'clave_ambigua' ? 'en este grupo esa clave es de OTRO insumo'
                        : 'la clave existe, pero su insumo no está en la matriz de este grupo';

  return (
    <>
      <div className="rg-card" style={{ padding:'14px 18px', marginBottom:16, fontSize:12.5, lineHeight:1.6 }}>
        Las OCs históricas se importaron con la clave que traía el Excel. Si esa clave apunta a un insumo
        que <strong>no está en la matriz de Contraloría del grupo del proyecto</strong>, su gasto no entra
        a ninguna Proyección de Costos: aparece solo como «Pagado que no cae en ninguna proyección».
        Aquí la IA propone la clave más cercana <strong>dentro de la matriz</strong>; tú la revisas y la aplicas.
      </div>

      <div className="rg-card" style={{ marginBottom:16 }}>
        <div className="rg-card-header"><div><h3>Histórico importado fuera de la matriz</h3>
          {data && <div className="sub">Grupo <strong>{data.grupo}</strong> · {data.total} folio(s) · {moneyR(data.pagado_mxn)} pagados
            {data.ya_cuentan > 0 && <> · <strong>{data.ya_cuentan}</strong> de ellos ya cuentan hoy porque su clave está en una proyección, aunque no esté en la matriz</>}
          </div>}
        </div></div>
        <div style={{ padding:'4px 16px 16px', display:'flex', gap:10, flexWrap:'wrap', alignItems:'flex-end' }}>
          <div className="rg-field" style={{ minWidth:280 }}><label>Proyecto</label>
            <select className="rg-select" value={proyectoid}
                    onChange={e => { setProyectoid(e.target.value); setData(null); }}>
              <option value="">— selecciona —</option>
              {(proyectos || []).filter(p => p.activo).map(p => (
                <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>
              ))}
            </select>
          </div>
          <button className="rg-btn primary" onClick={() => buscar()} disabled={loading || !proyectoid}>
            {loading ? 'Buscando…' : 'Buscar'}
          </button>
          {filas.length > 0 && (
            <>
              <button className="rg-btn" onClick={() => setSel(Object.fromEntries(filas.map(f => [f.id, true])))}>
                Seleccionar todos
              </button>
              <button className="rg-btn" onClick={() => setSel({})}>Ninguno</button>
              <button className="rg-btn primary" onClick={analizarIA} disabled={iaLoading || !seleccionados.length}>
                {iaLoading ? 'Analizando con IA…' : `Analizar con IA (${seleccionados.length})`}
              </button>
            </>
          )}
        </div>
      </div>

      {error && (
        <div className="rg-card" style={{ padding:20, textAlign:'center', color:'var(--rg-flag-over)' }}>
          No se pudo cargar: {error}
        </div>
      )}

      {data && !filas.length && !loading && (
        <div className="rg-card" style={{ padding:24, textAlign:'center', color:'var(--rg-flag-ok, #1baf7a)' }}>
          Todas las OCs históricas de este proyecto tienen una clave de la matriz. No hay nada que reclasificar.
        </div>
      )}

      {filas.length > 0 && (
        <div className="rg-card">
          <div style={{ overflowX:'auto' }}>
            <table className="rg-table" style={{ width:'100%', borderCollapse:'collapse', fontSize:12 }}>
              <thead>
                <tr style={{ background:'var(--rg-cream)', fontSize:10.5, textTransform:'uppercase', letterSpacing:'0.05em' }}>
                  <th style={{ padding:'9px 8px', width:32 }}></th>
                  <th style={{ padding:'9px 10px', textAlign:'left' }}>Folio</th>
                  <th style={{ padding:'9px 10px', textAlign:'left' }}>Concepto</th>
                  <th style={{ padding:'9px 10px', textAlign:'left' }}>Clave actual</th>
                  <th style={{ padding:'9px 10px', textAlign:'right' }}>Pagado</th>
                  <th style={{ padding:'9px 10px', textAlign:'left' }}>Clave nueva (de la matriz)</th>
                </tr>
              </thead>
              <tbody>
                {filas.map(f => {
                  const sug = ia[f.id];
                  const el  = elegido[f.id];
                  return (
                    <tr key={f.id} style={{ borderTop:'1px solid var(--rg-line-2)' }}>
                      <td style={{ padding:'7px 8px', textAlign:'center' }}>
                        <input type="checkbox" checked={!!sel[f.id]}
                               onChange={e => setSel(s => ({ ...s, [f.id]: e.target.checked }))}/>
                      </td>
                      <td style={{ padding:'7px 10px' }} className="rg-mono">
                        {f.folio}
                        <div style={{ fontSize:10, color:'var(--rg-muted)' }}>{f.fecha || 'sin fecha'}</div>
                      </td>
                      <td style={{ padding:'7px 10px', maxWidth:280 }}>
                        <div style={{ overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', maxWidth:280 }}
                             title={f.descripcion || ''}>{f.descripcion || '—'}</div>
                        {f.proveedor && <div style={{ fontSize:10, color:'var(--rg-muted)', overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', maxWidth:280 }}>{f.proveedor}</div>}
                      </td>
                      <td style={{ padding:'7px 10px' }}>
                        <span className="rg-mono">{f.clave_insumo || '—'}</span>
                        <div style={{ fontSize:10, color:'var(--rg-flag-warn)' }}>{motivoFalla(f.motivo)}</div>
                        {f.insumo_base && <div style={{ fontSize:10, color:'var(--rg-muted)' }}>se cuenta en: {f.insumo_base}</div>}
                        {f.insumo_grupo && <div style={{ fontSize:10, color:'var(--rg-flag-over)' }}>en el papel dice: {f.insumo_grupo}</div>}
                        <div style={{ fontSize:10, color: f.cuenta_hoy ? 'var(--rg-flag-ok, #1baf7a)' : 'var(--rg-flag-over)' }}>
                          {f.cuenta_hoy ? 'hoy SÍ cuenta (su clave está en una proyección)' : 'hoy NO cuenta'}
                        </div>
                      </td>
                      <td style={{ padding:'7px 10px', textAlign:'right' }} className="rg-mono">
                        {moneyR(f.pagado_mxn)}
                        {f.moneda !== 'MXN' && <div style={{ fontSize:10, color:'var(--rg-muted)' }}>{f.moneda} {Number(f.pagado).toLocaleString('es-MX')}</div>}
                      </td>
                      <td style={{ padding:'7px 10px', minWidth:260 }}>
                        <select className="rg-select" value={el || ''} style={{ width:'100%', fontSize:11.5 }}
                                onChange={e => setElegido(x => ({ ...x, [f.id]: e.target.value ? Number(e.target.value) : undefined }))}>
                          <option value="">— sin asignar —</option>
                          {matriz.map(m => (
                            <option key={m.id} value={m.id}>
                              {m.clave} · {m.descripcion}{m.en_proyeccion ? '' : '  (sin proyección)'}
                            </option>
                          ))}
                        </select>
                        {el && porInsumo[el] && !porInsumo[el].en_proyeccion && (
                          <div style={{ fontSize:10, marginTop:3, color:'var(--rg-flag-over)' }}>
                            Esa clave no está en ninguna proyección: {f.cuenta_hoy
                              ? 'este gasto DEJARÍA de contar. Agrégala antes en Admin. de Proyecto.'
                              : 'el gasto seguiría sin contar hasta que la agregues en Admin. de Proyecto.'}
                          </div>
                        )}
                        {sug && (
                          <div style={{ fontSize:10, marginTop:3, color: sug.confianza >= 60 ? 'var(--rg-flag-ok, #1baf7a)' : 'var(--rg-flag-warn)' }}>
                            IA: {sug.clave} · confianza {sug.confianza}
                            {sug.clave_base !== sug.clave && <> · se guarda como <span className="rg-mono">{sug.clave_base}</span></>}
                            {sug.razon && <div style={{ color:'var(--rg-muted)' }}>{sug.razon}</div>}
                          </div>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          <div style={{ padding:'12px 16px', borderTop:'1px solid var(--rg-line)', display:'flex', gap:10, flexWrap:'wrap', alignItems:'flex-end' }}>
            <div className="rg-field" style={{ flex:1, minWidth:280 }}><label>Motivo (queda en el historial, mínimo 10 caracteres)</label>
              <input className="rg-input" value={motivo} onChange={e => setMotivo(e.target.value)}
                     placeholder="Ej. Clave del Excel no existe en la matriz de VALLE; se reasigna por concepto"/>
            </div>
            <button className="rg-btn primary" onClick={aplicar}
                    disabled={guardando || !listos.length || motivo.trim().length < 10}>
              {guardando ? 'Aplicando…' : `Aplicar a ${listos.length} folio(s)`}
            </button>
          </div>
          {seleccionados.length > listos.length && (
            <div style={{ padding:'0 16px 12px', fontSize:11, color:'var(--rg-muted)' }}>
              {seleccionados.length - listos.length} seleccionado(s) todavía sin clave nueva: no se van a tocar.
            </div>
          )}
        </div>
      )}
    </>
  );
}

function ReestructuracionView({ onNav, user, onLogout }) {
  const [folio,      setFolio]      = useState('');
  const [proveedor,  setProveedor]  = useState('');
  const [proyectoid, setProyectoid] = useState('');
  const [page,       setPage]       = useState(1);
  const [detailId,   setDetailId]   = useState(null);
  const [tab,        setTab]        = useState('ocs');

  const dFolio     = useDebounce(folio);
  const dProveedor = useDebounce(proveedor);

  const { data: proyectos } = useApiData('proyectos.php');
  const { data, loading, reload } = useApiData('reclasificacion.php', {
    folio: dFolio, proveedor: dProveedor, proyectoid, page, limit: 30,
  });
  const rows  = data?.rows  || [];
  const total = data?.total || 0;
  const pages = data?.pages || 1;

  useEffect(() => { setPage(1); }, [dFolio, dProveedor, proyectoid]);

  function limpiar() { setFolio(''); setProveedor(''); setProyectoid(''); }

  return (
    <div className="rg-app">
      <Sidebar active="reestructuracion" onNav={onNav} alertCount={0} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar crumbs="Sistema / Reestructuración" title="Reestructuración" actions={null}/>
        <div className="rg-content">
          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            <button className={'rg-btn' + (tab === 'ocs' ? ' primary' : '')} onClick={() => setTab('ocs')}>Buscar OCs</button>
            <button className={'rg-btn' + (tab === 'revision' ? ' primary' : '')} onClick={() => setTab('revision')}>
              Revisión de claves (IA)
            </button>
            <button className={'rg-btn' + (tab === 'cajas' ? ' primary' : '')} onClick={() => setTab('cajas')}>
              Cajas chicas
            </button>
            <button className={'rg-btn' + (tab === 'importadas' ? ' primary' : '')} onClick={() => setTab('importadas')}>
              Histórico importado (IA)
            </button>
          </div>

          {tab === 'revision' && <InconsistenciasPanel proyectos={proyectos}/>}
          {tab === 'cajas'    && <CajasChicasPanel proyectos={proyectos}/>}
          {tab === 'importadas' && <ImportadasPanel proyectos={proyectos}/>}

          {tab === 'ocs' && (<>
          <div className="rg-card" style={{ padding: '14px 18px', marginBottom: 16, fontSize: 12.5, color: 'var(--rg-ink)' }}>
            Reasigna el proyecto o la clave de insumo de una OC cuando Compras la capturó mal en Contraloría.
            No crea ni elimina nada — solo mueve a qué presupuesto se contabiliza el gasto. Cada cambio pide un
            motivo obligatorio y queda en el historial de la OC.
          </div>

          <div className="rg-filter-bar" style={{ gridTemplateColumns: '1fr 1fr 220px auto' }}>
            <div className="rg-field"><label>Folio</label>
              <input className="rg-input" placeholder="Ej: 2604" value={folio} onChange={e => setFolio(e.target.value)}/>
            </div>
            <div className="rg-field"><label>Proveedor</label>
              <input className="rg-input" placeholder="Nombre…" value={proveedor} onChange={e => setProveedor(e.target.value)}/>
            </div>
            <div className="rg-field"><label>Proyecto</label>
              <select className="rg-select" value={proyectoid} onChange={e => setProyectoid(e.target.value)}>
                <option value="">Todos</option>
                {(proyectos || []).map(p => <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>)}
              </select>
            </div>
            <button className="rg-btn" onClick={limpiar}>{Icon.x()} Limpiar</button>
          </div>

          <div className="rg-card">
            <div className="rg-card-header"><div><h3>{total} OCs</h3></div></div>
            <table className="rg-table" style={{ width: '100%' }}>
              <thead>
                <tr>
                  <th>Folio</th><th>Fecha</th><th>Proyecto</th><th>Proveedor</th>
                  <th>Partidas</th><th style={{ textAlign: 'right' }}>Total</th><th style={{ textAlign: 'right' }}>Acciones</th>
                </tr>
              </thead>
              <tbody>
                {loading && (
                  <tr><td colSpan="7" style={{ textAlign: 'center', padding: 20, color: 'var(--rg-muted)' }}>Cargando…</td></tr>
                )}
                {!loading && rows.length === 0 && (
                  <tr><td colSpan="7" style={{ textAlign: 'center', padding: 20, color: 'var(--rg-muted)' }}>Sin resultados</td></tr>
                )}
                {rows.map(r => (
                  <tr key={r.id}>
                    <td className="rg-mono">{fmtFolio(r.folio)}</td>
                    <td>{fmtFecha(r.fecha)}</td>
                    <td>{r.proyecto_nombre || '—'}</td>
                    <td>{r.proveedor_nombre || '—'}</td>
                    <td>{r.num_partidas}</td>
                    <td className="rg-mono" style={{ textAlign: 'right' }}>${fmtMoney(r.total)} {r.moneda}</td>
                    <td style={{ textAlign: 'right' }}>
                      <button className="rg-btn" style={{ padding: '3px 10px', fontSize: 11 }} onClick={() => setDetailId(r.id)}>Reclasificar</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            <Pagination page={page} pages={pages} total={total} limit={30} onPage={setPage}/>
          </div>
          </>)}
        </div>
      </main>

      <ReclasificarDetalleModal open={!!detailId} onClose={() => setDetailId(null)} ocid={detailId} proyectos={proyectos} onChanged={reload}/>
    </div>
  );
}

Object.assign(window, { ReestructuracionView });