import { useMemo } from 'react'
import { FolderOpenIcon, FolderTreeIcon, FoldersIcon } from 'lucide-react'
import { KpiStatGrid, type KpiStatCard } from '@/components/reui-kit/kpi-stat-grid'
import type { GroupCatalogRow } from '@/components/columns/groups-columns'

interface GroupKpiCardsProps {
  rows: GroupCatalogRow[]
  activeTab: string
  isLoading?: boolean
  onSelectTab: (tabId: string) => void
}

/** KPI strip — ReUI PRO [stats-12](https://reui.io/preview/base/stats-12) */
export function GroupKpiCards({
  rows,
  activeTab,
  isLoading,
  onSelectTab,
}: GroupKpiCardsProps) {
  const cards = useMemo<KpiStatCard[]>(() => {
    const withDomains = rows.filter((r) => r.domainCount > 0).length
    const empty = rows.filter((r) => r.domainCount === 0).length

    return [
      {
        id: 'all',
        label: 'Всего',
        value: rows.length,
        hint: 'Группы доменов',
        icon: <FolderTreeIcon aria-hidden />,
        iconClassName: 'text-info',
        onSelect: () => onSelectTab('all'),
        selected: activeTab === 'all',
      },
      {
        id: 'with_domains',
        label: 'С доменами',
        value: withDomains,
        hint: 'Непустые группы',
        icon: <FoldersIcon aria-hidden />,
        iconClassName: 'text-success',
        onSelect: () => onSelectTab('with_domains'),
        selected: activeTab === 'with_domains',
      },
      {
        id: 'empty',
        label: 'Пустые',
        value: empty,
        hint: 'Без доменов',
        icon: <FolderOpenIcon aria-hidden />,
        iconClassName: 'text-muted-foreground',
        variant: empty > 0 ? 'warning' : 'default',
        onSelect: () => onSelectTab('empty'),
        selected: activeTab === 'empty',
      },
    ]
  }, [rows, activeTab, onSelectTab])

  return (
    <KpiStatGrid
      cards={cards}
      isLoading={isLoading}
      skeletonCount={3}
      emptyIcon={<FolderTreeIcon className="text-muted-foreground size-5" aria-hidden />}
      emptyMessage="Нет групп — создайте первую"
    />
  )
}