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 Simple', () => {
    test('Find event title field', 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()}`);
        
        // Try multiple selectors for title field
        const titleSelectors = [
            '#title',
            '#EventTitle', 
            'input[name="EventTitle"]',
            'input[name="post_title"]',
            'input[placeholder*="title"]',
            'input[placeholder*="Title"]',
            'input[placeholder*="name"]',
            'input[placeholder*="Name"]',
            'input:near(label:has-text("Title"))',
            '#tribe-events-edit-meta input[type="text"]:first-of-type'
        ];
        
        for (const selector of titleSelectors) {
            try {
                const element = page.locator(selector);
                if (await element.isVisible()) {
                    const name = await element.getAttribute('name');
                    const id = await element.getAttribute('id');
                    const placeholder = await element.getAttribute('placeholder');
                    const value = await element.inputValue();
                    console.log(`Found title field with selector "${selector}": name="${name}", id="${id}", placeholder="${placeholder}", value="${value}"`);
                    
                    // Try to fill it
                    await element.fill('Test Event Title');
                    console.log('Successfully filled the field');
                    break;
                }
            } catch (e) {
                console.log(`Selector "${selector}" failed: ${e.message}`);
            }
        }
        
        // Take screenshot
        await page.screenshot({ path: 'create-event-simple-debug.png', fullPage: true });
        console.log('\nScreenshot saved as create-event-simple-debug.png');
    });
});