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

'use client';

import { useRouter, useParams } from 'next/navigation';
import { Anchor } from 'lucide-react';

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 { ColumnPicker } from '@/components/shared/column-picker';
import { EmptyState } from '@/components/shared/empty-state';
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { useTablePreferences } from '@/hooks/use-table-preferences';
import { BerthCard } from './berth-card';
import {
  berthColumns,
  BERTH_COLUMN_OPTIONS,
  BERTH_DEFAULT_HIDDEN,
  type BerthRow,
} from './berth-columns';
import { berthFilterDefinitions } from './berth-filters';
import { mooringLetterTone } from './mooring-letter-tone';

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

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

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

  // Persisted column visibility — same pattern as ClientList / InterestList.
  const { hidden, setHidden } = useTablePreferences('berths', BERTH_DEFAULT_HIDDEN);
  const columnVisibility = Object.fromEntries(hidden.map((id) => [id, false]));

  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 flex items-center gap-2">
          <SavedViewsDropdown
            entityType="berths"
            onApplyView={(savedFilters, _savedSort) => {
              clearFilters();
              Object.entries(savedFilters).forEach(([key, value]) => setFilter(key, value));
            }}
          />
          <ColumnPicker columns={BERTH_COLUMN_OPTIONS} hidden={hidden} onChange={setHidden} />
        </div>
      </div>

      <DataTable<BerthRow>
        columns={berthColumns}
        columnVisibility={columnVisibility}
        data={data}
        isLoading={isLoading}
        pagination={{
          page: pagination.page,
          pageSize: pagination.pageSize,
          total: pagination.total,
          totalPages: pagination.totalPages,
        }}
        onPaginationChange={(page, pageSize) => {
          setPage(page);
          setPageSize(pageSize);
        }}
        sort={sort}
        onSortChange={setSort}
        getRowId={(row) => row.id}
        onRowClick={(row) => router.push(`/${params.portSlug}/berths/${row.id}`)}
        getRowClassName={(row) => mooringLetterTone(row.mooringNumber)}
        cardRender={(row) => <BerthCard berth={row.original} />}
        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>
  );
}