EvoBGP/apps/web/src/components/data-grid-shell.tsx

import type { ReactNode } from 'react'
import type { Table } from '@tanstack/react-table'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'

import { DataGridToolbar } from '@/components/data-grid-toolbar'
import { DataGridPagination } from '@/components/reui/data-grid/data-grid-pagination'
import { DataGrid, DataGridContainer } from '@/components/reui/data-grid/data-grid'
import { DataGridTable } from '@/components/reui/data-grid/data-grid-table'
import {
  DATA_GRID_PAGINATION_RU,
  DATA_GRID_TABLE_LAYOUT,
} from '@/lib/data-grid-defaults'

interface DataGridShellProps<TData extends object> {
  table: Table<TData>
  recordCount: number
  isLoading?: boolean
  emptyMessage?: ReactNode
  showPagination?: boolean
  tableLayout?: typeof DATA_GRID_TABLE_LAYOUT
  className?: string
  onRowClick?: (row: TData) => void
}

export function DataGridShell<TData extends object>({
  table,
  recordCount,
  isLoading = false,
  emptyMessage,
  showPagination = true,
  tableLayout = DATA_GRID_TABLE_LAYOUT,
  className,
  onRowClick,
}: DataGridShellProps<TData>) {
  return (
    <DataGrid
      table={table}
      recordCount={recordCount}
      isLoading={isLoading}
      emptyMessage={emptyMessage}
      tableLayout={tableLayout}
      className={className}
      onRowClick={onRowClick}
    >
      <DataGridContainer>
        <DataGridTable />
      </DataGridContainer>
      {showPagination ? (
        <div className="border-t px-4 py-3">
          <DataGridPagination {...DATA_GRID_PAGINATION_RU} />
        </div>
      ) : null}
    </DataGrid>
  )
}

interface DataGridCardProps {
  title?: string
  description?: string
  actions?: ReactNode
  children: ReactNode
  className?: string
}

export function DataGridCard({ title, description, actions, children, className }: DataGridCardProps) {
  const hasHeader = Boolean(title || description || actions)
  return (
    <Card className={className ?? 'gap-0'}>
      {hasHeader ? (
        <CardHeader className="flex flex-row items-center justify-between border-b py-3">
          <div className="flex flex-col gap-0.5">
            {title ? <CardTitle className="text-base">{title}</CardTitle> : null}
            {description ? <CardDescription>{description}</CardDescription> : null}
          </div>
          {actions ? <div className="flex shrink-0 items-center gap-2">{actions}</div> : null}
        </CardHeader>
      ) : null}
      <CardContent className="p-0">{children}</CardContent>
    </Card>
  )
}

interface DataGridSectionProps<TData extends object> extends DataGridShellProps<TData> {
  searchValue: string
  onSearchChange: (value: string) => void
  searchPlaceholder?: string
  toolbarFilters?: ReactNode
  toolbarActions?: ReactNode
  beforeGrid?: ReactNode
}

export function DataGridSection<TData extends object>({
  searchValue,
  onSearchChange,
  searchPlaceholder,
  toolbarFilters,
  toolbarActions,
  beforeGrid,
  ...shellProps
}: DataGridSectionProps<TData>) {
  return (
    <>
      <DataGridToolbar
        searchValue={searchValue}
        onSearchChange={onSearchChange}
        searchPlaceholder={searchPlaceholder}
        filters={toolbarFilters}
        actions={toolbarActions}
      />
      {beforeGrid}
      <DataGridShell {...shellProps} />
    </>
  )
}