pn-new-crm/src/components/berths/berth-list.tsx

'use client';

import { useRouter, useParams } from 'next/navigation';

import { DataTable } from '@/components/shared/data-table';
import { FilterBar } from '@/components/shared/filter-bar';
import { PageHeader } from '@/components/shared/page-header';
import { SavedViewsDropdown } from '@/components/shared/saved-views-dropdown';
import { EmptyState } from '@/components/shared/empty-state';
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { berthColumns, type BerthRow } from './berth-columns';
import { berthFilterDefinitions } from './berth-filters';
import { Anchor } from 'lucide-react';

export function BerthList() {
  const router = useRouter();
  const params = useParams<{ portSlug: string }>();

  const { data, pagination, isLoading, sort, setSort, filters, setFilter, clearFilters, setPage } =
    usePaginatedQuery<BerthRow>({
      queryKey: ['berths'],
      endpoint: '/api/v1/berths',
      filterDefinitions: berthFilterDefinitions,
    });

  useRealtimeInvalidation({
    'berth:updated': [['berths']],
    'berth:statusChanged': [['berths']],
  });

  return (
    <div className="space-y-6">
      <PageHeader
        title="Berths"
        description="View and manage berth allocations"
        variant="gradient"
        // No "New" button — berths are import-only
      />

      <div className="flex items-center gap-2 flex-wrap">
        <FilterBar
          filters={berthFilterDefinitions}
          values={filters}
          onChange={setFilter}
          onClear={clearFilters}
        />
        <div className="ml-auto">
          <SavedViewsDropdown
            entityType="berths"
            currentFilters={filters}
            currentSort={sort}
            onApplyView={(savedFilters, _savedSort) => {
              clearFilters();
              Object.entries(savedFilters).forEach(([key, value]) => setFilter(key, value));
            }}
          />
        </div>
      </div>

      <DataTable<BerthRow>
        columns={berthColumns}
        data={data}
        isLoading={isLoading}
        pagination={{
          page: pagination.page,
          pageSize: pagination.pageSize,
          total: pagination.total,
          totalPages: pagination.totalPages,
        }}
        onPaginationChange={(page) => setPage(page)}
        sort={sort}
        onSortChange={setSort}
        getRowId={(row) => row.id}
        onRowClick={(row) => router.push(`/${params.portSlug}/berths/${row.id}`)}
        emptyState={
          <EmptyState
            icon={Anchor}
            title="No berths found"
            description="Berths are imported from external sources. Adjust your filters to find what you're looking for."
          />
        }
      />
    </div>
  );
}