MikrotikManager/components/data-grids/traffic-flows-data-grid.tsx

"use client"

import { useMemo } from "react"
import { type ColumnDef, getCoreRowModel, useReactTable } from "@tanstack/react-table"
import type { FlowTalkerDto } from "@mmapp/contracts/traffic-flow"
import { ArrowDownIcon, ArrowUpIcon, MinusIcon } from "lucide-react"
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 { fmtRate } from "@/lib/fmt-rate"
import { cn } from "@/lib/utils"

function formatBytes(n: number): string {
  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(2)} ГБ`
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)} МБ`
  if (n >= 1000) return `${(n / 1000).toFixed(1)} КБ`
  return `${n} Б`
}

function formatEndpoint(ip: string | undefined, port: number | undefined): string {
  const host = String(ip ?? "").trim()
  if (!host) return "—"
  return port ? `${host}:${port}` : host
}

function packetTuple(row: FlowTalkerDto): string {
  const src = formatEndpoint(row.src, row.srcPort)
  const dst = formatEndpoint(row.dst, row.dstPort)
  return `${src} → ${dst}`
}

function FlowDirectionMark({ direction }: { direction: FlowTalkerDto["direction"] }) {
  if (direction === "to_client") {
    return (
      <span className="inline-flex text-muted-foreground" title="Download: интернет → клиент">
        <ArrowDownIcon className="size-3" />
      </span>
    )
  }
  if (direction === "from_client") {
    return (
      <span className="inline-flex text-muted-foreground" title="Upload: клиент → интернет">
        <ArrowUpIcon className="size-3" />
      </span>
    )
  }
  return (
    <span className="inline-flex text-muted-foreground" title="Транзит">
      <MinusIcon className="size-3" />
    </span>
  )
}

function TrafficFlowsDataGrid({
  rows,
  emptyHint,
}: {
  rows: FlowTalkerDto[]
  emptyHint?: string
}) {
  const columns = useMemo<ColumnDef<FlowTalkerDto>[]>(
    () => [
      {
        id: "client",
        accessorFn: (r) => r.clientName || r.clientIp || "",
        header: () => <span className="text-xs font-medium text-muted-foreground">Клиент</span>,
        cell: ({ row }) => (
          <span className="flex min-w-0 flex-col gap-0.5">
            <span className="text-xs truncate">{row.original.clientName || "—"}</span>
            {row.original.clientIp ? (
              <span className="font-mono text-[10px] text-muted-foreground truncate">{row.original.clientIp}</span>
            ) : null}
          </span>
        ),
        meta: { headerClassName: DATA_GRID_CELL_PAD_FIRST, cellClassName: DATA_GRID_CELL_PAD_FIRST },
      },
      {
        id: "server",
        accessorKey: "serverName",
        header: () => <span className="text-xs font-medium text-muted-foreground">JH</span>,
        cell: ({ row }) => <span className="text-sm font-medium">{row.original.serverName}</span>,
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "direction",
        accessorFn: (r) => r.direction ?? "",
        header: () => <span className="text-xs font-medium text-muted-foreground">Напр.</span>,
        cell: ({ row }) => <FlowDirectionMark direction={row.original.direction} />,
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "internet",
        accessorFn: (r) => r.internetPeer ?? r.dst,
        header: () => <span className="text-xs font-medium text-muted-foreground">Интернет</span>,
        cell: ({ row }) => {
          const r = row.original
          const label = formatEndpoint(r.internetPeer, r.internetPeerPort)
          const tuple = packetTuple(r)
          return (
            <span className="font-mono text-xs truncate max-w-[220px]" title={tuple}>
              {label}
            </span>
          )
        },
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "app",
        accessorFn: (r) => r.application ?? r.protoName,
        header: () => <span className="text-xs font-medium text-muted-foreground">App</span>,
        cell: ({ row }) => (
          <span className="flex min-w-0 flex-col gap-0.5 text-xs">
            <span>{row.original.application ?? row.original.protoName}</span>
            {row.original.category || row.original.service ? (
              <span className="text-[10px] text-muted-foreground truncate">
                {[row.original.category, row.original.service].filter(Boolean).join(" · ")}
              </span>
            ) : null}
          </span>
        ),
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "proto",
        accessorKey: "protoName",
        header: () => <span className="text-xs font-medium text-muted-foreground">Proto</span>,
        cell: ({ row }) => <span className="text-xs">{row.original.protoName}</span>,
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "rate",
        accessorFn: (r) => r.bps,
        header: () => <span className="text-xs font-medium text-muted-foreground">Скорость</span>,
        cell: ({ row }) => <span className="text-xs tabular-nums">{fmtRate(row.original.bps / 1_000_000)}</span>,
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "bytes",
        accessorKey: "bytes",
        header: () => <span className="text-xs font-medium text-muted-foreground">Байты</span>,
        cell: ({ row }) => <span className="text-xs tabular-nums">{formatBytes(row.original.bytes)}</span>,
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "en",
        accessorFn: (r) => r.enName ?? "",
        header: () => <span className="text-xs font-medium text-muted-foreground">EN</span>,
        cell: ({ row }) => <span className="text-xs">{row.original.enName || "—"}</span>,
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "plane",
        accessorFn: (r) => r.plane ?? "",
        header: () => <span className="text-xs font-medium text-muted-foreground">Плоскость</span>,
        cell: ({ row }) => <span className="text-xs text-muted-foreground">{row.original.plane || "—"}</span>,
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "iface",
        accessorKey: "inIface",
        header: () => <span className="text-xs font-medium text-muted-foreground">Iface</span>,
        cell: ({ row }) => <span className="font-mono text-xs text-muted-foreground">{row.original.inIface || "—"}</span>,
        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: cn(DATA_GRID_CELL_PAD_LAST) },
      },
    ],
    [],
  )

  const table = useReactTable({
    data: rows,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row, i) => `${row.serverId}-${row.src}-${row.dst}-${row.proto}-${row.srcPort}-${row.dstPort}-${i}`,
  })

  return (
    <DataGridShell
      table={table}
      recordCount={rows.length}
      emptyMessage={
        emptyHint
        || "Пока нет IPFIX. Поднимите wg-flow на хосте MM и подключите jump-host одним кликом."
      }
    />
  )
}

export { TrafficFlowsDataGrid }