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

test.describe('Debug Description Field', () => {
    test('Find description field selector', 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);
        
        // Try different selectors for the description field
        const descriptionSelectors = [
            '#content',
            'textarea#content',
            'textarea[name="content"]',
            '#content-html',
            '#content-visual',
            '.wp-editor-area',
            '#content_ifr', // TinyMCE iframe
            'iframe#content_ifr',
            '.mce-content-body',
            'div[contenteditable="true"]',
            '.mce-edit-area',
            '#mceu_27-body', // TinyMCE body
            'textarea.wp-editor-area'
        ];
        
        for (const selector of descriptionSelectors) {
            try {
                const element = page.locator(selector);
                if (await element.isVisible()) {
                    const tagName = await element.evaluate(el => el.tagName);
                    const id = await element.evaluate(el => el.id);
                    const name = await element.evaluate(el => (el as any).name);
                    const contentEditable = await element.evaluate(el => el.contentEditable);
                    
                    console.log(`Found element with selector "${selector}":`);
                    console.log(`  Tag: ${tagName}, ID: ${id}, Name: ${name}, ContentEditable: ${contentEditable}`);
                    
                    // If it's an iframe, check inside it
                    if (tagName === 'IFRAME') {
                        const frame = page.frameLocator(selector);
                        const bodyElement = frame.locator('body');
                        if (await bodyElement.isVisible()) {
                            console.log('  Found body inside iframe - this is the TinyMCE editor');
                        }
                    }
                }
            } catch (e) {
                // Ignore errors
            }
        }
        
        // Check if we need to switch to text mode
        const textTabButton = page.locator('button#content-html, a#content-html');
        if (await textTabButton.isVisible()) {
            console.log('\nFound "Text" tab button - clicking to switch to text mode');
            await textTabButton.click();
            await page.waitForTimeout(1000);
            
            // Now check for textarea
            const textarea = page.locator('textarea#content, textarea.wp-editor-area');
            if (await textarea.isVisible()) {
                console.log('Found textarea after switching to text mode');
                await textarea.fill('Test description in text mode');
                console.log('Successfully filled description in text mode');
            }
        }
        
        // Take screenshot
        await page.screenshot({ path: 'description-field-debug.png', fullPage: true });
        console.log('\nScreenshot saved as description-field-debug.png');
    });
});