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 Form', () => {
    test('Find create 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 all input fields
        const inputs = await page.locator('input[type="text"], input[type="email"], input[type="date"], input[type="time"], input[type="number"]').all();
        console.log(`Found ${inputs.length} input fields:`);
        
        for (let i = 0; i < inputs.length; i++) {
            const input = inputs[i];
            const name = await input.getAttribute('name');
            const id = await input.getAttribute('id');
            const placeholder = await input.getAttribute('placeholder');
            const value = await input.inputValue();
            console.log(`  Input ${i}: name="${name}", id="${id}", placeholder="${placeholder}", value="${value}"`);
        }
        
        // Find all textareas
        const textareas = await page.locator('textarea').all();
        console.log(`\nFound ${textareas.length} textareas:`);
        
        for (let i = 0; i < textareas.length; i++) {
            const textarea = textareas[i];
            const name = await textarea.getAttribute('name');
            const id = await textarea.getAttribute('id');
            const placeholder = await textarea.getAttribute('placeholder');
            console.log(`  Textarea ${i}: name="${name}", id="${id}", placeholder="${placeholder}"`);
        }
        
        // Find all select dropdowns
        const selects = await page.locator('select').all();
        console.log(`\nFound ${selects.length} select fields:`);
        
        for (let i = 0; i < selects.length; i++) {
            const select = selects[i];
            const name = await select.getAttribute('name');
            const id = await select.getAttribute('id');
            console.log(`  Select ${i}: name="${name}", id="${id}"`);
        }
        
        // Look for specific labels
        const labelTexts = ['Title', 'Event Title', 'Name', 'Date', 'Time', 'Description'];
        for (const text of labelTexts) {
            const label = page.locator(`label:has-text("${text}")`);
            if (await label.isVisible()) {
                const forAttr = await label.getAttribute('for');
                console.log(`\nLabel "${text}" points to: ${forAttr}`);
            }
        }
        
        // Take screenshot
        await page.screenshot({ path: 'create-event-form-debug.png', fullPage: true });
        console.log('\nScreenshot saved as create-event-form-debug.png');
    });
});