"use client";

import { post } from "@/api/request";
import { useSearchParams, useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import { CheckCircle, XCircle, Loader2 } from "lucide-react";

export default function Activate() {
  const searchParams = useSearchParams();
  const t = searchParams.get("t") || "";
  const type = searchParams.get("type");

  if (type === "confirm_email") {
    return <ConfirmEmail t={t} />;
  }

  return <></>;
}

/**
 * Email verification confirmation component
 * @param {string} t - Verification token
 */
function ConfirmEmail({ t }: { t: string }) {
  const router = useRouter();
  const [status, setStatus] = useState<"loading" | "success" | "error">(
    "loading"
  );
  const [message, setMessage] = useState("");
  const [countdown, setCountdown] = useState(3);

  useEffect(() => {
    if (!t) {
      setStatus("error");
      setMessage("Invalid verification token");
      return;
    }
    post(`/auth/activate`, {
      t: t,
    }).then((res:any) => {
      setStatus("success");
      setMessage(
        "Your registration has been verified. Redirecting to login page..."
      );
    }).catch((err:any) => {
      setStatus("error");
      setMessage("Verification failed. Please try again.");
    });
  }, [t]);

  /**
   * Handle countdown and redirect to login page
   */
  useEffect(() => {
    if (status === "success") {
      const timer = setInterval(() => {
        setCountdown((prev: number) => {
          if (prev <= 1) {
            clearInterval(timer);
            router.push("/login");
            return 0;
          }
          return prev - 1;
        });
      }, 1000);

      return () => clearInterval(timer);
    }
  }, [status, router]);

  const renderContent = () => {
    switch (status) {
      case "loading":
        return (
          <div
            data-alt="loading-state"
            className="flex flex-col items-center justify-center space-y-4"
          >
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-purple-600 rounded-full blur-lg opacity-30 animate-pulse"></div>
              <Loader2 className="h-16 w-16 animate-spin text-cyan-400 relative z-10" />
            </div>
            <p className="text-lg text-gray-300">Verifying email...</p>
          </div>
        );

      case "success":
        return (
          <div
            data-alt="success-state"
            className="flex flex-col items-center justify-center space-y-4"
          >
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-r from-cyan-400 to-purple-600 rounded-full blur-lg opacity-30"></div>
              <CheckCircle className="h-16 w-16 text-cyan-400 relative z-10" />
            </div>
            <h2 className="text-2xl font-semibold bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-transparent">
              Verification Successful
            </h2>
            <p className="text-gray-300 text-center max-w-md">{message}</p>
            <div className="mt-4 p-4 bg-gradient-to-r from-cyan-400/10 to-purple-600/10 rounded-lg border border-cyan-400/20">
              <p className="text-cyan-400 text-sm">
                Redirecting to login page in {countdown} seconds...
              </p>
            </div>
            <button
              data-alt="manual-login-button"
              onClick={() => router.push("/login")}
              className="mt-2 px-6 py-2 bg-gradient-to-r from-cyan-400 to-purple-600 text-white rounded-lg hover:from-cyan-500 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105"
            >
              Go to Login Now
            </button>
          </div>
        );

      case "error":
        return (
          <div
            data-alt="error-state"
            className="flex flex-col items-center justify-center space-y-4"
          >
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 rounded-full blur-lg opacity-30"></div>
              <XCircle className="h-16 w-16 text-red-400 relative z-10" />
            </div>
            <h2 className="text-2xl font-semibold bg-gradient-to-r from-red-500 to-orange-500 bg-clip-text text-transparent">
              Verification Failed
            </h2>
            <p className="text-gray-300 text-center max-w-md">{message}</p>
            {/* <button
              data-alt="retry-button"
              onClick={() => window.location.reload()}
              className="mt-4 px-6 py-2 bg-gradient-to-r from-cyan-400 to-purple-600 text-white rounded-lg hover:from-cyan-500 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105"
            >
              Retry Verification
            </button> */}
          </div>
        );
    }
  };

  return (
    <div
      data-alt="email-verification-container"
      className="min-h-screen flex items-center justify-center bg-gradient-to-br from-black via-gray-900 to-black px-4"
    >
      <div
        data-alt="verification-card"
        className="bg-gradient-to-br from-gray-900/90 to-black/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 max-w-md w-full border border-gray-700/50 relative overflow-hidden"
      >
        <div className="absolute inset-0 bg-gradient-to-br from-cyan-400/10 to-purple-600/10 pointer-events-none"></div>
        <div className="relative z-10">
          {status === "loading" && (
            <div data-alt="verification-header" className="text-center mb-8">
              <h1 className="text-3xl font-bold text-white mb-2 bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-transparent">
                Email Verification
              </h1>
              <p className="text-gray-300">
                Please wait while we verify your email
              </p>
            </div>
          )}

          {renderContent()}
        </div>
      </div>
    </div>
  );
}