import { AlertTriangle } from "lucide-react";

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

import {
  parseMissingAssetMarketDataSearchParams,
} from "./_components/constants";
import { MissingAssetMarketDataHeaderActions } from "./_components/list-header-actions";
import { MissingAssetMarketDataTable } from "./_components/missing-asset-market-data-table";
import { fetchBackendMissingAssetMarketData } from "./_lib/missing-asset-market-data-server-api";

type PageProps = {
  searchParams: Promise<{
    isin?: string;
    base_asset_class?: string;
    page?: string;
    page_size?: string;
  }>;
};

export default async function MissingAssetMarketDataPage({
  searchParams,
}: PageProps) {
  const params = await searchParams;
  const query = parseMissingAssetMarketDataSearchParams(params);
  const { rows, totalCount, page, pageSize, pageCount, errorMessage } =
    await fetchBackendMissingAssetMarketData(query);

  return (
    <ListPageCard
      icon={AlertTriangle}
      title="Missing Asset Market Data Report"
      description="ISINs with incomplete asset detail records or missing required fields in master tables."
      breadcrumb={[
        { label: "Master Table" },
        { label: "Missing Asset Market Data" },
      ]}
      actions={<MissingAssetMarketDataHeaderActions />}
    >
      <ErrorBanner message={errorMessage} className="mb-4" />
      <MissingAssetMarketDataTable
        data={rows}
        filters={query}
        totalCount={totalCount}
        page={page}
        pageSize={pageSize}
        pageCount={pageCount}
      />
    </ListPageCard>
  );
}