{% extends "base.html" %}

{% block title %}Explore Graph — Log Thread{% endblock %}

{% block extra_head %}
<style>
    .graph-canvas {
        background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    }
    .node-glow {
        filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.5));
    }
    .edge-line {
        stroke: rgba(139, 92, 246, 0.3);
        stroke-width: 1;
    }
    .search-input:focus {
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
    }
    .symbol-card {
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .symbol-card:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(139, 92, 246, 0.3);
    }
    @keyframes pulse-ring {
        0% { transform: scale(1); opacity: 0.8; }
        100% { transform: scale(1.5); opacity: 0; }
    }
    .pulse-ring {
        animation: pulse-ring 2s ease-out infinite;
    }
</style>
{% endblock %}

{% block content %}
<div id="graph-explorer" class="h-screen w-screen flex flex-col bg-slate-950" data-repo-id="{{ repo_id }}">
    <!-- Top Navigation -->
    <nav class="bg-slate-900/80 backdrop-blur-lg border-b border-slate-800 px-4 py-3 flex items-center justify-between z-10">
        <div class="flex items-center gap-4">
            <a href="/dashboard" class="p-2 rounded-lg hover:bg-slate-800 transition text-slate-400 hover:text-white">
                <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 19l-7-7 7-7"/>
                </svg>
            </a>
            <div class="h-6 w-px bg-slate-700"></div>
            <div class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center">
                    <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <circle cx="12" cy="5" r="2"/><circle cx="6" cy="12" r="2"/><circle cx="18" cy="12" r="2"/>
                    </svg>
                </div>
                <span id="repoName" class="font-semibold text-white">Loading...</span>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <div class="relative">
                <input type="text" id="searchInput" placeholder="Search symbols..." 
                    class="search-input w-64 bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 pl-10 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-violet-500">
                <svg class="w-4 h-4 text-slate-500 absolute left-3 top-1/2 -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                </svg>
            </div>
            <span id="statsDisplay" class="text-sm text-slate-500"></span>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="flex-1 flex overflow-hidden">
        <!-- Sidebar -->
        <aside id="sidebar" class="w-80 bg-slate-900/50 border-r border-slate-800 flex flex-col">
            <div class="p-4 border-b border-slate-800">
                <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Navigation</h3>
                <div class="flex gap-2">
                    <button onclick="setView('symbols')" class="view-btn active flex-1 px-3 py-2 rounded-lg text-sm font-medium bg-violet-600 text-white">Symbols</button>
                    <button onclick="setView('files')" class="view-btn flex-1 px-3 py-2 rounded-lg text-sm font-medium bg-slate-800 text-slate-400 hover:text-white">Files</button>
                    <button onclick="setView('clusters')" class="view-btn flex-1 px-3 py-2 rounded-lg text-sm font-medium bg-slate-800 text-slate-400 hover:text-white">Modules</button>
                </div>
            </div>
            <div id="symbolList" class="flex-1 overflow-y-auto p-4 space-y-2">
                <div class="text-center py-8 text-slate-500">
                    <div class="animate-spin w-6 h-6 border-2 border-violet-500 border-t-transparent rounded-full mx-auto mb-3"></div>
                    Loading symbols...
                </div>
            </div>
        </aside>

        <!-- Graph Canvas -->
        <main class="flex-1 graph-canvas relative overflow-hidden">
            <div id="graphContainer" class="absolute inset-0">
                <!-- Graph will be rendered here -->
                <div id="graphPlaceholder" class="absolute inset-0 flex items-center justify-center">
                    <div class="text-center">
                        <div class="relative inline-block mb-6">
                            <div class="w-32 h-32 rounded-full bg-gradient-to-br from-violet-600/20 to-indigo-600/20 flex items-center justify-center">
                                <svg class="w-16 h-16 text-violet-400 node-glow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <circle cx="12" cy="12" r="3"/>
                                    <circle cx="4" cy="8" r="2"/><circle cx="20" cy="8" r="2"/>
                                    <circle cx="4" cy="16" r="2"/><circle cx="20" cy="16" r="2"/>
                                    <line x1="12" y1="12" x2="4" y2="8" stroke-width="1"/>
                                    <line x1="12" y1="12" x2="20" y2="8" stroke-width="1"/>
                                    <line x1="12" y1="12" x2="4" y2="16" stroke-width="1"/>
                                    <line x1="12" y1="12" x2="20" y2="16" stroke-width="1"/>
                                </svg>
                            </div>
                            <div class="absolute inset-0 rounded-full border-2 border-violet-500/30 pulse-ring"></div>
                        </div>
                        <h2 class="text-2xl font-bold text-white mb-2">Code Graph Explorer</h2>
                        <p class="text-slate-400 max-w-md">
                            Select a symbol from the sidebar to explore its relationships, 
                            or use the search bar to find specific functions and classes.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Zoom Controls -->
            <div class="absolute bottom-6 right-6 flex flex-col gap-2">
                <button onclick="zoomIn()" class="w-10 h-10 rounded-lg bg-slate-800/80 backdrop-blur border border-slate-700 text-white hover:bg-slate-700 transition flex items-center justify-center">
                    <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="M12 6v12m6-6H6"/>
                    </svg>
                </button>
                <button onclick="zoomOut()" class="w-10 h-10 rounded-lg bg-slate-800/80 backdrop-blur border border-slate-700 text-white hover:bg-slate-700 transition flex items-center justify-center">
                    <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="M18 12H6"/>
                    </svg>
                </button>
                <button onclick="resetView()" class="w-10 h-10 rounded-lg bg-slate-800/80 backdrop-blur border border-slate-700 text-white hover:bg-slate-700 transition flex items-center justify-center">
                    <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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
                    </svg>
                </button>
            </div>
        </main>

        <!-- Detail Panel -->
        <aside id="detailPanel" class="w-96 bg-slate-900/50 border-l border-slate-800 flex-col hidden">
            <div id="detailContent" class="p-6">
                <!-- Symbol details will be shown here -->
            </div>
        </aside>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const repoId = document.getElementById('graph-explorer').dataset.repoId;
    const token = localStorage.getItem('lt_token');
    let currentRepo = null;
    let currentView = 'symbols';
    
    if (!token) {
        window.location.href = '/login';
    }
    
    async function loadGraphExplorer() {
        try {
            const res = await fetch(`/graph/repos`, {
                headers: { 'Authorization': `Bearer ${token}` }
            });
            
            if (!res.ok) throw new Error('Not authorized');
            
            const data = await res.json();
            currentRepo = data.repositories.find(r => r.id === repoId);
            
            if (!currentRepo) {
                showError('Repository Not Found', 'This repository doesn\'t exist or you don\'t have access.');
                return;
            }
            
            document.getElementById('repoName').textContent = currentRepo.name;
            document.getElementById('statsDisplay').textContent = 
                `${currentRepo.symbols_count.toLocaleString()} symbols · ${currentRepo.edges_count.toLocaleString()} edges`;
            
            if (!currentRepo.has_cloud_data) {
                showSyncRequired();
                return;
            }
            
            loadSymbols();
            
        } catch (err) {
            console.error('Failed to load graph:', err);
            window.location.href = '/login';
        }
    }
    
    function showError(title, message) {
        document.getElementById('graphPlaceholder').innerHTML = `
            <div class="text-center">
                <svg class="w-16 h-16 text-red-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                </svg>
                <h2 class="text-xl font-semibold text-white mb-2">${title}</h2>
                <p class="text-slate-400 mb-6">${message}</p>
                <a href="/dashboard" class="px-6 py-2 rounded-lg gradient-bg text-white font-medium hover:opacity-90 transition">Back to Dashboard</a>
            </div>
        `;
    }
    
    function showSyncRequired() {
        document.getElementById('graphPlaceholder').innerHTML = `
            <div class="text-center max-w-md">
                <div class="w-20 h-20 rounded-full bg-amber-500/20 flex items-center justify-center mx-auto mb-6">
                    <svg class="w-10 h-10 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                    </svg>
                </div>
                <h2 class="text-2xl font-bold text-white mb-2">Sync Required</h2>
                <p class="text-slate-400 mb-6">This repository's graph hasn't been synced to the cloud yet.</p>
                <div class="bg-slate-800/50 rounded-xl p-4 mb-6">
                    <p class="text-slate-500 text-sm mb-2">Run this command in your project:</p>
                    <code class="block bg-slate-900 text-violet-400 px-4 py-3 rounded-lg font-mono text-sm">logthread sync</code>
                </div>
                <a href="/dashboard" class="px-6 py-2 rounded-lg border border-slate-700 text-slate-300 font-medium hover:bg-slate-800 transition">Back to Dashboard</a>
            </div>
        `;
        document.getElementById('symbolList').innerHTML = '<p class="text-center text-slate-500 py-4">No data available</p>';
    }
    
    function loadSymbols() {
        // Mock symbol data - in production this would come from the API
        const symbols = [
            { name: 'main', type: 'Function', file: 'src/cli/main.py', callers: 0, callees: 12 },
            { name: 'analyze', type: 'Function', file: 'src/cli/main.py', callers: 1, callees: 8 },
            { name: 'KuzuBackend', type: 'Class', file: 'src/core/storage/kuzu_backend.py', callers: 15, callees: 4 },
            { name: 'run_pipeline', type: 'Function', file: 'src/core/ingestion/pipeline.py', callers: 3, callees: 18 },
            { name: 'CloudClient', type: 'Class', file: 'src/cloud/client.py', callers: 8, callees: 6 },
        ];
        
        const symbolList = document.getElementById('symbolList');
        symbolList.innerHTML = symbols.map(s => `
            <div onclick="selectSymbol('${s.name}')" class="symbol-card rounded-xl p-4 cursor-pointer transition">
                <div class="flex items-start justify-between mb-2">
                    <span class="font-medium text-white">${s.name}</span>
                    <span class="px-2 py-0.5 rounded text-xs font-medium ${s.type === 'Class' ? 'bg-blue-500/20 text-blue-400' : 'bg-green-500/20 text-green-400'}">${s.type}</span>
                </div>
                <p class="text-xs text-slate-500 mb-3 truncate">${s.file}</p>
                <div class="flex gap-4 text-xs text-slate-400">
                    <span>↙ ${s.callers} callers</span>
                    <span>↗ ${s.callees} callees</span>
                </div>
            </div>
        `).join('');
    }
    
    function selectSymbol(name) {
        document.getElementById('detailPanel').classList.remove('hidden');
        document.getElementById('detailPanel').classList.add('flex');
        
        document.getElementById('detailContent').innerHTML = `
            <div class="flex items-center justify-between mb-6">
                <h2 class="text-xl font-bold text-white">${name}</h2>
                <button onclick="closeDetail()" class="text-slate-400 hover:text-white">
                    <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="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <div class="space-y-6">
                <div>
                    <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Callers</h3>
                    <div class="space-y-2">
                        <div class="bg-slate-800/50 rounded-lg p-3 text-sm text-slate-300">analyze()</div>
                        <div class="bg-slate-800/50 rounded-lg p-3 text-sm text-slate-300">main()</div>
                    </div>
                </div>
                <div>
                    <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Calls</h3>
                    <div class="space-y-2">
                        <div class="bg-slate-800/50 rounded-lg p-3 text-sm text-slate-300">run_pipeline()</div>
                        <div class="bg-slate-800/50 rounded-lg p-3 text-sm text-slate-300">save_metadata()</div>
                    </div>
                </div>
                <div>
                    <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3">Impact Analysis</h3>
                    <p class="text-sm text-slate-400">Changing this symbol may affect <span class="text-amber-400 font-medium">12 other symbols</span>.</p>
                </div>
            </div>
        `;
    }
    
    function closeDetail() {
        document.getElementById('detailPanel').classList.add('hidden');
        document.getElementById('detailPanel').classList.remove('flex');
    }
    
    function setView(view) {
        currentView = view;
        document.querySelectorAll('.view-btn').forEach(btn => {
            btn.classList.remove('bg-violet-600', 'text-white');
            btn.classList.add('bg-slate-800', 'text-slate-400');
        });
        event.target.classList.remove('bg-slate-800', 'text-slate-400');
        event.target.classList.add('bg-violet-600', 'text-white');
    }
    
    function zoomIn() { /* Graph zoom implementation */ }
    function zoomOut() { /* Graph zoom implementation */ }
    function resetView() { /* Graph reset implementation */ }
    
    document.getElementById('searchInput').addEventListener('input', (e) => {
        // Filter symbols based on search
        console.log('Search:', e.target.value);
    });
    
    loadGraphExplorer();
</script>
{% endblock %}