import React, { useState, useEffect } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { AuthLayout } from '../components/AuthLayout';
import { AuthInput } from '../components/AuthInput';
import { AuthButton } from '../components/AuthButton';
import { AuthErrorMessage } from '../components/AuthErrorMessage';
import { PasswordStrengthIndicator } from '../components/PasswordStrengthIndicator';
import { usePasswordReset } from '../hooks/usePasswordReset';
import type { ResetPasswordFormData } from '../types';

export function ResetPasswordPage() {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  const { handleReset, loading, error, success } = usePasswordReset();
  const [token, setToken] = useState<string | null>(null);
  const [formData, setFormData] = useState<ResetPasswordFormData>({
    token: '',
    password: '',
    confirmPassword: '',
  });
  const [errors, setErrors] = useState<
    Partial<Record<keyof ResetPasswordFormData, string>>
  >({});

  // Extraire le token depuis l'URL
  useEffect(() => {
    const tokenParam = searchParams.get('token');
    if (tokenParam) {
      setToken(tokenParam);
      setFormData((prev) => ({ ...prev, token: tokenParam }));
    }
  }, [searchParams]);

  // Rediriger vers login après succès
  useEffect(() => {
    if (success) {
      const timer = setTimeout(() => {
        navigate('/login', { replace: true });
      }, 3000);
      return () => clearTimeout(timer);
    }
    return undefined;
  }, [success, navigate]);

  const validate = (): boolean => {
    const newErrors: Partial<Record<keyof ResetPasswordFormData, string>> = {};

    if (!formData.password) {
      newErrors.password = 'Mot de passe requis';
    } else if (formData.password.length < 8) {
      newErrors.password =
        'Le mot de passe doit contenir au moins 8 caractères';
    }

    if (!formData.confirmPassword) {
      newErrors.confirmPassword = 'Confirmation du mot de passe requise';
    } else if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = 'Les mots de passe ne correspondent pas';
    }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleChange = (field: keyof ResetPasswordFormData, value: string) => {
    setFormData({ ...formData, [field]: value });
    // Clear error for this field when user starts typing
    if (errors[field]) {
      setErrors({ ...errors, [field]: undefined });
    }
  };

  const handleBlur = (field: keyof ResetPasswordFormData) => {
    const value = formData[field];
    let error: string | undefined;

    if (field === 'password') {
      if (!value) {
        error = 'Mot de passe requis';
      } else if (value.length < 8) {
        error = 'Le mot de passe doit contenir au moins 8 caractères';
      }
    } else if (field === 'confirmPassword') {
      if (!value) {
        error = 'Confirmation du mot de passe requise';
      } else if (formData.password !== value) {
        error = 'Les mots de passe ne correspondent pas';
      }
    }

    if (error) {
      setErrors({ ...errors, [field]: error });
    } else {
      setErrors({ ...errors, [field]: undefined });
    }
  };

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!token) {
      return;
    }
    if (validate()) {
      await handleReset(formData);
    }
  };

  // Afficher un message si le token est invalide ou manquant
  if (!token) {
    return (
      <AuthLayout
        title="Lien de réinitialisation invalide"
        subtitle="Le lien de réinitialisation est invalide ou a expiré"
        footerLinks={[
          { label: 'Demander un nouveau lien', to: '/forgot-password' },
          { label: 'Retour à la connexion', to: '/login' },
        ]}
      >
        <div
          className="text-center space-y-4"
          role="alert"
          aria-live="assertive"
        >
          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded">
            <p className="font-medium">Lien invalide</p>
            <p className="text-sm mt-1">
              Le lien de réinitialisation est invalide ou a expiré. Veuillez
              demander un nouveau lien.
            </p>
          </div>
        </div>
      </AuthLayout>
    );
  }

  // Afficher le message de succès
  if (success) {
    return (
      <AuthLayout
        title="Mot de passe réinitialisé"
        subtitle="Votre mot de passe a été modifié avec succès"
        footerLinks={[{ label: 'Retour à la connexion', to: '/login' }]}
      >
        <div className="text-center space-y-4" role="status" aria-live="polite">
          <div
            className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded"
            role="alert"
          >
            <p className="font-medium">Succès !</p>
            <p className="text-sm mt-1">
              Votre mot de passe a été réinitialisé avec succès. Vous allez être
              redirigé vers la page de connexion...
            </p>
          </div>
        </div>
      </AuthLayout>
    );
  }

  return (
    <AuthLayout
      title="Réinitialiser le mot de passe"
      subtitle="Entrez votre nouveau mot de passe"
      footerLinks={[{ label: 'Retour à la connexion', to: '/login' }]}
    >
      <form
        onSubmit={onSubmit}
        className="space-y-4"
        aria-label="Formulaire de réinitialisation de mot de passe"
      >
        {error && <AuthErrorMessage message={error.message} />}

        <AuthInput
          type="password"
          label="Nouveau mot de passe"
          value={formData.password}
          onChange={(e) => handleChange('password', e.target.value)}
          onBlur={() => handleBlur('password')}
          error={errors.password}
          required
          autoComplete="new-password"
        />
        <div aria-live="polite" aria-atomic="true">
          <PasswordStrengthIndicator password={formData.password} />
        </div>

        <AuthInput
          type="password"
          label="Confirmer le mot de passe"
          value={formData.confirmPassword}
          onChange={(e) => handleChange('confirmPassword', e.target.value)}
          onBlur={() => handleBlur('confirmPassword')}
          error={errors.confirmPassword}
          required
          autoComplete="new-password"
        />

        <AuthButton type="submit" loading={loading}>
          Réinitialiser le mot de passe
        </AuthButton>
      </form>
    </AuthLayout>
  );
}

export default ResetPasswordPage;
