"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 { Textarea } from "@/components/ui/textarea";
import { Card, CardContent } from "@/components/ui/card";
import { createClient, updateClient } from "@/actions/clients";
import { Loader2, Save } from "lucide-react";

interface ClientFormProps {
  client?: {
    id: string;
    nom_complet: string;
    telephone: string;
    email: string;
    adresse: string;
    pays: string;
    numero_identite: string;
    notes: string;
  };
}

export function ClientForm({ client }: ClientFormProps) {
  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 = client
        ? await updateClient(client.id, formData)
        : await createClient(formData);
      if (result?.error) {
        toast.error(result.error);
      } else {
        toast.success(client ? "Client modifié" : "Client créé");
      }
    });
  }

  return (
    <form onSubmit={onSubmit}>
      <Card>
        <CardContent className="p-6 space-y-4">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="nom_complet">Nom complet *</Label>
              <Input
                id="nom_complet"
                name="nom_complet"
                required
                defaultValue={client?.nom_complet}
                placeholder="Mohammed Alami"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="telephone">Téléphone</Label>
              <Input
                id="telephone"
                name="telephone"
                type="tel"
                defaultValue={client?.telephone}
                placeholder="+212 6 12 34 56 78"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                name="email"
                type="email"
                defaultValue={client?.email}
                placeholder="contact@example.com"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="pays">Pays</Label>
              <Input
                id="pays"
                name="pays"
                defaultValue={client?.pays || "Maroc"}
                placeholder="Maroc"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="numero_identite">N° pièce d&apos;identité / passeport</Label>
              <Input
                id="numero_identite"
                name="numero_identite"
                defaultValue={client?.numero_identite}
                placeholder="AB123456"
              />
            </div>
            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="adresse">Adresse</Label>
              <Input
                id="adresse"
                name="adresse"
                defaultValue={client?.adresse}
                placeholder="Rue de la liberté, Casablanca"
              />
            </div>
            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="notes">Notes</Label>
              <Textarea
                id="notes"
                name="notes"
                defaultValue={client?.notes}
                placeholder="Préférences, allergies, demandes particulières..."
                rows={3}
              />
            </div>
          </div>
          <div className="flex gap-2 justify-end pt-2 border-t">
            <Button
              type="button"
              variant="outline"
              onClick={() => router.push("/clients")}
              disabled={pending}
            >
              Annuler
            </Button>
            <Button type="submit" variant="accent" disabled={pending}>
              {pending ? (
                <Loader2 className="w-4 h-4 animate-spin" />
              ) : (
                <Save className="w-4 h-4" />
              )}
              {client ? "Enregistrer" : "Créer le client"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </form>
  );
}