"use client";

import { Braces } 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 { AssetFieldDefinitionTable } from "./asset-field-definition-table";
import { AssetFieldDefinitionHeaderActions } from "./list-header-actions";
import type { AssetFieldDefinitionRow } from "./schema";

type Props = {
  rows: AssetFieldDefinitionRow[];
  filters: {
    apiField: string;
    oxyField: string;
    module: string;
    info: string;
  };
  totalCount: number;
  page: number;
  pageSize: number;
  pageCount: number;
  errorMessage?: string | null;
};

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

  return (
    <ListPageCard
      icon={Braces}
      title="Asset Field Definition"
      description="Map API fields to Oxy fields by module and file type."
      breadcrumb={[
        { label: "Master Table" },
        { label: "Asset Field Definition" },
      ]}
      actions={
        <AssetFieldDefinitionHeaderActions
          isRefreshing={isRefreshing}
          onRefresh={onRefresh}
        />
      }
    >
      <ErrorBanner message={errorMessage} className="mb-4" />
      <AssetFieldDefinitionTable
        key={resetKey}
        data={rows}
        filters={filters}
        totalCount={totalCount}
        page={page}
        pageSize={pageSize}
        pageCount={pageCount}
      />
    </ListPageCard>
  );
}