'use client';

import { useMemo } from 'react';
import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs';
import { useSuspenseQuery } from '@tanstack/react-query';
import { DataTable } from '@/components/ui/table/data-table';
import { DataTableToolbar } from '@/components/ui/table/data-table-toolbar';
import { useDataTable } from '@/hooks/use-data-table';
import { getSortingStateParser } from '@/lib/parsers';
import { quotationsQueryOptions } from '../api/queries';
import type { QuotationReferenceData } from '../api/types';
import { getQuotationColumns } from './quotation-columns';

export function QuotationsTable({
  referenceData,
  canUpdate,
  canDelete
}: {
  referenceData: QuotationReferenceData;
  canUpdate: boolean;
  canDelete: boolean;
}) {
  const columns = useMemo(
    () => getQuotationColumns({ referenceData, canUpdate, canDelete }),
    [referenceData, canUpdate, canDelete]
  );
  const columnIds = columns.map((column) => column.id).filter(Boolean) as string[];
  const [params] = useQueryStates({
    page: parseAsInteger.withDefault(1),
    perPage: parseAsInteger.withDefault(10),
    name: parseAsString,
    status: parseAsString,
    quotationType: parseAsString,
    branch: parseAsString,
    customer: parseAsString,
    opportunity: parseAsString,
    hot: parseAsString,
    sort: getSortingStateParser(columnIds).withDefault([])
  });

  const filters = {
    page: params.page,
    limit: params.perPage,
    ...(params.name && { search: params.name }),
    ...(params.status && { status: params.status }),
    ...(params.quotationType && { quotationType: params.quotationType }),
    ...(params.branch && { branch: params.branch }),
    ...(params.customer && { customer: params.customer }),
    ...(params.opportunity && { opportunity: params.opportunity }),
    ...(params.hot && { hot: params.hot }),
    ...(params.sort.length > 0 && { sort: JSON.stringify(params.sort) })
  };

  const { data } = useSuspenseQuery(quotationsQueryOptions(filters));
  const pageCount = Math.ceil(data.totalItems / params.perPage);
  const { table } = useDataTable({
    data: data.items,
    columns,
    pageCount,
    shallow: true,
    debounceMs: 500,
    initialState: {
      columnPinning: { right: ['actions'] }
    }
  });

  return (
    <DataTable table={table}>
      <DataTableToolbar table={table} />
    </DataTable>
  );
}