{{template "base" .}}

{{define "content"}}
<div class="space-y-8">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Dashboard</h1>
            <p class="mt-1 text-gray-500 dark:text-gray-400">Your document management overview</p>
        </div>
        <div class="flex gap-3">
            <a href="/api/export" 
               class="inline-flex items-center px-4 py-2 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 text-sm font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-all">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                Export CSV
            </a>
        </div>
    </div>

    <!-- Live Processing Status -->
    <div id="processing-panel" class="hidden">
        <div class="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-2xl p-5">
            <div class="flex items-center gap-3 mb-3">
                <div class="animate-spin rounded-full h-5 w-5 border-2 border-amber-600 border-t-transparent"></div>
                <h3 class="font-semibold text-amber-800 dark:text-amber-200">Processing Documents</h3>
            </div>
            <div id="processing-jobs" class="space-y-3"></div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Total Documents</p>
                    <p class="text-3xl font-bold text-gray-900 dark:text-white mt-1">{{.Stats.TotalDocs}}</p>
                </div>
                <div class="p-3 bg-brand-100 dark:bg-brand-900/30 rounded-xl">
                    <svg class="w-6 h-6 text-brand-600 dark:text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">This Week</p>
                    <p class="text-3xl font-bold text-green-600 dark:text-green-400 mt-1">{{.Stats.RecentDocs}}</p>
                </div>
                <div class="p-3 bg-green-100 dark:bg-green-900/30 rounded-xl">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Categories</p>
                    <p class="text-3xl font-bold text-purple-600 dark:text-purple-400 mt-1">{{len .Categories}}</p>
                </div>
                <div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-xl">
                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-500 dark:text-gray-400">Storage</p>
                    <p class="text-3xl font-bold text-orange-600 dark:text-orange-400 mt-1">—</p>
                </div>
                <div class="p-3 bg-orange-100 dark:bg-orange-900/30 rounded-xl">
                    <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Two columns: Categories + Recent -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Categories -->
        <div class="lg:col-span-1">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Categories</h2>
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div class="divide-y divide-gray-100 dark:divide-gray-700">
                    {{range .Categories}}
                    {{$count := index $.Stats.ByCategory .}}
                    <a href="/browse/{{.}}" class="flex items-center justify-between px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                        <div class="flex items-center space-x-3">
                            <span class="text-xl">{{categoryIcon .}}</span>
                            <span class="font-medium text-gray-700 dark:text-gray-200">{{title .}}</span>
                        </div>
                        <span class="text-sm text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2.5 py-0.5 rounded-full">{{$count}}</span>
                    </a>
                    {{end}}
                </div>
            </div>
        </div>

        <!-- Recent Documents -->
        <div class="lg:col-span-2">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Recent Documents</h2>
                <a href="/browse" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">View all →</a>
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                {{if .Stats.RecentUploads}}
                <div class="divide-y divide-gray-100 dark:divide-gray-700">
                    {{range .Stats.RecentUploads}}
                    <a href="/document/{{.ID}}" class="flex items-center px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors group">
                        <div class="flex-shrink-0 p-2 bg-gray-100 dark:bg-gray-700 rounded-lg mr-4">
                            <svg class="w-6 h-6 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="font-medium text-gray-900 dark:text-white truncate group-hover:text-brand-600 dark:group-hover:text-brand-400 transition-colors">{{.Title}}</p>
                            <p class="text-sm text-gray-500 dark:text-gray-400 truncate">{{truncate .Summary 100}}</p>
                        </div>
                        {{if .Vendor}}
                        <div class="hidden lg:block flex-shrink-0 w-40 ml-4 text-sm text-gray-600 dark:text-gray-400 truncate">{{.Vendor}}</div>
                        {{end}}
                        {{if .Amount}}
                        <div class="hidden lg:block flex-shrink-0 w-28 ml-4 text-sm font-medium text-gray-900 dark:text-white text-right">{{.Amount}}</div>
                        {{end}}
                        <div class="flex-shrink-0 ml-4 text-right w-28">
                            {{if eq .Status "processing"}}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300" data-processing="{{.ID}}">
                                <svg class="animate-spin -ml-0.5 mr-1.5 h-3 w-3" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                                Processing
                            </span>
                            {{else if eq .Status "error"}}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300">
                                Error
                            </span>
                            {{else}}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-brand-100 dark:bg-brand-900/30 text-brand-700 dark:text-brand-300">
                                {{title .Category}}
                            </span>
                            {{end}}
                            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{if .Date}}{{.Date}}{{else}}{{formatDate .ProcessedAt}}{{end}}</p>
                        </div>
                    </a>
                    {{end}}
                </div>
                {{else}}
                <div class="p-12 text-center">
                    <svg class="w-12 h-12 mx-auto text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                    </svg>
                    <p class="mt-4 text-gray-500 dark:text-gray-400">No documents yet</p>
                    <p class="mt-2 text-sm text-brand-600 dark:text-brand-400">
                        Drag & drop files anywhere to upload
                    </p>
                </div>
                {{end}}
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div>
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Quick Actions</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-2xl shadow-sm border-2 border-dashed border-gray-300 dark:border-gray-600 hover:border-brand-400 dark:hover:border-brand-500 transition-all">
                <div class="p-3 bg-brand-100 dark:bg-brand-900/30 rounded-xl mb-3">
                    <svg class="w-6 h-6 text-brand-600 dark:text-brand-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Drop files anywhere</span>
            </div>

            <a href="/search" class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 hover:border-brand-300 dark:hover:border-brand-600 transition-all card-hover">
                <div class="p-3 bg-green-100 dark:bg-green-900/30 rounded-xl mb-3">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" 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"></path>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Search Documents</span>
            </a>

            <a href="/browse" class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 hover:border-brand-300 dark:hover:border-brand-600 transition-all card-hover">
                <div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-xl mb-3">
                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
                    </svg>
                </div>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Browse Categories</span>
            </a>

            <button hx-post="/api/reindex" hx-swap="none" hx-confirm="Rebuild the document index?"
                    class="flex flex-col items-center p-6 bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 hover:border-brand-300 dark:hover:border-brand-600 transition-all card-hover">
                <div class="p-3 bg-orange-100 dark:bg-orange-900/30 rounded-xl mb-3">
                    <svg class="w-6 h-6 text-orange-600 dark:text-orange-400" 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>
                </div>
                <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Reindex</span>
            </button>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<!-- Full-page drop overlay -->
<div id="drop-overlay" class="hidden fixed inset-0 z-50 bg-brand-600/90 flex items-center justify-center pointer-events-none">
    <div class="text-center text-white">
        <svg class="w-20 h-20 mx-auto mb-4 animate-bounce" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
        </svg>
        <p class="text-2xl font-bold">Drop to upload</p>
    </div>
</div>

<!-- Upload progress indicator -->
<div id="upload-progress" class="hidden fixed top-4 left-1/2 -translate-x-1/2 z-50 bg-white dark:bg-gray-800 rounded-xl shadow-2xl px-6 py-4 flex items-center gap-4">
    <div class="animate-spin rounded-full h-6 w-6 border-2 border-brand-600 border-t-transparent"></div>
    <span class="text-gray-700 dark:text-gray-200 font-medium">Processing with AI...</span>
</div>

<script>
    // Full-page drag & drop
    let dragCounter = 0;
    const overlay = document.getElementById('drop-overlay');
    const progress = document.getElementById('upload-progress');
    
    document.addEventListener('dragenter', (e) => {
        e.preventDefault();
        dragCounter++;
        overlay.classList.remove('hidden');
    });
    
    document.addEventListener('dragleave', (e) => {
        e.preventDefault();
        dragCounter--;
        if (dragCounter === 0) overlay.classList.add('hidden');
    });
    
    document.addEventListener('dragover', (e) => {
        e.preventDefault();
    });
    
    document.addEventListener('drop', async (e) => {
        e.preventDefault();
        dragCounter = 0;
        overlay.classList.add('hidden');
        
        const files = Array.from(e.dataTransfer.files);
        if (!files.length) return;
        
        progress.classList.remove('hidden');
        const pendingIds = [];
        
        // Upload all files
        for (const file of files) {
            try {
                const formData = new FormData();
                formData.append('file', file);
                const res = await fetch('/api/upload', { method: 'POST', body: formData });
                const data = await res.json();
                
                if (data.status === 'success') {
                    showToast('✓ ' + file.name, 'success');
                    pendingIds.push(data.id);
                } else if (data.status === 'duplicate') {
                    showToast('📄 "' + file.name + '" exists', 'warning');
                } else {
                    showToast('Failed: ' + file.name, 'error');
                }
            } catch (err) {
                showToast('Upload failed: ' + file.name, 'error');
            }
        }
        
        if (pendingIds.length > 0) {
            // Store all pending IDs and refresh
            sessionStorage.setItem('pendingDocs', JSON.stringify(pendingIds));
            window.location.reload();
        } else {
            progress.classList.add('hidden');
        }
    });
    
    // Check for pending docs on page load (from web upload)
    const pendingDocsJson = sessionStorage.getItem('pendingDocs');
    if (pendingDocsJson) {
        const pendingIds = JSON.parse(pendingDocsJson);
        if (pendingIds.length > 0) {
            pollUntilAllReady(pendingIds);
        }
    }

    // Live processing status polling
    const panel = document.getElementById('processing-panel');
    const jobsDiv = document.getElementById('processing-jobs');
    let wasProcessing = false;

    const stepLabels = {
        'starting': '🔄 Starting...',
        'converting': '📄 Converting PDF to image...',
        'ocr': '🔍 OCR',
        'classifying': '🏷️ Classifying...',
        'embedding': '📊 Generating search index...',
        'error': '❌ Error'
    };

    (function pollProcessing() {
        fetch('/api/processing')
            .then(r => r.json())
            .then(jobs => {
                if (jobs && jobs.length > 0) {
                    wasProcessing = true;
                    panel.classList.remove('hidden');
                    jobsDiv.innerHTML = jobs.map(j => {
                        const elapsed = (j.elapsed_ms / 1000).toFixed(1);
                        const label = stepLabels[j.step] || j.step;
                        const detail = j.detail ? ` — ${j.detail}` : '';
                        return `<div class="flex items-center justify-between bg-white dark:bg-gray-800 rounded-xl px-4 py-3 shadow-sm">
                            <div>
                                <span class="font-medium text-gray-900 dark:text-white">${j.filename}</span>
                                <span class="ml-2 text-sm text-amber-700 dark:text-amber-300">${label}${detail}</span>
                            </div>
                            <span class="text-sm text-gray-500 dark:text-gray-400 font-mono">${elapsed}s</span>
                        </div>`;
                    }).join('');
                    setTimeout(pollProcessing, 1000);
                } else {
                    panel.classList.add('hidden');
                    if (wasProcessing) {
                        wasProcessing = false;
                        showToast('✓ Document processing complete!', 'success');
                        setTimeout(() => window.location.reload(), 500);
                    } else {
                        setTimeout(pollProcessing, 3000);
                    }
                }
            })
            .catch(() => setTimeout(pollProcessing, 5000));
    })();
    
    // Poll until all documents are ready
    function pollUntilAllReady(docIds) {
        progress.classList.remove('hidden');
        let attempts = 0;
        const poll = setInterval(async () => {
            attempts++;
            try {
                const res = await fetch('/api/documents');
                const docs = await res.json();
                if (!docs) return;
                
                let allReady = true;
                let anyError = false;
                
                for (const id of docIds) {
                    const doc = docs.find(d => d.ID === id);
                    if (!doc || doc.Status === 'processing') {
                        allReady = false;
                    } else if (doc.Status === 'error') {
                        anyError = true;
                    }
                }
                
                if (allReady) {
                    clearInterval(poll);
                    sessionStorage.removeItem('pendingDocs');
                    progress.classList.add('hidden');
                    if (anyError) {
                        showToast('Some documents failed', 'warning');
                    } else {
                        showToast('✓ All ' + docIds.length + ' documents ready!', 'success');
                    }
                    window.location.reload();
                } else if (attempts > 90) { // 3 min timeout for multiple
                    clearInterval(poll);
                    sessionStorage.removeItem('pendingDocs');
                    progress.classList.add('hidden');
                    showToast('Taking too long — refresh manually', 'warning');
                }
            } catch {}
        }, 2000);
    }
    
    function showToast(message, type = 'info') {
        const colors = {
            success: 'bg-green-500',
            error: 'bg-red-500',
            info: 'bg-blue-500',
            warning: 'bg-amber-500'
        };
        
        let container = document.getElementById('toast-container');
        if (!container) {
            container = document.createElement('div');
            container.id = 'toast-container';
            container.className = 'fixed top-4 right-4 z-50 flex flex-col gap-2';
            document.body.appendChild(container);
        }
        
        const toast = document.createElement('div');
        toast.className = `${colors[type] || colors.info} text-white px-6 py-3 rounded-lg shadow-lg transform transition-all duration-300 translate-x-full`;
        toast.textContent = message;
        container.appendChild(toast);
        
        requestAnimationFrame(() => toast.classList.remove('translate-x-full'));
        
        setTimeout(() => {
            toast.classList.add('translate-x-full', 'opacity-0');
            setTimeout(() => toast.remove(), 300);
        }, 4000);
    }
</script>
{{end}}