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('Event Modification Test', () => {
    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('Create and Modify Event', async ({ page }) => {
        // First create an event
        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();
        
        // Go back to dashboard
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        // Now get the event and click it
        const eventCount = await dashboardPage.getEventCount();
        expect(eventCount).toBeGreaterThan(0);
        
        const eventRowData = await dashboardPage.getEventRowData(0);
        await dashboardPage.clickEventName(eventRowData.name);
        
        // Should be on event summary page
        await expect(page).toHaveURL(/.*event-summary/);
        
        // Take screenshot before editing
        await page.screenshot({ path: 'test-results/screenshots/before-event-edit.png' });
        
        // Click Edit Event
        await eventSummaryPage.clickEditEvent();
        
        // Check if we're redirected correctly
        await page.waitForLoadState('networkidle');
        const currentUrl = page.url();
        console.log('After clicking Edit Event, URL is:', currentUrl);
        
        // Take screenshot of modify page
        await page.screenshot({ path: 'test-results/screenshots/modify-event-page.png' });
        
        // If we reached the modify page, update the event
        if (currentUrl.includes('modify-event') || currentUrl.includes('edit-event') || currentUrl.includes('manage-event')) {
            // Modify event details
            const updatedEvent = {
                ...TEST_EVENTS.basicEvent,
                title: 'Updated HVAC Training',
                description: 'Updated description for the training event.'
            };
            
            await modifyEventPage.fillEventDetails(updatedEvent);
            
            // Take screenshot before updating
            await page.screenshot({ path: 'test-results/screenshots/before-update-button.png' });
            
            // Check if update button is visible
            const updateButtonVisible = await modifyEventPage.isUpdateButtonVisible();
            console.log('Update button visible:', updateButtonVisible);
            
            if (updateButtonVisible) {
                await modifyEventPage.updateEvent();
            } else {
                // Try the submit button approach
                await createEventPage.submitEvent();
            }
            
            // Verify update success
            await page.waitForLoadState('networkidle');
            await page.screenshot({ path: 'test-results/screenshots/after-event-update.png' });
            
            // Go back to dashboard to verify the update
            await page.goto(PATHS.dashboard);
            await page.waitForLoadState('networkidle');
            
            const updatedEventData = await dashboardPage.getEventRowData(0);
            console.log('Updated event data:', updatedEventData);
        } else {
            console.log('Did not reach modify event page. Current URL:', currentUrl);
            throw new Error('Failed to navigate to modify event page');
        }
    });
});