"use client";

import { useState } from "react";
import { useSession } from "next-auth/react";
import { Mail, RefreshCw } from "lucide-react";
import { GlassContainer } from "@/components/ui/GlassContainer";

export default function VerifyPending() {
  const { data: session } = useSession();
  const [isResending, setIsResending] = useState(false);
  const [message, setMessage] = useState<string | null>(null);

  const handleResend = async () => {
    setIsResending(true);
    setMessage(null);

    try {
      const response = await fetch("/api/auth/resend-verification", {
        method: "POST",
      });

      const data = await response.json();

      if (response.ok) {
        setMessage("Verification email resent! Please check your inbox.");
      } else {
        setMessage(data.error || "Failed to resend email. Please try again.");
      }
    } catch (error) {
      console.error("Resend verification error:", error);
      setMessage("An error occurred. Please try again later.");
    } finally {
      setIsResending(false);
    }
  };

  return (
    <>
      <div className="text-center mb-8 space-y-3">
        <div className="mx-auto w-12 h-12 bg-violet-500/10 border border-violet-500/20 rounded-full flex items-center justify-center">
          <Mail className="w-6 h-6 text-violet-400" />
        </div>
        <h1 className="text-2xl font-bold text-white">Verify Your Email</h1>
        <p className="text-sm text-gray-400">
          We&apos;ve sent a verification link to{" "}
          <span className="font-semibold text-gray-300">
            {session?.user?.email}
          </span>
        </p>
      </div>

      <GlassContainer intensity="default" className="p-8">
        <div className="space-y-6">
          <div className="space-y-4 text-sm text-gray-400">
            <p>
              Please check your inbox and click the verification link to
              activate your account.
            </p>

            <div className="bg-white/[0.03] border border-white/[0.06] rounded-lg p-4 space-y-2">
              <p className="font-medium text-gray-300">
                Can&apos;t find the email?
              </p>
              <ul className="list-disc list-inside space-y-1 text-xs text-gray-500">
                <li>Check your spam or junk folder</li>
                <li>Make sure the email address is correct</li>
                <li>Wait a few minutes for the email to arrive</li>
              </ul>
            </div>
          </div>

          {message && (
            <div
              className={`p-3 rounded-lg text-sm ${
                message.includes("resent")
                  ? "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
                  : "bg-red-500/10 text-red-400 border border-red-500/20"
              }`}
            >
              {message}
            </div>
          )}

          <button
            onClick={handleResend}
            disabled={isResending}
            className="w-full py-2.5 px-4 bg-violet-600 hover:bg-violet-500 disabled:bg-violet-600/50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition shadow-lg shadow-violet-600/20 inline-flex items-center justify-center gap-2"
          >
            {isResending ? (
              <>
                <RefreshCw className="w-4 h-4 animate-spin" />
                Resending...
              </>
            ) : (
              <>
                <Mail className="w-4 h-4" />
                Resend Verification Email
              </>
            )}
          </button>

          <p className="text-xs text-center text-gray-500">
            The verification link will expire in 24 hours
          </p>
        </div>
      </GlassContainer>
    </>
  );
}
