"use client";

import { useState } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { ArrowRight, Check, Lock } from "@/components/ui/icons";
import { Button } from "@/components/ui/button";
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { authClient } from "@/lib/auth/client";

export function ResetForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const token = searchParams.get("token");

  const [password, setPassword] = useState("");
  const [confirm, setConfirm] = useState("");
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);
  const [error, setError] = useState<string | null>(null);

  if (!token) {
    return (
      <div className="mt-8 text-center">
        <p className="text-sm text-text leading-relaxed">
          Lien invalide ou expiré.
        </p>
        <Link
          href="/mot-de-passe-oublie"
          className="mt-4 inline-block text-sm text-accent hover:text-accent-hi transition-colors"
        >
          Demander un nouveau lien
        </Link>
      </div>
    );
  }

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setError(null);

    if (password.length < 12) {
      setError("Mot de passe trop court (12 caractères minimum).");
      return;
    }
    if (password !== confirm) {
      setError("Les deux mots de passe ne correspondent pas.");
      return;
    }

    setLoading(true);
    const result = await authClient.resetPassword({
      newPassword: password,
      token: token!,
    });
    setLoading(false);

    if (result.error) {
      setError(messageFromError(result.error));
      return;
    }

    setDone(true);
    // Redirige vers /connexion apres 1.5s pour laisser le temps de lire le message.
    setTimeout(() => {
      router.push("/connexion");
      router.refresh();
    }, 1500);
  }

  if (done) {
    return (
      <div className="mt-8 text-center">
        <div className="mx-auto inline-flex size-12 items-center justify-center rounded-full bg-success-soft text-success border border-success/20">
          <Check className="size-6" />
        </div>
        <p className="mt-5 text-sm text-text leading-relaxed">
          Mot de passe modifié. Vous allez être redirigé vers la connexion.
        </p>
      </div>
    );
  }

  return (
    <form className="mt-8 space-y-5" onSubmit={handleSubmit}>
      <Field id="password" label="Nouveau mot de passe" required hint="12 caractères minimum.">
        <div className="relative">
          <Lock
            aria-hidden
            className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-faint pointer-events-none"
          />
          <Input
            type="password"
            name="password"
            autoComplete="new-password"
            minLength={12}
            required
            className="pl-9"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            disabled={loading}
          />
        </div>
      </Field>

      <Field id="confirm" label="Confirmer le mot de passe" required>
        <div className="relative">
          <Lock
            aria-hidden
            className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-text-faint pointer-events-none"
          />
          <Input
            type="password"
            name="confirm"
            autoComplete="new-password"
            minLength={12}
            required
            className="pl-9"
            value={confirm}
            onChange={(e) => setConfirm(e.target.value)}
            disabled={loading}
          />
        </div>
      </Field>

      {error ? (
        <p
          role="alert"
          className="rounded-md border border-[color:var(--color-danger)]/30 bg-[color:var(--color-danger)]/10 px-3 py-2 text-sm text-[color:var(--color-danger)]"
        >
          {error}
        </p>
      ) : null}

      <Button type="submit" variant="primary" className="w-full mt-2" size="lg" loading={loading}>
        Valider le nouveau mot de passe
        <ArrowRight className="size-4" />
      </Button>
    </form>
  );
}

function messageFromError(error: { code?: string; message?: string }): string {
  switch (error.code) {
    case "INVALID_TOKEN":
    case "TOKEN_EXPIRED":
      return "Lien invalide ou expire. Demandez un nouveau lien.";
    case "PASSWORD_TOO_SHORT":
      return "Mot de passe trop court (12 caracteres minimum).";
    default:
      return error.message ?? "Impossible de mettre a jour le mot de passe pour le moment.";
  }
}