import { test, expect } from '@playwright/test';
import { LoginPage } from './LoginPage';
import { DashboardPage } from './DashboardPage';
import { TEST_USERS } from '../data/test-users';

test.describe('Debug Create Event Full Form', () => {
    test('Find all event form fields', async ({ page }) => {
        const loginPage = new LoginPage(page);
        const dashboardPage = new DashboardPage(page);
        const trainer = TEST_USERS.trainer;
        
        // Login and navigate to create event
        await loginPage.navigateToLogin();
        await loginPage.login(trainer.username, trainer.password);
        await dashboardPage.clickCreateEvent();
        
        // Wait for form to load
        await page.waitForTimeout(3000);
        
        console.log(`Current URL: ${page.url()}`);
        
        // Find title field (already found)
        const titleField = await page.locator('input[name="post_title"]');
        console.log('Title field found');
        
        // Find description/content textarea
        const contentSelectors = [
            'textarea[name="content"]',
            'textarea[name="post_content"]',
            '#content',
            '#post_content',
            '.wp-editor-area',
            '.mce-content-body'
        ];
        
        let descriptionField = null;
        for (const selector of contentSelectors) {
            try {
                const element = page.locator(selector);
                if (await element.isVisible()) {
                    console.log(`Description field found with selector: ${selector}`);
                    descriptionField = selector;
                    break;
                }
            } catch (e) {}
        }
        
        // Find date/time fields
        const dateTimeFields = [
            'EventStartDate', 'EventStartTime', 'EventEndDate', 'EventEndTime',
            'StartDate', 'StartTime', 'EndDate', 'EndTime'
        ];
        
        for (const fieldName of dateTimeFields) {
            // Try different selector patterns
            const selectors = [
                `#${fieldName}`,
                `input[name="${fieldName}"]`,
                `input[id="${fieldName}"]`,
                `[data-name="${fieldName}"]`
            ];
            
            for (const selector of selectors) {
                try {
                    const element = page.locator(selector);
                    if (await element.isVisible()) {
                        const type = await element.getAttribute('type');
                        console.log(`${fieldName} field found: selector="${selector}", type="${type}"`);
                        break;
                    }
                } catch (e) {}
            }
        }
        
        // Find venue and organizer dropdowns
        const dropdowns = await page.locator('select').all();
        console.log(`\nFound ${dropdowns.length} dropdowns:`);
        
        for (let i = 0; i < dropdowns.length; i++) {
            const dropdown = dropdowns[i];
            const name = await dropdown.getAttribute('name');
            const id = await dropdown.getAttribute('id');
            const options = await dropdown.locator('option').count();
            console.log(`  Dropdown ${i}: name="${name}", id="${id}", options=${options}`);
        }
        
        // Find submit buttons
        const buttons = await page.locator('input[type="submit"], button[type="submit"]').all();
        console.log(`\nFound ${buttons.length} submit buttons:`);
        
        for (let i = 0; i < buttons.length; i++) {
            const button = buttons[i];
            const value = await button.getAttribute('value');
            const text = await button.textContent();
            const name = await button.getAttribute('name');
            console.log(`  Button ${i}: name="${name}", value="${value}", text="${text}"`);
        }
        
        // Take screenshot
        await page.screenshot({ path: 'create-event-full-debug.png', fullPage: true });
        console.log('\nScreenshot saved as create-event-full-debug.png');
    });
});