"use client";
import { post } from "@/api/request";
import { useSearchParams } from "next/navigation";
import React, { 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 [status, setStatus] = useState<"loading" | "success" | "error">(
    "loading"
  );
  const [message, setMessage] = useState("");

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

  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>
        );

      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>
  );
}