{% extends "base.html" %}

{% block content %}
<!-- Stats cards -->
<section id="stats-section"
         hx-get="/dashboard/partials/stats"
         hx-trigger="load, every 30s"
         hx-swap="innerHTML">
    <div class="text-gray-500 text-sm">Loading stats...</div>
</section>

<!-- Search + Upload row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Search (2/3 width) -->
    <div class="lg:col-span-2">
        <div class="bg-arkiv-900 rounded-xl border border-arkiv-800 p-6">
            <h2 class="text-lg font-medium text-white mb-4">Search</h2>
            <div class="relative">
                <input type="text"
                       name="q"
                       placeholder="Search items... (keyword + semantic)"
                       autocomplete="off"
                       hx-get="/dashboard/partials/search"
                       hx-trigger="keyup changed delay:300ms, search"
                       hx-target="#search-results"
                       hx-indicator="#search-spinner"
                       class="w-full bg-arkiv-950 text-white placeholder-gray-500 border border-arkiv-800 rounded-lg px-4 py-3 pr-10 focus:outline-none focus:ring-2 focus:ring-arkiv-500 focus:border-transparent" />
                <svg id="search-spinner" class="htmx-indicator absolute right-3 top-3.5 w-5 h-5 text-arkiv-500 animate-spin" xmlns="http://www.w3.org/2000/svg" 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 12h4z"></path>
                </svg>
            </div>
            <div id="search-results" class="mt-4"></div>
        </div>
    </div>

    <!-- Upload (1/3 width) -->
    <div>
        <div class="bg-arkiv-900 rounded-xl border border-arkiv-800 p-6">
            <h2 class="text-lg font-medium text-white mb-4">Upload</h2>
            <form hx-post="/dashboard/partials/upload"
                  hx-target="#upload-result"
                  hx-encoding="multipart/form-data"
                  hx-indicator="#upload-spinner">
                <div id="drop-zone"
                     class="border-2 border-dashed border-arkiv-800 rounded-lg p-8 text-center cursor-pointer hover:border-arkiv-500 transition-colors">
                    <svg class="mx-auto h-10 w-10 text-gray-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                    <p class="text-sm text-gray-400 mb-2">Drop file here or click to browse</p>
                    <input type="file" name="file" class="hidden" id="file-input"
                           onchange="this.closest('form').requestSubmit()" />
                    <label for="file-input" class="text-sm text-arkiv-500 hover:text-arkiv-400 cursor-pointer">
                        Choose file
                    </label>
                </div>
                <svg id="upload-spinner" class="htmx-indicator mx-auto mt-3 w-5 h-5 text-arkiv-500 animate-spin" xmlns="http://www.w3.org/2000/svg" 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 12h4z"></path>
                </svg>
            </form>
            <div id="upload-result" class="mt-3"></div>
        </div>
    </div>
</div>

<!-- Recent items -->
<section>
    <div class="bg-arkiv-900 rounded-xl border border-arkiv-800 p-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-medium text-white">Recent Items</h2>
            <button hx-get="/dashboard/partials/recent"
                    hx-target="#recent-items"
                    class="text-sm text-arkiv-500 hover:text-arkiv-400">
                Refresh
            </button>
        </div>
        <div id="recent-items"
             hx-get="/dashboard/partials/recent"
             hx-trigger="load"
             hx-swap="innerHTML">
            <div class="text-gray-500 text-sm">Loading...</div>
        </div>
    </div>
</section>

<!-- Drag-and-drop JS -->
<script>
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('file-input');

    ['dragenter', 'dragover'].forEach(evt => {
        dropZone.addEventListener(evt, e => {
            e.preventDefault();
            dropZone.classList.add('drop-active');
        });
    });
    ['dragleave', 'drop'].forEach(evt => {
        dropZone.addEventListener(evt, e => {
            e.preventDefault();
            dropZone.classList.remove('drop-active');
        });
    });
    dropZone.addEventListener('drop', e => {
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            fileInput.closest('form').requestSubmit();
        }
    });
</script>
{% endblock %}