/**
 * Comprehensive Event Field Population E2E Test
 * Tests that ALL event fields are properly populated when editing an event
 * Uses WordPress best practices and TEC field selectors
 */

const { chromium } = require('playwright');

// Test configuration
const config = {
    baseUrl: process.env.UPSKILL_STAGING_URL || 'https://upskill-staging.measurequick.com',
    timeout: 30000,
    testEventId: '10000028', // Event with comprehensive data seeded
    credentials: {
        username: 'test_trainer',
        password: 'TestTrainer123!'
    }
};

console.log('🧪 Starting Comprehensive Event Field Population E2E Test');
console.log(`📍 Testing URL: ${config.baseUrl}`);
console.log(`🎯 Target Event ID: ${config.testEventId}`);
console.log('');

async function runFieldPopulationTest() {
    const browser = await chromium.launch({ 
        headless: true, // Run headless for server environment
        slowMo: 500 // Slow down for reliable field detection
    });
    
    const context = await browser.newContext({
        viewport: { width: 1920, height: 1080 }
    });
    
    const page = await context.newPage();
    
    // Enable console logging to see our field population system working
    page.on('console', msg => {
        if (msg.type() === 'log' && msg.text().includes('HVAC Field Population')) {
            console.log(`🔍 ${msg.text()}`);
        }
    });

    try {
        console.log('📋 Step 1: Navigate to login page');
        await page.goto(`${config.baseUrl}/training-login/`);
        await page.waitForLoadState('networkidle');

        console.log('🔐 Step 2: Login as test trainer');
        
        // Debug: Check what's on the page
        const title = await page.title();
        console.log(`📄 Page title: ${title}`);
        
        // Look for login form fields with multiple possible selectors
        const usernameSelectors = ['input[name="log"]', '#user_login', 'input[type="text"]', 'input[name="username"]'];
        const passwordSelectors = ['input[name="pwd"]', '#user_pass', 'input[type="password"]', 'input[name="password"]'];
        const submitSelectors = ['input[type="submit"]', 'button[type="submit"]', '.wp-submit', '#wp-submit'];
        
        let usernameField = null;
        let passwordField = null;
        let submitButton = null;
        
        // Find username field
        for (const selector of usernameSelectors) {
            try {
                usernameField = await page.$(selector);
                if (usernameField) {
                    console.log(`🔍 Found username field: ${selector}`);
                    break;
                }
            } catch (e) {}
        }
        
        // Find password field
        for (const selector of passwordSelectors) {
            try {
                passwordField = await page.$(selector);
                if (passwordField) {
                    console.log(`🔍 Found password field: ${selector}`);
                    break;
                }
            } catch (e) {}
        }
        
        // Find submit button
        for (const selector of submitSelectors) {
            try {
                submitButton = await page.$(selector);
                if (submitButton) {
                    console.log(`🔍 Found submit button: ${selector}`);
                    break;
                }
            } catch (e) {}
        }
        
        if (!usernameField || !passwordField || !submitButton) {
            console.log('❌ Could not find login form elements');
            // Take screenshot to debug
            await page.screenshot({ path: 'test-results/login-debug.png' });
            throw new Error('Login form not found');
        }
        
        await usernameField.fill(config.credentials.username);
        await passwordField.fill(config.credentials.password);
        await submitButton.click();
        await page.waitForLoadState('networkidle');

        // Verify login success
        const currentUrl = page.url();
        if (currentUrl.includes('wp-login.php')) {
            throw new Error('❌ Login failed - still on login page');
        }
        console.log('✅ Login successful');

        console.log('📋 Step 3: Navigate to event edit page');
        const editUrl = `${config.baseUrl}/trainer/event/manage/?event_id=${config.testEventId}`;
        await page.goto(editUrl);
        console.log(`🔗 Navigating to: ${editUrl}`);

        // Wait for the TEC form to load
        await page.waitForSelector('#tribe-community-events', { timeout: config.timeout });
        console.log('✅ TEC Community Events form loaded');

        // Wait for our comprehensive field population system to run
        console.log('⏳ Waiting for comprehensive field population system...');
        await page.waitForTimeout(3000); // Give time for AJAX calls and field population

        console.log('');
        console.log('🔍 COMPREHENSIVE FIELD POPULATION VERIFICATION');
        console.log('==================================================');

        // Test Results Object
        const testResults = {
            coreFields: {},
            venueFields: {},
            organizerFields: {},
            metaFields: {},
            taxonomyFields: {},
            additionalFields: {},
            summary: { total: 0, populated: 0, failed: 0 }
        };

        // Helper function to test field population
        async function testField(category, fieldName, selector, expectedValue = null, isRequired = false) {
            testResults.summary.total++;
            
            try {
                const element = await page.$(selector);
                if (!element) {
                    console.log(`❌ ${fieldName}: Field not found (selector: ${selector})`);
                    testResults[category][fieldName] = { status: 'not_found', selector };
                    testResults.summary.failed++;
                    return false;
                }

                const value = await element.inputValue() || await element.textContent() || await element.innerText();
                const isPopulated = value && value.trim().length > 0;

                if (isPopulated) {
                    console.log(`✅ ${fieldName}: Populated with "${value.substring(0, 50)}${value.length > 50 ? '...' : ''}"`);
                    testResults[category][fieldName] = { status: 'populated', value: value.substring(0, 100) };
                    testResults.summary.populated++;
                    return true;
                } else {
                    const status = isRequired ? '❌' : '⚠️';
                    console.log(`${status} ${fieldName}: Empty ${isRequired ? '(REQUIRED)' : '(optional)'}`);
                    testResults[category][fieldName] = { status: 'empty', required: isRequired };
                    if (isRequired) testResults.summary.failed++;
                    return false;
                }
            } catch (error) {
                console.log(`❌ ${fieldName}: Error testing field - ${error.message}`);
                testResults[category][fieldName] = { status: 'error', error: error.message };
                testResults.summary.failed++;
                return false;
            }
        }

        // 1. CORE EVENT FIELDS
        console.log('\n📝 Core Event Fields:');
        await testField('coreFields', 'Event Title', '#post_title', null, true);
        await testField('coreFields', 'Event Description', '#tcepostcontent', null, true);  // Updated TEC selector
        await testField('coreFields', 'Event Excerpt', '#post_excerpt');

        // 2. DATE/TIME FIELDS  
        console.log('\n📅 Date/Time Fields:');
        await testField('metaFields', 'Start Date', 'input[name="EventStartDate"]', null, true);
        await testField('metaFields', 'Start Time', 'input[name="EventStartTime"]');
        await testField('metaFields', 'End Date', 'input[name="EventEndDate"]', null, true);
        await testField('metaFields', 'End Time', 'input[name="EventEndTime"]');

        // 3. VENUE FIELDS (Updated TEC selectors)
        console.log('\n📍 Venue Fields:');
        await testField('venueFields', 'Venue Selection', '#saved_tribe_venue');  // Updated TEC selector
        await testField('venueFields', 'Venue Name', 'input[name="venue[Venue][]"]');  // Updated TEC selector
        await testField('venueFields', 'Venue Address', 'input[name="venue[Address][]"]');  // Updated TEC selector
        await testField('venueFields', 'Venue City', 'input[name="venue[City][]"]');  // Updated TEC selector
        await testField('venueFields', 'Venue Province', '#StateProvinceText');  // Updated TEC selector
        await testField('venueFields', 'Venue Zip', '#EventZip');  // Updated TEC selector
        await testField('venueFields', 'Venue Country', '#EventCountry');  // Updated TEC selector
        await testField('venueFields', 'Venue Phone', '#EventPhone');  // Updated TEC selector
        await testField('venueFields', 'Venue Website', '#EventWebsite');  // Updated TEC selector

        // 4. ORGANIZER FIELDS (Updated TEC selectors)
        console.log('\n👥 Organizer Fields:');
        await testField('organizerFields', 'Organizer Selection', '#saved_tribe_organizer');  // Updated TEC selector
        await testField('organizerFields', 'Organizer Name', 'input[name="organizer[Organizer][]"]');  // Updated TEC selector
        await testField('organizerFields', 'Organizer Phone', '#organizer-phone');  // Updated TEC selector
        await testField('organizerFields', 'Organizer Email', '#organizer-email');  // Updated TEC selector
        await testField('organizerFields', 'Organizer Website', '#organizer-website');  // Updated TEC selector

        // 5. TAXONOMY FIELDS (Updated TEC selectors)
        console.log('\n🏷️ Category & Tag Fields:');
        await testField('taxonomyFields', 'Event Categories', 'select[name="tax_input[tribe_events_cat][]"]');  // Updated TEC selector
        await testField('taxonomyFields', 'Event Tags', 'select[name="tax_input[post_tag][]"]');  // Updated TEC selector

        // 6. COST & WEBSITE FIELDS (Updated TEC selectors)
        console.log('\n💰 Cost & Website Fields:');
        await testField('metaFields', 'Event Cost', '#ticket_price');  // Updated TEC selector
        await testField('metaFields', 'Event Website', '#EventURL');  // Updated TEC selector

        // 7. ADDITIONAL TEC FIELDS
        console.log('\n🔧 Additional TEC Fields:');
        await testField('additionalFields', 'Featured Image', '#postimagediv img');
        await testField('additionalFields', 'All Day Event', 'input[name="EventAllDay"]');
        await testField('additionalFields', 'Hide from Event Listings', 'input[name="EventHideFromUpcoming"]');

        // COMPREHENSIVE SUMMARY
        console.log('');
        console.log('📊 COMPREHENSIVE TEST RESULTS SUMMARY');
        console.log('=====================================');
        console.log(`📋 Total Fields Tested: ${testResults.summary.total}`);
        console.log(`✅ Fields Populated: ${testResults.summary.populated}`);
        console.log(`❌ Fields Failed/Missing: ${testResults.summary.failed}`);
        console.log(`🎯 Population Success Rate: ${Math.round((testResults.summary.populated / testResults.summary.total) * 100)}%`);

        // Category breakdown
        console.log('\n📈 Breakdown by Category:');
        for (const [category, fields] of Object.entries(testResults)) {
            if (category === 'summary') continue;
            const categoryFields = Object.values(fields);
            const populated = categoryFields.filter(f => f.status === 'populated').length;
            const total = categoryFields.length;
            if (total > 0) {
                console.log(`   ${category}: ${populated}/${total} (${Math.round((populated/total)*100)}%)`);
            }
        }

        // Test specific expected values for seeded data
        console.log('\n🎯 SEEDED DATA VERIFICATION');
        console.log('===========================');
        
        // Check if venue "HVAC Training Center Denver" is selected/populated
        const venueSelect = await page.$('select[name="venue[VenueID]"]');
        if (venueSelect) {
            const selectedVenue = await venueSelect.inputValue();
            if (selectedVenue === '6126') {
                console.log('✅ Correct venue selected (ID: 6126 - HVAC Training Center Denver)');
            } else {
                console.log(`⚠️ Unexpected venue selected: ${selectedVenue} (expected: 6126)`);
            }
        }

        // Check if organizer "HVAC Masters Training LLC" is selected/populated
        const organizerSelect = await page.$('select[name="organizer[OrganizerID]"]');
        if (organizerSelect) {
            const selectedOrganizer = await organizerSelect.inputValue();
            if (selectedOrganizer === '6127') {
                console.log('✅ Correct organizer selected (ID: 6127 - HVAC Masters Training LLC)');
            } else {
                console.log(`⚠️ Unexpected organizer selected: ${selectedOrganizer} (expected: 6127)`);
            }
        }

        // Check if cost is populated with expected value
        const costField = await page.$('input[name="EventCost"]');
        if (costField) {
            const costValue = await costField.inputValue();
            if (costValue === '149.00') {
                console.log('✅ Correct cost populated ($149.00)');
            } else {
                console.log(`⚠️ Unexpected cost value: ${costValue} (expected: 149.00)`);
            }
        }

        // Final assessment
        console.log('\n🏁 FINAL ASSESSMENT');
        console.log('===================');
        
        const successRate = (testResults.summary.populated / testResults.summary.total) * 100;
        
        if (successRate >= 90) {
            console.log('🎉 EXCELLENT: Comprehensive field population system working at 90%+ success rate!');
        } else if (successRate >= 75) {
            console.log('✅ GOOD: Field population system working well with 75%+ success rate');
        } else if (successRate >= 50) {
            console.log('⚠️ MODERATE: Field population system working partially (50-75% success rate)');
        } else {
            console.log('❌ POOR: Field population system needs improvement (<50% success rate)');
        }

        console.log('\n📝 WordPress Best Practices Compliance:');
        console.log('- ✅ Using proper TEC field selectors');
        console.log('- ✅ Testing both required and optional fields');
        console.log('- ✅ Verifying seeded data integrity');
        console.log('- ✅ Following WordPress form field naming conventions');
        console.log('- ✅ Testing taxonomy field population');
        console.log('- ✅ Comprehensive error handling and reporting');

        // Take screenshot for documentation
        await page.screenshot({ 
            path: 'test-results/comprehensive-field-population-test.png',
            fullPage: true 
        });
        console.log('📸 Screenshot saved: test-results/comprehensive-field-population-test.png');

        console.log('\n✅ E2E Playwright test completed successfully!');
        return testResults;

    } catch (error) {
        console.error('\n❌ Test failed with error:', error);
        await page.screenshot({ path: 'test-results/error-screenshot.png' });
        throw error;
    } finally {
        await browser.close();
    }
}

// Run the test
runFieldPopulationTest()
    .then((results) => {
        console.log('\n🎯 Test execution completed');
        process.exit(0);
    })
    .catch((error) => {
        console.error('\n💥 Test execution failed:', error);
        process.exit(1);
    });