// ROCA GOLF — v2.0 · Importar OCs históricas (de otra plataforma)
// Sube el .xlsx (2 hojas = 2 empresas), previsualiza con mapeo difuso de PROYECTO,
// corrige y confirma. Lista con CRUD. Folio guardado con sufijo 'D'.

function moneyI(n) { try { return '$' + fmtMoney(Number(n) || 0); } catch { return '$' + (Number(n)||0).toFixed(2); } }

function ScoreBadge({ score }) {
  if (score === null || score === undefined) return null;
  const c = score >= 85 ? 'var(--rg-flag-ok)' : (score >= 60 ? 'var(--rg-flag-warn)' : 'var(--rg-flag-over)');
  return <span className="rg-mono" style={{ fontSize:10.5, fontWeight:700, color:c, background:c+'18', border:'1px solid '+c+'55', borderRadius:4, padding:'1px 5px' }}>{score}%</span>;
}

// ── Modal de edición de una OC importada ──────────────────────────────────────
function EditOCModal({ open, onClose, row, proyectos, onSaved }) {
  const [f, setF] = useState(null);
  useEffect(() => { if (open && row) setF({ ...row }); }, [open, row]);
  if (!open || !f) return null;
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));

  async function save() {
    try {
      await apiFetch('oc_import.php?id=' + f.id, 'PUT', {
        empresa: f.empresa, folio: f.folio, fecha: f.fecha || null,
        proyectoid: f.proyectoid, proveedor: f.proveedor, clave_insumo: f.clave_insumo,
        descripcion: f.descripcion, total: parseFloat(f.total)||0,
        pagado: parseFloat(f.pagado)||0, pendiente: parseFloat(f.pendiente)||0,
        moneda: f.moneda || 'MXN', tc: parseFloat(f.tc)||1,
      });
      toast.success('OC actualizada'); onSaved(); onClose();
    } catch (e) { toast.error(e.message); }
  }

  return (
    <RgModal open={open} onClose={onClose} title={`Editar OC ${f.folio}`} width={620}
      footer={<><button className="rg-btn" onClick={onClose}>Cancelar</button>
        <button className="rg-btn primary" onClick={save}>Guardar</button></>}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12 }}>
        <div className="rg-field"><label>Folio</label><input className="rg-input rg-mono" value={f.folio||''} onChange={e=>set('folio',e.target.value)}/></div>
        <div className="rg-field"><label>Empresa</label><input className="rg-input" value={f.empresa||''} onChange={e=>set('empresa',e.target.value)}/></div>
        <div className="rg-field" style={{ gridColumn:'1 / -1' }}><label>Proyecto asignado</label>
          <select className="rg-select" value={f.proyectoid||''} onChange={e=>set('proyectoid', e.target.value)}>
            <option value="">— sin asignar —</option>
            {(proyectos||[]).map(p => <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>)}
          </select>
          <div style={{ fontSize:11, color:'var(--rg-muted)', marginTop:3 }}>Texto original: <strong>{f.proyecto_texto}</strong></div>
        </div>
        <div className="rg-field"><label>Fecha</label><input className="rg-input" type="date" value={f.fecha||''} onChange={e=>set('fecha',e.target.value)}/></div>
        <div className="rg-field"><label>Clave insumo</label><input className="rg-input rg-mono" value={f.clave_insumo||''} onChange={e=>set('clave_insumo',e.target.value)}/></div>
        <div className="rg-field" style={{ gridColumn:'1 / -1' }}><label>Proveedor</label><input className="rg-input" value={f.proveedor||''} onChange={e=>set('proveedor',e.target.value)}/></div>
        <div className="rg-field" style={{ gridColumn:'1 / -1' }}><label>Descripción</label><textarea className="rg-input" rows="2" value={f.descripcion||''} onChange={e=>set('descripcion',e.target.value)}/></div>
        <div className="rg-field"><label>Moneda</label>
          <select className="rg-select" value={f.moneda || 'MXN'} onChange={e=>set('moneda', e.target.value)}>
            <option value="MXN">MXN</option>
            <option value="USD">USD</option>
          </select>
        </div>
        <div className="rg-field"><label>Tipo de cambio (1 USD = MXN)</label>
          <input className="rg-input rg-mono" type="number" step="0.01" value={f.tc} onChange={e=>set('tc',e.target.value)} disabled={f.moneda !== 'USD'}/>
        </div>
        <div className="rg-field"><label>Total {f.moneda==='USD'?'(USD)':'(MXN)'}</label><input className="rg-input rg-mono" type="number" step="0.01" value={f.total} onChange={e=>set('total',e.target.value)}/></div>
        <div className="rg-field"><label>Pagado {f.moneda==='USD'?'(USD)':'(MXN)'}</label><input className="rg-input rg-mono" type="number" step="0.01" value={f.pagado} onChange={e=>set('pagado',e.target.value)}/></div>
        <div className="rg-field"><label>Pendiente {f.moneda==='USD'?'(USD)':'(MXN)'}</label><input className="rg-input rg-mono" type="number" step="0.01" value={f.pendiente} onChange={e=>set('pendiente',e.target.value)}/></div>
        {f.moneda==='USD' && <div style={{ gridColumn:'1 / -1', fontSize:11, color:'var(--rg-muted)' }}>Equivale a {moneyI((parseFloat(f.total)||0)*(parseFloat(f.tc)||1))} MXN (Total × TC).</div>}
      </div>
    </RgModal>
  );
}

// ── Modal de alta manual de una OC (formulario simple, sin Excel) ─────────────
// Buscador de claves: filtra por clave o por descripcion y deja teclear una a mano.
// Muestra la clave IMPRESA del grupo cuando difiere de la del catalogo base, porque
// son distintas en varios grupos y confundirlas imputa el gasto a otro insumo.
function ClavePicker({ value, claves, disabled, onChange }) {
  const [q, setQ] = useState('');
  const [abierto, setAbierto] = useState(false);
  const elegida = (claves || []).find(c => c.clave === value);

  const filtradas = useMemo(() => {
    const t = q.trim().toUpperCase();
    const base = claves || [];
    if (!t) return base.slice(0, 40);
    return base.filter(c =>
      (c.clave || '').toUpperCase().includes(t) ||
      (c.clave_grupo || '').toUpperCase().includes(t) ||
      (c.descripcion || '').toUpperCase().includes(t)
    ).slice(0, 40);
  }, [q, claves]);

  if (disabled) {
    return <input className="rg-input rg-mono" value={value || ''} disabled
                  placeholder="Elige primero el proyecto" />;
  }
  return (
    <div style={{ position: 'relative' }}>
      <input className="rg-input rg-mono" value={abierto ? q : (value || '')}
        placeholder={(claves || []).length ? 'Busca por clave o concepto…' : 'Sin claves para este proyecto'}
        onFocus={() => { setQ(''); setAbierto(true); }}
        onChange={e => { setQ(e.target.value); setAbierto(true); }}
        onBlur={() => setTimeout(() => setAbierto(false), 180)} />
      {!abierto && elegida && (
        <div style={{ fontSize: 10.5, color: 'var(--rg-muted)', marginTop: 3 }}>
          {elegida.descripcion}
          {elegida.clave_grupo !== elegida.clave && <> · impresa como <strong>{elegida.clave_grupo}</strong></>}
        </div>
      )}
      {abierto && (
        <div style={{ position:'absolute', zIndex:30, top:'100%', left:0, right:0, maxHeight:230,
                      overflowY:'auto', background:'var(--rg-paper)', border:'1px solid var(--rg-line)',
                      borderRadius:8, boxShadow:'var(--rg-shadow-md)', marginTop:2 }}>
          {q.trim() !== '' && (
            <div onMouseDown={() => { onChange(q.trim().toUpperCase()); setAbierto(false); }}
                 style={{ padding:'7px 10px', fontSize:11.5, cursor:'pointer', borderBottom:'1px solid var(--rg-line-2)' }}>
              Usar <strong className="rg-mono">{q.trim().toUpperCase()}</strong> tal cual
            </div>
          )}
          {filtradas.map(c => (
            <div key={c.clave} onMouseDown={() => { onChange(c.clave); setAbierto(false); }}
                 style={{ padding:'7px 10px', fontSize:12, cursor:'pointer', borderBottom:'1px solid var(--rg-line-2)' }}>
              <span className="rg-mono" style={{ fontWeight:700 }}>{c.clave}</span>
              {c.clave_grupo !== c.clave && <span style={{ color:'var(--rg-muted)', fontSize:10.5 }}> (impresa {c.clave_grupo})</span>}
              <div style={{ color:'var(--rg-muted)', fontSize:11 }}>{c.descripcion}</div>
            </div>
          ))}
          {!filtradas.length && q.trim() === '' && (
            <div style={{ padding:'10px', fontSize:11.5, color:'var(--rg-muted)' }}>
              Este proyecto no tiene claves en su matriz.
            </div>
          )}
        </div>
      )}
    </div>
  );
}

function NewOCModal({ open, onClose, proyectos, onCreated }) {
  // Cada OC en captura es un BORRADOR independiente con su propio estado. Con un
  // solo borrador la pantalla se ve igual que antes; con varios aparecen pestanas.
  const nuevoBorrador = () => ({
    empresa:'', folio:'', fecha:'', proyectoid:'', proveedor:'', clave_insumo:'',
    descripcion:'', moneda:'MXN', tc:1, total:0, pagado:0, pendiente:0,
    _estado:'pendiente',   // 'pendiente' | 'guardado' | 'error'
    _error:'', _ia:null,
  });

  const [borradores, setBorradores] = useState([nuevoBorrador()]);
  const [idx,        setIdx]        = useState(0);
  const [vista,      setVista]      = useState('form');   // 'form' | 'pdf'
  const [meta,       setMeta]       = useState(null);
  const [cargandoMeta, setCargandoMeta] = useState(false);
  const [archivos,   setArchivos]   = useState([]);
  const [leyendo,    setLeyendo]    = useState(false);
  const [guardando,  setGuardando]  = useState(false);
  const [notas,      setNotas]      = useState('');
  // Proyecto elegido en la pantalla de PDFs: se aplica a TODOS los borradores que
  // nazcan de esa lectura (los PDFs de una tanda suelen ser del mismo proyecto).
  // Va aqui arriba a proposito: un hook declarado despues del `return null` de mas
  // abajo cambia el numero de hooks entre renders y React tumba el componente
  // ("Rendered more hooks than during the previous render").
  const [proyPdf,    setProyPdf]    = useState('');

  useEffect(() => {
    if (!open) return;
    setBorradores([nuevoBorrador()]); setIdx(0); setVista('form');
    setArchivos([]); setNotas(''); setMeta(null); setProyPdf('');
  }, [open]);

  const f = borradores[idx] || nuevoBorrador();
  const pendientes = borradores.filter(b => b._estado !== 'guardado');
  const guardados  = borradores.filter(b => b._estado === 'guardado').length;

  // Datos de apoyo del formulario, para el borrador activo.
  useEffect(() => {
    if (!open) return;
    let cancel = false;
    setCargandoMeta(true);
    apiFetch('oc_import.php', 'GET', null, {
      accion: 'form_meta',
      proyectoid: f.proyectoid || '',
      empresa: f.proyectoid ? '' : (f.empresa || ''),
    })
      .then(d => {
        if (cancel || !d) return;
        setMeta(d);
        // Solo rellena lo que este vacio: nunca pisa lo que ya se capturo ni lo
        // que propuso la IA en los otros borradores.
        setBorradores(ds => ds.map((b, i) => i !== idx ? b : ({
          ...b,
          empresa: b.empresa || d.empresa || '',
          folio:   b.folio   || folioLibre(ds, d.folio?.sugerido || '', i),
          tc: (b.moneda === 'USD' && d.tc?.USD) ? d.tc.USD
            : (b.moneda === 'DOP' && d.tc?.DOP) ? d.tc.DOP : b.tc,
        })));
      })
      .catch(() => { if (!cancel) setMeta(null); })
      .finally(() => { if (!cancel) setCargandoMeta(false); });
    return () => { cancel = true; };
  }, [open, idx, f.proyectoid, f.empresa]);

  // Evita proponer dos veces el mismo folio cuando hay varios borradores:
  // 99034D ya usado -> 99035D, y asi.
  function folioLibre(ds, sugerido, propio) {
    if (!sugerido) return '';
    const usados = new Set(ds.map((b, i) => i === propio ? null : (b.folio || '').toUpperCase()).filter(Boolean));
    let cand = sugerido;
    for (let n = 0; n < 50 && usados.has(cand.toUpperCase()); n++) {
      cand = cand.replace(/^(.*?)(\d+)(\D*)$/, (_, a, num, z) => {
        const sig = String(Number(num) + 1);
        return a + (sig.length < num.length ? sig.padStart(num.length, '0') : sig) + z;
      });
    }
    return cand;
  }

  if (!open) return null;
  const set = (k, v) => setBorradores(ds => ds.map((b, i) => i === idx ? { ...b, [k]: v, _error: '' } : b));

  function changeProyecto(val) {
    const pid = val ? Number(val) : '';
    const proj = pid ? (proyectos || []).find(p => p.id === pid) : null;
    // Al cambiar de proyecto la clave deja de ser valida: su matriz es otra.
    setBorradores(ds => ds.map((b, i) => i === idx
      ? { ...b, proyectoid: pid, empresa: proj ? proj.empresa : b.empresa, clave_insumo: '', _error: '' } : b));
  }

  function changeMoneda(val) {
    const tasa = val === 'USD' ? (meta?.tc?.USD ?? 1) : val === 'DOP' ? (meta?.tc?.DOP ?? 1) : 1;
    setBorradores(ds => ds.map((b, i) => i === idx ? { ...b, moneda: val, tc: val === 'MXN' ? 1 : tasa } : b));
  }

  async function leerPdfs() {
    if (!archivos.length) { toast.error('Elige al menos un PDF'); return; }
    setLeyendo(true);
    try {
      // apiFetch siempre manda JSON, asi que aqui va un fetch directo, igual que
      // la importacion del Excel mas abajo en este archivo.
      const fd = new FormData();
      fd.append('accion', 'leer_pdf');
      if (proyPdf) fd.append('proyectoid', String(proyPdf));
      archivos.forEach(a => fd.append('file[]', a));
      const res = await fetch('api/oc_import.php', {
        method: 'POST', credentials: 'same-origin',
        headers: getCsrfToken() ? { 'X-CSRF-Token': getCsrfToken() } : {}, body: fd,
      });
      const json = await res.json();
      if (!json.ok) throw new Error(json.error || 'La IA no pudo leer los PDF');
      const d = json.data;
      setNotas(d.notas || '');

      const proj = proyPdf ? (proyectos || []).find(p => p.id === Number(proyPdf)) : null;
      const nuevos = (d.ocs || []).map(o => ({
        ...nuevoBorrador(),
        proyectoid: proyPdf ? Number(proyPdf) : '',
        empresa: proj ? proj.empresa : '',
        folio: o.folio || '', fecha: o.fecha || '',
        proveedor: o.proveedor || '', descripcion: o.descripcion || '',
        clave_insumo: o.clave_insumo || '',
        moneda: o.moneda || 'MXN',
        tc: o.moneda === 'USD' ? (meta?.tc?.USD ?? 1) : o.moneda === 'DOP' ? (meta?.tc?.DOP ?? 1) : 1,
        total: o.total ?? 0, pagado: o.pagado ?? 0, pendiente: o.pendiente ?? 0,
        _ia: { confianza: o.confianza, archivo: o.archivo, clave_cruda: o.clave_cruda },
      }));
      if (!nuevos.length) { toast.error('La IA no encontró ninguna orden'); return; }

      // Si el unico borrador sigue en blanco, se sustituye; si ya tenia captura,
      // los nuevos se agregan detras para no perder nada.
      setBorradores(ds => {
        const vacio = ds.length === 1 && ds[0]._estado === 'pendiente'
                   && !ds[0].folio && !ds[0].proveedor && !Number(ds[0].total);
        return vacio ? nuevos : [...ds, ...nuevos];
      });
      setIdx(prev => {
        const vacio = borradores.length === 1 && !borradores[0].folio && !borradores[0].proveedor;
        return vacio ? 0 : borradores.length;
      });
      setVista('form');
      toast.success(`${nuevos.length} orden(es) lista(s) para revisar — una pestaña por cada una`);
    } catch (e) { toast.error(e.message); }
    finally { setLeyendo(false); }
  }

  function validar(b) {
    if (!(b.folio || '').trim()) return 'El folio es obligatorio';
    if (!b.proyectoid && !(b.empresa || '').trim()) return 'Asigna un proyecto o elige la empresa';
    return '';
  }

  async function guardarUno(i) {
    const b = borradores[i];
    const err = validar(b);
    if (err) {
      setBorradores(ds => ds.map((x, j) => j === i ? { ...x, _estado:'error', _error: err } : x));
      return false;
    }
    try {
      await apiFetch('oc_import.php', 'POST', {
        accion: 'crear', empresa: b.empresa, folio: b.folio, fecha: b.fecha || null,
        proyectoid: b.proyectoid || null, proveedor: b.proveedor, clave_insumo: b.clave_insumo,
        descripcion: b.descripcion, moneda: b.moneda, tc: parseFloat(b.tc) || 1,
        total: parseFloat(b.total) || 0, pagado: parseFloat(b.pagado) || 0,
        pendiente: parseFloat(b.pendiente) || 0,
      });
      setBorradores(ds => ds.map((x, j) => j === i ? { ...x, _estado:'guardado', _error:'' } : x));
      return true;
    } catch (e) {
      setBorradores(ds => ds.map((x, j) => j === i ? { ...x, _estado:'error', _error: e.message } : x));
      return false;
    }
  }

  // Guarda TODAS las pendientes, una por una. Las que fallen se quedan abiertas con
  // su motivo en su pestana; las que entren se marcan guardadas. Nunca se pierde
  // una lectura por culpa de otra.
  async function guardarTodas() {
    setGuardando(true);
    let ok = 0, fallo = 0, primeraMala = -1;
    try {
      for (let i = 0; i < borradores.length; i++) {
        if (borradores[i]._estado === 'guardado') continue;
        const bien = await guardarUno(i);
        if (bien) ok++; else { fallo++; if (primeraMala < 0) primeraMala = i; }
      }
      if (ok) onCreated();
      if (!fallo) { toast.success(ok === 1 ? 'OC agregada' : `${ok} OCs agregadas`); onClose(); }
      else {
        if (primeraMala >= 0) setIdx(primeraMala);
        toast.error(`${ok} guardada(s), ${fallo} con problema. Revisa las pestañas marcadas.`);
      }
    } finally { setGuardando(false); }
  }

  function cerrar() {
    const sinGuardar = borradores.filter(b => b._estado !== 'guardado'
      && (b.folio || b.proveedor || Number(b.total))).length;
    if (sinGuardar > 0 &&
        !window.confirm(`Hay ${sinGuardar} orden(es) capturada(s) sin guardar. ¿Cerrar y perderlas?`)) return;
    onClose();
  }

  function quitarBorrador(i) {
    setBorradores(ds => {
      const r = ds.filter((_, j) => j !== i);
      return r.length ? r : [nuevoBorrador()];
    });
    setIdx(j => Math.max(0, Math.min(j > i ? j - 1 : j, borradores.length - 2)));
  }

  const marca = b => b._estado === 'guardado' ? '✓ ' : b._estado === 'error' ? '⚠ ' : '';
  const colorTab = b => b._estado === 'guardado' ? 'var(--rg-flag-ok, #1baf7a)'
                      : b._estado === 'error'    ? 'var(--rg-flag-over)' : 'inherit';

  return (
    <RgModal open={open} onClose={cerrar} title="Agregar OC" width={680}
      footer={<>
        <button className="rg-btn" onClick={cerrar}>Cerrar</button>
        {borradores.length > 1 && f._estado !== 'guardado' && (
          <button className="rg-btn" disabled={guardando || leyendo}
                  onClick={async () => { const ok = await guardarUno(idx); if (ok) { onCreated(); toast.success('OC agregada'); } }}>
            Guardar solo esta
          </button>
        )}
        <button className="rg-btn primary" onClick={guardarTodas} disabled={guardando || leyendo || !pendientes.length}>
          {guardando ? 'Guardando…'
            : pendientes.length > 1 ? `Guardar las ${pendientes.length}` : 'Guardar'}
        </button>
      </>}>

      <div style={{ display:'flex', gap:4, marginBottom:12, borderBottom:'1px solid var(--rg-line-2)' }}>
        <button className={'rg-btn' + (vista === 'form' ? ' primary' : '')} onClick={() => setVista('form')}
                style={{ borderRadius:0 }}>Captura manual</button>
        <button className={'rg-btn' + (vista === 'pdf' ? ' primary' : '')} onClick={() => setVista('pdf')}
                style={{ borderRadius:0 }}>Desde PDF (IA)</button>
        {guardados > 0 && (
          <span style={{ marginLeft:'auto', alignSelf:'center', fontSize:11, color:'var(--rg-flag-ok, #1baf7a)' }}>
            {guardados} guardada{guardados === 1 ? '' : 's'}
          </span>
        )}
      </div>

      {vista === 'pdf' && (
        <div style={{ marginBottom:16 }}>
          {meta && !meta.ia_disponible && (
            <div className="rg-field" style={{ fontSize:12, color:'var(--rg-flag-over)' }}>
              La lectura con IA no está configurada en el servidor.
            </div>
          )}
          <div className="rg-field"><label>Proyecto de estos PDF (elígelo antes de leer: así la IA propone una clave real)</label>
            <select className="rg-select" value={proyPdf} onChange={e => setProyPdf(e.target.value)}>
              <option value="">— sin asignar —</option>
              {(proyectos||[]).map(p => <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>)}
            </select>
          </div>
          <div className="rg-field"><label>Órdenes de compra en PDF (hasta {meta?.limites?.pdf_max_archivos ?? 5}, {meta?.limites?.pdf_max_texto || '10 MB'} cada una)</label>
            <input className="rg-input" type="file" accept="application/pdf,.pdf" multiple
                   onChange={e => setArchivos(Array.from(e.target.files || []))} />
          </div>
          <button className="rg-btn primary" onClick={leerPdfs} disabled={leyendo || !archivos.length}>
            {leyendo ? 'Leyendo con IA…' : `Leer ${archivos.length || ''} PDF${archivos.length === 1 ? '' : 's'} con IA`}
          </button>
          <div style={{ fontSize:11, color:'var(--rg-muted)', marginTop:8, lineHeight:1.5 }}>
            Cada orden que encuentre abre <strong>su propia pestaña</strong> para revisarla.
            La IA no guarda nada: al final tú decides si guardas una o todas.
          </div>
        </div>
      )}

      {vista === 'form' && (<>
        {notas && (
          <div style={{ fontSize:11.5, background:'rgba(212,160,23,0.10)', border:'1px solid rgba(212,160,23,0.45)',
                        borderRadius:8, padding:'8px 10px', marginBottom:10 }}>
            <strong>Revisa:</strong> {notas}
          </div>
        )}

        {borradores.length > 1 && (
          <div style={{ display:'flex', gap:4, flexWrap:'wrap', marginBottom:12 }}>
            {borradores.map((b, i) => (
              <button key={i} className={'rg-btn' + (i === idx ? ' primary' : '')}
                      onClick={() => setIdx(i)} title={b._error || b.proveedor || ''}
                      style={{ fontSize:11, padding:'4px 9px', color: i === idx ? undefined : colorTab(b) }}>
                {marca(b)}{i + 1} · {b.folio || '(sin folio)'}
              </button>
            ))}
            <button className="rg-btn" onClick={() => { setBorradores(ds => [...ds, nuevoBorrador()]); setIdx(borradores.length); }}
                    title="Agregar otra OC a mano" style={{ fontSize:11, padding:'4px 9px' }}>+</button>
          </div>
        )}

        {f._estado === 'guardado' && (
          <div style={{ fontSize:12, color:'var(--rg-flag-ok, #1baf7a)', marginBottom:10 }}>
            Esta OC ya se guardó. Los cambios de aquí no se vuelven a enviar.
          </div>
        )}
        {f._error && (
          <div style={{ fontSize:12, color:'var(--rg-flag-over)', marginBottom:10 }}>
            No se pudo guardar: {f._error}
          </div>
        )}
        {f._ia && (
          <div style={{ fontSize:10.5, color:'var(--rg-muted)', marginBottom:10 }}>
            Propuesto por la IA desde {f._ia.archivo || 'el PDF'} · confianza {f._ia.confianza}
            {f._ia.clave_cruda && <> · propuso la clave <span className="rg-mono">{f._ia.clave_cruda}</span>, que no está en la matriz del proyecto</>}
          </div>
        )}

        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12,
                      opacity: f._estado === 'guardado' ? 0.55 : 1 }}>
          <div className="rg-field"><label>Folio</label>
            <input className="rg-input rg-mono" value={f.folio} onChange={e=>set('folio',e.target.value)} placeholder="Ej. 443D"/>
            {meta?.folio?.anterior && (
              <div style={{ fontSize:10.5, color:'var(--rg-muted)', marginTop:3 }}>
                El anterior de esta empresa fue <span className="rg-mono">{meta.folio.anterior}</span>
              </div>
            )}
          </div>
          <div className="rg-field"><label>Empresa</label>
            <select className="rg-select" value={f.empresa} onChange={e=>set('empresa',e.target.value)} disabled={!!f.proyectoid}>
              <option value="">{cargandoMeta ? 'Cargando…' : '— elige una —'}</option>
              {(meta?.empresas || []).map(e => <option key={e} value={e}>{e}</option>)}
              {f.empresa && !(meta?.empresas || []).includes(f.empresa) && <option value={f.empresa}>{f.empresa}</option>}
            </select>
            {f.proyectoid && <div style={{ fontSize:10.5, color:'var(--rg-muted)', marginTop:3 }}>La fija el proyecto</div>}
          </div>
          <div className="rg-field" style={{ gridColumn:'1 / -1' }}><label>Proyecto asignado</label>
            <select className="rg-select" value={f.proyectoid} onChange={e=>changeProyecto(e.target.value)}>
              <option value="">— sin asignar —</option>
              {(proyectos||[]).map(p => <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>)}
            </select>
          </div>
          <div className="rg-field"><label>Fecha</label><input className="rg-input" type="date" value={f.fecha} onChange={e=>set('fecha',e.target.value)}/></div>
          <div className="rg-field"><label>Clave insumo {(meta?.claves || []).length > 0 && <span style={{ fontWeight:400, color:'var(--rg-muted)' }}>({meta.claves.length} del proyecto)</span>}</label>
            <ClavePicker value={f.clave_insumo} claves={meta?.claves} disabled={!f.proyectoid}
                         onChange={v => set('clave_insumo', v)} />
            {f.proyectoid && !f.clave_insumo && (
              <div style={{ fontSize:10.5, color:'var(--rg-flag-warn)', marginTop:3 }}>
                Sin clave este gasto no entra a ninguna proyección de costos: queda solo en
                «Pagado que no cae en ninguna proyección».
              </div>
            )}
          </div>
          <div className="rg-field" style={{ gridColumn:'1 / -1' }}><label>Proveedor</label><input className="rg-input" value={f.proveedor} onChange={e=>set('proveedor',e.target.value)}/></div>
          <div className="rg-field" style={{ gridColumn:'1 / -1' }}><label>Descripción</label><textarea className="rg-input" rows="2" value={f.descripcion} onChange={e=>set('descripcion',e.target.value)}/></div>
          <div className="rg-field"><label>Moneda</label>
            <select className="rg-select" value={f.moneda} onChange={e=>changeMoneda(e.target.value)}>
              <option value="MXN">MXN</option>
              <option value="USD">USD</option>
            </select>
          </div>
          <div className="rg-field"><label>Tipo de cambio (1 {f.moneda} = MXN)</label>
            <input className="rg-input rg-mono" type="number" step="0.01" value={f.tc} onChange={e=>set('tc',e.target.value)} disabled={f.moneda === 'MXN'}/>
            {f.moneda !== 'MXN' && meta?.tc?.[f.moneda] != null && Number(f.tc) !== Number(meta.tc[f.moneda]) && (
              <div style={{ fontSize:10.5, color:'var(--rg-flag-warn)', marginTop:3 }}>
                La tasa vigente en Configuración es {meta.tc[f.moneda]}
              </div>
            )}
          </div>
          <div className="rg-field"><label>Total {`(${f.moneda})`}</label><input className="rg-input rg-mono" type="number" step="0.01" value={f.total} onChange={e=>set('total',e.target.value)}/></div>
          <div className="rg-field"><label>Pagado {`(${f.moneda})`}</label><input className="rg-input rg-mono" type="number" step="0.01" value={f.pagado} onChange={e=>set('pagado',e.target.value)}/></div>
          <div className="rg-field"><label>Pendiente {`(${f.moneda})`}</label>
            <input className="rg-input rg-mono" type="number" step="0.01" value={f.pendiente} onChange={e=>set('pendiente',e.target.value)}/>
            {Math.abs((parseFloat(f.total)||0) - (parseFloat(f.pagado)||0) - (parseFloat(f.pendiente)||0)) > 0.01 && (
              <div style={{ fontSize:10.5, color:'var(--rg-flag-warn)', marginTop:3 }}>
                Pagado + pendiente no suma el total
                {' · '}<a href="#" onClick={e => { e.preventDefault(); set('pendiente', ((parseFloat(f.total)||0) - (parseFloat(f.pagado)||0)).toFixed(2)); }}>ajustar</a>
              </div>
            )}
          </div>
        </div>

        {borradores.length > 1 && f._estado !== 'guardado' && (
          <div style={{ marginTop:10, textAlign:'right' }}>
            <a href="#" style={{ fontSize:11, color:'var(--rg-muted)' }}
               onClick={e => { e.preventDefault(); quitarBorrador(idx); }}>Descartar esta OC</a>
          </div>
        )}
      </>)}
    </RgModal>
  );
}

function ImportOCView({ onNav, user, onLogout }) {
  const { data: proyectos } = useApiData('proyectos.php');
  const fileRef = useRef(null);
  const [preview, setPreview]   = useState(null);   // { rows, proyectos, count }
  const [uploading, setUploading] = useState(false);
  const [saving, setSaving]     = useState(false);
  // Arranca en la tasa VIGENTE de Configuración, no en un 17 fijo: con el fijo se
  // estampaba 17 en cada OC importada en dólares aunque la configurada fuera 17.50
  // (ya hay 1 OC guardada con tc 17.0000 frente a 26 con 17.50). Si el usuario lo
  // cambia a mano, su valor manda.
  const [tcUsd, setTcUsd]       = useState('');    // 1 USD = ? MXN (tipo de cambio)
  const [tcTocado, setTcTocado] = useState(false);
  const { data: tcData } = useApiData('tipo_cambio.php');
  useEffect(() => {
    if (!tcTocado && tcData?.tasas?.USD != null) setTcUsd(String(tcData.tasas.USD));
  }, [tcData, tcTocado]);

  const [empresa, setEmpresa] = useState('');
  const [q, setQ]             = useState('');
  const [page, setPage]       = useState(1);
  const dq = useDebounce(q);
  const { data: listData, loading, reload } = useApiData('oc_import.php', { empresa, q: dq, page, limit: 100 });
  const rows    = listData?.rows || [];
  const resumen = listData?.resumen || [];
  const pages   = listData?.pages || 1;

  const [editRow, setEditRow] = useState(null);
  const [showNew, setShowNew] = useState(false);
  useEffect(() => setPage(1), [empresa, dq]);

  async function handleFile(e) {
    const file = e.target.files && e.target.files[0];
    e.target.value = '';
    if (!file) return;
    setUploading(true);
    try {
      const fd = new FormData(); fd.append('file', file);
      const res = await fetch('api/oc_import.php', {
        method: 'POST', credentials: 'same-origin',
        headers: getCsrfToken() ? { 'X-CSRF-Token': getCsrfToken() } : {}, body: fd,
      });
      const json = await res.json();
      if (!json.ok) throw new Error(json.error || 'Error al leer el archivo');
      setPreview(json.data);
      toast.success(`${json.data.count} OCs leídas. Revisa el mapeo y confirma.`);
    } catch (err) { toast.error(err.message); }
    finally { setUploading(false); }
  }

  const setPrevCell = (i, field, val) => setPreview(p => ({ ...p, rows: p.rows.map((r, idx) => idx === i ? { ...r, [field]: val } : r) }));
  // Al reasignar el proyecto, la empresa y el nombre mapeado se toman de Contraloría.
  function changePrevProyecto(i, val) {
    const pid = val ? Number(val) : null;
    const proj = pid ? (preview.proyectos || []).find(p => p.id === pid) : null;
    setPreview(p => ({ ...p, rows: p.rows.map((r, idx) => idx === i
      ? { ...r, proyectoid: pid, proyecto_match: proj ? proj.nombre : '', empresa: proj ? proj.empresa : r.empresa }
      : r) }));
  }

  async function commit() {
    if (!preview || !preview.rows.length) return;
    setSaving(true);
    const tc = Number(tcUsd) || 1;
    const rowsToSave = preview.rows.map(r => ({ ...r, tc: r.moneda === 'USD' ? tc : 1 }));
    try {
      const res = await apiFetch('oc_import.php', 'POST', { accion:'commit', rows: rowsToSave });
      toast.success(`${res.guardadas} OCs guardadas`);
      setPreview(null);
      reload();
    } catch (err) { toast.error(err.message); }
    finally { setSaving(false); }
  }

  async function del(id) {
    if (!window.confirm('¿Eliminar esta OC importada?')) return;
    try { await apiFetch('oc_import.php?id=' + id, 'DELETE'); toast.success('Eliminada'); reload(); }
    catch (e) { toast.error(e.message); }
  }

  async function downloadReporteEmpresa() {
    try {
      const res = await fetch('api/reporte_empresa.php', { credentials: 'same-origin' });
      if (!res.ok) { toast.error('No se pudo generar el reporte'); return; }
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = `Reporte_por_Empresa_${new Date().toISOString().slice(0,10)}.xlsx`; a.click();
      URL.revokeObjectURL(url);
    } catch (e) { toast.error(e.message); }
  }

  const lowCount = preview ? preview.rows.filter(r => (r.match_score ?? 0) < 60).length : 0;

  return (
    <div className="rg-app">
      <Sidebar active="import_oc" onNav={onNav} user={user} onLogout={onLogout}/>
      <main className="rg-main">
        <Topbar crumbs="Catálogos / Importar OCs" title="Importar OCs históricas"
          actions={
            <div style={{ display:'flex', gap:8, alignItems:'center' }}>
              <button className="rg-btn" onClick={downloadReporteEmpresa} title="Descargar reporte por empresa (Excel)">{Icon.excel()} Reporte por empresa</button>
              <button className="rg-btn" onClick={() => setShowNew(true)}>{Icon.plus(13)} Agregar OC</button>
              <input ref={fileRef} type="file" accept=".xlsx" style={{ display:'none' }} onChange={handleFile}/>
              <button className="rg-btn primary" onClick={() => fileRef.current && fileRef.current.click()} disabled={uploading}>
                {Icon.excel()} {uploading ? 'Leyendo…' : 'Subir Excel (.xlsx)'}
              </button>
            </div>
          }/>
        <div className="rg-content">

          {/* ── PREVISUALIZACIÓN ── */}
          {preview && (
            <div className="rg-card" style={{ marginBottom:16, border:'2px solid var(--rg-accent, #c9a961)' }}>
              <div className="rg-card-header">
                <div><h3>Previsualización · {preview.count} OCs</h3>
                  <div className="sub">
                    Revisa el <strong>proyecto asignado</strong> (mapeo difuso). {lowCount > 0
                      ? <span style={{ color:'var(--rg-flag-over)' }}>{lowCount} con baja confianza (&lt;60%) — corrígelas.</span>
                      : 'Todas con confianza aceptable.'} El folio se guardará con sufijo <strong>D</strong>.
                  </div></div>
                <div style={{ display:'flex', gap:8, alignItems:'center' }}>
                  <span style={{ fontSize:12, color:'var(--rg-muted)' }}>1 USD =</span>
                  <input className="rg-input rg-mono" type="number" step="0.01" min="0" value={tcUsd}
                    onFocus={() => setTcTocado(true)}
                    onChange={e => setTcUsd(e.target.value)} style={{ width:90 }} title="Tipo de cambio para convertir las OC en USD"/>
                  <span style={{ fontSize:12, color:'var(--rg-muted)', marginRight:6 }}>MXN</span>
                  <button className="rg-btn" onClick={() => setPreview(null)}>Descartar</button>
                  <button className="rg-btn primary" onClick={commit} disabled={saving}>{saving ? 'Guardando…' : `Confirmar importación (${preview.count})`}</button>
                </div>
              </div>
              <div style={{ overflowX:'auto', maxHeight:460, overflowY:'auto' }}>
                <table className="rg-table" style={{ width:'100%', minWidth:1100 }}>
                  <thead>
                    <tr style={{ background:'var(--rg-cream)', fontSize:10, textTransform:'uppercase', letterSpacing:'0.05em', color:'var(--rg-muted)', position:'sticky', top:0 }}>
                      <th style={{ textAlign:'left', padding:'8px 10px' }}>Empresa</th>
                      <th style={{ textAlign:'left', padding:'8px 10px' }}>Folio</th>
                      <th style={{ textAlign:'left', padding:'8px 10px' }}>Fecha</th>
                      <th style={{ textAlign:'left', padding:'8px 10px' }}>Proyecto (texto → asignado)</th>
                      <th style={{ textAlign:'left', padding:'8px 10px' }}>Proveedor</th>
                      <th style={{ textAlign:'left', padding:'8px 10px' }}>Clave</th>
                      <th style={{ textAlign:'center', padding:'8px 10px' }}>Moneda</th>
                      <th style={{ textAlign:'right', padding:'8px 10px' }}>Total (MXN)</th>
                      <th style={{ textAlign:'right', padding:'8px 10px' }}>Pagado (MXN)</th>
                    </tr>
                  </thead>
                  <tbody>
                    {preview.rows.map((r, i) => (
                      <tr key={i} style={{ borderTop:'1px solid var(--rg-line-2)', background: (r.match_score ?? 0) < 60 ? 'rgba(178,34,34,0.05)' : 'transparent' }}>
                        <td style={{ padding:'6px 10px', fontSize:11 }}>{r.empresa}</td>
                        <td style={{ padding:'6px 10px' }} className="rg-mono">{r.folio}</td>
                        <td style={{ padding:'6px 10px', fontSize:11 }} className="rg-mono">{r.fecha || '—'}</td>
                        <td style={{ padding:'6px 10px' }}>
                          <div style={{ fontSize:11, color:'var(--rg-muted)', marginBottom:2 }}>{r.proyecto_texto} <ScoreBadge score={r.match_score}/></div>
                          <select className="rg-select" style={{ height:28, fontSize:12 }} value={r.proyectoid || ''}
                            onChange={e => changePrevProyecto(i, e.target.value)}>
                            <option value="">— sin asignar —</option>
                            {(preview.proyectos||[]).map(p => <option key={p.id} value={p.id}>{p.clave} · {p.nombre}</option>)}
                          </select>
                          {r.empresa && <div style={{ fontSize:10, color:'var(--rg-muted)', marginTop:2 }}>Empresa: {r.empresa}</div>}
                        </td>
                        <td style={{ padding:'6px 10px', fontSize:11, maxWidth:160, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }} title={r.proveedor}>{r.proveedor}</td>
                        <td style={{ padding:'6px 10px', fontSize:11 }} className="rg-mono">{r.clave_insumo || '—'}</td>
                        <td style={{ padding:'6px 10px', textAlign:'center', fontSize:11 }} className="rg-mono">
                          {r.moneda === 'USD'
                            ? <span style={{ color:'var(--rg-flag-warn)', fontWeight:700 }}>USD</span>
                            : 'MXN'}
                        </td>
                        <td style={{ padding:'6px 10px', textAlign:'right' }} className="rg-mono">
                          {moneyI(r.moneda === 'USD' ? r.total * (Number(tcUsd)||1) : r.total)}
                          {r.moneda === 'USD' && <div style={{ fontSize:9, color:'var(--rg-muted)' }}>USD {fmtMoney(r.total)}</div>}
                        </td>
                        <td style={{ padding:'6px 10px', textAlign:'right' }} className="rg-mono">{moneyI(r.moneda === 'USD' ? r.pagado * (Number(tcUsd)||1) : r.pagado)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* ── RESUMEN POR EMPRESA ── */}
          {resumen.length > 0 && (
            <div style={{ display:'grid', gridTemplateColumns:`repeat(${Math.min(resumen.length,4)},1fr)`, gap:14, marginBottom:16 }}>
              {resumen.map(rr => (
                <div key={rr.empresa} style={{ background:'var(--rg-cream)', border:'1px solid var(--rg-line-2)', borderRadius:8, padding:'12px 14px' }}>
                  <div style={{ fontSize:10, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--rg-muted)', fontWeight:600 }}>{rr.empresa}</div>
                  <div className="rg-mono" style={{ fontSize:18, fontWeight:700, marginTop:4 }}>{moneyI(rr.total)}</div>
                  <div style={{ fontSize:11, color:'var(--rg-muted)', marginTop:2 }}>{rr.ocs} OCs · pagado {moneyI(rr.pagado)}</div>
                </div>
              ))}
            </div>
          )}

          {/* ── LISTA (CRUD) ── */}
          <div className="rg-card">
            <div className="rg-card-header">
              <div><h3>OCs importadas</h3><div className="sub">{listData?.total || 0} registradas</div></div>
              <div style={{ display:'flex', gap:8 }}>
                <select className="rg-select" value={empresa} onChange={e => setEmpresa(e.target.value)}>
                  <option value="">Todas las empresas</option>
                  {resumen.map(rr => <option key={rr.empresa} value={rr.empresa}>{rr.empresa}</option>)}
                </select>
                <input className="rg-input" placeholder="Buscar folio/proveedor/descr…" value={q} onChange={e => setQ(e.target.value)} style={{ minWidth:220 }}/>
              </div>
            </div>
            <div style={{ overflowX:'auto' }}>
              <table className="rg-table" style={{ width:'100%', minWidth:980 }}>
                <thead>
                  <tr style={{ background:'var(--rg-cream)', fontSize:10, textTransform:'uppercase', letterSpacing:'0.05em', color:'var(--rg-muted)' }}>
                    <th style={{ textAlign:'left', padding:'8px 10px' }}>Folio</th>
                    <th style={{ textAlign:'left', padding:'8px 10px' }}>Empresa</th>
                    <th style={{ textAlign:'left', padding:'8px 10px' }}>Fecha</th>
                    <th style={{ textAlign:'left', padding:'8px 10px' }}>Proyecto</th>
                    <th style={{ textAlign:'left', padding:'8px 10px' }}>Proveedor</th>
                    <th style={{ textAlign:'left', padding:'8px 10px' }}>Clave</th>
                    <th style={{ textAlign:'center', padding:'8px 10px' }}>Moneda</th>
                    <th style={{ textAlign:'right', padding:'8px 10px' }}>Total (MXN)</th>
                    <th style={{ textAlign:'right', padding:'8px 10px' }}>Pagado (MXN)</th>
                    <th style={{ textAlign:'right', padding:'8px 10px' }}>Acciones</th>
                  </tr>
                </thead>
                <tbody>
                  {loading && <tr><td colSpan="10" style={{ padding:20, textAlign:'center', color:'var(--rg-muted)' }}>Cargando…</td></tr>}
                  {!loading && rows.length === 0 && <tr><td colSpan="10" style={{ padding:20, textAlign:'center', color:'var(--rg-muted)' }}>Sin OCs importadas. Sube un Excel para comenzar.</td></tr>}
                  {rows.map(r => {
                    const proy = (proyectos||[]).find(p => p.id === r.proyectoid);
                    return (
                      <tr key={r.id} style={{ borderTop:'1px solid var(--rg-line-2)' }}>
                        <td style={{ padding:'7px 10px', fontWeight:700 }} className="rg-mono">{r.folio}</td>
                        <td style={{ padding:'7px 10px', fontSize:11 }}>{r.empresa}</td>
                        <td style={{ padding:'7px 10px', fontSize:11 }} className="rg-mono">{r.fecha || '—'}</td>
                        <td style={{ padding:'7px 10px', fontSize:11.5 }}>
                          {proy ? <span>{proy.clave} · {proy.nombre}</span> : <span style={{ color:'var(--rg-flag-over)' }}>{r.proyecto_texto} (sin asignar)</span>}
                        </td>
                        <td style={{ padding:'7px 10px', fontSize:11, maxWidth:170, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }} title={r.proveedor}>{r.proveedor}</td>
                        <td style={{ padding:'7px 10px', fontSize:11 }} className="rg-mono">{r.clave_insumo || '—'}</td>
                        <td style={{ padding:'7px 10px', textAlign:'center', fontSize:11 }} className="rg-mono">
                          {r.moneda === 'USD' ? <span style={{ color:'var(--rg-flag-warn)', fontWeight:700 }} title={`1 USD = ${r.tc} MXN`}>USD</span> : 'MXN'}
                        </td>
                        <td style={{ padding:'7px 10px', textAlign:'right' }} className="rg-mono">
                          {moneyI(r.moneda === 'USD' ? r.total * (r.tc||1) : r.total)}
                          {r.moneda === 'USD' && <div style={{ fontSize:9, color:'var(--rg-muted)' }}>USD {fmtMoney(r.total)}</div>}
                        </td>
                        <td style={{ padding:'7px 10px', textAlign:'right' }} className="rg-mono">{moneyI(r.moneda === 'USD' ? r.pagado * (r.tc||1) : r.pagado)}</td>
                        <td style={{ padding:'7px 10px', textAlign:'right', whiteSpace:'nowrap' }}>
                          <button className="rg-icon-btn" title="Editar" onClick={() => setEditRow(r)}>{Icon.edit()}</button>
                          <button className="rg-icon-btn danger" title="Eliminar" onClick={() => del(r.id)}>{Icon.x(12)}</button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
            {pages > 1 && (
              <div style={{ display:'flex', justifyContent:'center', gap:10, padding:12 }}>
                <button className="rg-btn" disabled={page<=1} onClick={() => setPage(p => p-1)}>Anterior</button>
                <span style={{ alignSelf:'center', fontSize:12, color:'var(--rg-muted)' }}>Página {page} de {pages}</span>
                <button className="rg-btn" disabled={page>=pages} onClick={() => setPage(p => p+1)}>Siguiente</button>
              </div>
            )}
          </div>
        </div>
      </main>

      <EditOCModal open={!!editRow} row={editRow} proyectos={proyectos} onClose={() => setEditRow(null)} onSaved={reload}/>
      <NewOCModal open={showNew} proyectos={proyectos} onClose={() => setShowNew(false)} onCreated={reload}/>
    </div>
  );
}

Object.assign(window, { ImportOCView });