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

test.describe('Playlists Management', () => {
  test.beforeEach(async ({ page }) => {
    // Login first
    await page.goto('http://localhost:5173/login');
    await page.fill('input[type="email"]', 'test@example.com');
    await page.fill('input[type="password"]', 'Test1234!');
    await page.click('button[type="submit"]');
    await page.waitForURL('**/dashboard');
  });

  test('should navigate to playlists page', async ({ page }) => {
    await page.goto('http://localhost:5173/playlists');
    await expect(page.locator('h1')).toContainText('Playlists');
  });

  test('should create a new playlist', async ({ page }) => {
    await page.goto('http://localhost:5173/playlists');
    
    // Click "New Playlist" button
    await page.click('button:has-text("New Playlist")');
    
    // Fill playlist form
    await page.fill('input[id="name"]', 'E2E Test Playlist');
    await page.fill('textarea[id="description"]', 'Created by automated test');
    await page.check('input[id="isPublic"]');
    
    // Submit
    await page.click('button:has-text("Create")');
    
    // Verify toast message
    await expect(page.locator('text=Playlist created')).toBeVisible({ timeout: 5000 });
    
    // Verify playlist appears in list
    await expect(page.locator('text=E2E Test Playlist')).toBeVisible();
  });

  test('should edit playlist', async ({ page }) => {
    await page.goto('http://localhost:5173/playlists');
    
    // Find first playlist and click edit
    const firstPlaylist = page.locator('[data-testid="playlist-card"]').first();
    await firstPlaylist.hover();
    await firstPlaylist.locator('button[title="Edit"]').click();
    
    // Modify name
    await page.fill('input[id="name"]', 'Updated Playlist Name');
    await page.click('button:has-text("Update")');
    
    // Verify update
    await expect(page.locator('text=Playlist updated')).toBeVisible({ timeout: 5000 });
  });

  test('should add tracks to playlist', async ({ page }) => {
    await page.goto('http://localhost:5173/playlists');
    
    // Click on first playlist to open detail
    await page.click('[data-testid="playlist-card"]');
    
    // Click "Add Tracks"
    await page.click('button:has-text("Add Tracks")');
    
    // Search for a track
    await page.fill('input[placeholder*="Search tracks"]', 'test');
    await page.waitForTimeout(500); // Debounce
    
    // Click "+" on first result
    const firstResult = page.locator('[data-testid="track-search-result"]').first();
    if (await firstResult.isVisible()) {
      await firstResult.locator('button').click();
      
      // Verify track added
      await expect(page.locator('text=Track added')).toBeVisible({ timeout: 5000 });
    }
  });

  test('should delete playlist', async ({ page }) => {
    await page.goto('http://localhost:5173/playlists');
    
    // Create a temporary playlist first
    await page.click('button:has-text("New Playlist")');
    await page.fill('input[id="name"]', 'To Delete');
    await page.click('button:has-text("Create")');
    await page.waitForTimeout(1000);
    
    // Find and delete it
    const playlist = page.locator('text=To Delete').locator('..');
    await playlist.hover();
    
    // Handle confirm dialog
    page.on('dialog', dialog => dialog.accept());
    await playlist.locator('button[title="Delete"]').click();
    
    // Verify deletion
    await expect(page.locator('text=Playlist deleted')).toBeVisible({ timeout: 5000 });
  });

  test('should search playlists', async ({ page }) => {
    await page.goto('http://localhost:5173/playlists');
    
    // Type in search
    await page.fill('input[placeholder*="Search playlists"]', 'test');
    await page.waitForTimeout(500);
    
    // Verify filtered results
    const playlists = page.locator('[data-testid="playlist-card"]');
    const count = await playlists.count();
    
    // At least some filtering should happen
    expect(count).toBeGreaterThanOrEqual(0);
  });

  test('should display playlist statistics', async ({ page }) => {
    await page.goto('http://localhost:5173/playlists');
    
    // Check stats section exists
    await expect(page.locator('text=Total Playlists')).toBeVisible();
    await expect(page.locator('text=Public')).toBeVisible();
    await expect(page.locator('text=Total Tracks')).toBeVisible();
  });
});