"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { signIn } from "next-auth/react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Loader2 } from "lucide-react";

export function LoginForm() {
  const router = useRouter();
  const [loading, setLoading] = React.useState(false);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setLoading(true);

    const formData = new FormData(e.currentTarget);
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;

    try {
      const result = await signIn("credentials", {
        email,
        password,
        redirect: false,
      });

      if (result?.error) {
        toast.error("Identifiants invalides. Veuillez réessayer.");
        setLoading(false);
        return;
      }

      toast.success("Connexion réussie");
      router.push("/");
      router.refresh();
    } catch {
      toast.error("Une erreur s'est produite. Veuillez réessayer.");
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="email">Adresse email</Label>
        <Input
          id="email"
          name="email"
          type="email"
          required
          autoComplete="email"
          placeholder="admin@residence-marrakech.ma"
          disabled={loading}
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="password">Mot de passe</Label>
        <Input
          id="password"
          name="password"
          type="password"
          required
          autoComplete="current-password"
          placeholder="••••••••"
          disabled={loading}
        />
      </div>

      <Button type="submit" variant="accent" className="w-full" disabled={loading}>
        {loading ? (
          <>
            <Loader2 className="w-4 h-4 animate-spin" />
            Connexion en cours…
          </>
        ) : (
          "Se connecter"
        )}
      </Button>

      <div className="text-xs text-muted-foreground bg-secondary/60 rounded-md p-3 mt-4">
        <p className="font-semibold mb-1">Comptes de démonstration :</p>
        <p>• admin@residence-marrakech.ma / Admin123!</p>
        <p>• manager@residence-marrakech.ma / Manager123!</p>
        <p>• reception@residence-marrakech.ma / Reception123!</p>
      </div>
    </form>
  );
}