"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>
  );
}