'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 { 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) {
  // 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 ?? null;
  useEffect(() => {
    setChrome({ title: titleForChrome, showBackButton: true });
    return () => setChrome({ title: null, showBackButton: false });
  }, [titleForChrome, setChrome]);

  // 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"
    />
  );
}