pn-new-crm/src/components/interests/interest-list.tsx

'use client';

import { useState } from 'react';
import { useParams } from 'next/navigation';
import { Plus, LayoutList, Kanban, Archive } from 'lucide-react';
import { useMutation, useQueryClient } from '@tanstack/react-query';

import { Button } from '@/components/ui/button';
import { DataTable } from '@/components/shared/data-table';
import { FilterBar } from '@/components/shared/filter-bar';
import { SavedViewsDropdown } from '@/components/shared/saved-views-dropdown';
import { PageHeader } from '@/components/shared/page-header';
import { EmptyState } from '@/components/shared/empty-state';
import { TableSkeleton } from '@/components/shared/loading-skeleton';
import { ArchiveConfirmDialog } from '@/components/shared/archive-confirm-dialog';
import { PermissionGate } from '@/components/shared/permission-gate';
import { InterestForm } from '@/components/interests/interest-form';
import { PipelineBoard } from '@/components/interests/pipeline-board';
import { interestFilterDefinitions } from '@/components/interests/interest-filters';
import { getInterestColumns, type InterestRow } from '@/components/interests/interest-columns';
import { InterestCard } from '@/components/interests/interest-card';
import { TagPicker } from '@/components/shared/tag-picker';
import { usePaginatedQuery } from '@/hooks/use-paginated-query';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { apiFetch } from '@/lib/api/client';
import { usePipelineStore } from '@/stores/pipeline-store';

export function InterestList() {
  const params = useParams<{ portSlug: string }>();
  const portSlug = params?.portSlug ?? '';
  const queryClient = useQueryClient();
  const { viewMode, setViewMode } = usePipelineStore();

  const [createOpen, setCreateOpen] = useState(false);
  const [editInterest, setEditInterest] = useState<InterestRow | null>(null);
  const [archiveInterest, setArchiveInterest] = useState<InterestRow | null>(null);

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

  useRealtimeInvalidation({
    'interest:created': [['interests']],
    'interest:updated': [['interests']],
    'interest:stageChanged': [['interests']],
    'interest:archived': [['interests']],
    'interest:berthLinked': [['interests']],
    'interest:berthUnlinked': [['interests']],
  });

  const archiveMutation = useMutation({
    mutationFn: (id: string) => apiFetch(`/api/v1/interests/${id}`, { method: 'DELETE' }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['interests'] });
      setArchiveInterest(null);
    },
  });

  const bulkArchiveMutation = useMutation({
    mutationFn: async (ids: string[]) => {
      // Concurrent fan-out - small batches in practice (page size cap = 100).
      // If a single delete fails the others still run; the rejected one
      // surfaces a toast via the standard apiFetch error path.
      await Promise.all(ids.map((id) => apiFetch(`/api/v1/interests/${id}`, { method: 'DELETE' })));
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['interests'] });
    },
  });

  const columns = getInterestColumns({
    portSlug,
    onEdit: (interest) => setEditInterest(interest),
    onArchive: (interest) => setArchiveInterest(interest),
  });

  return (
    <div className="space-y-4">
      <PageHeader
        title="Interests"
        description="Track prospective berth interest and pipeline"
        variant="gradient"
        actions={
          <div className="flex items-center gap-2">
            <div className="flex items-center border rounded-md overflow-hidden">
              <Button
                size="sm"
                variant={viewMode === 'table' ? 'default' : 'ghost'}
                className="rounded-none"
                onClick={() => setViewMode('table')}
              >
                <LayoutList className="h-4 w-4" />
              </Button>
              <Button
                size="sm"
                variant={viewMode === 'board' ? 'default' : 'ghost'}
                className="rounded-none"
                onClick={() => setViewMode('board')}
              >
                <Kanban className="h-4 w-4" />
              </Button>
            </div>
            <PermissionGate resource="interests" action="create">
              <Button size="sm" onClick={() => setCreateOpen(true)}>
                <Plus className="mr-1.5 h-4 w-4" />
                New Interest
              </Button>
            </PermissionGate>
          </div>
        }
      />

      <div className="flex flex-wrap items-center gap-2">
        <FilterBar
          filters={interestFilterDefinitions}
          values={filters}
          onChange={setFilter}
          onClear={clearFilters}
        />
        {/* Tag picker — primary use case is filtering by event/yacht-show
         *  ("Palm Beach 2026") that the rep tagged interests with at the
         *  show. The validator already accepts `tagIds` on listInterests;
         *  this surfaces the input in the filter UI. */}
        <div className="min-w-[200px]">
          <TagPicker
            selectedIds={Array.isArray(filters.tagIds) ? (filters.tagIds as string[]) : []}
            onChange={(ids) => setFilter('tagIds', ids)}
            placeholder="Filter by tag / event…"
          />
        </div>
        <SavedViewsDropdown
          entityType="interests"
          currentFilters={filters}
          currentSort={sort}
          onApplyView={(savedFilters) => {
            clearFilters();
            Object.entries(savedFilters).forEach(([key, val]) => setFilter(key, val));
          }}
        />
      </div>

      {viewMode === 'board' ? (
        <PipelineBoard />
      ) : isLoading ? (
        <TableSkeleton />
      ) : (
        <DataTable
          columns={columns}
          data={data}
          pagination={pagination}
          onPaginationChange={(p, ps) => {
            setPage(p);
            setPageSize(ps);
          }}
          sort={sort}
          onSortChange={setSort}
          isLoading={isFetching && !isLoading}
          getRowId={(row) => row.id}
          bulkActions={[
            {
              label: 'Archive',
              icon: Archive,
              variant: 'destructive',
              onClick: (ids) => {
                if (ids.length === 0) return;
                if (
                  !window.confirm(
                    `Archive ${ids.length} interest${ids.length === 1 ? '' : 's'}? This can be undone from the archived list.`,
                  )
                ) {
                  return;
                }
                bulkArchiveMutation.mutate(ids);
              },
            },
          ]}
          cardRender={(row) => (
            <InterestCard
              interest={row.original}
              portSlug={portSlug}
              onEdit={setEditInterest}
              onArchive={setArchiveInterest}
            />
          )}
          emptyState={
            <EmptyState
              title="No interests found"
              description="Get started by adding your first interest."
              action={{ label: 'New Interest', onClick: () => setCreateOpen(true) }}
            />
          }
        />
      )}

      {/* Mobile FAB - primary "New interest" affordance for the bottom-tab UX.
           Sits above the bottom nav (pb-safe-bottom + 70px tab height + 16px
           gap). Hidden on lg+ where the header button already does the job. */}
      <PermissionGate resource="interests" action="create">
        <button
          type="button"
          onClick={() => setCreateOpen(true)}
          aria-label="New interest"
          className="fixed bottom-[calc(env(safe-area-inset-bottom)+86px)] right-4 z-40 inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform hover:scale-105 active:scale-95 lg:hidden"
        >
          <Plus className="h-6 w-6" />
        </button>
      </PermissionGate>

      <InterestForm open={createOpen} onOpenChange={setCreateOpen} />

      {editInterest && (
        <InterestForm
          open={!!editInterest}
          onOpenChange={(open) => !open && setEditInterest(null)}
          interest={editInterest as unknown as Parameters<typeof InterestForm>[0]['interest']}
        />
      )}

      <ArchiveConfirmDialog
        open={!!archiveInterest}
        onOpenChange={(open) => !open && setArchiveInterest(null)}
        entityName={archiveInterest?.clientName ?? 'Interest'}
        entityType="Interest"
        isArchived={false}
        onConfirm={() => archiveInterest && archiveMutation.mutate(archiveInterest.id)}
        isLoading={archiveMutation.isPending}
      />
    </div>
  );
}