"use client";

import { useState, useEffect, KeyboardEvent, useCallback, useRef } from "react";
import { useRouter } from "next/navigation";
import { getSupabaseClient } from "@/lib/supabase";
import { Loader2, Lock, Mail, ArrowRight, Eye, EyeOff, AlertTriangle, CheckCircle2, Instagram, Check } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import Image from "next/image";
import localFont from "next/font/local";
import { createClient as createSupabaseClient } from "@supabase/supabase-js";
import { WhatsAppIcon } from "@/components/icons/whatsapp";

/* A fonte dos títulos desta tela: Sora, em semibold. A Plus Jakarta em 800
   ficou pesada demais aqui. */
/* A fonte sai dos arquivos do próprio app (next/font/local), e não do Google:
   o build não pode depender do Google Fonts. O next/font/google baixava a
   fonte durante o build e, quando o Google mudou o formato do endereço, o
   deploy caiu. O arquivo é a fonte variável do repositório google/fonts,
   cortada para latim e latim estendido (licença no OFL.txt ao lado). Há um
   item por peso que antes era pedido ao Google, todos no mesmo arquivo, para
   o navegador escolher os pesos exatamente como antes. As opções precisam ser
   literais: o next/font lê esse objeto em tempo de build. */
const sora = localFont({
  src: [
    { path: "../fonts/sora/Sora-Variavel.woff2", weight: "500", style: "normal" },
    { path: "../fonts/sora/Sora-Variavel.woff2", weight: "600", style: "normal" },
  ],
  display: "swap",
});

/* O número do suporte da Ktalogu. (Uma página do Next não pode exportar
   nada além do que ele conhece, por isso fica local.) */
const WHATSAPP_SUPORTE = "5587988701216";
const zap = (texto: string) => `https://wa.me/${WHATSAPP_SUPORTE}?text=${encodeURIComponent(texto)}`;
const LINK_AJUDA = zap("Olá, preciso de ajuda com meu acesso.");
const LINK_COMERCIAL = zap("Olá, quero conhecer e comprar o sistema.");
const LINK_INSTAGRAM = "https://instagram.com/ktalogu";

/* A foto da pessoa, ou a inicial sobre o violeta enquanto não há foto. */
function Avatar({
  avatarUrl,
  letra,
  carregando,
  tamanho,
}: {
  avatarUrl: string | null;
  letra: string;
  carregando: boolean;
  tamanho: "grande" | "pequeno";
}) {
  const passthroughLoader = ({ src }: { src: string }) => src;
  const caixa = tamanho === "grande" ? "h-[132px] w-[132px]" : "h-[76px] w-[76px]";
  const fonte = tamanho === "grande" ? "text-5xl" : "text-3xl";
  const borda = tamanho === "grande" ? "shadow-[0_18px_40px_-16px_rgba(20,8,60,0.6)] ring-4 ring-white/15" : "ring-1 ring-[#e6e6f2]";
  return (
    <div className={`relative ${caixa} overflow-hidden rounded-full bg-gradient-to-br from-[#7c3aed] to-[#4c1d95] ${borda}`}>
      {avatarUrl ? (
        <Image src={avatarUrl} alt="Foto da conta" fill className="object-cover" loader={passthroughLoader} unoptimized />
      ) : (
        <span className={`relative z-10 flex h-full w-full items-center justify-center ${fonte} font-extrabold uppercase text-white`}>
          {letra}
        </span>
      )}
      {carregando ? (
        <div className="absolute inset-0 flex items-center justify-center bg-[#1a0b3d]/30 backdrop-blur-[1px]">
          <Loader2 className="h-6 w-6 animate-spin text-white" />
        </div>
      ) : null}
    </div>
  );
}

export default function LoginPage() {
  const router = useRouter();
  const avatarCacheRef = useRef<Record<string, { avatarUrl: string | null; name: string | null; debug: string | null }>>({});
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");
  const [resetMessage, setResetMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
  const [resetLoading, setResetLoading] = useState(false);
  const [resetOpen, setResetOpen] = useState(false);
  const [resetEmail, setResetEmail] = useState("");

  const [showPassword, setShowPassword] = useState(false);
  const [capsLockActive, setCapsLockActive] = useState(false);
  const [rememberMe, setRememberMe] = useState(false);

  // Avatar state
  const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
  const [avatarName, setAvatarName] = useState<string | null>(null);
  const [isFetchingAvatar, setIsFetchingAvatar] = useState(false);
  const [, setAvatarDebug] = useState<string | null>(null);

  const isValidEmail = useCallback((value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim()), []);

  useEffect(() => {
    const savedEmail = localStorage.getItem("ktalogu_remembered_email");
    if (savedEmail) {
      setEmail(savedEmail);
      setRememberMe(true);
      fetchAvatar(savedEmail);
    }
  }, []);

  // Debounced avatar fetch
  useEffect(() => {
    const timer = setTimeout(() => {
      if (email && isValidEmail(email)) {
        fetchAvatar(email.trim().toLowerCase());
      } else {
        setAvatarUrl(null);
        setAvatarName(null);
        setAvatarDebug(null);
      }
    }, 250);
    return () => clearTimeout(timer);
  }, [email, isValidEmail]);

  const fetchAvatar = async (searchEmail: string) => {
    const normalizedEmail = searchEmail.trim().toLowerCase();
    const cachedAvatar = avatarCacheRef.current[normalizedEmail];
    if (cachedAvatar) {
      setAvatarUrl(cachedAvatar.avatarUrl);
      setAvatarName(cachedAvatar.name);
      setAvatarDebug(cachedAvatar.debug);
      return;
    }

    setIsFetchingAvatar(true);
    try {
      const res = await fetch(`/api/auth/avatar?email=${encodeURIComponent(normalizedEmail)}`);
      const raw = await res.text();
      type RespostaDoAvatar = {
        avatarUrl?: string | null;
        name?: string | null;
        debug?: { notes?: unknown; candidates?: unknown };
      };
      let data: RespostaDoAvatar | null = null;
      try {
        data = raw ? (JSON.parse(raw) as RespostaDoAvatar) : null;
      } catch {
        setAvatarUrl(null);
        setAvatarName(null);
        setAvatarDebug(`http_${res.status}: ${raw.slice(0, 140) || "invalid_json"}`);
        return;
      }
      if (!res.ok) {
        setAvatarUrl(null);
        setAvatarName(null);
        const nextDebug = Array.isArray(data?.debug?.notes) ? data.debug.notes.join(" | ") : `http_${res.status}`;
        setAvatarDebug(nextDebug);
        return;
      }
      const nextDebug =
        Array.isArray(data?.debug?.candidates) || Array.isArray(data?.debug?.notes)
          ? [
              ...(Array.isArray(data?.debug?.candidates) ? data.debug.candidates : []),
              ...(Array.isArray(data?.debug?.notes) ? data.debug.notes : []),
            ].join(" | ")
          : null;
      const nextAvatarUrl = data?.avatarUrl || null;
      const nextAvatarName = data?.name || null;
      avatarCacheRef.current[normalizedEmail] = {
        avatarUrl: nextAvatarUrl,
        name: nextAvatarName,
        debug: nextDebug,
      };
      setAvatarDebug(nextDebug);
      setAvatarUrl(nextAvatarUrl || null);
      setAvatarName(nextAvatarName || null);
    } catch {
      setAvatarUrl(null);
      setAvatarName(null);
      setAvatarDebug("fetch_error");
    } finally {
      setIsFetchingAvatar(false);
    }
  };

  const handleKeyUp = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.getModifierState && e.getModifierState("CapsLock")) {
      setCapsLockActive(true);
    } else {
      setCapsLockActive(false);
    }
  };

  function createRecoveryClient() {
    const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
    const anon = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

    if (!url || !anon) {
      throw new Error("Supabase env vars are missing.");
    }

    return createSupabaseClient(url, anon, {
      auth: {
        flowType: "implicit",
        autoRefreshToken: false,
        persistSession: false,
        detectSessionInUrl: false,
      },
    });
  }

  async function handleLogin(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");
    setResetMessage(null);

    if (rememberMe) {
      localStorage.setItem("ktalogu_remembered_email", email);
    } else {
      localStorage.removeItem("ktalogu_remembered_email");
    }

    const supabase = getSupabaseClient();
    const { error: authError } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (authError) {
      setError("Email ou senha inválidos. Tente novamente.");
      setLoading(false);
    } else {
      router.refresh();
      router.push("/dashboard");
    }
  }

  function openResetModal() {
    setResetMessage(null);
    setResetEmail(email);
    setResetOpen(true);
  }

  async function handleForgotPassword() {
    setResetMessage(null);

    if (!resetEmail) {
      setResetMessage({ type: "error", text: "Informe seu email para recuperar a senha." });
      return;
    }

    setResetLoading(true);
    try {
      const supabase = createRecoveryClient();
      const origin = window.location.origin;
      const redirectTo = `${origin}/reset-password`;
      const { error: resetError } = await supabase.auth.resetPasswordForEmail(resetEmail, { redirectTo });

      if (resetError) {
        setResetMessage({ type: "error", text: "Não foi possível enviar o link de recuperação." });
        return;
      }

      setResetMessage({ type: "success", text: "Enviamos um link de recuperação para seu email." });
    } finally {
      setResetLoading(false);
    }
  }

  const temEmail = email.length > 0;
  const primeiroNome = avatarName ? avatarName.split(" ")[0] : null;
  const letra = avatarName?.charAt(0) || email.charAt(0) || "";
  const saudacao = primeiroNome ? `Olá, ${primeiroNome}!` : "Acesse sua conta";

  const classeDoCampo =
    "block h-12 w-full rounded-[14px] border border-[#e6e6f2] bg-[#f7f7fb] pl-11 text-[15px] text-[#1a1a2b] placeholder:text-[#9494b0] outline-none transition-all duration-200 focus:border-[#7c3aed] focus:bg-white focus:ring-4 focus:ring-[#7c3aed]/15";

  return (
    <div className="min-h-screen bg-white font-sans text-[#1a1a2b] selection:bg-[#2e1065] selection:text-white lg:grid lg:grid-cols-[minmax(0,46%)_minmax(0,54%)]">
      {/* O painel escuro: o mesmo roxo do trilho do sistema. No desktop ele
          recebe a pessoa pelo nome quando o e-mail é reconhecido. */}
      <aside className="relative hidden overflow-hidden bg-[#2e1065] px-14 py-12 text-white lg:flex lg:flex-col lg:justify-between">
        <div aria-hidden="true" className="pointer-events-none absolute -left-40 -top-40 h-[480px] w-[480px] rounded-full bg-[#7c3aed]/40 blur-3xl" />
        <div aria-hidden="true" className="pointer-events-none absolute -bottom-48 -right-32 h-[560px] w-[560px] rounded-full bg-[#5b21b6]/60 blur-3xl" />
        <div aria-hidden="true" className="pointer-events-none absolute -right-24 top-28 h-80 w-80 rounded-full border border-white/10" />

        <div className="relative">
          <Image src="/brand-logo.svg" alt="Ktalogu" width={150} height={34} className="h-8 w-auto" priority />
        </div>

        <div className="relative my-10">
          <AnimatePresence mode="wait">
            {temEmail ? (
              <motion.div
                key="pessoa"
                initial={{ opacity: 0, y: 18, scale: 0.96 }}
                animate={{ opacity: 1, y: 0, scale: 1 }}
                exit={{ opacity: 0, y: -12, scale: 0.98 }}
                transition={{ type: "spring", stiffness: 260, damping: 24 }}
              >
                <Avatar avatarUrl={avatarUrl} letra={letra} carregando={isFetchingAvatar} tamanho="grande" />
                <h1 className={`${sora.className} mt-8 text-[42px] font-semibold leading-[1.06] tracking-[-0.025em]`}>{saudacao}</h1>
                <p className="mt-4 max-w-[34ch] text-[17px] leading-7 text-[#c4b5fd]">
                  {primeiroNome ? "Que bom ter você de volta. Sua senha e pronto." : "Confira o e-mail e digite a senha pra entrar."}
                </p>
              </motion.div>
            ) : (
              <motion.div
                key="boas-vindas"
                initial={{ opacity: 0, y: 18 }}
                animate={{ opacity: 1, y: 0 }}
                exit={{ opacity: 0, y: -12 }}
                transition={{ duration: 0.4, ease: [0.16, 1, 0.3, 1] }}
              >
                <h1 className={`${sora.className} max-w-[12ch] text-[46px] font-semibold leading-[1.06] tracking-[-0.025em]`}>Bem-vindo de volta.</h1>
                <p className="mt-5 max-w-[36ch] text-[17px] leading-7 text-[#c4b5fd]">
                  Orçamentos, produção, financeiro e loja virtual, tudo num lugar só. Entre e continue de onde parou.
                </p>
              </motion.div>
            )}
          </AnimatePresence>
        </div>

        <div className="relative">
          <p className="text-[13.5px] font-semibold text-white/65">Precisa de ajuda com o acesso?</p>
          <div className="mt-3 flex items-center gap-3">
            <a
              href={LINK_AJUDA}
              target="_blank"
              rel="noreferrer"
              className="inline-flex h-12 items-center gap-2.5 rounded-full bg-white pl-4 pr-5 text-[14.5px] font-bold text-[#2e1065] shadow-[0_12px_28px_-10px_rgba(0,0,0,0.5)] transition-all duration-200 hover:-translate-y-0.5 hover:bg-[#ece8f7]"
            >
              <WhatsAppIcon className="h-5 w-5 text-[#25D366]" />
              Chamar no WhatsApp
            </a>
            <a
              href={LINK_INSTAGRAM}
              target="_blank"
              rel="noreferrer"
              aria-label="Instagram"
              className="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white ring-1 ring-white/15 transition-all duration-200 hover:-translate-y-0.5 hover:bg-white/20"
            >
              <Instagram size={20} />
            </a>
          </div>
        </div>
      </aside>

      {/* O formulário */}
      <main className="flex min-h-screen items-center justify-center px-6 py-10 sm:px-10 lg:px-16">
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
          className="w-full max-w-[420px]"
        >
          {/* No celular não há painel escuro: o logo e a foto ficam aqui em cima. */}
          <div className="mb-8 flex flex-col items-center lg:hidden">
            <Image src="/brand-logo-purple.svg" alt="Ktalogu" width={150} height={34} className="h-8 w-auto" priority />
            <AnimatePresence>
              {temEmail ? (
                <motion.div
                  key="pessoa-celular"
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={{ opacity: 1, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.85 }}
                  transition={{ type: "spring", stiffness: 260, damping: 24 }}
                  className="mt-6 flex flex-col items-center"
                >
                  <Avatar avatarUrl={avatarUrl} letra={letra} carregando={isFetchingAvatar} tamanho="pequeno" />
                </motion.div>
              ) : null}
            </AnimatePresence>
          </div>

          <div className="mb-8">
            <h2 className={`${sora.className} text-[30px] font-semibold leading-[1.15] tracking-[-0.02em] text-[#1a1a2b]`}>
              <span className="lg:hidden">{saudacao}</span>
              <span className="hidden lg:inline">Entrar</span>
            </h2>
            <p className="mt-2 text-[15px] leading-6 text-[#565672]">Use o e-mail e a senha da sua conta.</p>
          </div>

          <form onSubmit={handleLogin} className="space-y-5">
            <div className="space-y-2">
              <label htmlFor="email" className="block text-[13px] font-semibold text-[#1a1a2b]">
                E-mail
              </label>
              <div className="group relative">
                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                  <Mail size={18} className="text-[#9494b0] transition-colors group-focus-within:text-[#7c3aed]" />
                </div>
                <input
                  id="email"
                  type="email"
                  required
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="nome@empresa.com.br"
                  autoComplete="email"
                  className={`${classeDoCampo} pr-4`}
                />
              </div>
            </div>

            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <label htmlFor="password" className="block text-[13px] font-semibold text-[#1a1a2b]">
                  Senha
                </label>
                <button type="button" onClick={openResetModal} className="text-[13px] font-semibold text-[#5f31d6] transition-colors hover:text-[#2e1065]">
                  Esqueceu a senha?
                </button>
              </div>
              <div className="group relative">
                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                  <Lock size={18} className="text-[#9494b0] transition-colors group-focus-within:text-[#7c3aed]" />
                </div>
                <input
                  id="password"
                  type={showPassword ? "text" : "password"}
                  required
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  onKeyUp={handleKeyUp}
                  placeholder="Sua senha"
                  autoComplete="current-password"
                  className={`${classeDoCampo} pr-12`}
                />
                <button
                  type="button"
                  onClick={() => setShowPassword(!showPassword)}
                  className="absolute inset-y-0 right-0 flex items-center pr-4 text-[#9494b0] transition-colors hover:text-[#1a1a2b]"
                  tabIndex={-1}
                  aria-label={showPassword ? "Esconder a senha" : "Mostrar a senha"}
                >
                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
                </button>
              </div>

              <AnimatePresence>
                {capsLockActive && (
                  <motion.div
                    initial={{ opacity: 0, height: 0 }}
                    animate={{ opacity: 1, height: "auto" }}
                    exit={{ opacity: 0, height: 0 }}
                    className="flex items-center gap-2 overflow-hidden text-[12.5px] font-semibold text-amber-600"
                  >
                    <AlertTriangle size={14} />
                    Caps Lock ativado
                  </motion.div>
                )}
              </AnimatePresence>
            </div>

            <div className="flex items-center justify-between gap-4">
              <label className="group flex cursor-pointer items-center gap-3">
                <input type="checkbox" checked={rememberMe} onChange={(e) => setRememberMe(e.target.checked)} className="peer sr-only" />
                <span className="flex h-5 w-5 items-center justify-center rounded-md border-[1.5px] border-[#c9c9dc] bg-white transition-all duration-200 group-hover:border-[#7c3aed] peer-checked:border-[#2e1065] peer-checked:bg-[#2e1065] peer-focus-visible:ring-4 peer-focus-visible:ring-[#7c3aed]/20">
                  <Check size={13} strokeWidth={3.5} className={`transition-opacity duration-150 ${rememberMe ? "text-white opacity-100" : "opacity-0"}`} />
                </span>
                <span className="select-none text-[14px] font-medium text-[#1a1a2b]">Lembrar meu acesso</span>
              </label>
              <span className="text-[12px] font-medium text-[#9494b0]">Acesso pessoal</span>
            </div>

            <AnimatePresence>
              {error && (
                <motion.div
                  initial={{ opacity: 0, y: -8, scale: 0.98 }}
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  exit={{ opacity: 0, scale: 0.98 }}
                  className="flex items-center gap-3 rounded-[14px] border border-red-100 bg-red-50 px-4 py-3 text-[14px] font-medium text-red-700"
                >
                  <AlertTriangle size={18} className="shrink-0 text-red-600" />
                  {error}
                </motion.div>
              )}
            </AnimatePresence>

            <button
              type="submit"
              disabled={loading}
              className="flex h-[52px] w-full items-center justify-center gap-2.5 rounded-full bg-[#2e1065] text-[15px] font-bold text-white shadow-[0_12px_28px_-10px_rgba(46,16,101,0.55)] transition-all duration-200 hover:-translate-y-0.5 hover:bg-[#3b1a80] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#7c3aed]/30 disabled:pointer-events-none disabled:opacity-60"
            >
              {loading ? <Loader2 className="animate-spin" size={20} /> : null}
              {loading ? "Entrando..." : "Entrar na plataforma"}
              {!loading ? <ArrowRight size={19} /> : null}
            </button>

            <p className="pt-1 text-center text-[14px] font-medium text-[#565672]">
              Novo por aqui?{" "}
              <a href={LINK_COMERCIAL} target="_blank" rel="noreferrer" className="font-bold text-[#5f31d6] transition-colors hover:text-[#2e1065]">
                Falar com comercial
              </a>
            </p>
          </form>

          {/* No celular os atalhos de contato ficam embaixo do formulário. */}
          <div className="mt-10 flex flex-col items-center gap-3 border-t border-[#ececf3] pt-6 lg:hidden">
            <p className="text-[13px] font-semibold text-[#9494b0]">Precisa de ajuda com o acesso?</p>
            <div className="flex items-center gap-2">
              <a
                href={LINK_AJUDA}
                target="_blank"
                rel="noreferrer"
                className="inline-flex h-11 items-center gap-2 rounded-full bg-[#f4f5fb] pl-4 pr-5 text-[14px] font-bold text-[#1a1a2b] transition-colors hover:bg-[#ece8f7]"
              >
                <WhatsAppIcon className="h-5 w-5 text-[#25D366]" />
                Chamar no WhatsApp
              </a>
              <a
                href={LINK_INSTAGRAM}
                target="_blank"
                rel="noreferrer"
                aria-label="Instagram"
                className="flex h-11 w-11 items-center justify-center rounded-full bg-[#f4f5fb] text-[#E1306C] transition-colors hover:bg-[#ece8f7]"
              >
                <Instagram size={18} />
              </a>
            </div>
          </div>
        </motion.div>
      </main>

      {/* Recuperar senha */}
      <AnimatePresence>
        {resetOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center px-4">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              className="absolute inset-0 bg-[#1a1a2b]/50 backdrop-blur-sm"
              onClick={() => setResetOpen(false)}
            />
            <motion.div
              initial={{ opacity: 0, scale: 0.96, y: 16 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.96, y: 16 }}
              transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
              className="relative w-full max-w-[440px] rounded-[24px] bg-white p-8 shadow-[0_32px_64px_-16px_rgba(20,8,60,0.35)]"
            >
              <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-2xl bg-[#ece8f7] text-[#2e1065]">
                <Lock size={24} />
              </div>

              <div className="mb-7 space-y-2">
                <h2 className={`${sora.className} text-[26px] font-semibold tracking-[-0.02em] text-[#1a1a2b]`}>Recuperar senha</h2>
                <p className="text-[15px] leading-6 text-[#565672]">Enviamos um link pro seu e-mail. É por ele que você cria a senha nova.</p>
              </div>

              <form
                onSubmit={(e) => {
                  e.preventDefault();
                  handleForgotPassword();
                }}
                className="space-y-5"
              >
                <div className="space-y-2">
                  <label htmlFor="reset-email" className="block text-[13px] font-semibold text-[#1a1a2b]">
                    E-mail da conta
                  </label>
                  <div className="group relative">
                    <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                      <Mail size={18} className="text-[#9494b0] transition-colors group-focus-within:text-[#7c3aed]" />
                    </div>
                    <input
                      id="reset-email"
                      type="email"
                      required
                      value={resetEmail}
                      onChange={(e) => setResetEmail(e.target.value)}
                      placeholder="nome@empresa.com.br"
                      autoComplete="email"
                      className={`${classeDoCampo} pr-4`}
                    />
                  </div>
                </div>

                <AnimatePresence>
                  {resetMessage && (
                    <motion.div
                      initial={{ opacity: 0, height: 0 }}
                      animate={{ opacity: 1, height: "auto" }}
                      exit={{ opacity: 0, height: 0 }}
                      className="overflow-hidden"
                    >
                      <div
                        className={`flex items-start gap-3 rounded-[14px] border px-4 py-3 text-[14px] font-medium ${
                          resetMessage.type === "success" ? "border-emerald-100 bg-emerald-50 text-emerald-700" : "border-red-100 bg-red-50 text-red-700"
                        }`}
                      >
                        <span className="mt-0.5 shrink-0">
                          {resetMessage.type === "success" ? <CheckCircle2 size={18} className="text-emerald-600" /> : <AlertTriangle size={18} className="text-red-600" />}
                        </span>
                        {resetMessage.text}
                      </div>
                    </motion.div>
                  )}
                </AnimatePresence>

                <div className="flex flex-col gap-2 pt-1">
                  <button
                    type="submit"
                    disabled={resetLoading}
                    className="flex h-[52px] w-full items-center justify-center gap-2.5 rounded-full bg-[#2e1065] text-[15px] font-bold text-white shadow-[0_12px_28px_-10px_rgba(46,16,101,0.55)] transition-all duration-200 hover:bg-[#3b1a80] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[#7c3aed]/30 disabled:pointer-events-none disabled:opacity-60"
                  >
                    {resetLoading ? <Loader2 className="animate-spin" size={20} /> : null}
                    {resetLoading ? "Enviando link..." : "Enviar link de recuperação"}
                    {!resetLoading ? <ArrowRight size={19} /> : null}
                  </button>
                  <button
                    type="button"
                    onClick={() => setResetOpen(false)}
                    className="flex h-12 w-full items-center justify-center rounded-full text-[15px] font-semibold text-[#565672] transition-colors hover:bg-[#f4f5fb] hover:text-[#1a1a2b]"
                  >
                    Voltar para o login
                  </button>
                </div>
              </form>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </div>
  );
}