MikrotikManager/components/data-grids/ospf-neighbors-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 { NetworkIcon } from "lucide-react"

export interface OspfNeighborRow {
  id: string
  localRouter: string
  localLabel: string
  localIface: string
  remoteRouter: string
  remoteLabel: string
  remoteRouterId: string
  area: string
  state: "Full" | "2-Way" | "ExStart" | "Down"
  cost: number
  uptime: string
  priority: number
}

function stateClass(state: OspfNeighborRow["state"]) {
  if (state === "Full")
    return "bg-[var(--status-online-bg)] text-[var(--status-online-fg)] border-current/25"
  if (state === "2-Way")
    return "bg-[var(--status-degraded-bg)] text-[var(--status-degraded-fg)] border-current/25"
  return "bg-[var(--status-offline-bg)] text-[var(--status-offline-fg)] border-current/25"
}

interface OspfNeighborsDataGridProps {
  neighbors: OspfNeighborRow[]
  highlightRouterId?: string | null
  selectedRouterId?: string | null
  onHighlight?: (routerId: string | null) => void
  onSelect?: (routerId: string | null) => void
}

function OspfNeighborsDataGrid({
  neighbors,
  highlightRouterId,
  selectedRouterId,
  onHighlight,
  onSelect,
}: OspfNeighborsDataGridProps) {
  const columns = useMemo<ColumnDef<OspfNeighborRow>[]>(
    () => [
      {
        id: "localLabel",
        accessorKey: "localLabel",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Роутер" className="ml-1" />
        ),
        cell: ({ row }) => (
          <span className="font-mono whitespace-nowrap">{row.original.localLabel}</span>
        ),
        meta: {
          headerTitle: "Роутер",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "localIface",
        accessorKey: "localIface",
        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
        cell: ({ row }) => (
          <span className="font-mono text-muted-foreground whitespace-nowrap">
            {row.original.localIface}
          </span>
        ),
        meta: {
          headerTitle: "Интерфейс",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "remote",
        header: () => (
          <span className="text-xs font-medium text-muted-foreground">Сосед (Router ID)</span>
        ),
        enableSorting: false,
        cell: ({ row }) => {
          const n = row.original
          return (
            <div className="flex flex-col">
              <span className="font-mono">
                {n.remoteLabel !== n.remoteRouterId ? n.remoteLabel : n.remoteRouterId}
              </span>
              {n.remoteLabel !== n.remoteRouterId && (
                <span className="text-[10px] font-mono text-muted-foreground">{n.remoteRouterId}</span>
              )}
            </div>
          )
        },
        meta: { 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,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "state",
        accessorKey: "state",
        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",
              stateClass(row.original.state),
            )}
          >
            {row.original.state}
          </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: "uptime",
        accessorKey: "uptime",
        header: ({ column }) => <DataGridSortHeader column={column} title="Uptime" />,
        cell: ({ row }) => (
          <span className="text-muted-foreground whitespace-nowrap tabular-nums">
            {row.original.uptime}
          </span>
        ),
        meta: {
          headerTitle: "Uptime",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "priority",
        accessorKey: "priority",
        header: ({ column }) => <DataGridSortHeader column={column} title="Prio" />,
        cell: ({ row }) => (
          <span className="text-center font-mono block">{row.original.priority}</span>
        ),
        meta: {
          headerTitle: "Prio",
          headerClassName: DATA_GRID_CELL_PAD_LAST,
          cellClassName: cn(DATA_GRID_CELL_PAD_LAST, "text-center"),
        },
      },
    ],
    [],
  )

  const rowSelection = useMemo(() => {
    if (!selectedRouterId) return {}
    const match = neighbors.find(
      (n) => n.localRouter === selectedRouterId || n.remoteRouter === selectedRouterId,
    )
    return match ? { [match.id]: true } : {}
  }, [neighbors, selectedRouterId])

  const table = useReactTable({
    data: neighbors,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getRowId: (row) => row.id,
    enableRowSelection: true,
    state: { rowSelection },
  })

  if (neighbors.length === 0) {
    return (
      <EmptyState
        icon={<NetworkIcon className="size-4" />}
        title="Нет OSPF-соседей"
        className="border-0 py-10"
      />
    )
  }

  return (
    <DataGridShell
      table={table}
      recordCount={neighbors.length}
      onRowClick={(row) => {
        onSelect?.(selectedRouterId === row.localRouter ? null : row.localRouter)
      }}
      tableClassNames={{
        headerRow: "border-b border-border",
        bodyRow: cn(
          "group/row cursor-pointer",
          "data-[state=selected]:bg-primary/5",
          highlightRouterId && "[&:hover]:bg-muted/30",
        ),
      }}
      tableLayout={{ dense: true }}
    />
  )
}

export { OspfNeighborsDataGrid, type OspfNeighborsDataGridProps }