"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import Icon from "@/components/Icon";
import { confirmPasswordReset } from "@/app/(public)/_actions/password-reset";

export default function SetPasswordForm({
  userId,
  token,
  email,
}: {
  userId: string;
  token: string;
  email: string;
}) {
  const router = useRouter();
  const [pwd, setPwd] = useState("");
  const [pwd2, setPwd2] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [done, setDone] = useState(false);
  const [isPending, startTransition] = useTransition();

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setError(null);
    if (pwd.length < 10) {
      setError("Le mot de passe doit faire au moins 10 caractères.");
      return;
    }
    if (pwd !== pwd2) {
      setError("Les deux mots de passe ne correspondent pas.");
      return;
    }
    startTransition(async () => {
      const res = await confirmPasswordReset({
        userId,
        token,
        newPassword: pwd,
      });
      if (!res.ok) {
        setError(res.error);
        return;
      }
      setDone(true);
      // Petit délai pour laisser voir la confirmation, puis redirige.
      setTimeout(() => router.push("/login"), 2200);
    });
  }

  if (done) {
    return (
      <div className="text-center space-y-6 py-4">
        <Icon
          name="check_circle"
          className="!text-5xl text-secondary"
          filled
        />
        <p className="font-serif text-xl text-primary">
          Mot de passe défini
        </p>
        <p className="text-sm text-on-surface-variant">
          Vous allez être redirigé vers la page de connexion…
        </p>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} className="space-y-6" noValidate>
      {email && (
        <p className="text-sm text-on-surface-variant">
          Pour le compte{" "}
          <span className="text-primary font-medium">{email}</span>.
        </p>
      )}

      <div className="space-y-2">
        <label
          htmlFor="pwd"
          className="eyebrow !text-on-surface-variant block"
        >
          Nouveau mot de passe (10 caractères min)
        </label>
        <input
          id="pwd"
          type="password"
          required
          minLength={10}
          autoComplete="new-password"
          value={pwd}
          onChange={(e) => setPwd(e.target.value)}
          className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
        />
      </div>

      <div className="space-y-2">
        <label
          htmlFor="pwd2"
          className="eyebrow !text-on-surface-variant block"
        >
          Confirmer le mot de passe
        </label>
        <input
          id="pwd2"
          type="password"
          required
          minLength={10}
          autoComplete="new-password"
          value={pwd2}
          onChange={(e) => setPwd2(e.target.value)}
          className="w-full bg-transparent border-0 border-b border-outline-variant focus:border-secondary py-3 outline-none body-md transition-colors"
        />
      </div>

      {error && <p className="text-error body-md">{error}</p>}

      <button
        type="submit"
        disabled={isPending}
        className="btn btn-primary w-full disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isPending ? "Validation…" : "Définir le mot de passe"}
      </button>
    </form>
  );
}