import { useState } from 'react'
import { Link, useNavigate, useParams } from 'react-router-dom'
import { resetPasswordApi } from '../services/auth'
import PasswordRules from '../components/PasswordRules'
import { isPasswordValid, PASSWORD_RULES_ERROR } from '../utils/passwordRules'

// Sert les deux parcours qui passent par un jeton envoyé par email :
// la définition initiale du mot de passe après une inscription Google,
// et la réinitialisation classique depuis « mot de passe oublié ».
export default function DefinirMotDePasse() {
  const { token } = useParams()
  const navigate = useNavigate()

  const [form, setForm] = useState({ password: '', confirmPassword: '' })
  const [showPassword, setShowPassword] = useState(false)
  const [error, setError] = useState('')
  const [success, setSuccess] = useState('')
  const [loading, setLoading] = useState(false)

  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value })

  const handleSubmit = async (e) => {
    e.preventDefault()
    setError('')

    if (!isPasswordValid(form.password)) {
      setError(PASSWORD_RULES_ERROR)
      return
    }
    if (form.password !== form.confirmPassword) {
      setError('Les deux mots de passe ne correspondent pas.')
      return
    }

    setLoading(true)
    try {
      await resetPasswordApi({ token, ...form })
      setSuccess('Mot de passe enregistré. Vous pouvez maintenant vous connecter avec votre email.')
      setTimeout(() => navigate('/connexion'), 2500)
    } catch (err) {
      setError(err.message)
    } finally {
      setLoading(false)
    }
  }

  if (success) {
    return (
      <div className="min-h-screen bg-white flex flex-col justify-center px-8 py-12 max-w-sm mx-auto text-center">
        <div className="mb-4 px-4 py-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm">
          {success}
        </div>
        <Link to="/connexion" className="text-sm text-[#006B6B] font-medium hover:underline">
          Aller à la connexion
        </Link>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-white flex flex-col justify-center px-8 py-12 max-w-sm mx-auto">
      <div className="mb-8">
        <h1 className="text-4xl font-bold italic font-serif text-[#006B6B]">Nouveau mot de passe</h1>
        {/* Texte neutre : la page sert au mot de passe oublié comme au
            premier mot de passe d'un compte Google. */}
        <p className="text-gray-500 mt-1 text-sm">
          Choisissez le mot de passe que vous utiliserez pour vous connecter avec votre adresse email.
        </p>
      </div>

      {error && (
        <div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm" role="alert">
          {error}
          {/invalide ou expiré/i.test(error) && (
            <Link to="/mot-de-passe-oublie" className="block mt-2 font-medium text-[#006B6B] hover:underline">
              Demander un nouveau lien
            </Link>
          )}
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-5">
        <div>
          <label htmlFor="password" className="block text-sm font-medium text-gray-800 mb-1">
            Nouveau mot de passe <span className="text-gray-800">*</span>
          </label>
          <input
            type={showPassword ? 'text' : 'password'}
            id="password"
            name="password"
            value={form.password}
            onChange={handleChange}
            required
            autoComplete="new-password"
            aria-describedby="password-rules"
            placeholder="Votre nouveau mot de passe"
            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
          />
          <PasswordRules id="password-rules" password={form.password} />
        </div>

        <div>
          <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-800 mb-1">
            Confirmer le mot de passe <span className="text-gray-800">*</span>
          </label>
          <input
            type={showPassword ? 'text' : 'password'}
            id="confirmPassword"
            name="confirmPassword"
            value={form.confirmPassword}
            onChange={handleChange}
            required
            placeholder="Saisissez-le à nouveau"
            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
          />
        </div>

        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            checked={showPassword}
            onChange={(e) => setShowPassword(e.target.checked)}
            className="w-5 h-5 accent-[#006B6B]"
          />
          <span className="text-xs text-gray-500">Afficher les mots de passe</span>
        </label>

        <button
          type="submit"
          disabled={loading}
          className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors"
        >
          {loading ? 'Enregistrement…' : 'Enregistrer mon mot de passe'}
        </button>
      </form>

      <p className="text-center text-sm text-gray-500 mt-8">
        <Link to="/connexion" className="text-gray-700 font-medium hover:underline">
          Retour à la connexion
        </Link>
      </p>
    </div>
  )
}