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

test('Chat Flow with Mocked LLM', async ({ page }) => {
    // 1. Setup Mock API - must be set before navigation
    await page.route('**/v1/chat/completions', async (route) => {
        await route.fulfill({
            status: 200,
            contentType: 'application/json',
            body: JSON.stringify({
                choices: [{
                    message: { content: "This is a mock AI response." }
                }]
            })
        });
    });

    // 2. Configure Settings
    await page.goto('/settings');
    await page.getByLabel('API Key').fill('sk-test-key');
    await page.getByLabel('Base URL').fill('https://api.mock.com/v1');
    await page.getByLabel('Model Name').fill('gpt-mock');

    // Wait for settings to be saved (Zustand persist uses localStorage)
    await page.waitForTimeout(500);

    // 3. Go to Chat
    await page.goto('/chat');

    // Wait for empty state to appear (indicates session is ready)
    await expect(page.getByRole('heading', { name: /frustrating you/i })).toBeVisible({ timeout: 5000 });

    // 4. Send Message
    const input = page.getByRole('textbox');
    await input.fill('I hate writing tests.');

    // Wait for button to be enabled
    const sendButton = page.getByRole('button').first();
    await expect(sendButton).toBeEnabled({ timeout: 3000 });
    await sendButton.click();

    // 5. Verify User Message - wait for it to appear in the chat
    await expect(page.getByText('I hate writing tests.')).toBeVisible({ timeout: 10000 });

    // 6. Verify AI Response
    await expect(page.getByText('This is a mock AI response.')).toBeVisible({ timeout: 15000 });
});