"use client"

import { Building2 } from "lucide-react"
import { useRouter, useSearchParams } from "next/navigation"
import * as React from "react"
import { Suspense, useTransition } from "react"

import { ListPageCard } from "@/app/dashboard/_components"
import { Skeleton } from "@/components/ui/skeleton"
import { AllBanksTable } from "@/components/xml-apis/all-banks/components/all-banks-table"
import {
  ALL_BANKS_DEFAULT_PAGE_SIZE,
  buildAllBanksListHref,
  parseAllBanksListFilters,
} from "@/components/xml-apis/all-banks/data/all-banks-list-filters"
import { useAllBanks } from "@/components/xml-apis/all-banks/hooks/use-all-banks"
import { XmlApiErrorBanner } from "@/components/xml-apis/shared/xml-api-error-banner"
import { XmlApiRefreshToolbar } from "@/components/xml-apis/shared/xml-api-refresh-toolbar"
import type {
  AllBankRow,
  AllBanksCurrencyOption,
  AllBanksListFilters,
} from "@/components/xml-apis/all-banks/types"

const EMPTY_ROWS: AllBankRow[] = []
const EMPTY_CURRENCY_OPTIONS: AllBanksCurrencyOption[] = []

type AllBanksListPageProps = {
  initialData?: AllBankRow[]
  initialTotalCount?: number
  initialPage?: number
  initialPageSize?: number
  initialPageCount?: number
  initialCurrencyOptions?: AllBanksCurrencyOption[]
  initialErrorMessage?: string | null
  initialFilters?: AllBanksListFilters
}

function AllBanksListContent({
  initialData = EMPTY_ROWS,
  initialTotalCount = 0,
  initialPage = 1,
  initialPageSize = ALL_BANKS_DEFAULT_PAGE_SIZE,
  initialPageCount = 1,
  initialCurrencyOptions = EMPTY_CURRENCY_OPTIONS,
  initialErrorMessage = null,
  initialFilters = {},
}: AllBanksListPageProps) {
  const router = useRouter()
  const searchParams = useSearchParams()
  const [isPending, startTransition] = useTransition()

  const filters = React.useMemo(() => {
    const fromUrl = parseAllBanksListFilters(searchParams)
    const hasUrlFilters = Object.values(fromUrl).some(Boolean)
    return hasUrlFilters ? fromUrl : initialFilters
  }, [initialFilters, searchParams])

  const pageFromUrl = Number(searchParams.get("page") ?? String(initialPage))
  const pageSizeFromUrl = Number(
    searchParams.get("page_size") ?? String(initialPageSize)
  )
  const urlPage =
    Number.isFinite(pageFromUrl) && pageFromUrl > 0 ? pageFromUrl : initialPage
  const urlPageSize =
    Number.isFinite(pageSizeFromUrl) && pageSizeFromUrl > 0
      ? pageSizeFromUrl
      : initialPageSize

  const {
    data,
    totalCount,
    page,
    pageSize,
    pageCount,
    currencyOptions,
    isLoading,
    isRefreshing,
    savingId,
    refresh,
    updateReportingCurrency,
  } = useAllBanks({
    initialData,
    initialTotalCount,
    initialPage,
    initialPageSize,
    initialPageCount,
    initialCurrencyOptions,
    filters,
    page: urlPage,
    pageSize: urlPageSize,
  })

  const navigateList = React.useCallback(
    (
      next: {
        filters?: AllBanksListFilters
        page?: number
        pageSize?: number
      },
      options?: { replace?: boolean }
    ) => {
      const href = buildAllBanksListHref(next.filters ?? filters, {
        page: next.page ?? urlPage,
        pageSize: next.pageSize ?? urlPageSize,
      })

      startTransition(() => {
        if (options?.replace) {
          router.replace(href, { scroll: false })
          return
        }
        router.push(href, { scroll: false })
      })
    },
    [filters, router, urlPage, urlPageSize]
  )

  return (
    <ListPageCard
      icon={Building2}
      title="All Banks"
      description="Browse bank accounts with subdomain and corporate mappings."
      breadcrumb={[{ label: "XML API" }, { label: "All Banks" }]}
      actions={
        <XmlApiRefreshToolbar isRefreshing={isRefreshing} onRefresh={() => void refresh()} />
      }
    >
      <XmlApiErrorBanner message={initialErrorMessage} />
      <AllBanksTable
        data={data}
        totalCount={totalCount}
        page={page}
        pageSize={pageSize}
        pageCount={pageCount}
        isLoading={isLoading || isRefreshing || isPending}
        filters={filters}
        currencyOptions={currencyOptions}
        savingId={savingId}
        onPageChange={(nextPage) => navigateList({ page: nextPage })}
        onPageSizeChange={(nextPageSize) =>
          navigateList({ page: 1, pageSize: nextPageSize }, { replace: true })
        }
        onFiltersChange={(nextFilters) =>
          navigateList({ filters: nextFilters, page: 1 }, { replace: true })
        }
        onUpdateReportingCurrency={(row, currencyId) =>
          void updateReportingCurrency(row, currencyId)
        }
      />
    </ListPageCard>
  )
}

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