"use client"

import { GitCompareArrows } from "lucide-react"

import { ListPageCard } from "@/app/dashboard/_components"
import { PosReconciliationTable } from "@/components/xml-apis/pos-reconciliation/components/pos-reconciliation-table"
import { usePosReconciliation } from "@/components/xml-apis/pos-reconciliation/hooks/use-pos-reconciliation"
import { XmlApiErrorBanner } from "@/components/xml-apis/shared/xml-api-error-banner"
import type { PosReconciliationRun } from "@/components/xml-apis/pos-reconciliation/types"

type PosReconciliationListPageProps = {
  initialData?: PosReconciliationRun[]
  initialTotalCount?: number
  initialPage?: number
  initialPageSize?: number
  initialPageCount?: number
  initialErrorMessage?: string | null
}

export function PosReconciliationListPage({
  initialData = [],
  initialTotalCount = 0,
  initialPage = 1,
  initialPageSize = 10,
  initialPageCount = 1,
  initialErrorMessage = null,
}: PosReconciliationListPageProps) {
  const {
    data,
    totalCount,
    page,
    pageSize,
    pageCount,
    isLoading,
    isRefreshing,
    refresh,
    goToPage,
    changePageSize,
  } = usePosReconciliation({
    initialData,
    initialTotalCount,
    initialPage,
    initialPageSize,
    initialPageCount,
  })

  return (
    <ListPageCard
      icon={GitCompareArrows}
      title="POS Reconciliation"
      description="Review reconciliation runs between POS and Oxy position data."
      breadcrumb={[{ label: "XML API" }, { label: "POS Reconciliation" }]}
    >
      <XmlApiErrorBanner message={initialErrorMessage} />
      <PosReconciliationTable
        data={data}
        totalCount={totalCount}
        page={page}
        pageSize={pageSize}
        pageCount={pageCount}
        isLoading={isLoading || isRefreshing}
        onPageChange={goToPage}
        onPageSizeChange={changePageSize}
      />
    </ListPageCard>
  )
}