"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { AlertTriangle, Trash2 } 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 { deleteKita } from "../actions";

type DeleteCounts = {
  users: number;
  families: number;
  activeChildren: number;
  termine: number;
  absences: number;
  announcements: number;
};

export function KitaDeleteDialog({
  kitaId,
  kitaName,
  counts,
}: {
  kitaId: string;
  kitaName: string;
  counts: DeleteCounts;
}) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [confirmationName, setConfirmationName] = useState("");
  const [isPending, startTransition] = useTransition();

  const canSubmit = confirmationName === kitaName && !isPending;

  function onSubmit() {
    startTransition(async () => {
      const result = await deleteKita({ kitaId, confirmationName });
      if (!result.ok) {
        toast.error(result.error ?? "Kita konnte nicht gelöscht werden.");
        return;
      }

      toast.success("Kita wurde gelöscht.");
      setOpen(false);
      router.push(result.redirectTo ?? "/admin");
      router.refresh();
    });
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="destructive" size="sm">
          <Trash2 className="h-4 w-4" />
          Kita löschen
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Kita endgültig löschen</DialogTitle>
          <DialogDescription>
            Diese Aktion löscht alle mandantengebundenen Daten dieser Kita
            unwiderruflich. Das AuditLog bleibt erhalten.
          </DialogDescription>
        </DialogHeader>

        <div className="rounded-md border border-destructive/25 bg-destructive/5 p-4">
          <div className="mb-3 flex items-center gap-2 text-sm font-medium text-destructive">
            <AlertTriangle className="h-4 w-4" />
            Betroffene Daten
          </div>
          <div className="grid grid-cols-2 gap-2 text-sm">
            <span>Benutzer: {counts.users}</span>
            <span>Familien: {counts.families}</span>
            <span>Aktive Kinder: {counts.activeChildren}</span>
            <span>Termine: {counts.termine}</span>
            <span>Abwesenheiten: {counts.absences}</span>
            <span>News: {counts.announcements}</span>
          </div>
        </div>

        <div className="space-y-2">
          <Label htmlFor={`confirm-kita-${kitaId}`}>
            Zur Bestätigung Kita-Namen eingeben
          </Label>
          <Input
            id={`confirm-kita-${kitaId}`}
            value={confirmationName}
            onChange={(event) => setConfirmationName(event.target.value)}
            placeholder={kitaName}
            autoComplete="off"
          />
        </div>

        <DialogFooter>
          <Button
            type="button"
            variant="outline"
            onClick={() => setOpen(false)}
            disabled={isPending}
          >
            Abbrechen
          </Button>
          <Button
            type="button"
            variant="destructive"
            onClick={onSubmit}
            disabled={!canSubmit}
          >
            {isPending ? "Lösche..." : "Endgültig löschen"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

