import { useEffect, useState } from "react";
import { useSearchParams, useNavigate } from "react-router";
import confirmEmailChange from "../../utils/users/confirmEmailChange";
import styles from "./ConfirmEmailChangePage.module.css";
import Background from "../../components/Background/Background";

export default function ConfirmEmailChange() {
    const [searchParams] = useSearchParams();
    const navigate = useNavigate();
    const [message, setMessage] = useState<string>('Validation en cours...');
    const [success, setSuccess] = useState<boolean | null>(null);

    useEffect(() => {
        const token = searchParams.get('token');
        if (!token) {
            setMessage('Token manquant.');
            setSuccess(false);
            return;
        }

        confirmEmailChange(token)
            .then(() => {
                setMessage('Votre adresse email a bien été mise à jour.\nVous allez être redirigé vers la page de connexion...');
                setSuccess(true);
                setTimeout(() => navigate('/login'), 3000);
            })
            .catch(() => {
                setMessage('Token invalide ou expiré.');
                setSuccess(false);
            });
    }, []);

    return <Background>
        <div className={styles.content}>
            <h1 className={styles.title}> Validation de votre adresse email </h1>
            <div className={`${styles.container} glassCard`}>
                <p>{message}</p>
            </div>
        </div>
    </Background>
}