import { test, expect } from '@playwright/test';
import { DashboardPage } from './pages/DashboardPage';
import { CertificatePage } from './pages/CertificatePage';
import { CertificateTestData } from './utils/CertificateTestData';

const STAGING_URL = 'https://wordpress-974670-5399585.cloudwaysapps.com';

test.describe('Complete Trainer Journey with Certificates @trainer-journey @certificates', () => {
    test('Full trainer workflow including certificate generation', async ({ page }) => {
        console.log('Starting comprehensive trainer journey test with certificates...');
        
        // Step 1: Login as test_trainer
        console.log('Step 1: Logging in...');
        await page.goto(`${STAGING_URL}/community-login/`);
        await page.fill('#user_login', 'test_trainer');
        await page.fill('#user_pass', 'Test123!');
        await page.click('#wp-submit');
        await page.waitForLoadState('networkidle');
        await expect(page).toHaveURL(/hvac-dashboard/);
        console.log('Login successful');
        
        // Initialize page objects
        const dashboardPage = new DashboardPage(page);
        const certificatePage = new CertificatePage(page);
        
        // Step 2: Verify dashboard shows essential elements
        console.log('Step 2: Verifying dashboard content...');
        await dashboardPage.navigate();
        
        // Check for certificate links in the navigation
        await page.waitForSelector(page.locator('a:has-text("Generate Certificates")').first());
        await page.waitForSelector(page.locator('a:has-text("Certificate Reports")').first());
        
        // Verify statistics are displayed
        const stats = await dashboardPage.getStatistics();
        console.log('Dashboard statistics:', stats);
        
        // Verify events table is visible
        const eventsTableVisible = await dashboardPage.isEventsTableVisible();
        expect(eventsTableVisible).toBeTruthy();
        
        // Step 3: Create a new event for testing
        console.log('Step 3: Creating a new event...');
        
        await dashboardPage.clickCreateEvent();
        
        // Fill in event details
        const eventName = `Certificate Test Event ${new Date().getTime()}`;
        await page.fill('#post_title, input[name="post_title"]', eventName);
        
        // Add description
        const newEventFrame = page.frameLocator('iframe[id*="_ifr"]');
        const newEventBody = newEventFrame.locator('body');
        await newEventBody.fill(`This is a test event created for certificate journey testing: ${eventName}`);
        
        // Set future dates (30 days from now)
        const futureDate = new Date();
        futureDate.setDate(futureDate.getDate() + 30);
        const dateString = `${(futureDate.getMonth() + 1).toString().padStart(2, '0')}/${futureDate.getDate().toString().padStart(2, '0')}/${futureDate.getFullYear()}`;
        
        await page.fill('input[name="EventStartDate"]', dateString);
        await page.fill('input[name="EventStartTime"]', '10:00 AM');
        await page.fill('input[name="EventEndDate"]', dateString);
        await page.fill('input[name="EventEndTime"]', '04:00 PM');
        
        // Add a ticket
        // Try to find the ticket UI
        const addTicketSection = page.locator('a:has-text("Add Tickets")');
        if (await addTicketSection.isVisible()) {
            await addTicketSection.click();
            await page.waitForTimeout(1000);
        }
        
        const ticketNameField = page.locator('#tribe-tickets-editor-tickets-name');
        const ticketPriceField = page.locator('#tribe-tickets-editor-tickets-price');
        const addTicketButton = page.locator('button:has-text("Add Ticket")');
        
        if (await ticketNameField.isVisible()) {
            await ticketNameField.fill('Standard Admission');
            await ticketPriceField.fill('99.99');
            await addTicketButton.click();
            await page.waitForTimeout(2000);
            console.log('Added ticket to event');
        } else {
            console.log('Ticket UI not found, continuing without adding ticket');
        }
        
        // Submit the event
        const submitButton = page.locator('input[value="Submit Event"], button:has-text("Submit Event")');
        await submitButton.click();
        await page.waitForLoadState('networkidle');
        
        // Verify submission success
        const successMessage = page.locator('text=/success|submitted/i');
        await expect(successMessage.first()).toBeVisible({ timeout: 10000 });
        
        console.log(`New event "${eventName}" created successfully`);
        
        // Step 4: Navigate to Generate Certificates page
        console.log('Step 4: Navigating to Generate Certificates page...');
        await dashboardPage.navigate();
        await dashboardPage.clickGenerateCertificates();
        
        // Verify we're on the generate certificates page
        const generatePageVisible = await certificatePage.isGenerateCertificatesPageVisible();
        expect(generatePageVisible).toBeTruthy();
        
        // Check if the newly created event is available in the dropdown
        // If it is, we could verify event selection functionality
        try {
            await certificatePage.selectEvent(eventName);
            console.log('Event found in certificate generation dropdown');
            
            // If there are no attendees yet, the attendee list might be empty
            const attendeeCount = await certificatePage.getAttendeeCount();
            console.log(`Found ${attendeeCount} attendees for the new event`);
            
            // Since this is a brand new event with no attendees yet,
            // no certificates can be generated at this point
        } catch (error) {
            console.log('New event not yet available in certificate generation, continuing test');
        }
        
        // Step 5: Navigate to Certificate Reports page
        console.log('Step 5: Navigating to Certificate Reports page...');
        await dashboardPage.navigate();
        await dashboardPage.clickCertificateReports();
        
        // Verify we're on the certificate reports page
        const reportsPageVisible = await certificatePage.isCertificateReportsPageVisible();
        expect(reportsPageVisible).toBeTruthy();
        
        // Step 6: Search for any existing certificates
        console.log('Step 6: Searching for existing certificates...');
        
        // Clear any existing filters
        await certificatePage.searchCertificates('');
        
        // Get the number of existing certificates
        const existingCertificateCount = await certificatePage.getCertificateCount();
        console.log(`Found ${existingCertificateCount} existing certificates`);
        
        // If certificates exist, test viewing one
        if (existingCertificateCount > 0) {
            await certificatePage.viewCertificate(0);
            await certificatePage.closePreview();
            console.log('Successfully viewed an existing certificate');
        }
        
        // Step 7: Navigate back to My Events page to check the new event
        console.log('Step 7: Navigating to My Events page...');
        await dashboardPage.navigate();
        await page.goto(`${STAGING_URL}/my-events/`);
        await page.waitForLoadState('networkidle');
        
        // Check for the newly created event
        const newEventListing = page.locator(`text="${eventName}"`);
        await expect(newEventListing).toBeVisible({ timeout: 10000 });
        console.log('New event found in My Events list');
        
        // Step 8: Verify the complete trainer journey
        console.log('Step 8: Final verification...');
        
        // Return to dashboard
        await dashboardPage.navigate();
        
        // Take a final screenshot
        await page.screenshot({ path: 'trainer-journey-with-certificates-complete.png', fullPage: true });
        
        console.log('Comprehensive trainer journey test with certificates completed successfully!');
    });
});