MikrotikManager/components/data-grids/ip-ranges-data-grid.tsx

"use client"

import { useMemo } from "react"
import {
  type ColumnDef,
  getCoreRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"
import type { IpRange } from "@/lib/data"
import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
import {
  DATA_GRID_CELL_PAD,
  DATA_GRID_CELL_PAD_FIRST,
  DATA_GRID_CELL_PAD_LAST,
} 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 { FilterIcon, NetworkIcon } from "lucide-react"

interface IpRangesDataGridProps {
  ipRanges: IpRange[]
  isLoading?: boolean
  pagination?: boolean
}

function IpRangesDataGrid({ ipRanges, isLoading, pagination = false }: IpRangesDataGridProps) {
  const columns = useMemo<ColumnDef<IpRange>[]>(
    () => [
      {
        id: "cidr",
        accessorKey: "cidr",
        header: ({ column }) => <DataGridSortHeader column={column} title="CIDR" className="ml-1" />,
        cell: ({ row }) => <span className="font-mono font-medium">{row.original.cidr}</span>,
        meta: {
          headerTitle: "CIDR",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "asn",
        accessorKey: "asn",
        header: ({ column }) => <DataGridSortHeader column={column} title="ASN" />,
        cell: ({ row }) => (
          <span className="font-mono text-xs text-muted-foreground">{row.original.asn}</span>
        ),
        meta: {
          headerTitle: "ASN",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "country",
        accessorKey: "country",
        header: ({ column }) => <DataGridSortHeader column={column} title="Страна" />,
        cell: ({ row }) => (
          <span className="text-xs border border-border rounded px-2 py-0.5">{row.original.country}</span>
        ),
        meta: {
          headerTitle: "Страна",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "purpose",
        accessorKey: "purpose",
        header: ({ column }) => <DataGridSortHeader column={column} title="Назначение" />,
        cell: ({ row }) => (
          <span className="text-xs border border-border rounded px-2 py-0.5">{row.original.purpose}</span>
        ),
        meta: {
          headerTitle: "Назначение",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "filter",
        accessorKey: "filter",
        header: ({ column }) => <DataGridSortHeader column={column} title="Фильтр" />,
        cell: ({ row }) => (
          <span className="inline-flex items-center gap-1 text-xs bg-muted rounded px-2 py-0.5">
            <FilterIcon className="size-3 text-muted-foreground" />
            {row.original.filter}
          </span>
        ),
        meta: {
          headerTitle: "Фильтр",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "updated",
        accessorKey: "updated",
        header: ({ column }) => <DataGridSortHeader column={column} title="Обновлён" />,
        cell: ({ row }) => <span className="text-xs text-muted-foreground">{row.original.updated}</span>,
        meta: {
          headerTitle: "Обновлён",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "enabled",
        accessorKey: "enabled",
        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
        cell: ({ row }) => (
          <span
            className={`text-xs font-medium ${row.original.enabled ? "text-emerald-600" : "text-muted-foreground"}`}
          >
            {row.original.enabled ? "Активен" : "Отключён"}
          </span>
        ),
        meta: {
          headerTitle: "Статус",
          headerClassName: DATA_GRID_CELL_PAD_LAST,
          cellClassName: DATA_GRID_CELL_PAD_LAST,
        },
      },
    ],
    [],
  )

  const table = useReactTable({
    data: ipRanges,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    ...(pagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
    getRowId: (row) => row.id,
  })

  return (
    <DataGridShell
      table={table}
      recordCount={ipRanges.length}
      isLoading={isLoading}
      loadingMode="skeleton"
      pagination={pagination}
      emptyMessage={
        <EmptyState
          icon={<NetworkIcon className="size-4" />}
          title="Нет IP-диапазонов"
          description="Добавьте CIDR-блоки или импортируйте каталог"
          className="border-0 py-12"
        />
      }
    />
  )
}

export { IpRangesDataGrid, type IpRangesDataGridProps }