'use client';

import { useCallback, useState } from 'react';
import { useAction } from 'next-safe-action/hooks';
import { useRouter } from 'next/navigation';
import { toast } from '@kit/ui/sonner';
import { Button } from '@kit/ui/button';
import { Input } from '@kit/ui/input';
import { Label } from '@kit/ui/label';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@kit/ui/dialog';
import { Plus } from 'lucide-react';

import { createDepartment } from '@kit/member-management/actions/member-actions';

interface CreateDepartmentDialogProps {
  accountId: string;
}

export function CreateDepartmentDialog({ accountId }: CreateDepartmentDialogProps) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const { execute, isPending } = useAction(createDepartment, {
    onSuccess: ({ data }) => {
      if (data?.success) {
        toast.success('Abteilung erstellt');
        setOpen(false);
        setName('');
        setDescription('');
        router.refresh();
      }
    },
    onError: ({ error }) => {
      toast.error(error.serverError ?? 'Fehler beim Erstellen der Abteilung');
    },
  });

  const handleSubmit = useCallback(
    (e: React.FormEvent) => {
      e.preventDefault();
      if (!name.trim()) return;
      execute({ accountId, name: name.trim(), description: description.trim() || undefined });
    },
    [execute, accountId, name, description],
  );

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger render={<Button size="sm" />}>
        <Plus className="mr-1 h-4 w-4" />
        Neue Abteilung
      </DialogTrigger>
      <DialogContent>
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>Neue Abteilung</DialogTitle>
            <DialogDescription>
              Erstellen Sie eine neue Abteilung oder Sparte für Ihren Verein.
            </DialogDescription>
          </DialogHeader>
          <div className="mt-4 space-y-4">
            <div className="space-y-2">
              <Label htmlFor="dept-name">Name</Label>
              <Input
                id="dept-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="z. B. Jugendabteilung"
                required
                minLength={1}
                maxLength={128}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="dept-description">Beschreibung (optional)</Label>
              <Input
                id="dept-description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                placeholder="Kurze Beschreibung"
              />
            </div>
          </div>
          <DialogFooter className="mt-4">
            <Button type="submit" disabled={isPending || !name.trim()}>
              {isPending ? 'Wird erstellt…' : 'Erstellen'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}