pn-new-crm/src/components/clients/client-detail.tsx

'use client';

import { useEffect } from 'react';
import { useQuery } from '@tanstack/react-query';

import { DetailLayout } from '@/components/shared/detail-layout';
import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
import { ClientDetailHeader } from '@/components/clients/client-detail-header';
import { getClientTabs } from '@/components/clients/client-tabs';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { useBreadcrumbHint } from '@/hooks/use-breadcrumb-hint';
import { apiFetch } from '@/lib/api/client';
import type { Address } from '@/components/shared/addresses-editor';

interface ClientData {
  id: string;
  portId: string;
  fullName: string;
  nationalityIso: string | null;
  preferredContactMethod: string | null;
  preferredLanguage: string | null;
  timezone: string | null;
  source: string | null;
  sourceDetails: string | null;
  archivedAt: string | null;
  clientPortalEnabled: boolean;
  createdAt: string;
  updatedAt: string;
  contacts: Array<{
    id: string;
    channel: string;
    value: string;
    valueE164: string | null;
    valueCountry: string | null;
    label: string | null;
    isPrimary: boolean;
    notes: string | null;
  }>;
  tags: Array<{
    id: string;
    name: string;
    color: string;
  }>;
  yachts: Array<{
    id: string;
    name: string;
    hullNumber: string | null;
    registration: string | null;
    lengthFt: string | null;
    widthFt: string | null;
    status: string;
  }>;
  companies: Array<{
    membershipId: string;
    role: string;
    isPrimary: boolean;
    startDate: string | Date;
    company: {
      id: string;
      name: string;
      legalName: string | null;
      status: string;
    };
  }>;
  activeReservations: Array<{
    id: string;
    berthId: string;
    yachtId: string;
    startDate: string | Date;
    tenureType: string;
    status: string;
  }>;
  addresses: Address[];
}

interface ClientDetailProps {
  clientId: string;
  currentUserId?: string;
}

export function ClientDetail({ clientId, currentUserId }: ClientDetailProps) {
  const { data, isLoading } = useQuery<ClientData>({
    queryKey: ['clients', clientId],
    queryFn: () =>
      apiFetch<{ data: ClientData }>(`/api/v1/clients/${clientId}`).then((r) => r.data),
  });

  const { setChrome } = useMobileChrome();
  const titleForChrome: string | null = data?.fullName ?? null;
  useEffect(() => {
    setChrome({ title: titleForChrome, showBackButton: true });
    return () => setChrome({ title: null, showBackButton: false });
  }, [titleForChrome, setChrome]);

  // Topbar breadcrumb hint: replaces "Clients › <uuid>" with
  // "Clients › Mary Smith". Hint clears on unmount.
  useBreadcrumbHint(data ? { parents: [], current: data.fullName } : null);

  useRealtimeInvalidation({
    'client:updated': [['clients', clientId]],
    'client:archived': [['clients', clientId]],
    'client:restored': [['clients', clientId]],
    'yacht:ownership_transferred': [['clients', clientId]],
    'company_membership:added': [['clients', clientId]],
    'company_membership:ended': [['clients', clientId]],
    'berth_reservation:activated': [['clients', clientId]],
    'berth_reservation:ended': [['clients', clientId]],
    'berth_reservation:cancelled': [['clients', clientId]],
  });

  const tabs = data ? getClientTabs({ clientId, currentUserId, client: data }) : [];

  return (
    <DetailLayout
      header={data ? <ClientDetailHeader client={data} /> : null}
      tabs={tabs}
      defaultTab="overview"
      isLoading={isLoading}
    />
  );
}