"use client";
import { useRouter, useSearchParams } from "next/navigation";
import { Suspense, useState } from "react";
import { ImmbotLogo, UqoLogo } from "@/components/logo";
import { Button, Card, Input, Label, Spinner } from "@/components/ui";

function ChangePasswordForm() {
  const router = useRouter();
  const forced = useSearchParams().get("force") === "1";
  const [current, setCurrent] = useState("");
  const [next, setNext] = useState("");
  const [confirm, setConfirm] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    if (next !== confirm) return setError("La confirmation ne correspond pas.");
    setLoading(true);
    try {
      const res = await fetch("/api/auth/change-password", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ currentPassword: current, newPassword: next }),
      });
      const data = await res.json();
      if (!res.ok) return setError(data.error ?? "Erreur.");
      router.push("/chat");
      router.refresh();
    } catch {
      setError("Impossible de joindre le serveur.");
    } finally {
      setLoading(false);
    }
  }

  return (
    <Card className="w-full max-w-sm p-7 animate-fade-up">
      <h1 className="text-lg font-bold text-fg">Changer le mot de passe</h1>
      {forced ? (
        <p className="text-sm mt-2 text-amber-700 dark:text-amber-400 bg-amber-500/10 rounded-lg px-3 py-2.5">
          <strong>Sécurité :</strong> le mot de passe initial doit être remplacé avant d'utiliser la
          plateforme. Choisissez un mot de passe fort et unique.
        </p>
      ) : (
        <p className="text-sm text-muted mt-1">Choisissez un nouveau mot de passe (10 caractères minimum).</p>
      )}
      <form onSubmit={submit} className="mt-6 space-y-4">
        <div>
          <Label htmlFor="current">Mot de passe actuel</Label>
          <Input id="current" type="password" value={current} onChange={(e) => setCurrent(e.target.value)} autoComplete="current-password" required autoFocus />
        </div>
        <div>
          <Label htmlFor="next">Nouveau mot de passe</Label>
          <Input id="next" type="password" value={next} onChange={(e) => setNext(e.target.value)} autoComplete="new-password" required minLength={10} />
        </div>
        <div>
          <Label htmlFor="confirm">Confirmer le nouveau mot de passe</Label>
          <Input id="confirm" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} autoComplete="new-password" required minLength={10} />
        </div>
        {error && <p className="text-sm text-red-600 dark:text-red-400 bg-red-500/10 rounded-lg px-3 py-2" role="alert">{error}</p>}
        <Button type="submit" className="w-full justify-center" disabled={loading}>
          {loading ? <Spinner /> : "Enregistrer et continuer"}
        </Button>
      </form>
    </Card>
  );
}

export default function ChangePasswordPage() {
  return (
    <div className="min-h-dvh bg-app flex flex-col items-center justify-center px-4">
      <div className="mb-8"><ImmbotLogo size={34} /></div>
      <Suspense>
        <ChangePasswordForm />
      </Suspense>
      <div className="mt-8"><UqoLogo height={28} className="opacity-80 dark:invert" /></div>
    </div>
  );
}