"use client"

import { ArrowLeftRight } from "lucide-react"

import { ListPageCard } from "@/app/dashboard/_components"
import { useClearFiltersRefresh } from "@/app/dashboard/_components/data-table"
import { ErrorBanner } from "@/components/shared/error-banner"

import { CurrencyConversionTable } from "./currency-conversion-table"
import { CurrencyConversionTabs } from "./currency-conversion-tabs"
import { CurrencyConversionHeaderActions } from "./list-header-actions"
import { listHref, LIST_HREF, type CurrencyConversionTab } from "./constants"
import type { CurrencyConversionRow } from "./schema"
import type { CurrencyConversionTabOption } from "../_lib/currency-conversion-server-api"

type Props = {
  activeTab: CurrencyConversionTab
  filters: {
    srNo: string
    isin: string
    name: string
    fromCurrency: string
    toCurrency: string
    conversionRate: string
    conversionRateCurrency: string
    dataUpdateDate: string
    conversionRateDate2: string
  }
  data: CurrencyConversionRow[]
  tabs: CurrencyConversionTabOption[]
  totalCount: number
  page: number
  pageSize: number
  pageCount: number
  errorMessage?: string | null
}

export function CurrencyConversionPageClient({
  activeTab,
  filters,
  data,
  tabs,
  totalCount,
  page,
  pageSize,
  pageCount,
  errorMessage = null,
}: Props) {
  const clearToHref = listHref({ tab: activeTab, page: 1, pageSize })
  const { resetKey, isRefreshing, onRefresh } = useClearFiltersRefresh({
    clearToHref: clearToHref === LIST_HREF ? LIST_HREF : clearToHref,
  })

  return (
    <ListPageCard
      icon={ArrowLeftRight}
      title="Currency Conversion"
      description="FX conversion rates by ISIN and currency pair."
      breadcrumb={[{ label: "Master Table" }, { label: "Currency Conversion" }]}
      actions={
        <CurrencyConversionHeaderActions
          isRefreshing={isRefreshing}
          onRefresh={onRefresh}
        />
      }
    >
      <ErrorBanner message={errorMessage} className="mb-4" />
      <div className="space-y-4">
        <CurrencyConversionTabs
          activeTab={activeTab}
          tabs={tabs}
          pageSize={pageSize}
        />
        <CurrencyConversionTable
          key={`${activeTab}-${page}-${pageSize}-${resetKey}`}
          data={data}
          filters={filters}
          activeTab={activeTab}
          totalCount={totalCount}
          page={page}
          pageSize={pageSize}
          pageCount={pageCount}
        />
      </div>
    </ListPageCard>
  )
}