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

test.describe('Excalidraw Integration', () => {
  test('should load and display Excalidraw editor', async ({ page }) => {
    await page.goto('http://localhost:4200');
    
    // Wait for app to load
    await page.waitForSelector('body', { timeout: 10000 });
    
    // Check if test drawing file exists in file list
    const testFile = page.locator('text=test-drawing');
    if (await testFile.isVisible({ timeout: 5000 }).catch(() => false)) {
      await testFile.click();
      
      // Wait for Excalidraw editor to load
      await page.waitForSelector('excalidraw-editor', { timeout: 10000 });
      
      // Verify editor is present
      const editor = page.locator('excalidraw-editor');
      await expect(editor).toBeVisible();
    }
  });

  test('should handle file API with query params', async ({ page, request }) => {
    // Test GET endpoint with query param
    const response = await request.get('http://localhost:4200/api/files', {
      params: { path: 'test-drawing.excalidraw.md' }
    });
    
    if (response.ok()) {
      const data = await response.json();
      expect(data).toHaveProperty('elements');
      expect(Array.isArray(data.elements)).toBeTruthy();
    }
  });

  test('should parse Obsidian format correctly', async ({ request }) => {
    // Test that the backend can parse Obsidian format
    const response = await request.get('http://localhost:4200/api/files', {
      params: { path: 'test-drawing.excalidraw.md' }
    });
    
    if (response.ok()) {
      const data = await response.json();
      
      // Verify structure
      expect(data).toHaveProperty('elements');
      expect(data).toHaveProperty('appState');
      expect(data).toHaveProperty('files');
      
      // Verify types
      expect(Array.isArray(data.elements)).toBeTruthy();
      expect(typeof data.appState).toBe('object');
      expect(typeof data.files).toBe('object');
    }
  });
});