import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { DashboardPage } from './pages/DashboardPage';
import { CreateEventPage } from './pages/CreateEventPage';
import { EventSummaryPage } from './pages/EventSummaryPage';
import { ModifyEventPage } from './pages/ModifyEventPage';
import { TEST_USERS } from './data/test-users';
import { TEST_EVENTS } from './data/test-events';

// STAGING_URL is now imported from config

test.describe('Debug Event Listing', () => {
    let loginPage: LoginPage;
    let dashboardPage: DashboardPage;
    let createEventPage: CreateEventPage;
    
    const trainer = TEST_USERS.trainer;

    test.beforeEach(async ({ page }) => {
        loginPage = new LoginPage(page);
        dashboardPage = new DashboardPage(page);
        createEventPage = new CreateEventPage(page);
        
        // Set base URL and login
        page.context().setDefaultNavigationTimeout(TIMEOUTS.navigation);
        await page.goto(STAGING_URL);
        await loginPage.navigateToLogin();
        await loginPage.login(trainer.username, trainer.password);
    });

    test('Create Event and Click View Your Events', async ({ page }) => {
        // Click create event button
        await dashboardPage.clickCreateEvent();
        await expect(page).toHaveURL(/.*manage-event/);
        
        // Fill event details
        const eventData = TEST_EVENTS.basicEvent;
        await createEventPage.fillEventDetails(eventData);
        
        // Submit event
        await createEventPage.submitEvent();
        
        // Wait for navigation or success indicator
        await page.waitForLoadState('networkidle');
        
        // Click View Your Submitted Events
        const viewYourEventsButton = page.locator('text="VIEW YOUR SUBMITTED EVENTS"');
        const buttonVisible = await viewYourEventsButton.isVisible();
        
        if (buttonVisible) {
            console.log('Clicking View Your Submitted Events button');
            await viewYourEventsButton.click();
            await page.waitForLoadState('networkidle');
            
            const newUrl = page.url();
            console.log('After clicking View Your Events:', newUrl);
            await page.screenshot({ path: 'test-results/screenshots/my-events-page.png' });
            
            // Check what's on this page
            const pageContent = await page.locator('body').innerText();
            console.log('Page content preview:', pageContent.substring(0, 500));
            
            // Look for event listings
            const eventRows = await page.locator('table tbody tr').count();
            console.log('Number of event rows found:', eventRows);
            
            if (eventRows > 0) {
                // Try to click the first event
                const firstEventTitle = await page.locator('table tbody tr').first().locator('a').first();
                const eventTitleText = await firstEventTitle.innerText();
                console.log('First event title:', eventTitleText);
                
                await firstEventTitle.click();
                await page.waitForLoadState('networkidle');
                
                const eventUrl = page.url();
                console.log('After clicking event:', eventUrl);
                await page.screenshot({ path: 'test-results/screenshots/event-detail-page.png' });
            }
        }
    });

    test('Direct Navigation to My Events', async ({ page }) => {
        // Navigate directly to my-events page
        await page.goto(`${STAGING_URL}/my-events/`);
        await page.waitForLoadState('networkidle');
        await page.screenshot({ path: 'test-results/screenshots/direct-my-events.png' });
        
        // Check for events
        const pageContent = await page.locator('body').innerText();
        console.log('My Events page content:', pageContent.substring(0, 500));
        
        // Look for specific elements that might contain events
        const tables = await page.locator('table').count();
        console.log('Number of tables:', tables);
        
        const eventLinks = await page.locator('a[href*="event"]').count();
        console.log('Number of event links:', eventLinks);
        
        // Check for any status filters
        const statusFilters = await page.locator('a[href*="status"]').count();
        console.log('Number of status filters:', statusFilters);
    });
});