'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>
  )
}