MikrotikManager/components/ipsec/ipsec-users-grid.tsx

"use client"

import { useMemo, type ReactNode } from "react"
import {
  type ColumnDef,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"
import type { IpsecClientDto } from "@mmapp/contracts/ipsec"
import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
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 {
  BadgeCheckIcon,
  KeyRoundIcon,
  Trash2Icon,
  UsersIcon,
  WifiIcon,
} from "lucide-react"

export interface IpsecUsersGridProps {
  clients: IpsecClientDto[]
  compactServer?: boolean
  emptyAction?: ReactNode
  onDownloadCert?: (row: IpsecClientDto) => void
  onEdit?: (row: IpsecClientDto) => void
  onDelete?: (row: IpsecClientDto) => void
}

function IpsecUsersGrid({
  clients,
  compactServer = false,
  emptyAction,
  onDownloadCert,
  onEdit,
  onDelete,
}: IpsecUsersGridProps) {
  const columns = useMemo<ColumnDef<IpsecClientDto>[]>(() => {
    const cols: ColumnDef<IpsecClientDto>[] = [
      {
        id: "name",
        accessorKey: "name",
        header: ({ column }) => (
          <DataGridSortHeader column={column} title="Клиент" className="ml-1" />
        ),
        cell: ({ row }) => {
          const c = row.original
          return (
            <div className="flex min-w-0 items-center gap-1.5">
              <UsersIcon className="size-3.5 shrink-0 text-muted-foreground" />
              <button
                type="button"
                className="truncate text-left font-medium hover:underline"
                onClick={() => onEdit?.(c)}
              >
                {c.name}
              </button>
              {c.disabled ? (
                <Badge variant="outline" className="ml-1 text-[10px]">выкл</Badge>
              ) : null}
              {!c.managed ? (
                <Badge variant="outline" className="ml-1 text-[10px]">RouterOS</Badge>
              ) : null}
            </div>
          )
        },
        meta: {
          headerTitle: "Клиент",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "auth",
        accessorKey: "authMethod",
        header: ({ column }) => <DataGridSortHeader column={column} title="Аутентификация" />,
        cell: ({ row }) => {
          const cert = row.original.authMethod === "certificate"
          return (
            <div className="flex items-center gap-1.5 text-xs">
              {cert ? (
                <BadgeCheckIcon className="size-3.5 text-info" />
              ) : (
                <KeyRoundIcon className="size-3.5 text-muted-foreground" />
              )}
              {cert ? "Сертификат" : "PSK"}
            </div>
          )
        },
        meta: {
          headerTitle: "Аутентификация",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
    ]

    if (!compactServer) {
      cols.push({
        id: "server",
        accessorKey: "serverName",
        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
        cell: ({ row }) => (
          <span className="font-mono text-[11px] text-muted-foreground">
            {row.original.serverName}
          </span>
        ),
        meta: {
          headerTitle: "Сервер",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      })
    }

    cols.push(
      {
        id: "ip",
        accessorFn: (row) => row.staticIp ?? "",
        header: ({ column }) => <DataGridSortHeader column={column} title="IP" />,
        cell: ({ row }) => (
          <span
            className={cn(
              "font-mono text-xs",
              row.original.staticIp ? "text-foreground" : "text-muted-foreground",
            )}
          >
            {row.original.staticIp ?? "из пула"}
          </span>
        ),
        meta: {
          headerTitle: "IP",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "online",
        accessorKey: "online",
        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
        cell: ({ row }) => (
          <div className="flex items-center gap-1.5 whitespace-nowrap">
            <span
              className={cn(
                "inline-flex size-1.5 rounded-full",
                row.original.online ? "bg-success" : "bg-muted-foreground/40",
              )}
            />
            <span className={cn("font-mono text-[11px]", row.original.online ? "text-success" : "text-muted-foreground")}>
              {row.original.online ? row.original.activeAddress ?? "онлайн" : "офлайн"}
            </span>
          </div>
        ),
        meta: {
          headerTitle: "Статус",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "actions",
        header: () => <span className="sr-only">Действия</span>,
        enableSorting: false,
        size: 96,
        cell: ({ row }) => {
          const c = row.original
          return (
            <div className="flex justify-end gap-0.5">
              {c.authMethod === "certificate" && onDownloadCert ? (
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="size-7"
                  aria-label="Скачать сертификат"
                  title="Скачать .p12"
                  onClick={() => onDownloadCert(c)}
                >
                  <WifiIcon className="size-3.5" />
                </Button>
              ) : null}
              {onDelete ? (
                <Button
                  type="button"
                  variant="ghost"
                  size="icon"
                  className="size-7 text-destructive"
                  aria-label="Удалить клиента"
                  onClick={() => onDelete(c)}
                >
                  <Trash2Icon className="size-3.5" />
                </Button>
              ) : null}
            </div>
          )
        },
        meta: {
          headerClassName: DATA_GRID_CELL_PAD_LAST,
          cellClassName: DATA_GRID_CELL_PAD_LAST,
        },
      },
    )

    return cols
  }, [compactServer, onDownloadCert, onEdit, onDelete])

  const table = useReactTable({
    data: clients,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getRowId: (row) => row.id,
  })

  if (clients.length === 0) {
    return (
      <EmptyState
        icon={<UsersIcon className="size-4" />}
        title="Нет клиентов IKEv2"
        description="Создайте клиента — сертификат и .p12 выпустятся автоматически"
        action={emptyAction}
        className="border-0 py-16"
      />
    )
  }

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

export { IpsecUsersGrid }