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

{% block title %}Django Orbit{% 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">
                        Observability and Debugging
                    </p>
                </div>
            </div>
            <!-- Version and Contact -->
            <div class="mt-3 flex items-center gap-2 text-xs text-orbit-text-muted">
                <span class="text-orbit-accent-cyan font-medium">v{{ orbit_version }}</span>
                <span class="text-orbit-text-muted/50">•</span>
                <a href="mailto:unsapucaienbits@gmail.com" 
                   class="hover:text-orbit-accent-cyan transition-colors flex items-center gap-1">
                    <i data-lucide="mail" class="w-3 h-3"></i>
                    Contact
                </a>
            </div>
        </div>
        
        <!-- Navigation Links (grouped, collapsible — see DESIGN.md › Layout) -->
        <nav class="flex-1 px-3 py-4 space-y-4 overflow-y-auto">
            <!-- All Events: standalone meta-filter, above the type groups -->
            <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 border-l-2 border-transparent'"
               class="w-full flex items-center gap-3 pl-3 pr-2 py-2 rounded-r-lg transition-all text-left text-sm">
                <i data-lucide="layers" class="w-4 h-4 shrink-0"></i>
                <span class="flex-1 truncate font-medium">All Events</span>
                <span class="text-xs bg-orbit-bg-tertiary text-orbit-text-muted px-2 py-0.5 rounded-full">{{ counts.all }}</span>
            </button>
            <div class="border-t border-orbit-border/60 !mt-3"></div>

            {% for group in nav_groups %}
            <div x-data="{ open: {{ group.open|yesno:'true,false' }} }">
                <button
                    @click="open = !open"
                    class="w-full flex items-center justify-between px-2 py-1 text-xs font-semibold uppercase tracking-wide text-orbit-text-muted hover:text-orbit-text-secondary transition-colors">
                    <span>{{ group.label }}</span>
                    <i data-lucide="chevron-down" class="w-3.5 h-3.5 transition-transform" :class="open ? '' : '-rotate-90'"></i>
                </button>
                <div x-show="open" x-collapse class="mt-1 space-y-0.5">
                    {% for item in group.items %}
                    <button
                       @click="setType('{{ item.type }}')"
                       :class="currentType === '{{ item.type }}' ? '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 border-l-2 border-transparent'"
                       class="w-full flex items-center gap-3 pl-3 pr-2 py-2 rounded-r-lg transition-all text-left text-sm">
                        <i data-lucide="{{ item.icon }}" class="w-4 h-4 text-{{ item.color }}-400 shrink-0"></i>
                        <span class="flex-1 truncate">{{ item.label }}</span>
                        {% if item.is_alert and item.count > 0 %}
                        <span class="text-xs bg-rose-500/15 text-rose-400 px-2 py-0.5 rounded-full">{{ item.count }}</span>
                        {% else %}
                        <span class="text-xs bg-orbit-bg-tertiary text-orbit-text-muted px-2 py-0.5 rounded-full">{{ item.count }}</span>
                        {% endif %}
                    </button>
                    {% endfor %}
                </div>
            </div>
            {% endfor %}
        </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>
            
            <!-- Search Bar -->
            <div class="flex-1 px-6">
                <div class="relative">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-orbit-text-muted"></i>
                    <input 
                        type="search" 
                        x-model="searchQuery"
                        @input.debounce.300ms="search()"
                        placeholder="Search entries (UUID or text content)..."
                        class="w-full bg-orbit-bg-primary border border-orbit-border rounded-lg pl-9 pr-4 py-1.5 text-sm text-orbit-text-primary placeholder-orbit-text-muted focus:outline-none focus:border-orbit-accent-cyan transition-colors"
                    >
                </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>
                
                <!-- Stats Page Link -->
                <a href="{% url 'orbit:stats' %}"
                   class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-orbit-text-secondary hover:text-orbit-text-primary hover:bg-orbit-accent-cyan/10 transition-all">
                    <i data-lucide="bar-chart-2" class="w-4 h-4"></i>
                    <span>Stats</span>
                </a>
                
                <!-- Health Page Link -->
                <a href="{% url 'orbit:health' %}"
                   class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm text-orbit-text-secondary hover:text-emerald-400 hover:bg-emerald-500/10 transition-all">
                    <i data-lucide="heart-pulse" class="w-4 h-4"></i>
                    <span>Health</span>
                </a>

                <!-- Help / re-open onboarding -->
                <button @click="showOnboarding = true" title="Show tips"
                        class="p-1.5 rounded-lg text-orbit-text-secondary hover:text-orbit-accent-cyan hover:bg-orbit-accent-cyan/10 transition-all">
                    <i data-lucide="help-circle" class="w-4 h-4"></i>
                </button>
            </div>
        </header>
        
        <!-- Statistics Panel (only visible for All Events) -->
        <div x-cloak x-show="currentType === 'all'"
             class="border-b border-orbit-border bg-orbit-bg-secondary/40">
            <div class="px-6 py-2">
                {% include "orbit/partials/stats.html" %}
            </div>
        </div>
        
        <!-- Feed Container -->
        <div class="flex-1 overflow-hidden flex relative">
            <!-- Feed List -->
            <div id="feed-container" class="flex-1 overflow-y-auto">
                <!-- Initial loading state — skeleton rows for perceived speed -->
                <div class="divide-y divide-orbit-border/40 animate-pulse">
                    {% for _ in "12345678" %}
                    <div class="flex items-center gap-3 px-4 py-3">
                        <div class="w-8 h-8 rounded-lg bg-orbit-bg-tertiary shrink-0"></div>
                        <div class="flex-1 space-y-2">
                            <div class="h-3 bg-orbit-bg-tertiary rounded w-1/3"></div>
                            <div class="h-2.5 bg-orbit-bg-tertiary/60 rounded w-1/5"></div>
                        </div>
                        <div class="h-3 bg-orbit-bg-tertiary rounded w-12"></div>
                        <div class="h-3 bg-orbit-bg-tertiary rounded w-14"></div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            
            <!-- Loading Overlay -->
            <div x-show="isLoading" 
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition ease-in duration-150"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="absolute inset-0 bg-orbit-bg-primary/80 backdrop-blur-sm flex items-center justify-center z-10">
                <div class="text-center">
                    <div class="w-12 h-12 mx-auto mb-4 relative">
                        <div class="absolute inset-0 border-4 border-orbit-accent-cyan/20 rounded-full"></div>
                        <div class="absolute inset-0 border-4 border-transparent border-t-orbit-accent-cyan rounded-full animate-spin"></div>
                    </div>
                    <p class="text-orbit-text-muted text-sm">Loading entries...</p>
                </div>
            </div>
            
            <!-- Detail Panel (Slide-over) -->
            <div
                x-cloak
                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="closeDetail()">
                
                <!-- Detail Header -->
                <div class="h-14 border-b border-orbit-border flex items-center justify-between px-4">
                    <div class="flex items-center gap-2">
                        <h3 class="text-sm font-medium text-orbit-text-secondary">Entry Details</h3>
                        <span x-show="detailTotal > 1" class="text-xs text-orbit-text-muted font-mono"
                              x-text="(detailIndex + 1) + '/' + detailTotal"></span>
                    </div>
                    <div class="flex items-center gap-1">
                        <!-- Prev / Next within the current feed (keyboard: k / j) -->
                        <button @click="navigateDetail(-1)" :disabled="detailIndex <= 0"
                                title="Previous entry (k)"
                                class="p-1.5 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed hover:bg-orbit-bg-tertiary text-orbit-text-secondary">
                            <i data-lucide="chevron-up" class="w-4 h-4"></i>
                        </button>
                        <button @click="navigateDetail(1)" :disabled="detailIndex < 0 || detailIndex >= detailTotal - 1"
                                title="Next entry (j)"
                                class="p-1.5 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed hover:bg-orbit-bg-tertiary text-orbit-text-secondary">
                            <i data-lucide="chevron-down" class="w-4 h-4"></i>
                        </button>
                        <div class="w-px h-5 bg-orbit-border mx-1"></div>
                        <button @click="closeDetail()" title="Close (Esc)"
                                class="p-1.5 hover:bg-orbit-bg-tertiary rounded transition-colors text-orbit-text-secondary">
                            <i data-lucide="x" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Detail Content -->
                <div id="detail-container" class="flex-1 overflow-y-auto p-4 min-h-[200px]">
                    <!-- Loading state shown when isLoadingDetail is true -->
                    <template x-if="isLoadingDetail">
                        <div class="flex flex-col items-center justify-center h-full min-h-[200px] gap-3">
                            <div class="animate-spin rounded-full h-8 w-8 border-2 border-orbit-accent-cyan border-t-transparent"></div>
                            <span class="text-sm text-orbit-text-muted">Loading details...</span>
                        </div>
                    </template>
                    <!-- Content loaded via fetch will replace this -->
                </div>
            </div>
        </div>
    </main>

    <!-- First-run onboarding (dismissable; reopen via the ? button) -->
    <div x-cloak x-show="showOnboarding"
         x-transition.opacity
         class="fixed inset-0 z-[60] flex items-center justify-center p-4"
         @keydown.escape.window="dismissOnboarding()">
        <div class="absolute inset-0 bg-black/60 backdrop-blur-sm" @click="dismissOnboarding()"></div>
        <div class="relative orbit-card w-full max-w-lg p-6 shadow-2xl"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="opacity-0 translate-y-3"
             x-transition:enter-end="opacity-100 translate-y-0">
            <div class="flex items-start gap-3 mb-5">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-cyan-500 to-violet-500 flex items-center justify-center shrink-0">
                    <i data-lucide="orbit" class="w-6 h-6 text-white"></i>
                </div>
                <div>
                    <h2 class="text-lg font-semibold text-orbit-text-primary">Welcome to Django Orbit</h2>
                    <p class="text-sm text-orbit-text-muted">A quick tour of your observability dashboard.</p>
                </div>
            </div>

            <ul class="space-y-3 mb-6">
                <li class="flex items-start gap-3">
                    <i data-lucide="layers" class="w-4 h-4 text-orbit-accent-cyan mt-0.5 shrink-0"></i>
                    <span class="text-sm text-orbit-text-secondary"><span class="text-orbit-text-primary font-medium">Browse by type</span> — the sidebar groups events into Core, Infrastructure and Application. Click any to filter.</span>
                </li>
                <li class="flex items-start gap-3">
                    <i data-lucide="mouse-pointer-click" class="w-4 h-4 text-orbit-accent-cyan mt-0.5 shrink-0"></i>
                    <span class="text-sm text-orbit-text-secondary"><span class="text-orbit-text-primary font-medium">Inspect an entry</span> — click a row to open details. Use <kbd class="px-1.5 py-0.5 text-xs font-mono bg-orbit-bg-tertiary rounded">j</kbd>/<kbd class="px-1.5 py-0.5 text-xs font-mono bg-orbit-bg-tertiary rounded">k</kbd> to move between entries and <kbd class="px-1.5 py-0.5 text-xs font-mono bg-orbit-bg-tertiary rounded">Esc</kbd> to close.</span>
                </li>
                <li class="flex items-start gap-3">
                    <i data-lucide="search" class="w-4 h-4 text-orbit-accent-cyan mt-0.5 shrink-0"></i>
                    <span class="text-sm text-orbit-text-secondary"><span class="text-orbit-text-primary font-medium">Search everything</span> — the top bar searches across entry payloads (SQL, paths, messages) and IDs.</span>
                </li>
                <li class="flex items-start gap-3">
                    <i data-lucide="bar-chart-2" class="w-4 h-4 text-orbit-accent-cyan mt-0.5 shrink-0"></i>
                    <span class="text-sm text-orbit-text-secondary"><span class="text-orbit-text-primary font-medium">Stats &amp; Health</span> — performance analytics and watcher diagnostics live in the top-right.</span>
                </li>
            </ul>

            <div class="flex items-center justify-between">
                <span class="text-xs text-orbit-text-muted">You can reopen this from the <i data-lucide="help-circle" class="w-3.5 h-3.5 inline"></i> button.</span>
                <button @click="dismissOnboarding()"
                        class="px-4 py-2 rounded-lg text-sm font-medium bg-orbit-accent-cyan text-orbit-bg-primary hover:bg-cyan-300 transition-colors">
                    Got it
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function orbitDashboard() {
    // URLs passed from Django view context
    const URLS = {
        feed: '{{ orbit_urls.feed }}',
        detail: '{{ orbit_urls.detail_base }}',
        clear: '{{ orbit_urls.clear }}'
    };

    return {
        currentType: '{{ current_type }}',
        isPaused: false,
        detailOpen: false,
        detailEntryId: null,
        detailIndex: -1,
        detailTotal: 0,
        pollingInterval: null,
        currentPage: 1,
        searchQuery: '',
        showOnboarding: false,
        isLoading: false,
        isLoadingDetail: false,
        
        search() {
            this.currentPage = 1;
            this.refreshFeed().then(() => this.syncDetailWithFeed());
        },
        
        init() {
            // Show the onboarding tour on first visit only
            if (!localStorage.getItem('orbit:onboarded')) {
                this.showOnboarding = true;
                this.$nextTick(() => lucide.createIcons());
            }

            // 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);
                }
            });
            
            // Handle custom event for opening details (from duplicate queries, etc.)
            document.addEventListener('orbit:open-detail', (e) => {
                if (e.detail && e.detail.entryId) {
                    this.openDetail(e.detail.entryId);
                }
            });

            // Filter the feed by a tag (clicked from the detail panel)
            document.addEventListener('orbit:tag', (e) => {
                if (e.detail && e.detail.tag) {
                    this.searchQuery = 'tag:' + e.detail.tag;
                    this.closeDetail();
                    this.search();
                }
            });

            // Show a success checkmark only after a valid explain plan is loaded
            document.body.addEventListener("htmx:afterSwap", (e) => {
                if (!e.target.id.startsWith("explain-")) return;

                const id = e.target.id.replace("explain-", "");
                const successIcon = document.getElementById(`explain-success-${id}`);
                const loadedPlan = e.target.querySelector('[data-orbit-explain-status="success"]');

                successIcon?.classList.toggle("hidden", !loadedPlan);
                lucide.createIcons();
            });

            // Keyboard shortcuts: Esc closes, j/k move between entries (Vim-style)
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') {
                    if (this.detailOpen) this.closeDetail();
                    return;
                }
                // Don't hijack keys while typing in the search box
                const tag = (e.target.tagName || '').toLowerCase();
                if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;

                if (e.key === 'j' || e.key === 'ArrowDown') {
                    if (this.detailOpen) { e.preventDefault(); this.navigateDetail(1); }
                } else if (e.key === 'k' || e.key === 'ArrowUp') {
                    if (this.detailOpen) { e.preventDefault(); this.navigateDetail(-1); }
                }
            });
        },
        
        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.currentPage = 1;  // Reset to page 1 when changing type
            // Don't preserve page, show loading; then drop the panel if its entry is gone
            this.refreshFeed(false, true).then(() => this.syncDetailWithFeed());
        },
        
        getTypeLabel() {
            const labels = {
                'all': 'All Events',
                'request': 'Requests',
                'query': 'Queries',
                'log': 'Logs',
                'exception': 'Exceptions',
                'job': 'Jobs',
                'transaction': 'Transactions',
                'storage': 'Storage'
            };
            return labels[this.currentType] || 'Events';
        },
        
        togglePause() {
            this.isPaused = !this.isPaused;
            // Reinitialize icons for the button
            this.$nextTick(() => lucide.createIcons());
        },

        dismissOnboarding() {
            this.showOnboarding = false;
            localStorage.setItem('orbit:onboarded', '1');
        },

        
        async refreshFeed(preservePage = true, showLoading = false) {
            const container = document.getElementById('feed-container');
            const page = preservePage ? this.currentPage : 1;

            // Only show loading for user-initiated actions (not polling)
            if (showLoading) {
                this.isLoading = true;
            }

            // Preserve scroll position so background polling doesn't jump the feed to top
            const prevScroll = container.scrollTop;

            try {
                const queryParams = new URLSearchParams({
                    type: this.currentType,
                    page: page,
                    q: this.searchQuery
                });
                const response = await fetch(`${URLS.feed}?${queryParams}`);
                if (response.ok) {
                    container.innerHTML = await response.text();
                    htmx.process(container);  // Process HTMX attributes on new content
                    lucide.createIcons();
                    container.scrollTop = prevScroll;

                    // Keep the open panel's prev/next bounds in sync with the new rows
                    if (this.detailOpen) this.updateDetailPosition();

                    // Update current page from response (listen for page changes via HTMX)
                    this.setupPageTracking();
                }
            } catch (error) {
                console.error('Failed to refresh feed:', error);
            } finally {
                this.isLoading = false;
            }
        },
        
        setupPageTracking() {
            // Track page changes from pagination buttons
            document.querySelectorAll('#feed-container [hx-get]').forEach(el => {
                el.addEventListener('htmx:afterRequest', (e) => {
                    const url = new URL(e.detail.pathInfo.requestPath, window.location.origin);
                    const page = url.searchParams.get('page');
                    if (page) {
                        this.currentPage = parseInt(page);
                    }
                });
            });
        },
        
        async openDetail(entryId) {
            // If clicking the same entry while panel is open, close it
            if (this.detailOpen && this.detailEntryId === entryId) {
                this.closeDetail();
                return;
            }
            
            // If clicking a different entry, just update the content (don't close/reopen)
            this.detailEntryId = entryId;
            this.updateDetailPosition();
            this.isLoadingDetail = true;
            
            // Small delay to prevent click.away from immediately closing
            await new Promise(resolve => setTimeout(resolve, 10));
            this.detailOpen = true;
            
            const container = document.getElementById('detail-container');
            
            // Show loading spinner immediately
            container.innerHTML = `
                <div class="flex flex-col items-center justify-center h-full min-h-[200px] gap-3">
                    <div class="animate-spin rounded-full h-8 w-8 border-2 border-orbit-accent-cyan border-t-transparent"></div>
                    <span class="text-sm text-orbit-text-muted">Loading details...</span>
                </div>
            `;
            
            try {
                const response = await fetch(`${URLS.detail}${entryId}/`);
                if (response.ok) {
                    container.innerHTML = await response.text();
                    if (window.htmx) {
                        htmx.process(container);
                    }
                    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>';
            } finally {
                this.isLoadingDetail = false;
            }
        },
        
        closeDetail() {
            this.detailOpen = false;
            this.detailEntryId = null;
            this.detailIndex = -1;
            this.detailTotal = 0;
        },

        // Ordered entry IDs currently visible in the feed (drives prev/next)
        getFeedEntryIds() {
            return Array.from(
                document.querySelectorAll('#feed-container [data-entry-id]')
            ).map(el => el.dataset.entryId);
        },

        // Recompute the open entry's position within the current feed
        updateDetailPosition() {
            const ids = this.getFeedEntryIds();
            this.detailIndex = ids.indexOf(this.detailEntryId);
            this.detailTotal = ids.length;
        },

        // Move to the prev/next entry in the current feed (dir = -1 | +1)
        navigateDetail(dir) {
            if (!this.detailOpen) return;
            const ids = this.getFeedEntryIds();
            const idx = ids.indexOf(this.detailEntryId);
            if (idx === -1) return;
            const nextIdx = idx + dir;
            if (nextIdx < 0 || nextIdx >= ids.length) return;
            const nextId = ids[nextIdx];
            const row = document.querySelector(`#feed-container [data-entry-id="${nextId}"]`);
            if (row) row.scrollIntoView({ block: 'nearest' });
            this.openDetail(nextId);
        },

        // Close the panel if its entry dropped out of the feed after a filter/search
        syncDetailWithFeed() {
            if (!this.detailOpen || !this.detailEntryId) return;
            const stillThere = document.querySelector(
                `#feed-container [data-entry-id="${this.detailEntryId}"]`
            );
            if (stillThere) {
                this.updateDetailPosition();
            } else {
                this.closeDetail();
            }
        },
        
        async clearAll() {
            if (!confirm('Clear all Orbit entries?')) return;
            
            try {
                const response = await fetch(URLS.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 %}