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

'use client';

import { useEffect, useState } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import { useQuery } from '@tanstack/react-query';

import { DetailLayout } from '@/components/shared/detail-layout';
import { useMobileChrome } from '@/components/layout/mobile/mobile-layout-provider';
import { apiFetch } from '@/lib/api/client';
import { useRealtimeInvalidation } from '@/hooks/use-realtime-invalidation';
import { BerthDetailHeader } from './berth-detail-header';
import { BerthForm } from './berth-form';
import { buildBerthTabs } from './berth-tabs';

interface BerthDetailProps {
  berthId: string;
}

export function BerthDetail({ berthId }: BerthDetailProps) {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const { data, isLoading } = useQuery<any>({
    queryKey: ['berth', berthId],
    queryFn: () =>
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      apiFetch<{ data: any }>(`/api/v1/berths/${berthId}`).then((r) => r.data),
  });

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

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

  // Auto-open edit sheet when ?edit=true is present in the URL
  const searchParams = useSearchParams();
  const router = useRouter();
  const [editOpen, setEditOpen] = useState(false);

  useEffect(() => {
    if (searchParams.get('edit') === 'true') {
      setEditOpen(true);
      // Strip the param without adding a history entry
      const params = new URLSearchParams(searchParams.toString());
      params.delete('edit');
      const newUrl = params.toString() ? `?${params.toString()}` : window.location.pathname;
      // typedRoutes can't statically validate this dynamic path; cast is safe
      // because we're always replacing within the same route segment.
      router.replace(newUrl as never);
    }
    // Only run once on mount / when searchParams changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchParams]);

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const berth = data as any;

  return (
    <>
      <DetailLayout
        isLoading={isLoading}
        header={berth ? <BerthDetailHeader berth={berth} /> : null}
        tabs={berth ? buildBerthTabs(berth) : []}
        defaultTab="overview"
      />
      {berth ? <BerthForm berth={berth} open={editOpen} onOpenChange={setEditOpen} /> : null}
    </>
  );
}