import { describe, it, expect } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { MemoryRouter } from 'react-router-dom';
import { server } from '@/test/server';
import { SearchBar } from '@/widgets/search-bar';

const API = '/api/v1';

function renderSearchBar() {
  const queryClient = new QueryClient({
    defaultOptions: { queries: { retry: false } },
  });

  return render(
    <QueryClientProvider client={queryClient}>
      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
        <SearchBar />
      </MemoryRouter>
    </QueryClientProvider>,
  );
}

describe('SearchBar', () => {
  it('renders search input', () => {
    renderSearchBar();

    expect(screen.getByPlaceholderText('Поиск акций и облигаций...')).toBeInTheDocument();
  });

  it('shows dropdown on focus', async () => {
    renderSearchBar();
    const input = screen.getByPlaceholderText('Поиск акций и облигаций...');

    await userEvent.type(input, 'sber');

    await waitFor(() => {
      expect(screen.getByText('Сбер')).toBeInTheDocument();
    });
  });

  it('shows loading state while fetching', async () => {
    server.use(http.get(`${API}/securities/search`, () => new Promise(() => {})));
    renderSearchBar();
    const input = screen.getByPlaceholderText('Поиск акций и облигаций...');

    await userEvent.type(input, 'sber');

    await waitFor(() => {
      expect(screen.getByText('Загрузка...')).toBeInTheDocument();
    });
  });

  it('shows no results message', async () => {
    server.use(
      http.get(`${API}/securities/search`, () =>
        HttpResponse.json({
          data: { data: [], meta: { fromCache: false, cachedAt: null } },
        }),
      ),
    );
    renderSearchBar();
    const input = screen.getByPlaceholderText('Поиск акций и облигаций...');

    await userEvent.type(input, 'zzzzz');

    await waitFor(() => {
      expect(screen.getByText('Ничего не найдено')).toBeInTheDocument();
    });
  });

  it('hides dropdown when clicking outside', async () => {
    renderSearchBar();
    const input = screen.getByPlaceholderText('Поиск акций и облигаций...');

    await userEvent.type(input, 'sber');

    await waitFor(() => {
      expect(screen.getByText('Сбер')).toBeInTheDocument();
    });

    await userEvent.click(document.body);

    await waitFor(() => {
      expect(screen.queryByText('Сбер')).not.toBeInTheDocument();
    });
  });
});