"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { CheckCheck, Loader2 } from "lucide-react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { bulkAcceptPendingJobsAction } from "@/lib/appwrite/job-actions";

export function BulkAcceptButton({ count }: { count: number }) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [pending, startTransition] = useTransition();

  if (count === 0) return null;

  function onConfirm() {
    startTransition(async () => {
      const res = await bulkAcceptPendingJobsAction();
      if (res.ok) {
        toast.success(`${res.accepted ?? 0} iş işleme alındı.`);
        setOpen(false);
        router.refresh();
      } else {
        toast.error(res.error ?? "İşlem başarısız.");
      }
    });
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <Button size="sm" onClick={() => setOpen(true)}>
        <CheckCheck className="size-4" />
        Bekleyen {count} işi al
      </Button>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{count} iş işleme alınsın mı?</DialogTitle>
          <DialogDescription>
            Tüm bekleyen işler aynı anda işleme alınır; her birinde alt yapı
            üretimine başlanmış sayılır. Klinikler ayrı ayrı bilgilendirilir.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button type="button" variant="outline">
              Vazgeç
            </Button>
          </DialogClose>
          <Button onClick={onConfirm} disabled={pending}>
            {pending ? <Loader2 className="size-4 animate-spin" /> : <CheckCheck className="size-4" />}
            Hepsini al
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}