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 Modify Flow', () => {
    let loginPage: LoginPage;
    let dashboardPage: DashboardPage;
    let createEventPage: CreateEventPage;
    let eventSummaryPage: EventSummaryPage;
    let modifyEventPage: ModifyEventPage;
    
    const trainer = TEST_USERS.trainer;

    test.beforeEach(async ({ page }) => {
        loginPage = new LoginPage(page);
        dashboardPage = new DashboardPage(page);
        createEventPage = new CreateEventPage(page);
        eventSummaryPage = new EventSummaryPage(page);
        modifyEventPage = new ModifyEventPage(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('Debug Create Event and Wait', async ({ page }) => {
        // Start with dashboard
        await page.waitForLoadState('networkidle');
        await page.screenshot({ path: 'test-results/screenshots/initial-dashboard.png' });
        
        // Click create event button
        await dashboardPage.clickCreateEvent();
        await expect(page).toHaveURL(/.*manage-event/);
        await page.screenshot({ path: 'test-results/screenshots/create-event-page.png' });
        
        // Fill event details
        const eventData = TEST_EVENTS.basicEvent;
        await createEventPage.fillEventDetails(eventData);
        await page.screenshot({ path: 'test-results/screenshots/filled-event-details.png' });
        
        // Submit event
        await createEventPage.submitEvent();
        
        // Wait for navigation or success indicator
        await page.waitForLoadState('networkidle');
        await page.screenshot({ path: 'test-results/screenshots/after-submit.png' });
        
        // Check what happened
        const currentUrl = page.url();
        console.log('After submit URL:', currentUrl);
        
        // Check for success elements
        const viewYourEventsVisible = await page.locator('text="VIEW YOUR SUBMITTED EVENTS"').isVisible().catch(() => false);
        const publicationNotice = await page.locator('.publication-notice').isVisible().catch(() => false);
        const successMessage = await page.locator('.tribe-community-notice').isVisible().catch(() => false);
        
        console.log('View Your Events button:', viewYourEventsVisible);
        console.log('Publication notice:', publicationNotice);
        console.log('Success message:', successMessage);
        
        // If we see the success button, let's click it
        if (viewYourEventsVisible) {
            await page.click('text="VIEW YOUR SUBMITTED EVENTS"');
            await page.waitForLoadState('networkidle');
            await page.screenshot({ path: 'test-results/screenshots/after-view-events-click.png' });
            
            const afterClickUrl = page.url();
            console.log('After clicking View Your Events:', afterClickUrl);
        }
        
        // Try going back to dashboard manually
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        await page.screenshot({ path: 'test-results/screenshots/back-to-dashboard.png' });
        
        // Check event count
        const eventCount = await dashboardPage.getEventCount();
        console.log('Event count after creation:', eventCount);
        
        // Check if event appears in the list
        if (eventCount > 0) {
            const eventData = await dashboardPage.getEventRowData(0);
            console.log('First event data:', eventData);
        }
    });

    test('Try My Events Page', async ({ page }) => {
        // Try different URL patterns for the events page
        const urlPatterns = [
            '/my-events/',
            '/events/community/list/',
            '/community/events/list/',
            '/manage-events/'
        ];
        
        for (const pattern of urlPatterns) {
            try {
                await page.goto(`${STAGING_URL}${pattern}`);
                await page.waitForLoadState('networkidle');
                console.log(`Trying ${pattern}:`);
                const pageContent = await page.locator('body').innerText();
                console.log(`Content preview: ${pageContent.substring(0, 200)}...`);
                await page.screenshot({ path: `test-results/screenshots/my-events-${pattern.replace(/\//g, '-')}.png` });
            } catch (error) {
                console.log(`Failed to load ${pattern}:`, error.message);
            }
        }
    });
});