import { test, expect } from '@playwright/test';
import { setupApiMocks, login, navigateTo } from './helpers';

test.describe('Global Search E2E', () => {
  test.beforeEach(async ({ page }) => {
    await setupApiMocks(page);
    await login(page);
  });

  test('search page renders with input and submit button', async ({ page }) => {
    await navigateTo(page, '/search');

    await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });
    await expect(page.locator('[data-testid="search-input"]')).toBeVisible();
    await expect(page.locator('[data-testid="search-submit-btn"]')).toBeVisible();
  });

  test('search for contact name shows results', async ({ page }) => {
    await navigateTo(page, '/search');

    await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });

    // Type search query
    await page.locator('[data-testid="search-input"]').fill('TechCorp');
    await page.locator('[data-testid="search-submit-btn"]').click();

    // Wait for results
    await expect(page.locator('[data-testid="search-results-list"], [data-testid="search-results-all"]')).toBeVisible({ timeout: 10_000 });

    // Should show at least one result
    const resultItem = page.locator('[data-testid^="search-result-"]').first();
    await expect(resultItem).toBeVisible({ timeout: 10_000 });
  });

  test('search results are grouped by type tabs', async ({ page }) => {
    await navigateTo(page, '/search');

    await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });

    await page.locator('[data-testid="search-input"]').fill('TechCorp');
    await page.locator('[data-testid="search-submit-btn"]').click();

    // Tabs should be visible
    await expect(page.locator('[data-testid="search-tabs"]')).toBeVisible({ timeout: 10_000 });
  });

  test('search with empty query shows all results', async ({ page }) => {
    await navigateTo(page, '/search');

    await expect(page.locator('[data-testid="global-search-page"]')).toBeVisible({ timeout: 10_000 });

    // Submit without typing
    await page.locator('[data-testid="search-submit-btn"]').click();

    // Should show results or empty state
    await expect(page.locator('[data-testid="search-results-list"], [data-testid="search-results-all"], [data-testid="search-query-display"]')).toBeVisible({ timeout: 10_000 });
  });

  test('search dropdown in topbar works', async ({ page }) => {
    // The topbar has a search dropdown
    await expect(page.locator('[data-testid="topbar"]')).toBeVisible();

    const searchDropdown = page.locator('[data-testid="search-dropdown"]');
    if (await searchDropdown.isVisible()) {
      // Type in search
      await searchDropdown.locator('input').fill('test');

      // Wait for results dropdown
      await expect(page.locator('[data-testid="search-results"]')).toBeVisible({ timeout: 10_000 });
    }
  });
});