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

test.describe('Lead Flow UI', () => {
  test('should load the Lead Flow web interface and interact', async ({ page }) => {
    // Navigate to the main frame and load the lead-flow page
    await page.goto('/static/main.html?page=lead_flow/lead-flow.html');
    
    // Switch to the iframe
    const iframe = page.frameLocator('iframe#contentFrame');
    
    // Wait for the input box and type a message
    const chatInput = iframe.locator('#chatInput');
    await chatInput.waitFor({ state: 'visible' });
    await chatInput.fill('tôi muốn mua một chiếc áo sơ mi');
    
    // Send the message
    await chatInput.press('Enter');
    
    // Wait for the AI output node to appear indicating processing is done
    // Or wait for network timeout/response
    await page.waitForTimeout(5000); // Wait for the typical API response time

    // Take a screenshot of the result to analyze UX
    await page.screenshot({ path: 'lead_flow_test_result.png', fullPage: true });

    // Ensure the message container has at least one user message
    const messages = iframe.locator('.msg');
    await expect(messages.first()).toBeVisible();
  });
});
