"use client";

import { EyeIcon, EyeOffIcon } from "lucide-react";
import { useRouter } from "next/navigation";
import { useTransition } from "react";
import { toast } from "sonner";

import { setStructuredGuideVisibility } from "@/app/admin/actions";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";
import { cn } from "@/lib/utils";

export function GuideVisibilityControl({
  guideId,
  guideName,
  isPublic,
  className,
}: {
  guideId: string;
  guideName: string;
  isPublic: boolean;
  className?: string;
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();

  const updateVisibility = (nextPublic: boolean) => {
    startTransition(async () => {
      const result = await setStructuredGuideVisibility(guideId, nextPublic);
      if (result.status !== "saved") {
        toast.error(result.message ?? "เปลี่ยนสถานะ Guide ไม่สำเร็จ");
        return;
      }
      toast.success(nextPublic ? "เผยแพร่ Guide แล้ว" : "เปลี่ยน Guide เป็น Private แล้ว");
      router.refresh();
    });
  };

  return (
    <div className={cn("flex flex-wrap items-center gap-2", className)}>
      <Badge variant={isPublic ? "default" : "secondary"}>
        {isPublic ? "Public" : "Private"}
      </Badge>
      {isPublic ? (
        <AlertDialog>
          <AlertDialogTrigger
            render={
              <Button type="button" variant="outline" size="sm" disabled={pending} />
            }
          >
            {pending ? <Spinner data-icon="inline-start" /> : <EyeOffIcon data-icon="inline-start" />}
            Make private
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>เปลี่ยน {guideName} เป็น Private?</AlertDialogTitle>
              <AlertDialogDescription>
                Guide จะหายจากหน้าเว็บไซต์และลิงก์สาธารณะจะเปิดไม่ได้ แต่ยังแก้ไขได้ใน Admin
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>ยกเลิก</AlertDialogCancel>
              <AlertDialogAction
                variant="destructive"
                onClick={() => updateVisibility(false)}
              >
                ยืนยัน Private
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      ) : (
        <Button
          type="button"
          size="sm"
          disabled={pending}
          onClick={() => updateVisibility(true)}
        >
          {pending ? <Spinner data-icon="inline-start" /> : <EyeIcon data-icon="inline-start" />}
          Make Publish
        </Button>
      )}
    </div>
  );
}