<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiveComponents Test</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            background: #f5f5f5;
            margin: 0;
            padding: 2rem;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .header h1 {
            margin: 0 0 0.5rem 0;
            color: #333;
        }

        .header p {
            margin: 0;
            color: #666;
        }

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

        .test-section h2 {
            margin-top: 0;
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 0.5rem;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin: 1rem 0;
        }

        .feature-list li {
            padding: 0.5rem 0;
            display: flex;
            align-items: center;
        }

        .feature-list li:before {
            content: "";
            color: #28a745;
            font-weight: bold;
            margin-right: 0.5rem;
        }

        .code-example {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 4px;
            border-left: 4px solid #007bff;
            margin: 1rem 0;
            font-family: monospace;
            font-size: 0.875rem;
        }

        .instructions {
            background: #e3f2fd;
            border: 1px solid #2196f3;
            border-radius: 4px;
            padding: 1rem;
            margin: 1rem 0;
        }

        .instructions h3 {
            margin-top: 0;
            color: #1976d2;
        }

        .status {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .status-success {
            background: #d4edda;
            color: #155724;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>>ê LiveComponents Test Suite</h1>
            <p>Zero-Dependency Interactive Components</p>
            <span class="status status-success">System Active</span>
        </div>

        <div class="test-section">
            <h2>=Ê Test Component: Counter</h2>

            <div class="instructions">
                <h3>Test Instructions:</h3>
                <ul>
                    <li>Click <strong>+ Increment</strong> to increase counter</li>
                    <li>Click <strong>- Decrement</strong> to decrease counter</li>
                    <li>Click <strong>Reset</strong> to set counter to 0</li>
                    <li>Enter a number and click <strong>Add Amount</strong> to add custom value</li>
                    <li>Watch for auto-polling updates every 10 seconds</li>
                </ul>
            </div>

            {!! counter.toHtml() !!}

            <div style="margin-top: 2rem;">
                <h3>Features Demonstrated:</h3>
                <ul class="feature-list">
                    <li>Action Handling (increment, decrement, reset)</li>
                    <li>Form Submission (addAmount with parameter)</li>
                    <li>State Management (count, last_update)</li>
                    <li>Polling (auto-updates every 10 seconds)</li>
                    <li>DOM Updates (live HTML replacement)</li>
                </ul>
            </div>

            <div class="code-example">
                <strong>Component ID:</strong> {!! counter.getId() !!}<br>
                <strong>Template:</strong> Framework/LiveComponents/Templates/counter.view.php<br>
                <strong>Class:</strong> App\Application\Components\CounterComponent
            </div>
        </div>

        <div class="test-section">
            <h2>=à Technical Details</h2>

            <h3>Architecture:</h3>
            <div class="code-example">
final readonly class CounterComponent implements LiveComponentContract, Pollable
{
    use LiveComponentTrait;

    public function render(): string { /* ... */ }
    public function increment(): array { /* ... */ }
    public function poll(): array { /* ... */ }
}
            </div>

            <h3>Routes:</h3>
            <ul class="feature-list">
                <li>POST /live-component/{id} - Action Handler</li>
                <li>POST /live-component/{id}/upload - Upload Handler</li>
                <li>GET /test/livecomponents - This page</li>
            </ul>

            <h3>JavaScript:</h3>
            <ul class="feature-list">
                <li>/public/js/live-components.js (~3KB)</li>
                <li>/public/js/sse-client.js (~2KB)</li>
                <li>Zero external dependencies</li>
            </ul>
        </div>

        <div class="test-section">
            <h2>=Ý Browser Console</h2>
            <p>Open your browser's Developer Console (F12) to see:</p>
            <ul class="feature-list">
                <li>Component initialization logs</li>
                <li>Action execution traces</li>
                <li>Polling activity</li>
                <li>State updates</li>
            </ul>
        </div>
    </div>

    <!-- LiveComponents JavaScript -->
    <script src="/js/live-components.js"></script>
    <script src="/js/sse-client.js"></script>

    <script>
        // Log component initialization
        console.log('LiveComponents Test Suite Loaded');
        console.log('Available:', {
            liveComponents: window.liveComponents,
            sseManager: window.sseManager
        });

        // Custom event listener example
        document.addEventListener('component:updated', (e) => {
            console.log('Component updated:', e.detail);
        });
    </script>
</body>
</html>
