// ─────────────────────────────────────────────────────
// GUT-67 (F3.5) — ComprasExpedientePanel: pestaña "Compras" del
// expediente (drawer GUT-63). Muestra:
//   · arriba, el comparador de RFQ (GUT-66) si está disponible;
//   · las OCs en firme del expediente (estado, proveedor, importe);
//   · los pagos por hito de cada OC (pendiente/pagado + justificante).
//
// expedienteId = pedidos.id. API REST:
//   GET  /api/expedientes/:pedidoId/ordenes   (OCs + pagos)
//   POST /api/ordenes/:id/pagos               (alta hito)
//   POST /api/ordenes/:id/pagos/:pagoId/pagar (marcar pagado)
//   DELETE .../pagos/:pagoId
// El justificante se sube vía /api/archivos (entity_type=expedientes,
// categoria='06 PEDIDO', contrato GUT-68) y se enlaza al pago.
// ─────────────────────────────────────────────────────

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

const PAGO_PILL = {
  pendiente: { cls: 'warn', label: 'Pendiente' },
  pagado:    { cls: 'ok',   label: 'Pagado' },
};

// ── Alta de hito de pago ──
const PagoAlta = ({ ocId, onAdded, onCancel, onToast }) => {
  const [draft, setDraft] = React.useState({ concepto: '', porcentaje: '', importe: '' });
  const [busy, setBusy] = React.useState(false);
  const set = (k, val) => setDraft(d => ({ ...d, [k]: val }));

  const guardar = async () => {
    setBusy(true);
    try {
      await API.post(`/api/ordenes/${ocId}/pagos`, {
        concepto: draft.concepto || null,
        porcentaje: draft.porcentaje === '' ? null : draft.porcentaje,
        importe: draft.importe === '' ? null : draft.importe,
      });
      onAdded && onAdded();
    } catch (e) { onToast && onToast(e.message || 'Error al crear hito', true); }
    finally { setBusy(false); }
  };

  return (
    <div style={{padding:10,marginTop:8,border:'1px solid var(--line)',borderRadius:8}}>
      <div className="fields-grid" style={{alignItems:'end'}}>
        <div className="field"><label>Concepto</label><input value={draft.concepto} onChange={e=>set('concepto', e.target.value)} placeholder="50% aceptación…"/></div>
        <div className="field"><label>%</label><input type="number" value={draft.porcentaje} onChange={e=>set('porcentaje', e.target.value)}/></div>
        <div className="field"><label>Importe (€)</label><input type="number" value={draft.importe} onChange={e=>set('importe', e.target.value)}/></div>
        <div className="field" style={{display:'flex',gap:6}}>
          <button className="btn primary sm" onClick={guardar} disabled={busy}>{busy ? 'Guardando…' : 'Añadir'}</button>
          <button className="btn ghost sm" onClick={onCancel}>Cancelar</button>
        </div>
      </div>
    </div>
  );
};

// ── Fila de un pago/hito ──
const PagoFila = ({ expedienteId, ocId, pago, onChanged, onToast }) => {
  const [busy, setBusy] = React.useState(false);
  const fileRef = React.useRef(null);
  const pill = PAGO_PILL[pago.estado] || { cls: 'info', label: pago.estado };

  // Sube el justificante (PDF) al expediente (categoria 06 PEDIDO) y
  // marca el pago como pagado enlazando el archivo.
  const subirYPagar = async (file) => {
    setBusy(true);
    try {
      let archivoId = null;
      if (file) {
        const fd = new FormData();
        fd.append('entity_type', 'expedientes');
        fd.append('entity_id', String(expedienteId));
        fd.append('categoria', '06 PEDIDO');
        fd.append('files', file);
        const up = await API.upload('/api/archivos', fd);
        archivoId = up && up.uploaded && up.uploaded[0] && up.uploaded[0].id;
      }
      await API.post(`/api/ordenes/${ocId}/pagos/${pago.id}/pagar`,
        archivoId ? { justificante_archivo_id: archivoId } : {});
      onChanged && onChanged();
    } catch (e) { onToast && onToast(e.message || 'Error al registrar pago', true); }
    finally { setBusy(false); if (fileRef.current) fileRef.current.value = ''; }
  };

  const borrar = async () => {
    if (!confirm('¿Eliminar este hito de pago?')) return;
    try {
      await API.del(`/api/ordenes/${ocId}/pagos/${pago.id}`);
      onChanged && onChanged();
    } catch (e) { onToast && onToast(e.message || 'Error al eliminar', true); }
  };

  const verJustificante = () =>
    API.download(`/api/archivos/${pago.justificante_archivo_id}/download`, pago.justificante_nombre || 'justificante.pdf')
      .catch(e => onToast && onToast(e.message || 'Error al abrir justificante', true));

  return (
    <tr>
      <td>{pago.concepto || '—'}</td>
      <td className="num">{pago.porcentaje != null ? `${Number(pago.porcentaje)}%` : '—'}</td>
      <td className="num strong">{pago.importe != null ? fmtOcMoney(pago.importe) : '—'}</td>
      <td><span className={`pill ${pill.cls}`}><span className="d"/>{pill.label}</span></td>
      <td className="num muted">{pago.fecha || '—'}</td>
      <td>
        {pago.justificante_archivo_id
          ? <button className="btn ghost sm tip" data-tip={pago.justificante_nombre || 'Justificante'} onClick={verJustificante}><Icon name="file" size={12}/> PDF</button>
          : <span className="muted" style={{fontSize:11.5}}>—</span>}
      </td>
      <td style={{whiteSpace:'nowrap'}}>
        {pago.estado !== 'pagado' && (
          <label className="btn primary sm" style={{cursor:'pointer'}} title="Subir justificante y marcar pagado">
            <Icon name="upload" size={12}/> {busy ? '…' : 'Pagar'}
            <input ref={fileRef} type="file" accept=".pdf,.jpg,.jpeg,.png,.webp" style={{display:'none'}}
              onChange={e => { const f = e.target.files && e.target.files[0]; subirYPagar(f || null); }} disabled={busy}/>
          </label>
        )}
        <button className="btn ghost sm tip" data-tip="Eliminar" style={{color:'var(--err)'}} onClick={borrar}><Icon name="trash" size={12}/></button>
      </td>
    </tr>
  );
};

// ── Tarjeta de una OC con sus pagos ──
const OcCard = ({ expedienteId, oc, onChanged, onToast }) => {
  const [adding, setAdding] = React.useState(false);
  const Pill = window.OrdenEstadoPill;
  const pagado = (oc.pagos || []).filter(p => p.estado === 'pagado').reduce((a, p) => a + Number(p.importe || 0), 0);
  const totalPagos = (oc.pagos || []).reduce((a, p) => a + Number(p.importe || 0), 0);

  return (
    <div style={{border:'1px solid var(--line)',borderRadius:8,padding:12,marginBottom:14}}>
      <div style={{display:'flex',alignItems:'center',gap:10,flexWrap:'wrap',marginBottom:8}}>
        <span style={{fontWeight:700,fontSize:13}}>OC {oc.numero || oc.id}</span>
        {Pill ? <Pill estado={oc.estado}/> : <span className="pill">{oc.estado}</span>}
        <span className="muted" style={{fontSize:12}}>{oc.proveedor_nombre || 'Sin proveedor'}</span>
        <span style={{marginLeft:'auto',fontWeight:600,fontSize:12.5}}>{fmtOcMoney(oc.importe_total)}</span>
      </div>

      <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:6,flexWrap:'wrap'}}>
        <span className="muted" style={{fontSize:11.5}}>
          Pagado {fmtOcMoney(pagado)} de {fmtOcMoney(totalPagos)} en hitos
        </span>
        <button className="btn ghost sm" style={{marginLeft:'auto'}} onClick={()=>setAdding(a=>!a)}><Icon name="plus" size={12}/> Hito</button>
      </div>

      {(oc.pagos && oc.pagos.length > 0) && (
        <table className="tbl" style={{fontSize:12.5}}>
          <thead>
            <tr><th>Concepto</th><th>%</th><th>Importe</th><th>Estado</th><th>Fecha</th><th>Justificante</th><th></th></tr>
          </thead>
          <tbody>
            {oc.pagos.map(p => (
              <PagoFila key={p.id} expedienteId={expedienteId} ocId={oc.id} pago={p} onChanged={onChanged} onToast={onToast}/>
            ))}
          </tbody>
        </table>
      )}
      {(!oc.pagos || oc.pagos.length === 0) && !adding && (
        <p className="muted" style={{fontSize:12,margin:'4px 0'}}>Sin hitos de pago. Añade los anticipos (ej. 50/25/25).</p>
      )}

      {adding && (
        <PagoAlta ocId={oc.id} onAdded={()=>{ setAdding(false); onChanged && onChanged(); }} onCancel={()=>setAdding(false)} onToast={onToast}/>
      )}
    </div>
  );
};

const ComprasExpedientePanel = ({ expedienteId, onToast }) => {
  const [ocs, setOcs] = React.useState(null);

  const load = React.useCallback(() => {
    if (!expedienteId) return;
    API.get(`/api/expedientes/${expedienteId}/ordenes`)
      .then(rows => setOcs(Array.isArray(rows) ? rows : []))
      .catch(e => { setOcs([]); onToast && onToast(e.message || 'Error al cargar OCs', true); });
  }, [expedienteId]);

  React.useEffect(() => { load(); }, [load]);

  if (!expedienteId) return <p className="muted" style={{fontSize:12}}>Expediente no disponible.</p>;

  return (
    <div>
      {/* Comparador de RFQ (GUT-66): si aún no existe, no se renderiza nada. */}
      {window.RfqComparador ? <window.RfqComparador expedienteId={expedienteId} onToast={onToast} onChanged={load}/> : null}

      <div className="section-title" style={{marginTop:14}}>Órdenes de compra en firme</div>

      {ocs === null && <p className="muted" style={{fontSize:12}}>Cargando…</p>}
      {ocs !== null && ocs.length === 0 && (
        <p className="muted" style={{fontSize:12}}>
          Sin OCs todavía. Elige una oferta en el comparador de RFQ para generar la orden en firme.
        </p>
      )}
      {ocs !== null && ocs.map(oc => (
        <OcCard key={oc.id} expedienteId={expedienteId} oc={oc} onChanged={load} onToast={onToast}/>
      ))}
    </div>
  );
};

window.ComprasExpedientePanel = ComprasExpedientePanel;