"use client";

import { useTransition } from "react";
import { useRouter } from "next/navigation";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent } from "@/components/ui/card";
import { changeMyPassword } from "@/actions/utilisateurs";
import { Loader2, KeyRound } from "lucide-react";

export function ChangePasswordForm() {
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    startTransition(async () => {
      const result = await changeMyPassword(formData);
      if (result?.error) toast.error(result.error);
      else {
        toast.success("Mot de passe modifié avec succès");
        router.push("/");
      }
    });
  }

  return (
    <form onSubmit={onSubmit}>
      <Card>
        <CardContent className="p-6 space-y-4 max-w-md">
          <div className="space-y-2">
            <Label htmlFor="oldPassword">Mot de passe actuel *</Label>
            <Input id="oldPassword" name="oldPassword" type="password" required />
          </div>
          <div className="space-y-2">
            <Label htmlFor="newPassword">Nouveau mot de passe (min. 6 caractères) *</Label>
            <Input
              id="newPassword"
              name="newPassword"
              type="password"
              required
              minLength={6}
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="confirmPassword">Confirmer le nouveau mot de passe *</Label>
            <Input id="confirmPassword" name="confirmPassword" type="password" required />
          </div>
          <div className="pt-2 border-t">
            <Button type="submit" variant="accent" disabled={pending}>
              {pending ? <Loader2 className="w-4 h-4 animate-spin" /> : <KeyRound className="w-4 h-4" />}
              Modifier mon mot de passe
            </Button>
          </div>
        </CardContent>
      </Card>
    </form>
  );
}