import { Icon } from "@iconify/react/dist/iconify.js";
import * as XLSX from "xlsx";
import {
  Alert,
  Box,
  Button,
  Card,
  CardContent,
  Checkbox,
  Chip,
  Collapse,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  InputAdornment,
  InputLabel,
  ListItemIcon,
  ListItemText,
  Menu,
  MenuItem,
  Paper,
  Select,
  Skeleton,
  Snackbar,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  TextField,
  Tooltip,
  Typography,
  useMediaQuery,
  useTheme,
} from "@mui/material";
import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import dayjs from "dayjs";
import "dayjs/locale/es";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useNavegacionListado } from "../../hooks/useNavegacionListado";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useAuthStore } from "../../store/AuthStore";
import { searchClientes } from "../../api/clientes.service";
import {
  anularFactura,
  enviarEventoCancelacion,
  enviarEventoInutilizacion,
  enviarEventoNominacion,
  enviarFacturasLoteMiddleware,
  getFacturas,
  getFacturasResumen,
  sincronizarEstadoSifen,
} from "../../api/facturas.service";
import { usePermission } from "../../hooks/usePermission";
import { getErrorApi } from "../../utils/errorUtils";
import { AccesoRestringido } from "../common/AccesoRestringido";
import KudePreviewModal from "../organismos/KudePreviewModal";
import FacturaDetalleDialog from "./FacturaDetalleDialog";
import { SifenSelectionBar } from "./SifenSelectionBar";
import { DocumentosHeaderActions } from "./DocumentosHeaderActions";
import { TablePaginationBar, SifenEstadoChip, EventoSifenPendienteItem, tieneEventoSifenPendiente, AlertasEmpresaBanner, esAlertaEventoSifen, getSifenPipelineSteps } from "../_standards";
import { useAlertasEmpresaQuery } from "../../tanstack/AlertasEmpresaStack";
import { sanitizeRecords } from "../_standards";

// Configurar dayjs en español
dayjs.locale("es");

const ESTADOS = [
  { value: "", label: "Todos los estados" },
  { value: "pendiente", label: "Pendiente", color: "warning" },
  { value: "pagada", label: "Pagada", color: "success" },
  { value: "anulada", label: "Anulada", color: "error" },
  { value: "vencida", label: "Vencida", color: "error" },
];

const FILTROS_RAPIDOS = [
  { label: "Hoy", value: "hoy" },
  { label: "Ayer", value: "ayer" },
  { label: "Esta semana", value: "semana" },
  { label: "Este mes", value: "mes" },
  { label: "Mes anterior", value: "mes_anterior" },
];

// Definición de todas las columnas disponibles
const COLUMNAS_DISPONIBLES = [
  { id: "numero", label: "Número", default: true },
  { id: "fecha", label: "Fecha", default: true },
  { id: "cliente", label: "Cliente", default: true },
  { id: "total", label: "Total", default: true },
  { id: "condicion_pago", label: "Condición de Pago", default: false },
  { id: "estado", label: "Estado", default: true },
  { id: "pipeline", label: "Pipeline", default: true },
  { id: "estado_sifen", label: "SIFEN", default: true },
  { id: "evento_aplicado", label: "Evento", default: false },
  { id: "estado_evento", label: "Estado Evento", default: false },
  { id: "cdc", label: "CDC", default: false },
  { id: "fecha_envio_sifen", label: "Fecha Envío SIFEN", default: false },
  { id: "fecha_firma_sifen", label: "Fecha Firma SIFEN", default: false },
  { id: "enlace_qr", label: "QR", default: false },
  { id: "acciones", label: "Acciones", default: true },
];

const COLUMNAS_DEFAULT = COLUMNAS_DISPONIBLES.filter((c) => c.default).map(
  (c) => c.id,
);

const COLUMNAS_STORAGE_KEY = "facturas_tab_columnas_visibles";

const moraChipColor = (estado) => {
  if (estado === "DEMANDA" || estado === "INCOBRABLE") return "error";
  if (estado === "INFORMCONF") return "info";
  if (estado === "GESTION_INTERNA" || estado === "REFINANCIADA") return "warning";
  if (estado === "RECUPERADA" || estado === "AL_DIA") return "success";
  return "default";
};

const getColumnasIniciales = () => {
  try {
    const guardadas = localStorage.getItem(COLUMNAS_STORAGE_KEY);
    if (guardadas) {
      const parsed = JSON.parse(guardadas);
      // Validar que todas sean IDs conocidos
      const idsValidos = new Set(COLUMNAS_DISPONIBLES.map((c) => c.id));
      if (Array.isArray(parsed) && parsed.every((id) => idsValidos.has(id))) {
        return parsed;
      }
    }
  } catch (_) {
    // ignore
  }
  return COLUMNAS_DEFAULT;
};

export function FacturasTab() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
  const { hasModule } = useAuthStore();
  const hasEcommerce = hasModule("ECOMMERCE");
  const sifenActivo = useAuthStore((s) => s.empresa?.sifen_activo !== false);

  // Permisos
  const { can, canRead: canReadVentas } = usePermission("VENTAS");
  const canRead = can("VEN_FAC_FACTURA_VER") || hasEcommerce;
  const canAnular = can("VEN_FAC_FACTURA_ANULAR");
  const canEnviarLote = can("VEN_FAC_SIFEN_ENVIAR");
  const canCancelacion = can("VEN_FAC_SIFEN_CANCELAR");
  const canInutilizacion = can("VEN_FAC_SIFEN_INUTILIZAR");
  const canNominacion = can("VEN_FAC_SIFEN_NOMINAR");
  const canReadSifen = canReadVentas || hasEcommerce;

  // Estados de filtros - inicializar con fecha de hoy
  const [search, setSearch] = useState("");
  const [searchDebounced, setSearchDebounced] = useState("");
  // `?buscar=` viene del link de una alerta ("Ir al documento"): arranca filtrado.
  const [searchParams] = useSearchParams();
  const buscarInicial = searchParams.get("buscar");
  useEffect(() => {
    if (!buscarInicial) return;
    setSearch(buscarInicial);
    setSearchDebounced(buscarInicial);
  }, [buscarInicial]);
  // Alertas de eventos SIFEN por documento, para marcar la fila.
  const { data: alertasEmpresa = [] } = useAlertasEmpresaQuery();
  const alertaPorDocumento = useMemo(
    () => new Map(alertasEmpresa.filter(esAlertaEventoSifen).map((a) => [a.datos?.documentoId, a])),
    [alertasEmpresa],
  );
  const [estado, setEstado] = useState("");
  const [fechaDesde, setFechaDesde] = useState(dayjs().startOf("week"));
  const [fechaHasta, setFechaHasta] = useState(dayjs().endOf("day"));
  const [filtroRapido, setFiltroRapido] = useState("semana");
  const [showFilters, setShowFilters] = useState(false);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(20);

  const [isExporting, setIsExporting] = useState(false);

  // Estados para selección múltiple y envío en lote
  const [selectedFacturas, setSelectedFacturas] = useState([]);
  const [snackbar, setSnackbar] = useState({
    open: false,
    message: "",
    severity: "success",
  });

  // Estado para columnas visibles y menú
  const [columnasVisibles, setColumnasVisibles] = useState(getColumnasIniciales);
  const [columnMenuAnchor, setColumnMenuAnchor] = useState(null);

  // Estado para menú de eventos SIFEN
  const [eventoMenuAnchor, setEventoMenuAnchor] = useState(null);
  const [facturaSeleccionada, setFacturaSeleccionada] = useState(null);
  const [dialogEvento, setDialogEvento] = useState({
    open: false,
    tipo: null,
    motivo: "",
  });

  // Estado para diálogo de nominación
  const [dialogNominacion, setDialogNominacion] = useState({
    open: false,
    motivo: "",
    clienteSeleccionado: null,
  });
  const [busquedaCliente, setBusquedaCliente] = useState("");
  const [clientesEncontrados, setClientesEncontrados] = useState([]);
  const [buscandoClientes, setBuscandoClientes] = useState(false);

  // Estado para diálogo de detalle de factura
  const [facturaDetalle, setFacturaDetalle] = useState(null);

  // Estado para preview KUDE
  const [kudePreview, setKudePreview] = useState({
    open: false,
    facturaId: null,
  });

  const toggleColumna = (columnaId) => {
    setColumnasVisibles((prev) => {
      const next = prev.includes(columnaId)
        ? prev.filter((id) => id !== columnaId)
        : [...prev, columnaId];
      try {
        localStorage.setItem(COLUMNAS_STORAGE_KEY, JSON.stringify(next));
      } catch (_) {
        // ignore
      }
      return next;
    });
  };

  const isColumnaVisible = (columnaId) => columnasVisibles.includes(columnaId);

  // Mutation para enviar facturas en lote al middleware
  const enviarLoteMutation = useMutation({
    mutationFn: enviarFacturasLoteMiddleware,
    onSuccess: (data) => {
      setSnackbar({
        open: true,
        message: `${data.data?.enviadas || 0} factura(s) enviadas al middleware`,
        severity: "success",
      });
      setSelectedFacturas([]);
      // Refrescar inmediatamente y luego después de 5 segundos para capturar el estado actualizado
      queryClient.invalidateQueries(["facturas"]);
      setTimeout(() => {
        queryClient.invalidateQueries(["facturas"]);
      }, 5000);
    },
    onError: (error) => {
      setSnackbar({
        open: true,
        message: error.response?.data?.message || "Error al enviar facturas",
        severity: "error",
      });
    },
  });

  // Mutation para sincronizar estado SIFEN manualmente
  const sincronizarSifenMutation = useMutation({
    mutationFn: () => sincronizarEstadoSifen("factura"),
    onSuccess: (data) => {
      setSnackbar({
        open: true,
        message:
          data.actualizados > 0
            ? `Estado SIFEN actualizado: ${data.actualizados} factura(s)`
            : "No hay facturas pendientes de sincronización",
        severity: data.actualizados > 0 ? "success" : "info",
      });
      // Refrescar la lista de facturas inmediatamente
      queryClient.refetchQueries({ queryKey: ["facturas"] });
    },
    onError: (error) => {
      setSnackbar({
        open: true,
        message:
          error.response?.data?.message || "Error al sincronizar estado SIFEN",
        severity: "error",
      });
    },
  });

  // Mutation para evento de inutilización SIFEN
  const inutilizacionMutation = useMutation({
    mutationFn: ({ facturaId, motivo }) =>
      enviarEventoInutilizacion(facturaId, motivo),
    onSuccess: (data) => {
      setSnackbar({
        open: true,
        message:
          data.message || "Evento de inutilización enviado correctamente",
        severity: data.success ? "success" : "warning",
      });
      setDialogEvento({ open: false, tipo: null, motivo: "" });
      setFacturaSeleccionada(null);
      queryClient.invalidateQueries(["facturas"]);
    },
    onError: (error) => {
      setSnackbar({
        open: true,
        message:
          error.response?.data?.message ||
          "Error al enviar evento de inutilización",
        severity: "error",
      });
    },
  });

  // Mutation para evento de cancelación SIFEN
  // Anulación local: para facturas que NO tienen camino de evento SIFEN
  // (nunca se enviaron, o la empresa no factura electrónicamente). Sin esto
  // quedaban sin forma de anularse desde esta pantalla — hoy son 194 en prod.
  const anulacionMutation = useMutation({
    mutationFn: ({ facturaId, motivo }) => anularFactura(facturaId, motivo),
    onSuccess: (data) => {
      setSnackbar({
        open: true,
        message: data?.message || "Factura anulada correctamente",
        severity: "success",
      });
      setDialogEvento({ open: false, tipo: null, motivo: "" });
      queryClient.invalidateQueries({ queryKey: ["facturas"] });
    },
    onError: (error) => {
      setSnackbar({
        open: true,
        message: error.response?.data?.message || "No se pudo anular la factura",
        severity: "error",
      });
    },
  });

  const cancelacionMutation = useMutation({
    mutationFn: ({ facturaId, motivo }) =>
      enviarEventoCancelacion(facturaId, motivo),
    onSuccess: (data) => {
      setSnackbar({
        open: true,
        message: data.message || "Evento de cancelación enviado correctamente",
        severity: data.success ? "success" : "warning",
      });
      setDialogEvento({ open: false, tipo: null, motivo: "" });
      setFacturaSeleccionada(null);
      queryClient.invalidateQueries(["facturas"]);
    },
    onError: (error) => {
      setSnackbar({
        open: true,
        message:
          error.response?.data?.message ||
          "Error al enviar evento de cancelación",
        severity: "error",
      });
    },
  });

  // Mutation para evento de nominación SIFEN
  const nominacionMutation = useMutation({
    mutationFn: ({ facturaId, datosCliente }) =>
      enviarEventoNominacion(facturaId, datosCliente),
    onSuccess: (data) => {
      setSnackbar({
        open: true,
        message: data.message || "Evento de nominación enviado correctamente",
        severity: data.success ? "success" : "warning",
      });
      setDialogNominacion({
        open: false,
        motivo: "",
        clienteSeleccionado: null,
      });
      setBusquedaCliente("");
      setClientesEncontrados([]);
      setFacturaSeleccionada(null);
      queryClient.invalidateQueries(["facturas"]);
    },
    onError: (error) => {
      setSnackbar({
        open: true,
        message:
          error.response?.data?.message ||
          "Error al enviar evento de nominación",
        severity: "error",
      });
    },
  });

  // Handler para buscar clientes
  const handleBuscarClientes = useCallback(async (query) => {
    if (!query || query.length < 2) {
      setClientesEncontrados([]);
      return;
    }
    setBuscandoClientes(true);
    try {
      const clientes = await searchClientes(query, 10);
      // Filtrar el cliente "Sin nombre"
      const clientesFiltrados = clientes.filter(
        (c) =>
          c.cod_cliente !== "SN001" &&
          c.personas?.razon_social?.toLowerCase() !== "sin nombre",
      );
      setClientesEncontrados(clientesFiltrados);
    } catch (error) {
      console.error("Error buscando clientes:", error);
      setClientesEncontrados([]);
    } finally {
      setBuscandoClientes(false);
    }
  }, []);

  // Debounce para búsqueda de clientes
  useEffect(() => {
    const timer = setTimeout(() => {
      handleBuscarClientes(busquedaCliente);
    }, 300);
    return () => clearTimeout(timer);
  }, [busquedaCliente, handleBuscarClientes]);

  // Handler para abrir diálogo de nominación
  const handleOpenNominacion = () => {
    handleCloseEventoMenu();
    setDialogNominacion({ open: true, motivo: "", clienteSeleccionado: null });
    setBusquedaCliente("");
    setClientesEncontrados([]);
  };

  // Handler para enviar nominación
  const handleEnviarNominacion = () => {
    if (
      !facturaSeleccionada ||
      !dialogNominacion.clienteSeleccionado ||
      !dialogNominacion.motivo.trim()
    )
      return;

    const cliente = dialogNominacion.clienteSeleccionado;
    const persona = cliente.personas;
    const datosCliente = {
      motivo: dialogNominacion.motivo,
      clienteId: cliente.id, // ID del cliente para actualizar la factura cuando se apruebe
      iNatRec: persona?.tipo_persona === "fisica" ? 1 : 2, // 1=Persona Física, 2=Persona Jurídica
      iTiOpe: 1, // Tipo de operación
      cPaisRec: persona?.paises?.codigo || "PRY",
      iTiContRec: persona?.tipo_contribuyente.codigo || 1,
      dRucRec: persona?.ruc || null,
      dDVRec: persona?.dv ? Number(persona?.dv) : null,
      iTipIDRec: persona?.tipo_documento_id || 1,
      dNumIDRec: persona?.nro_documento || persona?.ruc || "",
      dNomRec: persona?.razon_social || "",
      dNomFanRec: persona?.nombre_fantasia || null,
      dDirRec: persona?.direccion || "",
      dNumCasRec: persona?.nro_casa || null,
      cDepRec: persona?.departamento_id || null,
      cDisRec: persona?.distrito_id || null,
      cCiuRec: persona?.ciudad_id || null,
      dTelRec: persona?.telefono || null,
      dCelRec: persona?.celular || null,
      dEmailRec: persona?.email || null,
      dCodCliente: cliente.cod_cliente || null,
    };

    nominacionMutation.mutate({
      facturaId: facturaSeleccionada.id,
      datosCliente,
    });
  };

  // Handler para abrir menú de eventos SIFEN
  const handleOpenEventoMenu = (event, factura) => {
    event.stopPropagation();
    setEventoMenuAnchor(event.currentTarget);
    setFacturaSeleccionada(factura);
  };

  // Handler para cerrar menú de eventos SIFEN
  const handleCloseEventoMenu = () => {
    setEventoMenuAnchor(null);
  };

  // Handler para seleccionar tipo de evento
  const handleSelectEvento = (tipo) => {
    handleCloseEventoMenu();
    setDialogEvento({ open: true, tipo, motivo: "" });
  };

  // Handler para enviar evento
  const handleEnviarEvento = () => {
    if (
      !facturaSeleccionada ||
      !dialogEvento.tipo ||
      !dialogEvento.motivo.trim()
    )
      return;

    if (dialogEvento.tipo === "inutilizacion") {
      inutilizacionMutation.mutate({
        facturaId: facturaSeleccionada.id,
        motivo: dialogEvento.motivo,
      });
    } else if (dialogEvento.tipo === "cancelacion") {
      cancelacionMutation.mutate({
        facturaId: facturaSeleccionada.id,
        motivo: dialogEvento.motivo,
      });
    } else if (dialogEvento.tipo === "anulacion") {
      anulacionMutation.mutate({
        facturaId: facturaSeleccionada.id,
        motivo: dialogEvento.motivo,
      });
    }
  };

  // Un documento se puede reenviar a SIFEN si NO fue aprobado todavía:
  //  - "Pendiente": nunca llegó a SIFEN.
  //  - "Error": intento local falló.
  //  - "Rechazado": SIFEN rechazó y el backend sincronizó `estado` local también.
  // Anulados y aprobados quedan fuera.
  const esReenviable = useCallback(
    (f) => f.estado === "Pendiente" || f.estado === "Error" || f.estado === "Rechazado",
    [],
  );
  const esCancelableECAN = (f) => {
    if (!f.fecha_envio_sifen) return false;
    return (Date.now() - new Date(f.fecha_envio_sifen).getTime()) / 3600000 <= 48;
  };

  // Handlers para selección
  const handleSelectAll = (event) => {
    if (event.target.checked) {
      const reenviablesIds = reenviables.map((f) => f.id);
      setSelectedFacturas(reenviablesIds);
    } else {
      setSelectedFacturas([]);
    }
  };

  const handleSelectFactura = (facturaId) => {
    setSelectedFacturas((prev) =>
      prev.includes(facturaId)
        ? prev.filter((id) => id !== facturaId)
        : [...prev, facturaId],
    );
  };

  const handleEnviarLote = () => {
    if (selectedFacturas.length === 0) return;
    enviarLoteMutation.mutate(selectedFacturas);
  };

  // Debounce para búsqueda
  useEffect(() => {
    const timer = setTimeout(() => {
      setSearchDebounced(search);
      setPage(1);
    }, 500);
    return () => clearTimeout(timer);
  }, [search]);

  // Aplicar filtro rápido
  const aplicarFiltroRapido = useCallback((filtro) => {
    const hoy = dayjs();
    setFiltroRapido(filtro);

    switch (filtro) {
      case "hoy":
        setFechaDesde(hoy);
        setFechaHasta(hoy);
        break;
      case "ayer":
        setFechaDesde(hoy.subtract(1, "day"));
        setFechaHasta(hoy.subtract(1, "day"));
        break;
      case "semana":
        setFechaDesde(hoy.startOf("week"));
        setFechaHasta(hoy.endOf("week"));
        break;
      case "mes":
        setFechaDesde(hoy.startOf("month"));
        setFechaHasta(hoy.endOf("month"));
        break;
      case "mes_anterior":
        setFechaDesde(hoy.subtract(1, "month").startOf("month"));
        setFechaHasta(hoy.subtract(1, "month").endOf("month"));
        break;
      default:
        setFechaDesde(null);
        setFechaHasta(null);
    }
    setPage(1);
  }, []);

  // Limpiar filtros
  const limpiarFiltros = () => {
    setSearch("");
    setSearchDebounced("");
    setEstado("");
    setFechaDesde(null);
    setFechaHasta(null);
    setFiltroRapido("");
    setPage(1);
  };

  // Construir parámetros de consulta
  // Cuando hay búsqueda activa, no aplicar filtro de fechas (backend busca en todo el historial)
  const queryParams = useMemo(
    () => ({
      page,
      limit,
      search: searchDebounced || undefined,
      estado: estado || undefined,
      ...(searchDebounced
        ? {}
        : {
          fechaDesde: fechaDesde ? fechaDesde.format("YYYY-MM-DD") : undefined,
          fechaHasta: fechaHasta ? fechaHasta.format("YYYY-MM-DD") : undefined,
        }),
    }),
    [page, limit, searchDebounced, estado, fechaDesde, fechaHasta],
  );

  // Query para obtener facturas (paginada)
  const {
    data: facturasData,
    isLoading,
    isError,
    error: facturasError,
    refetch,
  } = useQuery({
    queryKey: ["facturas", queryParams],
    queryFn: () => getFacturas(queryParams),
    keepPreviousData: true,
  });

  // Parámetros de resumen: mismos filtros pero sin page/limit
  const resumenParams = useMemo(
    () => ({
      search: searchDebounced || undefined,
      estado: estado || undefined,
      ...(searchDebounced
        ? {}
        : {
          fechaDesde: fechaDesde ? fechaDesde.format("YYYY-MM-DD") : undefined,
          fechaHasta: fechaHasta ? fechaHasta.format("YYYY-MM-DD") : undefined,
        }),
    }),
    [searchDebounced, estado, fechaDesde, fechaHasta],
  );

  // Query separada para KPIs — considera todas las páginas
  const { data: resumenData, isLoading: isLoadingResumen } = useQuery({
    queryKey: ["facturas-resumen", resumenParams],
    queryFn: () => getFacturasResumen(resumenParams),
    keepPreviousData: true,
  });

  const errorModulo = getErrorApi(facturasError);

  const facturas = useMemo(() => facturasData?.data || [], [facturasData]);
  // Memoizado: antes se recalculaba facturas.filter(esReenviable) hasta 4× por render.
  const reenviables = useMemo(() => facturas.filter(esReenviable), [facturas, esReenviable]);
  const cantReenviables = reenviables.length;
  const total = facturasData?.total || 0;
  const lastPage = facturasData?.lastPage || 1;

  // Navegación anterior/siguiente del modal de detalle.
  const navegacionDetalle = useNavegacionListado({
    items: facturas,
    idActual: facturaDetalle?.id ?? null,
    onSeleccionar: setFacturaDetalle,
    page,
    lastPage,
    limit,
    total,
    setPage,
    paginaCargada: facturasData?.page,
  });

  const resumen = {
    facturasHoy: resumenData?.facturas ?? 0,
    ventasPorMoneda: resumenData?.ventasPorMoneda ?? {},
    pendientesSifen: resumenData?.pendientesSifen ?? 0,
    aprobadosSifen: resumenData?.aprobadosSifen ?? 0,
    rechazadosSifen: resumenData?.rechazadosSifen ?? 0,
    anuladas: resumenData?.anuladas ?? 0,
  };
  const isLoadingKpis = isLoading || isLoadingResumen;

  // Obtener estado de factura
  const getEstadoFactura = (factura) => {
    // Un documento cancelado/inutilizado en SIFEN (o anulado localmente) debe
    // reflejarse como "Anulada" en Estado, no como su estado de pago — de lo
    // contrario aparece "Pendiente" junto a un SIFEN "Cancelado" y confunde.
    if (
      factura.anulado ||
      factura.estado === "Anulado" ||
      factura.estado_sifen === "Cancelado" ||
      factura.estado_sifen === "Inutilizado"
    ) {
      return { label: "Anulada", color: "error" };
    }
    const tienePendiente = factura.cuentas_cobrar?.some(
      (cc) => cc.saldo_pendiente > 0,
    );
    const estaVencida = factura.cuentas_cobrar?.some(
      (cc) =>
        cc.saldo_pendiente > 0 && dayjs(cc.fecha_vencimiento).isBefore(dayjs()),
    );

    if (estaVencida) {
      return { label: "Vencida", color: "error" };
    }
    if (tienePendiente) {
      return { label: "Pendiente", color: "warning" };
    }
    return { label: "Pagada", color: "success" };
  };

  // Formatear número de factura
  const formatNumeroFactura = (factura) => {
    return `${factura.dest || "001"}-${factura.dpunexp || "001"}-${factura.dnumdoc || "0000000"}`;
  };

  // Formatear moneda
  const formatMoney = (amount, currencyCode = "PYG") => {
    const currency = currencyCode || "PYG";
    return new Intl.NumberFormat("es-PY", {
      style: "currency",
      currency: currency,
      minimumFractionDigits: currency === "PYG" ? 0 : 2,
    }).format(amount || 0);
  };

  const handleExportExcel = async () => {
    setIsExporting(true);
    try {
      const result = await getFacturas({
        ...resumenParams,
        limit: 9999,
      });
      const rows = (result.data ?? result ?? []).map((f) => ({
        "Número": formatNumeroFactura(f),
        "Fecha": f.dfeemide ? f.dfeemide.substring(0, 10).split("-").reverse().join("/") : "",
        "Hora": f.dfeemide ? f.dfeemide.substring(11, 16) : "",
        "Cliente": f.clientes?.personas?.razon_social ?? "",
        "RUC / CI": f.clientes?.personas?.ruc ?? "",
        "Total": f.factura_subtotales?.[0]?.dtotope ?? f.total_factura ?? 0,
        "Moneda": f.moneda?.codigo ?? "PYG",
        "Condición": f.condicion_operacion?.descripcion ?? "",
        "Estado": getEstadoFactura(f).label,
        "Estado SIFEN": f.estado_sifen ?? "",
        "CDC": f.cdc ?? "",
      }));

      const ws = XLSX.utils.json_to_sheet(sanitizeRecords(rows));
      ws["!cols"] = [14, 12, 6, 30, 16, 14, 6, 14, 12, 14, 44].map((w) => ({ wch: w }));
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Facturas");
      const desde = fechaDesde ? fechaDesde.format("YYYYMMDD") : "todo";
      const hasta = fechaHasta ? fechaHasta.format("YYYYMMDD") : "todo";
      XLSX.writeFile(wb, `facturas_${desde}_${hasta}.xlsx`);
    } catch (_) {
      // silencioso — el usuario ve que no descargó nada
    } finally {
      setIsExporting(false);
    }
  };

  // Pipeline de trazabilidad SIFEN
  const getSifenPipeline = getSifenPipelineSteps;

  // Contar filtros activos
  const filtrosActivos = [
    searchDebounced,
    estado,
    fechaDesde,
    fechaHasta,
  ].filter(Boolean).length;

  if (!canRead) {
    return (
      <AccesoRestringido mensaje="No tienes permisos para ver las facturas." />
    );
  }

  if (errorModulo) {
    return (
      <AccesoRestringido titulo="Módulo no disponible" mensaje={errorModulo} />
    );
  }

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="es">
      <Box sx={{ overflowX: "hidden", width: "100%" }}>
        <AlertasEmpresaBanner tipoDocumento="factura" />
        {/* Barra de filtros y acciones — 2 filas (ver ui-standards) */}
        <Box sx={{ display: "flex", flexDirection: "column", gap: 1, mb: { xs: 1.5, sm: 2 } }}>
          {/* Fila 1: búsqueda (prominente) + acciones */}
          <Box sx={{ display: "flex", gap: 1, alignItems: "flex-start", flexWrap: "wrap" }}>
            <Box sx={{ flex: 1, minWidth: { xs: "100%", sm: 260 } }}>
              <TextField
                fullWidth
                size="small"
                placeholder={isMobile ? "Buscar..." : "N° factura, RUC, cliente…"}
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                InputProps={{
                  startAdornment: (
                    <InputAdornment position="start">
                      <Icon icon="mdi:magnify" width={20} />
                    </InputAdornment>
                  ),
                  endAdornment: search && (
                    <InputAdornment position="end">
                      <IconButton size="small" onClick={() => setSearch("")}>
                        <Icon icon="mdi:close" width={18} />
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
              />
              {searchDebounced && (
                <Typography variant="caption" color="text.disabled" sx={{ px: 0.5, display: "block", mt: 0.25 }}>
                  Buscando en todo el historial
                </Typography>
              )}
            </Box>

            <Button
              variant={showFilters ? "contained" : "outlined"}
              startIcon={!isMobile && <Icon icon="mdi:filter-variant" />}
              onClick={() => setShowFilters(!showFilters)}
              color={filtrosActivos > 0 ? "primary" : "inherit"}
              size="small"
              sx={{ minWidth: { xs: "auto", sm: 110 } }}
            >
              {isMobile ? (
                <Icon icon="mdi:filter-variant" width={20} />
              ) : (
                `Filtros ${filtrosActivos > 0 ? `(${filtrosActivos})` : ""}`
              )}
            </Button>

            {hasModule("VENTAS") && (
              <Tooltip title="Ir al POS para crear una nueva factura" arrow>
                <Button
                  variant="contained"
                  size="small"
                  startIcon={<Icon icon="mdi:plus" width={18} />}
                  onClick={() => navigate("/pos-admin")}
                  sx={{ whiteSpace: "nowrap" }}
                >
                  {isMobile ? "Nuevo" : "Nueva Factura"}
                </Button>
              </Tooltip>
            )}

            <DocumentosHeaderActions
              onRefetch={() => refetch()}
              onSyncSifen={canReadSifen && sifenActivo ? () => sincronizarSifenMutation.mutate() : undefined}
              onColumns={(e) => setColumnMenuAnchor(e.currentTarget)}
              onExport={handleExportExcel}
              loadingSync={sincronizarSifenMutation.isPending}
              loadingExport={isExporting}
              canSyncSifen={canReadSifen && sifenActivo}
              showLabels={!isMobile}
            />
          </Box>

          {/* Fila 2: filtros rápidos por período (se atenúan al buscar en todo el historial) */}
          <Box
            sx={{
              display: "flex",
              gap: 0.75,
              alignItems: "center",
              flexWrap: "wrap",
              opacity: searchDebounced ? 0.4 : 1,
              pointerEvents: searchDebounced ? "none" : "auto",
              transition: "opacity 0.2s",
            }}
          >
            <Typography variant="caption" color="text.secondary" sx={{ mr: 0.25, display: { xs: "none", sm: "block" } }}>
              Período:
            </Typography>
            <Tooltip title={searchDebounced ? "Ignorado al buscar en todo el historial" : ""} disableHoverListener={!searchDebounced}>
              <Box sx={{ display: "flex", gap: 0.75, flexWrap: "wrap" }}>
                {FILTROS_RAPIDOS.filter((_, i) => !isMobile || i < 3).map((filtro) => (
                  <Chip
                    key={filtro.value}
                    label={filtro.label}
                    onClick={() => aplicarFiltroRapido(filtro.value)}
                    color={filtroRapido === filtro.value ? "primary" : "default"}
                    variant={filtroRapido === filtro.value ? "filled" : "outlined"}
                    size="small"
                  />
                ))}
                {filtrosActivos > 0 && (
                  <Chip
                    label={isMobile ? "Limpiar" : "Limpiar filtros"}
                    onClick={limpiarFiltros}
                    onDelete={limpiarFiltros}
                    color="error"
                    variant="outlined"
                    size="small"
                    sx={{ ml: { sm: 0.5 } }}
                  />
                )}
              </Box>
            </Tooltip>
          </Box>
        </Box>

        {/* Menú de selección de columnas */}
        <Menu
          anchorEl={columnMenuAnchor}
          open={Boolean(columnMenuAnchor)}
          onClose={() => setColumnMenuAnchor(null)}
          PaperProps={{ sx: { maxHeight: 400, width: 250 } }}
        >
          <Box sx={{ px: 2, py: 1 }}>
            <Typography variant="subtitle2" fontWeight={600}>
              Columnas visibles
            </Typography>
          </Box>
          {COLUMNAS_DISPONIBLES.map((col) => (
            <MenuItem key={col.id} onClick={() => toggleColumna(col.id)} dense>
              <Checkbox
                checked={isColumnaVisible(col.id)}
                size="small"
                sx={{ p: 0.5, mr: 1 }}
              />
              <ListItemText primary={col.label} />
            </MenuItem>
          ))}
        </Menu>

        {/* Panel de filtros expandible */}
        <Collapse in={showFilters}>
          <Paper
            sx={{ p: { xs: 1.5, sm: 2 }, mb: 2, overflow: "hidden" }}
            variant="outlined"
          >
            <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}>
              <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
                <Box sx={{ flex: 1, minWidth: { xs: "100%", sm: 160 } }}>
                  <DatePicker
                    label="Fecha desde"
                    value={fechaDesde}
                    onChange={(date) => {
                      setFechaDesde(date);
                      setFiltroRapido("");
                      setPage(1);
                    }}
                    slotProps={{
                      textField: { size: "small", fullWidth: true },
                    }}
                  />
                </Box>
                <Box sx={{ flex: 1, minWidth: { xs: "100%", sm: 160 } }}>
                  <DatePicker
                    label="Fecha hasta"
                    value={fechaHasta}
                    onChange={(date) => {
                      setFechaHasta(date);
                      setFiltroRapido("");
                      setPage(1);
                    }}
                    slotProps={{
                      textField: { size: "small", fullWidth: true },
                    }}
                  />
                </Box>
              </Box>
              <Box sx={{ display: "flex", gap: 1.5, flexWrap: "wrap" }}>
                <FormControl
                  sx={{ flex: 1, minWidth: { xs: "100%", sm: 160 } }}
                  size="small"
                >
                  <InputLabel>Estado</InputLabel>
                  <Select
                    value={estado}
                    label="Estado"
                    onChange={(e) => {
                      setEstado(e.target.value);
                      setPage(1);
                    }}
                  >
                    {ESTADOS.map((e) => (
                      <MenuItem key={e.value} value={e.value}>
                        {e.label}
                      </MenuItem>
                    ))}
                  </Select>
                </FormControl>
                <Button
                  variant="outlined"
                  onClick={limpiarFiltros}
                  startIcon={<Icon icon="mdi:filter-off" />}
                  sx={{
                    flex: { xs: 1, sm: "none" },
                    minWidth: { xs: 0, sm: 120 },
                  }}
                >
                  Limpiar
                </Button>
              </Box>
            </Box>
          </Paper>
        </Collapse>

        {/* Resumen */}
        <Box sx={{ display: "flex", gap: { xs: 1, sm: 2 }, mb: { xs: 2, sm: 3 }, flexWrap: "wrap" }}>
          {[
            { label: isMobile ? "Facts." : "Facturas", icon: "mdi:file-document", value: resumen.facturasHoy, color: undefined, skeletonW: 60 },
            { label: "Ventas", icon: "mdi:cash", value: null, color: undefined, skeletonW: 100 },
            { label: isMobile ? "Pend." : "Pendiente SIFEN", icon: "mdi:cloud-upload-outline", value: resumen.pendientesSifen, color: "warning.main", skeletonW: 40 },
            { label: isMobile ? "Aprob." : "Aprobados SIFEN", icon: "mdi:check-circle", value: resumen.aprobadosSifen, color: "success.main", skeletonW: 40 },
            { label: isMobile ? "Rech." : "Rechazados SIFEN", icon: "mdi:close-circle", value: resumen.rechazadosSifen, color: "error.main", skeletonW: 40 },
            { label: isMobile ? "Anul." : "Anuladas", icon: "mdi:file-cancel-outline", value: resumen.anuladas, color: "warning.main", skeletonW: 40, border: "warning.light" },
          ].map((kpi) => (
            <Card key={kpi.label} variant="outlined" sx={{ flex: "1 1 0", minWidth: 90, borderColor: kpi.border }}>
              <CardContent sx={{ p: { xs: 1, sm: 1.5 }, "&:last-child": { pb: { xs: 1, sm: 1.5 } } }}>
                <Typography color="text.secondary" variant="caption" sx={{ display: "flex", alignItems: "center", gap: 0.5, fontSize: { xs: "0.65rem", sm: "0.75rem" } }}>
                  <Icon icon={kpi.icon} width={isMobile ? 14 : 16} />
                  {kpi.label}
                </Typography>
                {kpi.label === (isMobile ? "Ventas" : "Ventas") ? (
                  isLoadingKpis ? <Skeleton width={100} /> : (
                    <Box>
                      {Object.entries(resumen.ventasPorMoneda).map(([moneda, total]) => (
                        <Typography key={moneda} variant="h6" fontWeight={600} color="success.main">{formatMoney(total, moneda)}</Typography>
                      ))}
                      {Object.keys(resumen.ventasPorMoneda).length === 0 && <Typography variant="h6" fontWeight={600} color="text.secondary">-</Typography>}
                    </Box>
                  )
                ) : (
                  <Typography variant={isMobile ? "h6" : "h5"} fontWeight={600} color={kpi.color}>
                    {isLoadingKpis ? <Skeleton width={kpi.skeletonW} /> : kpi.value}
                  </Typography>
                )}
              </CardContent>
            </Card>
          ))}
        </Box>

        {/* Barra de acciones para selección — compartida con NotasCredito */}
        {sifenActivo && (
          <SifenSelectionBar
            selectedCount={selectedFacturas.length}
            rechazadosCount={facturas.filter(
              (f) => selectedFacturas.includes(f.id) && f.estado === "Rechazado",
            ).length}
            entityLabel="factura"
            canSend={canEnviarLote}
            sending={enviarLoteMutation.isPending}
            onSend={handleEnviarLote}
            onCancel={() => setSelectedFacturas([])}
          />
        )}

        {/* Vista mobile: cards */}
        {isMobile ? (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
            {isLoading ? (
              [...Array(4)].map((_, i) => (
                <Paper
                  key={i}
                  variant="outlined"
                  sx={{ p: 1.5, borderRadius: 2 }}
                >
                  <Skeleton width="60%" />
                  <Skeleton width="40%" />
                  <Skeleton width="80%" />
                </Paper>
              ))
            ) : !isError && facturas.length === 0 ? (
              <Paper variant="outlined" sx={{ p: 4, textAlign: "center" }}>
                <Icon
                  icon="mdi:file-document-outline"
                  width={48}
                  style={{ opacity: 0.3 }}
                />
                <Typography color="text.secondary" sx={{ mt: 1 }}>
                  No se encontraron facturas
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  {filtrosActivos > 0
                    ? "Intenta ajustar los filtros de búsqueda"
                    : "Crea tu primera factura desde el POS"}
                </Typography>
              </Paper>
            ) : (
              facturas.map((factura) => {
                const estadoFactura = getEstadoFactura(factura);
                const isSelected = selectedFacturas.includes(factura.id);
                return (
                  <Paper
                    key={factura.id}
                    variant="outlined"
                    onClick={() => setFacturaDetalle(factura)}
                    sx={{
                      p: 1.5,
                      borderRadius: 2,
                      cursor: "pointer",
                      bgcolor: isSelected
                        ? "action.selected"
                        : "background.paper",
                      "&:active": { bgcolor: "action.hover" },
                    }}
                  >
                    {/* Fila 1: número + estado */}
                    <Box
                      sx={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "flex-start",
                        mb: 0.5,
                      }}
                    >
                      <Typography
                        variant="body2"
                        fontWeight={600}
                        sx={{ fontFamily: "monospace" }}
                      >
                        {formatNumeroFactura(factura)}
                      </Typography>
                      <Box
                        sx={{ display: "flex", gap: 0.5, alignItems: "center" }}
                      >
                        <Chip
                          label={estadoFactura.label}
                          color={estadoFactura.color}
                          size="small"
                          variant="outlined"
                        />
                        <SifenEstadoChip
                          estadoSifen={factura.estado_sifen}
                          mensajeSifen={factura.mensaje_sifen}
                          showDash={false}
                        />
                      </Box>
                    </Box>
                    {/* Fila 2: cliente */}
                    <Typography variant="body2" fontWeight={500} noWrap>
                      {factura.clientes?.personas?.razon_social || "Sin nombre"}
                    </Typography>
                    <Typography variant="caption" color="text.secondary">
                      {factura.clientes?.personas?.ruc || ""}
                    </Typography>
                    {factura.cliente_en_gestion_mora?.activa && (
                      <Chip
                        size="small"
                        label={`EN GESTIÓN${factura.cliente_en_gestion_mora.estado ? ` · ${factura.cliente_en_gestion_mora.estado}` : ""}`}
                        color={moraChipColor(factura.cliente_en_gestion_mora.estado)}
                        sx={{ fontSize: "0.6rem", height: 18, fontWeight: 700, mt: 0.3 }}
                      />
                    )}
                    {/* Fila 3: total + fecha + acciones */}
                    <Box
                      sx={{
                        display: "flex",
                        justifyContent: "space-between",
                        alignItems: "center",
                        mt: 0.75,
                      }}
                    >
                      <Box>
                        <Typography
                          variant="body2"
                          fontWeight={700}
                          color="primary.main"
                        >
                          {formatMoney(
                            factura.factura_subtotales?.[0]?.dtotope ||
                            factura.total_factura ||
                            0,
                            factura.moneda?.codigo,
                          )}
                        </Typography>
                        <Typography variant="caption" color="text.secondary">
                          {(() => {
                            const iso = factura.dfeemide || "";
                            const [d, t] = iso.split("T");
                            const [y, mo, dy] = (d || "").split("-");
                            return `${dy}/${mo}/${y} ${(t || "").substring(0, 5)}`;
                          })()}
                        </Typography>
                      </Box>
                      <Box
                        sx={{ display: "flex", gap: 0.25 }}
                        onClick={(e) => e.stopPropagation()}
                      >
                        <Tooltip title="Ver detalle">
                          <IconButton
                            size="small"
                            onClick={(e) => {
                              e.stopPropagation();
                              setFacturaDetalle(factura);
                            }}
                          >
                            <Icon icon="mdi:eye" width={18} />
                          </IconButton>
                        </Tooltip>
                        <Tooltip title="Ver KUDE">
                          <IconButton
                            size="small"
                            color="primary"
                            onClick={(e) => {
                              e.stopPropagation();
                              setKudePreview({
                                open: true,
                                facturaId: factura.id,
                                numero: [factura.dest, factura.dpunexp, factura.dnumdoc].filter(Boolean).join("-"),
                              });
                            }}
                          >
                            <Icon icon="mdi:file-pdf-box" width={18} />
                          </IconButton>
                        </Tooltip>
                        {estadoFactura.label === "Pendiente" && (
                          <Tooltip title="Registrar cobro">
                            <IconButton
                              size="small"
                              color="success"
                              onClick={(e) => {
                                e.stopPropagation();
                                navigate(`/cobros?factura=${factura.id}`);
                              }}
                            >
                              <Icon icon="mdi:cash-plus" width={18} />
                            </IconButton>
                          </Tooltip>
                        )}
                        {canAnular &&
                          factura.estado !== "Anulado" &&
                          !["Rechazado", "Error", "Aprobado"].includes(
                            factura.estado_sifen,
                          ) && (
                            <Tooltip title="Anular factura">
                              <IconButton
                                size="small"
                                color="error"
                                onClick={() => {
                                  setFacturaSeleccionada(factura);
                                  setDialogEvento({
                                    open: true,
                                    tipo: "anulacion",
                                    motivo: "",
                                  });
                                }}
                              >
                                <Icon icon="mdi:cancel" width={18} />
                              </IconButton>
                            </Tooltip>
                          )}
                        {(canInutilizacion ||
                          canCancelacion ||
                          canNominacion) &&
                          (factura.estado_sifen === "Rechazado" ||
                            factura.estado_sifen === "Error" ||
                            factura.estado_sifen === "Aprobado") && (
                            <Tooltip title="Eventos SIFEN">
                              <IconButton
                                size="small"
                                color="warning"
                                onClick={(e) =>
                                  handleOpenEventoMenu(e, factura)
                                }
                              >
                                <Icon
                                  icon="mdi:file-document-alert"
                                  width={18}
                                />
                              </IconButton>
                            </Tooltip>
                          )}
                      </Box>
                    </Box>
                  </Paper>
                );
              })
            )}
          </Box>
        ) : (
          /* Vista desktop: tabla */
          <TableContainer
            component={Paper}
            variant="outlined"
            sx={{ overflowX: "auto" }}
          >
            <Table size="medium" sx={{ minWidth: 650 }}>
              <TableHead>
                <TableRow sx={{ bgcolor: "action.hover" }}>
                  {canEnviarLote && sifenActivo && (
                    <TableCell padding="checkbox">
                      <Checkbox
                        indeterminate={
                          selectedFacturas.length > 0 &&
                          selectedFacturas.length < cantReenviables
                        }
                        checked={
                          cantReenviables > 0 &&
                          selectedFacturas.length === cantReenviables
                        }
                        onChange={handleSelectAll}
                      />
                    </TableCell>
                  )}
                  {isColumnaVisible("numero") && (
                    <TableCell
                      sx={{
                        fontWeight: 600,
                        whiteSpace: "nowrap",
                        maxWidth: isMobile ? 120 : "auto",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                      }}
                    >
                      Número
                    </TableCell>
                  )}
                  {isColumnaVisible("fecha") && (
                    <TableCell sx={{ fontWeight: 600, whiteSpace: "nowrap" }}>
                      Fecha
                    </TableCell>
                  )}
                  {isColumnaVisible("cliente") && (
                    <TableCell
                      sx={{
                        fontWeight: 600,
                        maxWidth: isMobile ? 140 : "auto",
                        whiteSpace: "nowrap",
                        overflow: "hidden",
                        textOverflow: "ellipsis",
                      }}
                    >
                      Cliente
                    </TableCell>
                  )}
                  {isColumnaVisible("total") && (
                    <TableCell
                      sx={{ fontWeight: 600, whiteSpace: "nowrap" }}
                      align="right"
                    >
                      Total
                    </TableCell>
                  )}
                  {isColumnaVisible("condicion_pago") && (
                    <TableCell sx={{ fontWeight: 600 }}>
                      Condición Pago
                    </TableCell>
                  )}
                  {isColumnaVisible("estado") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">
                      Estado
                    </TableCell>
                  )}
                  {isColumnaVisible("pipeline") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center" />
                  )}
                  {isColumnaVisible("estado_sifen") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">
                      SIFEN
                    </TableCell>
                  )}
                  {isColumnaVisible("evento_aplicado") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">
                      Evento
                    </TableCell>
                  )}
                  {isColumnaVisible("estado_evento") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">
                      Estado Evento
                    </TableCell>
                  )}
                  {isColumnaVisible("cdc") && (
                    <TableCell sx={{ fontWeight: 600 }}>CDC</TableCell>
                  )}
                  {isColumnaVisible("fecha_envio_sifen") && (
                    <TableCell sx={{ fontWeight: 600 }}>Fecha Envío</TableCell>
                  )}
                  {isColumnaVisible("fecha_firma_sifen") && (
                    <TableCell sx={{ fontWeight: 600 }}>Fecha Firma</TableCell>
                  )}
                  {isColumnaVisible("enlace_qr") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">
                      QR
                    </TableCell>
                  )}
                  {isColumnaVisible("acciones") && (
                    <TableCell sx={{ fontWeight: 600 }} align="center">
                      Acciones
                    </TableCell>
                  )}
                </TableRow>
              </TableHead>
              <TableBody>
                {isLoading ? (
                  [...Array(5)].map((_, i) => (
                    <TableRow key={i}>
                      <TableCell>
                        <Skeleton />
                      </TableCell>
                      <TableCell>
                        <Skeleton />
                      </TableCell>
                      <TableCell>
                        <Skeleton />
                      </TableCell>
                      <TableCell>
                        <Skeleton />
                      </TableCell>
                      <TableCell>
                        <Skeleton />
                      </TableCell>
                      <TableCell>
                        <Skeleton />
                      </TableCell>
                      <TableCell>
                        <Skeleton />
                      </TableCell>
                    </TableRow>
                  ))
                ) : !isError && facturas.length === 0 ? (
                  <TableRow>
                    <TableCell colSpan={8} align="center" sx={{ py: 8 }}>
                      <Icon
                        icon="mdi:file-document-outline"
                        width={64}
                        style={{ opacity: 0.3 }}
                      />
                      <Typography color="text.secondary" sx={{ mt: 1 }}>
                        No se encontraron facturas
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {filtrosActivos > 0
                          ? "Intenta ajustar los filtros de búsqueda"
                          : "Crea tu primera factura desde el POS"}
                      </Typography>
                    </TableCell>
                  </TableRow>
                ) : (
                  facturas.map((factura) => {
                    const estadoFactura = getEstadoFactura(factura);
                    const isPendiente = esReenviable(factura);
                    const isSelected = selectedFacturas.includes(factura.id);
                    return (
                      <TableRow
                        key={factura.id}
                        hover
                        selected={isSelected}
                        sx={{ cursor: "pointer" }}
                        onClick={() => setFacturaDetalle(factura)}
                      >
                        {canEnviarLote && sifenActivo && (
                          <TableCell padding="checkbox">
                            <Checkbox
                              checked={isSelected}
                              disabled={!isPendiente}
                              onClick={(e) => e.stopPropagation()}
                              onChange={() => handleSelectFactura(factura.id)}
                            />
                          </TableCell>
                        )}
                        {isColumnaVisible("numero") && (
                          <TableCell>
                            <Typography variant="body2" fontWeight={500}>
                              {formatNumeroFactura(factura)}
                            </Typography>
                          </TableCell>
                        )}
                        {isColumnaVisible("fecha") && (
                          <TableCell>
                            {(() => {
                              const iso = factura.dfeemide || "";
                              const [d, t] = iso.split("T");
                              const [y, mo, dy] = (d || "").split("-");
                              return (
                                <>
                                  <Typography variant="body2">
                                    {dy}/{mo}/{y}
                                  </Typography>
                                  <Typography variant="caption" color="text.secondary">
                                    {(t || "").substring(0, 5)}
                                  </Typography>
                                </>
                              );
                            })()}
                          </TableCell>
                        )}
                        {isColumnaVisible("cliente") && (
                          <TableCell>
                            <Typography variant="body2" fontWeight={500}>
                              {factura.clientes?.personas?.razon_social ||
                                "Sin nombre"}
                            </Typography>
                            <Typography
                              variant="caption"
                              color="text.secondary"
                            >
                              {factura.clientes?.personas?.ruc || ""}
                            </Typography>
                            {factura.cliente_en_gestion_mora?.activa && (
                              <Chip
                                size="small"
                                label={`EN GESTIÓN${factura.cliente_en_gestion_mora.estado ? ` · ${factura.cliente_en_gestion_mora.estado}` : ""}`}
                                color={moraChipColor(factura.cliente_en_gestion_mora.estado)}
                                sx={{ fontSize: "0.6rem", height: 18, fontWeight: 700, mt: 0.3 }}
                              />
                            )}
                          </TableCell>
                        )}
                        {isColumnaVisible("total") && (
                          <TableCell align="right">
                            <Typography variant="body2" fontWeight={600}>
                              {formatMoney(
                                factura.factura_subtotales?.[0]?.dtotope ||
                                factura.total_factura ||
                                0,
                                factura.moneda?.codigo,
                              )}
                            </Typography>
                          </TableCell>
                        )}
                        {isColumnaVisible("condicion_pago") && (
                          <TableCell>
                            <Typography variant="body2">
                              {factura.condicion_operacion?.descripcion || "-"}
                            </Typography>
                            {factura.factura_cuotas?.length > 0 && (
                              <Typography
                                variant="caption"
                                color="text.secondary"
                              >
                                {factura.factura_cuotas.length} cuota(s)
                              </Typography>
                            )}
                          </TableCell>
                        )}
                        {isColumnaVisible("estado") && (
                          <TableCell align="center">
                            <Tooltip
                              title={
                                Number(factura.total_notas_credito || 0) > 0 &&
                                Number(factura.total_notas_credito || 0) >=
                                  Number(factura.total_factura || 0) - 1e-2
                                  ? "Cancelada por NC"
                                  : ""
                              }
                              arrow
                              disableHoverListener={
                                !(
                                  Number(factura.total_notas_credito || 0) > 0 &&
                                  Number(factura.total_notas_credito || 0) >=
                                    Number(factura.total_factura || 0) - 1e-2
                                )
                              }
                            >
                              <Chip
                                label={estadoFactura.label}
                                color={estadoFactura.color}
                                size="small"
                                variant="outlined"
                                icon={
                                  Number(factura.total_notas_credito || 0) > 0 &&
                                  Number(factura.total_notas_credito || 0) >=
                                    Number(factura.total_factura || 0) - 1e-2 ? (
                                    <Icon icon="lucide:file-x" width={12} />
                                  ) : undefined
                                }
                              />
                            </Tooltip>
                          </TableCell>
                        )}
                        {isColumnaVisible("pipeline") && (
                          <TableCell align="center" sx={{ px: 0.5 }}>
                            <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "2px" }}>
                              {getSifenPipeline(factura).map((step, i, arr) => (
                                <Box key={i} sx={{ display: "flex", alignItems: "center", gap: "2px" }}>
                                  <Tooltip title={step.label + (step.date ? ` (${step.date})` : "")} arrow>
                                    <Box component="span" sx={{ display: "inline-flex", cursor: "default" }}>
                                      <Icon
                                        icon={step.icon}
                                        width={15}
                                        style={{ color: step.done ? step.color : "#555", opacity: step.done ? 1 : 0.3 }}
                                      />
                                    </Box>
                                  </Tooltip>
                                  {i < arr.length - 1 && (
                                    <Icon icon="mdi:chevron-right" width={9} style={{ color: "#555", opacity: 0.4 }} />
                                  )}
                                </Box>
                              ))}
                            </Box>
                          </TableCell>
                        )}
                        {isColumnaVisible("estado_sifen") && (
                          <TableCell align="center" sx={{ maxWidth: 180 }}>
                            <SifenEstadoChip
                              estadoSifen={factura.estado_sifen}
                              mensajeSifen={factura.mensaje_sifen}
                            />
                          </TableCell>
                        )}
                        {isColumnaVisible("evento_aplicado") && (
                          <TableCell align="center">
                            {factura.evento_aplicado ? (
                              <Chip
                                label={
                                  factura.evento_aplicado === "EINU"
                                    ? "Inutilización"
                                    : factura.evento_aplicado === "ECAN"
                                      ? "Cancelación"
                                      : factura.evento_aplicado === "EINO"
                                        ? "Nominación"
                                        : factura.evento_aplicado
                                }
                                size="small"
                                variant="outlined"
                                color={
                                  factura.evento_aplicado === "EINU"
                                    ? "warning"
                                    : factura.evento_aplicado === "ECAN"
                                      ? "error"
                                      : factura.evento_aplicado === "EINO"
                                        ? "info"
                                        : "default"
                                }
                              />
                            ) : (
                              <Typography
                                variant="caption"
                                color="text.secondary"
                              >
                                -
                              </Typography>
                            )}
                          </TableCell>
                        )}
                        {isColumnaVisible("estado_evento") && (
                          <TableCell align="center">
                            {factura.estado_evento ? (
                              <Tooltip
                                title={
                                  alertaPorDocumento.get(factura.id)?.titulo ||
                                  factura.mensaje_evento ||
                                  factura.estado_evento
                                }
                              >
                                <Chip
                                  label={factura.estado_evento}
                                  size="small"
                                  color={
                                    factura.estado_evento === "Aprobado"
                                      ? "success"
                                      : factura.estado_evento === "Rechazado"
                                        ? "error"
                                        : factura.estado_evento === "Pendiente"
                                          ? "warning"
                                          : "default"
                                  }
                                  icon={
                                    factura.estado_evento === "Aprobado" ? (
                                      <Icon
                                        icon="mdi:check-circle"
                                        width={16}
                                      />
                                    ) : alertaPorDocumento.has(factura.id) ? (
                                      <Icon icon="mdi:alert" width={16} />
                                    ) : factura.estado_evento ===
                                      "Rechazado" ? (
                                      <Icon
                                        icon="mdi:close-circle"
                                        width={16}
                                      />
                                    ) : (
                                      <Icon
                                        icon="mdi:clock-outline"
                                        width={16}
                                      />
                                    )
                                  }
                                />
                              </Tooltip>
                            ) : (
                              <Typography
                                variant="caption"
                                color="text.secondary"
                              >
                                -
                              </Typography>
                            )}
                          </TableCell>
                        )}
                        {isColumnaVisible("cdc") && (
                          <TableCell>
                            {factura.cdc ? (
                              <Tooltip title={factura.cdc}>
                                <Typography
                                  variant="caption"
                                  sx={{ fontFamily: "monospace" }}
                                >
                                  {factura.cdc.substring(0, 15)}...
                                </Typography>
                              </Tooltip>
                            ) : (
                              <Typography
                                variant="caption"
                                color="text.secondary"
                              >
                                -
                              </Typography>
                            )}
                          </TableCell>
                        )}
                        {isColumnaVisible("fecha_envio_sifen") && (
                          <TableCell>
                            <Typography variant="caption">
                              {factura.fecha_envio_sifen
                                ? dayjs(factura.fecha_envio_sifen).format(
                                  "DD/MM/YY HH:mm",
                                )
                                : "-"}
                            </Typography>
                          </TableCell>
                        )}
                        {isColumnaVisible("fecha_firma_sifen") && (
                          <TableCell>
                            <Typography variant="caption">
                              {factura.fecha_firma_sifen
                                ? dayjs(factura.fecha_firma_sifen).format(
                                  "DD/MM/YY HH:mm",
                                )
                                : "-"}
                            </Typography>
                          </TableCell>
                        )}
                        {isColumnaVisible("enlace_qr") && (
                          <TableCell align="center">
                            {factura.enlace_qr ? (
                              <Tooltip title="Ver QR">
                                <IconButton
                                  size="small"
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    window.open(factura.enlace_qr, "_blank");
                                  }}
                                >
                                  <Icon icon="mdi:qrcode" width={18} />
                                </IconButton>
                              </Tooltip>
                            ) : (
                              <Typography
                                variant="caption"
                                color="text.secondary"
                              >
                                -
                              </Typography>
                            )}
                          </TableCell>
                        )}
                        {isColumnaVisible("acciones") && (
                          <TableCell align="center">
                            <Box
                              sx={{
                                display: "flex",
                                gap: 0.5,
                                justifyContent: "center",
                              }}
                            >
                              <Tooltip title="Ver detalle">
                                <IconButton
                                  size="small"
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    setFacturaDetalle(factura);
                                  }}
                                >
                                  <Icon icon="mdi:eye" width={18} />
                                </IconButton>
                              </Tooltip>
                              <Tooltip title="Ver KUDE / Imprimir">
                                <IconButton
                                  size="small"
                                  color="primary"
                                  onClick={(e) => {
                                    e.stopPropagation();
                                    setKudePreview({
                                      open: true,
                                      facturaId: factura.id,
                                      numero: [factura.dest, factura.dpunexp, factura.dnumdoc].filter(Boolean).join("-"),
                                    });
                                  }}
                                >
                                  <Icon icon="mdi:file-pdf-box" width={18} />
                                </IconButton>
                              </Tooltip>
                              {estadoFactura.label === "Pendiente" && (
                                <Tooltip title="Registrar cobro">
                                  <IconButton
                                    size="small"
                                    color="success"
                                    onClick={(e) => {
                                      e.stopPropagation();
                                      navigate(`/cobros?factura=${factura.id}`);
                                    }}
                                  >
                                    <Icon icon="mdi:cash-plus" width={18} />
                                  </IconButton>
                                </Tooltip>
                              )}
                              {/* Menú de eventos SIFEN */}
                              {(canInutilizacion ||
                                canCancelacion ||
                                canNominacion) &&
                                (factura.estado_sifen === "Rechazado" ||
                                  factura.estado_sifen === "Error" ||
                                  factura.estado_sifen === "Aprobado") && (
                                  <Tooltip title="Eventos SIFEN">
                                    <IconButton
                                      size="small"
                                      color="warning"
                                      onClick={(e) =>
                                        handleOpenEventoMenu(e, factura)
                                      }
                                    >
                                      <Icon
                                        icon="mdi:file-document-alert"
                                        width={18}
                                      />
                                    </IconButton>
                                  </Tooltip>
                                )}
                            </Box>
                          </TableCell>
                        )}
                      </TableRow>
                    );
                  })
                )}
              </TableBody>
            </Table>
          </TableContainer>
        )}

        {/* Paginación */}
        {!isLoading && facturas.length > 0 && (
          <TablePaginationBar
            page={page}
            totalPages={lastPage}
            onPageChange={setPage}
            total={total}
            shown={facturas.length}
            noun="facturas"
            rowsPerPage={limit}
            onRowsPerPageChange={(n) => {
              setLimit(n);
              setPage(1);
            }}
          />
        )}

        {/* Error */}
        {isError && (
          <Paper sx={{ p: 3, textAlign: "center", mt: 2 }} variant="outlined">
            <Icon
              icon="mdi:alert-circle"
              width={48}
              style={{ color: "#f44336" }}
            />
            <Typography color="error" sx={{ mt: 1 }}>
              Error al cargar las facturas
            </Typography>
            <Button
              variant="outlined"
              onClick={() => refetch()}
              sx={{ mt: 2 }}
              startIcon={<Icon icon="mdi:refresh" />}
            >
              Reintentar
            </Button>
          </Paper>
        )}

        {/* Menú de eventos SIFEN */}
        <Menu
          anchorEl={eventoMenuAnchor}
          open={Boolean(eventoMenuAnchor)}
          onClose={handleCloseEventoMenu}
        >
          {tieneEventoSifenPendiente(facturaSeleccionada) && (
            <EventoSifenPendienteItem documento={facturaSeleccionada} tipoDocumento="factura" onCerrar={handleCloseEventoMenu} />
          )}
          {canInutilizacion &&
            !tieneEventoSifenPendiente(facturaSeleccionada) &&
            (facturaSeleccionada?.estado_sifen === "Rechazado" ||
              facturaSeleccionada?.estado_sifen === "Error") && (
              <MenuItem onClick={() => handleSelectEvento("inutilizacion")}>
                <ListItemIcon>
                  <Icon icon="mdi:file-remove" width={20} />
                </ListItemIcon>
                <ListItemText
                  primary="Inutilizar (EINU)"
                  secondary="Para documentos rechazados o con error"
                />
              </MenuItem>
            )}
          {canCancelacion &&
            !tieneEventoSifenPendiente(facturaSeleccionada) &&
            facturaSeleccionada?.estado_sifen === "Aprobado" && (() => {
              const cancelable = !sifenActivo || esCancelableECAN(facturaSeleccionada);
              return (
                <Tooltip title={sifenActivo && !cancelable ? "Han pasado más de 48 horas desde el envío" : ""} placement="left">
                  <span>
                    <MenuItem disabled={!cancelable} onClick={() => handleSelectEvento("cancelacion")}>
                      <ListItemIcon>
                        <Icon icon="mdi:file-cancel" width={20} />
                      </ListItemIcon>
                      <ListItemText
                        primary="Cancelar (ECAN)"
                        secondary={sifenActivo ? "Dentro de 48h del envío" : "Cancelación local (sin SIFEN)"}
                      />
                    </MenuItem>
                  </span>
                </Tooltip>
              );
            })()}
          {canNominacion &&
            !tieneEventoSifenPendiente(facturaSeleccionada) &&
            facturaSeleccionada?.estado_sifen === "Aprobado" &&
            (facturaSeleccionada?.clientes?.cod_cliente === "SN001" ||
              facturaSeleccionada?.clientes?.personas?.razon_social?.toLowerCase() ===
              "sin nombre") && (
              <MenuItem onClick={handleOpenNominacion}>
                <ListItemIcon>
                  <Icon icon="mdi:account-plus" width={20} />
                </ListItemIcon>
                <ListItemText
                  primary="Nominar (EINO)"
                  secondary="Asignar cliente a documento innominado"
                />
              </MenuItem>
            )}
        </Menu>

        {/* Diálogo para ingresar motivo del evento */}
        <Dialog
          open={dialogEvento.open}
          onClose={() =>
            setDialogEvento({ open: false, tipo: null, motivo: "" })
          }
          maxWidth="sm"
          fullWidth
        >
          <DialogTitle>
            {dialogEvento.tipo === "inutilizacion" &&
              "Inutilizar Documento (EINU)"}
            {dialogEvento.tipo === "cancelacion" && "Cancelar Documento (ECAN)"}
            {dialogEvento.tipo === "anulacion" && "Anular factura"}
          </DialogTitle>
          <DialogContent>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
              {dialogEvento.tipo === "inutilizacion" &&
                (facturaSeleccionada?.estado_sifen === "Error"
                  ? "Esta factura nunca llegó a SIFEN (se frenó antes de enviarse). Antes de inutilizar el número se confirma con SIFEN que no la tiene; al aprobarse se anula y se revierten stock, asiento contable, cuotas y cuenta corriente."
                  : "Este evento inutilizará el documento rechazado en SIFEN.")}
              {dialogEvento.tipo === "anulacion" &&
                "La factura no tiene evento SIFEN pendiente (nunca se envió o la empresa no factura electrónicamente). Se anula localmente y se revierten stock, caja, asiento contable, cuotas, cuenta corriente y comisiones."}
              {dialogEvento.tipo === "cancelacion" && (
                sifenActivo
                  ? "Este evento cancelará el documento aprobado en SIFEN. Solo disponible dentro de las 48 horas del envío."
                  : "La empresa no tiene facturación electrónica activa: la cancelación se aplicará localmente sin enviar a SIFEN."
              )}
            </Typography>
            <TextField
              autoFocus
              fullWidth
              label="Motivo"
              multiline
              rows={3}
              value={dialogEvento.motivo}
              onChange={(e) =>
                setDialogEvento((prev) => ({ ...prev, motivo: e.target.value }))
              }
              placeholder="Ingrese el motivo del evento..."
            />
          </DialogContent>
          <DialogActions>
            <Button
              onClick={() =>
                setDialogEvento({ open: false, tipo: null, motivo: "" })
              }
            >
              Cancelar
            </Button>
            <Button
              variant="contained"
              color={dialogEvento.tipo === "cancelacion" ? "error" : "warning"}
              onClick={handleEnviarEvento}
              disabled={
                !dialogEvento.motivo.trim() ||
                inutilizacionMutation.isPending ||
                cancelacionMutation.isPending
              }
            >
              {inutilizacionMutation.isPending || cancelacionMutation.isPending
                ? "Enviando..."
                : "Enviar Evento"}
            </Button>
          </DialogActions>
        </Dialog>

        {/* Diálogo de nominación con buscador de clientes */}
        <Dialog
          open={dialogNominacion.open}
          onClose={() => {
            setDialogNominacion({
              open: false,
              motivo: "",
              clienteSeleccionado: null,
            });
            setBusquedaCliente("");
            setClientesEncontrados([]);
          }}
          maxWidth="sm"
          fullWidth
        >
          <DialogTitle>Nominar Documento (EINO)</DialogTitle>
          <DialogContent>
            <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
              Seleccione un cliente existente para asignar a este documento
              innominado.
            </Typography>

            {/* Buscador de clientes */}
            <TextField
              fullWidth
              label="Buscar cliente"
              placeholder="Ingrese RUC, documento o nombre..."
              value={busquedaCliente}
              onChange={(e) => setBusquedaCliente(e.target.value)}
              sx={{ mb: 2 }}
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Icon icon="mdi:magnify" width={20} />
                  </InputAdornment>
                ),
                endAdornment: buscandoClientes && (
                  <InputAdornment position="end">
                    <Icon
                      icon="mdi:loading"
                      width={20}
                      className="animate-spin"
                    />
                  </InputAdornment>
                ),
              }}
            />

            {/* Lista de clientes encontrados */}
            {clientesEncontrados.length > 0 && (
              <Paper
                variant="outlined"
                sx={{ maxHeight: 200, overflow: "auto", mb: 2 }}
              >
                {clientesEncontrados.map((cliente) => (
                  <MenuItem
                    key={cliente.id}
                    selected={
                      dialogNominacion.clienteSeleccionado?.id === cliente.id
                    }
                    onClick={() => {
                      setDialogNominacion((prev) => ({
                        ...prev,
                        clienteSeleccionado: cliente,
                      }));
                      setBusquedaCliente("");
                      setClientesEncontrados([]);
                    }}
                  >
                    <ListItemText
                      primary={cliente.personas?.razon_social || "Sin nombre"}
                      secondary={`${cliente.personas?.ruc || cliente.personas?.nro_documento || ""} - ${cliente.cod_cliente || ""}`}
                    />
                  </MenuItem>
                ))}
              </Paper>
            )}

            {/* Cliente seleccionado */}
            {dialogNominacion.clienteSeleccionado && (
              <Paper
                variant="outlined"
                sx={{ p: 2, mb: 2, bgcolor: "success.50" }}
              >
                <Typography
                  variant="subtitle2"
                  color="success.main"
                  gutterBottom
                >
                  Cliente seleccionado:
                </Typography>
                <Typography variant="body1" fontWeight={500}>
                  {dialogNominacion.clienteSeleccionado.personas?.razon_social}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  RUC/Doc:{" "}
                  {dialogNominacion.clienteSeleccionado.personas?.ruc ||
                    dialogNominacion.clienteSeleccionado.personas
                      ?.nro_documento}
                </Typography>
                <Typography variant="body2" color="text.secondary">
                  Código: {dialogNominacion.clienteSeleccionado.cod_cliente}
                </Typography>
                <Button
                  size="small"
                  color="error"
                  onClick={() =>
                    setDialogNominacion((prev) => ({
                      ...prev,
                      clienteSeleccionado: null,
                    }))
                  }
                  sx={{ mt: 1 }}
                >
                  Cambiar cliente
                </Button>
              </Paper>
            )}

            {/* Motivo */}
            <TextField
              fullWidth
              label="Motivo"
              multiline
              rows={2}
              value={dialogNominacion.motivo}
              onChange={(e) =>
                setDialogNominacion((prev) => ({
                  ...prev,
                  motivo: e.target.value,
                }))
              }
              placeholder="Ingrese el motivo de la nominación..."
            />
          </DialogContent>
          <DialogActions>
            <Button
              onClick={() => {
                setDialogNominacion({
                  open: false,
                  motivo: "",
                  clienteSeleccionado: null,
                });
                setBusquedaCliente("");
                setClientesEncontrados([]);
              }}
            >
              Cancelar
            </Button>
            <Button
              variant="contained"
              color="primary"
              onClick={handleEnviarNominacion}
              disabled={
                !dialogNominacion.clienteSeleccionado ||
                !dialogNominacion.motivo.trim() ||
                nominacionMutation.isPending
              }
            >
              {nominacionMutation.isPending
                ? "Enviando..."
                : "Enviar Nominación"}
            </Button>
          </DialogActions>
        </Dialog>

        {/* Snackbar para mensajes */}
        <Snackbar
          open={snackbar.open}
          autoHideDuration={6000}
          onClose={() => setSnackbar((prev) => ({ ...prev, open: false }))}
          anchorOrigin={{ vertical: "top", horizontal: "right" }}
        >
          <Alert
            onClose={() => setSnackbar((prev) => ({ ...prev, open: false }))}
            severity={snackbar.severity}
            variant="filled"
          >
            {snackbar.message}
          </Alert>
        </Snackbar>

        {/* Diálogo de detalle de factura */}
        <FacturaDetalleDialog
          open={Boolean(facturaDetalle)}
          onClose={() => setFacturaDetalle(null)}
          factura={facturaDetalle}
          navegacion={navegacionDetalle}
        />

        {/* Modal de preview KUDE */}
        <KudePreviewModal
          open={kudePreview.open}
          onClose={() => setKudePreview({ open: false, facturaId: null })}
          documentoId={kudePreview.facturaId}
          numeroDocumento={kudePreview.numero}
          tipoDocumento={1}
        />
      </Box>
    </LocalizationProvider>
  );
}