import { Icon } from "@iconify/react";
import {
  Alert,
  Autocomplete,
  Box,
  Button,
  Card,
  CardContent,
  Chip,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  Skeleton,
  Tab,
  Tabs,
  TextField,
  ToggleButton,
  ToggleButtonGroup,
  Typography,
} from "@mui/material";
import { MonedaInput } from "../components/common/MonedaInput";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { useCallback, useEffect, useRef, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import io from "socket.io-client";
import { toast } from "sonner";
import styled from "styled-components";
import { aprobarAutorizacion, getHistorialAutorizaciones, getPendientes, rechazarAutorizacion } from "../api/autorizaciones-caja.service";
import { cancelarDescuento, crearDescuentoAdmin, getAutorizacionesDescuento, getFacturasClienteCobrador, resolverDescuento } from "../api/cobranzas.service";
import { useConfirmDialog } from "../hooks/useConfirmDialog";
import { getCuotasPorFactura, previewDistribucion } from "../api/cobros.service";
import { getCobradoresActivos } from "../api/vendedores-cobradores.service";
import { searchClientes } from "../api/clientes.service";
import { AccesoRestringido } from "../components/common/AccesoRestringido";
import { getAccessToken } from "../api/api.config";
import { usePermission } from "../hooks/usePermission";
import { fmtFechaCalendario } from "../utils/fecha";
import { fmtMoneda } from "../components/_standards/enums/monedas";

const TIPO_LABELS = {
  apertura_caja: "Apertura de Caja",
  cierre_caja: "Cierre de Caja",
  arqueo_diferencia: "Arqueo con Diferencia",
  retiro_caja: "Retiro de Caja",
  anulacion: "Anulación",
  descuento: "Descuento",
  cambio_precio: "Cambio de Precio",
};

const TIPO_ICONS = {
  apertura_caja: "lucide:lock-open",
  cierre_caja: "lucide:lock",
  arqueo_diferencia: "lucide:scale",
  retiro_caja: "lucide:banknote",
  anulacion: "lucide:x-circle",
  descuento: "lucide:percent",
  cambio_precio: "lucide:tag",
};

const TIPO_COLORS = {
  apertura_caja: "#22c55e",
  cierre_caja: "#ef4444",
  arqueo_diferencia: "#f59e0b",
  retiro_caja: "#8b5cf6",
  anulacion: "#ef4444",
  descuento: "#3b82f6",
  cambio_precio: "#f97316",
};

const ESTADO_CHIP = {
  pendiente: { label: "Pendiente", color: "warning" },
  aprobada: { label: "Aprobada", color: "success" },
  rechazada: { label: "Rechazada", color: "error" },
  expirada: { label: "Expirada", color: "default" },
};

const formatFecha = (fecha) => {
  if (!fecha) return "-";
  const d = new Date(fecha);
  if (isNaN(d.getTime())) return "-";
  const day = String(d.getDate()).padStart(2, "0");
  const month = String(d.getMonth() + 1).padStart(2, "0");
  const hours = String(d.getHours()).padStart(2, "0");
  const minutes = String(d.getMinutes()).padStart(2, "0");
  return `${day}/${month} ${hours}:${minutes}`;
};

const timeAgo = (fecha) => {
  if (!fecha) return "";
  const diff = Math.floor((Date.now() - new Date(fecha).getTime()) / 1000);
  if (diff < 60) return `hace ${diff}s`;
  if (diff < 3600) return `hace ${Math.floor(diff / 60)}min`;
  if (diff < 86400) return `hace ${Math.floor(diff / 3600)}h`;
  return formatFecha(fecha);
};

export function PanelSupervisor() {
  const navigate = useNavigate();
  const { can: canCobranzas, hasAccess: hasAccessCobranzas } = usePermission("COBRANZAS");
  const canRead = canCobranzas("COB_AUT_AUTORIZACION_VER");
  // useAuthStore no expone el JWT (nunca lo tuvo) — el token real vive en
  // localStorage vía getAccessToken(). Bug encontrado 2026-08-26: el socket se
  // conectaba con auth.token=undefined y el backend lo desconectaba de
  // inmediato; pasaba desapercibido porque getPendientes poll cada 30s.
  const token = getAccessToken();
  const tienePanelCobrador = hasAccessCobranzas && canCobranzas("COB_CBR_PANEL_COBRADOR_VER");
  const queryClient = useQueryClient();
  const [searchParams, setSearchParams] = useSearchParams();
  // Deep-link por ?tab=descuentos (usado desde /cobranzas/autorizaciones).
  const initialTabFromUrl = (() => {
    const t = searchParams.get("tab");
    if (t === "descuentos") return 2;
    if (t === "historial") return 1;
    if (t === "pendientes") return 0;
    return 0;
  })();
  const [tab, setTabRaw] = useState(initialTabFromUrl);
  const setTab = (next) => {
    setTabRaw(next);
    const slug = next === 2 ? "descuentos" : next === 1 ? "historial" : "pendientes";
    const params = new URLSearchParams(searchParams);
    params.set("tab", slug);
    setSearchParams(params, { replace: true });
  };
  const [approveDialog, setApproveDialog] = useState(null);
  const [rejectDialog, setRejectDialog] = useState(null);
  const [pin, setPin] = useState("");
  const [motivo, setMotivo] = useState("");
  // Form crear descuento
  const [dCobrador, setDCobrador] = useState(null);
  const [dCobradorInput, setDCobradorInput] = useState("");
  const [dCliente, setDCliente] = useState(null);
  const [dClienteInput, setDClienteInput] = useState("");
  const [dMonto, setDMonto] = useState(0);
  const [dPorcentaje, setDPorcentaje] = useState("");
  const [dMotivo, setDMotivo] = useState("");
  const [dExpira, setDExpira] = useState("");
  const [dClienteOpciones, setDClienteOpciones] = useState([]);
  const [dFactura, setDFactura] = useState("");
  const [dFacturasOpciones, setDFacturasOpciones] = useState([]);
  const [loadingFacturas, setLoadingFacturas] = useState(false);
  // A.3.7: tipo (QUITA_CAPITAL | EXONERACION_INTERES) + cuotas (multi) cuando es exoneración
  const [dTipo, setDTipo] = useState("QUITA_CAPITAL");
  const [dCuotas, setDCuotas] = useState([]);
  const [dCuotasOpciones, setDCuotasOpciones] = useState([]);
  const [loadingCuotas, setLoadingCuotas] = useState(false);
  const [moraPorCuota, setMoraPorCuota] = useState({}); // { [cuota_id]: number }
  const [descuentoResolveDialog, setDescuentoResolveDialog] = useState(null); // { auth, decision }
  const [notasSupervisor, setNotasSupervisor] = useState("");
  const socketRef = useRef(null);

  // Queries
  const {
    data: pendientesData,
    isLoading: loadingPendientes,
    refetch: refetchPendientes,
  } = useQuery({
    queryKey: ["autorizaciones-pendientes"],
    queryFn: getPendientes,
    refetchInterval: tab === 0 ? 30000 : false,
    refetchIntervalInBackground: false,
    staleTime: 20000,
  });

  const pendientes = pendientesData?.data || [];

  const [historialPage, setHistorialPage] = useState(1);
  const { data: historialData, isLoading: loadingHistorial } = useQuery({
    queryKey: ["autorizaciones-historial", historialPage],
    queryFn: () => getHistorialAutorizaciones(historialPage, 20),
    enabled: tab === 1,
  });

  const historial = historialData?.data || [];
  const historialTotalPages = historialData?.lastPage || 1;

  const { data: cobradoresData } = useQuery({
    queryKey: ["cobradores-activos"],
    queryFn: getCobradoresActivos,
    enabled: tab === 2,
    staleTime: 5 * 60 * 1000, // 5 min — los cobradores no cambian seguido
  });
  const cobradores = cobradoresData?.data || cobradoresData || [];

  const { data: descuentosData, isLoading: loadingDescuentos } = useQuery({
    queryKey: ["descuentos-activos-admin"],
    queryFn: () => getAutorizacionesDescuento({ estado: "aprobado" }),
    enabled: tab === 2,
    staleTime: 30000,
  });
  const descuentosActivos = descuentosData?.data || descuentosData || [];

  const { data: descuentosPendientesData, refetch: refetchDescuentosPendientes } = useQuery({
    queryKey: ["descuentos-pendientes-supervisor"],
    queryFn: () => getAutorizacionesDescuento({ estado: "pendiente" }),
    refetchInterval: 30000,
    staleTime: 20000,
  });
  const descuentosPendientes = descuentosPendientesData?.data || descuentosPendientesData || [];

  // Historial de descuentos resueltos (usado, rechazado, expirado) — para sección "Historial" del tab Descuentos
  const { data: descuentosHistorialData, isLoading: loadingDescuentosHistorial } = useQuery({
    queryKey: ["descuentos-historial-supervisor"],
    queryFn: () => getAutorizacionesDescuento({}),
    enabled: tab === 2,
    staleTime: 30000,
  });
  const descuentosHistorial = (descuentosHistorialData?.data || descuentosHistorialData || []).filter(
    (d) => !["pendiente", "aprobado", "aprobada"].includes(d.estado),
  );

  // Mutations
  const aprobarMutation = useMutation({
    mutationFn: ({ id, pin }) => aprobarAutorizacion(id, pin),
    onSuccess: () => {
      toast.success("Autorización aprobada");
      setApproveDialog(null);
      setPin("");
      queryClient.invalidateQueries({
        queryKey: ["autorizaciones-pendientes"],
      });
      queryClient.invalidateQueries({ queryKey: ["autorizaciones-historial"] });
      queryClient.invalidateQueries({ queryKey: ["sesiones-abiertas"] });
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al aprobar");
    },
  });

  const rechazarMutation = useMutation({
    mutationFn: ({ id, motivo }) => rechazarAutorizacion(id, motivo),
    onSuccess: () => {
      toast.success("Autorización rechazada");
      setRejectDialog(null);
      setMotivo("");
      queryClient.invalidateQueries({
        queryKey: ["autorizaciones-pendientes"],
      });
      queryClient.invalidateQueries({ queryKey: ["autorizaciones-historial"] });
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al rechazar");
    },
  });

  const crearDescuentoMutation = useMutation({
    mutationFn: (data) => crearDescuentoAdmin(data),
    onSuccess: () => {
      toast.success("Descuento autorizado");
      setDCobrador(null);
      setDCobradorInput("");
      setDCliente(null);
      setDClienteInput("");
      setDMonto(0);
      setDPorcentaje("");
      setDMotivo("");
      setDExpira("");
      setDFactura("");
      setDFacturasOpciones([]);
      setDTipo("QUITA_CAPITAL");
      setDCuotas([]);
      setDCuotasOpciones([]);
      queryClient.invalidateQueries({ queryKey: ["descuentos-activos-admin"] });
    },
    onError: (error) => {
      toast.error(error.response?.data?.message || "Error al crear descuento");
    },
  });

  const resolverDescuentoMutation = useMutation({
    mutationFn: ({ id, decision, notas }) => resolverDescuento(id, { decision, notas_supervisor: notas }),
    onSuccess: (_, vars) => {
      toast.success(vars.decision === "aprobado" ? "Descuento aprobado" : "Descuento rechazado");
      setDescuentoResolveDialog(null);
      setNotasSupervisor("");
      queryClient.invalidateQueries({ queryKey: ["descuentos-pendientes-supervisor"] });
      queryClient.invalidateQueries({ queryKey: ["descuentos-activos-admin"] });
      queryClient.invalidateQueries({ queryKey: ["descuentos-historial-supervisor"] });
    },
    onError: (e) => toast.error(e.response?.data?.message || "Error al resolver"),
  });

  const { confirm, prompt, dialogs: confirmDialogs } = useConfirmDialog();

  const cancelarDescuentoMutation = useMutation({
    mutationFn: ({ id, motivo }) => cancelarDescuento(id, motivo),
    onSuccess: () => {
      toast.success("Autorización cancelada");
      queryClient.invalidateQueries({ queryKey: ["descuentos-activos-admin"] });
      queryClient.invalidateQueries({ queryKey: ["descuentos-historial-supervisor"] });
    },
    onError: (e) => toast.error(e.response?.data?.message || "Error al cancelar"),
  });

  const handleCancelarDescuento = useCallback(async (auth) => {
    const motivo = await prompt({
      title: "Cancelar autorización",
      message: "La autorización dejará de estar disponible para cobros. Indicá el motivo (opcional).",
      label: "Motivo",
      confirmText: "Cancelar autorización",
      confirmColor: "error",
      required: false,
    });
    if (motivo === null) return;
    cancelarDescuentoMutation.mutate({ id: auth.id, motivo: motivo || undefined });
  }, [prompt, cancelarDescuentoMutation]);

  // Búsqueda de clientes con debounce (300ms)
  const buscarClientesTimer = useRef(null);
  const buscarClientes = useCallback((q) => {
    clearTimeout(buscarClientesTimer.current);
    if (!q || q.length < 2) return;
    buscarClientesTimer.current = setTimeout(async () => {
      try {
        const res = await searchClientes(q, 15);
        setDClienteOpciones(Array.isArray(res) ? res : res?.data || []);
      } catch {
        /* silencioso */
      }
    }, 300);
  }, []);

  // Cargar facturas pendientes: solo requiere cliente. Si hay cobrador, filtra por sus asignaciones.
  useEffect(() => {
    if (!dCliente?.id) {
      setDFacturasOpciones([]);
      setDFactura("");
      return;
    }
    setLoadingFacturas(true);
    setDFactura("");
    getFacturasClienteCobrador(dCobrador?.id || null, dCliente.id)
      .then((res) => setDFacturasOpciones(res?.data || []))
      .catch(() => setDFacturasOpciones([]))
      .finally(() => setLoadingFacturas(false));
  }, [dCobrador, dCliente]);

  // A.3.7: cargar cuotas cuando se elige factura (sólo necesario para EXONERACION_INTERES)
  useEffect(() => {
    setDCuotas([]);
    setDCuotasOpciones([]);
    setMoraPorCuota({});
    if (!dFactura || dTipo !== "EXONERACION_INTERES") return;
    setLoadingCuotas(true);
    getCuotasPorFactura(dFactura)
      .then(async (res) => {
        const arr = Array.isArray(res) ? res : res?.data || [];
        const pendientes = arr.filter(
          (c) => String(c.estado || "").toLowerCase() !== "pagado",
        );
        setDCuotasOpciones(pendientes);

        // Calcular mora estimada por cuota (preview con monto = sum de saldos)
        if (pendientes.length === 0) return;
        const cuota_ids = pendientes.map((c) => c.id);
        const monto = pendientes.reduce(
          (s, c) => s + Number(c.saldo_pendiente ?? c.dmoncuota ?? 0),
          0,
        );
        try {
          const preview = await previewDistribucion({
            cuota_ids,
            monto_recibido: monto,
          });
          const map = {};
          (preview?.distribucion || []).forEach((d) => {
            if (d.factura_cuota_id) {
              map[d.factura_cuota_id] = Number(d.mora_calculada || 0);
            }
          });
          setMoraPorCuota(map);
        } catch {
          /* silencioso — sin mora estimada cae al label simple */
        }
      })
      .catch(() => setDCuotasOpciones([]))
      .finally(() => setLoadingCuotas(false));
  }, [dFactura, dTipo]);

  // Si el supervisor cambia de tipo, limpiar cuota
  useEffect(() => {
    if (dTipo !== "EXONERACION_INTERES") setDCuotas([]);
  }, [dTipo]);

  // Refs estables para refetch — evita reconexiones del WS por cambio de referencia
  const refetchPendientesRef = useRef(refetchPendientes);
  useEffect(() => {
    refetchPendientesRef.current = refetchPendientes;
  }, [refetchPendientes]);
  const refetchDescuentosPendientesRef = useRef(refetchDescuentosPendientes);
  useEffect(() => {
    refetchDescuentosPendientesRef.current = refetchDescuentosPendientes;
  }, [refetchDescuentosPendientes]);

  // WebSocket connection — depende solo de token, no de callbacks
  useEffect(() => {
    if (!token) return;

    const baseUrl = import.meta.env.VITE_API_BASE_URL || window.location.origin;
    const wsUrl = baseUrl.replace("/api/v1", "").replace(/\/$/, "");

    try {
      const socket = io(`${wsUrl}/pos`, {
        auth: { token },
        transports: ["websocket", "polling"],
        reconnection: true,
        reconnectionDelay: 5000,
        reconnectionAttempts: 5,
      });

      socket.on("connect", () => {
        socket.emit("registrar:supervisor");
      });

      const onWsEvent = () => refetchPendientesRef.current?.();
      const onDescuentoEvent = () => refetchDescuentosPendientesRef.current?.();
      socket.on("autorizacion:solicitud", onWsEvent);
      socket.on("autorizacion:aprobada", onWsEvent);
      socket.on("autorizacion:rechazada", onWsEvent);
      socket.on("sesion:cambio", onWsEvent);
      socket.on("descuento:solicitud", onDescuentoEvent);
      socket.on("descuento:resuelto", onDescuentoEvent);

      socketRef.current = socket;

      return () => {
        socket.disconnect();
        socketRef.current = null;
      };
    } catch {
      // WebSocket connection failed, polling will still work
    }
  }, [token]);

  if (!canRead) return <AccesoRestringido modulo="COBRANZAS" />;

  // Moneda activa derivada de la factura seleccionada en el form de descuento.
  // Si no hay factura, asumimos PYG (la BD ya valida la consistencia en cuotas/factura).
  const facturaSeleccionada = dFacturasOpciones.find((f) => f.id === dFactura);
  const monedaActiva = facturaSeleccionada?.moneda?.codigo || "PYG";

  return (
    <Container>
      <Header>
        <HeaderContent>
          <BackBtn onClick={() => navigate("/finanzas")}>
            <Icon icon="lucide:arrow-left" />
          </BackBtn>
          <TitleSection>
            <MainTitle>
              <Icon icon="lucide:shield-check" />
              Panel Supervisor
            </MainTitle>
            <Subtitle>Gestión de autorizaciones de caja en tiempo real</Subtitle>
          </TitleSection>
          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
            <StatusDot $connected={!!socketRef.current} />
            <Typography variant="caption" sx={{ color: "inherit", opacity: 0.7 }}>
              {socketRef.current ? "Conectado" : "Sin WS"}
            </Typography>
          </Box>
        </HeaderContent>
      </Header>

      <Content>
        <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
          <Tab
            label={
              <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                Pendientes
                {pendientes?.length > 0 && <Chip label={pendientes?.length} size="small" color="warning" sx={{ height: 20, fontSize: "0.7rem" }} />}
              </Box>
            }
          />
          <Tab label="Historial" />
          {tienePanelCobrador && (
            <Tab
              label={
                <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                  Descuentos
                  {descuentosPendientes.length > 0 && <Chip label={descuentosPendientes.length} size="small" color="error" sx={{ height: 20, fontSize: "0.7rem" }} />}
                </Box>
              }
            />
          )}
        </Tabs>

        {/* Tab Pendientes */}
        {tab === 0 && (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
            {loadingPendientes ? (
              Array.from({ length: 3 }).map((_, i) => (
                <Card key={i}>
                  <CardContent sx={{ p: 2 }}>
                    <Skeleton variant="text" width="60%" height={24} />
                    <Skeleton variant="text" width="40%" height={18} />
                    <Skeleton variant="rectangular" height={32} sx={{ mt: 1, borderRadius: 1 }} />
                  </CardContent>
                </Card>
              ))
            ) : pendientes.length === 0 ? (
              <EmptyState>
                <Icon icon="lucide:check-circle-2" />
                <Typography variant="h6" fontWeight={600}>
                  Sin solicitudes pendientes
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Las nuevas solicitudes aparecerán aquí en tiempo real
                </Typography>
              </EmptyState>
            ) : (
              pendientes?.map((auth) => (
                <AuthCard key={auth.id} $color={TIPO_COLORS[auth.tipo] || "#6b7280"}>
                  <CardContent sx={{ p: 2, "&:last-child": { pb: 2 } }}>
                    <Box
                      sx={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "flex-start",
                        gap: 1,
                        mb: 1,
                      }}
                    >
                      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                        <AuthIcon $color={TIPO_COLORS[auth.tipo] || "#6b7280"}>
                          <Icon icon={TIPO_ICONS[auth.tipo] || "lucide:shield-question"} />
                        </AuthIcon>
                        <Box>
                          <Typography fontWeight={700} variant="body1">
                            {TIPO_LABELS[auth.tipo] || auth.tipo}
                          </Typography>
                          <Typography variant="caption" color="text.secondary">
                            {timeAgo(auth.created_at)} · Solicitado por <strong>{auth.solicitante?.nombres || auth.solicitante?.username || "?"}</strong>
                          </Typography>
                        </Box>
                      </Box>
                      <Chip label="Pendiente" size="small" color="warning" sx={{ fontWeight: 600 }} />
                    </Box>

                    {auth.motivo && (
                      <Typography variant="body2" sx={{ mb: 1, opacity: 0.85 }}>
                        {auth.motivo}
                      </Typography>
                    )}

                    {auth.contexto && Object.keys(auth.contexto).length > 0 && (
                      <Box
                        sx={{
                          bgcolor: "action.hover",
                          borderRadius: 1,
                          p: 1,
                          mb: 1.5,
                          fontSize: "0.8rem",
                        }}
                      >
                        {Object.entries(auth.contexto).map(([k, v]) => (
                          <Typography key={k} variant="caption" display="block">
                            <strong>{k}:</strong> {String(v)}
                          </Typography>
                        ))}
                      </Box>
                    )}

                    <Box sx={{ display: "flex", gap: 1 }}>
                      <Button variant="contained" color="success" size="small" startIcon={<Icon icon="lucide:check" />} onClick={() => setApproveDialog(auth)}>
                        Aprobar
                      </Button>
                      <Button variant="outlined" color="error" size="small" startIcon={<Icon icon="lucide:x" />} onClick={() => setRejectDialog(auth)}>
                        Rechazar
                      </Button>
                    </Box>
                  </CardContent>
                </AuthCard>
              ))
            )}
          </Box>
        )}

        {/* Tab Historial */}
        {tab === 1 && (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
            {loadingHistorial ? (
              Array.from({ length: 5 }).map((_, i) => (
                <Card key={i}>
                  <CardContent sx={{ p: 2 }}>
                    <Skeleton variant="text" width="50%" height={22} />
                    <Skeleton variant="text" width="30%" height={16} />
                  </CardContent>
                </Card>
              ))
            ) : historial.length === 0 ? (
              <EmptyState>
                <Icon icon="lucide:history" />
                <Typography variant="h6" fontWeight={600}>
                  Sin historial
                </Typography>
              </EmptyState>
            ) : (
              <>
                {historial.map((auth) => {
                  const estadoChip = ESTADO_CHIP[auth.estado] || {
                    label: auth.estado,
                    color: "default",
                  };
                  return (
                    <Card key={auth.id} sx={{ opacity: auth.estado === "expirada" ? 0.6 : 1 }}>
                      <CardContent sx={{ p: 2, "&:last-child": { pb: 2 } }}>
                        <Box
                          sx={{
                            display: "flex",
                            justifyContent: "space-between",
                            alignItems: "center",
                            gap: 1,
                          }}
                        >
                          <Box
                            sx={{
                              display: "flex",
                              alignItems: "center",
                              gap: 1,
                            }}
                          >
                            <Icon
                              icon={TIPO_ICONS[auth.tipo] || "lucide:shield-question"}
                              style={{
                                color: TIPO_COLORS[auth.tipo] || "#6b7280",
                                fontSize: 20,
                              }}
                            />
                            <Box>
                              <Typography fontWeight={600} variant="body2">
                                {TIPO_LABELS[auth.tipo] || auth.tipo}
                              </Typography>
                              <Typography variant="caption" color="text.secondary">
                                {formatFecha(auth.created_at)} · {auth.solicitante?.nombres || auth.solicitante?.username || "?"}
                                {auth.autorizador && <> → {auth.autorizador.nombres || auth.autorizador.username}</>}
                              </Typography>
                            </Box>
                          </Box>
                          <Chip label={estadoChip.label} size="small" color={estadoChip.color} sx={{ fontWeight: 600 }} />
                        </Box>
                      </CardContent>
                    </Card>
                  );
                })}

                {historialTotalPages > 1 && (
                  <Box
                    sx={{
                      display: "flex",
                      justifyContent: "center",
                      gap: 1,
                      mt: 1,
                    }}
                  >
                    <Button size="small" disabled={historialPage <= 1} onClick={() => setHistorialPage((p) => p - 1)}>
                      Anterior
                    </Button>
                    <Typography variant="body2" color="text.secondary" sx={{ lineHeight: "30px" }}>
                      {historialPage} / {historialTotalPages}
                    </Typography>
                    <Button size="small" disabled={historialPage >= historialTotalPages} onClick={() => setHistorialPage((p) => p + 1)}>
                      Siguiente
                    </Button>
                  </Box>
                )}
              </>
            )}
          </Box>
        )}

        {/* Tab Descuentos de Cobranza */}
        {tienePanelCobrador && tab === 2 && (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {/* Solicitudes pendientes de cobradores */}
            {descuentosPendientes.length > 0 && (
              <Box>
                <Typography variant="body2" fontWeight={700} sx={{ mb: 1, display: "flex", alignItems: "center", gap: 0.75, color: "error.main" }}>
                  <Icon icon="lucide:clock" />
                  Solicitudes pendientes ({descuentosPendientes.length})
                </Typography>
                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  {descuentosPendientes.map((auth) => (
                    <AuthCard key={auth.id} $color="#ef4444">
                      <CardContent sx={{ p: 2, "&:last-child": { pb: 2 } }}>
                        <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 1, mb: 1 }}>
                          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                            <AuthIcon $color="#ef4444">
                              <Icon icon="lucide:percent" />
                            </AuthIcon>
                            <Box>
                              <Typography fontWeight={700} variant="body2">
                                {auth.descuento_monto != null ? fmtMoneda(auth.descuento_monto, auth.factura?.moneda?.codigo || "PYG") : `${auth.descuento_porcentaje}%`}
                                {auth.tipo === "EXONERACION_INTERES" ? " (mora)" : ""}
                                {" — "}
                                {auth.cliente?.personas?.razon_social || auth.cliente?.nombre_fantasia || "—"}
                              </Typography>
                              <Typography variant="caption" color="text.secondary">
                                Cobrador: {auth.cobrador?.nombre} {auth.cobrador?.apellido}
                                {auth.factura && ` · Fac. ${auth.factura.dpunexp}-${auth.factura.dnumdoc}`}
                                {auth.factura_cuota && ` · Cuota ${auth.factura_cuota.nro_cuota ?? "-"}`}
                                {" · "}
                                {timeAgo(auth.created_at)}
                              </Typography>
                              {auth.motivo && (
                                <Typography variant="caption" color="text.secondary" display="block">
                                  "{auth.motivo}"
                                </Typography>
                              )}
                            </Box>
                          </Box>
                          <Chip label="Pendiente" size="small" color="warning" sx={{ fontWeight: 600 }} />
                        </Box>
                        <Box sx={{ display: "flex", gap: 1 }}>
                          <Button variant="contained" color="success" size="small" startIcon={<Icon icon="lucide:check" />} onClick={() => setDescuentoResolveDialog({ auth, decision: "aprobado" })}>
                            Aprobar
                          </Button>
                          <Button variant="outlined" color="error" size="small" startIcon={<Icon icon="lucide:x" />} onClick={() => setDescuentoResolveDialog({ auth, decision: "rechazado" })}>
                            Rechazar
                          </Button>
                        </Box>
                      </CardContent>
                    </AuthCard>
                  ))}
                </Box>
              </Box>
            )}

            {/* Formulario: crear nuevo descuento */}
            <Card variant="outlined">
              <CardContent sx={{ p: 2 }}>
                <Typography fontWeight={700} variant="body1" sx={{ mb: 1.5, display: "flex", alignItems: "center", gap: 0.75 }}>
                  <Icon icon="lucide:plus-circle" style={{ color: "#3b82f6" }} />
                  Autorizar Descuento / Exoneración
                </Typography>

                {/* A.3.7: Selector tipo */}
                <ToggleButtonGroup
                  size="small"
                  value={dTipo}
                  exclusive
                  onChange={(_, v) => v && setDTipo(v)}
                  sx={{ mb: 1.5, display: "flex" }}
                >
                  <ToggleButton value="QUITA_CAPITAL" sx={{ flex: 1, gap: 0.75 }}>
                    <Icon icon="lucide:percent" />
                    Descuento capital
                  </ToggleButton>
                  <ToggleButton value="EXONERACION_INTERES" sx={{ flex: 1, gap: 0.75 }}>
                    <Icon icon="lucide:eraser" />
                    Exoneración mora
                  </ToggleButton>
                </ToggleButtonGroup>
                {dTipo === "EXONERACION_INTERES" && (
                  <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: "block" }}>
                    La exoneración se aplica sobre la mora calculada al momento del cobro. Requiere cuota específica.
                  </Typography>
                )}

                <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
                  {/* Cliente (requerido) */}
                  <Autocomplete
                    size="small"
                    options={dClienteOpciones}
                    getOptionLabel={(o) => o.personas?.razon_social || o.nombre_fantasia || ""}
                    inputValue={dClienteInput}
                    value={dCliente}
                    onInputChange={(_, v) => {
                      setDClienteInput(v);
                      buscarClientes(v);
                    }}
                    onChange={(_, v) => setDCliente(v)}
                    renderInput={(params) => (
                      <TextField {...params} label="Cliente *" placeholder="Buscar por nombre o RUC..." helperText="Mínimo 2 caracteres para buscar" />
                    )}
                    noOptionsText="Sin resultados"
                    filterOptions={(x) => x}
                  />

                  {/* Cobrador (opcional, con buscador) */}
                  <Autocomplete
                    size="small"
                    options={cobradores}
                    getOptionLabel={(o) => `${o.nombre || ""} ${o.apellido || ""}`.trim()}
                    isOptionEqualToValue={(a, b) => a?.id === b?.id}
                    inputValue={dCobradorInput}
                    value={dCobrador}
                    onInputChange={(_, v) => setDCobradorInput(v)}
                    onChange={(_, v) => setDCobrador(v)}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        label="Cobrador (opcional)"
                        placeholder="Buscar cobrador..."
                        helperText="Si no lo seleccionás, el descuento queda asociado al cliente y cualquier cobrador podrá aplicarlo"
                      />
                    )}
                    noOptionsText="Sin cobradores"
                  />

                  {/* Factura / Cuenta a cobrar (opcional, con buscador) */}
                  <Autocomplete
                    size="small"
                    disabled={!dCliente || loadingFacturas}
                    options={dFacturasOpciones}
                    value={dFacturasOpciones.find((f) => f.id === dFactura) || null}
                    onChange={(_, v) => setDFactura(v?.id || "")}
                    getOptionLabel={(f) => {
                      const code = f.moneda?.codigo || "PYG";
                      return `${f.dpunexp}-${f.dnumdoc} · Total ${fmtMoneda(f.total_factura ?? 0, code)} · Saldo ${fmtMoneda(f.saldo_pendiente ?? 0, code)}`;
                    }}
                    isOptionEqualToValue={(a, b) => a?.id === b?.id}
                    filterOptions={(opts, { inputValue }) => {
                      const q = inputValue.trim().toLowerCase();
                      if (!q) return opts;
                      return opts.filter((f) =>
                        `${f.dpunexp}-${f.dnumdoc}`.toLowerCase().includes(q),
                      );
                    }}
                    renderOption={(props, f) => (
                      <li {...props} key={f.id}>
                        <Box sx={{ display: "flex", flexDirection: "column", py: 0.25, width: "100%" }}>
                          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                            <Box component="span" fontWeight={700}>
                              {f.dpunexp}-{f.dnumdoc}
                            </Box>
                            {f.dfeemide && (
                              <Box component="span" sx={{ color: "text.secondary", fontSize: "0.75em" }}>
                                {fmtFechaCalendario(f.dfeemide)}
                              </Box>
                            )}
                          </Box>
                          <Box sx={{ display: "flex", gap: 1.5, fontSize: "0.78em", color: "text.secondary" }}>
                            <span>Total: {fmtMoneda(f.total_factura ?? 0, f.moneda?.codigo || "PYG")}</span>
                            <span>·</span>
                            <span>Saldo: {fmtMoneda(f.saldo_pendiente ?? 0, f.moneda?.codigo || "PYG")}</span>
                          </Box>
                        </Box>
                      </li>
                    )}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        label={
                          !dCliente
                            ? "Factura (seleccioná un cliente)"
                            : loadingFacturas
                              ? "Cargando facturas..."
                              : dFacturasOpciones.length === 0
                                ? "Sin facturas pendientes"
                                : dTipo === "EXONERACION_INTERES"
                                  ? "Factura *"
                                  : "Factura / Cuenta a cobrar (opcional)"
                        }
                        placeholder="Buscar por número..."
                        helperText={
                          dTipo === "EXONERACION_INTERES"
                            ? "Obligatoria — la exoneración va atada a una cuota concreta"
                            : "Dejá vacío para aplicar a cualquier factura del cliente"
                        }
                      />
                    )}
                    noOptionsText="Sin facturas"
                  />

                  {/* A.3.7: cuotas (multi) — solo para exoneración de mora */}
                  {dTipo === "EXONERACION_INTERES" && (
                    <>
                      <Autocomplete
                        multiple
                        size="small"
                        disabled={!dFactura || loadingCuotas}
                        options={dCuotasOpciones}
                        value={dCuotas}
                        onChange={(_, v) => setDCuotas(v)}
                        disableCloseOnSelect
                        getOptionLabel={(c) => {
                          const mora = Number(moraPorCuota[c.id] || 0);
                          const moraStr = mora > 0 ? ` · Mora ${fmtMoneda(mora, monedaActiva)}` : "";
                          return `Cuota ${c.nro_cuota ?? "-"} · Vence ${c.dvenccuo ? fmtFechaCalendario(c.dvenccuo) : "-"} · Saldo ${fmtMoneda(c.saldo_pendiente ?? c.dmoncuota ?? 0, monedaActiva)}${moraStr}`;
                        }}
                        isOptionEqualToValue={(a, b) => a?.id === b?.id}
                        renderOption={(props, c, { selected }) => {
                          const mora = Number(moraPorCuota[c.id] || 0);
                          return (
                            <li {...props} key={c.id}>
                              <Box sx={{ display: "flex", flexDirection: "column", py: 0.25, width: "100%" }}>
                                <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                                  <Box component="span" fontWeight={700}>
                                    {selected ? "✓ " : ""}Cuota {c.nro_cuota ?? "-"}
                                  </Box>
                                  {mora > 0 && (
                                    <Chip
                                      size="small"
                                      color="error"
                                      variant="outlined"
                                      label={`Mora ${fmtMoneda(mora, monedaActiva)}`}
                                      sx={{ height: 18, fontSize: "0.68rem", fontWeight: 700 }}
                                    />
                                  )}
                                </Box>
                                <Box sx={{ display: "flex", gap: 1.5, fontSize: "0.78em", color: "text.secondary" }}>
                                  <span>Vence: {c.dvenccuo ? fmtFechaCalendario(c.dvenccuo) : "-"}</span>
                                  <span>·</span>
                                  <span>Saldo: {fmtMoneda(c.saldo_pendiente ?? c.dmoncuota ?? 0, monedaActiva)}</span>
                                </Box>
                              </Box>
                            </li>
                          );
                        }}
                        renderInput={(params) => (
                          <TextField
                            {...params}
                            label={
                              !dFactura
                                ? "Cuotas (seleccioná una factura)"
                                : loadingCuotas
                                  ? "Cargando cuotas..."
                                  : dCuotasOpciones.length === 0
                                    ? "Sin cuotas pendientes"
                                    : "Cuotas a exonerar *"
                            }
                            helperText="Podés elegir una o varias cuotas — la mora mostrada es la calculada hoy"
                          />
                        )}
                        noOptionsText="Sin cuotas"
                      />

                      {dCuotas.length > 0 && (() => {
                        const totalMora = dCuotas.reduce(
                          (s, c) => s + Number(moraPorCuota[c.id] || 0),
                          0,
                        );
                        return (
                          <Alert
                            severity={totalMora > 0 ? "warning" : "info"}
                            icon={<Icon icon="lucide:circle-alert" />}
                            sx={{ "& .MuiAlert-message": { fontSize: "0.82rem" } }}
                          >
                            Mora total estimada de las {dCuotas.length} cuota
                            {dCuotas.length === 1 ? "" : "s"} seleccionada
                            {dCuotas.length === 1 ? "" : "s"}:{" "}
                            <strong>{fmtMoneda(totalMora, monedaActiva)}</strong>
                            {totalMora > 0 && (
                              <> — usá este monto como referencia para autorizar la exoneración.</>
                            )}
                          </Alert>
                        );
                      })()}
                    </>
                  )}

                  {/* Monto y Porcentaje */}
                  <Box sx={{ display: "flex", gap: 1 }}>
                    <MonedaInput
                      label="Monto"
                      moneda={monedaActiva}
                      value={dMonto}
                      onChange={(v) => setDMonto(v ?? 0)}
                      disabled={!!dPorcentaje}
                      fullWidth
                    />
                    <TextField
                      size="small"
                      label="% Descuento"
                      value={dPorcentaje}
                      onChange={(e) => /^\d*\.?\d*$/.test(e.target.value) && setDPorcentaje(e.target.value)}
                      fullWidth
                      disabled={!!dMonto}
                      placeholder="0"
                    />
                  </Box>

                  {/* Motivo */}
                  <TextField size="small" label="Motivo (opcional)" value={dMotivo} onChange={(e) => setDMotivo(e.target.value)} fullWidth />

                  {/* Expiración */}
                  <TextField
                    size="small"
                    type="date"
                    label="Expira el (opcional, default 30 días)"
                    value={dExpira}
                    onChange={(e) => setDExpira(e.target.value)}
                    InputLabelProps={{ shrink: true }}
                    fullWidth
                  />

                  <Button
                    variant="contained"
                    color="primary"
                    disabled={
                      !dCliente ||
                      (!dMonto && !dPorcentaje) ||
                      (dTipo === "EXONERACION_INTERES" && (!dFactura || dCuotas.length === 0)) ||
                      crearDescuentoMutation.isPending
                    }
                    startIcon={<Icon icon="lucide:check-circle" />}
                    onClick={async () => {
                      const base = {
                        tipo: dTipo,
                        cobrador_id: dCobrador?.id || undefined,
                        cliente_id: dCliente.id,
                        factura_cab_id: dFactura || undefined,
                        descuento_monto: dMonto ? Number(dMonto) : undefined,
                        descuento_porcentaje: dPorcentaje ? Number(dPorcentaje) : undefined,
                        motivo: dMotivo || undefined,
                        expires_at: dExpira || undefined,
                      };
                      if (dTipo === "EXONERACION_INTERES") {
                        // Una autorización por cuota seleccionada
                        for (const cuota of dCuotas) {
                          await crearDescuentoMutation.mutateAsync({
                            ...base,
                            factura_cuota_id: cuota.id,
                          });
                        }
                      } else {
                        crearDescuentoMutation.mutate(base);
                      }
                    }}
                  >
                    {crearDescuentoMutation.isPending
                      ? "Guardando..."
                      : dTipo === "EXONERACION_INTERES"
                        ? "Autorizar Exoneración"
                        : "Autorizar Descuento"}
                  </Button>
                </Box>
              </CardContent>
            </Card>

            {/* Lista de descuentos activos */}
            <Typography variant="body2" fontWeight={600} color="text.secondary">
              Descuentos activos
            </Typography>
            {loadingDescuentos ? (
              Array.from({ length: 3 }).map((_, i) => (
                <Card key={i}>
                  <CardContent sx={{ p: 2 }}>
                    <Skeleton variant="text" width="60%" height={22} />
                    <Skeleton variant="text" width="40%" height={16} />
                  </CardContent>
                </Card>
              ))
            ) : descuentosActivos.length === 0 ? (
              <EmptyState>
                <Icon icon="lucide:percent" />
                <Typography variant="h6" fontWeight={600}>
                  Sin descuentos activos
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Los descuentos que autorices aparecerán aquí
                </Typography>
              </EmptyState>
            ) : (
              descuentosActivos.map((auth) => (
                <AuthCard key={auth.id} $color="#3b82f6">
                  <CardContent sx={{ p: 2, "&:last-child": { pb: 2 } }}>
                    <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                      <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                        <AuthIcon $color="#3b82f6">
                          <Icon icon="lucide:percent" />
                        </AuthIcon>
                        <Box>
                          <Typography fontWeight={700} variant="body2">
                            {auth.descuento_monto != null ? fmtMoneda(auth.descuento_monto, auth.factura?.moneda?.codigo || "PYG") : `${auth.descuento_porcentaje}%`}
                            {auth.tipo === "EXONERACION_INTERES" ? " (mora)" : ""}
                            {" — "}
                            {auth.cliente?.personas?.razon_social || auth.cliente?.nombre_fantasia || "—"}
                          </Typography>
                          <Typography variant="caption" color="text.secondary">
                            {auth.cobrador ? `Cobrador: ${auth.cobrador.nombre} ${auth.cobrador.apellido}` : "Cualquier cobrador del cliente"}
                            {auth.factura && ` · Fac. ${auth.factura.dpunexp}-${auth.factura.dnumdoc}`}
                            {auth.factura_cuota && ` · Cuota ${auth.factura_cuota.nro_cuota ?? "-"}`}
                          </Typography>
                          {auth.aprobador && (
                            <Typography variant="caption" color="text.secondary" display="block">
                              Autorizado por: {auth.aprobador.nombres}
                            </Typography>
                          )}
                        </Box>
                      </Box>
                      <Box sx={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0.75 }}>
                        <Chip label="Activo" size="small" color="success" sx={{ fontWeight: 600 }} />
                        <Button
                          size="small"
                          variant="outlined"
                          color="error"
                          startIcon={<Icon icon="lucide:ban" />}
                          onClick={() => handleCancelarDescuento(auth)}
                          disabled={cancelarDescuentoMutation.isPending}
                          sx={{ textTransform: "none", fontSize: "0.72rem", py: 0.25 }}
                        >
                          Cancelar
                        </Button>
                      </Box>
                    </Box>
                    {auth.motivo && (
                      <Typography variant="caption" color="text.secondary" display="block" sx={{ mt: 0.5, ml: 5.5 }}>
                        {auth.motivo}
                      </Typography>
                    )}
                    <Typography variant="caption" sx={{ color: auth.expires_at ? "warning.main" : "text.disabled", display: "block", ml: 5.5 }}>
                      {auth.expires_at ? `Expira: ${formatFecha(auth.expires_at)}` : "Sin fecha de expiración"}
                    </Typography>
                  </CardContent>
                </AuthCard>
              ))
            )}

            {/* Historial de descuentos resueltos */}
            <Typography variant="body2" fontWeight={600} color="text.secondary" sx={{ mt: 2 }}>
              Historial de descuentos
            </Typography>
            {loadingDescuentosHistorial ? (
              Array.from({ length: 2 }).map((_, i) => (
                <Card key={i}>
                  <CardContent sx={{ p: 2 }}>
                    <Skeleton variant="text" width="60%" height={22} />
                    <Skeleton variant="text" width="40%" height={16} />
                  </CardContent>
                </Card>
              ))
            ) : descuentosHistorial.length === 0 ? (
              <EmptyState>
                <Icon icon="lucide:history" />
                <Typography variant="body2" color="text.secondary">
                  Sin descuentos en el historial
                </Typography>
              </EmptyState>
            ) : (
              descuentosHistorial.map((auth) => {
                const estadoColor =
                  auth.estado === "usado" ? "#10b981"
                    : auth.estado === "rechazado" ? "#ef4444"
                      : auth.estado === "cancelado" ? "#f59e0b"
                        : "#6b7280";
                const estadoLabel =
                  auth.estado === "usado" ? "Usado"
                    : auth.estado === "rechazado" ? "Rechazado"
                      : auth.estado === "expirado" ? "Expirado"
                        : auth.estado === "cancelado" ? "Cancelado"
                          : auth.estado;
                return (
                  <AuthCard key={auth.id} $color={estadoColor}>
                    <CardContent sx={{ p: 2, "&:last-child": { pb: 2 } }}>
                      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                          <AuthIcon $color={estadoColor}>
                            <Icon icon="lucide:percent" />
                          </AuthIcon>
                          <Box>
                            <Typography fontWeight={700} variant="body2">
                              {auth.descuento_monto != null ? fmtMoneda(auth.descuento_monto, auth.factura?.moneda?.codigo || "PYG") : `${auth.descuento_porcentaje}%`}
                              {" — "}
                              {auth.cliente?.personas?.razon_social || auth.cliente?.nombre_fantasia || "—"}
                            </Typography>
                            <Typography variant="caption" color="text.secondary">
                              {auth.cobrador ? `Cobrador: ${auth.cobrador.nombre} ${auth.cobrador.apellido}` : "Cualquier cobrador"}
                              {auth.factura && ` · Fac. ${auth.factura.dpunexp}-${auth.factura.dnumdoc}`}
                            </Typography>
                            {auth.updated_at && (
                              <Typography variant="caption" color="text.secondary" display="block">
                                {formatFecha(auth.updated_at)}
                              </Typography>
                            )}
                          </Box>
                        </Box>
                        <Chip label={estadoLabel} size="small" sx={{ fontWeight: 600, bgcolor: `${estadoColor}22`, color: estadoColor }} />
                      </Box>
                      {auth.motivo && (
                        <Typography variant="caption" color="text.secondary" display="block" sx={{ mt: 0.5, ml: 5.5 }}>
                          {auth.motivo}
                        </Typography>
                      )}
                    </CardContent>
                  </AuthCard>
                );
              })
            )}
          </Box>
        )}
      </Content>

      {/* Dialog Aprobar */}
      <Dialog
        open={!!approveDialog}
        onClose={() => {
          setApproveDialog(null);
          setPin("");
        }}
        maxWidth="xs"
        fullWidth
      >
        <DialogTitle>Aprobar Autorización</DialogTitle>
        <DialogContent>
          {approveDialog && (
            <Box sx={{ mt: 1 }}>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                <strong>{TIPO_LABELS[approveDialog.tipo] || approveDialog.tipo}</strong> solicitado por {approveDialog.solicitante?.nombres || approveDialog.solicitante?.username}
              </Typography>
              <TextField
                fullWidth
                type="password"
                label="PIN Supervisor"
                value={pin}
                onChange={(e) => setPin(e.target.value)}
                inputProps={{ maxLength: 6, inputMode: "numeric" }}
                autoFocus
                onKeyDown={(e) => {
                  if (e.key === "Enter" && pin.length >= 4) {
                    aprobarMutation.mutate({ id: approveDialog.id, pin });
                  }
                }}
              />
            </Box>
          )}
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button
            onClick={() => {
              setApproveDialog(null);
              setPin("");
            }}
          >
            Cancelar
          </Button>
          <Button variant="contained" color="success" disabled={pin.length < 4 || aprobarMutation.isPending} onClick={() => aprobarMutation.mutate({ id: approveDialog.id, pin })}>
            {aprobarMutation.isPending ? "Aprobando..." : "Aprobar"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Dialog Rechazar */}
      <Dialog
        open={!!rejectDialog}
        onClose={() => {
          setRejectDialog(null);
          setMotivo("");
        }}
        maxWidth="xs"
        fullWidth
      >
        <DialogTitle>Rechazar Autorización</DialogTitle>
        <DialogContent>
          {rejectDialog && (
            <Box sx={{ mt: 1 }}>
              <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
                <strong>{TIPO_LABELS[rejectDialog.tipo] || rejectDialog.tipo}</strong> solicitado por {rejectDialog.solicitante?.nombres || rejectDialog.solicitante?.username}
              </Typography>
              <TextField fullWidth multiline rows={2} label="Motivo del rechazo" value={motivo} onChange={(e) => setMotivo(e.target.value)} autoFocus />
            </Box>
          )}
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button
            onClick={() => {
              setRejectDialog(null);
              setMotivo("");
            }}
          >
            Cancelar
          </Button>
          <Button variant="contained" color="error" disabled={rechazarMutation.isPending} onClick={() => rechazarMutation.mutate({ id: rejectDialog.id, motivo })}>
            {rechazarMutation.isPending ? "Rechazando..." : "Rechazar"}
          </Button>
        </DialogActions>
      </Dialog>

      {/* Dialog Resolver Descuento Cobrador */}
      <Dialog
        open={!!descuentoResolveDialog}
        onClose={() => {
          if (!resolverDescuentoMutation.isPending) {
            setDescuentoResolveDialog(null);
            setNotasSupervisor("");
          }
        }}
        maxWidth="xs"
        fullWidth
      >
        <DialogTitle>{descuentoResolveDialog?.decision === "aprobado" ? "Aprobar descuento" : "Rechazar descuento"}</DialogTitle>
        <DialogContent>
          {descuentoResolveDialog && (
            <Box sx={{ mt: 1, display: "flex", flexDirection: "column", gap: 1.5 }}>
              <Typography variant="body2" color="text.secondary">
                Cobrador:{" "}
                <strong>
                  {descuentoResolveDialog.auth.cobrador?.nombre} {descuentoResolveDialog.auth.cobrador?.apellido}
                </strong>
                <br />
                Cliente: <strong>{descuentoResolveDialog.auth.cliente?.personas?.razon_social || "—"}</strong>
                <br />
                Descuento solicitado:{" "}
                <strong>
                  {descuentoResolveDialog.auth.descuento_monto != null
                    ? fmtMoneda(descuentoResolveDialog.auth.descuento_monto, descuentoResolveDialog.auth.factura?.moneda?.codigo || "PYG")
                    : `${descuentoResolveDialog.auth.descuento_porcentaje}%`}
                </strong>
              </Typography>
              <TextField
                fullWidth
                multiline
                rows={2}
                label={descuentoResolveDialog.decision === "aprobado" ? "Notas (opcional)" : "Motivo del rechazo"}
                value={notasSupervisor}
                onChange={(e) => setNotasSupervisor(e.target.value)}
                autoFocus={descuentoResolveDialog.decision === "rechazado"}
              />
            </Box>
          )}
        </DialogContent>
        <DialogActions sx={{ p: 2 }}>
          <Button
            onClick={() => {
              setDescuentoResolveDialog(null);
              setNotasSupervisor("");
            }}
            disabled={resolverDescuentoMutation.isPending}
          >
            Cancelar
          </Button>
          <Button
            variant="contained"
            color={descuentoResolveDialog?.decision === "aprobado" ? "success" : "error"}
            disabled={resolverDescuentoMutation.isPending}
            onClick={() =>
              resolverDescuentoMutation.mutate({
                id: descuentoResolveDialog.auth.id,
                decision: descuentoResolveDialog.decision,
                notas: notasSupervisor || undefined,
              })
            }
          >
            {resolverDescuentoMutation.isPending ? "Guardando..." : descuentoResolveDialog?.decision === "aprobado" ? "Confirmar aprobación" : "Confirmar rechazo"}
          </Button>
        </DialogActions>
      </Dialog>
      {confirmDialogs}
    </Container>
  );
}

const Container = styled.div`
  background: ${({ theme }) => theme.body};
  min-height: calc(100vh - 80px);
  margin-top: 50px;
  @media (max-width: 600px) {
    margin-top: 40px;
  }
`;

const Header = styled.div`
  background: linear-gradient(135deg, ${({ theme }) => theme.bg3} 0%, ${({ theme }) => theme.bg4} 100%);
  border-bottom: 1px solid ${({ theme }) => theme.bg4};
  padding: 0.6rem 1.5rem;
  @media (max-width: 768px) {
    padding: 0.5rem 1rem;
  }
`;

const HeaderContent = styled.div`
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
`;

const BackBtn = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid ${({ theme }) => theme.bg4};
  background: transparent;
  color: ${({ theme }) => theme.text};
  cursor: pointer;
  transition: all 0.15s;
  &:hover {
    background: ${({ theme }) => theme.bg4};
  }
  svg {
    width: 1rem;
    height: 1rem;
  }
`;

const TitleSection = styled.div`
  flex: 1;
`;

const MainTitle = styled.h1`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: ${({ theme }) => theme.text};
  margin: 0 0 0.1rem 0;
  svg {
    color: #f88533;
    width: 1.3rem;
    height: 1.3rem;
  }
  @media (max-width: 768px) {
    font-size: 1.1rem;
  }
`;

const Subtitle = styled.p`
  font-size: 0.78rem;
  color: ${({ theme }) => theme.text}cc;
  margin: 0;
`;

const Content = styled.div`
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  @media (max-width: 768px) {
    padding: 0.75rem 1rem;
  }
`;

const StatusDot = styled.div`
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: ${({ $connected }) => ($connected ? "#22c55e" : "#6b7280")};
  box-shadow: ${({ $connected }) => ($connected ? "0 0 6px #22c55e80" : "none")};
`;

const EmptyState = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 0.5rem;
  svg {
    width: 3rem;
    height: 3rem;
    color: ${({ theme }) => theme.text}40;
  }
`;

const AuthCard = styled(Card)`
  border-left: 3px solid ${({ $color }) => $color};
  transition: all 0.15s;
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }
`;

const AuthIcon = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 8px;
  background: ${({ $color }) => $color}18;
  flex-shrink: 0;
  svg {
    width: 1.15rem;
    height: 1.15rem;
    color: ${({ $color }) => $color};
  }
`;