import { useEffect, useRef } from 'react';
import {
  useCurrentConversationId,
  useSetCurrentConversationId,
} from '../contexts/ChatContext';
import { useSetIsSettingsModalOpen } from '../contexts/UIContext';
import { useAppRoute } from './useAppRoute';

export function useConversationRouteSync() {
  const currentConversationId = useCurrentConversationId();
  const setCurrentConversationId = useSetCurrentConversationId();
  const setIsSettingsModalOpen = useSetIsSettingsModalOpen();
  const { route, setRoute } = useAppRoute();
  const routeConversationIdRef = useRef<string | null>(null);
  const prevConversationIdRef = useRef<string | null>(currentConversationId);

  useEffect(() => {
    if (route.name === 'conversation') {
      routeConversationIdRef.current = route.conversationId;
      if (currentConversationId !== route.conversationId) {
        setCurrentConversationId(route.conversationId);
      }
      setIsSettingsModalOpen(false);
      return;
    }

    if (route.name === 'settings') {
      setIsSettingsModalOpen(true);
      return;
    }

    if (
      currentConversationId !== null &&
      currentConversationId === routeConversationIdRef.current
    ) {
      setCurrentConversationId(null);
      routeConversationIdRef.current = null;
    }
    setIsSettingsModalOpen(false);
  }, [
    currentConversationId,
    route,
    setCurrentConversationId,
    setIsSettingsModalOpen,
  ]);

  useEffect(() => {
    const previousConversationId = prevConversationIdRef.current;
    prevConversationIdRef.current = currentConversationId;

    if (route.name !== 'home') return;

    // Only auto-navigate when a new id appears, such as after creating a chat.
    if (currentConversationId && currentConversationId !== previousConversationId) {
      setRoute({ name: 'conversation', conversationId: currentConversationId }, { replace: true });
    }
  }, [currentConversationId, route, setRoute]);
}