import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { ConversationsPage, type ConversationFilters } from './conversations-page.js';

export function ConversationRoute() {
  const navigate = useNavigate();
  const { conversationId } = useParams<{ conversationId: string }>();
  const [searchParams, setSearchParams] = useSearchParams();
  const filterValue = searchParams.get('filter');
  const filters: ConversationFilters = {
    search: searchParams.get('q') ?? '',
    showSellers: searchParams.get('showSellers') === 'true',
    filter:
      filterValue === 'unread'
      || filterValue === 'awaiting-reply'
      || filterValue === 'received-images'
        ? filterValue
        : 'all',
  };

  function selectConversation(nextConversationId: string | null) {
    const suffix = searchParams.size > 0 ? `?${searchParams.toString()}` : '';
    void navigate(
      nextConversationId
        ? `/conversations/${encodeURIComponent(nextConversationId)}${suffix}`
        : `/conversations${suffix}`,
    );
  }

  function updateFilters(next: ConversationFilters) {
    const params = new URLSearchParams(searchParams);
    if (next.search) params.set('q', next.search); else params.delete('q');
    if (next.filter !== 'all') params.set('filter', next.filter); else params.delete('filter');
    if (next.showSellers) params.set('showSellers', 'true'); else params.delete('showSellers');
    setSearchParams(params, { replace: true });
  }

  return (
    <ConversationsPage
      selectedConversationId={conversationId ?? null}
      onSelectedConversationChange={selectConversation}
      filters={filters}
      onFiltersChange={updateFilters}
    />
  );
}