"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import Header from "@/components/Header";

interface Usuario {
  id: string;
  identificador: string;
  nome: string;
  email: string;
  telefone?: string;
  cpf?: string;
  ativo: boolean;
  superadmin: boolean;
  nivel: string;
  registro_completo: boolean;
  enderecos: string[];
  empresas_dados: string[];
  createdAt: string;
  updatedAt: string;
}

interface Endereco {
  id: string;
  cep: string;
  logradouro: string;
  numero: string;
  complemento?: string;
  bairro: string;
  cidade: string;
  estado: string;
}

interface EmpresaDados {
  id: string;
  cnpj: string;
  "razao-social": string;
  "nome-fantasia": string;
  "data-abertura": string;
  situacao: string;
  "natureza-juridica": string;
  porte: string;
  "capital-social": number;
  telefone: string;
  email: string;
  "atividade-principal-codigo": string;
  "atividade-principal-desc": string;
  enderecos: string[];
}

interface UsuarioCompleto extends Usuario {
  enderecoData?: Endereco;
  empresaData?: EmpresaDados;
}

const UsuariosPendentesPage = () => {
  const router = useRouter();
  const [usuarios, setUsuarios] = useState<UsuarioCompleto[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [page, setPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);
  const [selectedUser, setSelectedUser] = useState<UsuarioCompleto | null>(null);
  const [showDetailsModal, setShowDetailsModal] = useState(false);
  const [activatingUserId, setActivatingUserId] = useState<string | null>(null);
  const [currentUser, setCurrentUser] = useState<any>(null); // Usuário logado

  // Carregar dados do usuário logado
  useEffect(() => {
    const userData = localStorage.getItem('user');
    if (userData) {
      try {
        setCurrentUser(JSON.parse(userData));
      } catch (error) {
        console.error('Erro ao parsing dos dados do usuário:', error);
      }
    }
  }, []);

  // Buscar usuários pendentes
  const fetchUsuarios = async (pageNum: number = 1) => {
    try {
      setLoading(true);
      const token = localStorage.getItem('access_token');

      if (!token) {
        router.push('/login');
        return;
      }

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_BFF_API_URL}/users?page=${pageNum}`,
        {
          method: 'GET',
          headers: {
            'accept': 'application/json',
            'Authorization': `Bearer ${token}`,
          },
        }
      );

      if (!response.ok) {
        throw new Error('Erro ao buscar usuários pendentes');
      }

      const data = await response.json();

      const rawUsuariosData = data.data || data.items || data || [];
      const usuariosData = Array.isArray(rawUsuariosData)
        ? rawUsuariosData.filter((usuario: any) => usuario?.ativo === false)
        : [];

      // Para cada usuário, buscar dados do endereço e empresa
      const usuariosCompletos = await Promise.all(
        usuariosData.map(async (usuario: Usuario) => {
          const usuarioCompleto: UsuarioCompleto = { ...usuario };

          // Buscar dados do endereço
          if (usuario.enderecos && usuario.enderecos.length > 0) {
            try {
              const enderecoResponse = await fetch(
                `${process.env.NEXT_PUBLIC_BFF_API_URL}/enderecos/${usuario.enderecos[0]}`,
                {
                  headers: {
                    'accept': 'application/json',
                    'Authorization': `Bearer ${token}`,
                  },
                }
              );
              if (enderecoResponse.ok) {
                usuarioCompleto.enderecoData = await enderecoResponse.json();
              }
            } catch (error) {
              console.error('Erro ao buscar endereço:', error);
            }
          }

          // Buscar dados da empresa
          if (usuario.empresas_dados && usuario.empresas_dados.length > 0) {
            try {
              const empresaResponse = await fetch(
                `${process.env.NEXT_PUBLIC_BFF_API_URL}/empresas/${usuario.empresas_dados[0]}`,
                {
                  headers: {
                    'accept': 'application/json',
                    'Authorization': `Bearer ${token}`,
                  },
                }
              );
              if (empresaResponse.ok) {
                usuarioCompleto.empresaData = await empresaResponse.json();
              }
            } catch (error) {
              console.error('Erro ao buscar empresa:', error);
            }
          }

          return usuarioCompleto;
        })
      );

      setUsuarios(usuariosCompletos);

      // Se há paginação na resposta
      if (data.pagination) {
        setTotalPages(data.pagination.totalPages || 1);
      }

    } catch (error: any) {
      console.error('❌ Erro ao carregar usuários:', error);
      setError(error.message || 'Erro ao carregar usuários pendentes');
    } finally {
      setLoading(false);
    }
  };

  // Ativar usuário
  const ativarUsuario = async (usuarioId: string) => {
    try {
      setActivatingUserId(usuarioId);
      const token = localStorage.getItem('access_token');

      const response = await fetch(
        `${process.env.NEXT_PUBLIC_BFF_API_URL}/users/${usuarioId}`,
        {
          method: 'PATCH',
          headers: {
            'accept': 'application/json',
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${token}`,
          },
          body: JSON.stringify({
            ativo: true
          }),
        }
      );

      if (!response.ok) {
        throw new Error('Erro ao ativar usuário');
      }

      // Recarregar lista
      await fetchUsuarios(page);

      // Fechar modal se estiver aberto
      if (showDetailsModal && selectedUser?.id === usuarioId) {
        setShowDetailsModal(false);
        setSelectedUser(null);
      }

    } catch (error: any) {
      console.error('❌ Erro ao ativar usuário:', error);
      setError(error.message || 'Erro ao ativar usuário');
    } finally {
      setActivatingUserId(null);
    }
  };

  // Ver detalhes do usuário
  const verDetalhes = (usuario: UsuarioCompleto) => {
    setSelectedUser(usuario);
    setShowDetailsModal(true);
  };

  // Fechar modal de detalhes
  const closeDetailsModal = () => {
    setShowDetailsModal(false);
    setSelectedUser(null);
  };

  // Carregar usuários ao montar componente
  useEffect(() => {
    fetchUsuarios(page);
  }, [page]);

  return (
    <div className="min-h-screen bg-gray-50">
      <Header user={currentUser} />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Cabeçalho da página */}
        <div className="mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">Usuários Pendentes</h1>
              <p className="mt-2 text-gray-600">
                Gerencie usuários aguardando aprovação de cadastro
              </p>
            </div>
            <button
              onClick={() => router.push('/dashboard')}
              className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg flex items-center gap-2 transition-colors"
            >
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
              </svg>
              Voltar ao Dashboard
            </button>
          </div>
        </div>

        {/* Conteúdo */}
        {loading ? (
          <div className="bg-white rounded-lg shadow p-8 text-center">
            <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
            <p className="text-gray-600">Carregando usuários pendentes...</p>
          </div>
        ) : error ? (
          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
            <div className="flex items-center">
              <svg className="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
              </svg>
              <p className="text-sm text-red-700">{error}</p>
            </div>
          </div>
        ) : usuarios.length === 0 ? (
          <div className="bg-white rounded-lg shadow p-8 text-center">
            <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
              <svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <h3 className="text-lg font-medium text-gray-900 mb-2">
              Nenhum usuário pendente
            </h3>
            <p className="text-gray-600">
              Todos os usuários foram processados ou não há cadastros aguardando aprovação.
            </p>
          </div>
        ) : (
          <div className="bg-white rounded-lg shadow overflow-hidden">
            {/* Tabela de usuários */}
            <div className="overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Usuário
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Empresa
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Data do Cadastro
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Status
                    </th>
                    <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                      Ações
                    </th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {usuarios.map((usuario) => (
                    <tr key={usuario.id} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center">
                          <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
                            <span className="text-blue-600 font-medium text-sm">
                              {usuario.nome?.charAt(0)?.toUpperCase() || 'U'}
                            </span>
                          </div>
                          <div className="ml-4">
                            <div className="text-sm font-medium text-gray-900">
                              {usuario.nome}
                            </div>
                            <div className="text-sm text-gray-500">
                              {usuario.email}
                            </div>
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">
                          {usuario.empresaData?.['razao-social'] || 'Não informado'}
                        </div>
                        <div className="text-sm text-gray-500">
                          {usuario.empresaData?.cnpj || ''}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="text-sm text-gray-900">
                          {new Date(usuario.createdAt).toLocaleDateString('pt-BR')}
                        </div>
                        <div className="text-sm text-gray-500">
                          {new Date(usuario.createdAt).toLocaleTimeString('pt-BR', {
                            hour: '2-digit',
                            minute: '2-digit'
                          })}
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">
                          <svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
                          </svg>
                          Pendente
                        </span>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <div className="flex items-center justify-end gap-2">
                          <button
                            onClick={() => verDetalhes(usuario)}
                            className="text-blue-600 hover:text-blue-900 bg-blue-50 hover:bg-blue-100 px-3 py-1 rounded-md transition-colors"
                          >
                            Ver Detalhes
                          </button>
                          <button
                            onClick={() => ativarUsuario(usuario.id)}
                            disabled={activatingUserId === usuario.id}
                            className="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-3 py-1 rounded-md transition-colors flex items-center gap-1"
                          >
                            {activatingUserId === usuario.id ? (
                              <>
                                <div className="w-3 h-3 border border-white border-t-transparent rounded-full animate-spin"></div>
                                Ativando...
                              </>
                            ) : (
                              <>
                                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                                </svg>
                                Ativar
                              </>
                            )}
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Paginação */}
            {totalPages > 1 && (
              <div className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200">
                <div className="flex-1 flex justify-between sm:hidden">
                  <button
                    onClick={() => setPage(Math.max(1, page - 1))}
                    disabled={page <= 1}
                    className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
                  >
                    Anterior
                  </button>
                  <button
                    onClick={() => setPage(Math.min(totalPages, page + 1))}
                    disabled={page >= totalPages}
                    className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
                  >
                    Próximo
                  </button>
                </div>
                <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                  <div>
                    <p className="text-sm text-gray-700">
                      Página <span className="font-medium">{page}</span> de{' '}
                      <span className="font-medium">{totalPages}</span>
                    </p>
                  </div>
                  <div>
                    <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                      <button
                        onClick={() => setPage(Math.max(1, page - 1))}
                        disabled={page <= 1}
                        className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
                      >
                        <span className="sr-only">Anterior</span>
                        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
                        </svg>
                      </button>
                      <span className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                        {page}
                      </span>
                      <button
                        onClick={() => setPage(Math.min(totalPages, page + 1))}
                        disabled={page >= totalPages}
                        className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50"
                      >
                        <span className="sr-only">Próximo</span>
                        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
                          <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                        </svg>
                      </button>
                    </nav>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}
      </div>

      {/* Modal de Detalhes do Usuário */}
      {showDetailsModal && selectedUser && (
        <div className="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center p-4 z-50 overflow-auto">
          <div className="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-[calc(100vh-4rem)] overflow-hidden flex flex-col">
            {/* Header do Modal (sticky para não sumir ao rolar) */}
            <div className="bg-blue-600 p-6 rounded-t-lg sticky top-0 z-10">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-bold text-white">
                  Detalhes do Usuário
                </h2>
                <button
                  onClick={closeDetailsModal}
                  className="text-white hover:text-gray-200"
                >
                  <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </button>
              </div>
            </div>

            {/* Conteúdo do Modal - scrollable */}
            <div className="p-6 space-y-6 overflow-y-auto flex-1">
              {/* Informações Pessoais */}
              <div>
                <h3 className="text-lg font-semibold text-gray-900 mb-4">
                  Informações Pessoais
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-gray-500">Nome</label>
                    <p className="text-sm text-gray-900">{selectedUser.nome}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-500">Email</label>
                    <p className="text-sm text-gray-900">{selectedUser.email}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-500">CPF</label>
                    <p className="text-sm text-gray-900">{selectedUser.cpf || 'Não informado'}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-500">Telefone</label>
                    <p className="text-sm text-gray-900">{selectedUser.telefone || 'Não informado'}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-500">Nível</label>
                    <p className="text-sm text-gray-900">{selectedUser.nivel}</p>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-gray-500">Data de Cadastro</label>
                    <p className="text-sm text-gray-900">
                      {new Date(selectedUser.createdAt).toLocaleString('pt-BR')}
                    </p>
                  </div>
                </div>
              </div>

              {/* Endereço */}
              {selectedUser.enderecoData && (
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">
                    Endereço
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-500">CEP</label>
                      <p className="text-sm text-gray-900">{selectedUser.enderecoData.cep}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Logradouro</label>
                      <p className="text-sm text-gray-900">
                        {selectedUser.enderecoData.logradouro}, {selectedUser.enderecoData.numero}
                      </p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Complemento</label>
                      <p className="text-sm text-gray-900">{selectedUser.enderecoData.complemento || 'Não informado'}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Bairro</label>
                      <p className="text-sm text-gray-900">{selectedUser.enderecoData.bairro}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Cidade</label>
                      <p className="text-sm text-gray-900">{selectedUser.enderecoData.cidade}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Estado</label>
                      <p className="text-sm text-gray-900">{selectedUser.enderecoData.estado}</p>
                    </div>
                  </div>
                </div>
              )}

              {/* Empresa */}
              {selectedUser.empresaData && (
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-4">
                    Dados da Empresa
                  </h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Razão Social</label>
                      <p className="text-sm text-gray-900">{selectedUser.empresaData['razao-social']}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Nome Fantasia</label>
                      <p className="text-sm text-gray-900">{selectedUser.empresaData['nome-fantasia'] || 'Não informado'}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">CNPJ</label>
                      <p className="text-sm text-gray-900">{selectedUser.empresaData.cnpj}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Data de Abertura</label>
                      <p className="text-sm text-gray-900">{selectedUser.empresaData['data-abertura'] || 'Não informado'}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Situação</label>
                      <p className="text-sm text-gray-900">{selectedUser.empresaData.situacao || 'Não informado'}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Natureza Jurídica</label>
                      <p className="text-sm text-gray-900">{selectedUser.empresaData['natureza-juridica'] || 'Não informado'}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Porte</label>
                      <p className="text-sm text-gray-900">{selectedUser.empresaData.porte || 'Não informado'}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Capital Social</label>
                      <p className="text-sm text-gray-900">
                        {selectedUser.empresaData['capital-social']
                          ? `R$ ${selectedUser.empresaData['capital-social'].toLocaleString('pt-BR')}`
                          : 'Não informado'}
                      </p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Telefone</label>
                      <p className="text-sm text-gray-900">{selectedUser.empresaData.telefone || 'Não informado'}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Email</label>
                      <p className="text-sm text-gray-900">{selectedUser.empresaData.email || 'Não informado'}</p>
                    </div>
                    <div>
                      <label className="block text-sm font-medium text-gray-500">Atividade Principal</label>
                      <p className="text-sm text-gray-900">
                        {selectedUser.empresaData['atividade-principal-codigo'] || selectedUser.empresaData['atividade-principal-desc']
                          ? `${selectedUser.empresaData['atividade-principal-codigo']} - ${selectedUser.empresaData['atividade-principal-desc']}`
                          : 'Não informado'}
                      </p>
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Footer do Modal (sticky para ficar visível) */}
            <div className="bg-gray-50 px-6 py-4 flex justify-end gap-3 sticky bottom-0 z-10">
              <button
                onClick={closeDetailsModal}
                className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors"
              >
                Fechar
              </button>
              <button
                onClick={() => ativarUsuario(selectedUser.id)}
                disabled={activatingUserId === selectedUser.id}
                className="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors flex items-center gap-2"
              >
                {activatingUserId === selectedUser.id ? (
                  <>
                    <div className="w-4 h-4 border border-white border-t-transparent rounded-full animate-spin"></div>
                    Ativando...
                  </>
                ) : (
                  <>
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                    </svg>
                    Ativar Usuário
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default UsuariosPendentesPage;