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

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

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

  test('shows search input for playlists', async ({ page }) => {
    const searchInput = page.getByPlaceholder(/Search playlists/);
    await expect(searchInput).toBeVisible();
  });

  test('shows empty state when no playlists', async ({ page }) => {
    // Either shows playlists or empty state
    const hasPlaylists = await page.locator('[class*="VinylStack"]').count();
    if (hasPlaylists === 0) {
      await expect(page.getByText(/No playlists|Create your first/)).toBeVisible();
    }
  });

  test('search filters playlists', async ({ page }) => {
    const searchInput = page.getByPlaceholder(/Search playlists/);
    await searchInput.fill('nonexistent-xyz');
    await page.waitForTimeout(300);
    // Should show empty state or no results
  });

  test('profile link navigates to account', async ({ page }) => {
    await page.getByRole('link', { name: /person/ }).first().click();
    await expect(page).toHaveURL(/\/account/);
  });
});

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

  test('shows create title', async ({ page }) => {
    await expect(page.getByText('Create')).toBeVisible();
  });

  test('shows all 4 create tabs', async ({ page }) => {
    await expect(page.getByText('Playlist')).toBeVisible();
    await expect(page.getByText('Mood Playlist')).toBeVisible();
    await expect(page.getByText('Radio')).toBeVisible();
    await expect(page.getByText('Collab')).toBeVisible();
  });

  test('Playlist tab is active by default', async ({ page }) => {
    const playlistTab = page.getByText('Playlist').first();
    await expect(playlistTab).toBeVisible();
  });

  test('switching tabs changes content', async ({ page }) => {
    await page.getByText('Mood Playlist').click();
    await expect(page.getByText('Browse Moods')).toBeVisible();
  });

  test('can create a playlist', async ({ page }) => {
    const nameInput = page.getByPlaceholder(/Playlist name/);
    await nameInput.fill('My New Playlist');
    await page.getByRole('button', { name: /Create Playlist/ }).click();
    await page.waitForTimeout(500);
    await expect(page.getByText(/Playlist created|Create another/)).toBeVisible();
  });

  test('cannot create empty playlist', async ({ page }) => {
    const createBtn = page.getByRole('button', { name: /Create Playlist/ });
    await expect(createBtn).toBeDisabled();
  });
});

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

  test('shows welcome message', async ({ page }) => {
    await expect(page.getByText(/Welcome/)).toBeVisible();
  });

  test('shows all menu items', async ({ page }) => {
    await expect(page.getByText('Plugins')).toBeVisible();
    await expect(page.getByText('Servers')).toBeVisible();
    await expect(page.getByText('About You')).toBeVisible();
    await expect(page.getByText('Internet Radio')).toBeVisible();
    await expect(page.getByText('Updates')).toBeVisible();
    await expect(page.getByText('Settings & Privacy')).toBeVisible();
  });
});