{% extends "base/skeleton.html.jinja" %}

{% block title %}
    Claude Code Events - Debug
{% endblock title %}
{% block body %}
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- Header -->
        <header class="mb-8">
            <h1 class="text-4xl font-bold text-base-content mb-2">Claude Code Events</h1>
            <p class="text-base-content/70">Real-time notifications from Claude Code hooks</p>
        </header>
        <!-- Connection Status -->
        <div class="alert mb-6" id="connection-status">
            <svg class="w-6 h-6 animate-spin"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                </path>
            </svg>
            <span>Connecting to event stream...</span>
        </div>
        <!-- Event List -->
        <div class="card bg-base-100 shadow-xl border border-base-200">
            <div class="card-body">
                <h2 class="card-title text-primary flex items-center gap-2 mb-6">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
                        </path>
                    </svg>
                    Events
                    <div class="badge badge-neutral" id="event-count">{{ events | length }}</div>
                </h2>
                <div id="events-container" class="space-y-4">
                    {% if events %}
                        {% for event in events | reverse %}
                            <div class="alert alert-info">
                                <div class="flex flex-col gap-1 w-full">
                                    <div class="flex justify-between items-center">
                                        <span class="font-bold">{{ event.type }}</span>
                                        <span class="text-xs opacity-70">{{ event.timestamp }}</span>
                                    </div>
                                    <pre class="text-xs bg-base-200 p-2 rounded overflow-x-auto">{{ event.payload | tojson(indent=2) }}</pre>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="alert" id="no-events">
                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                                </path>
                            </svg>
                            <span>No events yet. Events will appear here when Claude Code hooks fire.</span>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- Debug Navigation Footer -->
        {% include "debug/components/debug_nav.html.jinja" %}

    </div>
    <script>
        (function() {
            const eventsContainer = document.getElementById('events-container');
            const connectionStatus = document.getElementById('connection-status');
            const eventCount = document.getElementById('event-count');
            const noEvents = document.getElementById('no-events');
            let count = {
                {
                    events | length
                }
            };

            function updateConnectionStatus(connected) {
                if (connected) {
                    connectionStatus.className = 'alert alert-success mb-6';
                    connectionStatus.innerHTML = `
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span>Connected - listening for events</span>
                    `;
                } else {
                    connectionStatus.className = 'alert alert-error mb-6';
                    connectionStatus.innerHTML = `
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <span>Disconnected - retrying...</span>
                    `;
                }
            }

            function addEvent(event) {
                if (noEvents) {
                    noEvents.remove();
                }

                const eventEl = document.createElement('div');
                eventEl.className = 'alert alert-success animate-pulse';

                const payload = typeof event.payload === 'string' ? JSON.parse(event.payload) : event.payload;

                eventEl.innerHTML = `
                    <div class="flex flex-col gap-1 w-full">
                        <div class="flex justify-between items-center">
                            <span class="font-bold">${event.type || 'unknown'}</span>
                            <span class="text-xs opacity-70">${event.timestamp || new Date().toISOString()}</span>
                        </div>
                        <pre class="text-xs bg-base-200 p-2 rounded overflow-x-auto">${JSON.stringify(payload, null, 2)}</pre>
                    </div>
                `;

                eventsContainer.insertBefore(eventEl, eventsContainer.firstChild);

                // Remove pulse after animation
                setTimeout(() => {
                    eventEl.classList.remove('animate-pulse');
                    eventEl.classList.remove('alert-success');
                    eventEl.classList.add('alert-info');
                }, 2000);

                count++;
                eventCount.textContent = count;

                // Play notification sound if available
                if (window.Notification && Notification.permission === 'granted') {
                    new Notification('Claude Code Event', {
                        body: event.type || 'Event received',
                        icon: '/static/img/favicon.ico'
                    });
                }
            }

            function connect() {
                const eventSource = new EventSource('/debug/claude/events');

                eventSource.onopen = function() {
                    updateConnectionStatus(true);
                };

                eventSource.onmessage = function(e) {
                    try {
                        const data = JSON.parse(e.data);
                        addEvent(data);
                    } catch (err) {
                        console.error('Failed to parse event:', err);
                    }
                };

                eventSource.onerror = function() {
                    updateConnectionStatus(false);
                    eventSource.close();
                    // Reconnect after 3 seconds
                    setTimeout(connect, 3000);
                };
            }

            // Request notification permission
            if (window.Notification && Notification.permission === 'default') {
                Notification.requestPermission();
            }

            connect();
        })();
    </script>
{% endblock body %}
