EvoBGP/apps/web/src/components/firewall/firewall-rules-grid.tsx

import { ColumnDef } from '@tanstack/react-table'
import { useMemo } from 'react'

import { Button } from '@evobgp/ui/components/button'

import { DataGridSection } from '@/components/data-grid-shell'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { StatusBadge } from '@/components/status-badge'
import { DataGridColumnHeader } from '@/components/reui/data-grid/data-grid-column-header'
import { useClientDataGrid } from '@/hooks/use-client-data-grid'
import { communityLabel } from '@/lib/modules/helpers'
import type { BgpCommunity, FirewallRule } from '@/types/api'

export interface FirewallRulesGridProps {
  rules: FirewallRule[]
  communities: BgpCommunity[]
  isLoading?: boolean
  onDelete: (id: string) => void
  deletePending?: boolean
  emptyTitle?: string
}

export function FirewallRulesGrid({
  rules,
  communities,
  isLoading = false,
  onDelete,
  deletePending = false,
  emptyTitle = 'Нет правил — blocklist пуст (default accept).',
}: FirewallRulesGridProps) {
  const columns = useMemo<ColumnDef<FirewallRule>[]>(
    () => [
      {
        accessorKey: 'priority',
        header: ({ column }) => <DataGridColumnHeader column={column} title="#" />,
        cell: ({ row }) => row.original.priority,
        meta: { headerTitle: '#' },
      },
      {
        accessorKey: 'action',
        header: ({ column }) => <DataGridColumnHeader column={column} title="Действие" />,
        cell: ({ row }) => (
          <StatusBadge status={row.original.action} label={row.original.action} />
        ),
        meta: { headerTitle: 'Действие' },
      },
      {
        id: 'community',
        enableSorting: false,
        header: 'Community',
        cell: ({ row }) => (
          <span className="text-sm">
            {row.original.community_id
              ? communityLabel(row.original.community_id, communities)
              : 'Все'}
          </span>
        ),
        meta: { headerTitle: 'Community' },
      },
      {
        accessorKey: 'comment',
        enableSorting: false,
        header: 'Комментарий',
        cell: ({ row }) => row.original.comment || '—',
        meta: { headerTitle: 'Комментарий' },
      },
      {
        id: 'actions',
        enableSorting: false,
        header: () => null,
        cell: ({ row }) => {
          const r = row.original
          return (
            <ConfirmDialog
              trigger={
                <Button
                  size="sm"
                  variant="ghost"
                  type="button"
                  className="text-destructive"
                  disabled={deletePending}
                >
                  Удалить
                </Button>
              }
              title="Удалить правило?"
              description={
                r.comment
                  ? `Правило #${r.priority} (${r.action}): ${r.comment}`
                  : `Правило #${r.priority} (${r.action}) будет удалено.`
              }
              confirmLabel="Удалить"
              destructive
              onConfirm={() => onDelete(r.id)}
            />
          )
        },
      },
    ],
    [communities, deletePending, onDelete],
  )

  const { table, globalFilter, setGlobalFilter, filteredCount } = useClientDataGrid({
    data: rules,
    columns,
    getSearchText: (row) =>
      `${row.priority} ${row.action} ${row.comment ?? ''} ${communityLabel(row.community_id, communities)}`,
    getRowId: (row) => row.id,
  })

  return (
    <DataGridSection
      table={table}
      recordCount={filteredCount}
      isLoading={isLoading}
      emptyMessage={emptyTitle}
      searchValue={globalFilter}
      onSearchChange={setGlobalFilter}
      searchPlaceholder="Поиск правил…"
    />
  )
}