"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { GitFork, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { toast } from "sonner";

export function ForkRecipeButton({ recipeId }: { recipeId: string }) {
  const t = useTranslations("recipe");
  const router = useRouter();
  const [forking, setForking] = useState(false);

  async function handleFork() {
    setForking(true);
    try {
      const res = await fetch(`/api/v1/recipes/${recipeId}/fork`, { method: "POST" });
      if (!res.ok) {
        const data = await res.json() as { error?: string };
        throw new Error(
          res.status === 403 ? t("forkLimitReached") : (data.error ?? t("forkFailed"))
        );
      }
      const data = await res.json() as { id: string };
      toast.success(t("forked"));
      router.push(`/recipes/${data.id}`);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : t("forkFailed"));
      setForking(false);
    }
  }

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger render={
          <Button variant="ghost" size="icon" onClick={() => { void handleFork(); }} disabled={forking} aria-label={t("forkTooltip")}>
            {forking ? <Loader2 className="h-4 w-4 animate-spin" /> : <GitFork className="h-4 w-4" />}
          </Button>
        } />
        <TooltipContent>{t("forkTooltip")}</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}