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

test.beforeEach(async ({ page }) => {
  page.on('console', msg => console.log('PAGE LOG:', msg.text()));
  await page.goto('http://localhost:5173/test/index.html');
  await page.waitForFunction(() => window.testStatus === 'ready');
});

test.describe('CodeEditor Basic', () => {
  test('should render content and update value', async ({ page }) => {
    const editor = page.locator('#editor1');
    await expect(editor).toBeVisible();
    
    // Check initial value
    const initialVal = await page.evaluate(() => document.getElementById('editor1').value);
    expect(initialVal).toBe("console.log('Hello World');");

    // Simulate typing in CodeMirror
    const cmContent = editor.locator('.cm-content');
    await cmContent.click();
    await page.keyboard.press('End');
    await page.keyboard.type('\n// New Comment');

    const updatedVal = await page.evaluate(() => document.getElementById('editor1').value);
    expect(updatedVal).toContain('// New Comment');
    
    // Check if external display updated
    const display = page.locator('#val1');
    await expect(display).toContainText('// New Comment');
  });

  test('should handle language and theme attributes', async ({ page }) => {
    const editor = page.locator('#editor1');
    
    // Test lang change
    await page.evaluate(() => {
        document.getElementById('editor1').setAttribute('lang', 'json');
    });
    // Internal state check (if we had a way to verify lang, for now just ensure no crash)
    
    // Test theme change
    await page.evaluate(() => {
        document.getElementById('editor1').setAttribute('theme', 'light');
    });
    const hasDarkTheme = await page.locator('.cm-theme-one-dark').count();
    expect(hasDarkTheme).toBe(0);
  });
});

test.describe('AutoForm Integration', () => {
  test('should sync data with AutoForm', async ({ page }) => {
    const form = page.locator('#myForm');
    await expect(form).toBeVisible();

    // Update CodeEditor and check form.data
    const codeEditor = form.locator('CodeEditor');
    await expect(codeEditor).toBeVisible();
    const cmContent = codeEditor.locator('.cm-content');
    
    // Use a more robust way to clear and type
    await page.evaluate(() => {
        const editor = document.querySelector('#myForm CodeEditor');
        editor.value = '';
    });
    await cmContent.type('{"updated": true}');

    const updatedFormData = await page.evaluate(() => {
        return document.getElementById('myForm').data.config;
    });
    expect(JSON.parse(updatedFormData).updated).toBe(true);
  });
});

test.describe('Performance Benchmark', () => {
  test('measure render time', async ({ page }) => {
    const start = await page.evaluate(() => performance.now());
    
    await page.evaluate(() => {
        const div = document.createElement('div');
        div.innerHTML = '<CodeEditor id="perfEditor" value="performance test"></CodeEditor>';
        document.body.appendChild(div);
        window.RefreshState(div);
    });
    
    await page.waitForSelector('#perfEditor .cm-editor');
    const end = await page.evaluate(() => performance.now());
    
    const renderTime = end - start;
    console.log(`CodeEditor Render Time: ${renderTime.toFixed(2)}ms`);
    expect(renderTime).toBeLessThan(500); // Reasonable threshold
  });
});