"use client";

import { Layers } 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 { LIST_HREF } from "./constants";
import { IsinAssetsTable } from "./isin-assets-table";
import { IsinAssetsHeaderActions } from "./list-header-actions";
import type { IsinAssetRow } from "./schema";

type Props = {
  rows: IsinAssetRow[];
  filters: {
    isin: string;
    assetClassCode: string;
    inPortfolio: string;
  };
  totalCount: number;
  page: number;
  pageSize: number;
  pageCount: number;
  errorMessage?: string | null;
};

export function IsinAssetsPageClient({
  rows,
  filters,
  totalCount,
  page,
  pageSize,
  pageCount,
  errorMessage = null,
}: Props) {
  const { resetKey, isRefreshing, onRefresh } = useClearFiltersRefresh({
    clearToHref: LIST_HREF,
  });

  return (
    <ListPageCard
      icon={Layers}
      title="ISIN Assets"
      description="ISIN-level asset class and portfolio flags."
      breadcrumb={[{ label: "Master Table" }, { label: "ISIN Assets" }]}
      actions={
        <IsinAssetsHeaderActions isRefreshing={isRefreshing} onRefresh={onRefresh} />
      }
    >
      <ErrorBanner message={errorMessage} className="mb-4" />
      <IsinAssetsTable
        key={resetKey}
        data={rows}
        filters={filters}
        totalCount={totalCount}
        page={page}
        pageSize={pageSize}
        pageCount={pageCount}
      />
    </ListPageCard>
  );
}