MikrotikManager/components/data-grids/backups-data-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 { Backup } from "@/lib/data"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/reui/badge"
import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
import {
  DEFAULT_DATA_GRID_LAYOUT,
  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 {
  DownloadIcon,
  HardDriveIcon,
  RefreshCwIcon,
  Trash2Icon,
} from "lucide-react"

interface BackupsDataGridProps {
  backups: Backup[]
  onDownload: (id: string, filename: string) => void
  onRestore: (backup: Backup) => void
  onDelete: (backup: Backup) => void
  canRestore?: boolean
  canWrite?: boolean
  canDownload?: boolean
  emptyAction?: ReactNode
  emptyTitle?: string
  emptyDescription?: string
}

function storageBadge(storage: Backup["storage"]) {
  if (storage === "s3") return { label: "S3", variant: "info-light" as const }
  if (storage === "both") return { label: "Локально + S3", variant: "success-light" as const }
  return { label: "Локально", variant: "secondary" as const }
}

function BackupsDataGrid({
  backups,
  onDownload,
  onRestore,
  onDelete,
  canRestore = true,
  canWrite = true,
  canDownload = true,
  emptyAction,
  emptyTitle = "Нет бэкапов",
  emptyDescription = "Создайте первый бэкап вручную или настройте расписание",
}: BackupsDataGridProps) {
  const columns = useMemo<ColumnDef<DataGridFeatures, Backup>[]>(
    () => [
      {
        id: "filename",
        accessorKey: "filename",
        size: 110,
        header: ({ column }) => <DataGridSortHeader column={column} title="Файл" />,
        cell: ({ row }) => {
          const b = row.original
          return (
            <div className="flex items-center gap-3 min-w-0">
              <div className="min-w-0">
                <span title={b.filename} className="font-mono text-xs font-medium block break-all">{b.filename}</span>
                {b.uploadError ? (
                  <span className="text-[11px] text-destructive truncate block">{b.uploadError}</span>
                ) : null}
              </div>
            </div>
          )
        },
        meta: {
          headerTitle: "Файл",
          headerClassName: DATA_GRID_CELL_PAD_FIRST,
          cellClassName: DATA_GRID_CELL_PAD_FIRST,
        },
      },
      {
        id: "server",
        accessorKey: "server",
        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
        cell: ({ row }) => (
          <span className="text-sm text-muted-foreground">{row.original.server}</span>
        ),
        meta: {
          headerTitle: "Сервер",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "size",
        accessorFn: (row) => row.sizeBytes,
        sortUndefined: "last",
        header: ({ column }) => <DataGridSortHeader column={column} title="Размер" />,
        cell: ({ row }) => (
          <span className="font-mono text-xs text-muted-foreground">{row.original.size}</span>
        ),
        meta: {
          headerTitle: "Размер",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "kind",
        accessorKey: "kind",
        header: ({ column }) => <DataGridSortHeader column={column} title="Тип" />,
        cell: ({ row }) => (
          <Badge
            variant={row.original.kind === "manual" ? "info-light" : "secondary"}
            size="sm"
            radius="full"
          >
            {row.original.kind === "auto" ? "авто" : "вручную"}
          </Badge>
        ),
        meta: {
          headerTitle: "Тип",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "storage",
        accessorKey: "storage",
        header: ({ column }) => <DataGridSortHeader column={column} title="Хранилище" />,
        cell: ({ row }) => {
          const badge = storageBadge(row.original.storage)
          return (
            <Badge variant={badge.variant} size="sm" radius="full">
              {badge.label}
            </Badge>
          )
        },
        meta: {
          headerTitle: "Хранилище",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "notes",
        accessorKey: "notes",
        header: ({ column }) => <DataGridSortHeader column={column} title="Заметки" />,
        cell: ({ row }) => (
          <span className="text-xs text-muted-foreground max-w-[200px] truncate block">
            {row.original.notes || "—"}
          </span>
        ),
        meta: {
          headerTitle: "Заметки",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "created",
        accessorKey: "created",
        header: ({ column }) => <DataGridSortHeader column={column} title="Создан" />,
        cell: ({ row }) => (
          <span className="text-xs text-muted-foreground">{row.original.created}</span>
        ),
        meta: {
          headerTitle: "Создан",
          headerClassName: DATA_GRID_CELL_PAD,
          cellClassName: DATA_GRID_CELL_PAD,
        },
      },
      {
        id: "actions",
        header: () => <span className="sr-only">Действия</span>,
        cell: ({ row }) => {
          const b = row.original
          return (
            <div className="flex items-center gap-1 justify-end sm:opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-11 min-w-[44px] min-h-[44px] sm:size-7 sm:min-w-0 sm:min-h-0"
                title="Скачать"
                aria-label={`Скачать ${b.filename}`}
                disabled={!canDownload}
                onClick={() => onDownload(b.id, b.filename)}
              >
                <DownloadIcon className="size-3.5" />
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-11 min-w-[44px] min-h-[44px] sm:size-7 sm:min-w-0 sm:min-h-0"
                title="Восстановить"
                aria-label={`Восстановить ${b.filename}`}
                disabled={!canWrite || !canRestore || !b.serverId}
                onClick={() => onRestore(b)}
              >
                <RefreshCwIcon className="size-3.5" />
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-11 min-w-[44px] min-h-[44px] sm:size-7 sm:min-w-0 sm:min-h-0 text-destructive hover:text-destructive"
                title="Удалить"
                aria-label={`Удалить ${b.filename}`}
                disabled={!canWrite}
                onClick={() => onDelete(b)}
              >
                <Trash2Icon className="size-3.5" />
              </Button>
            </div>
          )
        },
        enableSorting: false,
        size: 176,
        meta: {
          headerClassName: DATA_GRID_CELL_PAD_LAST,
          cellClassName: DATA_GRID_CELL_PAD_LAST,
        },
      },
    ],
    [onDelete, onDownload, onRestore, canWrite, canRestore, canDownload],
  )

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

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

  if (backups.length === 0) {
    return (
      <EmptyState
        icon={<HardDriveIcon className="size-5" />}
        title={emptyTitle}
        description={emptyDescription}
        action={emptyAction}
        className="border-0 py-10"
      />
    )
  }

  return <DataGridShell table={table} recordCount={backups.length}
    pagination={backups.length > 50 || pageSize !== 50}
    tableLayout={{ ...DEFAULT_DATA_GRID_LAYOUT, columnsPinnable: true }}>
    <DataGridContainer border={false} className="w-full rounded-none border-0">
      <DataGridScrollArea orientation="horizontal"><DataGridTable /></DataGridScrollArea>
    </DataGridContainer>
  </DataGridShell>
}

export { BackupsDataGrid, type BackupsDataGridProps }