import { test, expect } from '@playwright/test';

test.describe('Search Page', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/search');
  });

  test('shows search bar with placeholder', async ({ page }) => {
    const searchInput = page.getByPlaceholder(/What music is calling/);
    await expect(searchInput).toBeVisible();
  });

  test('shows feature grid', async ({ page }) => {
    await expect(page.getByText('Music')).toBeVisible();
    await expect(page.getByText('New Music')).toBeVisible();
    await expect(page.getByText('Live Events')).toBeVisible();
    await expect(page.getByText('Internet Radio')).toBeVisible();
    await expect(page.getByText('Mood Radio')).toBeVisible();
  });

  test('shows music suggestions section', async ({ page }) => {
    await expect(page.getByText('Music Suggestions')).toBeVisible();
  });

  test('shows your library section', async ({ page }) => {
    await expect(page.getByText('Your Library')).toBeVisible();
  });

  test('search input accepts text', async ({ page }) => {
    const searchInput = page.getByPlaceholder(/What music is calling/);
    await searchInput.fill('test song');
    await expect(searchInput).toHaveValue('test song');
  });

  test('search on enter triggers search', async ({ page }) => {
    const searchInput = page.getByPlaceholder(/What music is calling/);
    await searchInput.fill('test');
    await searchInput.press('Enter');
    // Should show search results or no results message
    await page.waitForTimeout(500);
  });

  test('feature grid items are clickable', async ({ page }) => {
    const musicLink = page.getByRole('link', { name: 'Music' }).first();
    await musicLink.click();
    await expect(page).toHaveURL(/\/library/);
  });
});