/**
 * Settings Save Functionality UI Test
 *
 * Tests the complete settings save workflow by monitoring network requests,
 * console messages, and response handling. Specifically tests the save_all_settings
 * endpoint and validates proper error handling and success feedback.
 *
 * What this tests:
 * - Settings save button functionality
 * - Network request monitoring for save operations
 * - API response validation (200 vs 4xx/5xx errors)
 * - Success/error message display
 * - Console logging during save operations
 * - Form submission workflow
 *
 * Prerequisites: Web server running on http://127.0.0.1:5000
 *
 * Usage: node tests/ui_tests/test_settings_save.js
 */

const { setupTest, teardownTest, navigateTo } = require('./test_lib');

async function testSettingsSave() {
    const ctx = await setupTest({ authenticate: true });
    const { browser, page } = ctx;
    const baseUrl = ctx.config.baseUrl;

    // Monitor console errors
    page.on('console', msg => {
        if (msg.type() === 'error') {
            console.log(`  Browser error: ${msg.text()}`);
        }
    });

    // Monitor network responses (no request interception — it can hang
    // page.goto in CI environments when set up before the first navigation).
    page.on('response', response => {
        if (response.url().includes('/settings/')) {
            console.log('← RESPONSE:', response.status(), response.url());
            if (response.status() >= 400) {
                console.log('❌ ERROR RESPONSE:', response.status(), response.statusText());
            }
        }
    });

    let failed = false;

    try {
        console.log('🔧 Testing settings save functionality...');
        await navigateTo(page, `${baseUrl}/settings/`);

        // Wait for page to load completely
        await page.waitForSelector('#save-all-btn, button[type="submit"]', { timeout: 15000 });

        console.log('🔍 Looking for save button...');

        // Look for save buttons
        const saveButtons = await page.$$('button[type="submit"], .save-btn, button[onclick*="save"], #save-all-btn');
        console.log(`Found ${saveButtons.length} save buttons`);

        if (saveButtons.length > 0) {
            console.log('✅ Clicking save button...');

            // Start listening for the save response BEFORE clicking
            const responsePromise = page.waitForResponse(
                r => r.url().includes('/save_all_settings'),
                { timeout: 15000 }
            );
            await saveButtons[0].click();

            // Wait for the save response
            console.log('⏳ Waiting for save response...');
            try {
                await responsePromise;
            } catch {
                console.log('⚠️  Save response not captured (endpoint may differ)');
            }

            // Check for success/error messages
            const messages = await page.$$('.alert, .message, .notification, .success, .error');
            if (messages.length > 0) {
                console.log(`📝 Found ${messages.length} message elements:`);
                for (let i = 0; i < messages.length; i++) {
                    const text = await page.evaluate(el => ({
                        text: el.textContent.trim(),
                        className: el.className
                    }), messages[i]);
                    console.log(`   ${i + 1}. [${text.className}]: ${text.text}`);
                }
            }
        } else {
            console.log('❌ No save buttons found');
        }

    } catch (error) {
        console.error('❌ Test error:', error);
        failed = true;
    } finally {
        await teardownTest(ctx);
        process.exit(failed ? 1 : 0);
    }
}

testSettingsSave().catch(err => { console.error(err); process.exit(1); });