"use client";

import { Link2 } 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 { UnderlyingAliasHeaderActions } from "./list-header-actions";
import { UnderlyingAliasTable } from "./underlying-alias-table";
import type { UnderlyingAliasRow } from "./schema";

type Props = {
  rows: UnderlyingAliasRow[];
  filters: {
    aliasCode: string;
    aliasIsin: string;
    aliasSource: string;
  };
  totalCount: number;
  page: number;
  pageSize: number;
  pageCount: number;
  errorMessage?: string | null;
};

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

  return (
    <ListPageCard
      icon={Link2}
      title="Underlying Alias"
      description="Manage OCR and bank ticker to real ISIN mappings for structure and accumulator upload review."
      breadcrumb={[{ label: "Master Table" }, { label: "Underlying Alias" }]}
      actions={
        <UnderlyingAliasHeaderActions isRefreshing={isRefreshing} onRefresh={onRefresh} />
      }
    >
      <ErrorBanner message={errorMessage} className="mb-4" />
      <UnderlyingAliasTable
        key={resetKey}
        data={rows}
        filters={filters}
        totalCount={totalCount}
        page={page}
        pageSize={pageSize}
        pageCount={pageCount}
      />
    </ListPageCard>
  );
}