"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) => {
        setStatus('success');
        setMessage('Your registration has been verified. Please return to the official website to log in.');
      })
      .catch((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>
  );
}