{% extends "base.html" %}

{% block title %}Dashboard — Log Thread{% endblock %}

{% block content %}
<div class="min-h-screen bg-slate-50">
    <!-- Nav -->
    <nav class="bg-white border-b border-slate-200">
        <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
            <a href="/" class="flex items-center gap-2">
                <div class="w-8 h-8 rounded-lg gradient-bg flex items-center justify-center">
                    <svg class="w-5 h-5 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"/>
                        <circle cx="9" cy="19" r="2"/><circle cx="15" cy="19" r="2"/>
                    </svg>
                </div>
                <span class="font-semibold text-lg">Log Thread</span>
            </a>
            <div class="flex items-center gap-4">
                <span id="userEmail" class="text-slate-600"></span>
                <button onclick="logout()" class="text-slate-600 hover:text-slate-900 transition">Logout</button>
            </div>
        </div>
    </nav>

    <div class="max-w-6xl mx-auto px-6 py-12">
        <!-- Welcome section -->
        <div class="mb-12">
            <h1 class="text-3xl font-bold mb-2">Welcome to Log Thread</h1>
            <p class="text-slate-600">Your code intelligence is ready. Follow the steps below to get started.</p>
        </div>

        <!-- Subscription status -->
        <div id="subscriptionCard" class="mb-8 p-6 rounded-2xl bg-white border border-slate-200">
            <div class="flex items-center justify-between">
                <div>
                    <div class="flex items-center gap-3 mb-2">
                        <span id="statusBadge" class="px-3 py-1 rounded-full text-sm font-medium"></span>
                        <h2 class="font-semibold text-lg">Subscription</h2>
                    </div>
                    <p id="subscriptionDetails" class="text-slate-600 text-sm"></p>
                </div>
                <button onclick="manageSubscription()" class="px-4 py-2 rounded-lg border border-slate-300 hover:bg-slate-50 transition text-sm font-medium">
                    Manage Billing
                </button>
            </div>
        </div>

        <!-- Quick start -->
        <div class="mb-12">
            <h2 class="text-xl font-bold mb-6">Quick Start</h2>
            
            <div class="grid md:grid-cols-3 gap-6">
                <div class="p-6 rounded-2xl bg-white border border-slate-200">
                    <div class="w-10 h-10 rounded-xl gradient-bg flex items-center justify-center mb-4">
                        <span class="text-white font-bold">1</span>
                    </div>
                    <h3 class="font-semibold mb-2">Install the CLI</h3>
                    <div class="bg-slate-900 text-slate-300 p-3 rounded-lg font-mono text-sm mb-3">
                        pip install logthread
                    </div>
                    <p class="text-slate-600 text-sm">Install Log Thread on your development machine.</p>
                </div>
                
                <div class="p-6 rounded-2xl bg-white border border-slate-200">
                    <div class="w-10 h-10 rounded-xl gradient-bg flex items-center justify-center mb-4">
                        <span class="text-white font-bold">2</span>
                    </div>
                    <h3 class="font-semibold mb-2">Login & Analyze</h3>
                    <div class="bg-slate-900 text-slate-300 p-3 rounded-lg font-mono text-sm mb-3 space-y-1">
                        <div>logthread login</div>
                        <div>logthread analyze .</div>
                    </div>
                    <p class="text-slate-600 text-sm">Authenticate and index your codebase.</p>
                </div>
                
                <div class="p-6 rounded-2xl bg-white border border-slate-200">
                    <div class="w-10 h-10 rounded-xl gradient-bg flex items-center justify-center mb-4">
                        <span class="text-white font-bold">3</span>
                    </div>
                    <h3 class="font-semibold mb-2">Connect to IDE</h3>
                    <div class="bg-slate-900 text-slate-300 p-3 rounded-lg font-mono text-sm mb-3">
                        logthread serve --watch
                    </div>
                    <p class="text-slate-600 text-sm">Add to your Cursor/Windsurf MCP config.</p>
                </div>
            </div>
        </div>

        <!-- API Key section -->
        <div class="mb-12">
            <h2 class="text-xl font-bold mb-6">API Key</h2>
            <div class="p-6 rounded-2xl bg-white border border-slate-200">
                <p class="text-slate-600 mb-4">Use an API key for headless environments or CI/CD pipelines.</p>
                
                <div id="apiKeyDisplay" class="hidden mb-4 p-4 rounded-lg bg-green-50 border border-green-200">
                    <p class="text-sm text-green-800 mb-2 font-medium">Your new API key (save it now, it won't be shown again):</p>
                    <code id="apiKeyValue" class="block p-3 bg-white rounded border font-mono text-sm break-all"></code>
                </div>
                
                <button onclick="generateApiKey()" id="generateKeyBtn" class="px-4 py-2 rounded-lg gradient-bg text-white font-medium hover:opacity-90 transition">
                    Generate API Key
                </button>
            </div>
        </div>

        <!-- MCP Configuration -->
        <div class="mb-12">
            <h2 class="text-xl font-bold mb-6">MCP Configuration</h2>
            <div class="p-6 rounded-2xl bg-white border border-slate-200">
                <p class="text-slate-600 mb-4">Add this to your MCP configuration file:</p>
                
                <div class="mb-4">
                    <h4 class="font-medium text-sm text-slate-700 mb-2">Cursor / Windsurf / Claude Code</h4>
                    <pre class="bg-slate-900 text-slate-300 p-4 rounded-lg font-mono text-sm overflow-x-auto">{
  "mcpServers": {
    "logthread": {
      "command": "logthread",
      "args": ["serve", "--watch", "--path", "/path/to/your/project"]
    }
  }
}</pre>
                    <p class="text-slate-500 text-xs mt-2">Replace <code class="bg-slate-100 px-1 rounded">/path/to/your/project</code> with the absolute path to your indexed repository.</p>
                </div>
            </div>
        </div>

        <!-- Repositories -->
        <div>
            <h2 class="text-xl font-bold mb-6">Your Repositories</h2>
            <div id="reposList" class="space-y-4">
                <div class="p-6 rounded-2xl bg-white border border-slate-200 text-center text-slate-500">
                    No repositories analyzed yet. Run <code class="bg-slate-100 px-2 py-1 rounded">logthread analyze .</code> to get started.
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    async function loadDashboard() {
        const token = localStorage.getItem('lt_token');
        if (!token) {
            window.location.href = '/login';
            return;
        }
        
        try {
            const res = await fetch('/auth/me', {
                headers: { 'Authorization': `Bearer ${token}` }
            });
            
            if (!res.ok) throw new Error('Not authenticated');
            
            const user = await res.json();
            document.getElementById('userEmail').textContent = user.email;
            
            // Update subscription status
            const badge = document.getElementById('statusBadge');
            const details = document.getElementById('subscriptionDetails');
            
            if (user.subscription && user.subscription.active) {
                badge.textContent = 'Active';
                badge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-700';
                
                const endDate = new Date(user.subscription.current_period_end);
                details.textContent = `Renews on ${endDate.toLocaleDateString()}`;
            } else {
                badge.textContent = 'Inactive';
                badge.className = 'px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-700';
                details.textContent = 'Subscribe to use Log Thread';
                
                // Redirect to pricing if no active subscription
                window.location.href = '/pricing';
            }
            
            // Load repositories
            loadRepositories();
            
        } catch (err) {
            localStorage.removeItem('lt_token');
            window.location.href = '/login';
        }
    }
    
    async function loadRepositories() {
        const token = localStorage.getItem('lt_token');
        
        try {
            const res = await fetch('/graph/repos', {
                headers: { 'Authorization': `Bearer ${token}` }
            });
            
            if (!res.ok) return;
            
            const data = await res.json();
            const container = document.getElementById('reposList');
            
            if (data.repositories.length === 0) return;
            
            container.innerHTML = data.repositories.map(repo => `
                <div class="p-6 rounded-2xl bg-white border border-slate-200">
                    <div class="flex items-center justify-between">
                        <div>
                            <h3 class="font-semibold">${repo.name}</h3>
                            <p class="text-slate-600 text-sm mt-1">
                                ${repo.symbols_count.toLocaleString()} symbols · 
                                ${repo.edges_count.toLocaleString()} connections · 
                                ${repo.files_count.toLocaleString()} files
                            </p>
                        </div>
                        <div class="flex items-center gap-4">
                            <div class="text-right">
                                <p class="text-sm text-slate-500">Last analyzed</p>
                                <p class="text-sm font-medium">${repo.last_analyzed ? new Date(repo.last_analyzed).toLocaleDateString() : 'Never'}</p>
                            </div>
                            ${repo.has_cloud_data ? `
                                <a href="/explore/${repo.id}" class="px-4 py-2 rounded-lg gradient-bg text-white text-sm font-medium hover:opacity-90 transition">
                                    Explore Graph
                                </a>
                            ` : `
                                <button onclick="syncRepo('${repo.id}')" class="px-4 py-2 rounded-lg border border-slate-300 text-sm font-medium hover:bg-slate-50 transition">
                                    Sync to Cloud
                                </button>
                            `}
                        </div>
                    </div>
                </div>
            `).join('');
            
        } catch (err) {
            console.error('Failed to load repos:', err);
        }
    }
    
    async function generateApiKey() {
        const token = localStorage.getItem('lt_token');
        const btn = document.getElementById('generateKeyBtn');
        
        btn.disabled = true;
        btn.textContent = 'Generating...';
        
        try {
            const res = await fetch('/auth/api-key', {
                method: 'POST',
                headers: { 'Authorization': `Bearer ${token}` }
            });
            
            if (!res.ok) {
                const data = await res.json();
                throw new Error(data.detail || 'Failed to generate key');
            }
            
            const data = await res.json();
            
            document.getElementById('apiKeyValue').textContent = data.key;
            document.getElementById('apiKeyDisplay').classList.remove('hidden');
            
        } catch (err) {
            alert(err.message);
        } finally {
            btn.disabled = false;
            btn.textContent = 'Generate API Key';
        }
    }
    
    async function manageSubscription() {
        const token = localStorage.getItem('lt_token');
        
        try {
            const res = await fetch('/billing/portal', {
                method: 'POST',
                headers: { 'Authorization': `Bearer ${token}` }
            });
            
            const data = await res.json();
            if (data.portal_url) {
                window.location.href = data.portal_url;
            }
        } catch (err) {
            alert('Failed to open billing portal');
        }
    }
    
    function logout() {
        localStorage.removeItem('lt_token');
        localStorage.removeItem('lt_user');
        window.location.href = '/';
    }
    
    loadDashboard();
</script>
{% endblock %}