EvoBGP/apps/web/src/components/skeletons.tsx

import { Skeleton } from '@evobgp/ui/components/skeleton'

import { KpiStatGrid, panelCardInsetClassName } from '@/components/reui-kit'
import {
  chartPanelGridClassName,
  dashboardMainSidebarClassName,
} from '@/lib/ui-surface'

export function KpiStatGridSkeleton({ count = 4 }: { count?: number }) {
  return (
    <KpiStatGrid
      items={[]}
      isLoading
      skeletonCount={count}
      aria-label="Загрузка показателей"
    />
  )
}

/** Matches dashboard layout: KPI row, charts, main+sidebar, bottom grids. */
export function AnalyticsDashboardSkeleton() {
  return (
    <div className="@container flex flex-col gap-4">
      <KpiStatGridSkeleton count={6} />

      <div className={chartPanelGridClassName}>
        <Skeleton className="h-72 w-full rounded-xl" />
        <Skeleton className="h-72 w-full rounded-xl" />
      </div>

      <div className={dashboardMainSidebarClassName}>
        <Skeleton className="h-96 w-full min-w-0 rounded-xl" />
        <Skeleton className="h-96 w-full min-w-0 rounded-xl" />
      </div>

      <div className={chartPanelGridClassName}>
        <Skeleton className="h-64 w-full rounded-xl" />
        <Skeleton className="h-64 w-full rounded-xl" />
      </div>
    </div>
  )
}

export function KpiSparklineSkeleton({ count = 4 }: { count?: number }) {
  return <KpiStatGridSkeleton count={count} />
}

export function TableSkeleton({ rows = 6, cols = 4 }: { rows?: number; cols?: number }) {
  return (
    <div className="overflow-hidden rounded-xl ring-1 ring-foreground/10">
      <div className="flex flex-col">
        <div className={`flex gap-2 border-b ${panelCardInsetClassName}`}>
          {Array.from({ length: cols }).map((_, i) => (
            <Skeleton className="h-4 flex-1" key={`h-${i}`} />
          ))}
        </div>
        {Array.from({ length: rows }).map((_, r) => (
          <div className={`flex gap-2 border-b ${panelCardInsetClassName}`} key={`r-${r}`}>
            {Array.from({ length: cols }).map((_, c) => (
              <Skeleton className="h-4 flex-1" key={`c-${r}-${c}`} />
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}