kita-planer/src/app/dashboard/notdienst/plan/_components/settings-modal.tsx

"use client";

import { useState, useTransition, type FormEvent } from "react";
import { SlidersHorizontal } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { updateKitaNotdienstSettingsAction } from "../actions";

interface SettingsModalProps {
  initialMinPerChild: number;
  initialReminderDays: number;
}

export function SettingsModal({
  initialMinPerChild,
  initialReminderDays,
}: SettingsModalProps) {
  const [open, setOpen] = useState(false);
  const [minPerChild, setMinPerChild] = useState(initialMinPerChild);
  const [reminderDays, setReminderDays] = useState(initialReminderDays);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();

    if (minPerChild < 0 || reminderDays < 0) {
      toast.error("Werte dürfen nicht negativ sein.");
      return;
    }

    startTransition(async () => {
      const res = await updateKitaNotdienstSettingsAction(
        minPerChild,
        reminderDays
      );
      if (res.error) {
        toast.error(res.error);
      } else {
        toast.success("Regeln erfolgreich gespeichert!");
        setOpen(false);
      }
    });
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="ghost" size="sm">
          <SlidersHorizontal className="h-4 w-4 [stroke-width:1.7]" />
          Einstellungen
        </Button>
      </DialogTrigger>
      <DialogContent>
        <form onSubmit={handleSubmit}>
          <DialogHeader>
            <DialogTitle>Notdienst-Einstellungen</DialogTitle>
            <DialogDescription>
              Passe die standardmäßigen Regeln für die Notdienst-Verteilung in deiner Kita an.
            </DialogDescription>
          </DialogHeader>

          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="minPerChild">
                Mindesteinteilungen pro Kind/Monat
              </Label>
              <Input
                id="minPerChild"
                name="minPerChild"
                type="number"
                min="0"
                required
                value={minPerChild}
                onChange={(e) => setMinPerChild(parseInt(e.target.value, 10))}
              />
              <p className="text-xs text-[var(--ink-muted)]">
                Bestimmt das Richtmaß der automatischen Verteilung für Kinder im jeweiligen Monat.
              </p>
            </div>

            <div className="grid gap-2">
              <Label htmlFor="reminderDays">
                Erinnerungsfrist (Tage vor Monatsende)
              </Label>
              <Input
                id="reminderDays"
                name="reminderDays"
                type="number"
                min="0"
                required
                value={reminderDays}
                onChange={(e) => setReminderDays(parseInt(e.target.value, 10))}
              />
              <p className="text-xs text-[var(--ink-muted)]">
                Frist, nach der Eltern automatisch per Mail an offene Verfügbarkeiten erinnert werden.
              </p>
            </div>
          </div>

          <DialogFooter>
            <Button
              type="button"
              variant="ghost"
              onClick={() => {
                setMinPerChild(initialMinPerChild);
                setReminderDays(initialReminderDays);
                setOpen(false);
              }}
            >
              Abbrechen
            </Button>
            <Button type="submit" disabled={isPending}>
              {isPending ? "Speichern..." : "Regeln speichern"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}