import { test, expect } from '../support/fixtures';
import { faker } from '@faker-js/faker';

test.describe('Chat Interface (Story 1.2)', () => {
    test.beforeEach(async ({ page, context }) => {
        // GIVEN: User has a configured provider (injected via localStorage)
        await context.addInitScript(() => {
            window.localStorage.setItem('test01-settings-storage', JSON.stringify({
                state: {
                    savedProviders: [{
                        id: 'test-provider',
                        name: 'Test Provider',
                        baseUrl: 'https://api.openai.com/v1',
                        apiKey: 'dGVzdC1rZXk=', // 'test-key' encoded
                        modelName: 'gpt-4o',
                        createdAt: new Date().toISOString(),
                        updatedAt: new Date().toISOString()
                    }],
                    activeProviderId: 'test-provider',
                    providerMigrationState: { hasMigrated: true }
                },
                version: 0
            }));
        });

        // Mock LLM API response to be deterministic
        await page.route('/api/llm', async route => {
            await new Promise(r => setTimeout(r, 1000)); // Add delay for typing indicator
            await route.fulfill({
                status: 200,
                contentType: 'application/json',
                body: JSON.stringify({
                    success: true,
                    data: { text: 'This is a mocked AI response.' },
                    timestamp: new Date().toISOString(),
                }),
            });
        });

        // GIVEN: User is on the homepage
        await page.goto('/');
    });

    test('[P0] should allow user to send a message', async ({ page }) => {
        // GIVEN: Input field is visible
        const input = page.getByTestId('chat-input');
        const sendButton = page.getByTestId('send-button');

        // WHEN: User types a random message and clicks send
        const message = faker.lorem.sentence();
        await input.fill(message);
        await sendButton.click();

        // THEN: Input should be cleared
        await expect(input).toHaveValue('');

        // THEN: Message should appear in the chat
        await expect(page.getByTestId('chat-bubble-user').last()).toContainText(message);
    });

    test('[P0] should display AI typing indicator', async ({ page }) => {
        // WHEN: User sends a message
        await page.getByTestId('chat-input').fill('Tell me a story');
        await page.getByTestId('send-button').click();

        // THEN: AI response should appear (mocked response is fast, so indicator might flicker too fast to catch without slowing it down)
        // But we check for response visibility primarily
        await expect(page.getByTestId('chat-bubble-ai').last()).toBeVisible();
        await expect(page.getByTestId('chat-bubble-ai').last()).toContainText('This is a mocked AI response.');
    });

    test('[P0] should persist messages across reload', async ({ page }) => {
        // GIVEN: User sends a message
        const uniqueMessage = `Persistence Test ${faker.string.uuid()}`;
        await page.getByTestId('chat-input').fill(uniqueMessage);
        await page.getByTestId('send-button').click();

        // Wait for message to appear
        await expect(page.getByText(uniqueMessage)).toBeVisible();

        // WHEN: Page is reloaded
        await page.reload();

        // THEN: Message should still be visible
        await expect(page.getByText(uniqueMessage)).toBeVisible();
    });

    test('[P1] should adapt to mobile viewport', async ({ page }) => {
        // GIVEN: Mobile viewport
        await page.setViewportSize({ width: 375, height: 667 });

        // WHEN: Page loads
        await page.goto('/');

        // THEN: Important elements are visible
        await expect(page.getByTestId('chat-input')).toBeVisible();
        await expect(page.getByTestId('send-button')).toBeVisible();

        // Check elements fit within width (approximate check)
        const inputBox = await page.getByTestId('chat-input').boundingBox();
        expect(inputBox?.width).toBeLessThan(375); // Should have padding
    });
});