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

test.describe('Kanban Engine', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://127.0.0.1:5173/test/index.html');
  });

  test('should render columns and items correctly', async ({ page }) => {
    const kanban = page.locator('web-kanban');
    await expect(kanban).toBeVisible();

    const columns = kanban.locator('.column');
    await expect(columns).toHaveCount(3);

    const items = kanban.locator('.item');
    await expect(items).toHaveCount(3);
  });

  test('should handle drag and drop between columns', async ({ page }) => {
    const kanban = page.locator('web-kanban');
    
    // Get initial counts
    const todoColumn = kanban.locator('.column[data-id="todo"] .items-container');
    const doneColumn = kanban.locator('.column[data-id="done"] .items-container');
    
    await expect(todoColumn.locator('.item')).toHaveCount(2);
    await expect(doneColumn.locator('.item')).toHaveCount(0);

    // Perform drag and drop
    const firstItem = todoColumn.locator('.item').first();
    await firstItem.dragTo(doneColumn);

    // Verify counts after move
    await expect(todoColumn.locator('.item')).toHaveCount(1);
    await expect(doneColumn.locator('.item')).toHaveCount(1);
    
    // Verify @update event was triggered (check console if needed, but here we check DOM)
    const movedItem = doneColumn.locator('.item');
    await expect(movedItem).toContainText('设计看板原型');
  });

  test('should measure render performance', async ({ page }) => {
    const start = await page.evaluate(() => performance.now());
    
    await page.evaluate(() => {
      const kanban = document.getElementById('kanban');
      const largeData = [];
      for (let i = 0; i < 10; i++) {
        largeData.push({
          id: `col-${i}`,
          title: `Column ${i}`,
          items: Array.from({ length: 20 }, (_, j) => ({
            id: `item-${i}-${j}`,
            content: `Item ${i}-${j}`
          }))
        });
      }
      kanban.data = largeData;
    });

    const end = await page.evaluate(() => performance.now());
    const duration = end - start;
    console.log(`Render 10 columns with 200 items took: ${duration.toFixed(2)}ms`);
    
    // Expect reasonable performance
    expect(duration).toBeLessThan(100); 
  });
});