"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { toast } from "sonner";
import { Ban } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";

export function BlockButton({
  targetUsername,
  initialBlocked = false,
}: {
  targetUsername: string;
  initialBlocked?: boolean;
}) {
  const router = useRouter();
  const t = useTranslations("social");
  const tCommon = useTranslations("common");
  const [blocked, setBlocked] = useState(initialBlocked);
  const [loading, setLoading] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);

  async function toggle() {
    setLoading(true);
    try {
      const res = await fetch(`/api/v1/users/${targetUsername}/block`, {
        method: blocked ? "DELETE" : "POST",
      });
      if (!res.ok) {
        const err = await res.json() as { error?: string };
        toast.error(err.error ?? "Failed");
        return;
      }
      setBlocked(!blocked);
      toast.success(blocked ? "Unblocked" : "Blocked");
      router.refresh();
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      <Button
        variant="outline"
        size="sm"
        onClick={() => (blocked ? void toggle() : setConfirmOpen(true))}
        disabled={loading}
        className={blocked ? "" : "text-destructive hover:text-destructive"}
      >
        <Ban className="h-3.5 w-3.5" />
        {loading ? "…" : blocked ? "Unblock" : "Block"}
      </Button>
      <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>{t("blockConfirmTitle", { username: targetUsername })}</AlertDialogTitle>
            <AlertDialogDescription>{t("blockConfirmDescription")}</AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>{tCommon("cancel")}</AlertDialogCancel>
            <AlertDialogAction
              onClick={() => { setConfirmOpen(false); void toggle(); }}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {t("blockConfirmAction")}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  );
}