MikrotikManager/components/data-grids/backups-data-grid.tsx

"use client"

import { useMemo, type ReactNode } from "react"
import {
  type ColumnDef,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table"
import type { Backup } from "@/lib/data"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/reui/badge"
import { IconTile } from "@/components/reui/icon-tile"
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 {
  CloudIcon,
  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
  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,
  emptyAction,
  emptyTitle = "Нет бэкапов",
  emptyDescription = "Создайте первый бэкап вручную или настройте расписание",
}: BackupsDataGridProps) {
  const columns = useMemo<ColumnDef<Backup>[]>(
    () => [
      {
        id: "filename",
        accessorKey: "filename",
        header: ({ column }) => <DataGridSortHeader column={column} title="Файл" />,
        cell: ({ row }) => {
          const b = row.original
          const inS3 = b.storage === "s3" || b.storage === "both"
          return (
            <div className="flex items-center gap-3 min-w-0">
              <IconTile
                variant="elevated"
                className={inS3 ? "size-10.5 shrink-0 text-info" : "size-10.5 shrink-0 text-muted-foreground"}
                aria-hidden="true"
              >
                {inS3 ? <CloudIcon /> : <HardDriveIcon />}
              </IconTile>
              <div className="min-w-0">
                <span className="font-mono text-xs font-medium block truncate">{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",
        accessorKey: "size",
        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 opacity-0 transition-opacity group-hover/row:opacity-100 focus-within:opacity-100">
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-7"
                title="Скачать"
                aria-label={`Скачать ${b.filename}`}
                onClick={() => onDownload(b.id, b.filename)}
              >
                <DownloadIcon className="size-3.5" />
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-7"
                title="Восстановить"
                aria-label={`Восстановить ${b.filename}`}
                onClick={() => onRestore(b)}
              >
                <RefreshCwIcon className="size-3.5" />
              </Button>
              <Button
                type="button"
                variant="ghost"
                size="icon"
                className="size-7 text-destructive hover:text-destructive"
                title="Удалить"
                aria-label={`Удалить ${b.filename}`}
                onClick={() => onDelete(b)}
              >
                <Trash2Icon className="size-3.5" />
              </Button>
            </div>
          )
        },
        enableSorting: false,
        size: 120,
        meta: {
          headerClassName: DATA_GRID_CELL_PAD_LAST,
          cellClassName: DATA_GRID_CELL_PAD_LAST,
        },
      },
    ],
    [onDelete, onDownload, onRestore],
  )

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

  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} />
}

export { BackupsDataGrid, type BackupsDataGridProps }