"use client"

import { FileStack } from "lucide-react"
import { useRouter, useSearchParams } from "next/navigation"
import { Suspense, useMemo } from "react"

import { ListPageCard } from "@/app/dashboard/_components"
import { buildAssetXmlUploadViewHref } from "@/components/xml-apis/asset-xml-upload/data/asset-xml-upload-list-filters"
import { AssetXmlBankValuesTable } from "@/components/xml-apis/asset-xml-upload/components/asset-xml-bank-values-table"
import { AssetXmlUploadTable } from "@/components/xml-apis/asset-xml-upload/components/asset-xml-upload-table"
import { AssetXmlUploadToolbar } from "@/components/xml-apis/asset-xml-upload/components/asset-xml-upload-toolbar"
import {
  getAssetXmlBankByBankId,
  getAssetXmlBankSlugById,
  resolveAssetXmlBankId,
  type AssetXmlBankListFilters,
} from "@/components/xml-apis/asset-xml-upload/data/asset-xml-upload-banks"
import { parseAssetXmlBankListFilters } from "@/components/xml-apis/asset-xml-upload/data/asset-xml-upload-list-filters"
import { useAssetXmlBankValues } from "@/components/xml-apis/asset-xml-upload/hooks/use-asset-xml-bank-values"
import { useAssetXmlUpload } from "@/components/xml-apis/asset-xml-upload/hooks/use-asset-xml-upload"
import { XmlApiErrorBanner } from "@/components/xml-apis/shared/xml-api-error-banner"
import type { AssetXmlUpload, AssetXmlUploadViewData } from "@/components/xml-apis/asset-xml-upload/types"
import { Skeleton } from "@/components/ui/skeleton"

type AssetXmlUploadListPageProps = {
  initialData?: AssetXmlUpload[]
  initialTotalCount?: number
  initialPage?: number
  initialPageSize?: number
  initialPageCount?: number
  initialErrorMessage?: string | null
  bankId?: string
  filters?: AssetXmlBankListFilters
  initialBankView?: AssetXmlUploadViewData | null
}

function AssetXmlUploadListContent({
  initialData = [],
  initialTotalCount = 0,
  initialPage = 1,
  initialPageSize = 10,
  initialPageCount = 1,
  initialErrorMessage = null,
  bankId: initialBankId,
  initialBankView = null,
}: AssetXmlUploadListPageProps) {
  const searchParams = useSearchParams()
  const router = useRouter()
  const queryKey = searchParams.toString()
  const bankId =
    resolveAssetXmlBankId(searchParams.get("bank_id") ?? searchParams.get("bank")) ??
    initialBankId
  const filters = useMemo(
    () => (bankId ? parseAssetXmlBankListFilters(searchParams) : {}),
    [bankId, queryKey]
  )
  const currentPage = useMemo(
    () => Number(searchParams.get("page") ?? initialPage),
    [initialPage, queryKey]
  )
  const currentPageSize = useMemo(() => {
    const fallback = bankId ? 20 : initialPageSize
    return Number(searchParams.get("page_size") ?? fallback)
  }, [bankId, initialPageSize, queryKey])
  const activeBankId =
    getAssetXmlBankSlugById(bankId ?? "") ??
    searchParams.get("bank") ??
    undefined
  const bank = bankId ? getAssetXmlBankByBankId(bankId) : undefined

  const uploadList = useAssetXmlUpload({
    initialData,
    initialTotalCount,
    initialPage,
    initialPageSize,
    initialPageCount,
  })

  const bankValues = useAssetXmlBankValues({
    bankId: bankId ?? "",
    queryKey,
    page: currentPage,
    pageSize: currentPageSize,
    filters,
    initialBankView,
    initialTotalCount,
    initialPageCount,
  })

  const handleReupdateValues = (id: string, bankApiId?: string) => {
    router.push(
      buildAssetXmlUploadViewHref({
        uploadId: id,
        reupdate: true,
        bankId: bankApiId,
      })
    )
  }

  const isBankView = Boolean(bankId)
  const pageTitle = isBankView
    ? bankValues.bankView?.title ?? `${bank?.label ?? "Bank"} Asset XML Values`
    : "Asset XML Upload"
  const pageDescription = isBankView
    ? `Browse parsed asset XML values for ${bank?.label ?? "the selected bank"}.`
    : "Upload and manage asset XML files by bank. Import, filter, and delete records."

  return (
    <ListPageCard
      icon={FileStack}
      title={pageTitle}
      description={pageDescription}
      breadcrumb={[
        { label: "XML API" },
        { label: "Asset XML Upload" },
      ]}
      actions={
        <AssetXmlUploadToolbar
          isRefreshing={isBankView ? bankValues.isRefreshing : uploadList.isRefreshing}
          onRefresh={() =>
            void (isBankView ? bankValues.refresh() : uploadList.refresh())
          }
          activeBankId={activeBankId}
        />
      }
    >
      <XmlApiErrorBanner message={initialErrorMessage} />

      {isBankView && bankValues.bankView ? (
        <AssetXmlBankValuesTable
          bankView={bankValues.bankView}
          totalCount={bankValues.totalCount}
          page={bankValues.page}
          pageSize={bankValues.pageSize}
          pageCount={bankValues.pageCount}
          filters={bankValues.filters}
          isLoading={bankValues.isLoading || bankValues.isRefreshing}
          onFilterChange={bankValues.applyFilters}
          onPageChange={bankValues.goToPage}
          onPageSizeChange={bankValues.changePageSize}
        />
      ) : isBankView ? (
        <Skeleton className="h-64 w-full rounded-lg" />
      ) : (
        <AssetXmlUploadTable
          data={uploadList.data}
          totalCount={uploadList.totalCount}
          page={uploadList.page}
          pageSize={uploadList.pageSize}
          pageCount={uploadList.pageCount}
          isLoading={uploadList.isLoading || uploadList.isRefreshing}
          onDelete={uploadList.removeLocal}
          onDeleteTemp={(id) => uploadList.patchLocal(id, { inserted: false })}
          onReupdateValues={handleReupdateValues}
          onPageChange={uploadList.goToPage}
          onPageSizeChange={uploadList.changePageSize}
        />
      )}
    </ListPageCard>
  )
}

export function AssetXmlUploadListPage(props: AssetXmlUploadListPageProps) {
  return (
    <Suspense fallback={<Skeleton className="h-64 w-full rounded-lg" />}>
      <AssetXmlUploadListContent {...props} />
    </Suspense>
  )
}