import { useEffect, useState } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import { Loader2, CheckCircle, XCircle, Mail } from 'lucide-react';

export default function VerifyEmail() {
  const [searchParams] = useSearchParams();
  const [status, setStatus] = useState<'loading' | 'success' | 'error' | 'no-token'>('loading');
  const [error, setError] = useState<string | null>(null);

  const token = searchParams.get('token');

  useEffect(() => {
    if (!token) {
      setStatus('no-token');
      return;
    }

    verifyEmail(token);
  }, [token]);

  const verifyEmail = async (token: string) => {
    try {
      const response = await fetch('/api/v1/auth/verify-email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ token }),
      });

      const data = await response.json();

      if (!response.ok) {
        throw new Error(data.error || 'Error al verificar email');
      }

      setStatus('success');
    } catch (err) {
      setStatus('error');
      setError(err instanceof Error ? err.message : 'Error desconocido');
    }
  };

  if (status === 'loading') {
    return (
      <div className="text-center">
        <Loader2 className="w-16 h-16 text-primary-500 animate-spin mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-white mb-2">Verificando email...</h2>
        <p className="text-gray-400">Por favor espera un momento</p>
      </div>
    );
  }

  if (status === 'success') {
    return (
      <div className="text-center">
        <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-white mb-2">Email Verificado</h2>
        <p className="text-gray-400 mb-6">
          Tu cuenta ha sido verificada exitosamente. Ya puedes iniciar sesion.
        </p>
        <Link to="/login" className="btn btn-primary">
          Iniciar Sesion
        </Link>
      </div>
    );
  }

  if (status === 'no-token') {
    return (
      <div className="text-center">
        <Mail className="w-16 h-16 text-primary-500 mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-white mb-2">Verifica tu Email</h2>
        <p className="text-gray-400 mb-6">
          Revisa tu bandeja de entrada y haz clic en el enlace de verificacion
          que te enviamos al registrarte.
        </p>
        <Link to="/login" className="btn btn-secondary">
          Volver a Iniciar Sesion
        </Link>
      </div>
    );
  }

  return (
    <div className="text-center">
      <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
      <h2 className="text-2xl font-bold text-white mb-2">Error de Verificacion</h2>
      <p className="text-gray-400 mb-6">{error}</p>
      <div className="space-y-3">
        <Link to="/login" className="btn btn-primary block">
          Volver a Iniciar Sesion
        </Link>
        <p className="text-sm text-gray-500">
          Si el problema persiste, contacta a soporte.
        </p>
      </div>
    </div>
  );
}
