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

test.describe('Live Simulator UI', () => {
  test('should load the Live Simulator web interface', async ({ page }) => {
    await page.goto('/static/main.html?page=fashion-matches/live-simulator.html');
    
    // Check if the title loads correctly inside the iframe or directly if navigated
    // Since main.html handles iframe loading, we need to wait for it or access the frame.
    const frame = page.frame({ name: 'content-frame' }) || page.mainFrame();
    
    // We can also just go directly to the page to test the simulator individually:
    await page.goto('/static/fashion-matches/live-simulator.html');

    // Wait for the simulator DOM to load
    await page.waitForSelector('.mf-title', { state: 'visible' });

    // Assert the search box is present
    const searchInput = page.locator('#searchInput');
    await expect(searchInput).toBeVisible();

    // Type a sample product
    await searchInput.fill('áo sơ mi');
    // For now we just check if it typed properly
    await expect(searchInput).toHaveValue('áo sơ mi');
  });
});
