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

"use client"

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

import { useEffect, useMemo } from "react"
import {
  type ColumnDef,
  useTable,
} from "@tanstack/react-table"
import { cn } from "@/lib/utils"
import { Badge } from "@/components/reui/badge"
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
  dataUnknown?: boolean
  destination: string
  type: "O" | "O IA" | "O E1" | "O E2" | "Unknown"
  cost: number | null
  nextHop: string
  via: string
  serverId: string
  serverLabel: string
  area: string
}

function OspfRouteTypeBadge({ type, count }: { type: OspfRouteRow["type"]; count?: number }) {
  return <Badge variant="invert-light" size="sm">
    {type === "Unknown" ? "Тип неизвестен" : type}{count === undefined ? "" : ": " + count}
  </Badge>
}

interface OspfRoutesDataGridProps {
  emptyTitle?: string
  routes: OspfRouteRow[]
}

function OspfRoutesDataGrid({ routes, emptyTitle }: OspfRoutesDataGridProps) {
  const columns = useMemo<ColumnDef<DataGridFeatures, OspfRouteRow>[]>(
    () => [
      {
        id: "destination",
        size: 180,
        accessorKey: "destination",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Назначение" className="ml-1" />
        ),
        cell: ({ row }) => <span className="font-mono whitespace-nowrap" title={row.original.destination}>{row.original.destination}</span>,
        meta: {
          headerTitle: "Назначение",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "type",
        size: 116,
        accessorKey: "type",
        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
        cell: ({ row }) => (
          <OspfRouteTypeBadge type={row.original.type} />
        ),
        meta: { headerTitle: "Тип", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "cost",
        size: 80,
        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",
        size: 120,
        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}{row.original.dataUnknown ? " · Неизвестно" : ""}</span>,
        meta: {
          headerTitle: "Роутер",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "area",
        size: 120,
        accessorKey: "area",
        header: ({ column }) => <DataGridSortHeader column={column} title="Область" />,
        cell: ({ row }) => (
          <span className="font-mono text-muted-foreground" title={row.original.area}>{row.original.area}</span>
        ),
        meta: {
          headerTitle: "Область",
          headerClassName: cn(DATA_GRID_CELL_PAD_LAST, "text-right"),
          cellClassName: cn(DATA_GRID_CELL_PAD_LAST, "text-right"),
        },
      },
    ],
    [],
  )

  const table = useTable({
    features: dataGridFeatures,
    manualPagination: false,
    autoResetPageIndex: false,
    initialState: { pagination: { pageIndex: 0, pageSize: 50 }, columnPinning: { start: ["destination"], end: [] } },
    data: routes,
    columns,
    getRowId: (row) => row.id,
  })

  const { pageIndex, pageSize } = table.state.pagination
  useEffect(() => {
    const lastPage = Math.max(0, Math.ceil(routes.length / pageSize) - 1)
    if (pageIndex > lastPage) table.setPageIndex(lastPage)
  }, [routes.length, pageIndex, pageSize, table])

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

  return (
    <DataGridShell
      table={table}
      recordCount={routes.length}
      pagination={routes.length > 50 || pageSize !== 50}
      tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row hover:bg-muted/30" }}
      tableLayout={{ dense: true, columnsPinnable: true }}
    >
      <DataGridContainer border={false} className="w-full rounded-none border-0">
        <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
      </DataGridContainer>
    </DataGridShell>
  )
}

export { OspfRoutesDataGrid, type OspfRoutesDataGridProps, OspfRouteTypeBadge }