"use client";

import { getCoreRowModel, useReactTable, type Header } from "@tanstack/react-table";

import {
  DataTablePagination,
  DataTableShell,
  MasterTextFilterCell,
  useServerPagination,
  type ServerPaginationMeta,
} from "@/app/dashboard/_components/data-table";
import { useMasterListFilters } from "@/hooks/use-master-list-filters";
import { Button } from "@/components/ui/button";

import { businessTypeColumns } from "./columns";
import type { BusinessTypeFilters, BusinessTypeRow } from "./schema";
import { exportBusinessTypesCsv } from "./export-csv";

const FILTER_KEYS = ["name"] as const;

type Props = {
  data: BusinessTypeRow[];
  initialFilters: BusinessTypeFilters;
  pagination: ServerPaginationMeta;
};

export function BusinessTypesTable({ data, initialFilters, pagination: serverPagination }: Props) {
  const { drafts, setDraft } = useMasterListFilters(initialFilters, FILTER_KEYS, FILTER_KEYS);
  const { pagination, onPaginationChange, totalCount } = useServerPagination(serverPagination);

  const table = useReactTable({
    data,
    columns: businessTypeColumns,
    state: { pagination },
    onPaginationChange,
    manualPagination: true,
    pageCount: serverPagination.pageCount,
    rowCount: totalCount,
    getCoreRowModel: getCoreRowModel(),
    getRowId: (row) => String(row.id),
  });

  const renderFilterCell = (header: Header<BusinessTypeRow, unknown>) =>
    header.column.id === "name" ? (
      <MasterTextFilterCell
        cellKey={header.id}
        value={drafts.name}
        placeholder="Name"
        onChange={(value) => setDraft("name", value)}
      />
    ) : null;

  return (
    <div className="space-y-4">
      <div className="flex justify-end">
        <Button type="button" variant="secondary" size="sm" onClick={() => exportBusinessTypesCsv(data)}>
          Export filtered
        </Button>
      </div>

      <DataTableShell
        table={table}
        columnCount={businessTypeColumns.length}
        emptyMessage="No business types match your filters."
        renderFilterCell={renderFilterCell}
      />

      <DataTablePagination
        table={table}
        totalRows={totalCount}
        itemNoun="business type"
        idPrefix="business-types"
      />
    </div>
  );
}