"use client";

import React, { useEffect, useState, useCallback, Suspense } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { AuthLayout } from '@/components/layout/auth-layout';
import { useToast } from '@/hooks/use-toast';
import { auth } from '@/lib/firebase';
import { Loader2, MailCheck } from 'lucide-react';
import { onAuthStateChanged, User, signOut, sendEmailVerification } from 'firebase/auth';

function VerifyEmailContent() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { toast } = useToast();
  const [email, setEmail] = useState<string | null>(null);
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);
  const [checking, setChecking] = useState(false);
  const [resending, setResending] = useState(false);

  useEffect(() => {
    const emailParam = searchParams.get('email');
    if (!emailParam) {
      router.push('/login');
    } else {
      setEmail(emailParam);
    }
  }, [searchParams, router]);

  useEffect(() => {
    if (auth) {
        const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
            setUser(currentUser);
            setLoading(false);
        });
        return () => unsubscribe();
    } else {
        setLoading(false);
    }
  }, []);

  const handleCheckVerification = useCallback(async () => {
    if (!user) return;
    setChecking(true);
    await user.reload();
    if (user.emailVerified) {
      toast({
        title: "Success!",
        description: "Your email has been verified. You can now log in.",
      });
      await signOut(auth);
      router.push('/login');
    } else {
      toast({
        variant: "destructive",
        title: "Not Verified",
        description: "Your email is still not verified. Please check your inbox.",
      });
    }
    setChecking(false);
  }, [user, router, toast]);

  const handleResendEmail = async () => {
    if(!user) return;
    setResending(true);
    try {
        await sendEmailVerification(user);
        toast({
            title: "Email Sent",
            description: "A new verification email has been sent to your address."
        });
    } catch(error: any) {
        toast({
            variant: "destructive",
            title: "Error",
            description: `Failed to resend email: ${error.message}`
        });
    } finally {
        setResending(false);
    }
  };

  const handleLogout = async () => {
    await signOut(auth);
    router.push('/login');
  };
  
  if (loading) {
      return (
          <AuthLayout>
              <div className="flex items-center justify-center p-8">
                  <Loader2 className="h-12 w-12 animate-spin" />
              </div>
          </AuthLayout>
      )
  }

  return (
    <AuthLayout>
      <Card>
        <CardHeader className="text-center">
          <MailCheck className="mx-auto h-12 w-12 text-primary mb-4"/>
          <CardTitle className="font-headline text-2xl">Verify Your Email</CardTitle>
          <CardDescription>
            We've sent a verification link to <span className="font-bold text-primary">{email}</span>. Please check your inbox (and spam folder) to continue.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Button onClick={handleCheckVerification} className="w-full" disabled={checking}>
            {checking && <Loader2 className="mr-2 h-4 w-4 animate-spin"/>}
            I've verified, check again
          </Button>
          <div className="flex items-center justify-between gap-4">
            <Button variant="outline" className="w-full" onClick={handleResendEmail} disabled={resending}>
               {resending && <Loader2 className="mr-2 h-4 w-4 animate-spin"/>}
               Resend Email
            </Button>
            <Button variant="secondary" className="w-full" onClick={handleLogout}>
                Log Out
            </Button>
          </div>
        </CardContent>
      </Card>
    </AuthLayout>
  );
}


export default function VerifyEmailPage() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <VerifyEmailContent />
        </Suspense>
    )
}