MikrotikManager/components/data-grids/ospf-routes-data-grid.tsx

"use client"

import { useMemo } from "react"
import {
  type ColumnDef,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"
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,
  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 { RouteIcon } from "lucide-react"

export interface OspfRouteRow {
  id: string
  destination: string
  type: "O" | "O IA" | "O E1" | "O E2"
  cost: number
  nextHop: string
  via: string
  serverId: string
  serverLabel: string
  area: string
}

function routeTypeClass(type: OspfRouteRow["type"]) {
  if (type === "O") return "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/25"
  if (type === "O IA") return "bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/25"
  if (type === "O E1") return "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/25"
  return "bg-orange-500/10 text-orange-600 dark:text-orange-400 border-orange-500/25"
}

interface OspfRoutesDataGridProps {
  routes: OspfRouteRow[]
}

function OspfRoutesDataGrid({ routes }: OspfRoutesDataGridProps) {
  const columns = useMemo<ColumnDef<OspfRouteRow>[]>(
    () => [
      {
        id: "destination",
        accessorKey: "destination",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Назначение" className="ml-1" />
        ),
        cell: ({ row }) => <span className="font-mono">{row.original.destination}</span>,
        meta: {
          headerTitle: "Назначение",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "type",
        accessorKey: "type",
        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
        cell: ({ row }) => (
          <span
            className={cn(
              "inline-flex items-center rounded border px-1.5 py-0.5 text-[11px] font-medium",
              routeTypeClass(row.original.type),
            )}
          >
            {row.original.type}
          </span>
        ),
        meta: { headerTitle: "Тип", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "cost",
        accessorKey: "cost",
        header: ({ column }) => <DataGridSortHeader column={column} title="Cost" />,
        cell: ({ row }) => (
          <span className="font-mono tabular-nums text-center block">{row.original.cost}</span>
        ),
        meta: {
          headerTitle: "Cost",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
        },
      },
      {
        id: "nextHop",
        accessorKey: "nextHop",
        header: ({ column }) => <DataGridSortHeader column={column} title="Следующий хоп" />,
        cell: ({ row }) => (
          <span className="font-mono text-muted-foreground">{row.original.nextHop}</span>
        ),
        meta: {
          headerTitle: "Следующий хоп",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "via",
        accessorKey: "via",
        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
        cell: ({ row }) => (
          <span className="font-mono text-muted-foreground">{row.original.via}</span>
        ),
        meta: {
          headerTitle: "Интерфейс",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "serverLabel",
        accessorKey: "serverLabel",
        header: ({ column }) => <DataGridSortHeader column={column} title="Роутер" />,
        cell: ({ row }) => <span className="font-mono">{row.original.serverLabel}</span>,
        meta: {
          headerTitle: "Роутер",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "area",
        accessorKey: "area",
        header: ({ column }) => <DataGridSortHeader column={column} title="Область" />,
        cell: ({ row }) => (
          <span className="font-mono text-muted-foreground">{row.original.area}</span>
        ),
        meta: {
          headerTitle: "Область",
          headerClassName: DATA_GRID_CELL_PAD_LAST,
          cellClassName: DATA_GRID_CELL_PAD_LAST,
        },
      },
    ],
    [],
  )

  const table = useReactTable({
    data: routes,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getRowId: (row) => row.id,
  })

  if (routes.length === 0) {
    return (
      <EmptyState
        icon={<RouteIcon className="size-4" />}
        title="Нет OSPF-маршрутов"
        className="border-0 py-10"
      />
    )
  }

  return (
    <DataGridShell
      table={table}
      recordCount={routes.length}
      tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row hover:bg-muted/30" }}
      tableLayout={{ dense: true }}
    />
  )
}

export { OspfRoutesDataGrid, type OspfRoutesDataGridProps, routeTypeClass }