/**
 * E2E Tests for UI Events Integration
 * 
 * Tests the integration between PHP LiveComponents and JavaScript UI components
 * via the event-based system.
 */

import { test, expect } from '@playwright/test';

test.describe('UI Events Integration', () => {
    test.beforeEach(async ({ page }) => {
        // Navigate to a test page with UI example component
        // Note: This assumes a test route exists
        await page.goto('/test/ui-events');
    });

    test('should show toast notification on toast:show event', async ({ page }) => {
        // Wait for component to be initialized
        await page.waitForSelector('[data-live-component]');

        // Click button that triggers toast
        await page.click('[data-live-action="showSuccessToast"]');

        // Wait for toast to appear
        await page.waitForSelector('.toast-queue-toast', { timeout: 5000 });

        // Verify toast content
        const toast = page.locator('.toast-queue-toast');
        await expect(toast).toBeVisible();
        await expect(toast).toContainText('Operation completed successfully');
    });

    test('should show different toast types', async ({ page }) => {
        await page.waitForSelector('[data-live-component]');

        // Test success toast
        await page.click('[data-live-action="showSuccessToast"]');
        await page.waitForSelector('.toast-queue-toast--success');
        await expect(page.locator('.toast-queue-toast--success')).toBeVisible();

        // Wait for toast to disappear
        await page.waitForTimeout(6000);

        // Test error toast
        await page.click('[data-live-action="showErrorToast"]');
        await page.waitForSelector('.toast-queue-toast--error');
        await expect(page.locator('.toast-queue-toast--error')).toBeVisible();
    });

    test('should show modal on modal:show event', async ({ page }) => {
        await page.waitForSelector('[data-live-component]');

        // Click button that triggers modal
        await page.click('[data-live-action="showModal"]');

        // Wait for modal to appear
        await page.waitForSelector('.livecomponent-modal', { timeout: 5000 });

        // Verify modal content
        const modal = page.locator('.livecomponent-modal');
        await expect(modal).toBeVisible();
        await expect(modal).toContainText('Example Modal');
    });

    test('should show confirmation dialog on modal:confirm event', async ({ page }) => {
        await page.waitForSelector('[data-live-component]');

        // Click button that triggers confirmation
        await page.click('[data-live-action="showConfirmDialog"]');

        // Wait for modal to appear
        await page.waitForSelector('.livecomponent-modal', { timeout: 5000 });

        // Verify confirmation dialog content
        const modal = page.locator('.livecomponent-modal');
        await expect(modal).toBeVisible();
        await expect(modal).toContainText('Confirm Action');
        await expect(modal).toContainText('Are you sure');

        // Verify buttons exist
        await expect(page.locator('button:has-text("Yes, proceed")')).toBeVisible();
        await expect(page.locator('button:has-text("Cancel")')).toBeVisible();
    });

    test('should close modal on modal:close event', async ({ page }) => {
        await page.waitForSelector('[data-live-component]');

        // Open modal
        await page.click('[data-live-action="showModal"]');
        await page.waitForSelector('.livecomponent-modal');

        // Close modal
        await page.click('[data-live-action="closeModal"]');

        // Wait for modal to disappear
        await page.waitForSelector('.livecomponent-modal', { state: 'hidden', timeout: 5000 });
    });

    test('should show alert dialog on modal:alert event', async ({ page }) => {
        await page.waitForSelector('[data-live-component]');

        // Click button that triggers alert
        await page.click('[data-live-action="showInfoAlert"]');

        // Wait for modal to appear
        await page.waitForSelector('.livecomponent-modal', { timeout: 5000 });

        // Verify alert content
        const modal = page.locator('.livecomponent-modal');
        await expect(modal).toBeVisible();
        await expect(modal).toContainText('Information');
    });

    test('should handle multiple toasts in queue', async ({ page }) => {
        await page.waitForSelector('[data-live-component]');

        // Trigger multiple toasts quickly
        await page.click('[data-live-action="showInfoToast"]');
        await page.click('[data-live-action="showSuccessToast"]');
        await page.click('[data-live-action="showWarningToast"]');

        // Wait for toasts to appear
        await page.waitForTimeout(1000);

        // Verify multiple toasts are visible
        const toasts = page.locator('.toast-queue-toast');
        const count = await toasts.count();
        expect(count).toBeGreaterThanOrEqual(2);
    });

    test('should handle modal stack with z-index', async ({ page }) => {
        await page.waitForSelector('[data-live-component]');

        // Open first modal
        await page.click('[data-live-action="showModal"]');
        await page.waitForSelector('.livecomponent-modal');

        // Get z-index of first modal
        const firstModal = page.locator('.livecomponent-modal').first();
        const firstZIndex = await firstModal.evaluate(el => {
            return window.getComputedStyle(el).zIndex;
        });

        // Open second modal (should have higher z-index)
        await page.click('[data-live-action="showLargeModal"]');
        await page.waitForTimeout(500);

        const modals = page.locator('.livecomponent-modal');
        const modalCount = await modals.count();
        expect(modalCount).toBeGreaterThanOrEqual(1);

        // Close top modal
        await page.click('[data-live-action="closeModal"]');
        await page.waitForTimeout(500);
    });

    test('should handle ESC key for topmost modal', async ({ page }) => {
        await page.waitForSelector('[data-live-component]');

        // Open modal
        await page.click('[data-live-action="showModal"]');
        await page.waitForSelector('.livecomponent-modal');

        // Press ESC key
        await page.keyboard.press('Escape');

        // Wait for modal to close
        await page.waitForSelector('.livecomponent-modal', { state: 'hidden', timeout: 5000 });
    });

    test('should hide toast on toast:hide event', async ({ page }) => {
        await page.waitForSelector('[data-live-component]');

        // Show toast
        await page.click('[data-live-action="showSuccessToast"]');
        await page.waitForSelector('.toast-queue-toast');

        // Hide toast
        await page.click('[data-live-action="hideToast"]');

        // Wait for toast to disappear
        await page.waitForSelector('.toast-queue-toast', { state: 'hidden', timeout: 5000 });
    });
});