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

test.describe('Simple Create Event with TinyMCE', () => {
    test('Create basic event with rich text', async ({ page }) => {
        const loginPage = new LoginPage(page);
        const dashboardPage = new DashboardPage(page);
        const createEventPage = new CreateEventPage(page);
        const trainer = TEST_USERS.trainer;
        
        // Login
        await loginPage.navigateToLogin();
        await loginPage.login(trainer.username, trainer.password);
        
        // Navigate to create event
        await dashboardPage.clickCreateEvent();
        
        // Wait for form to load
        await page.waitForLoadState('networkidle');
        await page.waitForTimeout(2000);
        
        // Fill event title
        await page.fill('input[name="post_title"]', 'Test Event');
        
        // Handle the TinyMCE editor for description
        // First try to interact with iframe
        const iframe = page.frameLocator('#content_ifr');
        const iframeBody = iframe.locator('body');
        
        try {
            // Check if iframe is available
            await iframeBody.waitFor({ timeout: 5000 });
            await iframeBody.click();
            await iframeBody.type('Test event description in rich text editor');
            console.log('Filled description using iframe');
        } catch (e) {
            // If iframe fails, try switching to text mode
            console.log('Iframe failed, trying text mode');
            
            const textTab = page.locator('#content-html, button:has-text("Text"), a:has-text("Text")');
            if (await textTab.isVisible()) {
                await textTab.click();
                await page.waitForTimeout(1000);
                
                // Now fill the textarea
                const textarea = page.locator('textarea#content, textarea.wp-editor-area');
                await textarea.fill('Test event description in text mode');
                console.log('Filled description in text mode');
            }
        }
        
        // Fill dates
        await page.fill('#EventStartDate', '6/1/2025');
        await page.fill('#EventEndDate', '6/1/2025');
        
        // Fill times
        await page.fill('#EventStartTime', '09:00');
        await page.fill('#EventEndTime', '17:00');
        
        // Submit
        await page.click('input[value="Submit Event"]');
        
        // Wait for response
        await page.waitForLoadState('networkidle');
        await page.waitForTimeout(3000);
        
        console.log(`Final URL: ${page.url()}`);
        
        // Take screenshot
        await page.screenshot({ path: 'simple-create-event-tinymce-result.png', fullPage: true });
        
        // Check for success or error messages
        const successMessage = page.locator('.tribe-community-notice, .updated, .success-message, .notice-success');
        const errorMessage = page.locator('.error, .notice-error, .tribe-error');
        
        if (await successMessage.isVisible()) {
            const message = await successMessage.textContent();
            console.log(`Success: ${message}`);
        }
        
        if (await errorMessage.isVisible()) {
            const message = await errorMessage.textContent();
            console.log(`Error: ${message}`);
        }
    });
});