// 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>
  );
}

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);
  const [tcUsd, setTcUsd]       = useState(17);     // 1 USD = ? MXN (tipo de cambio)

  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);
  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 token = sessionStorage.getItem('rg_token');
      const fd = new FormData(); fd.append('file', file);
      const res = await fetch('api/oc_import.php', { method:'POST', headers: token ? { 'Authorization':'Bearer '+token } : {}, 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 token = sessionStorage.getItem('rg_token');
      const res = await fetch('api/reporte_empresa.php', { headers: token ? { 'Authorization':'Bearer '+token } : {} });
      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>
              <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}
                    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}/>
    </div>
  );
}

Object.assign(window, { ImportOCView });