MikrotikManager/components/data-grids/ospf-neighbors-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 { OspfNeighborState } from "@/lib/ospf-state"
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 { Button } from "@/components/ui/button"
import { NetworkIcon } from "lucide-react"

export interface OspfNeighborRow {
  id: string
  dataUnknown?: boolean
  localRouter: string
  localLabel: string
  localIface: string
  remoteRouter: string
  remoteLabel: string
  remoteRouterId: string
  area: string
  state: OspfNeighborState
  cost: number | null
  uptime: string
  priority: number | null
}

function stateClass(state: OspfNeighborRow["state"]) {
  if (state === "Full")
    return "bg-[var(--status-online-bg)] text-[var(--status-online-fg)] border-current/25"
  if (state === "Unknown") return "bg-muted text-muted-foreground border-border"
  if (state !== "Down")
    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 {
  emptyTitle?: string
  neighbors: OspfNeighborRow[]
  highlightRouterId?: string | null
  selectedRouterId?: string | null
  onHighlight?: (routerId: string | null) => void
  onSelect?: (routerId: string | null) => void
}

function OspfNeighborsDataGrid({
  neighbors,
  emptyTitle,
  highlightRouterId,
  selectedRouterId,
  onSelect,
}: OspfNeighborsDataGridProps) {
  const columns = useMemo<ColumnDef<DataGridFeatures, OspfNeighborRow>[]>(
    () => [
      {
        id: "localLabel",
        accessorKey: "localLabel",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Роутер" className="ml-1" />
        ),
        cell: ({ row }) => (
          onSelect ? <Button type="button" variant="ghost" size="sm" aria-label={`Открыть узел ${row.original.localLabel}`} aria-expanded={selectedRouterId === row.original.localRouter} onClick={event => { event.stopPropagation(); onSelect(selectedRouterId === row.original.localRouter ? null : row.original.localRouter) }}>{row.original.localLabel}</Button> : <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",
              row.original.dataUnknown ? "bg-muted text-muted-foreground" : stateClass(row.original.state),
            )}
          >
            {row.original.dataUnknown || row.original.state === "Unknown" ? "Неизвестно" : 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"),
        },
      },
    ],
    [onSelect, selectedRouterId],
  )

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

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

  if (neighbors.length === 0) {
    return (
      <EmptyState
        icon={<NetworkIcon className="size-4" />}
        title={emptyTitle ?? "Нет 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 }