// ─── Finanzas · Pago a proveedor (alta standalone + comprobante de un pago existente) ──
// PagoFinScreen: crea un PAGO nuevo (colección PAGOS) con su comprobante de
// pago. PagoComprobanteScreen: edita/imprime el comprobante de un PAGO YA
// EXISTENTE (imputación incluida). Movidas de screens-finanzas-nuevo.jsx y
// screens-finanzas-docs.jsx respectivamente (P8) — "tomar tal cual" (mapa-
// comprensión.md §Reutilización), sin fusionar entre sí (no son la misma
// entidad en dos fuentes como factura/recibo: una CREA un pago, la otra edita
// el comprobante de uno que ya existe). MUERE `PagoDocExtraScreen` (vivía en
// screens-finanzas-docs.jsx): hallazgo de esta ola al trazar la reachability
// para matar el bloque CobroDetailScreen/PagoDetailScreen — su ÚNICA ruta era
// 'finanzas-pago-docextra', alcanzable solo desde el `onOpenPagoDoc` de
// PagoDetailScreen (ya muerto, ver lista.jsx); `finanzas-doc-detail` (el
// visor vivo) nunca tuvo un caso para el kind 'docExtra'. No tenía otro
// caller en todo el repo (grep confirmado) — directamente descartable, no
// "retrabajar".
// Renombres (P8, "_fin*/_nu* a nombres claros"): _pagoProveedor/_persistPago/
// _pagoFacturas colapsaron en resolverProveedorPago/persistirPago/
// facturasDelPago (screens/finanzas/compartido.jsx, compartidos con
// factura-recibida.jsx); _proveedorFields se colapsó con _provFieldsNu en
// buildProveedorFields (mismo archivo); _finHoy/_finAddDays murieron —
// MicosTodayISO()/MicosAddDays() directo (dominio/formato.js); _nextOPNumero
// (copia de _opNextNum, que P5 ya había eliminado del lado -nuevo.jsx) queda
// como `nextOPNumero()`, único remanente, local acá (su único consumidor).
// FIX addenda arquitecto (hallazgo P11, misma familia que "Recibo undefined"):
// el título del visor de impresión cae a publicId/"sin número" en vez de
// interpolar `undefined` si comprobantePagoDoc no trae numeroComprobante.
// Expone a window: PagoFinScreen, PagoComprobanteScreen. Consume window.
// PROVEEDORES/COMPRAS/PAGOS, MicosStore, useDocEdit/buildDocActions/
// ConfirmDeleteModal (ui/doc-kit-edit.jsx), DocumentShell/DocCard/PartyBlock/
// ObservacionesCard/buildEmisorFields (ui/doc-kit-shell.jsx), DocMetaStrip
// (ui/doc-kit-meta.jsx), InstrumentosTable (screens/finanzas/recibo.jsx —
// carga antes en el HTML), ImputacionCard (screens/finanzas/imputacion.jsx),
// resolverProveedorPago/persistirPago/facturasDelPago/buildProveedorFields
// (screens/finanzas/compartido.jsx), MicosNextSeqId (dominio/secuencias.js),
// window.PartySelectorModal, MicosDocPago/openPrintDoc.

// Próximo número de Orden de Pago 'OP-########'. Único remanente tras P5
// (ver header): tanto _opNextNum (screens-finanzas-nuevo.jsx) como su copia
// literal _nextOPNumero (acá) apuntaban a lo mismo; la primera ya murió, esta
// queda como la única fuente.
function nextOPNumero() {
  return MicosNextSeqId(window.PAGOS || [], (p) => (p.comprobantePagoDoc && p.comprobantePagoDoc.numeroComprobante) || (p.comprobantePago && p.comprobantePago.codigo) || '', 'OP-', 8);
}

// Comprobante a mostrar / imprimir: numeroComprobante (siempre lo fabrica
// emptyDoc/nextOPNumero) con fallback honesto — mismo criterio que
// numeroReciboMostrar (screens/finanzas/recibo.jsx, FIX hallazgo P11).
function numeroPagoMostrar(pago, doc) {
  return (doc && doc.numeroComprobante) || pago.publicId || 'Pago sin número';
}

// ───────────────────────────────────────────────
// ALTA: crea un PAGO nuevo con su comprobante.
// ───────────────────────────────────────────────
function PagoFinScreen({ isCreate = true, onBack, onSaved, backLabel }) {
  const blank = React.useMemo(() => makeBlankPagoRecord(), []);
  const original = blank;
  const co = COMPANY_CONFIG;

  const { editing, draft, setDraft, discardEdit, saveEdit, patch } = useDocEdit(() => ({
    proveedor: null,
    numeroComprobante: nextOPNumero(),
    fechaPago: MicosTodayISO(),
    observaciones: '', importeLetras: '',
    instrumentos: [],
    imputaciones: [],
  }), {
    startEditing: true,
    onCancel: () => onBack && onBack(),
    onSave: (d) => {
      const instrumentos = (d.instrumentos || []).map((it) => ({ ...it }));
      const total = instrumentos.reduce((s, i) => s + (Number(i.importe) || 0), 0);
      const prov = d.proveedor;
      const docObj = { numeroComprobante: d.numeroComprobante, fechaPago: d.fechaPago, observaciones: d.observaciones || '', importeLetras: d.importeLetras || '', instrumentos };
      const pago = {
        ...original,
        proveedor: prov ? (prov.razonSocial || prov.nombre || '') : '',
        proveedorId: prov ? prov.id : null,
        fecha: d.fechaPago, total, estado: 'PAGADO',
        comprobantePagoDoc: docObj,
        comprobantePago: { codigo: docObj.numeroComprobante, fecha: docObj.fechaPago },
        imputaciones: (d.imputaciones || []).map((it) => ({ ...it })),
        __nuevo: true,
      };
      MicosStore.create('pagos', pago);
      onSaved && onSaved(original.id);
    },
  });

  const [picker, setPicker] = React.useState(false);
  const pg = draft || {};
  const prov = pg.proveedor;
  const patchInstrumento = (idx, field, value) => setDraft((d) => ({ ...d, instrumentos: d.instrumentos.map((it, i) => i === idx ? { ...it, [field]: value } : it) }));
  const addInstrumento = () => setDraft((d) => ({ ...d, instrumentos: [...d.instrumentos, { tipo: 'TRANSFERENCIA', banco: '', numero: '', fechaEmision: '', fechaCobro: '', importe: 0 }] }));
  const removeInstrumento = (idx) => setDraft((d) => ({ ...d, instrumentos: d.instrumentos.filter((_, i) => i !== idx) }));
  const totalPagado = (pg.instrumentos || []).reduce((s, i) => s + (Number(i.importe) || 0), 0);

  const actions = (
    <React.Fragment>
      <button onClick={discardEdit} className="btn btn-outline"><IconX size={14} /><span className="hidden sm:inline">Descartar</span></button>
      <button onClick={saveEdit} className="btn btn-primary"><IconCheck size={14} /><span className="hidden sm:inline">Guardar</span></button>
    </React.Fragment>
  );

  const subtitle = (
    <React.Fragment>
      <span className="font-bold" style={{ color: 'var(--foreground)' }}>{(prov && (prov.razonSocial || prov.nombre)) || '— elegí proveedor —'}</span>
      <span className="mx-1.5 opacity-50">·</span>
      <span className="font-mono font-bold" style={{ color: 'var(--accent)' }}>{original.publicId}</span>
    </React.Fragment>
  );

  return (
    <DocumentShell
      onBack={onBack}
      backLabel={backLabel || 'Volver a Finanzas'}
      eyebrow="Pago"
      bigId={pg.numeroComprobante}
      subtitle={subtitle}
      editing={true}
      isCreate={true}
      actions={actions}
    >
      <DocMetaStrip editing={true} items={[
        { label: 'Comprobante', value: pg.numeroComprobante, mono: true, accent: true, editable: true, onChange: (v) => patch('numeroComprobante', v) },
        { label: 'Fecha de pago', value: pg.fechaPago, mono: true, editable: true, inputType: 'date', onChange: (v) => patch('fechaPago', v) },
        { label: 'Total pagado', value: formatMoney(totalPagado), mono: true, accent: true },
      ]} />

      <DocCard className="relative">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <PartyBlock eyebrow="Emisor" name={co.nombre} sub={co.situacionIva} fields={buildEmisorFields(co)} />
          <PartyBlock eyebrow="Beneficiario" name={(prov && (prov.razonSocial || prov.nombre)) || '— elegí uno —'} sub={(prov && prov.condicionIva) || 'Responsable Inscripto'} fields={buildProveedorFields(prov)} />
        </div>
        <button onClick={() => setPicker(true)} title="Elegir proveedor" className="party-edit-btn absolute" style={{ top: 16, right: 16 }} type="button">
          <IconPencil size={13} />
        </button>
      </DocCard>

      <ImputacionCard lado="pago" total={totalPagado} value={pg.imputaciones || []} onChange={(next) => patch('imputaciones', next)} />

      <DocCard editing={true}>
        <div className="flex items-center justify-between mb-5">
          <p className="text-[11px] font-bold uppercase tracking-[0.2em]" style={{ color: 'var(--accent)' }}>Formas de pago</p>
          <p className="text-[11.5px] font-bold uppercase tracking-[0.1em]" style={{ color: 'var(--muted-foreground)' }}>
            {(pg.instrumentos || []).length} {(pg.instrumentos || []).length === 1 ? 'instrumento' : 'instrumentos'}
          </p>
        </div>
        <InstrumentosTable instrumentos={pg.instrumentos || []} editing={true} onChange={patchInstrumento} onRemove={removeInstrumento} onAdd={addInstrumento} />
        <div className="mt-8 rounded-xl px-6 py-5" style={{ background: 'var(--card)', border: '1px solid color-mix(in oklab, var(--border) 55%, transparent)' }}>
          <div className="flex flex-wrap items-end justify-between gap-3">
            <div className="space-y-1">
              <p className="text-[11px] font-bold uppercase tracking-[0.2em]" style={{ color: 'var(--foreground)' }}>Total pagado</p>
              {pg.importeLetras && <p className="text-[11.5px] leading-snug max-w-[44ch]" style={{ color: 'var(--muted-foreground)' }}>{pg.importeLetras}</p>}
            </div>
            <p className="text-[clamp(32px,4.6vw,42px)] font-extrabold tabular-nums tracking-[-0.02em] leading-none" style={{ color: 'var(--accent)' }}>{formatMoney(totalPagado)}</p>
          </div>
        </div>
      </DocCard>

      <ObservacionesCard editing={true} value={pg.observaciones} onChange={(v) => patch('observaciones', v)} />

      {picker && window.PartySelectorModal && (
        <window.PartySelectorModal type="proveedor" open={true} onClose={() => setPicker(false)}
          onPick={(obj) => { if (obj) setDraft((d) => ({ ...d, proveedor: obj })); setPicker(false); }} />
      )}
    </DocumentShell>
  );
}

// ───────────────────────────────────────────────
// COMPROBANTE de un PAGO existente (orden de pago), con su ImputacionCard.
// ───────────────────────────────────────────────
function PagoComprobanteScreen({ pago, onBack, backLabel, onDelete }) {
  const co = COMPANY_CONFIG;
  const prov = resolverProveedorPago(pago);

  const buildFromLight = (light) => {
    if (!light) return null;
    const tipo = /CHQ/i.test(light.codigo || '') ? 'CHEQUE' : 'TRANSFERENCIA';
    return {
      numeroComprobante: light.codigo || nextOPNumero(),
      fechaPago: light.fecha || MicosTodayISO(),
      observaciones: '', importeLetras: '',
      instrumentos: [{ tipo, banco: '', numero: light.codigo || '', fechaEmision: light.fecha || '', fechaCobro: light.fecha || '', importe: Number(pago.total) || 0 }],
    };
  };
  const emptyDoc = () => {
    const facturas = facturasDelPago(pago);
    const hoy = MicosTodayISO();
    // Un instrumento de pago por CADA factura recibida (importe = total de cada una).
    const instrumentos = facturas.map((fac) => {
      const total = MicosItemsMath ? MicosItemsMath.summary(fac.items || []).total : 0;
      const num = fac.numero ? formatComprobanteCodigo(fac.tipoFactura, fac.puntoVenta, fac.numero) : '';
      return { tipo: 'TRANSFERENCIA', banco: num ? 'Factura ' + num : '', numero: '', fechaEmision: hoy, fechaCobro: hoy, importe: Math.round(total) };
    });
    return {
      numeroComprobante: nextOPNumero(),
      fechaPago: hoy,
      observaciones: '', importeLetras: '',
      instrumentos,
    };
  };

  const original = React.useMemo(
    () => pago.comprobantePagoDoc || buildFromLight(pago.comprobantePago) || emptyDoc(),
    [pago.comprobantePagoDoc, pago.comprobantePago]
  );
  const isCreate = !pago.comprobantePagoDoc && !pago.comprobantePago;
  const [toast, setToast] = React.useState(null);

  const { editing, draft, setDraft, enterEdit, discardEdit, saveEdit, patch } = useDocEdit(() => ({
    fechaPago: original.fechaPago,
    observaciones: original.observaciones || '',
    importeLetras: original.importeLetras || '',
    instrumentos: (original.instrumentos || []).map((it) => ({ ...it })),
  }), {
    startEditing: isCreate,
    onCancel: () => { if (isCreate) onBack(); },
    onSave: (d) => {
      const instrumentos = (d.instrumentos || []).map((it) => ({ ...it }));
      const docObj = {
        numeroComprobante: original.numeroComprobante,
        fechaPago: d.fechaPago,
        observaciones: d.observaciones || '',
        importeLetras: d.importeLetras || '',
        instrumentos,
      };
      pago.comprobantePagoDoc = docObj;
      pago.comprobantePago = { codigo: docObj.numeroComprobante, fecha: docObj.fechaPago };
      persistirPago(pago);
      setToast(`Pago ${numeroPagoMostrar(pago, docObj)} ${isCreate ? 'registrado' : 'guardado'}`);
      setTimeout(() => setToast(null), 3600);
    },
  });

  const pg = editing && draft ? draft : original;
  const patchInstrumento = (idx, field, value) => setDraft((d) => ({
    ...d, instrumentos: d.instrumentos.map((it, i) => i === idx ? { ...it, [field]: value } : it),
  }));
  const addInstrumento = () => setDraft((d) => ({ ...d, instrumentos: [...d.instrumentos, { tipo: 'TRANSFERENCIA', banco: '', numero: '', fechaEmision: '', fechaCobro: '', importe: 0 }] }));
  const removeInstrumento = (idx) => setDraft((d) => ({ ...d, instrumentos: d.instrumentos.filter((_, i) => i !== idx) }));

  const totalPagado = pg.instrumentos.reduce((s, i) => s + (Number(i.importe) || 0), 0);

  const onPrint = () => {
    const mod = MicosDocPago;
    if (!mod) return;
    // Reresolver el pago fresco del store para imprimir lo último guardado.
    const livePago = (window.PAGOS || []).find((x) => x.id === pago.id) || pago;
    const docPago = livePago.comprobantePagoDoc || { numeroComprobante: original.numeroComprobante, fechaPago: pg.fechaPago, instrumentos: pg.instrumentos };
    const instrumentos = docPago.instrumentos || pg.instrumentos || [];
    const totalLive = instrumentos.reduce((s, i) => s + (Number(i.importe) || 0), 0);
    const fakeExp = { entidad: { razonSocial: prov.razonSocial, cuit: prov.cuit, domicilio: prov.domicilio, localidad: prov.localidad, telefono: prov.telefono, email: prov.email, condicionIva: prov.condicionIva } };
    const data = mod.fromExpediente(fakeExp, co, { numeroComprobante: docPago.numeroComprobante, fechaPago: docPago.fechaPago, instrumentos: instrumentos, total: totalLive });
    openPrintDoc(data, { mod, title: `Pago ${numeroPagoMostrar(pago, docPago)}`, subtitle: `${pago.publicId} · ${prov.razonSocial}` });
  };
  const actions = buildDocActions({ editing, enterEdit, discardEdit, saveEdit, onPrint, onDelete: editing && onDelete ? onDelete : undefined });

  const subtitle = (
    <React.Fragment>
      <span className="font-bold" style={{ color: 'var(--foreground)' }}>{prov.razonSocial}</span>
      <span className="mx-1.5 opacity-50">·</span>
      <span className="font-mono font-bold" style={{ color: 'var(--accent)' }}>{pago.publicId}</span>
    </React.Fragment>
  );

  return (
    <DocumentShell
      onBack={onBack}
      backLabel={backLabel || 'Volver al pago'}
      eyebrow="Pago"
      bigId={numeroPagoMostrar(pago, original)}
      subtitle={subtitle}
      editing={editing}
      isCreate={isCreate}
      toast={toast}
      actions={actions}
    >
      <DocMetaStrip editing={editing} items={[
        { label: 'Comprobante', value: numeroPagoMostrar(pago, original), mono: true, accent: true },
        { label: 'Fecha de pago', value: editing ? draft.fechaPago : formatDate(original.fechaPago), mono: true, editable: editing, inputType: 'date', onChange: (v) => patch('fechaPago', v) },
        { label: 'Total pagado', value: formatMoney(totalPagado), mono: true, accent: true },
      ]} />

      <ImputacionCard collection="pagos" recordId={pago.id} lado="pago" total={totalPagado} editing={editing} />

      {/* Emisor = Micos (nosotros) · Beneficiario = Proveedor */}
      <DocCard>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          <PartyBlock
            eyebrow="Emisor"
            name={co.nombre}
            sub={co.situacionIva}
            fields={buildEmisorFields(co)}
          />
          <PartyBlock
            eyebrow="Beneficiario"
            name={prov.razonSocial}
            sub={prov.condicionIva || 'Responsable Inscripto'}
            fields={buildProveedorFields(prov)}
          />
        </div>
      </DocCard>

      <DocCard editing={editing}>
        <div className="flex items-center justify-between mb-5">
          <p className="text-[11px] font-bold uppercase tracking-[0.2em]" style={{ color: 'var(--accent)' }}>
            Formas de pago
          </p>
          <p className="text-[11.5px] font-bold uppercase tracking-[0.1em]" style={{ color: 'var(--muted-foreground)' }}>
            {pg.instrumentos.length} {pg.instrumentos.length === 1 ? 'instrumento' : 'instrumentos'}
          </p>
        </div>
        <InstrumentosTable
          instrumentos={pg.instrumentos}
          editing={editing}
          onChange={patchInstrumento}
          onRemove={removeInstrumento}
          onAdd={addInstrumento}
        />
        <div className="mt-8 rounded-xl px-6 py-5" style={{ background: 'var(--card)', border: '1px solid color-mix(in oklab, var(--border) 55%, transparent)' }}>
          <div className="flex flex-wrap items-end justify-between gap-3">
            <div className="space-y-1">
              <p className="text-[11px] font-bold uppercase tracking-[0.2em]" style={{ color: 'var(--foreground)' }}>Total pagado</p>
              {(editing ? draft.importeLetras : original.importeLetras) &&
                <p className="text-[11.5px] leading-snug max-w-[44ch]" style={{ color: 'var(--muted-foreground)' }}>{editing ? draft.importeLetras : original.importeLetras}</p>
              }
            </div>
            <p className="text-[clamp(32px,4.6vw,42px)] font-extrabold tabular-nums tracking-[-0.02em] leading-none" style={{ color: 'var(--accent)' }}>
              {formatMoney(totalPagado)}
            </p>
          </div>
        </div>
      </DocCard>

      <ObservacionesCard editing={editing} value={editing ? draft.observaciones : original.observaciones} onChange={(v) => patch('observaciones', v)} />
    </DocumentShell>
  );
}

Object.assign(window, { PagoFinScreen, PagoComprobanteScreen });