import Button from "@/components/Forms/Button";
import Input from "@/components/Forms/Input";
import ModalComponente from "@/components/Modal/ModalComponente";
import PDFViewer from "@/components/PdfViewer/PDFViewer";
import LoaderSun from "@/components/common/Loader/LoaderSun";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs } from "@/components/ui/tabs";
import FormCategoriasAnexos from "@/pages/categorias/FormCategoriasAnexos";
import { enviarArquivo } from "@/requests/CRM/arquivos";
import {
  cadastrarCategoriaAnexo,
  listarAnexosCard,
  listarConfiguracoesAnexos,
  listarMenusDisponiveis,
} from "@/requests/CRM/kanban";
import { comprimirPDFNode } from "@/requests/compress";
import { useScreenContext } from "@/src/contexts/ScreenContext";
import { useAuth } from "@/src/contexts/authContext";
import { useKanbanContext } from "@/src/contexts/kanbanContext";
import { GetForm, GetGallery } from "@/utils";
import { isFluxoPerdas } from "@/utils/fluxoPerdas";
import Compressor from "compressorjs";
import { ImagePlus } from "lucide-react";
import { Fragment, useEffect, useRef, useState } from "react";
import Swal from "sweetalert2";
import AnexosCard from "./AnexosCard";

// Configuração de tamanho máximo em bytes (4MB)
const MAX_FILE_SIZE = 4 * 1024 * 1024;

// Função para comprimir imagem usando compressorjs
const comprimirImagem = (file: File): Promise<File> => {
  return new Promise((resolve, reject) => {
    new Compressor(file, {
      quality: 0.8,
      maxWidth: 1920,
      maxHeight: 1920,
      minWidth: 0,
      minHeight: 0,
      convertSize: Infinity,
      success: (compressedFile: Blob) => {
        const novoArquivo = new File([compressedFile], file.name, {
          type: file.type,
          lastModified: file.lastModified,
        });
        resolve(novoArquivo);
      },
      error: (error) => {
        console.error("Erro ao comprimir imagem:", error);
        // Se falhar a compressão, retorna o arquivo original
        resolve(file);
      },
    });
  });
};

// Função para validar e processar o arquivo
const processarArquivo = async (
  arquivo: File,
  sigla: string,
  caminho: string
): Promise<{ arquivo: File; compressaoInfo?: any }> => {
  const isImagem = arquivo.type.startsWith("image/");
  const isPdf = arquivo.type === "application/pdf";
  const tamanhoMB = arquivo.size / (1024 * 1024);

  // Se for imagem e maior que 4MB, comprime
  if (isImagem && arquivo.size > MAX_FILE_SIZE) {
    console.log(
      `Imagem ${arquivo.name} excede 4MB (${tamanhoMB.toFixed(2)}MB). Comprimindo...`
    );
    const imagemComprimida = await comprimirImagem(arquivo);
    return { arquivo: imagemComprimida };
  }

  // Se for PDF e maior que 4MB, comprime via Node server
  if (isPdf && arquivo.size > MAX_FILE_SIZE) {
    try {
      const compressaoResult = await comprimirPDFNode(
        arquivo,
        sigla || "",
        caminho
      );
      // Retorna o arquivo original + informações de compressão
      // O S3 URL será tratado em adicionarAnexo
      return { arquivo, compressaoInfo: compressaoResult };
    } catch (error) {
      console.error("Erro ao comprimir PDF:", error);
      // Se falhar, continua com o arquivo original
      return { arquivo };
    }
  }

  // Se não for imagem e não for PDF, mas exceder 4MB, avisa mas permite o envio
  if (!isImagem && !isPdf && arquivo.size > MAX_FILE_SIZE) {
    console.warn(
      `Arquivo ${arquivo.name} excede 4MB (${tamanhoMB.toFixed(2)}MB)`
    );
  }

  return { arquivo };
};

const AnexosModal = ({ dataCard, isFluxoPerdas: isFluxoPerdasProp }: any) => {
  const [activeTab, setActiveTab] = useState("*");
  const [nameActiveTab, setNameActiveTab] = useState("");
  const [tiposArquivos, setTiposArquivos] = useState<any[]>([]);
  const [menusDisponiveis, setMenusDisponiveis] = useState<any[]>([]);

  const [anexos, setAnexos] = useState<any[]>([]);
  const [isLoaded, setIsLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingAnexos, setIsLoadingAnexos] = useState(false);
  // const [isMobile, setMobileView] = useState(false);
  const [isShowModalNewCategory, setIsShowModalNewCategory] = useState(false);
  const [pdfAnexo, setPdfAnexo] = useState<{
    url: string;
    nome: string;
  } | null>(null);
  const [isCompressionLoading, setIsCompressionLoading] = useState(false);
  const { handleSubmit, ...form } = GetForm();

  const [inputKey, setInputKey] = useState(Date.now());
  const isLoadingRef = useRef(false);

  const { valuesSession, perfil, usuario } = useAuth();
  const { session } = valuesSession();
  const { reListarDadosKanban, dadosFunil } = useKanbanContext();
  const { isMobile: isMobile } = useScreenContext();
  const { openGallery, setGallery } = GetGallery();
  const noFluxoPerdas =
    isFluxoPerdasProp ||
    isFluxoPerdas(dadosFunil, null, dataCard?.status_coleta);
  const podeGerenciarAnexos =
    noFluxoPerdas ||
    dataCard?.todasPendencias_concluidas_coleta !== "1";

  const handleChangeTab = (value: any, name: string = "") => {
    setActiveTab(value);
    setNameActiveTab(name);
  };

  useEffect(() => {
    atualizarCategoriasAnexos();
    listarMenusDisponiveis(perfil).then((res) => {
      setMenusDisponiveis(res);
    });
    atualizarAnexos();
  }, []);

  const atualizarAnexos = async () => {
    // Evita chamadas múltiplas simultâneas
    if (isLoadingRef.current) return;

    isLoadingRef.current = true;
    setIsLoadingAnexos(true);
    setAnexos([]); // Limpa a lista atual
    setIsLoaded(false);

    try {
      const res = await listarAnexosCard(dataCard.id_coleta_cliente);
      // Se não há anexos, apenas marca como carregado
      if (!res || res.length === 0) {
        setIsLoaded(true);
        setIsLoadingAnexos(false);
        isLoadingRef.current = false;
        return;
      }

      // Carrega todos os anexos de uma vez
      setAnexos(res);
      setIsLoaded(true);
      setIsLoadingAnexos(false);
      isLoadingRef.current = false;
    } catch (error) {
      console.error("Erro ao carregar anexos:", error);
      setIsLoaded(true);
      setIsLoadingAnexos(false);
      isLoadingRef.current = false;
    }
  };

  function atualizarCategoriasAnexos() {
    listarConfiguracoesAnexos().then((res) => {
      const hasPermission = res.filter(
        (item: any) =>
          item.perfis_cfg_anexo === "*" ||
          (item.perfis_cfg_anexo &&
            item.perfis_cfg_anexo
              .split(",")
              .some((id: any) => id === perfil.id_perfil))
      );

      setTiposArquivos(hasPermission);
    });
  }

  const adicionarAnexo = async (event: any) => {
    const inputElement = event.target as HTMLInputElement;

    if (inputElement.files && inputElement.files.length > 0) {
      let arquivo = inputElement.files[0];
      const isPdf = arquivo.type === "application/pdf";
      const arquivoMBOriginal = (arquivo.size / (1024 * 1024)).toFixed(2);
      const caminho = `clientes/${dataCard.dadosCliente?.pasta_cliente}/Anexos/${dataCard.id_coleta_cliente}/${arquivo.name}`;
      // Mostrar loader se for PDF grande
      if (isPdf && arquivo.size > MAX_FILE_SIZE) {
        setIsCompressionLoading(true);
        Swal.fire({
          title: "Comprimindo PDF",
          html: `<p>Arquivo: <strong>${arquivo.name}</strong></p><p>Tamanho original: <strong>${arquivoMBOriginal} MB</strong></p>`,
          icon: "info",
          allowOutsideClick: false,
          allowEscapeKey: false,
          didOpen: async () => {
            Swal.showLoading();

            // Processa e comprime o arquivo
            const processamentoResult = await processarArquivo(
              arquivo,
              session.sigla,
              caminho
            );
            arquivo = processamentoResult.arquivo;
            const compressaoInfo = processamentoResult.compressaoInfo;

            Swal.hideLoading();
            setIsCompressionLoading(false);

            // Mostrar resultado da compressão
            if (compressaoInfo) {
              const percentualReducao = (
                ((compressaoInfo.originalSize - compressaoInfo.compressedSize) /
                  compressaoInfo.originalSize) *
                100
              ).toFixed(2);

              Swal.fire({
                title: "✅ PDF Comprimido com Sucesso!",
                html: `
                  <div style="text-align: left;">
                    <p><strong>Arquivo:</strong> ${arquivo.name}</p>
                    <p><strong>Tamanho Original:</strong> ${(compressaoInfo.originalSize / (1024 * 1024)).toFixed(2)} MB</p>
                    <p><strong>Tamanho Comprimido:</strong> ${(compressaoInfo.compressedSize / (1024 * 1024)).toFixed(2)} MB</p>
                    <p style="color: #10b981; font-weight: bold;">Redução: ${percentualReducao}%</p>
                  </div>
                `,
                icon: "success",
                confirmButtonText: "OK",
                confirmButtonColor: "#10b981",
              }).then(async () => {
                // Continua com o upload após confirmar
                await continuarUpload(arquivo, compressaoInfo, inputElement);
              });
            } else {
              // Se não comprimiu (arquivo pequeno), continuar normalmente
              await continuarUpload(arquivo, null, inputElement);
            }
          },
        });
        return;
      } else {
        // Processa e comprime o arquivo se necessário
        const processamentoResult = await processarArquivo(
          arquivo,
          session.sigla,
          caminho
        );
        arquivo = processamentoResult.arquivo;
        const compressaoInfo = processamentoResult.compressaoInfo;
        await continuarUpload(arquivo, compressaoInfo, inputElement);
        return;
      }
    }
  };

  const continuarUpload = async (
    arquivo: File,
    compressaoInfo: any,
    inputElement: HTMLInputElement
  ) => {
    if (anexos.some((anexo) => anexo.nome_arquivo_card == arquivo.name)) {
      let nomeArquivo = arquivo.name;
      let extensao = nomeArquivo.substring(nomeArquivo.lastIndexOf("."));
      let nomeBase = nomeArquivo.substring(0, nomeArquivo.lastIndexOf("."));

      let contador = 0;
      let novoNome = nomeArquivo;
      while (anexos.some((anexo) => anexo.nome_arquivo_card === novoNome)) {
        novoNome = `${nomeBase} (${++contador})${extensao}`;
      }
      arquivo = new File([arquivo], novoNome, {
        type: arquivo.type,
        lastModified: arquivo.lastModified,
      });
    }

    const toBase64 = (file: File): Promise<string> =>
      new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result as string);
        reader.onerror = (error) => reject(error);
      });

    try {
      let arquivoBase64: string | null = null;
      if (!compressaoInfo?.getUrl) {
        arquivoBase64 = await toBase64(arquivo);
      }

      const dadosAnexo: any = {
        nome_arquivo_card: arquivo.name,
        codCard_arquivo_card: dataCard.id,
        coleta_id_arquivo_card: dataCard.id_coleta_cliente,
        caminho_arquivo_card:
          compressaoInfo?.key ||
          `clientes/${dataCard.dadosCliente?.pasta_cliente}/Anexos/${dataCard.id_coleta_cliente}/${arquivo.name}`,
        categoria_arquivo_card: activeTab,
        arquivo_base64: compressaoInfo?.getUrl ? null : arquivoBase64, // Se houver S3 URL, usa; senão usa base64
        codUsuarioAtualizacao_arquivo_card: session.id_usuario,
      };

      await enviarArquivo(dadosAnexo);
      setInputKey(Date.now());
      reListarDadosKanban();
      atualizarAnexos();
    } catch (err) {
      console.error("Erro ao processar arquivo: ", err);
      Swal.fire({
        title: "❌ Erro ao enviar arquivo",
        text: err instanceof Error ? err.message : "Erro desconhecido",
        icon: "error",
        confirmButtonText: "OK",
      });
    }
  };

  useEffect(() => {
    // Só atualiza se mudou o card
    if (dataCard?.id_coleta_cliente) {
      atualizarCategoriasAnexos();
      atualizarAnexos();
    }
  }, [dataCard?.id_coleta_cliente]);

  const isPdf = (nome: string) => nome?.toLowerCase().endsWith(".pdf");

  const handleAnexoClick = (anexo: any, index: number, arr: any[]) => {
    if (isPdf(anexo.nome_arquivo_card)) {
      setPdfAnexo({ url: anexo.preview, nome: anexo.nome_arquivo_card });
    } else {
      const imagens = arr.filter((a) => !isPdf(a.nome_arquivo_card));
      setGallery(
        imagens.map((a) => ({
          src: a.preview,
          name: a.nome_arquivo_card,
          cover: true,
        }))
      );
      openGallery(index);
    }
  };

  const onSubmitCategory = async (data: any) => {
    setIsLoading(true);
    return cadastrarCategoriaAnexo(data).then(() => {
      atualizarCategoriasAnexos();
      setIsLoading(false);
      setIsShowModalNewCategory(false);
    });
  };

  return (
    <>
      {isMobile ? (
        <Fragment>
          <p className="text-center font-medium text-lg text-black dark:text-white">
            Anexos
          </p>

          <>
            <DropdownMenu>
              <DropdownMenuTrigger className="w-full mt-3 md:hidden flex items-center justify-between">
                <div className="w-full flex items-center justify-between px-4 py-2 bg-white border border-gray-300 rounded-lg cursor-pointer">
                  <span className="capitalize">
                    {" "}
                    {tiposArquivos.find(
                      (item) => item.id_anexo_crm === activeTab
                    )?.identificacao_cfg_anexo || "Todos Anexos"}
                  </span>
                  <svg
                    className="w-4 h-4 text-gray-500"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth="2"
                      d="M19 9l-7 7-7-7"
                    />
                  </svg>
                </div>
              </DropdownMenuTrigger>
              <DropdownMenuContent className="w-full max-w-xs">
                {tiposArquivos[0] ? (
                  <>
                    <DropdownMenuItem
                      className="py-2 px-3 text-sm w-full text-left"
                      onClick={() => handleChangeTab("*")}
                    >
                      <span className="max-sm:text-xs text-left w-full ">
                        Todos Anexos
                      </span>
                    </DropdownMenuItem>
                    {tiposArquivos.map((item: any, index: number) => (
                      <DropdownMenuItem
                        className="py-2 px-3 text-sm w-full text-left"
                        key={index}
                        onClick={() => handleChangeTab(item.id_anexo_crm)}
                      >
                        <span className="max-sm:text-xs text-left w-full ">
                          {item.identificacao_cfg_anexo}
                        </span>
                      </DropdownMenuItem>
                    ))}
                  </>
                ) : (
                  Array.from({ length: 5 }).map((_, index) => (
                    <DropdownMenuItem key={index}>
                      <Skeleton className="bg-stroke h-5 w-35 rounded cursor-pointer" />
                    </DropdownMenuItem>
                  ))
                )}
              </DropdownMenuContent>
            </DropdownMenu>
            {/* {dataCard?.todasPendencias_concluidas_coleta == "0" ||
              // perfil.id_perfil == "1000" ||
              // (perfil.cargo_perfil == "4" && (
              (( */}
            <div className="flex z-9999 w-full justify-end">
              <Button
                onClick={() => setIsShowModalNewCategory(true)}
                className="flex self-end text-sm  m-1 px-3"
              >
                Adicionar categoria
              </Button>
            </div>
            {/* ))} */}
          </>
          <Tabs defaultValue={activeTab} className=" flex h-100 w-full">
            {activeTab ? (
              <div className="h-full w-full overflow-y-auto">
                <div className="w-full z-1 h-10 flex flex-row-reverse">
                  {activeTab != "*" && (
                    <>
                      <label
                        htmlFor="add_imagem"
                        className="justify-center dark:text-white whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-primary-foreground flex bg-success hover:brightness-90 hover:bg-success justify-self-end text-sm h-fit items-center w-fit m-1 mb-4 p-1 px-2"
                      >
                        <ImagePlus size={15} className="mr-1" /> Adicionar
                        documento
                      </label>
                      <input
                        id="add_imagem"
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={(e) => adicionarAnexo(e)} // trocar de onInput para onChange
                      />
                    </>
                  )}
                </div>
                <div className="flex-1 m-0 w-full h-90 overflow-y-auto bg-secondary bg-opacity-10 relative">
                  <div className="h-full overflow-y-auto">
                    <div className="flex flex-row flex-wrap gap-y-3 gap-x-2 justify-evenly">
                      {/* Mostra os anexos já carregados */}
                      {anexos
                        .filter(
                          (anexo) =>
                            activeTab == "*" ||
                            anexo.categoria_arquivo_card == activeTab
                        )
                        .map((anexo, index, arr) => {
                          return (
                            <AnexosCard
                              perfil={perfil}
                              key={anexo.id_arquivo_card}
                              anexo={anexo}
                              anexos={anexos}
                              id_usuario={session.id_usuario}
                              atualizarAnexos={atualizarAnexos}
                              setAnexos={setAnexos}
                              isFluxoPerdas={noFluxoPerdas}
                              onClick={() =>
                                handleAnexoClick(anexo, index, arr)
                              }
                            />
                          );
                        })}

                      {/* Skeletons para anexos ainda carregando */}
                      {isLoadingAnexos &&
                        Array.from({
                          length: 3, // Mostra menos skeletons
                        }).map((_, index) => (
                          <div
                            className="w-50 h-40 flex flex-col justify-between items-center"
                            key={`skeleton-${index}`}
                          >
                            <Skeleton className="h-18 w-20 rounded" />
                            <Skeleton className="w-25 h-6" />
                            <div className="h-14"></div>
                          </div>
                        ))}

                      {/* Estado vazio quando não há anexos e já terminou de carregar */}
                      {!anexos.filter(
                        (anexo) =>
                          activeTab == "*" ||
                          anexo.categoria_arquivo_card == activeTab
                      ).length &&
                        isLoaded &&
                        !isLoadingAnexos && (
                          <div className="h-80 w-full flex flex-col justify-center items-center">
                            Não há documentos para esta categoria
                          </div>
                        )}
                    </div>

                    {/* Loading inicial quando ainda não carregou nada */}
                    {isLoadingAnexos && anexos.length === 0 && (
                      <div className="absolute flex flex-col justify-center items-center top-0 left-0 w-full h-full bg-white bg-opacity-75">
                        <LoaderSun className="opacity-50" />
                        Carregando anexos...
                      </div>
                    )}
                  </div>
                </div>
              </div>
            ) : (
              <div className="w-full h-100 flex flex-col items-center justify-center">
                Escolha alguma categoria
              </div>
            )}
            <ModalComponente
              opened={isShowModalNewCategory}
              onClose={() => setIsShowModalNewCategory(false)}
              header={"Adicionar Nova Categoria"}
              hasSaveButton={false}
              hasForm={false}
              defaultW="w-[400px]"
            >
              <form
                className="flex flex-col gap-2"
                onSubmit={handleSubmit(onSubmitCategory)}
              >
                <Input
                  name="identificacao_cfg_anexo"
                  label="Nome da Categoria"
                  formulario={form}
                />
                <div className="flex flex-row justify-center gap-4 items-center">
                  <Button
                    type="button"
                    onClick={() => setIsShowModalNewCategory(false)}
                    className="bg-error text-white"
                  >
                    Cancelar
                  </Button>
                  <Button loading={isLoading}>Salvar</Button>
                </div>
              </form>
            </ModalComponente>
          </Tabs>
        </Fragment>
      ) : (
        <Fragment>
          <div className="flex flex-col h-full">
            {/* Cabeçalho */}
            <div className="mb-4">
              <h1 className="text-center font-medium text-2xl text-black dark:text-white mb-4">
                Anexos
              </h1>
              {/* Menu de Categorias */}
              <div className="flex items-start gap-2">
                <div className="flex-1 flex space-x-2 pb-2 overflow-x-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent">
                  <button
                    onClick={() => handleChangeTab("*")}
                    className={`px-4 py-2 rounded-lg min-w-max ${
                      activeTab === "*"
                        ? "bg-primary text-white"
                        : "bg-gray-100 hover:bg-gray-200 dark:bg-gray-800"
                    }`}
                  >
                    Todos Anexos
                  </button>

                  {tiposArquivos.map((item: any) => (
                    <button
                      key={item.id_anexo_crm}
                      onClick={() => handleChangeTab(item.id_anexo_crm)}
                      className={`px-4 py-2 rounded-lg min-w-max ${
                        activeTab === item.id_anexo_crm
                          ? "bg-primary text-white"
                          : "bg-gray-100 hover:bg-gray-200 dark:bg-gray-800"
                      }`}
                    >
                      {item.identificacao_cfg_anexo}
                    </button>
                  ))}
                </div>

                {/* Botões de Ação */}
                {/* {(perfil.id_perfil == "1000" || perfil.cargo_perfil == "4") &&
                  dataCard?.todasPendencias_concluidas_coleta == "0" && ( */}
                <div className="flex shrink-0">
                  <Button
                    onClick={() => {
                      setIsShowModalNewCategory(true);
                    }}
                    size="sm"
                  >
                    Nova Categoria
                  </Button>
                </div>
                {/* )} */}
              </div>
            </div>

            {/* Área de Conteúdo */}
            <div className="flex-1 bg-secondary bg-opacity-10 rounded-lg p-4 overflow-y-auto">
              {/* Botão de Adicionar Documento */}
              <div className="flex justify-end mb-4">
                {activeTab !== "*" &&
                  podeGerenciarAnexos && (
                    <label
                      htmlFor="add_imagem"
                      className="flex items-center gap-2 px-4 py-2 bg-success text-white rounded-md hover:brightness-90 cursor-pointer"
                    >
                      <ImagePlus size={15} />
                      Adicionar documento
                    </label>
                  )}
                <input
                  id="add_imagem"
                  type="file"
                  accept="image/*"
                  capture
                  className="hidden"
                  key={inputKey}
                  onInput={(e) => adicionarAnexo(e)}
                />
              </div>

              {/* Lista de Anexos */}
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {anexos
                  .filter(
                    (anexo) =>
                      activeTab === "*" ||
                      anexo.categoria_arquivo_card === activeTab
                  )
                  .map((anexo, index, arr) => (
                    <AnexosCard
                      perfil={perfil}
                      key={anexo.id_arquivo_card}
                      anexo={anexo}
                      anexos={anexos}
                      id_usuario={session.id_usuario}
                      atualizarAnexos={atualizarAnexos}
                      setAnexos={setAnexos}
                      isFluxoPerdas={noFluxoPerdas}
                      onClick={() => handleAnexoClick(anexo, index, arr)}
                    />
                  ))}

                {/* Skeletons para anexos ainda carregando */}
                {isLoadingAnexos &&
                  Array.from({ length: 4 }).map((_, index) => (
                    <div
                      className="w-full h-40 flex flex-col justify-between items-center"
                      key={`skeleton-desktop-${index}`}
                    >
                      <Skeleton className="h-32 w-full rounded" />
                      <Skeleton className="w-3/4 h-4" />
                    </div>
                  ))}
              </div>

              {/* Estado Vazio */}
              {!anexos.filter(
                (anexo) =>
                  activeTab === "*" ||
                  anexo.categoria_arquivo_card === activeTab
              ).length &&
                isLoaded &&
                !isLoadingAnexos && (
                  <div className="h-full w-full flex items-center justify-center text-gray-500">
                    Não há documentos para esta categoria
                  </div>
                )}

              {/* Loading inicial */}
              {isLoadingAnexos && anexos.length === 0 && (
                <div className="h-full w-full flex flex-col items-center justify-center text-gray-500">
                  <LoaderSun className="opacity-50" />
                  <p className="mt-2">Carregando anexos...</p>
                </div>
              )}
            </div>
          </div>
        </Fragment>
      )}

      {/* Modal visualizador de PDF */}
      <ModalComponente
        opened={isShowModalNewCategory}
        onClose={() => setIsShowModalNewCategory(false)}
        header={"Adicionar Nova Categoria"}
        hasSaveButton={false}
        hasForm={false}
        defaultW="w-[800px]"
      >
        <FormCategoriasAnexos
          formulario={form}
          onSubmitFunction={(e: any) => {
            cadastrarCategoriaAnexo(e).then(() => {
              atualizarCategoriasAnexos();
              setIsShowModalNewCategory(false);
            });
          }}
        >
          <div className="flex w-full justify-end sticky left-[100%] bottom-0 p-2 bg-white dark:bg-black">
            <Button loading={isLoading} className=" bg-success rounded-md">
              Salvar
            </Button>
          </div>
        </FormCategoriasAnexos>
      </ModalComponente>
      {pdfAnexo && (
        <ModalComponente
          opened={!!pdfAnexo}
          onClose={() => setPdfAnexo(null)}
          header={pdfAnexo.nome}
          hasSaveButton={false}
          hasForm={false}
          defaultW="w-[90vw]"
        >
          <div style={{ height: "80vh" }}>
            <PDFViewer pdfUrl={pdfAnexo.url} />
          </div>
        </ModalComponente>
      )}
    </>
  );
};

export default AnexosModal;