/**
 * Help System - Documentation Page E2E Tests
 * 
 * Tests the documentation page functionality including:
 * - Page content and structure
 * - Navigation menu functionality
 * - FAQ section
 * - Links and buttons
 */

import { test, expect } from '@playwright/test';
import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';

test.describe('Help System - Documentation Page @help @documentation', () => {
    
    test.beforeEach(async ({ page }) => {
        // Login as trainer before each test
        await page.goto(PATHS.login);
        await page.fill('#user_login', 'test_trainer');
        await page.fill('#user_pass', 'Test123!');
        await page.click('#wp-submit');
        await page.waitForLoadState('networkidle');
    });

    test('Documentation page loads and displays correctly', async ({ page }) => {
        console.log('Testing documentation page loading...');
        
        // Navigate to documentation page
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Check page title
        await expect(page.locator('h1')).toContainText('Trainer Documentation');
        
        // Check subtitle
        await expect(page.locator('.hvac-doc-subtitle')).toContainText('Everything you need to know about managing your training events');
        
        // Check main container
        await expect(page.locator('.hvac-documentation')).toBeVisible();
        
        console.log('✓ Documentation page loads correctly');
        await page.screenshot({ path: 'test-results/screenshots/documentation-page.png' });
    });

    test('Documentation navigation menu works', async ({ page }) => {
        console.log('Testing documentation navigation menu...');
        
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Check navigation menu exists
        await expect(page.locator('.hvac-doc-navigation')).toBeVisible();
        
        // Test navigation links
        const navLinks = [
            { text: 'Getting Started', target: '#getting-started' },
            { text: 'Managing Events', target: '#managing-events' },
            { text: 'Attendee Management', target: '#attendee-management' },
            { text: 'Certificates', target: '#certificates' },
            { text: 'FAQ', target: '#faq' }
        ];
        
        for (const link of navLinks) {
            const navLink = page.locator('.hvac-doc-link').filter({ hasText: link.text });
            await expect(navLink).toBeVisible();
            await expect(navLink).toHaveAttribute('href', link.target);
        }
        
        console.log('✓ Navigation menu structure is correct');
    });

    test('Documentation smooth scrolling works', async ({ page }) => {
        console.log('Testing documentation smooth scrolling...');
        
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Click on FAQ link and verify smooth scroll
        const faqLink = page.locator('.hvac-doc-link[href="#faq"]');
        await faqLink.click();
        
        // Wait for scroll animation
        await page.waitForTimeout(1000);
        
        // Check that FAQ section is in view
        const faqSection = page.locator('#faq');
        await expect(faqSection).toBeInViewport();
        
        // Click on Getting Started link
        const gettingStartedLink = page.locator('.hvac-doc-link[href="#getting-started"]');
        await gettingStartedLink.click();
        
        await page.waitForTimeout(1000);
        
        // Check that Getting Started section is in view
        const gettingStartedSection = page.locator('#getting-started');
        await expect(gettingStartedSection).toBeInViewport();
        
        console.log('✓ Smooth scrolling navigation works');
    });

    test('Getting Started section content is correct', async ({ page }) => {
        console.log('Testing Getting Started section content...');
        
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Check Getting Started section
        const gettingStartedSection = page.locator('#getting-started');
        await expect(gettingStartedSection).toBeVisible();
        
        // Check section header
        await expect(gettingStartedSection.locator('h2')).toContainText('Getting Started');
        
        // Check for the three main cards
        const cards = [
            { title: '1. Complete Your Profile', buttonText: 'Edit Profile' },
            { title: '2. Create Your First Event', buttonText: 'Create Event' },
            { title: '3. Monitor Your Dashboard', buttonText: 'View Dashboard' }
        ];
        
        for (const card of cards) {
            const cardElement = gettingStartedSection.locator('.hvac-doc-card').filter({ hasText: card.title });
            await expect(cardElement).toBeVisible();
            await expect(cardElement.locator('h3')).toContainText(card.title);
            
            // Check action button
            const button = cardElement.locator('.hvac-doc-btn');
            await expect(button).toContainText(card.buttonText);
        }
        
        console.log('✓ Getting Started section content is correct');
    });

    test('Managing Events section content is correct', async ({ page }) => {
        console.log('Testing Managing Events section content...');
        
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Navigate to Managing Events section
        const managingEventsSection = page.locator('#managing-events');
        await expect(managingEventsSection).toBeVisible();
        
        // Check section header with icon
        await expect(managingEventsSection.locator('h2')).toContainText('Managing Events');
        await expect(managingEventsSection.locator('h2 i')).toHaveClass(/fa-calendar-alt/);
        
        // Check for key features
        const features = [
            'Event Creation Process',
            'Key Event Features',
            'Event Summary Page'
        ];
        
        for (const feature of features) {
            const featureElement = managingEventsSection.locator('.hvac-feature').filter({ hasText: feature });
            await expect(featureElement).toBeVisible();
        }
        
        // Check event creation process steps
        const processSteps = ['Draft:', 'Review:', 'Published:'];
        for (const step of processSteps) {
            await expect(managingEventsSection).toContainText(step);
        }
        
        console.log('✓ Managing Events section content is correct');
    });

    test('FAQ section content is comprehensive', async ({ page }) => {
        console.log('Testing FAQ section content...');
        
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Navigate to FAQ section
        const faqSection = page.locator('#faq');
        await expect(faqSection).toBeVisible();
        
        // Check section header with icon
        await expect(faqSection.locator('h2')).toContainText('Frequently Asked Questions');
        await expect(faqSection.locator('h2 i')).toHaveClass(/fa-question-circle/);
        
        // Check for expected FAQ items
        const expectedFAQs = [
            'How do I get paid for my events?',
            'How long does event review take?',
            'Can I modify events after they\'re published?',
            'What if I need to cancel an event?',
            'How do I improve my event visibility?',
            'Can I offer different types of training?',
            'What support is available?'
        ];
        
        for (const faq of expectedFAQs) {
            const faqItem = faqSection.locator('.hvac-faq-item').filter({ hasText: faq });
            await expect(faqItem).toBeVisible();
            await expect(faqItem.locator('h3')).toContainText(faq);
        }
        
        // Check that FAQ answers contain relevant information
        await expect(faqSection).toContainText('100%');  // Revenue info
        await expect(faqSection).toContainText('Stripe'); // Payment processor
        await expect(faqSection).toContainText('1-2 business days'); // Review time
        
        console.log('✓ FAQ section content is comprehensive');
        await page.screenshot({ path: 'test-results/screenshots/faq-section.png' });
    });

    test('Documentation action links work correctly', async ({ page }) => {
        console.log('Testing documentation action links...');
        
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Test Edit Profile link
        const editProfileLink = page.locator('.hvac-doc-btn').filter({ hasText: 'Edit Profile' });
        await expect(editProfileLink).toHaveAttribute('href', '/trainer-profile');
        
        // Test Create Event link
        const createEventLink = page.locator('.hvac-doc-btn').filter({ hasText: 'Create Event' });
        await expect(createEventLink).toHaveAttribute('href', '/manage-event');
        
        // Test View Dashboard link
        const dashboardLink = page.locator('.hvac-doc-btn').filter({ hasText: 'View Dashboard' });
        await expect(dashboardLink).toHaveAttribute('href', '/hvac-dashboard');
        
        console.log('✓ Documentation action links are correct');
    });

    test('Documentation page is accessible via help buttons', async ({ page }) => {
        console.log('Testing documentation page accessibility via help buttons...');
        
        // From dashboard
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        const helpButtonDashboard = page.locator('a').filter({ hasText: 'Help' });
        if (await helpButtonDashboard.count() > 0) {
            await expect(helpButtonDashboard).toHaveAttribute('href', '/hvac-documentation/');
            console.log('✓ Help button found on dashboard');
        }
        
        // From profile page
        await page.goto(PATHS.profile);
        await page.waitForLoadState('networkidle');
        
        const helpButtonProfile = page.locator('a').filter({ hasText: 'Help' });
        if (await helpButtonProfile.count() > 0) {
            await expect(helpButtonProfile).toHaveAttribute('href', '/hvac-documentation/');
            console.log('✓ Help button found on profile page');
        }
        
        // Test clicking help button actually navigates to documentation
        if (await helpButtonProfile.count() > 0) {
            await helpButtonProfile.click();
            await page.waitForLoadState('networkidle');
            
            await expect(page).toHaveURL(/hvac-documentation/);
            await expect(page.locator('h1')).toContainText('Trainer Documentation');
            console.log('✓ Help button navigation works');
        }
    });

    test('Documentation page responsive design works', async ({ page }) => {
        console.log('Testing documentation page responsive design...');
        
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Test desktop view
        await page.setViewportSize({ width: 1200, height: 800 });
        await expect(page.locator('.hvac-documentation')).toBeVisible();
        
        // Test tablet view
        await page.setViewportSize({ width: 768, height: 1024 });
        await expect(page.locator('.hvac-documentation')).toBeVisible();
        
        // Test mobile view
        await page.setViewportSize({ width: 375, height: 667 });
        await expect(page.locator('.hvac-documentation')).toBeVisible();
        
        // Check that navigation menu adapts
        const navMenu = page.locator('.hvac-doc-nav');
        await expect(navMenu).toBeVisible();
        
        console.log('✓ Documentation page responsive design works');
        await page.screenshot({ path: 'test-results/screenshots/documentation-mobile.png' });
    });

    test('Documentation sections have proper styling', async ({ page }) => {
        console.log('Testing documentation styling...');
        
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Check that all sections have the correct CSS classes
        const sections = ['#getting-started', '#managing-events', '#attendee-management', '#certificates', '#faq'];
        
        for (const sectionId of sections) {
            const section = page.locator(sectionId);
            await expect(section).toHaveClass(/hvac-doc-section/);
            
            // Check section headers have icons
            const header = section.locator('h2');
            await expect(header).toBeVisible();
            
            const icon = header.locator('i');
            if (await icon.count() > 0) {
                await expect(icon).toHaveClass(/fa-/);
            }
        }
        
        // Check cards have proper styling
        const docCards = page.locator('.hvac-doc-card');
        const cardCount = await docCards.count();
        expect(cardCount).toBeGreaterThan(0);
        
        console.log(`✓ Found ${cardCount} properly styled documentation cards`);
    });

    test('Documentation content is accurate and helpful', async ({ page }) => {
        console.log('Testing documentation content accuracy...');
        
        await page.goto(`${STAGING_URL}/hvac-documentation/`);
        await page.waitForLoadState('networkidle');
        
        // Check for key platform information
        await expect(page.getByText('100% of your ticket sales')).toBeVisible();
        await expect(page.getByText('minus standard Stripe processing fees')).toBeVisible();
        await expect(page.getByText('1-2 business days')).toBeVisible(); // Review process time
        
        // Check for feature mentions
        await expect(page.getByText('certificates')).toBeVisible();
        await expect(page.getByText('check-in')).toBeVisible();
        await expect(page.getByText('email')).toBeVisible();
        
        // Check for proper support information
        await expect(page.getByText('support team')).toBeVisible();
        await expect(page.getByText('documentation')).toBeVisible();
        
        console.log('✓ Documentation content is accurate and helpful');
    });
});