'use client';

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

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

interface BerthDetailProps {
  berthId: string;
}

export function BerthDetail({ berthId }: BerthDetailProps) {
  const { data, isLoading } = useQuery({
    queryKey: ['berth', berthId],
    queryFn: () =>
      apiFetch<{ data: Record<string, unknown> }>(`/api/v1/berths/${berthId}`).then((r) => r.data),
  });

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

  const berth = data as Record<string, unknown>;

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