import { Tags } from "lucide-react";

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

import { NormalizeAssetTypesTable } from "./_components/normalize-asset-types-table";
import { parseNormalizeAssetTypesSearchParams } from "./_components/constants";
import { NormalizeAssetTypesHeaderActions } from "./_components/list-header-actions";
import { fetchBackendNormalizeAssetTypes } from "./_lib/normalize-asset-types-server-api";

type NormalizeAssetTypesPageProps = {
  searchParams: Promise<{
    bank_name?: string;
    a_type?: string;
    a_class?: string;
    page?: string;
    page_size?: string;
  }>;
};

export default async function NormalizeAssetTypesPage({
  searchParams,
}: NormalizeAssetTypesPageProps) {
  const query = parseNormalizeAssetTypesSearchParams(await searchParams);

  const { rows, totalCount, page, pageSize, pageCount, errorMessage, assetTypeOptions } =
    await fetchBackendNormalizeAssetTypes({
      bankName: query.bankName,
      tag: query.tag,
      assetClass: query.assetClass,
      page: query.page,
      pageSize: query.pageSize,
    });

  return (
    <ListPageCard
      icon={Tags}
      title="Normalize Asset Types"
      description="Map bank tags and asset classes to asset type definitions."
      breadcrumb={[
        { label: "Master Table" },
        { label: "Normalize Asset Types" },
      ]}
      actions={<NormalizeAssetTypesHeaderActions />}
    >
      <ErrorBanner message={errorMessage} className="mb-4" />
      <NormalizeAssetTypesTable
        data={rows}
        totalCount={totalCount}
        page={page}
        pageSize={pageSize}
        pageCount={pageCount}
        assetTypeOptions={assetTypeOptions}
        initialFilters={{
          bankName: query.bankName,
          tag: query.tag,
          assetClass: query.assetClass,
        }}
      />
    </ListPageCard>
  );
}