'use client';

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

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

    const [newPassword, setNewPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');
    const [loading, setLoading] = useState(false);
    const [success, setSuccess] = useState(false);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        if (!token) {
            setError('Token manquant ou invalide');
        }
    }, [token]);

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError(null);
        setLoading(true);

        // Validation côté client
        if (newPassword !== confirmPassword) {
            setError('Les mots de passe ne correspondent pas');
            setLoading(false);
            return;
        }

        if (newPassword.length < 8) {
            setError('Le mot de passe doit contenir au moins 8 caractères');
            setLoading(false);
            return;
        }

        if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(newPassword)) {
            setError(
                'Le mot de passe doit contenir au moins une majuscule, une minuscule et un chiffre'
            );
            setLoading(false);
            return;
        }

        if (!token) {
            setError('Token manquant');
            setLoading(false);
            return;
        }

        try {
            await api.resetPassword({
                token,
                newPassword,
                confirmPassword,
            });

            setSuccess(true);
            setTimeout(() => {
                router.push('/login');
            }, 3000);
        } catch (err) {
            if (err instanceof ApiError) {
                setError(err.message);
            } else {
                setError('Une erreur est survenue');
            }
        } finally {
            setLoading(false);
        }
    };

    if (!token) {
        return (
            <div className={styles.container}>
                <div className={styles.card}>
                    <div className={styles.error}>
                        <h2>❌ Lien invalide</h2>
                        <p>Le lien de réinitialisation est invalide ou a expiré.</p>
                        <Link href="/forgot-password" className={styles.link}>
                            Demander un nouveau lien
                        </Link>
                    </div>
                </div>
            </div>
        );
    }

    if (success) {
        return (
            <div className={styles.container}>
                <div className={styles.card}>
                    <div className={styles.success}>
                        <h2>✅ Mot de passe réinitialisé !</h2>
                        <p>
                            Votre mot de passe a été réinitialisé avec succès.
                        </p>
                        <p>Redirection vers la page de connexion...</p>
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className={styles.container}>
            <div className={styles.card}>
                <h1 className={styles.title}>🔒 Nouveau mot de passe</h1>
                <p className={styles.subtitle}>
                    Choisissez un nouveau mot de passe sécurisé
                </p>

                {error && (
                    <div className={styles.errorMessage}>
                        <p>{error}</p>
                    </div>
                )}

                <form onSubmit={handleSubmit} className={styles.form}>
                    <div className={styles.field}>
                        <label htmlFor="newPassword">Nouveau mot de passe</label>
                        <input
                            type="password"
                            id="newPassword"
                            value={newPassword}
                            onChange={(e) => setNewPassword(e.target.value)}
                            required
                            disabled={loading}
                            placeholder="Minimum 8 caractères"
                        />
                    </div>

                    <div className={styles.field}>
                        <label htmlFor="confirmPassword">
                            Confirmer le mot de passe
                        </label>
                        <input
                            type="password"
                            id="confirmPassword"
                            value={confirmPassword}
                            onChange={(e) => setConfirmPassword(e.target.value)}
                            required
                            disabled={loading}
                            placeholder="Retapez votre mot de passe"
                        />
                    </div>

                    <div className={styles.requirements}>
                        <p>Le mot de passe doit contenir :</p>
                        <ul>
                            <li className={newPassword.length >= 8 ? styles.valid : ''}>
                                Au moins 8 caractères
                            </li>
                            <li className={/[A-Z]/.test(newPassword) ? styles.valid : ''}>
                                Au moins une majuscule
                            </li>
                            <li className={/[a-z]/.test(newPassword) ? styles.valid : ''}>
                                Au moins une minuscule
                            </li>
                            <li className={/\d/.test(newPassword) ? styles.valid : ''}>
                                Au moins un chiffre
                            </li>
                        </ul>
                    </div>

                    <button
                        type="submit"
                        disabled={loading}
                        className={styles.submitButton}
                    >
                        {loading ? 'Réinitialisation...' : 'Réinitialiser le mot de passe'}
                    </button>
                </form>

                <div className={styles.footer}>
                    <Link href="/login" className={styles.link}>
                        Retour à la connexion
                    </Link>
                </div>
            </div>
        </div>
    );
}

export default function ResetPasswordPage() {
    return (
        <Suspense fallback={<div>Chargement...</div>}>
            <ResetPasswordForm />
        </Suspense>
    );
}