"use client";

import { FolderTree, HardHat, List, Package } from "lucide-react";
import { useRouter, useSearchParams } from "next/navigation";
import { useTranslations } from "next-intl";
import { Button } from "@/components/ui/button";
import { requestCatalogNavigation } from "@/features/catalog/client/use-catalog-navigation";
import { cn } from "@/lib/utils";

interface CatalogViewToggleProps {
	currentView: string;
	catalogType?: string;
}

export function CatalogViewToggle({
	currentView,
	catalogType = "normal",
}: CatalogViewToggleProps) {
	const router = useRouter();
	const t = useTranslations("pages.admin.catalog.workspace");
	const searchParams = useSearchParams();

	function setView(view: string) {
		if (view === currentView || !requestCatalogNavigation()) return;
		const params = new URLSearchParams(searchParams.toString());
		if (view === "tree") {
			params.delete("view");
		} else {
			params.set("view", view);
		}
		router.push(`?${params.toString()}`);
	}

	function setCatalog(type: string) {
		if (type === catalogType || !requestCatalogNavigation()) return;
		const params = new URLSearchParams(searchParams.toString());
		if (type === "normal") {
			params.delete("catalog");
		} else {
			params.set("catalog", type);
		}
		params.delete("view");
		params.delete("root");
		params.delete("category");
		router.push(`?${params.toString()}`);
	}

	return (
		<div className="flex flex-wrap items-center gap-2">
			{/* Catalog type selector */}
			<div className="flex items-center rounded-md border bg-card">
				<Button
					variant="ghost"
					size="sm"
					className={cn(
						"h-8 rounded-r-none",
						catalogType === "normal" && "bg-accent",
					)}
					onClick={() => setCatalog("normal")}
				>
					<Package className="mr-1.5 h-4 w-4" />
					{t("normal")}
				</Button>
				<Button
					variant="ghost"
					size="sm"
					className={cn(
						"h-8 rounded-l-none",
						catalogType === "bc" && "bg-accent",
					)}
					onClick={() => setCatalog("bc")}
				>
					<HardHat className="mr-1.5 h-4 w-4" />
					Builder Club
				</Button>
			</div>

			{/* View mode selector */}
			<div className="flex items-center rounded-md border bg-card">
				<Button
					variant="ghost"
					size="sm"
					className={cn(
						"h-8 rounded-r-none",
						currentView === "tree" && "bg-accent",
					)}
					onClick={() => setView("tree")}
				>
					<FolderTree className="mr-1.5 h-4 w-4" />
					{t("tree")}
				</Button>
				<Button
					variant="ghost"
					size="sm"
					className={cn(
						"h-8 rounded-l-none",
						currentView === "table" && "bg-accent",
					)}
					onClick={() => setView("table")}
				>
					<List className="mr-1.5 h-4 w-4" />
					{t("table")}
				</Button>
			</div>
		</div>
	);
}