"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { authClient } from "@/lib/auth-client";
import { slugify } from "@/lib/slugify";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function CreateOrgForm() {
  const router = useRouter();
  const [error, setError] = useState<string | null>(null);
  const [pending, setPending] = useState(false);

  async function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setPending(true);
    setError(null);
    const name = String(new FormData(e.currentTarget).get("name")).trim();
    const result = await authClient.organization.create({ name, slug: slugify(name) });
    if (result.error || !result.data) {
      setPending(false);
      return setError(result.error?.message ?? "Création impossible");
    }
    await authClient.organization.setActive({ organizationId: result.data.id });
    router.push("/dashboard");
    router.refresh();
  }

  return (
    <form onSubmit={onSubmit} className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="name">Nom de l'organisation</Label>
        <Input id="name" name="name" required minLength={2} />
      </div>
      {error ? <p className="text-destructive text-sm">{error}</p> : null}
      <Button type="submit" disabled={pending} className="w-full">
        Créer
      </Button>
    </form>
  );
}