MikrotikManager/components/data-grids/wireguard-peers-grid.tsx

"use client"

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

import { useEffect, useMemo, type ReactNode } from "react"
import {
  type ColumnDef,
  useTable,
} from "@tanstack/react-table"
import type { WireGuardPeer } from "@/lib/data"
import { Flag } from "@/components/flag"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
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 { fmtBytes, truncKey } from "@/components/data-grids/wireguard-peers-detail"
import {
  ArrowDownIcon,
  ArrowUpIcon,
  CodeXmlIcon,
  KeyRoundIcon,
  Trash2Icon,
  UsersIcon,
} from "lucide-react"

export interface WgPeerRow extends WireGuardPeer {
  id: string
  ifaceId: string
  ifaceName: string
  serverId: string
  serverName: string
  serverCountry: string
}

interface WireguardPeersGridProps {
  peers: WgPeerRow[]
  compactServer?: boolean
  emptyAction?: ReactNode
  onDeletePeer?: (row: WgPeerRow) => void
  onExportPeer?: (row: WgPeerRow) => void
}

function WireguardPeersGrid({
  peers,
  compactServer = false,
  emptyAction,
  onDeletePeer,
  onExportPeer,
}: WireguardPeersGridProps) {
  const columns = useMemo<ColumnDef<DataGridFeatures, WgPeerRow>[]>(() => {
    const cols: ColumnDef<DataGridFeatures, WgPeerRow>[] = [
      {
        id: "peer",
        size: 144,
        accessorKey: "publicKey",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Пир" className="ml-1" />
        ),
        cell: ({ row }) => {
          const peer = row.original
          return (
            <div className="flex min-w-0 items-center gap-1.5">
              <KeyRoundIcon className="size-3.5 shrink-0 text-muted-foreground" />
              <span className="truncate font-mono text-xs" title={peer.publicKey}>
                {peer.name || truncKey(peer.publicKey)}
              </span>
            </div>
          )
        },
        meta: {
          headerTitle: "Пир",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "iface",
        size: 120,
        accessorKey: "ifaceName",
        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
        cell: ({ row }) => (
          <span className="font-mono text-sm">{row.original.ifaceName}</span>
        ),
        meta: {
          headerTitle: "Интерфейс",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
    ]

    if (!compactServer) {
      cols.push({
        id: "server",
        size: 128,
        accessorKey: "serverName",
        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
        cell: ({ row }) => (
          <div className="flex items-center gap-1.5 font-mono text-[11px] text-muted-foreground">
            <Flag code={row.original.serverCountry || "UN"} size={12} />
            {row.original.serverName}
          </div>
        ),
        meta: {
          headerTitle: "Сервер",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      })
    }

    cols.push(
      {
        id: "allowedIps",
        size: 136,
        accessorFn: (row) => row.allowedIps.join(", "),
        header: ({ column }) => <DataGridSortHeader column={column} title="Allowed IPs" />,
        cell: ({ row }) => (
          <span className="block truncate font-mono text-xs text-muted-foreground">
            {row.original.allowedIps.join(", ") || "—"}
          </span>
        ),
        meta: {
          headerTitle: "Allowed IPs",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "handshake",
        size: 144,
        accessorKey: "latestHandshake",
        header: ({ column }) => <DataGridSortHeader column={column} title="Handshake" />,
        cell: ({ row }) => (
          <span
            className={cn(
              "whitespace-nowrap font-mono text-[11px]",
              "text-muted-foreground",
            )}
          >
            {row.original.latestHandshake?.trim() || "Нет данных"}
          </span>
        ),
        meta: {
          headerTitle: "Handshake",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "transfer",
        size: 160,
        header: () => (
          <span className="text-xs font-medium text-muted-foreground">RX / TX</span>
        ),
        enableSorting: false,
        cell: ({ row }) => (
          <div className="flex items-center gap-2 whitespace-nowrap text-xs text-muted-foreground">
            <span aria-label="RX" className="flex items-center gap-0.5">
              <ArrowDownIcon aria-hidden="true" className="size-3 text-success" />
              {fmtBytes(row.original.transferRx)}
            </span>
            <span aria-label="TX" className="flex items-center gap-0.5">
              <ArrowUpIcon aria-hidden="true" className="size-3 text-info" />
              {fmtBytes(row.original.transferTx)}
            </span>
          </div>
        ),
        meta: {
          headerTitle: "RX / TX",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "endpoint",
        size: 144,
        accessorKey: "endpoint",
        header: ({ column }) => <DataGridSortHeader column={column} title="Endpoint" />,
        cell: ({ row }) => (
          <span className="font-mono text-[11px] text-muted-foreground">
            {row.original.endpoint ?? "—"}
          </span>
        ),
        meta: {
          headerTitle: "Endpoint",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "actions",
        header: () => <span className="sr-only">Действия</span>,
        enableSorting: false,
        size: 112,
        cell: ({ row }) => {
          const peer = row.original
          return (
            <div className="flex justify-end gap-0.5">
              {onExportPeer ? (
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="size-11"
                  aria-label="Экспорт peer .conf"
                  onClick={() => onExportPeer(peer)}
                >
                  <CodeXmlIcon className="size-3.5" />
                </Button>
              ) : null}
              {onDeletePeer ? (
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="size-11 text-destructive"
                  aria-label="Удалить пира"
                  onClick={() => onDeletePeer(peer)}
                >
                  <Trash2Icon className="size-3.5" />
                </Button>
              ) : null}
            </div>
          )
        },
        meta: {
          headerClassName: DATA_GRID_CELL_PAD_LAST,
          cellClassName: DATA_GRID_CELL_PAD_LAST,
        },
      },
    )

    return cols
  }, [compactServer, onDeletePeer, onExportPeer])

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

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

  if (peers.length === 0) {
    return (
      <EmptyState
        icon={<UsersIcon className="size-4" />}
        title="Нет пиров"
        description="Добавьте пира к интерфейсу или сбросьте поиск"
        action={emptyAction}
        className="border-0 py-16"
      />
    )
  }

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

export { WireguardPeersGrid, type WireguardPeersGridProps }