import { Icon } from "@iconify/react";
import { useMemo, useState } from "react";
import styled from "styled-components";
import { MonedaInput } from "../../common/MonedaInput";
import {
  useAprobarRendicionMutation,
  useRechazarRendicionMutation,
  useRendicionDetalleQuery,
  useVerificarMedioPagoMutation,
} from "../../../tanstack/RendicionesStack";

const MONEDAS_SIN_DECIMALES = ["PYG", "CLP", "JPY", "KRW", "ISK", "VND"];
const decimalesDe = (moneda) => {
  if (!moneda) return 0;
  if (MONEDAS_SIN_DECIMALES.includes((moneda.codigo || "").toUpperCase())) return 0;
  return moneda.decimales ?? 2;
};
const simboloDe = (moneda) => moneda?.simbolo || moneda?.codigo || "₲";
const formatMoney = (num, decimales = 0) =>
  new Intl.NumberFormat("es-PY", {
    minimumFractionDigits: decimales,
    maximumFractionDigits: decimales,
  }).format(Number(num) || 0);
const formatMonto = (num, moneda) =>
  `${simboloDe(moneda)} ${formatMoney(num, decimalesDe(moneda))}`;

const MEDIO_ICON = {
  EFECTIVO: "lucide:banknote",
  CHEQUE: "lucide:scroll-text",
  TRANSFERENCIA: "lucide:arrow-left-right",
  TARJETA: "lucide:credit-card",
  DEPOSITO: "lucide:landmark",
  SALDO_FAVOR: "lucide:wallet",
};

// ── Styled ────────────────────────────────────────────────────────────
const Overlay = styled.div`
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
`;
const Dialog = styled.div`
  background: ${(p) => p.theme.bg2};
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 16px;
  width: 100%;
  max-width: 820px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-shadow: ${(p) => p.theme.boxshadow};
`;
const Header = styled.div`
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid ${(p) => p.theme.borderColor};
  flex-shrink: 0;
`;
const HeaderIcon = styled.div`
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  background: ${(p) => p.theme.bg6};
  display: flex;
  align-items: center;
  justify-content: center;
  color: ${(p) => p.theme.primary};
  font-size: 1.1rem;
  flex-shrink: 0;
`;
const HeaderText = styled.div`
  flex: 1;
  h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: ${(p) => p.theme.text};
  }
  p {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
    color: ${(p) => p.theme.textSecondary};
  }
`;
const CloseBtn = styled.button`
  background: none;
  border: none;
  cursor: pointer;
  color: ${(p) => p.theme.textSecondary};
  font-size: 1.1rem;
  padding: 0.3rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  &:hover {
    background: ${(p) => p.theme.bgAlpha};
    color: ${(p) => p.theme.text};
  }
`;
const Body = styled.div`
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
`;
const MontosRow = styled.div`
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  background: ${(p) => p.theme.bg6};
  border-radius: 10px;
  padding: 0.85rem 1rem;
  @media (max-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }
  .item {
    text-align: center;
    .lbl {
      font-size: 0.68rem;
      color: ${(p) => p.theme.textSecondary};
      font-weight: 600;
      text-transform: uppercase;
    }
    .val {
      font-size: 0.95rem;
      font-weight: 700;
      margin-top: 0.1rem;
    }
  }
`;
const SectionTitle = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: ${(p) => p.theme.textSecondary};
  text-transform: uppercase;
  letter-spacing: 0.03em;
`;
const ReciboCard = styled.div`
  border: 1px solid ${(p) => p.theme.borderColor};
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    .left {
      display: flex;
      gap: 0.4rem;
      align-items: center;
    }
    .cliente {
      font-weight: 700;
    }
    .nro {
      color: ${(p) => p.theme.textSecondary};
      font-size: 0.78rem;
    }
  }
`;
const MedioRow = styled.div`
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr 0.6fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0;
  border-top: 1px dashed ${(p) => p.theme.borderColor};
  @media (max-width: 720px) {
    grid-template-columns: 1fr 1fr;
  }
  .label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    .nombre {
      font-weight: 600;
    }
    .ref {
      font-size: 0.7rem;
      color: ${(p) => p.theme.textSecondary};
    }
  }
  input,
  select {
    background: ${(p) => p.theme.inputBg};
    border: 1px solid ${(p) => p.theme.inputBorder};
    border-radius: 8px;
    padding: 0.4rem 0.55rem;
    color: ${(p) => p.theme.text};
    font-size: 0.82rem;
    outline: none;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    &:focus {
      border-color: ${(p) => p.theme.primary};
      box-shadow: 0 0 0 3px ${(p) => p.theme.primary}20;
    }
  }
  .monto-decl {
    font-size: 0.82rem;
    font-weight: 700;
    text-align: right;
  }
  .verif-badge {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
  }
`;
const VerifBtn = styled.button`
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  border: 1px solid ${(p) => p.theme.primary};
  background: ${(p) => p.theme.primary};
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  &:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  &:not(:disabled):hover {
    opacity: 0.88;
  }
`;
const NoteBanner = styled.div`
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.82rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  .title {
    font-size: 0.7rem;
    font-weight: 700;
    color: ${(p) => p.theme.textSecondary};
    text-transform: uppercase;
    margin-bottom: 0.25rem;
  }
  .text {
    color: ${(p) => p.theme.text};
    line-height: 1.5;
  }
`;
const FormField = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  label {
    font-size: 0.78rem;
    color: ${(p) => p.theme.textSecondary};
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
  }
  textarea {
    background: ${(p) => p.theme.inputBg};
    border: 1px solid ${(p) => p.theme.inputBorder};
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    color: ${(p) => p.theme.text};
    font-size: 0.875rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    &:focus {
      border-color: ${(p) => p.theme.primary};
      box-shadow: 0 0 0 3px ${(p) => p.theme.primary}20;
    }
    &::placeholder {
      color: ${(p) => p.theme.textSecondary}60;
    }
  }
`;
const Footer = styled.div`
  padding: 1rem 1.5rem;
  border-top: 1px solid ${(p) => p.theme.borderColor};
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  flex-shrink: 0;
`;
const ActionBtn = styled.button`
  padding: 0.55rem 1.15rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.15s;
  border: 1px solid ${(p) => p.$border || "transparent"};
  background: ${(p) => p.$bg || "transparent"};
  color: ${(p) => p.$color || "inherit"};
  &:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  &:not(:disabled):hover {
    opacity: 0.85;
  }
`;
const Spinner = styled(Icon)`
  animation: spin 1s linear infinite;
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
`;

const VERIF_COLORS = {
  OK: { bg: "rgba(34,197,94,0.15)", fg: "#22c55e", label: "OK" },
  DIFERENCIA: { bg: "rgba(245,158,11,0.15)", fg: "#f59e0b", label: "DIFERENCIA" },
  RECHAZADO: { bg: "rgba(239,68,68,0.15)", fg: "#ef4444", label: "RECHAZADO" },
};

// ── Fila de medio de pago con verificación inline ─────────────────────
// ── Agrupación de medios de pago ───────────────────────────────────────
// Cheques y tarjetas SIEMPRE individuales (necesitan validar nro/auth).
// Resto se agrupa por (medio + cuenta_tesoreria_id) a nivel rendición.
function claveGrupo(m) {
  const medio = (m.medio || "OTRO").toUpperCase();
  if (medio === "CHEQUE" || medio === "TARJETA") return `${medio}:${m.id}`;
  return `${medio}:${m.cuenta_tesoreria_id || "sin-cuenta"}`;
}

function tituloGrupo(grupo) {
  const m = grupo.medios[0];
  const medio = (m.medio || "OTRO").toUpperCase();
  if (medio === "CHEQUE") {
    return m.cheque_numero
      ? `CHEQUE N° ${m.cheque_numero}${m.cheque_banco ? ` · ${m.cheque_banco}` : ""}`
      : "CHEQUE";
  }
  if (medio === "TARJETA") {
    return m.referencia ? `TARJETA · Auth ${m.referencia}` : "TARJETA";
  }
  return medio;
}

function agruparMedios(medios) {
  const map = new Map();
  for (const m of medios) {
    const key = claveGrupo(m);
    if (!map.has(key)) {
      map.set(key, { key, medios: [], totalDeclarado: 0, recibosIds: new Set() });
    }
    const g = map.get(key);
    g.medios.push(m);
    g.totalDeclarado += Number(m.monto || 0);
    if (m.recibo_cobro_id) g.recibosIds.add(m.recibo_cobro_id);
  }
  return Array.from(map.values());
}

function GroupedMedioRow({ rendicionId, grupo, moneda }) {
  const verifMutation = useVerificarMedioPagoMutation();
  const verificables = grupo.medios.filter((m) => m.origen === "MULTI");
  const legacy = grupo.medios.filter((m) => m.origen === "LEGACY");
  const legacyCount = legacy.length;
  const legacyTotal = legacy.reduce((s, m) => s + Number(m.monto || 0), 0);
  const soloLegacy = verificables.length === 0;

  // Input arranca con el total del grupo (lo que el tesorero cuenta físicamente).
  // Si el grupo ya tiene MULTI verificados, usamos esos importes + legacy.
  const verifMultiPrevio = verificables.reduce(
    (s, m) => s + Number(m.verificacion?.importe_verificado ?? m.monto ?? 0),
    0,
  );
  const initialVerif = verifMultiPrevio + legacyTotal;
  const [importe, setImporte] = useState(initialVerif);
  const [estado, setEstado] = useState(
    verificables[0]?.verificacion?.estado || "OK",
  );
  const [obs, setObs] = useState(
    verificables[0]?.verificacion?.observacion || "",
  );
  const [busy, setBusy] = useState(false);

  const medioLabel = (grupo.medios[0].medio || "OTRO").toUpperCase();
  const icon = MEDIO_ICON[medioLabel] || "lucide:circle-dollar-sign";
  const count = grupo.medios.length;
  const todosVerif =
    verificables.length > 0 &&
    verificables.every((m) => !!m.verificacion?.estado);
  const algunoVerif = verificables.some((m) => !!m.verificacion?.estado);
  const colorBadge = todosVerif
    ? VERIF_COLORS[verificables[0].verificacion.estado]
    : null;

  const handleVerificar = async () => {
    if (soloLegacy) return;
    setBusy(true);
    const totalVerif = verificables.reduce(
      (s, m) => s + Number(m.monto || 0),
      0,
    );
    // Restamos el monto legacy (auto-verificado por backend) para que
    // los MULTI solo absorban su porción.
    const importeNum = Math.max(0, Number(importe || 0) - legacyTotal);
    const calls = verificables.map((m, idx) => {
      let parte;
      if (totalVerif > 0) {
        parte = (Number(m.monto || 0) / totalVerif) * importeNum;
      } else {
        parte = importeNum / verificables.length;
      }
      // Ajuste de redondeo: la última absorbe la diferencia
      if (idx === verificables.length - 1) {
        const sumaPrevia = verificables.slice(0, -1).reduce((s, mm) => {
          if (totalVerif > 0)
            return s + (Number(mm.monto || 0) / totalVerif) * importeNum;
          return s + importeNum / verificables.length;
        }, 0);
        parte = importeNum - sumaPrevia;
      }
      const decimales = decimalesDe(moneda);
      const factor = Math.pow(10, decimales);
      parte = Math.round(parte * factor) / factor;
      return verifMutation.mutateAsync({
        id: rendicionId,
        mpId: m.id,
        data: {
          importe_verificado: parte,
          verificacion_estado: estado,
          verificacion_observacion: obs || undefined,
        },
      });
    });
    try {
      await Promise.all(calls);
    } finally {
      setBusy(false);
    }
  };

  return (
    <MedioRow>
      <div className="label">
        <Icon icon={icon} />
        <div>
          <div className="nombre">{tituloGrupo(grupo)}</div>
          <div className="ref">
            {count > 1
              ? `${count} medios · ${grupo.recibosIds.size} recibo(s)`
              : medioLabel === "CHEQUE" || medioLabel === "TARJETA"
                ? "1 medio"
                : "1 recibo"}
            {legacyCount > 0 && ` · ${legacyCount} legacy (info)`}
          </div>
        </div>
      </div>
      <div className="monto-decl">{formatMonto(grupo.totalDeclarado, moneda)}</div>
      {soloLegacy ? (
        <>
          <div
            style={{
              fontSize: "0.75rem",
              color: "var(--text-secondary, #64748b)",
            }}
          >
            Sin verificación individual (legacy)
          </div>
          <div />
          <div
            className="verif-badge"
            style={{ background: "#e0e7ff", color: "#3730a3" }}
          >
            Info
          </div>
        </>
      ) : (
        <>
          <MonedaInput
            value={importe}
            onChange={(v) => setImporte(v)}
            moneda={(moneda?.codigo || "PYG").toUpperCase()}
            decimales={decimalesDe(moneda)}
            placeholder="Verificado"
          />
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <select value={estado} onChange={(e) => setEstado(e.target.value)}>
              <option value="OK">OK</option>
              <option value="DIFERENCIA">Diferencia</option>
              <option value="RECHAZADO">Rechazado</option>
            </select>
            {(estado === "DIFERENCIA" || estado === "RECHAZADO") && (
              <input
                type="text"
                value={obs}
                onChange={(e) => setObs(e.target.value)}
                placeholder="Observación"
              />
            )}
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: 4,
              alignItems: "stretch",
            }}
          >
            <VerifBtn onClick={handleVerificar} disabled={busy}>
              {busy ? (
                <Spinner icon="lucide:loader-2" />
              ) : (
                <Icon icon="lucide:check" />
              )}
              {algunoVerif ? "Reverif." : "Verificar"}
            </VerifBtn>
            {todosVerif && colorBadge && (
              <div
                className="verif-badge"
                style={{ background: colorBadge.bg, color: colorBadge.fg }}
              >
                {colorBadge.label}
              </div>
            )}
          </div>
        </>
      )}
    </MedioRow>
  );
}

// ── Diálogo principal ──────────────────────────────────────────────────
export function RevisarRendicionDialog({ rendicion, onClose }) {
  const { data: detalle, isLoading } = useRendicionDetalleQuery(rendicion?.id);
  const aprobarMutation = useAprobarRendicionMutation();
  const rechazarMutation = useRechazarRendicionMutation();
  const [motivo, setMotivo] = useState("");

  const data = detalle || rendicion;
  const moneda = data?.moneda;
  const tolerancia = decimalesDe(moneda) === 0 ? 1 : 0.01;
  const cobrador = data?.cobrador
    ? `${data.cobrador.nombre} ${data.cobrador.apellido || ""}`.trim()
    : "—";

  // Lista plana unificada (MULTI + LEGACY ya normalizados por backend).
  // Cada medio incluye `origen` ('MULTI'|'LEGACY') y `verificacion` (los
  // legacy vienen pre-verificados como OK).
  const todosLosMedios = useMemo(() => {
    if (!detalle?.recibos_cobro) return [];
    return detalle.recibos_cobro.flatMap((r) =>
      (r.medios_pago_unificado || []).map((m) => ({
        ...m,
        recibo_cobro_id: r.id,
      })),
    );
  }, [detalle]);

  const gruposMedios = useMemo(
    () => agruparMedios(todosLosMedios),
    [todosLosMedios],
  );

  // Verificación unificada: legacy ya viene como OK desde backend.
  const verificados = todosLosMedios.filter((m) => m.verificacion?.estado);
  const tieneRechazados = verificados.some(
    (m) => m.verificacion.estado === "RECHAZADO",
  );
  const tieneDiferencias = verificados.some(
    (m) => m.verificacion.estado === "DIFERENCIA",
  );
  const todosVerificados =
    todosLosMedios.length > 0 && verificados.length === todosLosMedios.length;
  const puedeAprobar = todosVerificados && !tieneRechazados && !tieneDiferencias;
  const recomendaObservar = todosVerificados && tieneDiferencias && !tieneRechazados;

  const totalVerificado = verificados.reduce(
    (s, m) =>
      s + Number(m.verificacion.importe_verificado ?? m.monto ?? 0),
    0,
  );
  const diferenciaVerif =
    totalVerificado - Number(data?.total_declarado ?? data?.monto_cobrado ?? 0);

  const busy = aprobarMutation.isPending || rechazarMutation.isPending;

  const handleAprobar = () => {
    aprobarMutation.mutate(
      { id: data.id, data: {} },
      { onSuccess: () => onClose() },
    );
  };

  const handleRechazo = (accion) => {
    if (!motivo.trim()) {
      return;
    }
    rechazarMutation.mutate(
      { id: data.id, data: { accion, motivo } },
      { onSuccess: () => onClose() },
    );
  };

  if (!rendicion) return null;

  return (
    <Overlay onClick={onClose}>
      <Dialog onClick={(e) => e.stopPropagation()}>
        <Header>
          <HeaderIcon>
            <Icon icon="lucide:clipboard-check" />
          </HeaderIcon>
          <HeaderText>
            <h3>Verificar rendición · {data?.codigo || "—"}</h3>
            <p>
              {cobrador} · {todosLosMedios.length} medio(s) de pago ·{" "}
              {verificados.length}/{todosLosMedios.length} verificados
            </p>
          </HeaderText>
          <CloseBtn onClick={onClose}>
            <Icon icon="lucide:x" />
          </CloseBtn>
        </Header>

        <Body>
          <MontosRow>
            <div className="item">
              <div className="lbl">
                Declarado{moneda ? ` · ${moneda.codigo}` : ""}
              </div>
              <div className="val">
                {formatMonto(
                  data?.total_declarado ?? data?.monto_cobrado,
                  moneda,
                )}
              </div>
            </div>
            <div className="item">
              <div className="lbl">Cobrado</div>
              <div className="val" style={{ color: "#3b82f6" }}>
                {formatMonto(data?.monto_cobrado, moneda)}
              </div>
            </div>
            <div className="item">
              <div className="lbl">Verificado</div>
              <div className="val" style={{ color: "#22c55e" }}>
                {formatMonto(totalVerificado, moneda)}
              </div>
            </div>
            <div className="item">
              <div className="lbl">Dif. Verif.</div>
              <div
                className="val"
                style={{
                  color:
                    Math.abs(diferenciaVerif) < tolerancia
                      ? "#22c55e"
                      : Math.abs(diferenciaVerif) < tolerancia * 1000
                        ? "#f59e0b"
                        : "#ef4444",
                }}
              >
                {diferenciaVerif >= 0 ? "+" : ""}
                {formatMonto(diferenciaVerif, moneda)}
              </div>
            </div>
          </MontosRow>

          {data?.observaciones_cobrador && (
            <NoteBanner>
              <div className="title">Nota del cobrador</div>
              <div className="text">{data.observaciones_cobrador}</div>
            </NoteBanner>
          )}

          <SectionTitle>
            <span>Medios de pago a verificar (agrupados)</span>
            {todosVerificados && !tieneRechazados && (
              <span style={{ color: "#22c55e" }}>
                <Icon icon="lucide:check-circle" /> Listos
              </span>
            )}
            {tieneRechazados && (
              <span style={{ color: "#ef4444" }}>
                <Icon icon="lucide:x-circle" /> Hay rechazos
              </span>
            )}
          </SectionTitle>

          {isLoading ? (
            <div
              style={{
                textAlign: "center",
                padding: "1rem",
                color: "var(--text-secondary, #64748b)",
              }}
            >
              <Spinner icon="lucide:loader-2" /> Cargando detalle...
            </div>
          ) : gruposMedios.length === 0 ? (
            <div style={{ textAlign: "center", padding: "1rem" }}>
              No hay recibos en esta rendición
            </div>
          ) : (
            <ReciboCard>
              {gruposMedios.map((g) => (
                <GroupedMedioRow
                  key={g.key}
                  rendicionId={data.id}
                  grupo={g}
                  moneda={moneda}
                />
              ))}
            </ReciboCard>
          )}

          {recomendaObservar && (
            <NoteBanner>
              <div className="title">Hay diferencias detectadas</div>
              <div className="text">
                Te recomendamos <strong>Observar</strong> la rendición para que
                el cobrador ajuste y reenvíe a tesorería.
              </div>
            </NoteBanner>
          )}

          <FormField>
            <label>
              <Icon icon="lucide:message-square" /> Motivo (obligatorio para
              observar/rechazar)
            </label>
            <textarea
              value={motivo}
              onChange={(e) => setMotivo(e.target.value)}
              placeholder="Describí el motivo si vas a observar o rechazar la rendición"
              rows={2}
            />
          </FormField>
        </Body>

        <Footer>
          <ActionBtn
            $color="inherit"
            $border="currentColor"
            onClick={onClose}
            disabled={busy}
          >
            Cancelar
          </ActionBtn>
          <ActionBtn
            $bg={recomendaObservar ? "#f59e0b" : "rgba(245,158,11,0.12)"}
            $color={recomendaObservar ? "#fff" : "#f59e0b"}
            $border={recomendaObservar ? "transparent" : "rgba(245,158,11,0.3)"}
            onClick={() => handleRechazo("OBSERVADO")}
            disabled={busy || !motivo.trim()}
            title={
              recomendaObservar
                ? "Hay diferencias: enviar al cobrador para que ajuste"
                : "Observar rendición"
            }
          >
            {busy ? (
              <Spinner icon="lucide:loader-2" />
            ) : (
              <Icon icon="lucide:alert-circle" />
            )}
            Observar
          </ActionBtn>
          <ActionBtn
            $bg="rgba(239,68,68,0.12)"
            $color="#ef4444"
            $border="rgba(239,68,68,0.3)"
            onClick={() => handleRechazo("RECHAZADO")}
            disabled={busy || !motivo.trim()}
          >
            {busy ? (
              <Spinner icon="lucide:loader-2" />
            ) : (
              <Icon icon="lucide:x-circle" />
            )}
            Rechazar
          </ActionBtn>
          <ActionBtn
            $bg="#22c55e"
            $color="#fff"
            $border="transparent"
            onClick={handleAprobar}
            disabled={busy || !puedeAprobar}
            title={
              !puedeAprobar
                ? tieneDiferencias
                  ? "Hay diferencias: usá Observar para devolver al cobrador"
                  : tieneRechazados
                    ? "Hay medios rechazados: usá Rechazar"
                    : "Verificá todos los medios para aprobar"
                : "Aprobar rendición"
            }
          >
            {busy ? (
              <Spinner icon="lucide:loader-2" />
            ) : (
              <Icon icon="lucide:check-circle" />
            )}
            Aprobar
          </ActionBtn>
        </Footer>
      </Dialog>
    </Overlay>
  );
}