MikrotikManager/components/data-grids/gre-tunnels-data-grid.tsx

"use client"

import { useMemo } from "react"
import {
  type ColumnDef,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"
import type {
  GrePool,
  GreTunnel,
  GreStatus,
  IpsecEncAlg,
  IpsecAuthAlg,
  IpsecDhGroup,
  IkeVersion,
  Server,
} from "@/lib/data"
import { Flag } from "@/components/flag"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
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 {
  CodeXmlIcon,
  LockIcon,
  LockOpenIcon,
  MoreHorizontalIcon,
  NetworkIcon,
  PencilIcon,
  PowerIcon,
  Trash2Icon,
} from "lucide-react"

const ENC_LABELS: Record<IpsecEncAlg, string> = {
  "aes-128": "AES-128",
  "aes-192": "AES-192",
  "aes-256": "AES-256",
}
const AUTH_LABELS: Record<IpsecAuthAlg, string> = {
  sha1: "SHA-1",
  sha256: "SHA-256",
  sha512: "SHA-512",
}
const DH_LABELS: Record<IpsecDhGroup, string> = {
  modp1024: "DH-2 (1024)",
  modp2048: "DH-14 (2048)",
  modp4096: "DH-16 (4096)",
  ecp256: "ECP-256",
  ecp384: "ECP-384",
  ecp521: "ECP-521",
}
const IKE_LABELS: Record<IkeVersion, string> = { ikev1: "IKEv1", ikev2: "IKEv2" }

const STATUS_MAP: Record<GreStatus, { label: string; dot: string }> = {
  up: { label: "Up", dot: "bg-emerald-500" },
  degraded: { label: "Degraded", dot: "bg-amber-500" },
  down: { label: "Down", dot: "bg-red-500" },
}

function TunnelStatus({ status }: { status: GreStatus }) {
  const s = STATUS_MAP[status]
  return (
    <span className="inline-flex items-center gap-1.5 text-sm">
      <span className={cn("size-1.5 rounded-full", s.dot)} />
      {s.label}
    </span>
  )
}

function IpsecBadge({ secured }: { secured: boolean }) {
  return secured ? (
    <span className="inline-flex items-center gap-1 text-xs font-medium border rounded px-2 py-0.5 bg-emerald-500/10 text-emerald-400 border-emerald-500/20">
      <LockIcon className="size-3" /> IPsec
    </span>
  ) : (
    <span className="inline-flex items-center gap-1 text-xs font-medium border rounded px-2 py-0.5 bg-muted text-muted-foreground border-border">
      <LockOpenIcon className="size-3" /> Открытый
    </span>
  )
}

interface GreTunnelsDataGridProps {
  tunnels: GreTunnel[]
  servers: Server[]
  pools: GrePool[]
  onCodePreview: (tunnel: GreTunnel) => void
}

function GreTunnelsDataGrid({
  tunnels,
  servers,
  pools,
  onCodePreview,
}: GreTunnelsDataGridProps) {
  const serverMap = useMemo(() => new Map(servers.map((s) => [s.id, s])), [servers])
  const poolMap = useMemo(() => new Map(pools.map((p) => [p.id, p])), [pools])

  const columns = useMemo<ColumnDef<GreTunnel>[]>(
    () => [
      {
        id: "name",
        accessorKey: "name",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Интерфейс / Сервер" className="ml-1" />
        ),
        cell: ({ row }) => {
          const t = row.original
          const srv = serverMap.get(t.serverId)
          return (
            <div className="min-w-0">
              <p className="font-medium font-mono text-[13px]">{t.name}</p>
              <p className="text-xs text-muted-foreground mt-0.5 flex items-center gap-1">
                {srv && <Flag code={srv.country} />}
                {srv?.name ?? t.serverId}
              </p>
            </div>
          )
        },
        meta: {
          headerTitle: "Интерфейс / Сервер",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "endpoints",
        header: () => <span className="text-xs font-medium text-muted-foreground">Эндпоинты</span>,
        enableSorting: false,
        cell: ({ row }) => {
          const t = row.original
          return (
            <div>
              <p className="font-mono text-xs">
                {t.localAddress === "0.0.0.0" ? (
                  <span className="text-muted-foreground">авто</span>
                ) : (
                  t.localAddress
                )}
              </p>
              <p className="font-mono text-xs text-muted-foreground">→ {t.remoteAddress}</p>
            </div>
          )
        },
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "innerIp",
        header: () => <span className="text-xs font-medium text-muted-foreground">Внутренний IP</span>,
        enableSorting: false,
        cell: ({ row }) => {
          const t = row.original
          return (
            <div>
              <p className="font-mono text-xs">{t.localInnerIp}</p>
              <p className="font-mono text-xs text-muted-foreground">{t.remoteInnerIp}</p>
            </div>
          )
        },
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "pool",
        accessorKey: "poolId",
        header: ({ column }) => <DataGridSortHeader column={column} title="Пул" />,
        cell: ({ row }) => (
          <span className="text-xs text-muted-foreground font-mono">
            {poolMap.get(row.original.poolId)?.name ?? "—"}
          </span>
        ),
        meta: { headerTitle: "Пул", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "ipsec",
        header: () => <span className="text-xs font-medium text-muted-foreground">IPsec</span>,
        enableSorting: false,
        cell: ({ row }) => <IpsecBadge secured={!!row.original.ipsec} />,
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "encryption",
        header: () => <span className="text-xs font-medium text-muted-foreground">Шифрование</span>,
        enableSorting: false,
        cell: ({ row }) => {
          const t = row.original
          if (!t.ipsec) return <span className="text-xs text-muted-foreground">—</span>
          return (
            <div className="flex flex-col gap-0.5">
              <span className="text-xs font-mono">
                {ENC_LABELS[t.ipsec.encAlg]} / {AUTH_LABELS[t.ipsec.authAlg]}
              </span>
              <span className="text-xs text-muted-foreground font-mono">
                {DH_LABELS[t.ipsec.dhGroup].split(" ")[0]} · {IKE_LABELS[t.ipsec.ikeVersion]}
                {t.ipsec.pfs && " · PFS"}
              </span>
            </div>
          )
        },
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "mtu",
        accessorKey: "mtu",
        header: ({ column }) => <DataGridSortHeader column={column} title="MTU" />,
        cell: ({ row }) => (
          <span className="font-mono text-xs text-center block">{row.original.mtu}</span>
        ),
        meta: {
          headerTitle: "MTU",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: cn(DATA_GRID_CELL_PAD, "text-center"),
        },
      },
      {
        id: "keepalive",
        header: () => <span className="text-xs font-medium text-muted-foreground">Keepalive</span>,
        enableSorting: false,
        cell: ({ row }) => {
          const t = row.original
          return (
            <span className="font-mono text-xs text-muted-foreground">
              {t.keepaliveInterval === 0 ? "откл." : `${t.keepaliveInterval}с / ${t.keepaliveRetries}`}
            </span>
          )
        },
        meta: { headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "status",
        accessorKey: "status",
        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
        cell: ({ row }) => <TunnelStatus status={row.original.status} />,
        meta: { headerTitle: "Статус", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
      },
      {
        id: "actions",
        header: () => <span className="sr-only">Действия</span>,
        enableSorting: false,
        cell: ({ row }) => {
          const t = row.original
          return (
            <div className="flex items-center gap-1 justify-end">
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className={cn(
                  "size-7 opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100",
                )}
                title="Предпросмотр кода RouterOS"
                onClick={(e) => {
                  e.stopPropagation()
                  onCodePreview(t)
                }}
              >
                <CodeXmlIcon className="size-3.5" />
              </Button>
              <DropdownMenu>
                <DropdownMenuTrigger
                  render={
                    <Button
                      type="button"
                      variant="outline"
                      size="icon"
                      className={cn(
                        "size-8 shrink-0 border-border/60 bg-background/80 text-muted-foreground shadow-none",
                        "opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100",
                        "data-popup-open:opacity-100",
                      )}
                      aria-label={`Действия: ${t.name}`}
                    >
                      <MoreHorizontalIcon className="size-4" />
                    </Button>
                  }
                />
                <DropdownMenuContent side="bottom" align="end">
                  <DropdownMenuGroup>
                    <DropdownMenuLabel>{t.name}</DropdownMenuLabel>
                  </DropdownMenuGroup>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={() => onCodePreview(t)}>
                    <CodeXmlIcon className="size-4" /> Просмотр кода
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <PencilIcon className="size-4" /> Редактировать
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>
                    <PowerIcon className="size-4" />
                    {t.enabled ? "Выключить" : "Включить"}
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem variant="destructive">
                    <Trash2Icon className="size-4" /> Удалить туннель
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </div>
          )
        },
        size: 88,
        meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
      },
    ],
    [onCodePreview, poolMap, serverMap],
  )

  const table = useReactTable({
    data: tunnels,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getRowId: (row, index) => `${row.id}:${row.serverId}:${row.name}:${index}`,
  })

  if (tunnels.length === 0) {
    return (
      <EmptyState
        icon={<NetworkIcon className="size-4" />}
        title="Нет GRE-туннелей"
        description="Измените фильтр или добавьте туннель"
        className="border-0 py-16"
      />
    )
  }

  return (
    <DataGridShell
      table={table}
      recordCount={tunnels.length}
      tableClassNames={{ headerRow: "border-b border-border", bodyRow: "group/row" }}
    />
  )
}

export { GreTunnelsDataGrid, type GreTunnelsDataGridProps }