{{template "base" .}}

{{define "content"}}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
        <div class="flex items-start space-x-4">
            <a href="/browse/{{.Document.Category}}" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors mt-1">
                <svg class="w-5 h-5 text-gray-500" 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"></path>
                </svg>
            </a>
            <div>
                <div class="flex items-center space-x-3 mb-1">
                    <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">
                        {{categoryIcon .Document.Category}} {{title .Document.Category}}
                    </span>
                    {{if .Document.Type}}
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
                        {{title .Document.Type}}
                    </span>
                    {{end}}
                </div>
                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white">{{.Document.Title}}</h1>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">ID: {{.Document.ID}}</p>
            </div>
        </div>
        <div class="flex gap-2">
            <button onclick="toggleEdit()" class="inline-flex items-center px-3 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-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                </svg>
                Edit
            </button>
            {{if .Document.PDFPath}}
            <a href="/pdf/{{.Document.ID}}" target="_blank" class="inline-flex items-center px-3 py-2 bg-brand-600 hover:bg-brand-700 text-white text-sm font-medium rounded-lg transition-all">
                <svg class="w-4 h-4 mr-1.5" 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>
                Download
            </a>
            {{end}}
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Left Column: Details -->
        <div class="space-y-6">
            <!-- Metadata Card -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="font-semibold text-gray-900 dark:text-white">Details</h2>
                </div>
                <div class="p-6">
                    <dl class="grid grid-cols-2 gap-4">
                        {{if .Document.Date}}
                        <div>
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Date</dt>
                            <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDate .Document.Date}}</dd>
                        </div>
                        {{end}}
                        {{if .Document.Amount}}
                        <div>
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Amount</dt>
                            <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Amount}}</dd>
                        </div>
                        {{end}}
                        {{if .Document.Vendor}}
                        <div>
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Vendor</dt>
                            <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{.Document.Vendor}}</dd>
                        </div>
                        {{end}}
                        {{if .Document.ProcessedAt}}
                        <div>
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Processed</dt>
                            <dd class="mt-1 font-medium text-gray-900 dark:text-white">{{formatDate .Document.ProcessedAt}}</dd>
                        </div>
                        {{end}}
                        {{if .Document.OriginalFile}}
                        <div class="col-span-2">
                            <dt class="text-sm text-gray-500 dark:text-gray-400">Original File</dt>
                            <dd class="mt-1 font-medium text-gray-900 dark:text-white truncate">{{.Document.OriginalFile}}</dd>
                        </div>
                        {{end}}
                    </dl>
                </div>
            </div>

            <!-- Summary -->
            {{if .Document.Summary}}
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="font-semibold text-gray-900 dark:text-white">Summary</h2>
                </div>
                <div class="p-6">
                    <p class="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{.Document.Summary}}</p>
                </div>
            </div>
            {{end}}

            <!-- Notes -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
                    <h2 class="font-semibold text-gray-900 dark:text-white">Notes</h2>
                </div>
                <div class="p-6">
                    {{if .Document.Notes}}
                    <p class="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">{{.Document.Notes}}</p>
                    {{else}}
                    <p class="text-gray-400 dark:text-gray-500 italic">No notes yet. Click Edit to add notes.</p>
                    {{end}}
                </div>
            </div>

            <!-- Full Text -->
            {{if .Document.FullText}}
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
                    <h2 class="font-semibold text-gray-900 dark:text-white">OCR Text</h2>
                    <button onclick="copyText()" class="text-sm text-brand-600 dark:text-brand-400 hover:underline">Copy</button>
                </div>
                <div class="p-6 max-h-96 overflow-auto">
                    <div id="ocr-text" class="text-sm text-gray-700 dark:text-gray-300 prose dark:prose-invert max-w-none">{{.Document.FullText | safe}}</div>
                    <script>
                        // Simple markdown rendering
                        (function() {
                            const el = document.getElementById('ocr-text');
                            let md = el.textContent;
                            // Headers
                            md = md.replace(/^### (.+)$/gm, '<h4 class="font-semibold mt-4 mb-2">$1</h4>');
                            md = md.replace(/^## (.+)$/gm, '<h3 class="font-semibold text-lg mt-4 mb-2">$1</h3>');
                            // Bold
                            md = md.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
                            // Tables (simple)
                            md = md.replace(/\|(.+)\|/g, function(match) {
                                const cells = match.split('|').filter(c => c.trim());
                                return '<tr>' + cells.map(c => '<td class="border px-2 py-1">' + c.trim() + '</td>').join('') + '</tr>';
                            });
                            md = md.replace(/(<tr>.*<\/tr>\n?)+/g, '<table class="border-collapse border my-2">$&</table>');
                            // Bullets
                            md = md.replace(/^- (.+)$/gm, '<li>$1</li>');
                            md = md.replace(/(<li>.*<\/li>\n?)+/g, '<ul class="list-disc ml-4 my-2">$&</ul>');
                            // Line breaks
                            md = md.replace(/\n/g, '<br>');
                            el.innerHTML = md;
                        })();
                    </script>
                </div>
            </div>
            {{end}}
        </div>

        <!-- Right Column: PDF Viewer -->
        <div>
            {{if .Document.PDFPath}}
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden sticky top-6">
                <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
                    <h2 class="font-semibold text-gray-900 dark:text-white">Document Preview</h2>
                    <div class="flex items-center space-x-2">
                        <button onclick="zoomOut()" class="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
                            </svg>
                        </button>
                        <span id="zoom-level" class="text-sm text-gray-500">100%</span>
                        <button onclick="zoomIn()" class="p-1.5 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="pdf-container p-4">
                    <div id="pdf-viewer" class="flex flex-col items-center space-y-4 min-h-[600px]">
                        <div class="flex items-center justify-center h-full text-gray-400">
                            <svg class="animate-spin w-8 h-8" 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>
                        </div>
                    </div>
                </div>
                <div class="px-6 py-3 border-t border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
                    <div class="flex items-center justify-between">
                        <button onclick="prevPage()" class="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">← Previous</button>
                        <span id="page-info" class="text-sm text-gray-500 dark:text-gray-400">Page 1 of 1</span>
                        <button onclick="nextPage()" class="px-3 py-1.5 text-sm text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors">Next →</button>
                    </div>
                </div>
            </div>
            {{else}}
            <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700 p-12 text-center">
                <svg class="w-16 h-16 mx-auto text-gray-300 dark:text-gray-600 mb-4" 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>
                <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-1">No PDF Available</h3>
                <p class="text-gray-500 dark:text-gray-400">This document doesn't have an associated PDF file</p>
            </div>
            {{end}}
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div id="edit-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
    <div class="flex min-h-full items-center justify-center p-4">
        <div class="fixed inset-0 bg-gray-500/75 dark:bg-gray-900/80" onclick="toggleEdit()"></div>
        <div class="relative bg-white dark:bg-gray-800 rounded-2xl shadow-xl max-w-lg w-full p-6 animate-fade-in">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Edit Document</h3>
                <button onclick="toggleEdit()" class="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                    <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"></path>
                    </svg>
                </button>
            </div>
            
            <form id="edit-form" class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Title</label>
                    <input type="text" name="title" value="{{.Document.Title}}" 
                           class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 border-0 focus:ring-2 focus:ring-brand-500">
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Category</label>
                    <select name="category" class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 border-0 focus:ring-2 focus:ring-brand-500">
                        {{range $.Categories}}
                        <option value="{{.}}" {{if eq . $.Document.Category}}selected{{end}}>{{title .}}</option>
                        {{end}}
                    </select>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Notes</label>
                    <textarea name="notes" rows="4" 
                              class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 border-0 focus:ring-2 focus:ring-brand-500 resize-none">{{.Document.Notes}}</textarea>
                </div>
                
                <div class="flex justify-between pt-4">
                    <button type="button" onclick="deleteDocument()" class="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
                        Delete Document
                    </button>
                    <div class="flex gap-3">
                        <button type="button" onclick="toggleEdit()" class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
                            Cancel
                        </button>
                        <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-brand-600 hover:bg-brand-700 rounded-lg transition-colors">
                            Save Changes
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="module">
    // PDF.js
    const pdfjsLib = window['pdfjs-dist/build/pdf'] || await import('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.min.mjs');
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/4.0.379/pdf.worker.min.mjs';
    
    let pdfDoc = null;
    let currentPage = 1;
    let scale = 1.0;
    const docId = "{{.Document.ID}}";
    
    {{if .Document.PDFPath}}
    // Load PDF
    async function loadPDF() {
        try {
            pdfDoc = await pdfjsLib.getDocument('/pdf/' + docId).promise;
            document.getElementById('page-info').textContent = `Page 1 of ${pdfDoc.numPages}`;
            renderPage(1);
        } catch (err) {
            document.getElementById('pdf-viewer').innerHTML = `
                <div class="flex flex-col items-center justify-center h-64 text-gray-400">
                    <svg class="w-12 h-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p>Could not load PDF</p>
                    <p class="text-sm">${err.message}</p>
                </div>
            `;
        }
    }
    
    async function renderPage(num) {
        const page = await pdfDoc.getPage(num);
        const viewport = page.getViewport({ scale: scale });
        
        const canvas = document.createElement('canvas');
        canvas.className = 'shadow-lg rounded';
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        
        const ctx = canvas.getContext('2d');
        await page.render({ canvasContext: ctx, viewport: viewport }).promise;
        
        const viewer = document.getElementById('pdf-viewer');
        viewer.innerHTML = '';
        viewer.appendChild(canvas);
        
        document.getElementById('page-info').textContent = `Page ${num} of ${pdfDoc.numPages}`;
        currentPage = num;
    }
    
    window.prevPage = () => { if (currentPage > 1) renderPage(currentPage - 1); };
    window.nextPage = () => { if (pdfDoc && currentPage < pdfDoc.numPages) renderPage(currentPage + 1); };
    window.zoomIn = () => { scale = Math.min(scale + 0.25, 3); document.getElementById('zoom-level').textContent = Math.round(scale * 100) + '%'; if (pdfDoc) renderPage(currentPage); };
    window.zoomOut = () => { scale = Math.max(scale - 0.25, 0.5); document.getElementById('zoom-level').textContent = Math.round(scale * 100) + '%'; if (pdfDoc) renderPage(currentPage); };
    
    loadPDF();
    {{end}}
</script>

<script>
    function toggleEdit() {
        document.getElementById('edit-modal').classList.toggle('hidden');
    }
    
    function copyText() {
        const text = document.getElementById('ocr-text').textContent;
        navigator.clipboard.writeText(text);
    }
    
    document.getElementById('edit-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const data = {
            title: form.title.value,
            category: form.category.value,
            notes: form.notes.value
        };
        
        const res = await fetch('/api/document/{{.Document.ID}}', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });
        
        if (res.ok) {
            location.reload();
        } else {
            alert('Failed to save changes');
        }
    });
    
    async function deleteDocument() {
        if (!confirm('Are you sure you want to delete this document?')) return;
        
        const res = await fetch('/api/document/{{.Document.ID}}', { method: 'DELETE' });
        if (res.ok) {
            location.href = '/browse/{{.Document.Category}}';
        } else {
            alert('Failed to delete document');
        }
    }
</script>
{{end}}