"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 { XrateXmlValuesTable } from "@/components/xml-apis/xrate-xml-upload/components/xrate-xml-values-table"
import { useXrateXmlUploadView } from "@/components/xml-apis/xrate-xml-upload/hooks/use-xrate-xml-upload-view"
import type { XrateXmlValuesFilters, XrateXmlUploadViewData } from "@/components/xml-apis/xrate-xml-upload/types"

const XRATE_XML_UPLOAD_LIST_PATH = "/dashboard/xml-apis/xrate-xml-upload"

type XrateXmlUploadViewPageProps = {
  uploadId: string
  initialView?: XrateXmlUploadViewData | null
  initialErrorMessage?: string | null
  serverResolved?: boolean
  initialFilters?: XrateXmlValuesFilters
  queryKey?: string
}

function XrateXmlUploadViewContent({
  uploadId,
  initialView = null,
  initialErrorMessage = null,
  serverResolved = false,
  initialFilters = {},
  queryKey = "",
}: XrateXmlUploadViewPageProps) {
  const {
    view,
    isLoading,
    errorMessage,
    filters,
    setPage,
    setPageSize,
    applyFilters,
    reload,
  } = useXrateXmlUploadView(uploadId, {
    initialView,
    initialErrorMessage,
    serverResolved,
    initialFilters,
    queryKey,
  })

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

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

  return (
    <ListPageCard
      title={view.title || "Bank XRate XML Values"}
      description={`Upload #${uploadId}`}
      breadcrumb={[
        { label: "XML API" },
        { label: "XRate XML Upload", href: XRATE_XML_UPLOAD_LIST_PATH },
        { label: "View Data" },
      ]}
      actions={
        <Button type="button" variant="outline" size="sm" onClick={() => void reload()}>
          Refresh
        </Button>
      }
    >
      <XrateXmlValuesTable
        view={view}
        filters={filters}
        isLoading={isLoading}
        onFilterChange={applyFilters}
        onPageChange={setPage}
        onPageSizeChange={setPageSize}
      />
    </ListPageCard>
  )
}

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