// ROCA GOLF — Vistas CRUD: OC, Insumos, Proveedores, Historial

// ── Pago Modal ────────────────────────────────────────────────────────────────
function PagoModal({ open, onClose, oc, user, onSaved }) {
  const [form, setForm] = useState({ fecha: new Date().toISOString().slice(0,10), monto:'', referencia:'', banco:'', notas:'' });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');

  const f = k => e => setForm(v => ({...v, [k]: e.target.value}));
  const maxMonto = oc ? parseFloat(oc.montopendiente) : 0;

  async function handleSave() {
    const monto = parseFloat(form.monto);
    if (!monto || monto <= 0) { setErr('Ingresa un monto válido'); return; }
    if (monto > maxMonto + 0.01) { setErr(`El monto excede el pendiente ($${fmtMoney(maxMonto)})`); return; }
    setSaving(true); setErr('');
    try {
      await apiFetch('pagos.php', 'POST', { ...form, monto, oc_id: oc.id, usuarioid: user?.id || 1 });
      toast.success(`Pago de $${fmtMoney(monto)} registrado`);
      onSaved(); onClose();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  }

  return (
    <RgModal open={open} onClose={onClose} title="Registrar pago" width={420}
      footer={<>
        <button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
        <button className="rg-btn primary" onClick={handleSave} disabled={saving}>
          {saving ? 'Guardando…' : 'Registrar'}
        </button>
      </>}>
      {oc && <div style={{ marginBottom:14,padding:'8px 10px',background:'var(--rg-cream)',borderRadius:6,fontSize:12 }}>
        OC #{fmtFolio(oc.folio)} · Pendiente: <strong style={{ color:'var(--rg-flag-over)' }}>${fmtMoney(oc.montopendiente)}</strong>
      </div>}
      {err && <div className="rg-login-error" style={{ marginBottom:12 }}>{err}</div>}
      <div className="rg-form-grid">
        <div className="rg-form-field"><label>Fecha</label><input type="date" value={form.fecha} onChange={f('fecha')}/></div>
        <div className="rg-form-field"><label>Monto ($)</label><input type="number" step="0.01" min="0.01" max={maxMonto} value={form.monto} onChange={f('monto')} placeholder="0.00"/></div>
        <div className="rg-form-field"><label>Referencia / SPEI</label><input value={form.referencia} onChange={f('referencia')} placeholder="Ref. bancaria"/></div>
        <div className="rg-form-field"><label>Banco</label><input value={form.banco} onChange={f('banco')} placeholder="Banco emisor"/></div>
        <div className="rg-form-field full"><label>Notas</label><textarea rows={2} value={form.notas} onChange={f('notas')}/></div>
      </div>
    </RgModal>
  );
}

// ── OC Detail Modal ───────────────────────────────────────────────────────────
function OCDetailModal({ open, onClose, ocId, user, onPagoSaved, readOnly }) {
  const { data: oc, loading, reload } = useApiData(`ordenes.php`, { id: ocId }, !open || !ocId);
  const [pagoOpen, setPagoOpen] = useState(false);

  function handlePagoSaved() { reload(); onPagoSaved && onPagoSaved(); }

  return (
    <RgModal open={open} onClose={onClose} title={`Detalle OC #${oc ? fmtFolio(oc.folio) : '…'}`} width={720}
      footer={<>
        {!readOnly && (
          <button className="rg-btn" onClick={() => setPagoOpen(true)} disabled={!oc || oc.montopendiente <= 0}>
            {Icon.plus(12)} Registrar pago
          </button>
        )}
        <button className="rg-btn" onClick={onClose}>Cerrar</button>
      </>}>
      {loading && <div style={{ textAlign:'center',padding:32,color:'var(--rg-muted)' }}>Cargando…</div>}
      {oc && !loading && <>
        <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:'8px 20px',marginBottom:16 }}>
          {[['Folio', fmtFolio(oc.folio)],['Fecha', fmtFecha(oc.fecha)],
            ['Proyecto', oc.proyecto_nombre],['Proveedor', oc.proveedor_nombre],
            ['Moneda', oc.moneda],['Solicitado por', oc.solicitadopor || '—'],
            ['Status pago', <StatusPagoBadge status={oc.statuspago}/>],
            ['Flujo', <FlujoBadge f={oc.statusflujo}/>],
            ['Prioridad', <PrioridadBadge p={oc.prioridad}/>],
            ['Status entrega', oc.status_entrega]].map(([l,v]) => (
            <div key={l}><div style={{ fontSize:11,color:'var(--rg-muted)',fontWeight:500 }}>{l}</div>
              <div style={{ fontSize:13,marginTop:2 }}>{v}</div></div>
          ))}
          {oc.observaciones && <div style={{ gridColumn:'1/-1' }}>
            <div style={{ fontSize:11,color:'var(--rg-muted)',fontWeight:500 }}>Observaciones</div>
            <div style={{ fontSize:12.5,marginTop:2 }}>{oc.observaciones}</div>
          </div>}
        </div>
        {/* Partidas */}
        <div style={{ fontSize:11.5,fontWeight:600,textTransform:'uppercase',letterSpacing:'.08em',color:'var(--rg-muted)',marginBottom:6 }}>Partidas</div>
        <table className="rg-table" style={{ marginBottom:12 }}>
          <thead><tr><th>Clave</th><th>Descripción</th><th className="num">Cant.</th><th className="num">P.Unit.</th><th className="num">Importe</th></tr></thead>
          <tbody>
            {(oc.partidas||[]).map(p => (
              <tr key={p.id}>
                <td className="rg-mono" style={{ fontSize:11 }}>{p.claveinsumo||'—'}</td>
                <td>{p.descripcion}</td>
                <td className="num">{p.cantidad}</td>
                <td className="num">${fmtMoney(p.preciounitario)}</td>
                <td className="num">${fmtMoney(p.importe)}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ textAlign:'right',fontSize:13,color:'var(--rg-ink-2)' }}>
          Subtotal: <strong style={{ marginLeft:8 }}>${fmtMoney(oc.subtotal)}</strong> &nbsp;
          IVA: <strong>${fmtMoney(oc.iva)}</strong> &nbsp;
          <strong style={{ color:'var(--rg-ink)',fontSize:14 }}>Total: ${fmtMoney(oc.total)}</strong>
          {oc.moneda === 'USD' && <span style={{ color:'var(--rg-muted)',marginLeft:8,fontSize:11 }}>USD</span>}
        </div>
        {/* Pagos */}
        {(oc.pagos||[]).length > 0 && <>
          <div style={{ fontSize:11.5,fontWeight:600,textTransform:'uppercase',letterSpacing:'.08em',color:'var(--rg-muted)',margin:'14px 0 6px' }}>Pagos registrados</div>
          <table className="rg-table">
            <thead><tr><th>Fecha</th><th>Monto</th><th>Referencia</th><th>Banco</th><th>Por</th></tr></thead>
            <tbody>
              {oc.pagos.map(p => (
                <tr key={p.id}>
                  <td className="rg-mono" style={{ fontSize:11 }}>{fmtFecha(p.fecha)}</td>
                  <td className="num">${fmtMoney(p.monto)}</td>
                  <td>{p.referencia||'—'}</td>
                  <td>{p.banco||'—'}</td>
                  <td style={{ fontSize:11,color:'var(--rg-muted)' }}>{p.registrado_nombre}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </>}
      </>}
      <PagoModal open={pagoOpen} onClose={() => setPagoOpen(false)} oc={oc} user={user} onSaved={handlePagoSaved}/>
    </RgModal>
  );
}

// ── OC Metadata Modal (solo edición) ──────────────────────────────────────────
// Esta plataforma ya NO crea OCs (ver api/ordenes.php) — la captura real vive
// en otro sistema. Este modal solo ajusta los campos administrativos de una OC
// YA existente: flujo, prioridad, solicitante, observaciones. Proyecto/
// proveedor/fecha/moneda/partidas se muestran de solo lectura (contexto) —
// para verlos completos, usar el ojito de detalle (OCDetailModal).
function OCFormModal({ open, onClose, initial, user, onSaved }) {
  const [form, setForm] = useState({ solicitadopor:'', observaciones:'', prioridad:'NORMAL', statusflujo:'NUEVO' });
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');

  useEffect(() => {
    if (!open || !initial) return;
    setForm({
      solicitadopor: initial.solicitadopor || '',
      observaciones: initial.observaciones || '',
      prioridad:     initial.prioridad || 'NORMAL',
      statusflujo:   initial.statusflujo || 'NUEVO',
    });
    setErr('');
  }, [open, initial]);

  const f = k => e => setForm(prev => ({ ...prev, [k]: e.target.value }));

  async function handleSave() {
    setSaving(true); setErr('');
    try {
      await apiFetch(`ordenes.php?id=${initial.id}`, 'PUT', {
        statusflujo: form.statusflujo, prioridad: form.prioridad,
        observaciones: form.observaciones, solicitadopor: form.solicitadopor,
        usuarioid: user?.id || 1,
      });
      toast.success('OC actualizada');
      onSaved(); onClose();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  }

  if (!initial) return null;
  return (
    <RgModal open={open} onClose={onClose} title={`Editar OC #${fmtFolio(initial?.folio)}`} width={520}
      footer={<>
        <button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
        <button className="rg-btn primary" onClick={handleSave} disabled={saving}>
          {saving ? 'Guardando…' : 'Guardar cambios'}
        </button>
      </>}>
      {err && <div className="rg-login-error" style={{ marginBottom:12 }}>{err}</div>}
      <div style={{ fontSize:12, color:'var(--rg-muted)', marginBottom:14 }}>
        {initial.proyecto_nombre} · {initial.proveedor_nombre} · {fmtFecha(initial.fecha)}
      </div>
      <div className="rg-form-grid">
        <div className="rg-form-field"><label>Solicitado por</label><input value={form.solicitadopor} onChange={f('solicitadopor')} placeholder="Nombre del solicitante"/></div>
        <div className="rg-form-field"><label>Flujo</label>
          <select value={form.statusflujo} onChange={f('statusflujo')}>
            <option value="NUEVO">Nuevo</option>
            <option value="CON_PRIORIDAD">Con prioridad</option>
            <option value="AUTORIZADA">Autorizada</option>
          </select>
        </div>
        <div className="rg-form-field"><label>Prioridad</label>
          <select value={form.prioridad} onChange={f('prioridad')}>
            <option value="NORMAL">Normal</option>
            <option value="URGENTE">Urgente</option>
            <option value="CRITICO">Crítico</option>
            <option value="AUTORIZADO">Autorizado</option>
          </select>
        </div>
        <div className="rg-form-field full"><label>Observaciones</label><textarea rows={2} value={form.observaciones} onChange={f('observaciones')}/></div>
      </div>
    </RgModal>
  );
}

// ── Insumo Modal ──────────────────────────────────────────────────────────────
function InsumoModal({ open, onClose, initial, user, onSaved }) {
  const isEdit = !!initial?.id;
  const blank  = { clave:'',descripcion:'',codigofamilia:'',nombrefamilia:'',codigosubfamilia:'',nombresubfamilia:'' };
  const [form, setForm] = useState(blank);
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');
  const f = k => e => setForm(v => ({...v, [k]: e.target.value}));

  useEffect(() => {
    if (!open) return;
    setForm(initial ? { clave:initial.clave||'',descripcion:initial.descripcion||'',codigofamilia:initial.codigofamilia||'',nombrefamilia:initial.nombrefamilia||'',codigosubfamilia:initial.codigosubfamilia||'',nombresubfamilia:initial.nombresubfamilia||'' } : blank);
    setErr('');
  }, [open, initial]);

  // Sync familia name from selection
  useEffect(() => {
    const fam = FAMILIAS.find(f => f.codigo === form.codigofamilia);
    if (fam && form.nombrefamilia !== fam.nombre) setForm(v => ({...v, nombrefamilia: fam.nombre}));
  }, [form.codigofamilia]);

  async function handleSave() {
    if (!form.clave || !form.descripcion || !form.codigofamilia) { setErr('Clave, descripción y familia son requeridos'); return; }
    setSaving(true); setErr('');
    try {
      const body = { ...form, usuarioid: user?.id || 1 };
      if (isEdit) {
        await apiFetch(`insumos.php?id=${initial.id}`, 'PUT', body);
        toast.success('Insumo actualizado');
      } else {
        await apiFetch('insumos.php', 'POST', body);
        toast.success(`Insumo ${form.clave} creado`);
      }
      onSaved(); onClose();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  }

  return (
    <RgModal open={open} onClose={onClose} title={isEdit ? 'Editar insumo' : 'Nuevo insumo'} width={540}
      footer={<>
        <button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
        <button className="rg-btn primary" onClick={handleSave} disabled={saving}>{saving ? 'Guardando…' : (isEdit ? 'Guardar' : 'Crear')}</button>
      </>}>
      {err && <div className="rg-login-error" style={{ marginBottom:12 }}>{err}</div>}
      <div className="rg-form-grid">
        <div className="rg-form-field"><label>Clave *</label><input value={form.clave} onChange={f('clave')} placeholder="01-0101" className="rg-mono"/></div>
        <div className="rg-form-field"><label>Familia *</label>
          <select value={form.codigofamilia} onChange={f('codigofamilia')}>
            <option value="">Seleccionar…</option>
            {FAMILIAS.map(fa => <option key={fa.codigo} value={fa.codigo}>{fa.codigo} · {fa.nombre}</option>)}
          </select>
        </div>
        <div className="rg-form-field full"><label>Descripción *</label><input value={form.descripcion} onChange={f('descripcion')} placeholder="Descripción del insumo"/></div>
        <div className="rg-form-field"><label>Cód. subfamilia</label><input value={form.codigosubfamilia} onChange={f('codigosubfamilia')} className="rg-mono" placeholder="01"/></div>
        <div className="rg-form-field"><label>Nombre subfamilia</label><input value={form.nombresubfamilia} onChange={f('nombresubfamilia')} placeholder="Nombre"/></div>
      </div>
    </RgModal>
  );
}

// ── Proveedor Modal ───────────────────────────────────────────────────────────
const BLANK_PROV = { nombre:'',rfc:'',banco:'',numerocuenta:'',clabe:'',beneficiario:'',formapago:'TRANSFERENCIA',contacto:'',email:'',direccion:'',moneda:'MXN',categoria:'' };
function ProveedorModal({ open, onClose, initial, user, onSaved }) {
  const isEdit = !!initial?.id;
  const [form, setForm] = useState(BLANK_PROV);
  const [saving, setSaving] = useState(false);
  const [err, setErr] = useState('');
  const f = k => e => setForm(v => ({...v, [k]: e.target.value}));

  useEffect(() => {
    if (!open) return;
    setForm(initial ? { nombre:initial.nombre||'',rfc:initial.rfc||'',banco:initial.banco||'',numerocuenta:initial.numerocuenta||'',clabe:initial.clabe||'',beneficiario:initial.beneficiario||'',formapago:initial.formapago||'TRANSFERENCIA',contacto:initial.contacto||'',email:initial.email||'',direccion:initial.direccion||'',moneda:initial.moneda||'MXN',categoria:initial.categoria||'' } : BLANK_PROV);
    setErr('');
  }, [open, initial]);

  async function handleSave() {
    if (!form.nombre) { setErr('Nombre es requerido'); return; }
    setSaving(true); setErr('');
    try {
      const body = { ...form, usuarioid: user?.id || 1 };
      if (isEdit) { await apiFetch(`proveedores.php?id=${initial.id}`, 'PUT', body); toast.success('Proveedor actualizado'); }
      else { await apiFetch('proveedores.php', 'POST', body); toast.success(`Proveedor ${form.nombre} creado`); }
      onSaved(); onClose();
    } catch (e) { setErr(e.message); }
    finally { setSaving(false); }
  }

  return (
    <RgModal open={open} onClose={onClose} title={isEdit ? 'Editar proveedor' : 'Nuevo proveedor'} width={640}
      footer={<>
        <button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
        <button className="rg-btn primary" onClick={handleSave} disabled={saving}>{saving ? 'Guardando…' : (isEdit ? 'Guardar' : 'Crear')}</button>
      </>}>
      {err && <div className="rg-login-error" style={{ marginBottom:12 }}>{err}</div>}
      <div className="rg-form-grid">
        <div className="rg-form-field full"><label>Nombre / Razón social *</label><input value={form.nombre} onChange={f('nombre')} placeholder="Nombre del proveedor"/></div>
        <div className="rg-form-field"><label>RFC</label><input value={form.rfc} onChange={f('rfc')} placeholder="XAXX010101000" className="rg-mono"/></div>
        <div className="rg-form-field"><label>Categoría</label><input value={form.categoria} onChange={f('categoria')} placeholder="Materiales, Servicios…"/></div>
        <div className="rg-form-field"><label>Banco</label><input value={form.banco} onChange={f('banco')} placeholder="BBVA, HSBC…"/></div>
        <div className="rg-form-field"><label>N° Cuenta</label><input value={form.numerocuenta} onChange={f('numerocuenta')} className="rg-mono"/></div>
        <div className="rg-form-field"><label>CLABE</label><input value={form.clabe} onChange={f('clabe')} className="rg-mono" placeholder="18 dígitos"/></div>
        <div className="rg-form-field"><label>Beneficiario</label><input value={form.beneficiario} onChange={f('beneficiario')}/></div>
        <div className="rg-form-field"><label>Forma de pago</label>
          <select value={form.formapago} onChange={f('formapago')}>
            <option>TRANSFERENCIA</option><option>CHEQUE</option><option>EFECTIVO</option><option>TARJETA</option>
          </select>
        </div>
        <div className="rg-form-field"><label>Moneda</label>
          <select value={form.moneda} onChange={f('moneda')}><option>MXN</option><option>USD</option></select>
        </div>
        <div className="rg-form-field"><label>Contacto</label><input value={form.contacto} onChange={f('contacto')} placeholder="Nombre del contacto"/></div>
        <div className="rg-form-field"><label>Email</label><input type="email" value={form.email} onChange={f('email')} placeholder="contacto@empresa.com"/></div>
        <div className="rg-form-field full"><label>Dirección</label><textarea rows={2} value={form.direccion} onChange={f('direccion')}/></div>
      </div>
    </RgModal>
  );
}

// ── Proveedor Detail Modal ─────────────────────────────────────────────────────
function ProveedorDetailModal({ open, onClose, proveedor, onEdit }) {
  if (!proveedor) return null;
  const { data: ocsData, loading } = useApiData('ordenes.php', { proveedorid: proveedor.id, limit: 10 }, !open);
  const ocs = ocsData?.rows || [];
  return (
    <RgModal open={open} onClose={onClose} title={proveedor.nombre} width={640}
      footer={<>
        <button className="rg-btn" onClick={onEdit}>{Icon.edit(12)} Editar</button>
        <button className="rg-btn" onClick={onClose}>Cerrar</button>
      </>}>
      <div style={{ display:'grid',gridTemplateColumns:'1fr 1fr',gap:'8px 20px',marginBottom:16 }}>
        {[['RFC', proveedor.rfc],['Moneda', proveedor.moneda],
          ['Banco', proveedor.banco],['CLABE', proveedor.clabe],
          ['Contacto', proveedor.contacto],['Email', proveedor.email],
          ['Categoría', proveedor.categoria],['Forma pago', proveedor.formapago]].map(([l,v]) => v ? (
          <div key={l}><div style={{ fontSize:11,color:'var(--rg-muted)',fontWeight:500 }}>{l}</div>
            <div style={{ fontSize:12.5,marginTop:2,fontFamily:['RFC','CLABE'].includes(l)?'var(--rg-font-mono)':undefined }}>{v||'—'}</div></div>
        ) : null)}
        {proveedor.direccion && <div style={{ gridColumn:'1/-1' }}>
          <div style={{ fontSize:11,color:'var(--rg-muted)',fontWeight:500 }}>Dirección</div>
          <div style={{ fontSize:12.5,marginTop:2 }}>{proveedor.direccion}</div>
        </div>}
      </div>
      <div style={{ fontSize:11.5,fontWeight:600,textTransform:'uppercase',letterSpacing:'.08em',color:'var(--rg-muted)',marginBottom:6 }}>
        Últimas OCs ({proveedor.ocs} total · ${fmtMoney(proveedor.monto)})
      </div>
      {loading ? <div style={{ color:'var(--rg-muted)',fontSize:12 }}>Cargando…</div> :
        <table className="rg-table" style={{ fontSize:12 }}>
          <thead><tr><th>Folio</th><th>Fecha</th><th className="num">Total</th><th>Status</th></tr></thead>
          <tbody>
            {ocs.map(o => <tr key={o.id}>
              <td className="rg-mono">{fmtFolio(o.folio)}</td>
              <td>{fmtFecha(o.fecha)}</td>
              <td className="num">${fmtMoney(o.total)}</td>
              <td><StatusPagoBadge status={o.statuspago}/></td>
            </tr>)}
            {!ocs.length && <tr><td colSpan={4} style={{ color:'var(--rg-muted)',textAlign:'center' }}>Sin órdenes</td></tr>}
          </tbody>
        </table>}
    </RgModal>
  );
}

// ── Pagination helper ─────────────────────────────────────────────────────────
function Pagination({ page, pages, total, limit, onPage }) {
  if (pages <= 1) return <div className="rg-paginate"><span>Mostrando {total} registro{total !== 1 ? 's' : ''}</span></div>;
  const from = (page-1)*limit+1, to = Math.min(page*limit, total);
  const range = [];
  for (let i = Math.max(1,page-2); i <= Math.min(pages,page+2); i++) range.push(i);
  return (
    <div className="rg-paginate">
      <span>Mostrando {from}–{to} de {total}</span>
      <div className="pg">
        <button onClick={() => onPage(page-1)} disabled={page <= 1}>‹</button>
        {range[0] > 1 && <><button onClick={() => onPage(1)}>1</button>{range[0] > 2 && <span style={{ padding:'0 4px',color:'var(--rg-muted)' }}>…</span>}</>}
        {range.map(n => <button key={n} className={n === page ? 'active' : ''} onClick={() => onPage(n)}>{n}</button>)}
        {range[range.length-1] < pages && <><span style={{ padding:'0 4px',color:'var(--rg-muted)' }}>…</span><button onClick={() => onPage(pages)}>{pages}</button></>}
        <button onClick={() => onPage(page+1)} disabled={page >= pages}>›</button>
      </div>
    </div>
  );
}

// ── ORDENES DE COMPRA ─────────────────────────────────────────────────────────
function OCListView({ onNav, user, onLogout }) {
  const [folio,  setFolio]  = useState('');
  const [prov,   setProv]   = useState('');
  const [proy,   setProy]   = useState('');
  const [status, setStatus] = useState('');
  const [flujo,  setFlujo]  = useState('');
  const [prior,  setPrior]  = useState('');
  const [desde,  setDesde]  = useState('');
  const [hasta,  setHasta]  = useState('');
  const [page,   setPage]   = useState(1);

  const dFolio = useDebounce(folio);
  const dProv  = useDebounce(prov);

  const params = { folio: dFolio, proveedor: dProv, proyectoid: proy, statuspago: status,
    statusflujo: flujo, prioridad: prior, fecha_desde: desde, fecha_hasta: hasta, page, limit: 50 };

  const { data, loading, reload } = useApiData('ordenes.php', params);
  const rows  = data?.rows  || [];
  const total = data?.total || 0;
  const pages = data?.pages || 1;

  useEffect(() => { setPage(1); }, [dFolio, dProv, proy, status, flujo, prior, desde, hasta]);

  const [formModal, setFormModal] = useState({ open: false, initial: null });
  const [detailId,  setDetailId]  = useState(null);
  const [detailOpen,setDetailOpen]= useState(false);

  function openEdit(oc)        { setFormModal({ open: true, initial: oc }); }
  function openDetail(oc)      { setDetailId(oc.id); setDetailOpen(true); }
  function handleSaved()       { reload(); }

  const CSV_COLS = [
    { label:'Folio',    key: r => r.folio },
    { label:'Fecha',    key:'fecha' },
    { label:'Proyecto', key:'proyecto_nombre' },
    { label:'Proveedor',key:'proveedor_nombre' },
    { label:'Moneda',   key:'moneda' },
    { label:'Total',    key:'total' },
    { label:'Pendiente',key:'montopendiente' },
    { label:'Status',   key:'statuspago' },
    { label:'Flujo',    key:'statusflujo' },
    { label:'Prioridad',key:'prioridad' },
  ];

  return (
    <div className="rg-app">
      <Sidebar active="oc" onNav={onNav} alertCount={ALERTS_DATA.filter(a => a.level !== "ok").length} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar crumbs="Compras / Órdenes de compra" title="Órdenes de compra"/>
        <div className="rg-content">
          <div className="rg-filter-bar">
            <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={prov} onChange={e => setProv(e.target.value)}/>
            </div>
            <div className="rg-field"><label>Proyecto</label>
              <select className="rg-select" value={proy} onChange={e => setProy(e.target.value)}>
                <option value="">Todos</option>
                {PROYECTOS.map(p => <option key={p.id} value={p.id}>{p.nombre}</option>)}
              </select>
            </div>
            <div className="rg-field"><label>Status pago</label>
              <select className="rg-select" value={status} onChange={e => setStatus(e.target.value)}>
                <option value="">Todos</option>
                <option value="PAGADO">Pagado</option>
                <option value="PAGO_PARCIAL">Parcial</option>
                <option value="PENDIENTE">Pendiente</option>
              </select>
            </div>
            <div className="rg-field"><label>Flujo</label>
              <select className="rg-select" value={flujo} onChange={e => setFlujo(e.target.value)}>
                <option value="">Todos</option>
                <option value="NUEVO">Nuevo</option>
                <option value="CON_PRIORIDAD">Con prioridad</option>
                <option value="AUTORIZADA">Autorizada</option>
              </select>
            </div>
            <div className="rg-field"><label>Desde</label>
              <input className="rg-input" type="date" value={desde} onChange={e => setDesde(e.target.value)}/>
            </div>
            <div className="rg-field"><label>Hasta</label>
              <input className="rg-input" type="date" value={hasta} onChange={e => setHasta(e.target.value)}/>
            </div>
            <button className="rg-btn" onClick={() => { setFolio(''); setProv(''); setProy(''); setStatus(''); setFlujo(''); setPrior(''); setDesde(''); setHasta(''); }}>
              Limpiar
            </button>
          </div>

          <div className="rg-card">
            <div className="rg-card-header">
              <div>
                <h3>{total} órdenes de compra</h3>
                <div className="sub">Página {page} de {pages}</div>
              </div>
              <div className="rg-row">
                <button className="rg-btn" onClick={() => exportCSV(rows, CSV_COLS, 'ordenes.csv')}>{Icon.excel()} Exportar</button>
              </div>
            </div>
            <div style={{ overflowX: "auto" }}>
              <table className="rg-table">
                <thead>
                  <tr>
                    <th>Folio</th><th>Fecha</th><th>Proyecto</th><th>Proveedor</th>
                    <th className="num">Total</th><th className="num">Pendiente</th>
                    <th>Status</th><th>Flujo</th><th>Prioridad</th><th></th>
                  </tr>
                </thead>
                <tbody>
                  {loading && <SkeletonRows cols={10} rows={8}/>}
                  {!loading && rows.map(o => (
                    <tr key={o.id} style={{ cursor:'default' }}>
                      <td><span className="folio">{fmtFolio(o.folio)}</span></td>
                      <td className="rg-mono" style={{ fontSize:11.5,color:"var(--rg-muted)" }}>{fmtFecha(o.fecha)}</td>
                      <td style={{ maxWidth:160,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap' }}>{o.proyecto_nombre}</td>
                      <td style={{ maxWidth:160,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap' }}>{o.proveedor_nombre}</td>
                      <td className="num">{o.moneda === "USD" ? "USD " : "$"}{fmtMoney(o.total)}</td>
                      <td className="num" style={{ color: o.montopendiente > 0 ? "var(--rg-flag-over)" : "var(--rg-muted)" }}>
                        {o.montopendiente > 0 ? "$" + fmtMoney(o.montopendiente) : "—"}
                      </td>
                      <td><StatusPagoBadge status={o.statuspago}/></td>
                      <td><FlujoBadge f={o.statusflujo}/></td>
                      <td><PrioridadBadge p={o.prioridad}/></td>
                      <td>
                        <div className="actions">
                          <button className="rg-icon-btn" title="Ver detalle" onClick={() => openDetail(o)}>{Icon.eye()}</button>
                          <button className="rg-icon-btn" title="Editar" onClick={() => openEdit(o)}>{Icon.edit()}</button>
                        </div>
                      </td>
                    </tr>
                  ))}
                  {!loading && rows.length === 0 && (
                    <tr><td colSpan={10} style={{ textAlign:'center',padding:32,color:'var(--rg-muted)' }}>Sin resultados para los filtros actuales</td></tr>
                  )}
                </tbody>
              </table>
            </div>
            <Pagination page={page} pages={pages} total={total} limit={50} onPage={setPage}/>
          </div>
        </div>
      </main>

      <OCFormModal open={formModal.open} onClose={() => setFormModal({ open:false,initial:null })}
        initial={formModal.initial} user={user} onSaved={handleSaved}/>
      <OCDetailModal open={detailOpen} onClose={() => setDetailOpen(false)}
        ocId={detailId} user={user} onPagoSaved={reload}/>
    </div>
  );
}

// ── INSUMOS ───────────────────────────────────────────────────────────────────
function InsumosView({ onNav, user, onLogout }) {
  // Insumos es "por matriz" (2026-09-03): cada proyecto tiene su propio grupo
  // de Contraloría (catalogo_grupo) y esa matriz es un SUBCONJUNTO real del
  // catálogo base, no todo el catálogo sirve para todo proyecto (ver
  // api/insumos.php — INNER JOIN catalogo_grupo_insumos cuando se manda
  // ?grupo=). Antes esta vista mostraba SIEMPRE el catálogo base completo sin
  // importar el proyecto; ahora exige elegir un proyecto primero, mismo
  // patrón/selector que ya usa Admin. de Proyecto (rg-proyecciones.jsx).
  const { data: proyectos } = useApiData('proyectos.php');
  const [pid, setPid] = useState(null);
  useEffect(() => {
    if (!pid && proyectos && proyectos.length) setPid(proyectos[0].id);
  }, [proyectos]);
  const proyectoActual = (proyectos || []).find(p => p.id === pid) || null;
  const grupoActual     = proyectoActual?.catalogo_grupo || 'UNIVERSAL';

  const [familia,      setFamilia]      = useState('');
  const [q,            setQ]            = useState('');
  const [verInactivos, setVerInactivos] = useState(false);
  const [page,         setPage]         = useState(1);
  const [modal, setModal] = useState({ open: false, initial: null });

  const dq = useDebounce(q);
  const { data, loading, reload } = useApiData('insumos.php', {
    q: dq, codigofamilia: familia, activo: verInactivos ? '0' : '1', page, limit: 80, grupo: grupoActual
  }, !pid);
  const rows  = data?.rows  || [];
  const total = data?.total || 0;
  const pages = data?.pages || 1;

  useEffect(() => setPage(1), [dq, familia, verInactivos, pid]);

  async function toggleActivo(i) {
    try {
      await apiFetch(`insumos.php?id=${i.id}`, 'PUT', { activo: !i.activo, usuarioid: user?.id || 1 });
      toast.success(i.activo ? 'Insumo desactivado' : 'Insumo activado');
      reload();
    } catch (e) { toast.error(e.message); }
  }

  const CSV_COLS = [
    { label:'Clave',      key:'clave' },
    { label:'Descripción',key:'descripcion' },
    { label:'Familia',    key:'nombrefamilia' },
    { label:'Activo',     key: r => r.activo ? 'Sí' : 'No' },
    { label:'Usos',       key:'usos' },
  ];

  return (
    <div className="rg-app">
      <Sidebar active="catalog" onNav={onNav} alertCount={ALERTS_DATA.filter(a => a.level !== "ok").length} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar crumbs="Catálogos / Insumos" title="Catálogo de insumos"
          actions={
            <div style={{ display:'flex', gap:8, alignItems:'center' }}>
              <select className="rg-select" value={pid || ''} onChange={e => setPid(Number(e.target.value))} style={{ minWidth:220 }}>
                {(proyectos || []).map(p => <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>)}
              </select>
              <button className="rg-btn primary" onClick={() => setModal({ open:true, initial:null })}>{Icon.plus()} Nuevo insumo</button>
            </div>
          }/>
        <div className="rg-content">
          <div className="rg-filter-bar" style={{ gridTemplateColumns:'1.4fr 200px 220px auto auto' }}>
            <div className="rg-field"><label>Buscar</label>
              <input className="rg-input" placeholder="Clave o descripción…" value={q} onChange={e => setQ(e.target.value)}/>
            </div>
            <div className="rg-field"><label>Familia</label>
              <select className="rg-select" value={familia} onChange={e => setFamilia(e.target.value)}>
                <option value="">Todas</option>
                {FAMILIAS.map(f => <option key={f.codigo} value={f.codigo}>{f.codigo} · {f.nombre}</option>)}
              </select>
            </div>
            <div className="rg-field"><label>Estado</label>
              <div className="rg-tabs">
                <button className={"rg-tab" + (!verInactivos ? " active" : "")} onClick={() => setVerInactivos(false)}>Activos</button>
                <button className={"rg-tab" + (verInactivos ? " active" : "")} onClick={() => setVerInactivos(true)}>Inactivos</button>
              </div>
            </div>
            <button className="rg-btn" onClick={() => exportCSV(rows, CSV_COLS, 'insumos.csv')}>{Icon.excel()} Exportar</button>
          </div>

          <div className="rg-card">
            <div className="rg-card-header">
              <div>
                <h3>{total} insumos</h3>
                <div className="sub">
                  Catálogo {verInactivos ? 'inactivo' : 'activo'} · matriz de {grupoActual}
                  {proyectoActual && <> ({proyectoActual.nombre})</>}
                  <HelpHint text={
                    "Esta lista está acotada a la matriz de Contraloría del grupo del " +
                    "proyecto seleccionado (" + grupoActual + ") — no todo el catálogo " +
                    "base aplica a todo proyecto. \"Nuevo insumo\" crea en el catálogo " +
                    "base general; para que aparezca aquí, Contraloría debe agregarlo " +
                    "también a esta matriz."
                  }/>
                </div>
              </div>
            </div>
            <div className="rg-ins-row" style={{ background:'var(--rg-cream)',padding:'9px 18px',fontSize:10.5,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--rg-muted)',fontWeight:500 }}>
              <span>Clave</span><span>Descripción</span><span>Familia</span><span>Usos</span><span>Estado</span><span style={{ textAlign:'right' }}>Acciones</span>
            </div>
            {loading && <div style={{ padding:24,textAlign:'center',color:'var(--rg-muted)' }}>Cargando…</div>}
            {rows.map(i => (
              <div className="rg-ins-row" key={i.id}>
                <span className="clave">{i.clave}</span>
                <span>{i.descripcion}</span>
                <span className="rg-fam-chip">
                  <span className="swatch" style={{ background: FAMILY_COLORS[+i.codigofamilia % FAMILY_COLORS.length] }}/>
                  {i.codigofamilia} · {i.nombrefamilia}
                </span>
                <span className="rg-mono" style={{ fontSize:11,color:'var(--rg-muted)' }}>{i.usos} OCs</span>
                <span className="rg-pill" style={{ background: i.activo ? 'rgba(45,106,68,0.12)' : 'var(--rg-cream)', color: i.activo ? 'var(--rg-flag-ok)' : 'var(--rg-muted)' }}>
                  <span className="rg-dot" style={{ background: i.activo ? 'var(--rg-flag-ok)' : 'var(--rg-muted)' }}/>
                  {i.activo ? 'Activo' : 'Inactivo'}
                </span>
                <div className="actions">
                  <button className="rg-icon-btn" title="Editar" onClick={() => setModal({ open:true, initial:i })}>{Icon.edit()}</button>
                  <button className="rg-icon-btn danger" title={i.activo ? 'Desactivar' : 'Activar'} onClick={() => toggleActivo(i)}>
                    {i.activo ? Icon.x() : Icon.plus(12)}
                  </button>
                </div>
              </div>
            ))}
            {!loading && rows.length === 0 && <div style={{ padding:24,textAlign:'center',color:'var(--rg-muted)' }}>Sin resultados</div>}
            <Pagination page={page} pages={pages} total={total} limit={80} onPage={setPage}/>
          </div>
        </div>
      </main>
      <InsumoModal open={modal.open} onClose={() => setModal({ open:false,initial:null })}
        initial={modal.initial} user={user} onSaved={reload}/>
    </div>
  );
}

// ── PROVEEDORES ───────────────────────────────────────────────────────────────
function ProveedoresView({ onNav, user, onLogout }) {
  const [tab,    setTab]    = useState('activos');
  const [q,      setQ]      = useState('');
  const [modal,  setModal]  = useState({ open: false, initial: null });
  const [detail, setDetail] = useState(null);

  const dq = useDebounce(q);
  const { data: provs, loading, reload } = useApiData('proveedores.php', { q: dq, activo: tab === 'activos' ? '1' : '0' });
  const list = provs || [];

  useEffect(() => setQ(''), [tab]);

  function openEdit(p) { setDetail(null); setModal({ open: true, initial: p }); }

  const CSV_COLS = [
    { label:'Nombre',      key:'nombre' },
    { label:'RFC',         key:'rfc' },
    { label:'Banco',       key:'banco' },
    { label:'CLABE',       key:'clabe' },
    { label:'Contacto',    key:'contacto' },
    { label:'Email',       key:'email' },
    { label:'Moneda',      key:'moneda' },
    { label:'OCs',         key:'ocs' },
    { label:'Monto total', key:'monto' },
  ];

  const activos   = (provs || []).filter(p => p.activo).length;
  const inactivos = (provs || []).filter(p => !p.activo).length;

  return (
    <div className="rg-app">
      <Sidebar active="vendors" onNav={onNav} alertCount={ALERTS_DATA.filter(a => a.level !== "ok").length} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar crumbs="Catálogos / Proveedores" title="Proveedores"
          actions={<button className="rg-btn primary" onClick={() => setModal({ open:true,initial:null })}>{Icon.plus()} Nuevo proveedor</button>}/>
        <div className="rg-content">
          <div className="rg-row" style={{ gap:12 }}>
            <div className="rg-tabs">
              <button className={"rg-tab" + (tab === 'activos'   ? ' active' : '')} onClick={() => setTab('activos')}>Activos ({activos})</button>
              <button className={"rg-tab" + (tab === 'inactivos' ? ' active' : '')} onClick={() => setTab('inactivos')}>Inactivos ({inactivos})</button>
            </div>
            <div className="rg-spacer"/>
            <div className="rg-search" style={{ width:280 }}>
              {Icon.search()}
              <input placeholder="Buscar por nombre, RFC o contacto…" value={q} onChange={e => setQ(e.target.value)}/>
            </div>
            <button className="rg-btn" onClick={() => exportCSV(list, CSV_COLS, 'proveedores.csv')}>{Icon.excel()} Exportar</button>
          </div>

          <div className="rg-card">
            <div className="rg-card-header">
              <div><h3>Cartera de proveedores</h3>
                <div className="sub">{list.length} {tab === 'activos' ? 'activos' : 'inactivos'} · ordenados por monto ejercido</div>
              </div>
            </div>
            {loading && <div style={{ padding:24,textAlign:'center',color:'var(--rg-muted)' }}>Cargando…</div>}
            <div className="rg-vendor-grid">
              {list.map(p => (
                <div className="rg-vendor-card" key={p.id}>
                  <div className="rg-vendor-init">{p.nombre.split(' ').slice(0,2).map(w => w[0]).join('').toUpperCase()}</div>
                  <div className="rg-vendor-body">
                    <div className="rg-row" style={{ justifyContent:'space-between' }}>
                      <div>
                        <div className="nm">{p.nombre}</div>
                        <div className="meta">{p.rfc} · {p.banco} · {p.moneda}</div>
                      </div>
                      <div className="actions">
                        <button className="rg-icon-btn" title="Ver detalle" onClick={() => setDetail(p)}>{Icon.eye()}</button>
                        <button className="rg-icon-btn" title="Editar" onClick={() => openEdit(p)}>{Icon.edit()}</button>
                      </div>
                    </div>
                    <div className="stats">
                      <span><span className="v">{p.ocs}</span> <span className="l">OCs</span></span>
                      <span><span className="v">${fmtMoney(p.monto)}</span> <span className="l">{p.moneda}</span></span>
                      <span className="l">{p.contacto}</span>
                    </div>
                  </div>
                </div>
              ))}
              {!loading && list.length === 0 && <div style={{ padding:'24px 18px',color:'var(--rg-muted)' }}>Sin proveedores</div>}
            </div>
          </div>
        </div>
      </main>
      <ProveedorModal open={modal.open} onClose={() => setModal({ open:false,initial:null })}
        initial={modal.initial} user={user} onSaved={reload}/>
      <ProveedorDetailModal open={!!detail} onClose={() => setDetail(null)}
        proveedor={detail} onEdit={() => { const p = detail; setDetail(null); setModal({ open:true,initial:p }); }}/>
    </div>
  );
}

// ── HISTORIAL ─────────────────────────────────────────────────────────────────
function HistorialView({ onNav, user, onLogout }) {
  const [accion, setAccion] = useState('');
  const [tabla,  setTabla]  = useState('');
  const [desde,  setDesde]  = useState('');
  const [hasta,  setHasta]  = useState('');
  const [buscar, setBuscar] = useState('');
  const [page,   setPage]   = useState(1);
  const dBuscar = useDebounce(buscar);

  const { data, loading, reload } = useApiData('historial.php', { accion, tablaafectada: tabla, fecha_desde: desde, fecha_hasta: hasta, page, limit: 50 });
  const rows  = data?.rows  || [];
  const total = data?.total || 0;
  const pages = data?.pages || 1;

  useEffect(() => setPage(1), [accion, tabla, desde, hasta]);

  const filtered = dBuscar
    ? rows.filter(h => h.descripcion?.toLowerCase().includes(dBuscar.toLowerCase()) || h.accion?.toLowerCase().includes(dBuscar.toLowerCase()) || h.usuario?.toLowerCase().includes(dBuscar.toLowerCase()))
    : rows;

  const accionMeta = (a) => {
    if (a.startsWith('CREAR'))   return { c:'var(--rg-flag-ok)',   bg:'rgba(45,106,68,0.12)',  ic: Icon.plus };
    if (a.startsWith('EDITAR'))  return { c:'#1976d2',              bg:'rgba(25,118,210,0.10)', ic: Icon.edit };
    if (a.startsWith('ELIMINAR'))return { c:'var(--rg-flag-over)',  bg:'rgba(178,34,34,0.10)',  ic: Icon.x };
    if (a.startsWith('PAGO'))    return { c:'var(--rg-flag-ok)',    bg:'rgba(45,106,68,0.12)',  ic: Icon.budget };
    if (a.startsWith('LOGIN'))   return { c:'var(--rg-muted)',      bg:'var(--rg-cream)',       ic: Icon.eye };
    if (a.startsWith('LOGOUT'))  return { c:'var(--rg-muted)',      bg:'var(--rg-cream)',       ic: Icon.eye };
    return { c:'var(--rg-muted)', bg:'var(--rg-cream)', ic: Icon.history };
  };

  const CSV_COLS = [
    { label:'Fecha',    key:'fecha' },
    { label:'Usuario',  key:'usuario' },
    { label:'Acción',   key:'accion' },
    { label:'Descripción', key:'descripcion' },
    { label:'Tabla',    key:'tabla' },
  ];

  return (
    <div className="rg-app">
      <Sidebar active="history" onNav={onNav} alertCount={ALERTS_DATA.filter(a => a.level !== "ok").length} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar crumbs="Catálogos / Historial" title="Historial de acciones"
          actions={<button className="rg-btn" onClick={() => exportCSV(rows, CSV_COLS, 'historial.csv')}>{Icon.excel()} Exportar</button>}/>
        <div className="rg-content">
          <div className="rg-filter-bar" style={{ gridTemplateColumns:'1.4fr 180px 180px 130px 130px auto' }}>
            <div className="rg-field"><label>Buscar</label>
              <input className="rg-input" placeholder="Descripción, acción o usuario…" value={buscar} onChange={e => setBuscar(e.target.value)}/>
            </div>
            <div className="rg-field"><label>Acción</label>
              <select className="rg-select" value={accion} onChange={e => setAccion(e.target.value)}>
                <option value="">Todas</option>
                <option value="CREAR">CREAR</option><option value="EDITAR">EDITAR</option>
                <option value="ELIMINAR">ELIMINAR</option><option value="PAGO">PAGO</option>
                <option value="LOGIN">LOGIN</option>
              </select>
            </div>
            <div className="rg-field"><label>Tabla</label>
              <select className="rg-select" value={tabla} onChange={e => setTabla(e.target.value)}>
                <option value="">Todas</option>
                <option value="ordenes_compra">ordenes_compra</option>
                <option value="oc_pagos">oc_pagos</option>
                <option value="catalogo_insumos">catalogo_insumos</option>
                <option value="proveedores">proveedores</option>
                <option value="usuarios">usuarios</option>
              </select>
            </div>
            <div className="rg-field"><label>Desde</label><input className="rg-input" type="date" value={desde} onChange={e => setDesde(e.target.value)}/></div>
            <div className="rg-field"><label>Hasta</label><input className="rg-input" type="date" value={hasta} onChange={e => setHasta(e.target.value)}/></div>
            <button className="rg-btn" onClick={() => { setAccion(''); setTabla(''); setDesde(''); setHasta(''); setBuscar(''); }}>Limpiar</button>
          </div>

          <div className="rg-card">
            <div className="rg-card-header">
              <div><h3>{total} eventos</h3><div className="sub">Bitácora del sistema</div></div>
            </div>
            <div className="rg-hist-row" style={{ background:'var(--rg-cream)',padding:'9px 18px',fontSize:10.5,letterSpacing:'0.08em',textTransform:'uppercase',color:'var(--rg-muted)',fontWeight:500,borderBottom:'1px solid var(--rg-line)' }}>
              <span></span><span>Fecha</span><span>Usuario</span><span>Acción · descripción</span><span>Tabla</span>
            </div>
            {loading && <div style={{ padding:24,textAlign:'center',color:'var(--rg-muted)' }}>Cargando…</div>}
            {filtered.map(h => {
              const m = accionMeta(h.accion || '');
              return (
                <div className="rg-hist-row" key={h.id}>
                  <div className="rg-hist-icon" style={{ background:m.bg,color:m.c }}>{m.ic(13)}</div>
                  <span className="ts">{h.fecha}</span>
                  <span className="usr">{h.usuario}</span>
                  <div>
                    <span className="rg-pill" style={{ background:m.bg,color:m.c,marginRight:8,fontWeight:600 }}>{h.accion}</span>
                    <span className="desc">{h.descripcion}</span>
                  </div>
                  <span className="table-tag">{h.tablaafectada || h.tabla}</span>
                </div>
              );
            })}
            {!loading && filtered.length === 0 && <div style={{ padding:24,textAlign:'center',color:'var(--rg-muted)' }}>Sin eventos</div>}
            <Pagination page={page} pages={pages} total={total} limit={50} onPage={setPage}/>
          </div>
        </div>
      </main>
    </div>
  );
}

// ── CONFIGURACIÓN → PERMISOS (v9.0) ─────────────────────────────────────────
// Solo administrador — ver api/permisos.php para el porqué (mismo patrón que
// Usuarios: chequeo hardcodeado, no vía capacidad configurable).
function ModulosCheckboxList({ modulosDisponibles, selected, onToggle }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 9, maxHeight: 340, overflowY: 'auto', border: '1px solid var(--rg-line)', borderRadius: 8, padding: '12px 16px' }}>
      {modulosDisponibles.map(m => (
        <label key={m.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, fontSize: 12.5, cursor: 'pointer', lineHeight: 1.4 }}>
          <input type="checkbox" checked={selected.has(m.id)} onChange={() => onToggle(m.id)} style={{ marginTop: 3, flexShrink: 0 }}/>
          <span>{m.label}</span>
        </label>
      ))}
    </div>
  );
}

function EditarRolModal({ open, onClose, rolInfo, modulosDisponibles, onSaved }) {
  const [selected, setSelected] = useState(() => new Set());
  const [saving, setSaving]     = useState(false);

  useEffect(() => { if (open && rolInfo) setSelected(new Set(rolInfo.modulos)); }, [open, rolInfo]);

  function toggle(id) { setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); }

  async function guardar() {
    setSaving(true);
    try {
      await apiFetch('permisos.php?target=rol&rol=' + encodeURIComponent(rolInfo.rol), 'PUT', { modulos: Array.from(selected) });
      toast.success('Permisos del rol actualizados');
      onSaved(); onClose();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  async function restablecer() {
    setSaving(true);
    try {
      await apiFetch('permisos.php?target=rol&rol=' + encodeURIComponent(rolInfo.rol), 'DELETE');
      toast.success('Rol restablecido a los valores por defecto');
      onSaved(); onClose();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  if (!open || !rolInfo) return null;
  return (
    <RgModal open={open} onClose={onClose} title={`Permisos de ${ROL_LABELS[rolInfo.rol] || rolInfo.rol}`} width={480}
      footer={<>
        {rolInfo.personalizado && <button className="rg-btn" onClick={restablecer} disabled={saving}>Restablecer a default</button>}
        <button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
        <button className="rg-btn primary" onClick={guardar} disabled={saving}>{saving ? 'Guardando…' : 'Guardar'}</button>
      </>}>
      <ModulosCheckboxList modulosDisponibles={modulosDisponibles} selected={selected} onToggle={toggle}/>
    </RgModal>
  );
}

// Estado de un módulo para un usuario específico: heredado del rol, forzado a
// sí, o forzado a no — la reversibilidad que se pidió ("deshacer" = volver a
// "Heredado" en cualquier momento, sin historial).
function TriEstado({ estado, onChange }) {
  return (
    <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
      {[['heredado', 'Heredado'], ['si', 'Sí'], ['no', 'No']].map(([k, l]) => (
        <button key={k} type="button" className={"rg-btn" + (estado === k ? " primary" : "")}
          style={{ padding: '2px 9px', fontSize: 10.5 }} onClick={() => onChange(k)}>{l}</button>
      ))}
    </div>
  );
}

function EditarUsuarioModal({ open, onClose, usuarioInfo, modulosDisponibles, onSaved }) {
  const [estados, setEstados] = useState({});
  const [saving,  setSaving]  = useState(false);

  useEffect(() => {
    if (open && usuarioInfo) {
      const e = {};
      modulosDisponibles.forEach(m => { e[m.id] = 'heredado'; });
      (usuarioInfo.overrides || []).forEach(o => { e[o.modulo] = o.permitido ? 'si' : 'no'; });
      setEstados(e);
    }
  }, [open, usuarioInfo]);

  function setEstado(id, val) { setEstados(s => ({ ...s, [id]: val })); }

  async function guardar() {
    setSaving(true);
    try {
      const overrides = Object.entries(estados)
        .filter(([, v]) => v !== 'heredado')
        .map(([modulo, v]) => ({ modulo, permitido: v === 'si' }));
      await apiFetch('permisos.php?target=usuario&usuarioid=' + usuarioInfo.id, 'PUT', { overrides });
      toast.success('Excepciones actualizadas');
      onSaved(); onClose();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  async function limpiar() {
    setSaving(true);
    try {
      await apiFetch('permisos.php?target=usuario&usuarioid=' + usuarioInfo.id, 'DELETE');
      toast.success('Excepciones eliminadas — vuelve a heredar todo del rol');
      onSaved(); onClose();
    } catch (e) { toast.error(e.message); }
    finally { setSaving(false); }
  }

  if (!open || !usuarioInfo) return null;
  return (
    <RgModal open={open} onClose={onClose} title={`Excepciones de ${usuarioInfo.nombre}`} width={580}
      footer={<>
        <button className="rg-btn" onClick={limpiar} disabled={saving}>Quitar todas</button>
        <button className="rg-btn" onClick={onClose} disabled={saving}>Cancelar</button>
        <button className="rg-btn primary" onClick={guardar} disabled={saving}>{saving ? 'Guardando…' : 'Guardar'}</button>
      </>}>
      <div style={{ fontSize: 11.5, color: 'var(--rg-muted)', marginBottom: 12 }}>
        Rol: <strong style={{ color: 'var(--rg-ink)' }}>{ROL_LABELS[usuarioInfo.rol] || usuarioInfo.rol_label || usuarioInfo.rol}</strong> — por su rol ve: {usuarioInfo.modulos_rol.length ? usuarioInfo.modulos_rol.join(', ') : '— nada —'}
        <div style={{ marginTop: 4 }}>Lo que marques aquí manda sobre el rol. “Heredado” lo deja seguir al rol, así que siempre se puede deshacer.</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9, maxHeight: 360, overflowY: 'auto' }}>
        {modulosDisponibles.map(m => (
          <div key={m.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10, fontSize: 12, borderBottom: '1px dashed var(--rg-line)', paddingBottom: 7 }}>
            <span style={{ flex: 1 }}>{m.label}</span>
            <TriEstado estado={estados[m.id] || 'heredado'} onChange={(v) => setEstado(m.id, v)}/>
          </div>
        ))}
      </div>
    </RgModal>
  );
}

function PermisosPanel() {
  const [tab, setTab] = useState('roles');
  const { data: rolesData,    reload: reloadRoles }    = useApiData('permisos.php', { target: 'roles' });
  const { data: usuariosData, reload: reloadUsuarios } = useApiData('permisos.php', { target: 'usuarios' });
  const [editRol,      setEditRol]      = useState(null);
  const [editUsuario,  setEditUsuario]  = useState(null);

  const [buscar, setBuscar] = useState('');

  const modulosDisponibles = rolesData?.modulos_disponibles || usuariosData?.modulos_disponibles || [];
  const roles     = rolesData?.roles || [];
  const usuarios  = usuariosData?.usuarios || [];

  // La etiqueta larga de 'catalog' explica todo lo que habilita; para los chips
  // basta la primera parte.
  const etiquetaModulo = id => String(modulosDisponibles.find(m => m.id === id)?.label || id).split(' — ')[0];
  const usuariosFiltrados = usuarios.filter(u => {
    const q = buscar.trim().toLowerCase();
    if (!q) return true;
    return [u.nombre, u.usuario, u.rol, u.rol_label].some(x => String(x || '').toLowerCase().includes(q));
  });

  function reloadAll() { reloadRoles(); reloadUsuarios(); }

  return (
    <div className="rg-card" style={{ padding: '28px 32px', marginTop: 16 }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--rg-ink)', marginBottom: 4, fontFamily: 'var(--rg-font-display)' }}>Permisos por módulo</div>
      <div style={{ fontSize: 12, color: 'var(--rg-muted)', marginBottom: 18, maxWidth: 680 }}>
        Controla qué módulos ve cada rol, o asígnalos usuario por usuario con una excepción (que manda sobre el rol).
        Aparecen también los roles creados en Contraloría; los marcados como <strong>Sin configurar</strong> todavía no
        tienen módulos definidos en esta plataforma y por eso ven solo el mínimo: {(rolesData?.minimo_sin_default || []).join(', ') || '—'}.
        El rol Administrador siempre tiene acceso total y no aparece aquí.
      </div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
        <button className={"rg-btn" + (tab === 'roles' ? ' primary' : '')} onClick={() => setTab('roles')}>Por rol</button>
        <button className={"rg-btn" + (tab === 'usuarios' ? ' primary' : '')} onClick={() => setTab('usuarios')}>Por usuario</button>
      </div>

      {tab === 'roles' && (
        <div style={{ overflowX: 'auto' }}>
          <table className="rg-table" style={{ width: '100%' }}>
            <thead><tr>
              <th style={{ textAlign: 'left' }}>Rol</th>
              <th style={{ textAlign: 'right' }}>Usuarios</th>
              <th style={{ textAlign: 'left' }}>Módulos que ve</th>
              <th style={{ textAlign: 'right' }}>Acciones</th>
            </tr></thead>
            <tbody>
              {roles.map(r => (
                <tr key={r.rol}>
                  <td style={{ fontSize: 12.5, whiteSpace: 'nowrap' }}>
                    {ROL_LABELS[r.rol] || r.label || r.rol}
                    {r.personalizado && <span style={{ marginLeft: 6, fontSize: 9, fontWeight: 700, textTransform: 'uppercase', color: '#8a6d1f', background: 'rgba(201,169,97,0.16)', border: '1px solid rgba(201,169,97,0.4)', borderRadius: 4, padding: '1px 5px' }}>Personalizado</span>}
                    {!r.tiene_default && !r.personalizado && (
                      <span title="Rol creado en Contraloría: esta plataforma no le definió módulos, así que mientras no lo configures aquí ve solo el mínimo."
                        style={{ marginLeft: 6, fontSize: 9, fontWeight: 700, textTransform: 'uppercase', color: '#b3261e', background: 'rgba(178,34,34,0.10)', border: '1px solid rgba(178,34,34,0.3)', borderRadius: 4, padding: '1px 5px', cursor: 'help' }}>Sin configurar</span>
                    )}
                    <div style={{ fontSize: 10, color: 'var(--rg-muted)', fontFamily: 'var(--rg-font-mono)' }}>{r.rol}</div>
                  </td>
                  <td style={{ textAlign: 'right', fontSize: 12 }}>{r.usuarios}</td>
                  <td style={{ fontSize: 11, color: 'var(--rg-muted)' }}>{r.modulos.length ? r.modulos.join(', ') : '— sin acceso —'}</td>
                  <td style={{ textAlign: 'right' }}>
                    <button className="rg-btn" style={{ padding: '3px 10px', fontSize: 11 }} onClick={() => setEditRol(r)}>Editar</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {tab === 'usuarios' && (
        <div style={{ overflowX: 'auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
            <input className="rg-input" style={{ maxWidth: 260 }} placeholder="Buscar por nombre, usuario o rol…"
              value={buscar} onChange={e => setBuscar(e.target.value)}/>
            <span style={{ fontSize: 11.5, color: 'var(--rg-muted)' }}>
              {usuariosFiltrados.length} de {usuarios.length} usuario(s) · “Qué ve hoy” ya incluye sus excepciones
            </span>
          </div>
          <table className="rg-table" style={{ width: '100%' }}>
            <thead><tr>
              <th style={{ textAlign: 'left' }}>Usuario</th>
              <th style={{ textAlign: 'left' }}>Rol</th>
              <th style={{ textAlign: 'left' }}>Qué ve hoy</th>
              <th style={{ textAlign: 'left' }}>Excepciones</th>
              <th style={{ textAlign: 'right' }}>Acciones</th>
            </tr></thead>
            <tbody>
              {usuariosFiltrados.length === 0 && <tr><td colSpan="5" style={{ textAlign: 'center', padding: 20, color: 'var(--rg-muted)' }}>Sin usuarios</td></tr>}
              {usuariosFiltrados.map(u => (
                <tr key={u.id}>
                  <td style={{ fontSize: 12.5 }}>{u.nombre} <span style={{ color: 'var(--rg-muted)', fontSize: 10.5 }}>@{u.usuario}</span></td>
                  <td style={{ fontSize: 11.5 }}>{ROL_LABELS[u.rol] || u.rol_label || u.rol}</td>
                  <td style={{ fontSize: 10.5, maxWidth: 360 }}>
                    {(u.modulos_efectivos || []).length === 0
                      ? <span style={{ color: 'var(--rg-flag-over)' }}>— ningún módulo —</span>
                      : (u.modulos_efectivos || []).map(m => {
                          const forzado = (u.overrides || []).find(o => o.modulo === m && o.permitido);
                          return (
                            <span key={m} className="rg-pill" title={etiquetaModulo(m) + (forzado ? ' · agregado como excepción para este usuario' : '')}
                              style={{ marginRight: 4, marginBottom: 3, display: 'inline-block',
                                       background: forzado ? 'rgba(45,106,68,0.14)' : 'var(--rg-cream)',
                                       color: forzado ? 'var(--rg-green-700)' : 'var(--rg-muted)' }}>{m}</span>
                          );
                        })}
                  </td>
                  <td style={{ fontSize: 11, color: 'var(--rg-muted)' }}>
                    {u.overrides.length
                      ? <span title={u.overrides.map(o => `${o.modulo}: ${o.permitido ? 'sí' : 'NO'}`).join('\n')} style={{ cursor: 'help' }}>
                          {u.overrides.filter(o => o.permitido).length} permitido(s) · {u.overrides.filter(o => !o.permitido).length} bloqueado(s)
                        </span>
                      : '— hereda del rol —'}
                  </td>
                  <td style={{ textAlign: 'right' }}>
                    <button className="rg-btn" style={{ padding: '3px 10px', fontSize: 11 }} onClick={() => setEditUsuario(u)}>Editar</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      <EditarRolModal open={!!editRol} onClose={() => setEditRol(null)} rolInfo={editRol} modulosDisponibles={modulosDisponibles} onSaved={reloadAll}/>
      <EditarUsuarioModal open={!!editUsuario} onClose={() => setEditUsuario(null)} usuarioInfo={editUsuario} modulosDisponibles={modulosDisponibles} onSaved={reloadAll}/>
    </div>
  );
}

// ── TIPO DE CAMBIO (USD/DOP → MXN) ──────────────────────────────────────────────
// AUDITORIA_CONTRALORIA_VS_HERMANA_2026-09-01, hallazgo 3: las OCs vivas en
// USD/DOP se sumaban a su valor nominal como si fueran pesos. Esta tasa vigente
// (no retroactiva por fecha, ver api/tipo_cambio.php) es lo que usa el servidor
// para convertirlas a MXN en Dashboard, Reportes, Presupuestos y Proyecciones.
const TC_LABELS = { USD: 'Dólar estadounidense (USD)', DOP: 'Peso dominicano (DOP)' };

function TipoCambioPanel() {
  const { data, reload } = useApiData('tipo_cambio.php');
  const [form, setForm] = useState({});
  const [saving, setSaving] = useState('');

  useEffect(() => {
    if (!data) return;
    const next = {};
    (data.monedas || []).forEach(m => { next[m] = data.tasas?.[m] != null ? String(data.tasas[m]) : ''; });
    setForm(next);
  }, [data]);

  async function guardar(moneda) {
    const tc = parseFloat(form[moneda]);
    if (!tc || tc <= 0) { toast.error('Ingresa un tipo de cambio válido (mayor a 0).'); return; }
    setSaving(moneda);
    try {
      await apiFetch('tipo_cambio.php', 'PUT', { moneda, tc });
      toast.success(`Tipo de cambio de ${moneda} actualizado`);
      reload();
    } catch (e) { toast.error(e.message); } finally { setSaving(''); }
  }

  const monedas = data?.monedas || ['USD', 'DOP'];

  return (
    <div className="rg-card" style={{ padding: '28px 32px', marginTop: 16 }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--rg-ink)', marginBottom: 4, fontFamily: 'var(--rg-font-display)' }}>Tipo de cambio</div>
      <div style={{ fontSize: 12, color: 'var(--rg-muted)', marginBottom: 18, maxWidth: 640 }}>
        Tasa vigente para convertir a MXN el gasto de OCs capturadas en USD o DOP, usada en Dashboard, Reportes, Presupuestos, Proyecciones y Reporte IA. Mientras una moneda no tenga tasa configurada, sus OCs se excluyen del gasto en vez de contarse como si fueran pesos.
      </div>
      <div style={{ display: 'grid', gap: 12, maxWidth: 440 }}>
        {monedas.map(m => (
          <div key={m} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 12.5, width: 190, flexShrink: 0 }}>{TC_LABELS[m] || m}</span>
            <span style={{ fontSize: 12, color: 'var(--rg-muted)' }}>1 {m} =</span>
            <input
              type="number" step="0.0001" min="0" className="rg-input" style={{ width: 100 }}
              value={form[m] ?? ''} placeholder="Sin configurar"
              onChange={e => setForm(prev => ({ ...prev, [m]: e.target.value }))}
            />
            <span style={{ fontSize: 12, color: 'var(--rg-muted)' }}>MXN</span>
            <button className="rg-btn" style={{ padding: '4px 12px', fontSize: 11.5 }} disabled={saving === m} onClick={() => guardar(m)}>
              {saving === m ? 'Guardando…' : 'Guardar'}
            </button>
          </div>
        ))}
      </div>
      {!!data && monedas.some(m => data.actualizado?.[m]) && (
        <div style={{ fontSize: 10.5, color: 'var(--rg-muted)', marginTop: 14 }}>
          {monedas.filter(m => data.actualizado?.[m]).map(m => (
            <div key={m}>{m} actualizado por última vez: {data.actualizado[m]}</div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── CONFIGURACIÓN ─────────────────────────────────────────────────────────────
function SettingsView({ onNav, user, onLogout }) {
  return (
    <div className="rg-app">
      <Sidebar active="settings" onNav={onNav} alertCount={ALERTS_DATA.filter(a => a.level !== "ok").length} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar crumbs="Sistema / Configuración" title="Configuración" actions={null}/>
        <div className="rg-content">
          <div className="rg-card" style={{ padding:'40px 32px' }}>
            <div style={{ fontSize:16,fontWeight:700,fontFamily:'var(--rg-font-display)',marginBottom:4 }}>Mi sesión</div>
            <div style={{ fontSize:12.5,color:'var(--rg-muted)',marginBottom:24 }}>Información de la sesión activa</div>
            <div style={{ display:'grid',gridTemplateColumns:'120px 1fr',gap:'10px 16px',fontSize:13,maxWidth:420 }}>
              <span style={{ color:'var(--rg-muted)',fontWeight:500 }}>Nombre</span>
              <span style={{ color:'var(--rg-ink)' }}>{user?.nombre || '—'}</span>
              <span style={{ color:'var(--rg-muted)',fontWeight:500 }}>Rol</span>
              <span className="rg-pill" style={{ background:'var(--rg-green-50)',color:'var(--rg-flag-ok)',width:'fit-content' }}>{user?.rol || '—'}</span>
            </div>
            <div style={{ marginTop:28,borderTop:'1px solid var(--rg-line)',paddingTop:20 }}>
              <button className="rg-btn danger" onClick={onLogout} style={{ gap:7 }}>
                <svg width="14" height="14" viewBox="0 0 15 15" fill="none">
                  <path d="M9 2H12a1 1 0 011 1v9a1 1 0 01-1 1H9M6 10.5l3-3-3-3M9 7.5H2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                Cerrar sesión
              </button>
            </div>
          </div>

          {user?.rol === 'administrador' && <PermisosPanel/>}

          <TipoCambioPanel/>

          <div className="rg-card" style={{ padding:'32px',marginTop:16 }}>
            <div style={{ fontSize:13,fontWeight:600,color:'var(--rg-ink)',marginBottom:8,fontFamily:'var(--rg-font-display)' }}>Configuración del sistema</div>
            <div style={{ fontSize:12.5,color:'var(--rg-muted)',maxWidth:380 }}>
              Próximamente: umbrales de alerta y configuración general.
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

Object.assign(window, { OCListView, InsumosView, ProveedoresView, HistorialView, SettingsView, PermisosPanel, TipoCambioPanel });