"use client";

import { useState } from "react";
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 [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 ?? "Fork failed");
      }
      const { id } = await res.json() as { id: string };
      toast.success("Collection forked to your library");
      router.push(`/collections/${id}`);
    } catch (err) {
      toast.error(err instanceof Error ? err.message : "Fork failed");
      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 ? "Forking…" : "Fork collection"}
    </Button>
  );
}