"use client";

import { FolderTree, Keyboard, Package, ToggleRight } from "lucide-react";
import { useMemo } from "react";
import { useCatalogManager } from "./use-catalog-store";

export function StatsBar() {
	const { state } = useCatalogManager();

	const stats = useMemo(() => {
		const nodes = Array.from(state.nodes.values());
		const enabled = nodes.filter((n) => n.enabled === "1").length;
		const totalItems = nodes.reduce((sum, n) => sum + n.itemCount, 0);
		return {
			rootTabs: state.rootPages.length,
			totalPages: nodes.length,
			enabled,
			totalItems,
		};
	}, [state.nodes, state.rootPages]);

	return (
		<div className="flex items-center justify-between gap-4 px-4 py-1.5 border-t bg-muted/30 text-[11px] text-muted-foreground shrink-0">
			<div className="flex items-center gap-4">
				<span className="flex items-center gap-1">
					<FolderTree className="h-3 w-3" />
					{stats.rootTabs} root
				</span>
				<span>{stats.totalPages} pages</span>
				<span className="flex items-center gap-1">
					<ToggleRight className="h-3 w-3" />
					{stats.enabled} enabled
				</span>
				<span className="flex items-center gap-1">
					<Package className="h-3 w-3" />
					{stats.totalItems} items
				</span>
				{state.multiSelectedIds.size > 0 && (
					<span className="text-primary font-medium">
						{state.multiSelectedIds.size} selected
					</span>
				)}
			</div>
			<div className="flex items-center gap-1">
				<Keyboard className="h-3 w-3" />
				<span>
					<kbd className="rounded border bg-background px-1 font-mono text-[9px]">
						Ctrl+S
					</kbd>{" "}
					save
					<span className="mx-1">·</span>
					<kbd className="rounded border bg-background px-1 font-mono text-[9px]">
						/
					</kbd>{" "}
					search
					<span className="mx-1">·</span>
					<kbd className="rounded border bg-background px-1 font-mono text-[9px]">
						Ctrl+K
					</kbd>{" "}
					quick add
				</span>
			</div>
		</div>
	);
}