{% extends "orbit/base.html" %}

{% block title %}Django Orbit - Mission Control{% endblock %}

{% block body %}
<div x-data="orbitDashboard()" x-init="init()" class="h-full flex bg-grid">
    
    <!-- Sidebar Navigation -->
    <aside class="w-64 border-r border-orbit-border bg-orbit-bg-secondary flex flex-col">
        <!-- Logo / Header -->
        <div class="p-6 border-b border-orbit-border">
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-500 to-violet-500 flex items-center justify-center glow-cyan">
                    <i data-lucide="orbit" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <h1 class="text-lg font-semibold text-gradient">Django Orbit</h1>
                    <p class="text-xs text-orbit-text-muted">Mission Control</p>
                </div>
            </div>
        </div>
        
        <!-- Navigation Links -->
        <nav class="flex-1 p-4 space-y-1">
            <button 
               @click="setType('all')"
               :class="currentType === 'all' ? 'bg-orbit-bg-tertiary text-orbit-accent-cyan border-l-2 border-orbit-accent-cyan' : 'text-orbit-text-secondary hover:text-orbit-text-primary hover:bg-orbit-bg-tertiary/50'"
               class="w-full flex items-center gap-3 px-4 py-2.5 rounded-r-lg transition-all group text-left">
                <i data-lucide="layers" class="w-4 h-4"></i>
                <span class="flex-1">All Events</span>
                <span class="text-xs bg-orbit-bg-tertiary px-2 py-0.5 rounded-full">{{ counts.all }}</span>
            </button>
            
            <button
               @click="setType('request')"
               :class="currentType === 'request' ? 'bg-orbit-bg-tertiary text-orbit-accent-cyan border-l-2 border-orbit-accent-cyan' : 'text-orbit-text-secondary hover:text-orbit-text-primary hover:bg-orbit-bg-tertiary/50'"
               class="w-full flex items-center gap-3 px-4 py-2.5 rounded-r-lg transition-all group text-left">
                <i data-lucide="globe" class="w-4 h-4 text-cyan-400"></i>
                <span class="flex-1">Requests</span>
                <span class="text-xs bg-orbit-bg-tertiary px-2 py-0.5 rounded-full">{{ counts.request }}</span>
            </button>
            
            <button
               @click="setType('query')"
               :class="currentType === 'query' ? 'bg-orbit-bg-tertiary text-orbit-accent-cyan border-l-2 border-orbit-accent-cyan' : 'text-orbit-text-secondary hover:text-orbit-text-primary hover:bg-orbit-bg-tertiary/50'"
               class="w-full flex items-center gap-3 px-4 py-2.5 rounded-r-lg transition-all group text-left">
                <i data-lucide="database" class="w-4 h-4 text-emerald-400"></i>
                <span class="flex-1">Queries</span>
                <span class="text-xs bg-orbit-bg-tertiary px-2 py-0.5 rounded-full">{{ counts.query }}</span>
            </button>
            
            <button
               @click="setType('log')"
               :class="currentType === 'log' ? 'bg-orbit-bg-tertiary text-orbit-accent-cyan border-l-2 border-orbit-accent-cyan' : 'text-orbit-text-secondary hover:text-orbit-text-primary hover:bg-orbit-bg-tertiary/50'"
               class="w-full flex items-center gap-3 px-4 py-2.5 rounded-r-lg transition-all group text-left">
                <i data-lucide="file-text" class="w-4 h-4 text-slate-400"></i>
                <span class="flex-1">Logs</span>
                <span class="text-xs bg-orbit-bg-tertiary px-2 py-0.5 rounded-full">{{ counts.log }}</span>
            </button>
            
            <button
               @click="setType('exception')"
               :class="currentType === 'exception' ? 'bg-orbit-bg-tertiary text-orbit-accent-cyan border-l-2 border-orbit-accent-cyan' : 'text-orbit-text-secondary hover:text-orbit-text-primary hover:bg-orbit-bg-tertiary/50'"
               class="w-full flex items-center gap-3 px-4 py-2.5 rounded-r-lg transition-all group text-left">
                <i data-lucide="alert-triangle" class="w-4 h-4 text-rose-400"></i>
                <span class="flex-1">Exceptions</span>
                {% if counts.exception > 0 %}
                <span class="text-xs bg-rose-500/20 text-rose-400 px-2 py-0.5 rounded-full">{{ counts.exception }}</span>
                {% else %}
                <span class="text-xs bg-orbit-bg-tertiary px-2 py-0.5 rounded-full">0</span>
                {% endif %}
            </button>
            
            <button
               @click="setType('job')"
               :class="currentType === 'job' ? 'bg-orbit-bg-tertiary text-orbit-accent-cyan border-l-2 border-orbit-accent-cyan' : 'text-orbit-text-secondary hover:text-orbit-text-primary hover:bg-orbit-bg-tertiary/50'"
               class="w-full flex items-center gap-3 px-4 py-2.5 rounded-r-lg transition-all group text-left">
                <i data-lucide="clock" class="w-4 h-4 text-amber-400"></i>
                <span class="flex-1">Jobs</span>
                <span class="text-xs bg-orbit-bg-tertiary px-2 py-0.5 rounded-full">{{ counts.job }}</span>
            </button>
        </nav>
        
        <!-- Sidebar Footer -->
        <div class="p-4 border-t border-orbit-border">
            <!-- Status Indicator -->
            <div class="flex items-center gap-2 mb-4 px-2">
                <div class="w-2 h-2 rounded-full status-dot" :class="isPaused ? 'bg-amber-400' : 'bg-emerald-400'"></div>
                <span class="text-xs text-orbit-text-muted" x-text="isPaused ? 'Paused' : 'Recording Active'"></span>
            </div>
            
            <!-- Clear Button -->
            <button 
                @click="clearAll()"
                class="w-full flex items-center justify-center gap-2 px-4 py-2 text-sm text-orbit-text-secondary hover:text-rose-400 bg-orbit-bg-tertiary/50 hover:bg-rose-500/10 rounded-lg transition-all">
                <i data-lucide="trash-2" class="w-4 h-4"></i>
                <span>Clear All</span>
            </button>
        </div>
    </aside>
    
    <!-- Main Content Area -->
    <main class="flex-1 flex flex-col overflow-hidden">
        <!-- Top Bar -->
        <header class="h-14 border-b border-orbit-border bg-orbit-bg-secondary/50 backdrop-blur flex items-center justify-between px-6">
            <div class="flex items-center gap-4">
                <h2 class="text-lg font-medium">
                    <span x-text="getTypeLabel()"></span>
                </h2>
                
                <!-- Live Indicator -->
                <div x-show="!isPaused" class="flex items-center gap-2 text-xs text-emerald-400">
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></div>
                    <span>Live</span>
                </div>
            </div>
            
            <div class="flex items-center gap-3">
                <!-- Pause/Resume Button -->
                <button 
                    @click="togglePause()"
                    :class="isPaused ? 'text-amber-400 bg-amber-500/10' : 'text-orbit-text-secondary hover:text-orbit-text-primary'"
                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-all">
                    <i :data-lucide="isPaused ? 'play' : 'pause'" class="w-4 h-4"></i>
                    <span x-text="isPaused ? 'Resume' : 'Pause'"></span>
                </button>
                
                <!-- Refresh Button -->
                <button 
                    @click="refreshFeed()"
                    class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-orbit-text-secondary hover:text-orbit-text-primary transition-all">
                    <i data-lucide="refresh-cw" class="w-4 h-4"></i>
                    <span>Refresh</span>
                </button>
            </div>
        </header>
        
        <!-- Feed Container -->
        <div class="flex-1 overflow-hidden flex">
            <!-- Feed List -->
            <div id="feed-container" class="flex-1 overflow-y-auto">
                <!-- Initial loading state -->
                <div class="flex items-center justify-center h-full text-orbit-text-muted">
                    <div class="text-center">
                        <i data-lucide="loader-2" class="w-8 h-8 mx-auto mb-3 animate-spin"></i>
                        <p>Loading telemetry data...</p>
                    </div>
                </div>
            </div>
            
            <!-- Detail Panel (Slide-over) -->
            <div 
                x-show="detailOpen"
                x-transition:enter="transition ease-out duration-300"
                x-transition:enter-start="translate-x-full"
                x-transition:enter-end="translate-x-0"
                x-transition:leave="transition ease-in duration-200"
                x-transition:leave-start="translate-x-0"
                x-transition:leave-end="translate-x-full"
                class="w-[600px] border-l border-orbit-border bg-orbit-bg-secondary overflow-hidden flex flex-col"
                @click.away="detailOpen = false">
                
                <!-- Detail Header -->
                <div class="h-14 border-b border-orbit-border flex items-center justify-between px-4">
                    <h3 class="text-sm font-medium text-orbit-text-secondary">Entry Details</h3>
                    <button @click="detailOpen = false" class="p-1 hover:bg-orbit-bg-tertiary rounded transition-colors">
                        <i data-lucide="x" class="w-5 h-5"></i>
                    </button>
                </div>
                
                <!-- Detail Content -->
                <div id="detail-container" class="flex-1 overflow-y-auto p-4">
                    <!-- Content loaded via fetch -->
                </div>
            </div>
        </div>
    </main>
</div>

<script>
function orbitDashboard() {
    return {
        currentType: '{{ current_type }}',
        isPaused: false,
        detailOpen: false,
        detailEntryId: null,
        pollingInterval: null,
        
        init() {
            // Initial load
            this.refreshFeed();
            
            // Start polling
            this.startPolling();
            
            // Handle entry clicks
            document.addEventListener('click', (e) => {
                const row = e.target.closest('[data-entry-id]');
                if (row) {
                    this.openDetail(row.dataset.entryId);
                }
            });
        },
        
        startPolling() {
            // Clear existing interval
            if (this.pollingInterval) {
                clearInterval(this.pollingInterval);
            }
            
            // Poll every 3 seconds
            this.pollingInterval = setInterval(() => {
                if (!this.isPaused) {
                    this.refreshFeed();
                }
            }, 3000);
        },
        
        setType(type) {
            this.currentType = type;
            this.refreshFeed();
        },
        
        getTypeLabel() {
            const labels = {
                'all': 'All Events',
                'request': 'Requests',
                'query': 'Queries',
                'log': 'Logs',
                'exception': 'Exceptions',
                'job': 'Jobs'
            };
            return labels[this.currentType] || 'Events';
        },
        
        togglePause() {
            this.isPaused = !this.isPaused;
            // Reinitialize icons for the button
            this.$nextTick(() => lucide.createIcons());
        },
        
        async refreshFeed() {
            const container = document.getElementById('feed-container');
            
            try {
                const response = await fetch(`/orbit/feed/?type=${this.currentType}`);
                if (response.ok) {
                    container.innerHTML = await response.text();
                    lucide.createIcons();
                }
            } catch (error) {
                console.error('Failed to refresh feed:', error);
            }
        },
        
        async openDetail(entryId) {
            this.detailEntryId = entryId;
            this.detailOpen = true;
            
            const container = document.getElementById('detail-container');
            
            try {
                const response = await fetch(`/orbit/detail/${entryId}/`);
                if (response.ok) {
                    container.innerHTML = await response.text();
                    lucide.createIcons();
                    
                    // Apply syntax highlighting to JSON
                    const jsonEl = document.getElementById('json-payload');
                    if (jsonEl) {
                        jsonEl.innerHTML = syntaxHighlight(jsonEl.textContent);
                    }
                }
            } catch (error) {
                console.error('Failed to load detail:', error);
                container.innerHTML = '<p class="text-rose-400">Failed to load details</p>';
            }
        },
        
        async clearAll() {
            if (!confirm('Clear all Orbit entries?')) return;
            
            try {
                const response = await fetch('/orbit/clear/', {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': this.getCSRFToken()
                    }
                });
                
                if (response.ok) {
                    this.refreshFeed();
                }
            } catch (error) {
                console.error('Failed to clear entries:', error);
            }
        },
        
        getCSRFToken() {
            // Try to get from cookie
            const cookies = document.cookie.split(';');
            for (let cookie of cookies) {
                const [name, value] = cookie.trim().split('=');
                if (name === 'csrftoken') {
                    return value;
                }
            }
            return '';
        }
    };
}
</script>
{% endblock %}