"use client";

import { useState } from "react";
import { useTranslations } from "next-intl";
import { useRouter } from "next/navigation";
import { GitFork } from "lucide-react";
import { Button } from "@/components/ui/button";
import { toast } from "sonner";

export function ForkCollectionButton({ collectionId }: { collectionId: string }) {
  const t = useTranslations("collections");
  const tSocial = useTranslations("social");
  const [forking, setForking] = useState(false);
  const router = useRouter();

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

  return (
    <Button variant="outline" size="sm" onClick={() => { void handleFork(); }} disabled={forking} className="gap-2 shrink-0">
      <GitFork className="h-4 w-4" />
      {forking ? t("forking") : t("forkCollection")}
    </Button>
  );
}