"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { createUser } from "../actions";

export default function NewUserForm({
  establishments,
  isSuperadmin,
}: {
  establishments: any[];
  isSuperadmin: boolean;
}) {
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const router = useRouter();

  async function handleSubmit(formData: FormData) {
    setLoading(true);
    setError(null);
    try {
      await createUser(formData);
    } catch (err: any) {
      setError(err.message || "Une erreur est survenue");
      setLoading(false);
    }
  }

  return (
    <Card>
      <CardContent className="pt-6">
        <form action={handleSubmit} className="space-y-4">
          {error && (
            <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
              {error}
            </div>
          )}
          <div>
            <label className="block text-sm font-medium mb-1">Email</label>
            <Input type="email" name="email" required />
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">Mot de passe</label>
            <Input type="password" name="password" minLength={8} required />
            <p className="text-xs text-muted-foreground mt-1">Minimum 8 caractères</p>
          </div>
          <div>
            <label className="block text-sm font-medium mb-1">Rôle</label>
            <Select name="role" required>
              <option value="">Choisir un rôle</option>
              <option value="admin">Admin</option>
              <option value="teacher">Teacher</option>
            </Select>
          </div>
          {isSuperadmin && (
            <div>
              <label className="block text-sm font-medium mb-1">Établissement</label>
              <Select name="establishmentId">
                <option value="">Aucun</option>
                {establishments.map((e) => (
                  <option key={e.id} value={e.id}>
                    {e.name}
                  </option>
                ))}
              </Select>
            </div>
          )}
          <div className="flex gap-2 pt-2">
            <Button type="submit" disabled={loading}>
              {loading ? "Création..." : "Créer"}
            </Button>
            <Button
              type="button"
              variant="outline"
              onClick={() => router.push("/dashboard/users")}
              disabled={loading}
            >
              Annuler
            </Button>
          </div>
        </form>
      </CardContent>
    </Card>
  );
}