

<div id="panel-csv" class="hidden">

    
    <div id="importLanding">
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-6">
            
            <div class="lg:col-span-3">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-10 h-10 bg-primary-50 rounded-xl flex items-center justify-center shrink-0">
                        <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"/></svg>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-gray-900">Import from File</h2>
                        <p class="text-gray-500 text-xs">Upload a CSV or JSON file of <strong>videos or galleries (Albums)</strong>, map columns, then import.</p>
                    </div>
                </div>

                
                <div id="uploadZone" class="border-2 border-dashed border-gray-300 rounded-xl p-4 sm:p-8 text-center bg-white hover:border-primary-400 hover:bg-primary-50/30 transition-colors cursor-pointer mb-5"
                     ondragover="event.preventDefault();this.classList.add('border-primary-500','bg-primary-50')"
                     ondragleave="this.classList.remove('border-primary-500','bg-primary-50')"
                     ondrop="IMP.handleDrop(event)" onclick="document.getElementById('fileInput').click()">
                    <svg class="w-8 h-8 mx-auto text-gray-300 mb-2" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z"/></svg>
                    <p class="text-gray-600 font-medium text-sm mb-0.5">Drop your file here</p>
                    <p class="text-gray-400 text-xs">or click to browse — CSV and JSON accepted</p>
                    <input type="file" id="fileInput" accept=".csv,.json" class="hidden" onchange="IMP.handleSelect(this)">
                </div>
                <div id="uploadError" class="hidden bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm mb-4"></div>

                
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
                    <div class="bg-white rounded-lg border border-gray-200 p-3 text-center">
                        <div class="inline-flex items-center justify-center w-8 h-8 bg-blue-50 rounded-lg mb-1.5">
                            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
                        </div>
                        <h3 class="text-xs font-semibold text-gray-800 mb-0.5">CSV & JSON</h3>
                        <p class="text-[10px] text-gray-400">Any column structure</p>
                    </div>
                    <div class="bg-white rounded-lg border border-gray-200 p-3 text-center">
                        <div class="inline-flex items-center justify-center w-8 h-8 bg-purple-50 rounded-lg mb-1.5">
                            <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"/></svg>
                        </div>
                        <h3 class="text-xs font-semibold text-gray-800 mb-0.5">Drag & Drop</h3>
                        <p class="text-[10px] text-gray-400">Map fields visually</p>
                    </div>
                    <div class="bg-white rounded-lg border border-gray-200 p-3 text-center">
                        <div class="inline-flex items-center justify-center w-8 h-8 bg-green-50 rounded-lg mb-1.5">
                            <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5"/></svg>
                        </div>
                        <h3 class="text-xs font-semibold text-gray-800 mb-0.5">Background</h3>
                        <p class="text-[10px] text-gray-400">Close tab, import continues</p>
                    </div>
                </div>
            </div>

            
            <div class="lg:col-span-2">
                <div class="bg-white rounded-lg border border-gray-200 h-full">
                    <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
                        <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                            <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
                            Saved Files
                        </h3>
                        <span id="savedFilesCount" class="text-xs text-gray-400"></span>
                    </div>
                    <div id="savedFilesSection" class="p-3">
                        <div id="savedFilesList" class="space-y-1.5">
                            <div class="text-xs text-gray-400 text-center py-6">Loading...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    
    <div id="importQueue" class="hidden">
        
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-5">
            <div>
                <h2 class="text-lg font-bold text-gray-900">Import Queue</h2>
                <p id="queueSummary" class="text-sm text-gray-500"></p>
            </div>
            <div class="flex items-center gap-2">
                <div class="relative" id="queueSavedDropdown">
                    <button type="button" onclick="IMP.toggleSavedDropdown()" class="inline-flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-600 hover:border-primary-300 hover:text-primary-600 transition-colors">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"/></svg>
                        Saved files
                    </button>
                    <div id="savedDropdownPanel" class="hidden absolute right-0 top-full mt-1 w-80 bg-white border border-gray-200 rounded-lg shadow-xl z-30 overflow-hidden">
                        <div class="px-3 py-2 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wide">Previously uploaded</div>
                        <div id="savedDropdownList" class="max-h-64 overflow-y-auto p-1.5 space-y-1">
                            <div class="text-xs text-gray-400 text-center py-3">Loading...</div>
                        </div>
                    </div>
                </div>
                <label class="inline-flex items-center gap-2 px-3 py-2 bg-white border border-gray-200 rounded-lg text-sm text-gray-600 cursor-pointer hover:border-primary-300 hover:text-primary-600 transition-colors">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                    Upload new
                    <input type="file" accept=".csv,.json" class="hidden" onchange="IMP.handleSelect(this)">
                </label>
            </div>
        </div>

        
        <div id="fileCards" class="space-y-3"></div>

        
        <div id="globalActions" class="mt-4 flex items-center gap-3">
            <button type="button" onclick="IMP.clearAll()" class="px-4 py-2 text-sm text-gray-400 hover:text-red-600 transition-colors">Clear all</button>
        </div>
    </div>

    
    <div id="activeImports" class="hidden mt-6">
        <div class="flex items-center gap-3 mb-3">
            <div class="w-8 h-8 bg-primary-50 rounded-lg flex items-center justify-center shrink-0">
                <svg class="w-4 h-4 text-primary-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
            </div>
            <div>
                <h3 class="text-sm font-bold text-gray-900">Active Imports</h3>
                <p id="activeImportsSummary" class="text-xs text-gray-500"></p>
            </div>
        </div>
        <div id="activeJobsList" class="space-y-2"></div>
    </div>

</div>

<div id="panel-feeds" class="hidden">
<?php require __DIR__ . '/../_import_feeds.php'; ?>
</div>


<div id="colPreview" class="hidden fixed z-50 bg-white rounded-lg border border-gray-200 shadow-xl" style="width:340px;max-width:90vw">
    <div class="px-3 py-2 border-b border-gray-100 flex items-center justify-between">
        <span id="colPreviewTitle" class="text-xs font-semibold text-gray-700 truncate"></span>
        <button type="button" onclick="IMP.closePreview()" class="text-gray-400 hover:text-gray-600 text-lg leading-none">&times;</button>
    </div>
    <div id="colPreviewBody" class="p-2 space-y-0.5 max-h-48 overflow-y-auto"></div>
</div>


<div id="fieldInfo" class="hidden fixed z-50 bg-gray-800 text-white rounded-lg shadow-xl" style="width:280px;max-width:90vw">
    <div class="px-3 py-2 text-xs leading-relaxed" id="fieldInfoBody"></div>
</div>


<script>
window.IMP_TABS = {
    switchTo(tab) {
        document.getElementById('panel-catalogue').classList.toggle('hidden', tab !== 'catalogue');
        document.getElementById('panel-csv').classList.toggle('hidden', tab !== 'csv');
        var _pf = document.getElementById('panel-feeds'); if (_pf) _pf.classList.toggle('hidden', tab !== 'feeds');
        document.querySelectorAll('.import-tab').forEach(el => {
            const isActive = el.id === 'tab-' + tab;
            el.classList.toggle('border-primary-500', isActive);
            el.classList.toggle('text-primary-600', isActive);
            el.classList.toggle('border-transparent', !isActive);
            el.classList.toggle('text-gray-500', !isActive);
        });
    }
};

(function(){ var t=(new URLSearchParams(location.search)).get('tab')||(location.hash||'').replace('#',''); if(t && document.getElementById('tab-'+t)) IMP_TABS.switchTo(t); })();
</script>

