<?php

declare(strict_types=1);

/**
 * Test Lazy Loading Integration
 *
 * Demonstrates and tests the Lazy Component Loading system:
 * - Intersection Observer API integration
 * - On-demand component loading
 * - Priority-based loading queue
 * - Placeholder and loading states
 *
 * Usage: Visit this page in browser and scroll down to see components load.
 */

require_once __DIR__ . '/../../vendor/autoload.php';

use App\Framework\Core\Application;
use App\Framework\DI\DefaultContainer;

$container = new DefaultContainer();
$app = Application::create($container);

// This would be served as a view in the real application
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading Test - LiveComponents</title>
    <style>
        body {
            font-family: system-ui, sans-serif;
            margin: 0;
            padding: 2rem;
            background: #f5f5f5;
        }

        .header {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            margin-bottom: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        h1 {
            margin: 0 0 1rem 0;
            color: #2196F3;
        }

        .info {
            color: #666;
            line-height: 1.6;
        }

        .component-row {
            margin: 2rem 0;
            padding: 1rem;
            background: white;
            border-radius: 8px;
            border: 2px solid #e0e0e0;
        }

        .component-info {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 1rem;
            padding: 0.5rem;
            background: #f5f5f5;
            border-radius: 4px;
        }

        .spacer {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 1.2rem;
        }

        .stats {
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            z-index: 1000;
            min-width: 200px;
        }

        .stats h3 {
            margin: 0 0 0.5rem 0;
            font-size: 1rem;
            color: #2196F3;
        }

        .stats-row {
            display: flex;
            justify-content: space-between;
            margin: 0.25rem 0;
            font-size: 0.9rem;
        }

        .stats-label {
            color: #666;
        }

        .stats-value {
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="stats" id="lazy-stats">
        <h3>📊 Lazy Loading Stats</h3>
        <div class="stats-row">
            <span class="stats-label">Total:</span>
            <span class="stats-value" id="stats-total">0</span>
        </div>
        <div class="stats-row">
            <span class="stats-label">Loaded:</span>
            <span class="stats-value" id="stats-loaded">0</span>
        </div>
        <div class="stats-row">
            <span class="stats-label">Loading:</span>
            <span class="stats-value" id="stats-loading">0</span>
        </div>
        <div class="stats-row">
            <span class="stats-label">Pending:</span>
            <span class="stats-value" id="stats-pending">0</span>
        </div>
        <div class="stats-row">
            <span class="stats-label">Queued:</span>
            <span class="stats-value" id="stats-queued">0</span>
        </div>
    </div>

    <div class="header">
        <h1>🚀 Lazy Loading Test</h1>
        <div class="info">
            <p><strong>Scroll down</strong> to see components load on-demand when they enter the viewport.</p>
            <p>Each component has a different priority (high, normal, low) affecting load order.</p>
            <p>Watch the stats panel (top-right) to track loading progress.</p>
        </div>
    </div>

    <!-- Immediate Component (No Lazy Loading) -->
    <div class="component-row">
        <div class="component-info">
            ✅ <strong>Immediate Component</strong> - Loads immediately (no lazy loading)
        </div>
        <div data-live-component="counter:immediate-demo"
             data-state='{"count": 0}'
             data-csrf-token="test-token">
            <div style="padding: 2rem; text-align: center; background: #e3f2fd; border-radius: 8px;">
                <h3>Counter Component (Immediate)</h3>
                <div style="font-size: 2rem; margin: 1rem 0;">Count: 0</div>
                <button data-live-action="increment">Increment</button>
            </div>
        </div>
    </div>

    <!-- Spacer -->
    <div class="spacer">
        👇 Scroll down to trigger lazy loading 👇
    </div>

    <!-- Lazy Component 1 (High Priority) -->
    <div class="component-row">
        <div class="component-info">
            🔴 <strong>High Priority</strong> - Will load first when visible
        </div>
        <div data-live-component-lazy="notification-center:lazy-test-1"
             data-lazy-threshold="0.1"
             data-lazy-priority="high"
             data-lazy-placeholder="Loading high-priority notifications...">
        </div>
    </div>

    <div class="spacer">Keep scrolling...</div>

    <!-- Lazy Component 2 (Normal Priority) -->
    <div class="component-row">
        <div class="component-info">
            🟡 <strong>Normal Priority</strong> - Standard loading
        </div>
        <div data-live-component-lazy="activity-feed:lazy-test-2"
             data-lazy-threshold="0.1"
             data-lazy-priority="normal"
             data-lazy-placeholder="Loading activity feed...">
        </div>
    </div>

    <div class="spacer">Almost there...</div>

    <!-- Lazy Component 3 (Low Priority) -->
    <div class="component-row">
        <div class="component-info">
            🟢 <strong>Low Priority</strong> - Will load last
        </div>
        <div data-live-component-lazy="comment-thread:lazy-test-3"
             data-lazy-threshold="0.1"
             data-lazy-priority="low"
             data-lazy-placeholder="Loading comments...">
        </div>
    </div>

    <div class="spacer">You made it! 🎉</div>

    <!-- Lazy Component 4 (Normal Priority) -->
    <div class="component-row">
        <div class="component-info">
            🟡 <strong>Normal Priority</strong> - Another standard component
        </div>
        <div data-live-component-lazy="live-presence:lazy-test-4"
             data-lazy-threshold="0.1"
             data-lazy-priority="normal"
             data-lazy-placeholder="Loading live presence...">
        </div>
    </div>

    <script type="module">
        // Import LiveComponent module (this would be in your build)
        // For testing, we need to ensure the module is loaded

        // Stats updater
        function updateStats() {
            if (window.LiveComponent && window.LiveComponent.lazyLoader) {
                const stats = window.LiveComponent.lazyLoader.getStats();

                document.getElementById('stats-total').textContent = stats.total;
                document.getElementById('stats-loaded').textContent = stats.loaded;
                document.getElementById('stats-loading').textContent = stats.loading;
                document.getElementById('stats-pending').textContent = stats.pending;
                document.getElementById('stats-queued').textContent = stats.queued;
            }

            requestAnimationFrame(updateStats);
        }

        // Wait for DOM ready
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', () => {
                console.log('✅ DOM Ready');
                updateStats();
            });
        } else {
            console.log('✅ DOM Already Ready');
            updateStats();
        }

        // Listen for lazy loading events
        document.addEventListener('livecomponent:lazy:loaded', (e) => {
            console.log('🚀 Lazy component loaded:', e.detail);
        });

        document.addEventListener('livecomponent:lazy:error', (e) => {
            console.error('❌ Lazy component error:', e.detail);
        });
    </script>
</body>
</html>
<?php

echo "\n\n=== Lazy Loading Test Page Generated ===\n";
echo "✅ Open this file in browser to test lazy loading\n";
echo "✅ Components will load as you scroll down\n";
echo "✅ Check console for detailed loading logs\n";
echo "✅ Watch stats panel for real-time progress\n";
