import { useEffect, useState } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { Loader2, CheckCircle, XCircle } from 'lucide-react';
import { api } from '../lib/api';

export default function Activate() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const token = searchParams.get('token');
  
  const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading');
  const [message, setMessage] = useState('');

  useEffect(() => {
    if (!token) {
      setStatus('error');
      setMessage('Invalid or missing activation token.');
      return;
    }

    const activateAccount = async () => {
      try {
        await api.activateUser(token);
        setStatus('success');
        setMessage('Your account has been successfully activated!');
      } catch (error: any) {
        setStatus('error');
        setMessage(error.message || 'Failed to activate account.');
      }
    };

    activateAccount();
  }, [token]);

  return (
    <div className="min-h-screen bg-zinc-950 flex flex-col items-center justify-center p-4">
      <div className="bg-zinc-900 border border-zinc-800 rounded-2xl p-8 max-w-md w-full text-center shadow-2xl">
        {status === 'loading' && (
          <div className="flex flex-col items-center">
            <Loader2 className="w-12 h-12 text-primary animate-spin mb-4" />
            <h2 className="text-xl font-bold text-white mb-2">Activating Account...</h2>
            <p className="text-zinc-400">Please wait while we verify your token.</p>
          </div>
        )}
        
        {status === 'success' && (
          <div className="flex flex-col items-center">
            <CheckCircle className="w-12 h-12 text-green-500 mb-4" />
            <h2 className="text-xl font-bold text-white mb-2">Success!</h2>
            <p className="text-zinc-400 mb-6">{message}</p>
            <button 
              onClick={() => navigate('/')}
              className="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-xl transition-colors"
            >
              Go to Login
            </button>
          </div>
        )}

        {status === 'error' && (
          <div className="flex flex-col items-center">
            <XCircle className="w-12 h-12 text-red-500 mb-4" />
            <h2 className="text-xl font-bold text-white mb-2">Activation Failed</h2>
            <p className="text-zinc-400 mb-6">{message}</p>
            <button 
              onClick={() => navigate('/')}
              className="bg-zinc-800 hover:bg-zinc-700 text-white font-medium py-2 px-6 rounded-xl transition-colors"
            >
              Return Home
            </button>
          </div>
        )}
      </div>
    </div>
  );
}