<layout template="layouts/default">
    <slot name="title">LiveComponent Timer - Lifecycle Hooks Demo</slot>

    <slot name="content">
        <div style="max-width: 1200px; margin: 2rem auto; padding: 0 1rem;">
            <!-- Header -->
            <div style="text-align: center; margin-bottom: 3rem;">
                <h1 style="font-size: 2.5rem; margin: 0 0 1rem 0; color: #333;">
                    Lifecycle Hooks Demo
                </h1>
                <p style="font-size: 1.125rem; color: #666; max-width: 600px; margin: 0 auto;">
                    Interactive demonstration of <code>onMount()</code>, <code>onUpdate()</code>, and <code>onDestroy()</code> lifecycle hooks
                </p>
            </div>

            <!-- Timer Component -->
            {include template="layouts/livecomponent-wrapper" data="{component: timer}"}

            <!-- Documentation -->
            <div style="margin-top: 4rem; background: white; border-radius: 8px; padding: 2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                <h2 style="margin: 0 0 1.5rem 0; color: #333;">How Lifecycle Hooks Work</h2>

                <div style="display: grid; gap: 1.5rem;">
                    <!-- onMount -->
                    <div style="padding: 1rem; background: #f8f9fa; border-left: 4px solid #28a745; border-radius: 4px;">
                        <h3 style="margin: 0 0 0.5rem 0; color: #28a745;">
                            <code>onMount()</code> - Component Initialization
                        </h3>
                        <p style="margin: 0 0 0.5rem 0; color: #666;">
                            Called once after the component is first created and mounted to the page.
                        </p>
                        <strong style="display: block; margin-bottom: 0.5rem; color: #333;">Use Cases:</strong>
                        <ul style="margin: 0; padding-left: 1.5rem; color: #555;">
                            <li>Start timers or intervals</li>
                            <li>Open database connections</li>
                            <li>Subscribe to events or websockets</li>
                            <li>Initialize external libraries</li>
                            <li>Log component mount for analytics</li>
                        </ul>
                    </div>

                    <!-- onUpdate -->
                    <div style="padding: 1rem; background: #f8f9fa; border-left: 4px solid #2196F3; border-radius: 4px;">
                        <h3 style="margin: 0 0 0.5rem 0; color: #2196F3;">
                            <code>onUpdate()</code> - State Change Reactions
                        </h3>
                        <p style="margin: 0 0 0.5rem 0; color: #666;">
                            Called after each action that updates the component's state.
                        </p>
                        <strong style="display: block; margin-bottom: 0.5rem; color: #333;">Use Cases:</strong>
                        <ul style="margin: 0; padding-left: 1.5rem; color: #555;">
                            <li>React to state changes</li>
                            <li>Update external resources</li>
                            <li>Sync with external services</li>
                            <li>Validate state consistency</li>
                            <li>Log state transitions</li>
                        </ul>
                    </div>

                    <!-- onDestroy -->
                    <div style="padding: 1rem; background: #f8f9fa; border-left: 4px solid #dc3545; border-radius: 4px;">
                        <h3 style="margin: 0 0 0.5rem 0; color: #dc3545;">
                            <code>onDestroy()</code> - Cleanup and Resource Deallocation
                        </h3>
                        <p style="margin: 0 0 0.5rem 0; color: #666;">
                            Called before the component is destroyed (when removed from the DOM).
                        </p>
                        <strong style="display: block; margin-bottom: 0.5rem; color: #333;">Use Cases:</strong>
                        <ul style="margin: 0; padding-left: 1.5rem; color: #555;">
                            <li>Stop timers and intervals</li>
                            <li>Close database connections</li>
                            <li>Unsubscribe from events</li>
                            <li>Cleanup external resources</li>
                            <li>Persist state before removal</li>
                        </ul>
                    </div>
                </div>

                <!-- Implementation Example -->
                <div style="margin-top: 2rem; padding: 1rem; background: #1e1e1e; border-radius: 4px; overflow-x: auto;">
                    <pre style="margin: 0; color: #d4d4d4; font-family: 'Courier New', monospace; font-size: 0.875rem; line-height: 1.5;"><code>#[LiveComponent(name: 'timer')]
final readonly class TimerComponent
    implements LiveComponentContract, LifecycleAware
{
    public function onMount(): void
    {
        // Called once when component first mounts
        error_log("Component mounted");
    }

    public function onUpdate(): void
    {
        // Called after each state update
        error_log("State updated");
    }

    public function onDestroy(): void
    {
        // Called when component is removed
        error_log("Component destroyed");
    }
}</code></pre>
                </div>

                <!-- Testing Tips -->
                <div style="margin-top: 2rem; padding: 1rem; background: #fffbea; border-left: 4px solid #ffc107; border-radius: 4px;">
                    <h3 style="margin: 0 0 0.5rem 0; color: #f59e0b;">Testing Lifecycle Hooks</h3>
                    <ol style="margin: 0; padding-left: 1.5rem; color: #666;">
                        <li><strong>Open browser console</strong> (F12) to see lifecycle hook logs</li>
                        <li><strong>Click Start/Stop/Reset</strong> to trigger <code>onUpdate()</code> hooks</li>
                        <li><strong>Watch the "Lifecycle Logs"</strong> in the component for action history</li>
                        <li><strong>Navigate away</strong> from this page to trigger <code>onDestroy()</code></li>
                    </ol>
                </div>

                <!-- Back Button -->
                <div style="margin-top: 2rem; text-align: center;">
                    <a href="/livecomponents" style="display: inline-block; padding: 0.75rem 2rem; background: #2196F3; color: white; text-decoration: none; border-radius: 4px; font-weight: 500; transition: background 0.2s;">
                        ← Back to LiveComponents Overview
                    </a>
                </div>
            </div>
        </div>
    </slot>
</layout>
