"use client"

import { Suspense } from "react"

import { DataChangeLogTable } from "./data-change-log-table"
import { DataChangeLogFilters } from "./data-change-log-filters"
import { AuditLogTableSkeleton } from "./audit-log-table-skeleton"
import { useLogPagination } from "../hooks/use-log-pagination"
import type { DataChangeLog, DataChangeStat } from "../types"

interface DataChangeLogViewProps {
  items: DataChangeLog[]
  page: number
  pageSize: number
  total: number
  totalPages: number
  tableOptions: string[]
  stats: DataChangeStat[]
}

function DataChangeLogViewInner({
  items,
  page,
  pageSize,
  total,
  totalPages,
  tableOptions,
  stats,
}: DataChangeLogViewProps) {
  const handlePageChange = useLogPagination()

  return (
    <div className="space-y-4">
      <DataChangeLogFilters tableOptions={tableOptions} stats={stats} />
      <DataChangeLogTable
        items={items}
        page={page}
        pageSize={pageSize}
        total={total}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
    </div>
  )
}

export function DataChangeLogView(props: DataChangeLogViewProps) {
  return (
    <Suspense fallback={<AuditLogTableSkeleton />}>
      <DataChangeLogViewInner {...props} />
    </Suspense>
  )
}
