"use client";

import { useState, 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 {
  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from "@/components/ui/select";
import { createUser } from "@/actions/utilisateurs";
import { ROLE_LABELS } from "@/lib/utils";
import { Loader2, Save } from "lucide-react";

export function UserCreateForm() {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [role, setRole] = useState("RECEPTIONIST");

  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    formData.set("role", role);
    startTransition(async () => {
      const result = await createUser(formData);
      if (result?.error) toast.error(result.error);
      else toast.success("Utilisateur créé");
    });
  }

  return (
    <form onSubmit={onSubmit}>
      <Card>
        <CardContent className="p-6 space-y-4 max-w-2xl">
          <div className="space-y-2">
            <Label htmlFor="nom">Nom complet *</Label>
            <Input id="nom" name="nom" required placeholder="Karim Benali" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="email">Email *</Label>
            <Input id="email" name="email" type="email" required placeholder="karim@hotel.com" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="password">Mot de passe (min. 6 caractères) *</Label>
            <Input id="password" name="password" type="password" required minLength={6} />
          </div>
          <div className="space-y-2">
            <Label>Rôle *</Label>
            <Select value={role} onValueChange={setRole}>
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {Object.entries(ROLE_LABELS).map(([key, label]) => (
                  <SelectItem key={key} value={key}>
                    {label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex gap-2 justify-end pt-4 border-t">
            <Button type="button" variant="outline" onClick={() => router.push("/utilisateurs")}>
              Annuler
            </Button>
            <Button type="submit" variant="accent" disabled={pending}>
              {pending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
              Créer
            </Button>
          </div>
        </CardContent>
      </Card>
    </form>
  );
}