// Cuentas corrientes — Casas de repuestos

const METODOS_PAGO = ["Efectivo", "Transferencia", "Cheque", "Tarjeta de débito", "Tarjeta de crédito"];

// Cuánto se pagó de un remito puntual, sumando su historial de pagos
function pagadoDe(registro) {
  return (registro.pagosHistorial || []).reduce((s, p) => s + (Number(p.monto) || 0), 0);
}

// Saldo pendiente de un remito puntual (puede quedar negativo si se pagó de más)
function saldoRemito(registro) {
  return (registro.valorRemito || 0) - pagadoDe(registro) - (registro.descuento || 0);
}

// Estado de un remito: "pagado" | "parcial" | "pendiente"
function estadoRemito(registro) {
  const saldo = saldoRemito(registro);
  if (saldo <= 0) return "pagado";
  if (pagadoDe(registro) > 0) return "parcial";
  return "pendiente";
}

function calcSaldo(registros) {
  return registros.reduce((s, r) => s + saldoRemito(r), 0);
}

// Fecha del último movimiento de la cuenta (alta de remito o pago, lo que sea más reciente)
function ultimoMovimiento(registros) {
  const fechas = registros.flatMap(r => [r.fecha, ...(r.pagosHistorial || []).map(p => p.fecha)]);
  return fechas.length ? fechas.sort().at(-1) : null;
}

// Concilia los repuestos (con proveedor) de una orden contra las cuentas corrientes:
// agrega los nuevos, actualiza los que cambiaron de monto/proveedor, y borra los que ya no están en la orden.
function syncRepuestosConCuentas(cuentasCorrientes, orden) {
  const items = (orden.repuestosItems || []).filter(l => l.proveedorId && Number(l.compra) > 0);
  const itemIds = new Set(items.map(l => l.id));

  // Paso A: sacar de cualquier cuenta los registros de esta orden cuyo repuesto ya no corresponde
  //    (se borró la línea, se le quitó el proveedor, o quedó sin costo).
  let cuentas = cuentasCorrientes.map(c => ({
    ...c,
    registros: c.registros.filter(r => !(r.ordenId === orden.numero && !itemIds.has(r.repuestoId))),
  }));

  // Paso B: por cada repuesto vigente, actualizar si ya está en la cuenta correcta, moverlo si cambió
  //    de proveedor, o crearlo si es nuevo.
  items.forEach(line => {
    const yaEnCuentaCorrecta = cuentas.some(c =>
      c.id === line.proveedorId && c.registros.some(r => r.ordenId === orden.numero && r.repuestoId === line.id)
    );

    cuentas = cuentas.map(c => {
      const idx = c.registros.findIndex(r => r.ordenId === orden.numero && r.repuestoId === line.id);
      if (idx === -1) return c;
      if (c.id !== line.proveedorId) {
        // estaba en otra cuenta (cambió el proveedor) → se borra de acá, se crea en la nueva más abajo
        return { ...c, registros: c.registros.filter((_, i) => i !== idx) };
      }
      const reg = c.registros[idx];
      const registros = [...c.registros];
      registros[idx] = { ...reg, valorRemito: Number(line.compra), remito: line.descripcion || reg.remito };
      return { ...c, registros };
    });

    if (!yaEnCuentaCorrecta) {
      cuentas = cuentas.map(c => c.id !== line.proveedorId ? c : {
        ...c,
        registros: [...c.registros, {
          id: `orden-${orden.numero}-${line.id}`,
          fecha: orden.entrada,
          remito: line.descripcion || "",
          valorRemito: Number(line.compra),
          descuento: 0,
          pagosHistorial: [],
          ordenId: orden.numero,
          repuestoId: line.id,
          origen: "orden",
        }],
      });
    }
  });

  return cuentas;
}

function CuentasCorrientesView({ data, setData }) {
  const [selectedId, setSelectedId] = React.useState(null);
  const [showNewCasa, setShowNewCasa] = React.useState(false);
  const [busqueda, setBusqueda] = React.useState("");

  const cuentas = data.cuentasCorrientes || [];
  const cuentasFiltradas = busqueda.trim()
    ? cuentas.filter(c => c.nombre.toLowerCase().includes(busqueda.toLowerCase()))
    : cuentas;

  if (selectedId != null) {
    const cuenta = cuentas.find(c => c.id === selectedId);
    if (!cuenta) { setSelectedId(null); return null; }
    return <CuentaDetalle cuenta={cuenta} onBack={() => setSelectedId(null)} setData={setData} />;
  }

  const deudaTotal = cuentas.reduce((s, c) => { const sal = calcSaldo(c.registros); return s + (sal > 0 ? sal : 0); }, 0);
  const favorTotal = cuentas.reduce((s, c) => { const sal = calcSaldo(c.registros); return s + (sal < 0 ? -sal : 0); }, 0);
  // Mes de referencia: el más reciente con pagos registrados (no el real-"hoy", que puede no tener datos)
  const todosPagos = cuentas.flatMap(c => c.registros).flatMap(r => r.pagosHistorial || []);
  const mesCurrent  = todosPagos.map(p => p.fecha.slice(0, 7)).sort().at(-1) || new Date().toISOString().slice(0, 7);
  const pagosMes    = todosPagos.filter(p => p.fecha.startsWith(mesCurrent))
    .reduce((s, p) => s + (Number(p.monto) || 0), 0);

  const addCasa = (form) => {
    setData(d => ({
      ...d,
      cuentasCorrientes: [...(d.cuentasCorrientes || []), { ...form, id: Date.now(), registros: [] }],
    }));
    setShowNewCasa(false);
  };

  return (
    <>
      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(3,1fr)" }}>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--accent)" }} />
          <div className="kpi__icon" style={{ background: "rgba(230,57,70,.1)", color: "var(--accent)" }}>
            <Icon.accounts width="16" height="16" />
          </div>
          <div className="kpi__label">Deuda con proveedores</div>
          <div className="kpi__value mono" style={{ color: deudaTotal > 0 ? "var(--accent)" : "var(--text-mute)" }}>
            {fmtMoneyShort(deudaTotal)}
          </div>
          <div className="kpi__sub muted">
            {cuentas.filter(c => calcSaldo(c.registros) > 0).length} con saldo pendiente
          </div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--ok)" }} />
          <div className="kpi__icon" style={{ background: "rgba(63,178,127,.12)", color: "var(--ok)" }}>
            <Icon.arrowUp width="16" height="16" />
          </div>
          <div className="kpi__label">Saldos a nuestro favor</div>
          <div className="kpi__value mono" style={{ color: "var(--ok)" }}>
            {fmtMoneyShort(favorTotal)}
          </div>
          <div className="kpi__sub muted">
            {cuentas.filter(c => calcSaldo(c.registros) < 0).length} con crédito a favor
          </div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--brand)" }} />
          <div className="kpi__icon" style={{ background: "var(--brand-soft)", color: "var(--brand)" }}>
            <Icon.cash width="16" height="16" />
          </div>
          <div className="kpi__label">Pagos este mes</div>
          <div className="kpi__value mono">{fmtMoneyShort(pagosMes)}</div>
          <div className="kpi__sub muted">a proveedores</div>
        </div>
      </div>

      <div className="filter-bar">
        <div style={{ position: "relative", display: "flex", alignItems: "center" }}>
          <Icon.search style={{ position: "absolute", left: 10, color: "var(--text-dim)", pointerEvents: "none" }} />
          <input
            value={busqueda}
            onChange={e => setBusqueda(e.target.value)}
            placeholder="Buscar proveedor…"
            style={{ paddingLeft: 32, width: 220 }}
          />
        </div>
        <div style={{ flex: 1 }} />
        <button className="btn btn--primary" onClick={() => setShowNewCasa(true)}>
          <Icon.plus /> Nueva casa de repuestos
        </button>
      </div>

      {cuentas.length === 0 ? (
        <div className="card">
          <div className="card__body" style={{ textAlign: "center", padding: "52px 24px" }}>
            <div className="muted" style={{ fontSize: 14 }}>No hay casas de repuestos registradas aún.</div>
            <button className="btn btn--primary" style={{ marginTop: 18 }} onClick={() => setShowNewCasa(true)}>
              <Icon.plus /> Agregar primera casa
            </button>
          </div>
        </div>
      ) : (
        <>
          <div className="section-title">
            Proveedores activos
            <span className="mono muted" style={{ fontSize: 11, fontWeight: 400, marginLeft: "auto" }}>
              {busqueda.trim() ? `${cuentasFiltradas.length} de ${cuentas.length}` : `${cuentas.length} en total`}
            </span>
          </div>
          {cuentasFiltradas.length === 0 ? (
            <div className="card">
              <div className="card__body muted" style={{ textAlign: "center", padding: 28 }}>
                No se encontraron proveedores para "{busqueda}".
              </div>
            </div>
          ) : (
          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            {cuentasFiltradas.map(cuenta => {
              const saldo        = calcSaldo(cuenta.registros);
              const totalRemitos = cuenta.registros.reduce((s, r) => s + (r.valorRemito || 0), 0);
              const totalPagado  = cuenta.registros.reduce((s, r) => s + pagadoDe(r) + (r.descuento || 0), 0);
              const lastMov      = ultimoMovimiento(cuenta.registros);
              return (
                <div key={cuenta.id} className="proveedor-card" onClick={() => setSelectedId(cuenta.id)}>
                  <div className="proveedor-card__avatar">
                    {cuenta.nombre.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase()}
                  </div>
                  <div className="proveedor-card__info">
                    <div className="proveedor-card__nombre">{cuenta.nombre}</div>
                    <div className="proveedor-card__meta">
                      {cuenta.cuit      && <span>CUIT {cuenta.cuit}</span>}
                      {cuenta.telefono  && <span>{cuenta.telefono}</span>}
                      {cuenta.direccion && <span>{cuenta.direccion}</span>}
                    </div>
                  </div>
                  <div className="proveedor-card__stats">
                    <div className="proveedor-card__stat">
                      <div className="proveedor-card__stat-label">Remitos</div>
                      <div className="proveedor-card__stat-value mono">{fmtMoneyShort(totalRemitos)}</div>
                    </div>
                    <div className="proveedor-card__stat">
                      <div className="proveedor-card__stat-label">Pagado</div>
                      <div className="proveedor-card__stat-value mono" style={{ color: "var(--ok)" }}>{fmtMoneyShort(totalPagado)}</div>
                    </div>
                    <div className="proveedor-card__stat">
                      <div className="proveedor-card__stat-label">Últ. movimiento</div>
                      <div className="proveedor-card__stat-value mono dim" style={{ fontSize: 12 }}>
                        {lastMov ? fmtDate(lastMov) : "—"}
                      </div>
                    </div>
                    <div className="proveedor-card__saldo">
                      <div className="proveedor-card__stat-label">Saldo</div>
                      <div className="proveedor-card__stat-value mono" style={{
                        fontSize: 20,
                        color: saldo > 0 ? "var(--accent)" : saldo < 0 ? "var(--ok)" : "var(--text-mute)",
                      }}>
                        {saldo === 0 ? "Al día" : saldo > 0 ? fmtMoney(saldo) : `+${fmtMoneyShort(-saldo)} a favor`}
                      </div>
                    </div>
                  </div>
                  <Icon.chevronRight className="proveedor-card__arrow" />
                </div>
              );
            })}
          </div>
          )}
        </>
      )}

      {showNewCasa && <NuevaCasaModal onClose={() => setShowNewCasa(false)} onSave={addCasa} />}
    </>
  );
}

const MESES_CC = ["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
function mesLabelCC(mesKey) {
  const [a, m] = mesKey.split("-");
  return `${MESES_CC[Number(m) - 1]} ${a}`;
}

const ESTADO_REMITO_LABEL = { pendiente: "Pendiente", parcial: "Parcial", pagado: "Pagado" };
const ESTADO_REMITO_PILL  = { pendiente: "ingresado", parcial: "proceso", pagado: "pagado" };

// Tabla de remitos reutilizada por las pestañas Pendientes / Historial de CuentaDetalle.
function TablaRemitos({ rows, onPagar, onVerPagos, onEliminar }) {
  return (
    <div className="table-wrap">
    <table className="table">
      <thead>
        <tr>
          <th>Fecha</th>
          <th>N° de orden</th>
          <th className="num">Valor</th>
          <th className="num">Pagado</th>
          <th className="num">Saldo</th>
          <th style={{ width: 110 }}>Estado</th>
          <th style={{ width: 140 }}></th>
        </tr>
      </thead>
      <tbody>
        {rows.map(r => {
          const pagado    = pagadoDe(r);
          const sal       = saldoRemito(r);
          const estado    = estadoRemito(r);
          const historial = r.pagosHistorial || [];
          const pagosTitle = historial.length
            ? historial.map(p => `${fmtMoney(p.monto)} (${fmtDate(p.fecha)}${p.metodoPago ? ", " + p.metodoPago : ""})`).join(" · ")
            : "Sin pagos registrados";
          return (
            <tr key={r.id} style={{ opacity: estado === "pagado" ? 0.55 : 1 }}>
              <td className="mono dim">{fmtDate(r.fecha)}</td>
              <td className="mono" style={{ fontSize: 12 }}>
                {r.origen === "orden" && (
                  <span className="pill pill--compra" style={{ marginRight: 6 }} title={`Generado automáticamente desde la orden #${r.ordenId}`}>
                    #{r.ordenId}
                  </span>
                )}
                {r.remito || <span className="muted">—</span>}
              </td>
              <td className="num mono">
                {fmtMoney(r.valorRemito)}
                {r.descuento > 0 && <div className="muted" style={{ fontSize: 10 }}>−{fmtMoney(r.descuento)} desc.</div>}
              </td>
              <td className="num mono" title={pagosTitle} style={{ color: pagado > 0 ? "var(--ok)" : "var(--text-mute)", cursor: historial.length ? "help" : "default" }}>
                {pagado > 0 ? fmtMoney(pagado) : "—"}
              </td>
              <td className="num mono" style={{ fontWeight: 700, color: sal > 0 ? "var(--accent)" : sal < 0 ? "var(--ok)" : "var(--text-mute)" }}>
                {sal === 0 ? "—" : fmtMoney(Math.abs(sal))}
              </td>
              <td>
                <span className={`pill pill--${ESTADO_REMITO_PILL[estado]}`}>
                  <span className="pill__dot" />{ESTADO_REMITO_LABEL[estado]}
                </span>
              </td>
              <td>
                <div style={{ display: "flex", gap: 4 }}>
                  {estado !== "pagado" && onPagar && (
                    <button className="btn btn--sm" onClick={() => onPagar(r)}>Pagar</button>
                  )}
                  {historial.length > 0 && onVerPagos && (
                    <button className="btn btn--sm" style={{ color: "var(--text-dim)" }} onClick={() => onVerPagos(r)} title="Ver y anular pagos">Pagos</button>
                  )}
                  {!r.origen && onEliminar && (
                    <button className="btn btn--sm" style={{ color: "var(--text-mute)" }} title="Eliminar remito"
                      onClick={() => { if (window.confirm(`¿Eliminar remito "${r.remito || "(sin número)"}"?`)) onEliminar(r.id); }}>✕</button>
                  )}
                </div>
              </td>
            </tr>
          );
        })}
      </tbody>
    </table>
    </div>
  );
}

function CuentaDetalle({ cuenta, onBack, setData }) {
  const [showNuevoRemito,  setShowNuevoRemito]  = React.useState(false);
  const [pagandoRemito,    setPagandoRemito]    = React.useState(null);
  const [verPagosRemitoId, setVerPagosRemitoId] = React.useState(null);
  const [tab, setTab] = React.useState("pendientes");

  const saldo        = calcSaldo(cuenta.registros);
  const totalRemitos = cuenta.registros.reduce((s, r) => s + (r.valorRemito || 0), 0);
  const totalPagado  = cuenta.registros.reduce((s, r) => s + pagadoDe(r), 0);
  const totalDesc    = cuenta.registros.reduce((s, r) => s + (r.descuento || 0), 0);
  const totalPagos   = cuenta.registros.flatMap(r => r.pagosHistorial || []).length;
  const pendientes   = cuenta.registros.filter(r => estadoRemito(r) !== "pagado");

  // Pestaña "Pendientes": solo lo que falta pagar, más viejo primero (para pagar lo más antiguo primero).
  const pendientesRows = [...pendientes].sort((a, b) => a.fecha.localeCompare(b.fecha));

  // Pestaña "Historial": todos los remitos (pagados o no), agrupados por mes — más reciente primero.
  const porMes = {};
  cuenta.registros.forEach(r => {
    const k = (r.fecha || "").slice(0, 7);
    if (!porMes[k]) porMes[k] = [];
    porMes[k].push(r);
  });
  const mesesHistorial = Object.keys(porMes).sort((a, b) => b.localeCompare(a));

  const addRemito = (form) => {
    setData(d => ({
      ...d,
      cuentasCorrientes: d.cuentasCorrientes.map(c =>
        c.id === cuenta.id ? { ...c, registros: [...c.registros, { ...form, id: Date.now(), pagosHistorial: [] }] } : c
      ),
    }));
    setShowNuevoRemito(false);
  };

  const registrarPago = (registroId, pago) => {
    setData(d => ({
      ...d,
      cuentasCorrientes: d.cuentasCorrientes.map(c => c.id !== cuenta.id ? c : {
        ...c,
        registros: c.registros.map(r => r.id !== registroId ? r : {
          ...r,
          pagosHistorial: [...(r.pagosHistorial || []), { ...pago, id: Date.now() }],
        }),
      }),
    }));
    setPagandoRemito(null);
  };

  const eliminarPago = (registroId, pagoId) => {
    setData(d => ({
      ...d,
      cuentasCorrientes: d.cuentasCorrientes.map(c => c.id !== cuenta.id ? c : {
        ...c,
        registros: c.registros.map(r => r.id !== registroId ? r : {
          ...r,
          pagosHistorial: (r.pagosHistorial || []).filter(p => p.id !== pagoId),
        }),
      }),
    }));
  };

  const eliminarRemito = (registroId) => {
    setData(d => ({
      ...d,
      cuentasCorrientes: d.cuentasCorrientes.map(c => c.id !== cuenta.id ? c : {
        ...c,
        registros: c.registros.filter(r => r.id !== registroId),
      }),
    }));
  };

  return (
    <>
      <div className="filter-bar cc-detail-bar">
        <button className="btn btn--ghost" onClick={onBack}>← Volver</button>
        <span className="muted cc-detail-bar__crumb" style={{ fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: 1 }}>
          Cuentas corrientes /
        </span>
        <span style={{ fontWeight: 600 }}>{cuenta.nombre}</span>
        <div style={{ flex: 1 }} />
        <button className="btn btn--primary" onClick={() => setShowNuevoRemito(true)}>
          <Icon.plus /> Nuevo remito
        </button>
      </div>

      <div className="kpi-grid" style={{ gridTemplateColumns: "repeat(4,1fr)" }}>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--brand)" }} />
          <div className="kpi__icon" style={{ background: "var(--brand-soft)", color: "var(--brand)" }}>
            <Icon.accounts width="16" height="16" />
          </div>
          <div className="kpi__label">Total remitos</div>
          <div className="kpi__value mono">{fmtMoneyShort(totalRemitos)}</div>
          <div className="kpi__sub muted">{cuenta.registros.length} remito(s)</div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--ok)" }} />
          <div className="kpi__icon" style={{ background: "rgba(63,178,127,.12)", color: "var(--ok)" }}>
            <Icon.arrowUp width="16" height="16" />
          </div>
          <div className="kpi__label">Total pagado</div>
          <div className="kpi__value mono" style={{ color: "var(--ok)" }}>{fmtMoneyShort(totalPagado + totalDesc)}</div>
          <div className="kpi__sub muted">
            {totalDesc > 0 ? <span>inc. {fmtMoneyShort(totalDesc)} desc.</span> : <span>{totalPagos} pago(s)</span>}
          </div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: saldo > 0 ? "var(--accent)" : saldo < 0 ? "var(--ok)" : "var(--border)" }} />
          <div className="kpi__label">Saldo actual</div>
          <div className="kpi__value mono" style={{
            color: saldo > 0 ? "var(--accent)" : saldo < 0 ? "var(--ok)" : "var(--text-mute)",
            fontSize: 26,
          }}>
            {saldo === 0 ? "Al día" : fmtMoney(Math.abs(saldo))}
          </div>
          <div className="kpi__sub muted">
            {saldo > 0 ? "deuda pendiente" : saldo < 0 ? "saldo a nuestro favor" : "sin deuda"}
          </div>
        </div>
        <div className="kpi">
          <div className="kpi__bar" style={{ background: "var(--info)" }} />
          <div className="kpi__icon" style={{ background: "rgba(107,168,255,.12)", color: "var(--info)" }}>
            <Icon.orders width="16" height="16" />
          </div>
          <div className="kpi__label">Remitos pendientes</div>
          <div className="kpi__value">{pendientes.length}</div>
          <div className="kpi__sub muted">de {cuenta.registros.length} en total</div>
        </div>
      </div>

      <div className="section-title" style={{ marginTop: 28 }}>Cuenta corriente</div>
      <div className="card cc-remitos-card">
        <div className="card__head">
          <div className="card__title">{cuenta.nombre}</div>
          {cuenta.cuit      && <div className="card__sub mono" style={{ marginLeft: 0 }}>CUIT {cuenta.cuit}</div>}
          {cuenta.telefono  && <div className="card__sub" style={{ marginLeft: 0 }}>{cuenta.telefono}</div>}
          {cuenta.direccion && <div className="card__sub" style={{ marginLeft: 0 }}>{cuenta.direccion}</div>}
          <button className="btn btn--sm" style={{ marginLeft: "auto" }} onClick={() => setShowNuevoRemito(true)}>
            <Icon.plus /> Nuevo remito
          </button>
        </div>

        <div className="cc-tabs">
          <button className={`cc-tab${tab === "pendientes" ? " cc-tab--active" : ""}`} onClick={() => setTab("pendientes")}>
            Pendientes
            {pendientes.length > 0 && <span className="cc-tab__badge">{pendientes.length}</span>}
          </button>
          <button className={`cc-tab${tab === "historial" ? " cc-tab--active" : ""}`} onClick={() => setTab("historial")}>
            Historial
          </button>
        </div>

        {cuenta.registros.length === 0 ? (
          <div className="card__body" style={{ textAlign: "center", padding: "40px 24px" }}>
            <div className="muted" style={{ fontSize: 14, marginBottom: 16 }}>Sin remitos cargados.</div>
            <button className="btn btn--primary" onClick={() => setShowNuevoRemito(true)}>
              <Icon.plus /> Agregar primer remito
            </button>
          </div>
        ) : tab === "pendientes" ? (
          pendientesRows.length === 0 ? (
            <div className="card__body" style={{ textAlign: "center", padding: "32px 24px" }}>
              <div className="muted" style={{ fontSize: 14 }}>Sin remitos pendientes — cuenta al día.</div>
            </div>
          ) : (
            <TablaRemitos rows={pendientesRows} onPagar={setPagandoRemito} onVerPagos={r => setVerPagosRemitoId(r.id)} onEliminar={eliminarRemito} />
          )
        ) : (
          mesesHistorial.map(mk => (
            <React.Fragment key={mk}>
              <div className="cc-mes-head">
                <span>{mesLabelCC(mk)}</span>
                <span className="mono muted" style={{ fontSize: 11 }}>
                  {porMes[mk].length} remito(s) · {fmtMoney(porMes[mk].reduce((s, r) => s + (r.valorRemito || 0), 0))}
                </span>
              </div>
              <TablaRemitos rows={[...porMes[mk]].sort((a, b) => b.fecha.localeCompare(a.fecha))} onPagar={setPagandoRemito} onVerPagos={r => setVerPagosRemitoId(r.id)} onEliminar={eliminarRemito} />
            </React.Fragment>
          ))
        )}
      </div>

      {showNuevoRemito && <NuevoRemitoModal onClose={() => setShowNuevoRemito(false)} onSave={addRemito} />}
      {pagandoRemito && (
        <RegistrarPagoModal
          registro={pagandoRemito}
          onClose={() => setPagandoRemito(null)}
          onSave={(pago) => registrarPago(pagandoRemito.id, pago)}
        />
      )}
      {verPagosRemitoId != null && (
        <PagosDeRemitoModal
          registro={cuenta.registros.find(r => r.id === verPagosRemitoId) || { pagosHistorial: [], remito: "" }}
          onClose={() => setVerPagosRemitoId(null)}
          onEliminarPago={(pagoId) => eliminarPago(verPagosRemitoId, pagoId)}
        />
      )}
    </>
  );
}

function PagosDeRemitoModal({ registro, onClose, onEliminarPago }) {
  const historial = registro.pagosHistorial || [];
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 480 }}>
        <div className="modal__head">
          <div className="modal__title">Pagos — {registro.remito || "Remito"}</div>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>
        <div className="modal__body">
          {historial.length === 0 ? (
            <div className="muted" style={{ textAlign: "center", padding: "28px 0" }}>Sin pagos registrados.</div>
          ) : (
            <table className="table">
              <thead>
                <tr>
                  <th>Fecha</th>
                  <th>Método</th>
                  <th className="num">Monto</th>
                  <th style={{ width: 48 }} />
                </tr>
              </thead>
              <tbody>
                {historial.map(p => (
                  <tr key={p.id}>
                    <td className="mono dim">{fmtDate(p.fecha)}</td>
                    <td>{p.metodoPago}</td>
                    <td className="num mono" style={{ color: "var(--ok)" }}>{fmtMoney(p.monto)}</td>
                    <td>
                      <button
                        className="btn btn--sm"
                        style={{ color: "var(--accent)" }}
                        title="Anular pago"
                        onClick={() => { if (window.confirm(`¿Anular el pago de ${fmtMoney(p.monto)} del ${fmtDate(p.fecha)}?`)) onEliminarPago(p.id); }}
                      >✕</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
          <div className="muted" style={{ fontSize: 11, fontStyle: "italic", marginTop: 12 }}>
            Anular un pago revierte el saldo del remito pero no elimina el remito en sí.
          </div>
        </div>
        <div className="modal__foot">
          <button className="btn btn--ghost" onClick={onClose}>Cerrar</button>
        </div>
      </div>
    </div>
  );
}

function NuevaCasaModal({ onClose, onSave }) {
  const [form, setForm] = React.useState({ nombre: "", cuit: "", telefono: "", direccion: "" });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));
  const valid = form.nombre.trim().length > 0;

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 520 }}>
        <div className="modal__head">
          <div className="modal__title">Nueva casa de repuestos</div>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>
        <div className="modal__body">
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="field">
              <label className="field__label">Nombre *</label>
              <input value={form.nombre} onChange={set("nombre")} placeholder="Ej: Casa Pérez" autoFocus />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field">
                <label className="field__label">CUIT</label>
                <input value={form.cuit} onChange={set("cuit")} placeholder="30-XXXXXXXX-X" />
              </div>
              <div className="field">
                <label className="field__label">Teléfono</label>
                <input value={form.telefono} onChange={set("telefono")} placeholder="11-XXXX-XXXX" />
              </div>
            </div>
            <div className="field">
              <label className="field__label">Dirección</label>
              <input value={form.direccion} onChange={set("direccion")} placeholder="Calle, número, localidad" />
            </div>
          </div>
        </div>
        <div className="modal__foot">
          <button className="btn btn--ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn--primary" onClick={() => valid && onSave(form)}
            style={{ opacity: valid ? 1 : 0.45 }} disabled={!valid}>
            <Icon.check /> Guardar proveedor
          </button>
        </div>
      </div>
    </div>
  );
}

// Carga la deuda (el remito). El pago se registra después, por separado, contra este remito puntual.
function NuevoRemitoModal({ onClose, onSave }) {
  const today = new Date().toISOString().slice(0, 10);
  const [form, setForm] = React.useState({ fecha: today, remito: "", valorRemito: "", descuento: "" });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  const valid = Number(form.valorRemito) > 0;

  const handleSave = () => {
    if (!valid) return;
    onSave({
      fecha:       form.fecha,
      remito:      form.remito.trim(),
      valorRemito: Number(form.valorRemito) || 0,
      descuento:   Number(form.descuento)   || 0,
    });
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 480 }}>
        <div className="modal__head">
          <div className="modal__title">Nuevo remito</div>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>
        <div className="modal__body">
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field">
                <label className="field__label">Fecha</label>
                <input type="date" value={form.fecha} onChange={set("fecha")} />
              </div>
              <div className="field">
                <label className="field__label">N° de orden</label>
                <input value={form.remito} onChange={set("remito")} placeholder="Ej: #13543 - correa de distribución" autoFocus />
              </div>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field">
                <label className="field__label">Valor del remito *</label>
                <input type="number" min="0" value={form.valorRemito} onWheel={e => e.target.blur()} onChange={set("valorRemito")}
                  placeholder="0" style={{ fontFamily: "var(--font-mono)" }} />
              </div>
              <div className="field">
                <label className="field__label">Descuento</label>
                <input type="number" min="0" value={form.descuento} onWheel={e => e.target.blur()} onChange={set("descuento")}
                  placeholder="0" style={{ fontFamily: "var(--font-mono)" }} />
              </div>
            </div>
            <div className="muted" style={{ fontSize: 11, fontStyle: "italic" }}>
              Esto registra la deuda. El pago se carga después desde el botón "Pagar" de cada remito.
            </div>
          </div>
        </div>
        <div className="modal__foot">
          <button className="btn btn--ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn--primary" onClick={handleSave}
            style={{ opacity: valid ? 1 : 0.45 }} disabled={!valid}>
            <Icon.check /> Guardar remito
          </button>
        </div>
      </div>
    </div>
  );
}

// Registra un pago (total o parcial) contra un remito puntual.
function RegistrarPagoModal({ registro, onClose, onSave }) {
  const today    = new Date().toISOString().slice(0, 10);
  const pendiente = saldoRemito(registro);
  const [form, setForm] = React.useState({ fecha: today, monto: pendiente > 0 ? pendiente : "", metodoPago: "" });
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  const valid = Number(form.monto) > 0 && form.metodoPago !== "";

  const handleSave = () => {
    if (!valid) return;
    onSave({ fecha: form.fecha, monto: Number(form.monto), metodoPago: form.metodoPago });
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} style={{ maxWidth: 440 }}>
        <div className="modal__head">
          <div className="modal__title">Registrar pago</div>
          <button className="modal__close" onClick={onClose}>Cerrar ✕</button>
        </div>
        <div className="modal__body">
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div className="muted" style={{ fontSize: 12 }}>
              Remito {registro.remito || "(sin número)"} · Saldo pendiente{" "}
              <b className="mono" style={{ color: "var(--accent)" }}>{fmtMoney(pendiente)}</b>
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
              <div className="field">
                <label className="field__label">Fecha</label>
                <input type="date" value={form.fecha} onChange={set("fecha")} />
              </div>
              <div className="field">
                <label className="field__label">Monto a pagar *</label>
                <input type="number" min="0" value={form.monto} onWheel={e => e.target.blur()} onChange={set("monto")} autoFocus
                  placeholder="0" style={{ fontFamily: "var(--font-mono)" }} />
              </div>
            </div>

            <div className="field">
              <label className="field__label">Método de pago *</label>
              <CustomSelect value={form.metodoPago} onChange={set("metodoPago")}>
                <option value="">Seleccionar…</option>
                {METODOS_PAGO.map(m => <option key={m} value={m}>{m}</option>)}
              </CustomSelect>
            </div>

            {Number(form.monto) > 0 && Number(form.monto) < pendiente && (
              <div className="muted" style={{ fontSize: 11, fontStyle: "italic" }}>
                Quedará un saldo parcial de {fmtMoney(pendiente - Number(form.monto))} en este remito.
              </div>
            )}
          </div>
        </div>
        <div className="modal__foot">
          <button className="btn btn--ghost" onClick={onClose}>Cancelar</button>
          <button className="btn btn--primary" onClick={handleSave}
            style={{ opacity: valid ? 1 : 0.45 }} disabled={!valid}>
            <Icon.check /> Confirmar pago
          </button>
        </div>
      </div>
    </div>
  );
}

window.CuentasCorrientesView = CuentasCorrientesView;