// ─────────────────────────────────────────────────────
// ORDENES de compra (a proveedor) — hydrated from /api/ordenes.
// ─────────────────────────────────────────────────────

const ORDEN_ESTADO_META = {
  PENDIENTE:        { label: 'Pendiente',        cls: 'warn',  color: 'var(--warn)' },
  CONFIRMADA:       { label: 'Confirmada',       cls: 'info',  color: 'var(--info)' },
  EN_TRANSITO:      { label: 'En tránsito',      cls: 'glass', color: 'var(--glass)' },
  RECIBIDA_PARCIAL: { label: 'Recibida parcial', cls: 'info',  color: 'var(--info)' },
  RECIBIDA:         { label: 'Recibida',         cls: 'ok',    color: 'var(--ok)' },
  CANCELADA:        { label: 'Cancelada',        cls: 'err',   color: 'var(--err)' },
};

const ordenEstadoMeta = (estado) => ORDEN_ESTADO_META[(estado || '').toUpperCase()] || { label: estado || '—', cls: '', color: 'var(--ink-4)' };

const OrdenEstadoPill = ({ estado }) => {
  const e = ordenEstadoMeta(estado);
  return <span className={`pill ${e.cls}`}><span className="d"/>{e.label}</span>;
};

const fmtOrdenMoney = (v) => {
  if (window.fmtEur) return window.fmtEur(Number(v || 0));
  return `${Number(v || 0).toLocaleString('es-ES', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €`;
};

const OrdenesView = ({ refreshKey, onToast }) => {
  const [ordenes, setOrdenes]       = React.useState([]);
  const [proveedores, setProveedores] = React.useState([]);
  const [estados, setEstados]       = React.useState(Object.keys(ORDEN_ESTADO_META));
  const [loading, setLoading]       = React.useState(true);
  const [search, setSearch]         = React.useState('');
  const [estadoF, setEstadoF]       = React.useState('');
  const [provF, setProvF]           = React.useState('');
  const [dateFrom, setDateFrom]     = React.useState('');
  const [dateTo, setDateTo]         = React.useState('');
  const [openOrden, setOpenOrden]   = React.useState(null);
  const [formMode, setFormMode]     = React.useState(null); // null | 'new' | id
  const [reloadKey, setReloadKey]   = React.useState(0);
  const [pagosPend, setPagosPend]   = React.useState(null); // GUT-67: { pagos, total }
  // GUT-67: abrir una OC concreta si veníamos navegando desde una línea BOM.
  const [pendingOrdenId, setPendingOrdenId] = React.useState(
    (typeof window !== 'undefined') ? window.__erpPendingOrdenId : null
  );
  React.useEffect(() => { if (window.__erpPendingOrdenId) window.__erpPendingOrdenId = null; }, []);

  const toast = React.useCallback((msg, isErr) => {
    if (onToast) onToast(msg, isErr);
    else if (isErr) console.error(msg);
  }, [onToast]);

  React.useEffect(() => {
    let alive = true;
    API.get('/api/proveedores')
      .then(rows => { if (alive) setProveedores(Array.isArray(rows) ? rows : []); })
      .catch(e => toast(e.message || 'Error al cargar proveedores', true));
    API.get('/api/ordenes/estados')
      .then(r => { if (alive && Array.isArray(r.estados)) setEstados(r.estados); })
      .catch(() => {});
    return () => { alive = false; };
  }, []);

  const buildParams = React.useCallback(() => {
    const p = {};
    if (search.trim()) p.search = search.trim();
    if (estadoF)       p.estado = estadoF;
    if (provF)         p.proveedor_id = provF;
    if (dateFrom)      p.date_from = dateFrom;
    if (dateTo)        p.date_to = dateTo;
    return p;
  }, [search, estadoF, provF, dateFrom, dateTo]);

  React.useEffect(() => {
    let alive = true;
    setLoading(true);
    API.get('/api/ordenes', buildParams()).then(rows => {
      if (!alive) return;
      setOrdenes(Array.isArray(rows) ? rows : []);
      setLoading(false);
    }).catch(e => {
      if (!alive) return;
      setLoading(false);
      toast(e.message || 'Error al cargar órdenes', true);
    });
    return () => { alive = false; };
  }, [buildParams, refreshKey, reloadKey]);

  // GUT-67: vista global de pagos pendientes a proveedor.
  React.useEffect(() => {
    let alive = true;
    API.get('/api/ordenes/pagos/pendientes')
      .then(r => { if (alive) setPagosPend(r && Array.isArray(r.pagos) ? r : { pagos: [], total: 0 }); })
      .catch(() => {});
    return () => { alive = false; };
  }, [refreshKey, reloadKey]);

  const reload = React.useCallback(() => setReloadKey(k => k + 1), []);

  // GUT-67: una vez cargadas las órdenes, abrir la OC pendiente (si está en la lista).
  React.useEffect(() => {
    if (!pendingOrdenId || ordenes.length === 0) return;
    const match = ordenes.find(o => String(o.id) === String(pendingOrdenId));
    if (match) setOpenOrden(match);
    setPendingOrdenId(null);
  }, [pendingOrdenId, ordenes]);

  const kpis = React.useMemo(() => {
    const grp = (st) => ordenes.filter(o => (o.estado || '').toUpperCase() === st).length;
    return {
      total: ordenes.length,
      pendiente: grp('PENDIENTE'),
      confirmada: grp('CONFIRMADA'),
      transito: grp('EN_TRANSITO'),
      recibida: ordenes.filter(o => ['RECIBIDA', 'RECIBIDA_PARCIAL'].includes((o.estado || '').toUpperCase())).length,
      cancelada: grp('CANCELADA'),
    };
  }, [ordenes]);

  const doExport = (ext) => {
    const qs = new URLSearchParams(buildParams()).toString();
    const today = new Date().toISOString().slice(0, 10);
    API.download(`/api/ordenes/export/${ext}${qs ? '?' + qs : ''}`, `ordenes_${today}.${ext === 'excel' ? 'xlsx' : 'pdf'}`)
      .catch(e => toast(e.message || 'Error al exportar', true));
  };

  const clearFilters = () => {
    setSearch('');
    setEstadoF('');
    setProvF('');
    setDateFrom('');
    setDateTo('');
  };

  const countLabel = `${ordenes.length} orden${ordenes.length === 1 ? '' : 'es'}`;

  return (
    <>
      <div className="page-h">
        <div>
          <h1>Órdenes a proveedor</h1>
          <div className="sub">Compra de materiales y seguimiento de entregas · {countLabel}</div>
        </div>
        <div className="page-h-actions">
          <button className="btn" onClick={() => doExport('excel')}><Icon name="download" /> Excel</button>
          <button className="btn" onClick={() => doExport('pdf')}><Icon name="print" /> PDF</button>
          <button className="btn primary" onClick={() => setFormMode('new')}><Icon name="plus" /> Nueva orden</button>
        </div>
      </div>

      <div className="kpi-grid" style={{gridTemplateColumns:'repeat(6,1fr)'}}>
        {[
          { k:'Total',       v:kpis.total,      color:'' },
          { k:'Pendientes',  v:kpis.pendiente,  color:'var(--warn)' },
          { k:'Confirmadas', v:kpis.confirmada, color:'var(--info)' },
          { k:'En tránsito', v:kpis.transito,   color:'var(--glass)' },
          { k:'Recibidas',   v:kpis.recibida,   color:'var(--ok)' },
          { k:'Canceladas',  v:kpis.cancelada,  color:'var(--err)' },
        ].map(s => (
          <div className="kpi" key={s.k}>
            <div className="lbl">{s.color && <span className="dot" style={{background:s.color}}/>}{s.k}</div>
            <div className="row"><div className="num">{s.v}</div></div>
          </div>
        ))}
      </div>

      {pagosPend && pagosPend.pagos.length > 0 && (
        <div style={{display:'flex',alignItems:'center',gap:10,flexWrap:'wrap',margin:'4px 0 12px',padding:'8px 12px',border:'1px solid var(--line)',borderRadius:6,background:'var(--surface)'}}>
          <Icon name="info" size={14}/>
          <span style={{fontWeight:600,fontSize:12.5}}>Pagos pendientes a proveedor:</span>
          <span className="muted" style={{fontSize:12}}>{pagosPend.pagos.length} hito{pagosPend.pagos.length === 1 ? '' : 's'} · {fmtOrdenMoney(pagosPend.total)}</span>
          <span style={{marginLeft:'auto',display:'flex',gap:8,flexWrap:'wrap',fontSize:11.5}} className="muted">
            {pagosPend.pagos.slice(0, 6).map(p => (
              <span key={p.id} title={[p.oc_numero && `OC ${p.oc_numero}`, p.proveedor_nombre, p.concepto].filter(Boolean).join(' · ')}>
                OC {p.oc_numero || p.compra_id}: {fmtOrdenMoney(p.importe)}
              </span>
            ))}
            {pagosPend.pagos.length > 6 && <span>+{pagosPend.pagos.length - 6} más</span>}
          </span>
        </div>
      )}

      <div className="toolbar">
        <div className="tb-search">
          <Icon name="search" />
          <input placeholder="Nº orden, proveedor…" value={search} onChange={e => setSearch(e.target.value)} />
        </div>
        <div className="tb-divider" />
        <select value={provF} onChange={e => setProvF(e.target.value)}
          style={{padding:'4px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5,color:'var(--ink-1)',maxWidth:190}}>
          <option value="">Todos los proveedores</option>
          {proveedores.map(p => <option key={p.id} value={p.id}>{p.nombre}</option>)}
        </select>
        <select value={estadoF} onChange={e => setEstadoF(e.target.value)}
          style={{padding:'4px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5,color:'var(--ink-1)'}}>
          <option value="">Todos los estados</option>
          {estados.map(s => <option key={s} value={s}>{ordenEstadoMeta(s).label}</option>)}
        </select>
        <input type="date" value={dateFrom} onChange={e => setDateFrom(e.target.value)} title="F. pedido desde"
          style={{padding:'4px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5}}/>
        <input type="date" value={dateTo} onChange={e => setDateTo(e.target.value)} title="F. pedido hasta"
          style={{padding:'4px 8px',border:'1px solid var(--line)',borderRadius:4,background:'var(--surface)',fontSize:12.5}}/>
        <button className="btn ghost" onClick={clearFilters}><Icon name="x" size={12}/> Limpiar</button>
      </div>

      {loading && <div style={{padding:40,textAlign:'center',color:'var(--ink-3)'}}>Cargando órdenes…</div>}

      {!loading && (
        <div className="tbl-wrap">
          <div className="tbl-scroll">
            <table className="tbl">
              <thead>
                <tr>
                  <th>Nº orden</th>
                  <th>Estado</th>
                  <th>Proveedor</th>
                  <th>F. pedido</th>
                  <th>F. entrega est.</th>
                  <th>F. entrega real</th>
                  <th>Pedidos relacionados</th>
                  <th style={{textAlign:'right'}}>Items</th>
                  <th style={{textAlign:'right'}}>Importe</th>
                </tr>
              </thead>
              <tbody>
                {ordenes.length === 0 && (
                  <tr><td colSpan={9} style={{textAlign:'center',padding:32,color:'var(--ink-3)'}}>Sin resultados</td></tr>
                )}
                {ordenes.map(o => {
                  const pedidosInfo = [o.pedidos_numeros, o.pedidos_clientes].filter(Boolean).join(' · ');
                  return (
                    <tr key={o.id} onClick={() => setOpenOrden(o)} style={{cursor:'pointer'}}>
                      <td className="num strong">{o.numero || o.id}</td>
                      <td><OrdenEstadoPill estado={o.estado}/></td>
                      <td className="strong truncate">{o.proveedor_nombre || <span className="muted">—</span>}</td>
                      <td className="num muted">{o.fecha_pedido || '—'}</td>
                      <td className="num">{o.fecha_entrega_estimada || <span className="muted">—</span>}</td>
                      <td className="num">{o.fecha_entrega_real || <span className="muted">—</span>}</td>
                      <td className="mono truncate" style={{fontSize:11.5,maxWidth:220}} title={pedidosInfo}>{pedidosInfo || '—'}</td>
                      <td className="num right">{o.material_count || 0}</td>
                      <td className="num right strong">{fmtOrdenMoney(o.importe_total)}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      )}

      <OrdenesDrawer
        orden={openOrden}
        estados={estados}
        proveedores={proveedores}
        onClose={() => setOpenOrden(null)}
        onEdit={(id) => { setOpenOrden(null); setFormMode(id); }}
        onDeleted={() => { setOpenOrden(null); reload(); }}
        onChanged={reload}
        onToast={toast}
      />

      {formMode != null && (
        <OrdenesForm
          ordenId={formMode === 'new' ? undefined : formMode}
          estados={estados}
          proveedores={proveedores}
          onClose={() => setFormMode(null)}
          onSaved={() => { setFormMode(null); reload(); }}
          onToast={toast}
        />
      )}
    </>
  );
};

window.OrdenesView = OrdenesView;
window.OrdenEstadoPill = OrdenEstadoPill;
window.ordenEstadoMeta = ordenEstadoMeta;
window.fmtOrdenMoney = fmtOrdenMoney;