"use client"

import Link from "next/link"
import { Suspense } from "react"

import { ListPageCard } from "@/app/dashboard/_components"
import { ErrorBanner } from "@/components/shared/error-banner"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { AssetXmlBankValuesTable } from "@/components/xml-apis/asset-xml-upload/components/asset-xml-bank-values-table"
import type { AssetXmlBankListFilters } from "@/components/xml-apis/asset-xml-upload/data/asset-xml-upload-banks"
import { useAssetXmlUploadView } from "@/components/xml-apis/asset-xml-upload/hooks/use-asset-xml-upload-view"
import type { AssetXmlUploadViewData } from "@/components/xml-apis/asset-xml-upload/types"

const ASSET_XML_UPLOAD_LIST_PATH = "/dashboard/xml-apis/asset-xml-upload"

type AssetXmlUploadViewPageProps = {
  uploadId: string
  initialView?: AssetXmlUploadViewData | null
  initialErrorMessage?: string | null
  serverResolved?: boolean
  reupdate?: boolean
  bankApiId?: string
  initialFilters?: AssetXmlBankListFilters
  queryKey?: string
}

function AssetXmlUploadViewContent({
  uploadId,
  initialView = null,
  initialErrorMessage = null,
  serverResolved = false,
  reupdate = false,
  bankApiId,
  initialFilters = {},
  queryKey = "",
}: AssetXmlUploadViewPageProps) {
  const {
    view,
    isLoading,
    errorMessage,
    page,
    pageSize,
    filters,
    setPage,
    setPageSize,
    applyFilters,
    reload,
  } = useAssetXmlUploadView(uploadId, {
    initialView,
    initialErrorMessage,
    serverResolved,
    reupdate,
    bankApiId,
    initialFilters,
    queryKey,
  })

  if (isLoading && !view) {
    return <Skeleton className="h-[28rem] w-full rounded-lg" />
  }

  if (!view) {
    return (
      <ListPageCard
        title="Asset XML Values"
        description="View parsed asset XML data for this upload."
        breadcrumb={[
          { label: "XML API" },
          { label: "Asset XML Upload", href: ASSET_XML_UPLOAD_LIST_PATH },
          { label: "View Data" },
        ]}
      >
        <div className="space-y-3">
          <ErrorBanner message={errorMessage ?? initialErrorMessage} />
          <Link
            href={ASSET_XML_UPLOAD_LIST_PATH}
            className="text-sm text-primary hover:underline"
          >
            Back to asset XML upload list
          </Link>
        </div>
      </ListPageCard>
    )
  }

  return (
    <ListPageCard
      title={view.title || "Asset XML Values"}
      description={`Upload #${uploadId}`}
      breadcrumb={[
        { label: "XML API" },
        { label: "Asset XML Upload", href: ASSET_XML_UPLOAD_LIST_PATH },
        { label: reupdate ? "Update Values" : "View Data" },
      ]}
      actions={
        <Button type="button" variant="outline" size="sm" onClick={() => void reload()}>
          Refresh
        </Button>
      }
    >
      <AssetXmlBankValuesTable
        bankView={view}
        totalCount={view.totalCount}
        page={page}
        pageSize={pageSize}
        pageCount={view.pageCount}
        filters={filters}
        isLoading={isLoading}
        onFilterChange={applyFilters}
        onPageChange={setPage}
        onPageSizeChange={setPageSize}
      />
    </ListPageCard>
  )
}

export function AssetXmlUploadViewPage(props: AssetXmlUploadViewPageProps) {
  return (
    <Suspense fallback={<Skeleton className="h-[28rem] w-full rounded-lg" />}>
      <AssetXmlUploadViewContent {...props} />
    </Suspense>
  )
}