"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import mbhsLogo from "@/public/images/mbhs-logo.png";
import { Link } from "@/i18n/navigation";
import { useVerifyEmailControllerVerifyEmailV1 } from "@/api/user/user-authentication/user-authentication";
import { use } from "react";

export default function VerifyEmailPage({ params }: { params: Promise<{ token: string }> }) {
  const { token } = use(params);
  const [status, setStatus] = useState<"loading" | "success" | "error">("loading");
  const [errorMessage, setErrorMessage] = useState("");

  const { data, error, isLoading } = useVerifyEmailControllerVerifyEmailV1(token, {
    query: {
      enabled: !!token,
      retry: false,
    },
  });

  useEffect(() => {
    if (!isLoading && data) {
      setStatus("success");
    }
    if (!isLoading && error) {
      setStatus("error");
      setErrorMessage(
        (error as any)?.response?.data?.message || "Email verification failed. The link may be expired or invalid."
      );
    }
  }, [data, error, isLoading]);

  return (
    <main className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#E8F4F8] via-[#EEF6F9] to-[#E5EEF2]">
      <div className="max-w-md w-full mx-4">
        <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-10 text-center">
          {/* Logo */}
          <Link href="/" className="inline-flex items-center gap-3 mb-8 hover:opacity-80 transition">
            <Image src={mbhsLogo} alt="MBHS" width={48} height={48} className="rounded-xl" />
            <span className="text-2xl font-extrabold text-gray-900 tracking-tight">MBHS</span>
          </Link>

          {status === "loading" && (
            <>
              <div className="flex justify-center mb-6">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#3B9EC9]"></div>
              </div>
              <h1 className="text-xl font-bold text-gray-900 mb-2">Verifying your email...</h1>
              <p className="text-gray-500 text-sm">Please wait while we verify your email address.</p>
            </>
          )}

          {status === "success" && (
            <>
              <div className="flex justify-center mb-6">
                <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center">
                  <svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
                  </svg>
                </div>
              </div>
              <h1 className="text-xl font-bold text-gray-900 mb-2">Email Verified!</h1>
              <p className="text-gray-500 text-sm mb-6">
                Your email has been verified successfully. You can now sign in to your account.
              </p>
              <Link
                href="/login"
                className="inline-block px-8 py-3 text-sm font-medium text-white bg-[#3B9EC9] rounded-full hover:bg-[#2D8AB5] transition"
              >
                Sign In
              </Link>
            </>
          )}

          {status === "error" && (
            <>
              <div className="flex justify-center mb-6">
                <div className="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center">
                  <svg className="w-8 h-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                  </svg>
                </div>
              </div>
              <h1 className="text-xl font-bold text-gray-900 mb-2">Verification Failed</h1>
              <p className="text-gray-500 text-sm mb-6">{errorMessage}</p>
              <Link
                href="/login"
                className="inline-block px-8 py-3 text-sm font-medium text-white bg-[#3B9EC9] rounded-full hover:bg-[#2D8AB5] transition"
              >
                Go to Login
              </Link>
            </>
          )}
        </div>
      </div>
    </main>
  );
}