"use client"

import { FileCode2 } from "lucide-react"

import { ListPageCard } from "@/app/dashboard/_components"
import { BankApisTable } from "@/components/xml-apis/bank-api/components/bank-apis-table"
import { BankApisToolbar } from "@/components/xml-apis/bank-api/components/bank-apis-toolbar"
import { useBankApis } from "@/components/xml-apis/bank-api/hooks/use-bank-apis"
import { XmlApiErrorBanner } from "@/components/xml-apis/shared/xml-api-error-banner"
import type { BankApi } from "@/components/xml-apis/bank-api/types"

type BankApisListPageProps = {
  initialData?: BankApi[]
  initialTotalCount?: number
  initialErrorMessage?: string | null
}

export function BankApisListPage({
  initialData = [],
  initialTotalCount = 0,
  initialErrorMessage = null,
}: BankApisListPageProps) {
  const { data, totalCount, isLoading, isRefreshing, refresh } = useBankApis({
    initialData,
    initialTotalCount,
  })

  return (
    <ListPageCard
      icon={FileCode2}
      title="Bank APIs"
      description="Manage bank API connections, credentials, and XML field mappings."
      breadcrumb={[
        { label: "XML API" },
        { label: "Bank APIs" },
      ]}
      actions={
        <BankApisToolbar
          isRefreshing={isRefreshing}
          onRefresh={() => void refresh()}
        />
      }
    >
      <XmlApiErrorBanner message={initialErrorMessage} />
      <BankApisTable
        data={data}
        totalCount={totalCount}
        isLoading={isLoading}
      />
    </ListPageCard>
  )
}