'use client';

import { useEffect, useState, Suspense } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { api, ApiError } from '@/lib/api';
import Link from 'next/link';
import styles from './verify-email.module.css';

function VerifyEmailContent() {
  const searchParams = useSearchParams();
  const router = useRouter();
  const token = searchParams.get('token');

  const [loading, setLoading] = useState(true);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [userEmail, setUserEmail] = useState<string>('');

  useEffect(() => {
    if (!token) {
      setError('Token de vérification manquant');
      setLoading(false);
      return;
    }

    const verifyEmail = async () => {
      try {
        const response = await api.verifyEmail(token);
        setSuccess(true);
        setUserEmail(response.email);
        
        // Rediriger vers la page de connexion après 5 secondes
        setTimeout(() => {
          router.push('/login');
        }, 5000);
      } catch (err) {
        if (err instanceof ApiError) {
          setError(err.message);
        } else {
          setError('Une erreur est survenue lors de la vérification');
        }
      } finally {
        setLoading(false);
      }
    };

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

  if (loading) {
    return (
      <div className={styles.container}>
        <div className={styles.card}>
          <div className={styles.spinner}></div>
          <h1 className={styles.title}>Vérification en cours...</h1>
          <p className={styles.message}>
            Veuillez patienter pendant que nous vérifions votre email
          </p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className={styles.container}>
        <div className={styles.card}>
          <div className={styles.errorIcon}>❌</div>
          <h1 className={styles.title}>Échec de la vérification</h1>
          <p className={styles.errorMessage}>{error}</p>
          <div className={styles.actions}>
            <Link href="/register" className={styles.button}>
              Créer un nouveau compte
            </Link>
            <Link href="/login" className={styles.buttonSecondary}>
              Retour à la connexion
            </Link>
          </div>
        </div>
      </div>
    );
  }

  if (success) {
    return (
      <div className={styles.container}>
        <div className={styles.card}>
          <div className={styles.successIcon}>✅</div>
          <h1 className={styles.title}>Email vérifié avec succès !</h1>
          <p className={styles.successMessage}>
            Votre compte <strong>{userEmail}</strong> a été activé.
          </p>
          <p className={styles.redirectMessage}>
            Vous allez être redirigé vers la page de connexion dans quelques instants...
          </p>
          <div className={styles.actions}>
            <Link href="/login" className={styles.button}>
              Se connecter maintenant
            </Link>
          </div>
        </div>
      </div>
    );
  }

  return null;
}

export default function VerifyEmailPage() {
  return (
    <Suspense fallback={
      <div className={styles.container}>
        <div className={styles.card}>
          <div className={styles.spinner}></div>
          <h1 className={styles.title}>Chargement...</h1>
        </div>
      </div>
    }>
      <VerifyEmailContent />
    </Suspense>
  );
}