import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
import { test } from '@playwright/test';

test.describe('Debug Event Fields', () => {
    test('Find event form selectors', async ({ page }) => {
        // Navigate directly to community-login
        const loginUrl = 'https://upskill-staging.measurequick.com/community-login/';
        await page.goto(loginUrl);
        await page.waitForLoadState('networkidle');
        
        // Login
        await page.fill('#user_login', 'test_trainer');
        await page.fill('#user_pass', 'Test123!');
        await page.click('#wp-submit');
        await page.waitForURL((url) => !url.toString().includes('community-login'));
        
        // Navigate to manage event
        await page.goto('https://upskill-staging.measurequick.com/manage-event/');
        await page.waitForLoadState('networkidle');
        
        // Find all input fields
        const inputFields = await page.$$eval('input[type="text"], input[type="date"], input[type="time"], input[type="submit"], input[type="button"]', elements => {
            return elements.map(el => ({
                type: el.type,
                name: el.getAttribute('name'),
                id: el.id,
                placeholder: el.getAttribute('placeholder'),
                value: el.getAttribute('value'),
                className: el.className,
                visible: (el as HTMLElement).offsetParent !== null
            }));
        });
        
        console.log('Input fields:', JSON.stringify(inputFields, null, 2));
        
        // Find textarea fields
        const textareas = await page.$$eval('textarea', elements => {
            return elements.map(el => ({
                name: el.getAttribute('name'),
                id: el.id,
                placeholder: el.getAttribute('placeholder'),
                className: el.className,
                visible: (el as HTMLElement).offsetParent !== null
            }));
        });
        
        console.log('Textareas:', JSON.stringify(textareas, null, 2));
        
        // Find select fields
        const selects = await page.$$eval('select', elements => {
            return elements.map(el => ({
                name: el.getAttribute('name'),
                id: el.id,
                className: el.className,
                visible: (el as HTMLElement).offsetParent !== null
            }));
        });
        
        console.log('Select fields:', JSON.stringify(selects, null, 2));
        
        // Find submit buttons  
        const buttons = await page.$$eval('button, input[type="submit"], input[type="button"], .button, .btn', elements => {
            return elements.map(el => ({
                tagName: el.tagName,
                type: el.getAttribute('type'),
                text: (el as HTMLElement).innerText || '',
                value: el.getAttribute('value') || '',
                className: el.className,
                visible: (el as HTMLElement).offsetParent !== null
            }));
        });
        
        console.log('Buttons:', JSON.stringify(buttons, null, 2));
        
        await page.screenshot({ path: 'test-results/screenshots/manage-event-fields.png', fullPage: true });
    });
});