/**
 * Help System - Welcome Guide E2E Tests
 * 
 * Tests the interactive welcome guide modal functionality including:
 * - Modal appearance on first login
 * - Navigation between cards
 * - Cookie-based dismissal
 * - Accessibility features
 */

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

test.describe('Help System - Welcome Guide @help @welcome-guide', () => {
    
    test.beforeEach(async ({ page, context }) => {
        // Clear cookies to ensure fresh state for welcome guide
        await context.clearCookies();
    });

    test('Welcome guide appears on first dashboard visit', async ({ page }) => {
        console.log('Testing welcome guide appearance on first visit...');
        
        // Login as trainer
        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');
        
        // Navigate to dashboard
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        // Wait for welcome modal to appear
        const welcomeModal = page.locator('#hvac-welcome-modal');
        await expect(welcomeModal).toBeVisible({ timeout: TIMEOUTS.standard });
        
        // Verify modal header
        await expect(page.locator('.hvac-modal-header h2')).toContainText('Welcome to Upskill HVAC Training Network!');
        
        // Verify first card is active
        const firstCard = page.locator('.hvac-welcome-card[data-card="0"]');
        await expect(firstCard).toHaveClass(/active/);
        
        // Verify first card content
        await expect(firstCard.locator('h3')).toContainText('Verified Expert Platform');
        await expect(firstCard.locator('p')).toContainText('vetted community');
        
        console.log('✓ Welcome guide appears correctly on first visit');
        await page.screenshot({ path: 'test-results/screenshots/welcome-guide-first-card.png' });
    });

    test('Welcome guide navigation works correctly', async ({ page, context }) => {
        console.log('Testing welcome guide navigation...');
        
        // Clear cookies and login
        await context.clearCookies();
        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');
        
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        // Wait for modal
        await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
        
        // Test Next button navigation
        const nextButton = page.locator('#hvac-next-card');
        await nextButton.click();
        
        // Verify second card is active
        const secondCard = page.locator('.hvac-welcome-card[data-card="1"]');
        await expect(secondCard).toHaveClass(/active/);
        await expect(secondCard.locator('h3')).toContainText('Create & Manage Events');
        
        // Test indicator navigation
        const thirdIndicator = page.locator('.hvac-indicator[data-card="2"]');
        await thirdIndicator.click();
        
        // Verify third card is active
        const thirdCard = page.locator('.hvac-welcome-card[data-card="2"]');
        await expect(thirdCard).toHaveClass(/active/);
        await expect(thirdCard.locator('h3')).toContainText('Keep 100% Revenue');
        
        // Test Previous button
        const prevButton = page.locator('#hvac-prev-card');
        await prevButton.click();
        
        // Verify second card is active again
        await expect(secondCard).toHaveClass(/active/);
        
        // Navigate to last card
        const fourthIndicator = page.locator('.hvac-indicator[data-card="3"]');
        await fourthIndicator.click();
        
        // Verify fourth card content
        const fourthCard = page.locator('.hvac-welcome-card[data-card="3"]');
        await expect(fourthCard).toHaveClass(/active/);
        await expect(fourthCard.locator('h3')).toContainText('Professional Certificates');
        
        // Verify Next button becomes "Finish" on last card
        await expect(nextButton).toContainText('Finish');
        
        console.log('✓ Welcome guide navigation works correctly');
        await page.screenshot({ path: 'test-results/screenshots/welcome-guide-navigation.png' });
    });

    test('Welcome guide keyboard navigation works', async ({ page, context }) => {
        console.log('Testing welcome guide keyboard navigation...');
        
        await context.clearCookies();
        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');
        
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
        
        // Test right arrow key
        await page.keyboard.press('ArrowRight');
        const secondCard = page.locator('.hvac-welcome-card[data-card="1"]');
        await expect(secondCard).toHaveClass(/active/);
        
        // Test left arrow key
        await page.keyboard.press('ArrowLeft');
        const firstCard = page.locator('.hvac-welcome-card[data-card="0"]');
        await expect(firstCard).toHaveClass(/active/);
        
        console.log('✓ Keyboard navigation works correctly');
    });

    test('Welcome guide dismissal with "Don\'t show again" works', async ({ page, context }) => {
        console.log('Testing welcome guide permanent dismissal...');
        
        await context.clearCookies();
        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');
        
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
        
        // Check "Don't show again" checkbox
        await page.check('#hvac-dont-show-again');
        
        // Click "Get Started" button
        await page.click('#hvac-get-started');
        
        // Modal should disappear
        await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
        
        // Refresh page to test cookie persistence
        await page.reload();
        await page.waitForLoadState('networkidle');
        
        // Modal should not appear again
        await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
        
        console.log('✓ Welcome guide dismissal with cookie works correctly');
    });

    test('Welcome guide close button works', async ({ page, context }) => {
        console.log('Testing welcome guide close button...');
        
        await context.clearCookies();
        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');
        
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
        
        // Click close button
        await page.click('.hvac-modal-close');
        
        // Modal should disappear
        await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
        
        // Refresh page - modal should appear again (not permanently dismissed)
        await page.reload();
        await page.waitForLoadState('networkidle');
        
        // Modal should appear again since we didn't check "don't show again"
        await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
        
        console.log('✓ Welcome guide close button works correctly');
    });

    test('Welcome guide ESC key closes modal', async ({ page, context }) => {
        console.log('Testing welcome guide ESC key functionality...');
        
        await context.clearCookies();
        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');
        
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
        
        // Press ESC key
        await page.keyboard.press('Escape');
        
        // Modal should disappear
        await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
        
        console.log('✓ ESC key closes welcome guide correctly');
    });

    test('Welcome guide only appears on dashboard page', async ({ page, context }) => {
        console.log('Testing welcome guide page-specific behavior...');
        
        await context.clearCookies();
        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');
        
        // Visit profile page first
        await page.goto(PATHS.profile);
        await page.waitForLoadState('networkidle');
        
        // Modal should not appear on profile page
        await expect(page.locator('#hvac-welcome-modal')).not.toBeVisible();
        
        // Now visit dashboard
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        // Modal should appear on dashboard
        await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
        
        console.log('✓ Welcome guide appears only on dashboard page');
    });

    test('Welcome guide has proper accessibility attributes', async ({ page, context }) => {
        console.log('Testing welcome guide accessibility...');
        
        await context.clearCookies();
        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');
        
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
        
        // Check close button has aria-label
        await expect(page.locator('.hvac-modal-close')).toHaveAttribute('aria-label', 'Close welcome guide');
        
        // Check navigation buttons are properly labeled
        await expect(page.locator('#hvac-prev-card')).toContainText('Previous');
        await expect(page.locator('#hvac-next-card')).toContainText('Next');
        
        // Test focus management
        await page.keyboard.press('Tab');
        const focusedElement = await page.locator(':focus').first();
        
        console.log('✓ Welcome guide has proper accessibility features');
    });

    test('Welcome guide cards contain expected content', async ({ page, context }) => {
        console.log('Testing welcome guide content accuracy...');
        
        await context.clearCookies();
        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');
        
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        await expect(page.locator('#hvac-welcome-modal')).toBeVisible();
        
        // Test all four cards
        const expectedCards = [
            {
                title: 'Verified Expert Platform',
                keywords: ['vetted', 'community', 'screening']
            },
            {
                title: 'Create & Manage Events',
                keywords: ['create', 'events', 'pricing', 'reviewed']
            },
            {
                title: 'Keep 100% Revenue',
                keywords: ['100%', 'ticket', 'sales', 'Stripe']
            },
            {
                title: 'Professional Certificates',
                keywords: ['certificates', 'completion', 'professional']
            }
        ];
        
        for (let i = 0; i < expectedCards.length; i++) {
            // Navigate to card
            const indicator = page.locator(`.hvac-indicator[data-card="${i}"]`);
            await indicator.click();
            
            const card = page.locator(`.hvac-welcome-card[data-card="${i}"]`);
            await expect(card).toHaveClass(/active/);
            
            // Check title
            await expect(card.locator('h3')).toContainText(expectedCards[i].title);
            
            // Check that description contains expected keywords
            const description = card.locator('p');
            for (const keyword of expectedCards[i].keywords) {
                await expect(description).toContainText(keyword);
            }
        }
        
        console.log('✓ All welcome guide cards contain expected content');
        await page.screenshot({ path: 'test-results/screenshots/welcome-guide-content-check.png' });
    });
});