"use client";

import { useState, useEffect, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { useEmpresa } from "@/contexts/EmpresaContext";
import { translateError } from "@/lib/error-translator";
import Image from "next/image";

/**
 * Componente interno que usa useSearchParams
 */
const LoginPageContent = () => {
  const router = useRouter();
  const { setEmpresaId } = useEmpresa();
  const searchParams = useSearchParams();

  // Estados do formulário
  const [email, setEmail] = useState<string>(""); // Email do usuário
  const [password, setPassword] = useState<string>(""); // Senha do usuário
  const [name, setName] = useState<string>(""); // Nome completo (apenas para registro)
  const [loading, setLoading] = useState<boolean>(false); // Estado de carregamento
  const [error, setError] = useState<string>(""); // Mensagens de erro
  const [isLogin, setIsLogin] = useState<boolean>(true); // Alterna entre login e registro
  const [checkingAuth, setCheckingAuth] = useState<boolean>(true); // Verificação inicial de autenticação
  const [showPassword, setShowPassword] = useState<boolean>(false); // Controla visibilidade da senha
  const [accessToken, setAccessToken] = useState<string>(""); // Token de acesso do BFF
  const [showSuccessModal, setShowSuccessModal] = useState<boolean>(false); // Modal de sucesso do cadastro
  const [showPendingModal, setShowPendingModal] = useState<boolean>(false); // Modal de cadastro pendente

  /**
   * Verifica parâmetros da URL para definir aba inicial
   */
  useEffect(() => {
    const tab = searchParams.get('tab');
    if (tab === 'cadastro') {
      setIsLogin(false);
    }
  }, [searchParams]);

  /**
   * Verifica se o usuário já está autenticado ao carregar a página
   * Se estiver autenticado, redireciona para o dashboard
   */
  useEffect(() => {
    const checkAuth = async () => {
      try {
        // Verificar se há token armazenado
        const storedToken = localStorage.getItem('access_token');

        if (!storedToken) {
          setCheckingAuth(false);
          return;
        }

        // Verificar autenticação usando BFF com o token no header Authorization
        const response = await fetch(
          `${process.env.NEXT_PUBLIC_BFF_API_URL}/auth/me`,
          {
            method: "GET",
            headers: {
              "accept": "application/json",
              "Authorization": `Bearer ${storedToken}`, // Usar Authorization ao invés de Cookie
            },
          }
        );


        if (response.ok) {
          const userData = await response.json();
          router.push("/dashboard");
        } else {
          const errorText = await response.text();
          // Limpar token inválido
          localStorage.removeItem('access_token');
        }
      } catch (error) {
      } finally {
        setCheckingAuth(false);
      }
    };
    checkAuth();
  }, [router]);

  /**
   * Função para realizar login do usuário usando BFF
   * @param email - Email do usuário (usado como identificador)
   * @param password - Senha do usuário
   */
  const login = async (email: string, password: string) => {
    setLoading(true);
    setError("");
    try {

      // 1. Fazer login no BFF
      const baseUrl = process.env.NEXT_PUBLIC_BFF_API_URL!;
      const response = await fetch(`${baseUrl}/auth/login`, {
        method: 'POST',
        headers: {
          'accept': 'application/json',
          'Content-Type': 'application/json',
        },
        credentials: 'include', // Permite que o browser receba e armazene cookies
        mode: 'cors', // Habilita CORS explicitamente
        body: JSON.stringify({
          identificador: email,
          senha: password
        })
      });

      // Ler e logar o corpo da resposta (usando clone para não consumir o body original)
      const respClone = response.clone();
      const respText = await respClone.text();
      let respBody: any = respText;
      try {
        respBody = JSON.parse(respText);
      } catch {
        // corpo não é JSON, manter como texto
      }

      if (!response.ok) {
        // Extrair mensagem de erro do backend
        let errorMessage = respBody?.message || respBody?.error || respBody?.detail || respText;

        // Tratar códigos de status específicos
        if (response.status === 401) {
          errorMessage = "Email ou senha incorretos. Verifique suas credenciais.";
        } else if (response.status === 403) {
          errorMessage = "Acesso negado. Sua conta pode estar inativa.";
        } else if (response.status === 404) {
          errorMessage = "Usuário não encontrado. Verifique o email informado.";
        } else if (response.status >= 500) {
          errorMessage = "Erro interno do servidor. Tente novamente em alguns minutos.";
        }

        // Aplicar tradução se disponível
        const translatedError = translateError(errorMessage);
        throw new Error(translatedError);
      }

      const loginData = await response.json();

      // 2. Capturar e armazenar o access_token
      if (loginData.access_token) {
        const token = loginData.access_token;
        localStorage.setItem('access_token', token);
        setAccessToken(token);

        // 3. Verificar imediatamente se o /me funciona com o token
        const meResponse = await fetch(`${baseUrl}/auth/me`, {
          method: "GET",
          headers: {
            "accept": "application/json",
            "Authorization": `Bearer ${token}`, // Tentar com Authorization header
          },
        });


        if (meResponse.ok) {
          const userData = await meResponse.json();
        } else {
          console.log("❌ Falha no /me:", await meResponse.text());
        }

      } else {
        throw new Error("Token não recebido do servidor");
      }

      // 4. Armazenar informações do usuário no localStorage
      if (loginData.user) {
        localStorage.setItem('user', JSON.stringify(loginData.user));

        // Verificar se o registro está completo
        if (loginData.user["registro-completo"] === false) {
          setShowPendingModal(true);
          return; // Não continuar com o redirecionamento
        }

        // Armazenar ID do endereço se disponível
        // Backend pode retornar "endereco" (singular) ou "enderecos" (plural array)
        let enderecoId = loginData.user.endereco;

        // Se vier como array, pegar o primeiro
        if (!enderecoId && loginData.user.enderecos && Array.isArray(loginData.user.enderecos) && loginData.user.enderecos.length > 0) {
          enderecoId = loginData.user.enderecos[0];
        }

        if (enderecoId) {
          localStorage.setItem('user_endereco_id', enderecoId);
        }
      }

      // 5. Verificar e armazenar empresa ID se disponível
      if (loginData.user?.empresaId) {
        setEmpresaId(loginData.user.empresaId);
      }

      // 6. Redirecionar para o dashboard
      router.push("/dashboard");

    } catch (error: any) {
      console.error("❌ Erro no login:", error);

      // Definir mensagem de erro amigável
      let friendlyMessage = error.message;

      // Se for um erro de rede
      if (error.name === 'TypeError' || error.message.includes('fetch')) {
        friendlyMessage = "Erro de conexão. Verifique sua internet e tente novamente.";
      }
      // Se for um erro genérico sem mensagem clara
      else if (!error.message || error.message.length < 5) {
        friendlyMessage = "Erro inesperado. Verifique suas credenciais e tente novamente.";
      }

      setError(friendlyMessage);
    } finally {
      setLoading(false);
    }
  };

  /**
   * Função para registrar novo usuário usando BFF
   * Cria conta e mostra mensagem de sucesso
   */
  const register = async () => {
    setLoading(true);
    setError("");
    try {

      // 1. Fazer registro no BFF com dados corretos
      const baseUrl = process.env.NEXT_PUBLIC_BFF_API_URL!;
      const response = await fetch(`${baseUrl}/auth/register`, {
        method: 'POST',
        headers: {
          'accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          identificador: email, // identificador = email do usuário (usado no login)
          email: email,
          nome: name, // nome = nome completo do usuário  
          senha: password,
          nivel: "admin", // valor estático
          superadmin: false, // valor estático
          "registro-completo": false // valor estático - registro incompleto por padrão
        })
      });


      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));

        // Tratar códigos de status específicos
        let errorMessage = errorData.message || 'Falha no registro';

        if (response.status === 409 || errorMessage.includes('already exists') || errorMessage.includes('já existe')) {
          errorMessage = 'Este email já está cadastrado. Tente fazer login ou use outro email.';
        } else if (response.status === 400) {
          errorMessage = 'Dados inválidos. Verifique se todos os campos estão preenchidos corretamente.';
        } else if (response.status >= 500) {
          errorMessage = 'Erro interno do servidor. Tente novamente em alguns minutos.';
        }

        // Aplicar tradução se disponível
        const translatedError = translateError(errorMessage);
        throw new Error(translatedError);
      }

      const registerData = await response.json();

      // 2. Fazer login automático após registro para obter token
      const loginResponse = await fetch(`${baseUrl}/auth/login`, {
        method: 'POST',
        headers: {
          'accept': 'application/json',
          'Content-Type': 'application/json',
        },
        credentials: 'include',
        mode: 'cors',
        body: JSON.stringify({
          identificador: email,
          senha: password
        })
      });

      if (!loginResponse.ok) {
        console.error("❌ Erro no login automático:", loginResponse.status);
        throw new Error('Erro ao fazer login automático após registro');
      }

      const loginData = await loginResponse.json();

      // 3. Armazenar token e dados do usuário
      if (loginData.access_token) {
        localStorage.setItem('access_token', loginData.access_token);
      }

      if (loginData.user) {
        localStorage.setItem('user', JSON.stringify(loginData.user));
      }

      // 4. Redirecionar para completar registro com token válido
      router.push(`/completar-registro?nome=${encodeURIComponent(name)}&email=${encodeURIComponent(email)}`);

    } catch (error: any) {
      console.error("❌ Erro no registro:", error);

      // Definir mensagem de erro amigável
      let friendlyMessage = error.message;

      // Se for um erro de rede
      if (error.name === 'TypeError' || error.message.includes('fetch')) {
        friendlyMessage = "Erro de conexão. Verifique sua internet e tente novamente.";
      }
      // Se for um erro genérico sem mensagem clara
      else if (!error.message || error.message.length < 5) {
        friendlyMessage = "Erro inesperado durante o cadastro. Tente novamente.";
      }

      setError(friendlyMessage);
    } finally {
      setLoading(false);
    }
  };

  /**
   * Função para notificar administrador sobre novo cadastro
   */
  const notifyAdmin = async (userData: { nome: string, email: string, identificador: string }) => {
    try {
      // Enviar notificações via API (usando Resend para emails reais)
      await fetch('/api/notify-admin-resend', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(userData)
      });
    } catch (error) {
      console.error("Erro ao enviar notificações:", error);
      // Não bloquear o cadastro por erro de notificação
    }
  };

  /**
   * Função para fechar modal de sucesso e redirecionar
   */
  const handleSuccessModalClose = () => {
    setShowSuccessModal(false);
    router.push('/');
  };

  /**
   * Função para fechar modal de cadastro pendente
   */
  const handlePendingModalClose = () => {
    setShowPendingModal(false);
    // Fazer logout para limpar dados do usuário
    localStorage.removeItem('access_token');
    localStorage.removeItem('user');
    setAccessToken("");
    // Redirecionar para página inicial
    router.push('/');
  };

  // Tela de carregamento durante verificação de autenticação
  if (checkingAuth) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Verificando autenticação...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-2xl shadow-xl overflow-hidden w-full max-w-md">
        {/* Cabeçalho com logo e slogan */}
        <div className="bg-gradient-to-r from-blue-600 to-blue-700 p-1 text-center">
          <div className="mx-auto -mb-2 flex items-center justify-center">
            <Image
              src="/logo.png"
              alt="SaveInMed Logo"
              width={180}
              height={150}
              className="rounded-full"
              priority
            />
          </div>
          <h1 className="text-2xl font-bold text-white mb-2">SaveInMed</h1>
          <p className="text-gray-300">Plataforma B2B de Medicamentos</p>
        </div>

        {/* Formulário de login/registro */}
        <div className="p-6">
          {/* Botões de alternância entre Login e Cadastro */}
          <div className="flex bg-gray-100 rounded-lg p-1 mb-6">
            <button
              onClick={() => setIsLogin(true)}
              className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors cursor-pointer ${isLogin
                  ? "bg-white text-blue-600 shadow-sm"
                  : "text-gray-600 hover:text-gray-800"
                }`}
            >
              Entrar
            </button>
            <button
              onClick={() => setIsLogin(false)}
              className={`flex-1 py-2 px-4 rounded-md text-sm font-medium transition-colors cursor-pointer ${!isLogin
                  ? "bg-white text-blue-600 shadow-sm"
                  : "text-gray-600 hover:text-gray-800"
                }`}
            >
              Cadastrar
            </button>
          </div>

          {/* Mensagem de erro */}
          {error && (
            <div className="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
              <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>
          )}

          <form className="space-y-4">
            {/* Campo Nome (apenas para registro) */}
            {!isLogin && (
              <div>
                <label className="block w-full text-center text-lg font-semibold text-blue-600 mb-3">
                  Cadastre sua Empresa!
                </label>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  Nome Completo
                </label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <svg
                      className="h-5 w-5 text-gray-400"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                      />
                    </svg>
                  </div>
                  <input
                    type="text"
                    placeholder="João Silva"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors text-gray-900 placeholder-gray-500"
                  />
                </div>
              </div>
            )}

            {/* Campo Email */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Email
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <svg
                    className="h-5 w-5 text-gray-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
                    />
                  </svg>
                </div>
                <input
                  type="email"
                  placeholder="seu@email.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors text-gray-900 placeholder-gray-500"
                />
              </div>
            </div>

            {/* Campo Senha */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Senha
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <svg
                    className="h-5 w-5 text-gray-400"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
                    />
                  </svg>
                </div>
                <input
                  type={showPassword ? "text" : "password"}
                  placeholder="••••••••"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  className="w-full pl-10 pr-12 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors text-gray-900 placeholder-gray-500"
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer hover:text-gray-600 transition-colors"
                >
                  {showPassword ? (
                    <svg
                      className="h-5 w-5 text-gray-400"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21"
                      />
                    </svg>
                  ) : (
                    <svg
                      className="h-5 w-5 text-gray-400"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                      />
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                      />
                    </svg>
                  )}
                </button>
              </div>
            </div>

            {/* Botões de Submit */}
            <div className="space-y-3 pt-2">
              {isLogin ? (
                <button
                  type="button"
                  onClick={() => login(email, password)}
                  disabled={loading || !email || !password}
                  className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 disabled:from-gray-400 disabled:to-gray-500 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 flex items-center justify-center space-x-2 cursor-pointer disabled:cursor-not-allowed"
                >
                  {loading ? (
                    <>
                      <svg
                        className="animate-spin h-5 w-5 text-white"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      <span>Entrando...</span>
                    </>
                  ) : (
                    <>
                      <svg
                        className="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
                        />
                      </svg>
                      <span>Entrar</span>
                    </>
                  )}
                </button>
              ) : (
                <button
                  type="button"
                  onClick={register}
                  disabled={loading || !email || !password || !name}
                  className="w-full bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 disabled:from-gray-400 disabled:to-gray-500 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 flex items-center justify-center space-x-2 cursor-pointer disabled:cursor-not-allowed"
                >
                  {loading ? (
                    <>
                      <svg
                        className="animate-spin h-5 w-5 text-white"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle
                          className="opacity-25"
                          cx="12"
                          cy="12"
                          r="10"
                          stroke="currentColor"
                          strokeWidth="4"
                        ></circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                      </svg>
                      <span>Criando conta...</span>
                    </>
                  ) : (
                    <>
                      <svg
                        className="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"
                        />
                      </svg>
                      <span>Criar Conta</span>
                    </>
                  )}
                </button>
              )}
            </div>
          </form>
        </div>
      </div>

      {/* Modal de Sucesso do Cadastro */}
      {showSuccessModal && (
        <div className="fixed inset-0 bg-white bg-opacity-95 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
            {/* Header do Modal */}
            <div className="bg-gradient-to-r from-green-500 to-green-600 p-6 rounded-t-2xl text-center">
              <div className="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg
                  className="w-8 h-8 text-white"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M5 13l4 4L19 7"
                  />
                </svg>
              </div>
              <h2 className="text-2xl font-bold text-white">
                Cadastro Enviado!
              </h2>
            </div>

            {/* Conteúdo do Modal */}
            <div className="p-6 text-center">
              <div className="mb-6">
                <p className="text-gray-700 text-lg leading-relaxed">
                  Seu cadastro foi enviado com <strong>sucesso</strong>!
                </p>
                <p className="text-gray-600 mt-3">
                  Nossa equipe entrará em contato em breve para finalizar seu acesso à plataforma.
                </p>
              </div>

              {/* Ícone decorativo */}
              <div className="flex justify-center mb-6">
                <div className="flex space-x-2">
                  <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
                  <div className="w-3 h-3 bg-green-400 rounded-full animate-pulse delay-100"></div>
                  <div className="w-3 h-3 bg-green-300 rounded-full animate-pulse delay-200"></div>
                </div>
              </div>

              {/* Botão de OK */}
              <button
                onClick={handleSuccessModalClose}
                className="w-full bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-green-200"
              >
                Entendi, obrigado!
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Modal de Cadastro Pendente */}
      {showPendingModal && (
        <div className="fixed inset-0 bg-white bg-opacity-95 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 animate-in fade-in slide-in-from-bottom-4 duration-300">
            {/* Header do Modal */}
            <div className="bg-gradient-to-r from-yellow-500 to-orange-500 p-6 rounded-t-2xl text-center">
              <div className="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg
                  className="w-8 h-8 text-white"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
                  />
                </svg>
              </div>
              <h2 className="text-2xl font-bold text-white">
                Cadastro Pendente
              </h2>
            </div>

            {/* Conteúdo do Modal */}
            <div className="p-6 text-center">
              <div className="mb-6">
                <p className="text-gray-700 text-lg leading-relaxed">
                  Seu cadastro está <strong>pendente de validação</strong>!
                </p>
                <p className="text-gray-600 mt-3">
                  Nossa equipe ainda está analisando suas informações. Você receberá uma confirmação em breve.
                </p>
                <p className="text-gray-600 mt-3">
                  Qualquer dúvida, entre em contato conosco.
                </p>
              </div>

              {/* Ícone decorativo */}
              <div className="flex justify-center mb-6">
                <div className="flex space-x-2">
                  <div className="w-3 h-3 bg-yellow-500 rounded-full animate-pulse"></div>
                  <div className="w-3 h-3 bg-orange-400 rounded-full animate-pulse delay-100"></div>
                  <div className="w-3 h-3 bg-yellow-300 rounded-full animate-pulse delay-200"></div>
                </div>
              </div>

              {/* Botão de OK */}
              <button
                onClick={handlePendingModalClose}
                className="w-full bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-yellow-200"
              >
                Entendi
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

/**
 * Componente wrapper que usa Suspense para resolver o erro de useSearchParams
 */
const LoginPage = () => {
  return (
    <Suspense fallback={
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-green-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
          <p className="text-gray-600">Carregando...</p>
        </div>
      </div>
    }>
      <LoginPageContent />
    </Suspense>
  );
};

export default LoginPage;
