import { test, expect } from '@playwright/test';
import { createProviderConfig } from '../support/factories/provider.factory';

test.describe('Settings - API Provider Configuration', () => {
    test.beforeEach(async ({ page }) => {
        // Clear local storage to start fresh
        await page.goto('/settings'); // Navigate first to access localStorage
        await page.evaluate(() => localStorage.clear());
        await page.reload();
    });

    test('should allow user to enter and save provider credentials', async ({ page }) => {
        const providerData = createProviderConfig();

        // GIVEN: User is on settings page
        await page.goto('/settings');

        // WHEN: User enters API Key and Base URL
        await page.getByLabel('API Key').fill(providerData.apiKey);
        await page.getByLabel('Base URL').fill(providerData.baseUrl);
        await page.getByLabel('Model Name').fill(providerData.modelId);

        // AND: User clicks Save
        await page.getByRole('button', { name: 'Save' }).click();

        // THEN: Success feedback is shown
        await expect(page.getByText('Settings saved')).toBeVisible();

        // AND: Values are persisted after reload
        await page.reload();
        await expect(page.getByLabel('API Key')).toHaveValue(providerData.apiKey);
        await expect(page.getByLabel('Base URL')).toHaveValue(providerData.baseUrl);
        await expect(page.getByLabel('Model Name')).toHaveValue(providerData.modelId);
    });

    test('should verify connection with valid credentials', async ({ page }) => {
        const providerData = createProviderConfig();

        // Setup network mock for "Hello" check
        await page.route('**/models', async route => {
            await route.fulfill({ status: 200, json: { data: [] } });
        });

        await page.goto('/settings');
        await page.getByLabel('API Key').fill(providerData.apiKey);
        await page.getByLabel('Base URL').fill(providerData.baseUrl);

        // WHEN: User clicks "Test Connection"
        await page.getByRole('button', { name: 'Test Connection' }).click();

        // THEN: User sees success message
        await expect(page.getByText('Connected ✅')).toBeVisible();
    });

    test('should show error for invalid connection', async ({ page }) => {
        const providerData = createProviderConfig();

        // Setup network mock for failure
        await page.route('**/models', async route => {
            await route.fulfill({ status: 401, json: { error: 'Invalid API Key' } });
        });

        await page.goto('/settings');
        await page.getByLabel('API Key').fill(providerData.apiKey);
        await page.getByLabel('Base URL').fill(providerData.baseUrl);

        // WHEN: User clicks "Test Connection"
        await page.getByRole('button', { name: 'Test Connection' }).click();

        // THEN: User sees error message
        await expect(page.getByText('Connection failed')).toBeVisible();
    });
});