/**
 * Test Custom Event Edit Form
 * 
 * Verifies that the new PHP-based event edit form:
 * 1. Loads without JavaScript dependencies
 * 2. Populates all fields from database
 * 3. Saves changes properly
 * 4. No longer relies on TEC shortcode
 */

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

async function testCustomEventEdit() {
    console.log('🔄 Starting Custom Event Edit Form Test...\n');
    
    // Configure browser
    const browser = await chromium.launch({
        headless: false,
        args: ['--disable-dev-shm-usage', '--no-sandbox']
    });
    
    const context = await browser.newContext({
        viewport: { width: 1280, height: 720 }
    });
    
    const page = await context.newPage();
    const baseUrl = process.env.UPSKILL_STAGING_URL || 'https://upskill-staging.measurequick.com';
    
    try {
        // Step 1: Login
        console.log('1️⃣ Logging in as test_admin...');
        await page.goto(`${baseUrl}/training-login/`);
        await page.waitForLoadState('networkidle');
        
        // Try both possible login forms
        const loginForm = await page.$('#loginform') || await page.$('.hvac-login-form');
        if (!loginForm) {
            // Fallback to wp-login
            await page.goto(`${baseUrl}/wp-login.php`);
        }
        
        await page.fill('input[name="log"], #user_login', 'test_admin');
        await page.fill('input[name="pwd"], #user_pass', 'TestAdmin123!');
        await page.click('input[type="submit"], #wp-submit');
        
        // Wait for redirect
        await page.waitForLoadState('networkidle');
        console.log('✅ Logged in successfully\n');
        
        // Step 2: Navigate to trainer dashboard
        console.log('2️⃣ Navigating to trainer dashboard...');
        await page.goto(`${baseUrl}/trainer/dashboard/`);
        await page.waitForLoadState('networkidle');
        
        // Debug: Check what's on the page
        const pageTitle = await page.title();
        console.log(`   Page title: ${pageTitle}`);
        
        // Check if we need to wait for dynamic content
        await page.waitForTimeout(2000);
        
        // Verify events table is visible (try multiple selectors)
        const eventsTable = await page.$('.hvac-events-table') || 
                          await page.$('table.events-table') ||
                          await page.$('[class*="events"]');
        
        if (!eventsTable) {
            // Take a screenshot to see what's happening
            await page.screenshot({ path: 'dashboard-debug.png', fullPage: true });
            console.log('   📸 Dashboard screenshot saved as dashboard-debug.png');
            
            // Get page content for debugging
            const content = await page.content();
            if (content.includes('No events found')) {
                console.log('   ⚠️  No events found - need to seed test data first');
            } else if (content.includes('Access Denied') || content.includes('not authorized')) {
                console.log('   ⚠️  Access denied - user may not have proper role');
            }
            
            throw new Error('Events table not found on dashboard');
        }
        console.log('✅ Dashboard loaded with events table\n');
        
        // Step 3: Click edit link for first event
        console.log('3️⃣ Looking for Edit link...');
        
        // Try both old and new URL patterns
        let editLink = await page.$('a[href*="/trainer/event/edit/"]') ||
                      await page.$('a[href*="/trainer/event/manage/"]');
        
        if (!editLink) {
            // Look for any Edit link text
            editLink = await page.getByText('Edit').first();
        }
        
        if (!editLink) {
            // Debug: list all links on page
            const allLinks = await page.$$eval('a', links => 
                links.map(l => ({ text: l.textContent, href: l.href }))
            );
            console.log('   Available links:', allLinks.filter(l => l.text && l.text.includes('Edit')));
            
            throw new Error('No edit links found - verify events exist');
        }
        
        const editUrl = await editLink.getAttribute('href');
        console.log(`   Edit URL: ${editUrl}`);
        await editLink.click();
        await page.waitForLoadState('networkidle');
        console.log('✅ Navigated to custom edit form\n');
        
        // Step 4: Verify we're on the custom form (not TEC shortcode)
        console.log('4️⃣ Verifying custom form loaded...');
        
        // Check for our custom form class
        const customForm = await page.$('.hvac-event-edit-wrapper form.hvac-event-form');
        if (!customForm) {
            throw new Error('Custom form not found - may still be using TEC shortcode');
        }
        
        // Verify NO TEC community events elements
        const tecForm = await page.$('.tribe-community-events');
        if (tecForm) {
            console.warn('⚠️  WARNING: TEC form elements still present');
        }
        
        console.log('✅ Custom form loaded (no TEC dependencies)\n');
        
        // Step 5: Check field population
        console.log('5️⃣ Checking field population...');
        
        const fields = [
            { name: 'Title', selector: '#post_title', type: 'input' },
            { name: 'Start Date', selector: '#EventStartDate', type: 'input' },
            { name: 'End Date', selector: '#EventEndDate', type: 'input' },
            { name: 'Start Time', selector: '#EventStartTime', type: 'input' },
            { name: 'End Time', selector: '#EventEndTime', type: 'input' },
            { name: 'Event Cost', selector: '#EventCost', type: 'input' },
            { name: 'Event URL', selector: '#EventURL', type: 'input' },
            { name: 'Venue Name', selector: '#venue_name', type: 'input' },
            { name: 'Venue Address', selector: '#venue_address', type: 'input' },
            { name: 'Venue City', selector: '#venue_city', type: 'input' },
            { name: 'Organizer Name', selector: '#organizer_name', type: 'input' },
            { name: 'Organizer Email', selector: '#organizer_email', type: 'input' },
            { name: 'Status', selector: '#post_status', type: 'select' }
        ];
        
        let populatedCount = 0;
        let emptyCount = 0;
        
        for (const field of fields) {
            const element = await page.$(field.selector);
            if (!element) {
                console.log(`   ❌ ${field.name}: Field not found`);
                continue;
            }
            
            let value;
            if (field.type === 'select') {
                value = await page.$eval(field.selector, el => el.value);
            } else {
                value = await page.$eval(field.selector, el => el.value);
            }
            
            if (value && value.trim() !== '') {
                console.log(`   ✅ ${field.name}: "${value}"`);
                populatedCount++;
            } else {
                console.log(`   ⚠️  ${field.name}: Empty`);
                emptyCount++;
            }
        }
        
        console.log(`\n   Summary: ${populatedCount} populated, ${emptyCount} empty\n`);
        
        // Step 6: Test field editing
        console.log('6️⃣ Testing field editing...');
        
        // Update title
        const originalTitle = await page.$eval('#post_title', el => el.value);
        const testTitle = `${originalTitle} - Edited ${Date.now()}`;
        await page.fill('#post_title', testTitle);
        
        // Update cost
        await page.fill('#EventCost', '599');
        
        // Update URL
        await page.fill('#EventURL', 'https://example.com/test-event');
        
        console.log('✅ Fields updated\n');
        
        // Step 7: Save changes
        console.log('7️⃣ Saving changes...');
        
        const saveButton = await page.$('button[type="submit"]');
        if (!saveButton) {
            throw new Error('Save button not found');
        }
        
        await saveButton.click();
        
        // Wait for redirect or success message
        await Promise.race([
            page.waitForURL(/updated=true/, { timeout: 10000 }),
            page.waitForSelector('.hvac-notice-success', { timeout: 10000 })
        ]);
        
        console.log('✅ Changes saved successfully\n');
        
        // Step 8: Verify persistence
        console.log('8️⃣ Verifying changes persisted...');
        
        // Check if we're back on the edit page with success message
        const successMessage = await page.$('.hvac-notice-success');
        if (successMessage) {
            console.log('   ✅ Success message displayed');
        }
        
        // Verify title was saved
        const savedTitle = await page.$eval('#post_title', el => el.value);
        if (savedTitle === testTitle) {
            console.log(`   ✅ Title persisted: "${savedTitle}"`);
        } else {
            console.log(`   ❌ Title not saved. Expected: "${testTitle}", Got: "${savedTitle}"`);
        }
        
        // Verify cost was saved
        const savedCost = await page.$eval('#EventCost', el => el.value);
        if (savedCost === '599') {
            console.log(`   ✅ Cost persisted: $${savedCost}`);
        } else {
            console.log(`   ❌ Cost not saved. Expected: "599", Got: "${savedCost}"`);
        }
        
        console.log('\n✅ Custom Event Edit Form Test Complete!');
        console.log('   - Form loads without JavaScript dependencies');
        console.log('   - Fields populate from database');
        console.log('   - Changes save and persist');
        console.log('   - No longer relies on TEC shortcode\n');
        
    } catch (error) {
        console.error('❌ Test failed:', error.message);
        
        // Take screenshot for debugging
        await page.screenshot({ 
            path: `test-error-${Date.now()}.png`,
            fullPage: true 
        });
        console.log('📸 Screenshot saved for debugging');
        
        throw error;
    } finally {
        await browser.close();
    }
}

// Run the test
testCustomEventEdit()
    .then(() => {
        console.log('🎉 All tests passed!');
        process.exit(0);
    })
    .catch(error => {
        console.error('💥 Test suite failed:', error);
        process.exit(1);
    });