MikrotikManager/components/data-grids/bgp-sessions-data-grid.tsx

"use client"

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

import { useMemo, useEffect } 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,
} from "@/components/data-grids/shared/data-grid-layout"
import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
import { Button } from "@/components/ui/button"
import { EmptyState } from "@/components/empty-state"
import { BgpSessionDetail } from "@/components/data-grids/bgp-session-detail"
import type { BgpSessionRow, BgpState, BgpType } from "@/lib/bgp/types"
import { BGP_AS_NAMES } from "@/lib/bgp/types"
import { fmtBgpNum } from "@/lib/bgp/helpers"
import { ChevronDownIcon, ChevronRightIcon, NetworkIcon } from "lucide-react"

const STATE_DOT: Record<BgpState, string> = {
  Unknown: "bg-muted-foreground", Established: "bg-success", Active: "bg-warning",
  Idle: "bg-muted-foreground", Connect: "bg-info", OpenSent: "bg-info", OpenConfirm: "bg-info",
}

function StateBadge({ state }: { state: BgpState }) {
  return <Badge variant="invert-light" size="sm">
    <span aria-hidden="true" className={cn("size-1.5 rounded-full shrink-0", STATE_DOT[state])} />
    {state === "Unknown" ? "Неизвестно" : state}
  </Badge>
}

function TypeBadge({ type }: { type: BgpType }) {
  return <Badge variant="invert-light" size="sm">{type === "Unknown" ? "Тип неизвестен" : type}</Badge>
}

interface BgpSessionsDataGridProps {
  sessions: BgpSessionRow[]
  emptyTitle?: string
  selectedSessionId?: string | null
  onSelectSession?: (id: string | null) => void
}

function BgpSessionsDataGrid({ sessions, emptyTitle, selectedSessionId, onSelectSession }: BgpSessionsDataGridProps) {
  const columns = useMemo<ColumnDef<DataGridFeatures, BgpSessionRow>[]>(
    () => [
      {
        id: "serverLabel",
        accessorKey: "serverLabel",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Роутер" className="ml-1" />
        ),
        cell: ({ row }) => {
          const expanded = row.getIsExpanded()
          return (
            <div className="flex items-center gap-2">
              <Button variant="ghost" size="icon-xs" aria-label={(expanded ? "Закрыть" : "Открыть") + " сессию " + row.original.serverLabel + " · " + row.original.peerIp} aria-expanded={expanded}
                onClick={event => { event.stopPropagation(); if (onSelectSession) onSelectSession(expanded ? null : row.id); else row.toggleExpanded() }}>
                {expanded ? <ChevronDownIcon className="size-3.5" /> : <ChevronRightIcon className="size-3.5" />}
              </Button>
              <span className="font-mono whitespace-nowrap">{row.original.serverLabel}</span>
            </div>
          )
        },
        meta: {
          headerTitle: "Роутер",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
          expandedContent: (row: BgpSessionRow) => <BgpSessionDetail session={row} />,
        },
      },
      {
        id: "peerIp",
        accessorKey: "peerIp",
        header: ({ column }) => <DataGridSortHeader column={column} title="Peer IP" />,
        cell: ({ row }) => <span className="font-mono">{row.original.peerIp}</span>,
        meta: {
          headerTitle: "Peer IP",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "remoteAs",
        accessorKey: "remoteAs",
        header: ({ column }) => <DataGridSortHeader column={column} title="Remote AS" />,
        cell: ({ row }) => {
          const as = row.original.remoteAs
          return (
            <div className="flex items-center gap-1.5 font-mono">
              <span>{as === null ? "AS неизвестна" : "AS" + as}</span>
              {as !== null && BGP_AS_NAMES[as] && (
                <span className="text-muted-foreground text-[10px]">{BGP_AS_NAMES[as]}</span>
              )}
            </div>
          )
        },
        meta: {
          headerTitle: "Remote AS",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "description",
        accessorKey: "description",
        header: ({ column }) => <DataGridSortHeader column={column} title="Описание" />,
        cell: ({ row }) => (
          <span className="text-muted-foreground max-w-[180px] truncate block">
            {row.original.description}
          </span>
        ),
        meta: {
          headerTitle: "Описание",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "type",
        accessorKey: "type",
        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
        cell: ({ row }) => <TypeBadge type={row.original.type} />,
        meta: {
          headerTitle: "Тип",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "state",
        accessorKey: "state",
        header: ({ column }) => <DataGridSortHeader column={column} title="Состояние" />,
        cell: ({ row }) => <StateBadge state={row.original.state} />,
        meta: {
          headerTitle: "Состояние",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "uptime",
        accessorKey: "uptime",
        header: ({ column }) => <DataGridSortHeader column={column} title="Uptime" />,
        cell: ({ row }) => (
          <span className="font-mono tabular-nums text-muted-foreground">
            {row.original.uptime ?? "—"}
          </span>
        ),
        meta: {
          headerTitle: "Uptime",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "prefixesRx",
        accessorKey: "prefixesRx",
        header: ({ column }) => <DataGridSortHeader column={column} title="Prefixes ↓" />,
        cell: ({ row }) => {
          const n = row.original.prefixesRx
          return n !== null ? (
            <span className="font-mono tabular-nums text-right block">
              {fmtBgpNum(n)}
            </span>
          ) : (
            <span className="text-muted-foreground">—</span>
          )
        },
        meta: {
          headerTitle: "Prefixes ↓",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "prefixesTx",
        accessorKey: "prefixesTx",
        header: ({ column }) => <DataGridSortHeader column={column} title="Prefixes ↑" />,
        cell: ({ row }) => {
          const n = row.original.prefixesTx
          return n !== null ? (
            <span className="font-mono tabular-nums text-[var(--chart-tx)] text-right block">
              {fmtBgpNum(n)}
            </span>
          ) : (
            <span className="text-muted-foreground">—</span>
          )
        },
        meta: {
          headerTitle: "Prefixes ↑",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
    ],
    [onSelectSession],
  )

  const table = useTable({
    features: dataGridFeatures,
    manualPagination: false,
    autoResetPageIndex: false,
    initialState: { pagination: { pageIndex: 0, pageSize: 50 } },
    data: sessions,
    columns,
    getRowId: (row) => row.id,
    getRowCanExpand: () => true,
    ...(onSelectSession ? { state: { expanded: selectedSessionId ? { [selectedSessionId]: true } : {} } } : {}),
  })

  const {pageIndex,pageSize}=table.state.pagination
  const sorting=table.state.sorting
  useEffect(()=>{
    const last=Math.max(0,Math.ceil(sessions.length/pageSize)-1)
    if(pageIndex>last)table.setPageIndex(last)
  },[sessions.length,pageSize,pageIndex,table])
  const setPageIndex = table.setPageIndex
  const selectedIndex = selectedSessionId ? table.getPrePaginatedRowModel().rows.findIndex(row => row.id === selectedSessionId) : -1
  useEffect(() => {
    if (selectedIndex >= 0) setPageIndex(Math.floor(selectedIndex / pageSize))
  }, [selectedSessionId, selectedIndex, pageSize, sorting, setPageIndex])

  if (sessions.length === 0) {
    return (
      <EmptyState
        icon={<NetworkIcon className="size-4" />}
        title={emptyTitle ?? "Нет BGP-сессий"}
        description="Измените фильтры или проверьте подключение к роутерам"
        className="border-0 py-10"
      />
    )
  }

  return (
    <DataGridShell
      table={table}
      recordCount={sessions.length}
      pagination={sessions.length>50 || pageSize!==50}
      onRowClick={(row) => onSelectSession ? onSelectSession(row.id === selectedSessionId ? null : row.id) : table.getRow(row.id).toggleExpanded()}
    />
  )
}

export { BgpSessionsDataGrid, type BgpSessionsDataGridProps }