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

test.describe('Mindmap Basic Functionality', () => {
  test('should render the root and child nodes', async ({ page }) => {
    await page.goto('/test/index.html');
    const nodes = page.locator('.mindmap-node');
    await expect(nodes).toHaveCount(3); // Root + 2 children
    await expect(nodes.first()).toHaveText('思维导图核心');
  });

  test('should collapse and expand nodes on click', async ({ page }) => {
    await page.goto('/test/index.html');
    
    // Initial state: 3 nodes
    await expect(page.locator('.mindmap-node')).toHaveCount(3);
    
    // Click root to collapse
    await page.locator('.mindmap-node').first().click();
    await expect(page.locator('.mindmap-node')).toHaveCount(1);
    
    // Click root to expand
    await page.locator('.mindmap-node').first().click();
    await expect(page.locator('.mindmap-node')).toHaveCount(3);
  });

  test('performance benchmark: 1000 nodes render', async ({ page }) => {
    await page.goto('/test/index.html');
    const renderTime = await page.evaluate(() => {
      const generateTree = (depth, breadth) => {
        if (depth === 0) return { text: 'Leaf' };
        const children = [];
        for (let i = 0; i < breadth; i++) {
          children.push(generateTree(depth - 1, breadth));
        }
        return { text: `Node ${depth}`, children };
      };
      
      const largeData = generateTree(3, 10); // 1 + 10 + 100 + 1000 = 1111 nodes
      const container = document.getElementById('app');
      container.innerHTML = '';
      
      const start = performance.now();
      const { Mindmap } = window.testExports; // I need to expose Mindmap to window for this
      new Mindmap({ container, data: largeData });
      document.body.offsetHeight;
      return performance.now() - start;
    });
    console.log(`1000 nodes render time: ${renderTime}ms`);
    expect(renderTime).toBeLessThan(500);
  });
});