"use client"

import type { ComponentType } from "react"
import type { LucideIcon } from "lucide-react"

import { ListPageCard } from "@/app/dashboard/_components"
import { XmlApiErrorBanner } from "@/components/xml-apis/shared/xml-api-error-banner"
import { XmlApiRefreshToolbar } from "@/components/xml-apis/shared/xml-api-refresh-toolbar"

export type XmlApiListPageProps<TItem> = {
  initialData?: TItem[]
  initialTotalCount?: number
  initialPage?: number
  initialPageSize?: number
  initialPageCount?: number
  initialErrorMessage?: string | null
}

type XmlApiListState<TItem> = {
  data: TItem[]
  totalCount: number
  page: number
  pageSize: number
  pageCount: number
  isLoading: boolean
  isRefreshing: boolean
  refresh: () => unknown
  goToPage: (page: number) => void
  changePageSize: (pageSize: number) => void
}

export type XmlApiListTableProps<TItem> = {
  data: TItem[]
  totalCount: number
  page: number
  pageSize: number
  pageCount: number
  isLoading?: boolean
  onPageChange?: (page: number) => void
  onPageSizeChange?: (pageSize: number) => void
}

export type XmlApiListPageConfig<TItem> = {
  icon: LucideIcon
  title: string
  description: string
  breadcrumbLabel: string
  useList: (props: XmlApiListPageProps<TItem>) => XmlApiListState<TItem>
  Table: ComponentType<XmlApiListTableProps<TItem>>
}

/**
 * Factory for the "fetch a paginated list, show it in a ListPageCard with a
 * refresh-only toolbar" pattern shared by the simplest xml-apis list pages
 * (e.g. temp-accrued, temp-market-price). Mirrors createXmlApiPaginatedListHook's
 * factory approach one layer up, in the page-composition layer.
 *
 * Only for pages whose only header action is Refresh — pages with bank
 * filters, bulk-insert workflows, or lookup dialogs (e.g. temp-data) need
 * their own toolbar/page and should not be forced through this factory.
 */
export function createXmlApiListPage<TItem>(config: XmlApiListPageConfig<TItem>) {
  const Table = config.Table

  return function XmlApiListPage({
    initialData = [],
    initialTotalCount = 0,
    initialPage = 1,
    initialPageSize = 10,
    initialPageCount = 1,
    initialErrorMessage = null,
  }: XmlApiListPageProps<TItem>) {
    const {
      data,
      totalCount,
      page,
      pageSize,
      pageCount,
      isLoading,
      isRefreshing,
      refresh,
      goToPage,
      changePageSize,
    } = config.useList({
      initialData,
      initialTotalCount,
      initialPage,
      initialPageSize,
      initialPageCount,
    })

    return (
      <ListPageCard
        icon={config.icon}
        title={config.title}
        description={config.description}
        breadcrumb={[{ label: "XML API" }, { label: config.breadcrumbLabel }]}
        actions={
          <XmlApiRefreshToolbar isRefreshing={isRefreshing} onRefresh={() => void refresh()} />
        }
      >
        <XmlApiErrorBanner message={initialErrorMessage} />
        <Table
          data={data}
          totalCount={totalCount}
          page={page}
          pageSize={pageSize}
          pageCount={pageCount}
          isLoading={isLoading || isRefreshing}
          onPageChange={goToPage}
          onPageSizeChange={changePageSize}
        />
      </ListPageCard>
    )
  }
}