MikrotikManager/components/data-grids/gre-pools-data-grid.tsx

"use client"

import { dataGridFeatures, type DataGridFeatures } from "@/components/reui/data-grid"

import { useMemo } from "react"
import {
  type ColumnDef,
  useTable,
} from "@tanstack/react-table"
import type { GrePool } from "@/lib/data"
import { cn } from "@/lib/utils"
import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
import {
  DATA_GRID_CELL_PAD,
  DATA_GRID_CELL_PAD_FIRST,
} from "@/components/data-grids/shared/data-grid-layout"
import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
import { EmptyState } from "@/components/empty-state"
import { LayersIcon } from "lucide-react"

interface GrePoolsDataGridProps {
  pools: GrePool[]
}

function GrePoolsDataGrid({ pools }: GrePoolsDataGridProps) {
  const columns = useMemo<ColumnDef<DataGridFeatures, GrePool>[]>(
    () => [
      {
        id: "name",
        accessorKey: "name",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Имя пула" className="ml-1" />
        ),
        cell: ({ row }) => (
          <span className="font-mono text-[13px] font-medium">{row.original.name}</span>
        ),
        meta: {
          headerTitle: "Имя пула",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "cidr",
        accessorKey: "cidr",
        header: ({ column }) => <DataGridSortHeader column={column} title="Диапазон CIDR" />,
        cell: ({ row }) => <span className="font-mono text-xs">{row.original.cidr}</span>,
        meta: {
          headerTitle: "Диапазон CIDR",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "allocated",
        accessorKey: "allocated",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Назначено /30" className="ml-auto" />
        ),
        cell: ({ row }) => (
          <span className="tabular-nums text-right block">{row.original.allocated}</span>
        ),
        meta: {
          headerTitle: "Назначено /30",
          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
        },
      },
      {
        id: "available",
        header: () => (
          <span className="text-xs font-medium text-muted-foreground block text-right">
            Доступно /30
          </span>
        ),
        enableSorting: false,
        cell: ({ row }) => {
          const p = row.original
          return (
            <span className="tabular-nums text-muted-foreground text-right block">
              {p.total - p.allocated}
            </span>
          )
        },
        meta: {
          headerClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-right"),
        },
      },
      {
        id: "usage",
        header: () => <span className="text-xs font-medium text-muted-foreground">Использование</span>,
        enableSorting: false,
        cell: ({ row }) => {
          const pool = row.original
          const pct = pool.total > 0 ? Math.round((pool.allocated / pool.total) * 100) : 0
          return (
            <div className="flex items-center gap-2 min-w-[140px]">
              <div className="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
                <div
                  className={cn("h-full rounded-full", pct > 80 ? "bg-amber-500" : "bg-emerald-500")}
                  style={{ width: `${pct}%` }}
                />
              </div>
              <span className="text-xs text-muted-foreground tabular-nums w-8 text-right">{pct}%</span>
            </div>
          )
        },
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "comment",
        accessorKey: "comment",
        header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
        cell: ({ row }) => (
          <span className="text-muted-foreground text-xs">{row.original.comment}</span>
        ),
        meta: {
          headerTitle: "Назначение",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
    ],
    [],
  )

  const table = useTable({
    features: dataGridFeatures,
    manualPagination: true,
    data: pools,
    columns,
    getRowId: (row) => row.id,
  })

  if (pools.length === 0) {
    return (
      <EmptyState
        icon={<LayersIcon className="size-4" />}
        title="Нет IP-пулов"
        className="border-0 py-16"
      />
    )
  }

  return (
    <DataGridShell
      table={table}
      recordCount={pools.length}
      tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row" }}
    />
  )
}

export { GrePoolsDataGrid, type GrePoolsDataGridProps }