{% extends "base.html" %}

{% block title %}Admin Dashboard - DosVault{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">Admin Dashboard</h1>
    <p class="text-gray-400">System overview and management</p>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <div class="flex items-center">
            <div class="text-3xl text-blue-400 mr-4">🎮</div>
            <div>
                <p class="text-2xl font-bold">{{ total_games }}</p>
                <p class="text-gray-400 text-sm">Total Games</p>
            </div>
        </div>
    </div>
    
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <div class="flex items-center">
            <div class="text-3xl text-green-400 mr-4">👥</div>
            <div>
                <p class="text-2xl font-bold">{{ total_users }}</p>
                <p class="text-gray-400 text-sm">Total Users</p>
            </div>
        </div>
    </div>
    
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <a href="/admin/users" class="flex items-center hover:bg-gray-700 rounded transition-colors">
            <div class="text-3xl text-yellow-400 mr-4">⚙️</div>
            <div>
                <p class="text-lg font-semibold">Manage Users</p>
                <p class="text-gray-400 text-sm">Create & Edit</p>
            </div>
        </a>
    </div>
    
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <a href="/" class="flex items-center hover:bg-gray-700 rounded transition-colors">
            <div class="text-3xl text-purple-400 mr-4">📚</div>
            <div>
                <p class="text-lg font-semibold">Browse Games</p>
                <p class="text-gray-400 text-sm">View Library</p>
            </div>
        </a>
    </div>
</div>

<!-- System Management Controls -->
<div class="mb-8">
    <h2 class="text-2xl font-bold mb-6">System Management</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        <!-- ROM Scanning -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" 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"/>
                </svg>
                <h3 class="text-lg font-semibold">ROM Scanner</h3>
            </div>
            <p class="text-secondary text-sm mb-4">Scan directories for new ROM files and add them to the database</p>
            <button onclick="triggerRomScan()" class="w-full bg-accent hover:bg-accent px-4 py-2 rounded font-medium transition-colors" id="scan-btn">
                <span class="scan-text">Start ROM Scan</span>
                <span class="scan-loading hidden">Scanning...</span>
            </button>
            <div id="scan-status" class="mt-2 text-sm text-secondary"></div>
        </div>
        
        <!-- Metadata Refresh -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" 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"/>
                </svg>
                <h3 class="text-lg font-semibold">Metadata Refresh</h3>
            </div>
            <p class="text-secondary text-sm mb-4">Update game metadata and refresh image information from IGDB</p>
            <button onclick="triggerMetadataRefresh()" class="w-full bg-accent hover:bg-accent px-4 py-2 rounded font-medium transition-colors" id="metadata-btn">
                <span class="metadata-text">Refresh Metadata</span>
                <span class="metadata-loading hidden">Refreshing...</span>
            </button>
            <div id="metadata-status" class="mt-2 text-sm text-secondary"></div>
        </div>
        
        <!-- Image Downloads -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                </svg>
                <h3 class="text-lg font-semibold">Image Sync</h3>
            </div>
            <p class="text-secondary text-sm mb-4">Download missing cover art and screenshots locally</p>
            <button onclick="triggerImageSync()" class="w-full bg-accent hover:bg-accent px-4 py-2 rounded font-medium transition-colors" id="images-btn">
                <span class="images-text">Sync Images</span>
                <span class="images-loading hidden">Syncing...</span>
            </button>
            <div id="images-status" class="mt-2 text-sm text-secondary"></div>
        </div>
        
        <!-- Database Cleanup -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                </svg>
                <h3 class="text-lg font-semibold">Database Cleanup</h3>
            </div>
            <p class="text-secondary text-sm mb-4">Remove orphaned records and cleanup missing files</p>
            <button onclick="triggerDatabaseCleanup()" class="w-full bg-warning-color hover:opacity-80 px-4 py-2 rounded font-medium transition-colors" id="cleanup-btn">
                <span class="cleanup-text">Cleanup Database</span>
                <span class="cleanup-loading hidden">Cleaning...</span>
            </button>
            <div id="cleanup-status" class="mt-2 text-sm text-secondary"></div>
        </div>
        
        <!-- System Statistics -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                </svg>
                <h3 class="text-lg font-semibold">System Stats</h3>
            </div>
            <p class="text-secondary text-sm mb-4">View detailed statistics and system health</p>
            <button onclick="showSystemStats()" class="w-full bg-tertiary hover:bg-opacity-80 px-4 py-2 rounded font-medium transition-colors">
                View Statistics
            </button>
        </div>
        
        <!-- Configuration Editor -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"/>
                </svg>
                <h3 class="text-lg font-semibold">Configuration</h3>
            </div>
            <p class="text-secondary text-sm mb-4">Edit system configuration settings</p>
            <button onclick="showConfigEditor()" class="w-full bg-info-color hover:opacity-80 px-4 py-2 rounded font-medium transition-colors">
                Edit Configuration
            </button>
        </div>
        
        <!-- Cache Management -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" 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"/>
                </svg>
                <h3 class="text-lg font-semibold">Cache Control</h3>
            </div>
            <p class="text-secondary text-sm mb-4">Clear application caches and temporary files</p>
            <button onclick="triggerCacheClear()" class="w-full bg-danger-color hover:opacity-80 px-4 py-2 rounded font-medium transition-colors" id="cache-btn">
                <span class="cache-text">Clear Caches</span>
                <span class="cache-loading hidden">Clearing...</span>
            </button>
            <div id="cache-status" class="mt-2 text-sm text-secondary"></div>
        </div>
        
        <!-- System Logs -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" 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"/>
                </svg>
                <h3 class="text-lg font-semibold">System Logs</h3>
            </div>
            <p class="text-secondary text-sm mb-4">View application logs and system events</p>
            <button onclick="showSystemLogs()" class="w-full bg-info-color hover:opacity-80 px-4 py-2 rounded font-medium transition-colors">
                View System Logs
            </button>
        </div>
        
        <!-- Log Files -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
                </svg>
                <h3 class="text-lg font-semibold">Log Management</h3>
            </div>
            <p class="text-secondary text-sm mb-4">Download and manage log files</p>
            <div class="space-y-2">
                <button onclick="downloadLogs('application')" class="w-full bg-tertiary hover:bg-opacity-80 px-4 py-2 rounded font-medium transition-colors">
                    Download Application Logs
                </button>
                <button onclick="clearLogs()" class="w-full bg-warning-color hover:opacity-80 px-4 py-2 rounded font-medium transition-colors">
                    Clear Old Logs
                </button>
            </div>
        </div>
        
        <!-- Live Log Stream -->
        <div class="bg-secondary rounded-lg p-6 border border-theme">
            <div class="flex items-center mb-4">
                <svg class="w-8 h-8 text-accent mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                </svg>
                <h3 class="text-lg font-semibold">Live Log Stream</h3>
            </div>
            <p class="text-secondary text-sm mb-4">Monitor real-time application logs</p>
            <div class="space-y-2">
                <button onclick="toggleLogStream()" class="w-full bg-accent hover:bg-opacity-80 px-4 py-2 rounded font-medium transition-colors" id="stream-btn">
                    <span id="stream-text">Start Log Stream</span>
                </button>
                <select id="stream-level-filter" onchange="updateStreamFilter()" class="w-full px-3 py-2 bg-tertiary border border-theme rounded text-sm">
                    <option value="">All Levels</option>
                    <option value="ERROR">Error Only</option>
                    <option value="WARNING">Warning & Error</option>
                    <option value="INFO">Info & Above</option>
                </select>
            </div>
        </div>
    </div>
</div>

<!-- System Statistics Modal -->
<div id="stats-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
    <div class="bg-secondary rounded-lg p-6 max-w-4xl w-full max-h-screen overflow-y-auto border border-theme">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold">System Statistics</h3>
            <button onclick="hideSystemStats()" class="text-secondary hover:text-primary">&times;</button>
        </div>
        <div id="stats-content" class="space-y-4">
            <p class="text-secondary">Loading statistics...</p>
        </div>
    </div>
</div>

<!-- System Logs Modal -->
<div id="logs-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
    <div class="bg-secondary rounded-lg p-6 max-w-6xl w-full max-h-screen overflow-y-auto border border-theme">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold">System Logs</h3>
            <div class="flex space-x-2">
                <select id="log-level-filter" onchange="filterLogs()" class="px-3 py-1 bg-tertiary border border-theme rounded text-sm">
                    <option value="">All Levels</option>
                    <option value="ERROR">Error</option>
                    <option value="WARNING">Warning</option>
                    <option value="INFO">Info</option>
                    <option value="DEBUG">Debug</option>
                </select>
                <button onclick="refreshLogs()" class="px-3 py-1 bg-accent hover:bg-opacity-80 rounded text-sm font-medium transition-colors">
                    Refresh
                </button>
                <button onclick="hideSystemLogs()" class="text-secondary hover:text-primary text-xl">&times;</button>
            </div>
        </div>
        <div id="logs-content" class="bg-tertiary rounded p-4 font-mono text-sm max-h-96 overflow-y-auto border border-theme">
            <p class="text-secondary">Loading logs...</p>
        </div>
    </div>
</div>

<!-- Live Log Stream Modal -->
<div id="stream-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
    <div class="bg-secondary rounded-lg p-6 max-w-6xl w-full max-h-screen flex flex-col border border-theme">
        <div class="flex justify-between items-center mb-4 flex-shrink-0">
            <h3 class="text-xl font-bold">Live Log Stream</h3>
            <div class="flex space-x-2 items-center">
                <span id="stream-status" class="text-sm px-2 py-1 rounded bg-accent text-secondary">Connected</span>
                <button onclick="clearStreamLogs()" class="px-3 py-1 bg-warning-color hover:bg-opacity-80 rounded text-sm font-medium transition-colors">
                    Clear
                </button>
                <button onclick="toggleStreamPause()" class="px-3 py-1 bg-tertiary hover:bg-opacity-80 rounded text-sm font-medium transition-colors" id="pause-btn">
                    Pause
                </button>
                <button onclick="hideLogStream()" class="text-secondary hover:text-primary text-xl">&times;</button>
            </div>
        </div>
        <div id="stream-content" class="bg-tertiary rounded p-4 font-mono text-sm flex-grow overflow-y-auto border border-theme min-h-96">
            <p class="text-secondary">Starting log stream...</p>
        </div>
    </div>
</div>

<!-- Configuration Editor Modal -->
<div id="config-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4">
    <div class="bg-secondary rounded-lg p-6 max-w-4xl w-full max-h-screen flex flex-col border border-theme">
        <div class="flex justify-between items-center mb-4 flex-shrink-0">
            <h3 class="text-xl font-bold">Configuration Editor</h3>
            <div class="flex space-x-2 items-center">
                <button onclick="resetConfig()" class="px-3 py-1 bg-warning-color hover:bg-opacity-80 rounded text-sm font-medium transition-colors">
                    Reset
                </button>
                <button onclick="saveConfig()" class="px-3 py-1 bg-accent hover:bg-opacity-80 rounded text-sm font-medium transition-colors">
                    Save
                </button>
                <button onclick="hideConfigEditor()" class="text-secondary hover:text-primary text-xl">&times;</button>
            </div>
        </div>
        
        <div class="flex-grow flex flex-col space-y-4 overflow-hidden">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 flex-shrink-0">
                <!-- Server Settings -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-accent">Server Settings</h4>
                    
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-1">Host</label>
                        <input type="text" id="config-host" class="w-full px-3 py-2 bg-tertiary border border-theme rounded text-primary" placeholder="0.0.0.0">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-1">Port</label>
                        <input type="number" id="config-port" class="w-full px-3 py-2 bg-tertiary border border-theme rounded text-primary" placeholder="8080">
                    </div>
                </div>
                
                <!-- Paths -->
                <div class="space-y-4">
                    <h4 class="text-lg font-semibold text-accent">Paths</h4>
                    
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-1">ROM Directory</label>
                        <input type="text" id="config-rom-path" class="w-full px-3 py-2 bg-tertiary border border-theme rounded text-primary" placeholder="/path/to/roms">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-1">Images Directory</label>
                        <input type="text" id="config-images-path" class="w-full px-3 py-2 bg-tertiary border border-theme rounded text-primary" placeholder="/path/to/images">
                    </div>
                </div>
            </div>
            
            <!-- IGDB API Settings -->
            <div class="space-y-4 flex-shrink-0">
                <h4 class="text-lg font-semibold text-accent">IGDB API Settings</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-1">Client ID</label>
                        <input type="text" id="config-igdb-client-id" class="w-full px-3 py-2 bg-tertiary border border-theme rounded text-primary" placeholder="Your Twitch Client ID">
                    </div>
                    
                    <div>
                        <label class="block text-sm font-medium text-secondary mb-1">Client Secret</label>
                        <input type="password" id="config-igdb-secret" class="w-full px-3 py-2 bg-tertiary border border-theme rounded text-primary" placeholder="Your Twitch Client Secret">
                    </div>
                </div>
            </div>
            
            <!-- JSON Editor -->
            <div class="flex-grow flex flex-col min-h-0">
                <div class="flex justify-between items-center mb-2">
                    <h4 class="text-lg font-semibold text-accent">Raw Configuration (JSON)</h4>
                    <button onclick="formatJSON()" class="px-2 py-1 bg-tertiary hover:bg-opacity-80 rounded text-xs transition-colors">
                        Format
                    </button>
                </div>
                <textarea id="config-json" class="flex-grow bg-tertiary border border-theme rounded p-3 font-mono text-sm text-primary resize-none" placeholder="Loading configuration..."></textarea>
            </div>
        </div>
        
        <div id="config-status" class="mt-4 text-sm"></div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
    <div class="bg-secondary rounded-lg p-6 border border-theme">
        <h2 class="text-xl font-bold mb-4">Recent Games</h2>
        {% if recent_games %}
        <div class="space-y-3">
            {% for game in recent_games %}
            <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
                <div>
                    <p class="font-medium">{{ game.metadata_obj.title or game.title }}</p>
                    <p class="text-sm text-gray-400">{{ game.path.name }}</p>
                </div>
                <div class="flex space-x-2">
                    <a href="/games/{{ game.id }}" class="text-blue-400 hover:text-blue-300 text-sm">View</a>
                    <a href="/admin/games/{{ game.id }}/edit" class="text-yellow-400 hover:text-yellow-300 text-sm">Edit</a>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-400">No games found</p>
        {% endif %}
    </div>
    
    <div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
        <h2 class="text-xl font-bold mb-4">Recent Users</h2>
        {% if recent_users %}
        <div class="space-y-3">
            {% for user in recent_users %}
            <div class="flex justify-between items-center py-2 border-b border-gray-700 last:border-b-0">
                <div>
                    <p class="font-medium">{{ user.username }}</p>
                    <p class="text-sm text-gray-400">{{ user.email }}</p>
                </div>
                <div class="flex items-center space-x-2">
                    <span class="px-2 py-1 rounded text-xs
                        {% if user.role == 'super' %}bg-red-600
                        {% elif user.role == 'normal' %}bg-blue-600
                        {% else %}bg-yellow-600{% endif %}">
                        {{ user.role.upper() }}
                    </span>
                    {% if not user.is_active %}
                    <span class="px-2 py-1 rounded text-xs bg-gray-600">INACTIVE</span>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-400">No users found</p>
        {% endif %}
    </div>
</div>

<script>
async function triggerRomScan() {
    const btn = document.getElementById('scan-btn');
    const status = document.getElementById('scan-status');
    const scanText = btn.querySelector('.scan-text');
    const scanLoading = btn.querySelector('.scan-loading');
    
    btn.disabled = true;
    scanText.classList.add('hidden');
    scanLoading.classList.remove('hidden');
    
    try {
        const response = await fetch('/api/admin/rom-scan', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${getCookie('auth_token')}`
            }
        });
        
        const result = await response.json();
        
        if (result.status === 'started') {
            status.textContent = 'ROM scan started...';
            status.className = 'mt-2 text-sm text-accent';
            
            // Poll for completion
            pollTaskStatus('rom_scan', status);
        } else if (result.status === 'already_running') {
            status.textContent = 'ROM scan already in progress';
            status.className = 'mt-2 text-sm text-warning-color';
        }
    } catch (error) {
        status.textContent = 'Failed to start ROM scan';
        status.className = 'mt-2 text-sm text-danger-color';
    } finally {
        btn.disabled = false;
        scanText.classList.remove('hidden');
        scanLoading.classList.add('hidden');
    }
}

async function triggerMetadataRefresh() {
    const btn = document.getElementById('metadata-btn');
    const status = document.getElementById('metadata-status');
    const metadataText = btn.querySelector('.metadata-text');
    const metadataLoading = btn.querySelector('.metadata-loading');
    
    btn.disabled = true;
    metadataText.classList.add('hidden');
    metadataLoading.classList.remove('hidden');
    
    try {
        const response = await fetch('/api/admin/metadata-refresh', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${getCookie('auth_token')}`
            }
        });
        
        const result = await response.json();
        
        if (result.status === 'started') {
            status.textContent = 'Metadata refresh started...';
            status.className = 'mt-2 text-sm text-accent';
            
            pollTaskStatus('metadata_refresh', status);
        } else if (result.status === 'already_running') {
            status.textContent = 'Metadata refresh already in progress';
            status.className = 'mt-2 text-sm text-warning-color';
        }
    } catch (error) {
        status.textContent = 'Failed to start metadata refresh';
        status.className = 'mt-2 text-sm text-danger-color';
    } finally {
        btn.disabled = false;
        metadataText.classList.remove('hidden');
        metadataLoading.classList.add('hidden');
    }
}

async function triggerImageSync() {
    const btn = document.getElementById('images-btn');
    const status = document.getElementById('images-status');
    const imagesText = btn.querySelector('.images-text');
    const imagesLoading = btn.querySelector('.images-loading');
    
    btn.disabled = true;
    imagesText.classList.add('hidden');
    imagesLoading.classList.remove('hidden');
    
    try {
        const response = await fetch('/api/admin/image-sync', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${getCookie('auth_token')}`
            }
        });
        
        const result = await response.json();
        
        if (result.status === 'started') {
            status.textContent = 'Image sync started...';
            status.className = 'mt-2 text-sm text-accent';
            
            pollTaskStatus('image_sync', status);
        } else if (result.status === 'already_running') {
            status.textContent = 'Image sync already in progress';
            status.className = 'mt-2 text-sm text-warning-color';
        }
    } catch (error) {
        status.textContent = 'Failed to start image sync';
        status.className = 'mt-2 text-sm text-danger-color';
    } finally {
        btn.disabled = false;
        imagesText.classList.remove('hidden');
        imagesLoading.classList.add('hidden');
    }
}

async function triggerDatabaseCleanup() {
    const btn = document.getElementById('cleanup-btn');
    const status = document.getElementById('cleanup-status');
    const cleanupText = btn.querySelector('.cleanup-text');
    const cleanupLoading = btn.querySelector('.cleanup-loading');
    
    if (!confirm('This will remove orphaned records and missing files. Continue?')) {
        return;
    }
    
    btn.disabled = true;
    cleanupText.classList.add('hidden');
    cleanupLoading.classList.remove('hidden');
    
    try {
        const response = await fetch('/api/admin/database-cleanup', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${getCookie('auth_token')}`
            }
        });
        
        const result = await response.json();
        
        if (result.status === 'completed') {
            status.textContent = result.message;
            status.className = 'mt-2 text-sm text-accent';
        } else {
            status.textContent = result.message || 'Cleanup failed';
            status.className = 'mt-2 text-sm text-danger-color';
        }
    } catch (error) {
        status.textContent = 'Failed to perform database cleanup';
        status.className = 'mt-2 text-sm text-danger-color';
    } finally {
        btn.disabled = false;
        cleanupText.classList.remove('hidden');
        cleanupLoading.classList.add('hidden');
    }
}

async function triggerCacheClear() {
    const btn = document.getElementById('cache-btn');
    const status = document.getElementById('cache-status');
    const cacheText = btn.querySelector('.cache-text');
    const cacheLoading = btn.querySelector('.cache-loading');
    
    btn.disabled = true;
    cacheText.classList.add('hidden');
    cacheLoading.classList.remove('hidden');
    
    try {
        const response = await fetch('/api/admin/cache-clear', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${getCookie('auth_token')}`
            }
        });
        
        const result = await response.json();
        
        if (result.status === 'completed') {
            status.textContent = result.message;
            status.className = 'mt-2 text-sm text-accent';
        } else {
            status.textContent = result.message || 'Cache clear failed';
            status.className = 'mt-2 text-sm text-danger-color';
        }
    } catch (error) {
        status.textContent = 'Failed to clear cache';
        status.className = 'mt-2 text-sm text-danger-color';
    } finally {
        btn.disabled = false;
        cacheText.classList.remove('hidden');
        cacheLoading.classList.add('hidden');
    }
}

async function showSystemStats() {
    const modal = document.getElementById('stats-modal');
    const content = document.getElementById('stats-content');
    
    modal.classList.remove('hidden');
    
    try {
        const response = await fetch('/api/admin/system-stats', {
            headers: {
                'Authorization': `Bearer ${getCookie('auth_token')}`
            }
        });
        
        const stats = await response.json();
        
        content.innerHTML = `
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
                <div class="bg-tertiary p-4 rounded-lg">
                    <h4 class="text-lg font-semibold text-accent">Games</h4>
                    <p class="text-2xl font-bold">${stats.games}</p>
                </div>
                <div class="bg-tertiary p-4 rounded-lg">
                    <h4 class="text-lg font-semibold text-accent">Users</h4>
                    <p class="text-2xl font-bold">${stats.users}</p>
                </div>
                <div class="bg-tertiary p-4 rounded-lg">
                    <h4 class="text-lg font-semibold text-accent">Metadata</h4>
                    <p class="text-2xl font-bold">${stats.metadata}</p>
                </div>
                <div class="bg-tertiary p-4 rounded-lg">
                    <h4 class="text-lg font-semibold text-accent">Tags</h4>
                    <p class="text-2xl font-bold">${stats.tags}</p>
                </div>
                <div class="bg-tertiary p-4 rounded-lg">
                    <h4 class="text-lg font-semibold text-accent">Genres</h4>
                    <p class="text-2xl font-bold">${stats.genres}</p>
                </div>
                <div class="bg-tertiary p-4 rounded-lg">
                    <h4 class="text-lg font-semibold text-accent">New Users (30d)</h4>
                    <p class="text-2xl font-bold">${stats.recent_users}</p>
                </div>
            </div>
            
            ${stats.disk_usage.total ? `
                <div class="mb-6">
                    <h4 class="text-lg font-semibold mb-3">Disk Usage</h4>
                    <div class="bg-tertiary p-4 rounded-lg">
                        <div class="flex justify-between mb-2">
                            <span>Used: ${formatBytes(stats.disk_usage.used)}</span>
                            <span>Free: ${formatBytes(stats.disk_usage.free)}</span>
                        </div>
                        <div class="w-full bg-gray-600 rounded-full h-3">
                            <div class="bg-accent h-3 rounded-full" style="width: ${stats.disk_usage.percent_used.toFixed(1)}%"></div>
                        </div>
                        <p class="text-sm text-secondary mt-1">${stats.disk_usage.percent_used.toFixed(1)}% of ${formatBytes(stats.disk_usage.total)} used</p>
                    </div>
                </div>
            ` : ''}
            
            <div>
                <h4 class="text-lg font-semibold mb-3">Running Tasks</h4>
                <div class="space-y-2">
                    <div class="flex justify-between">
                        <span>ROM Scan:</span>
                        <span class="${stats.running_tasks.rom_scan ? 'text-accent' : 'text-secondary'}">${stats.running_tasks.rom_scan ? 'Running' : 'Idle'}</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Metadata Refresh:</span>
                        <span class="${stats.running_tasks.metadata_refresh ? 'text-accent' : 'text-secondary'}">${stats.running_tasks.metadata_refresh ? 'Running' : 'Idle'}</span>
                    </div>
                    <div class="flex justify-between">
                        <span>Image Sync:</span>
                        <span class="${stats.running_tasks.image_sync ? 'text-accent' : 'text-secondary'}">${stats.running_tasks.image_sync ? 'Running' : 'Idle'}</span>
                    </div>
                </div>
            </div>
        `;
        
    } catch (error) {
        content.innerHTML = '<p class="text-danger-color">Failed to load system statistics</p>';
    }
}

function hideSystemStats() {
    document.getElementById('stats-modal').classList.add('hidden');
}

function formatBytes(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function pollTaskStatus(taskName, statusElement) {
    const interval = setInterval(async () => {
        try {
            const response = await fetch('/api/admin/system-stats', {
                headers: {
                    'Authorization': `Bearer ${getCookie('auth_token')}`
                }
            });
            
            const stats = await response.json();
            
            if (!stats.running_tasks[taskName]) {
                statusElement.textContent = `${taskName.replace('_', ' ')} completed`;
                statusElement.className = 'mt-2 text-sm text-accent';
                clearInterval(interval);
            }
        } catch (error) {
            clearInterval(interval);
        }
    }, 2000); // Poll every 2 seconds
}

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return null;
}


// Enhanced token getter with server fallback
async function getAuthToken() {
    // Try the expected cookie name
    let token = getCookie('auth_token');
    if (token) {
        return token;
    }
    
    // Try common alternative names
    const alternativeNames = ['access_token', 'token', 'jwt', 'authToken', 'session'];
    for (const name of alternativeNames) {
        token = getCookie(name);
        if (token) {
            return token;
        }
    }
    
    // If no token in cookies (httponly case), try to get it from server
    try {
        const response = await fetch('/api/auth/token', {
            credentials: 'include'
        });
        
        if (response.ok) {
            const data = await response.json();
            console.log('Got token from server for user:', data.username);
            return data.token;
        }
    } catch (error) {
        console.error('Failed to get token from server:', error);
    }
    
    console.log('No authentication token available');
    return null;
}

// Check if user is still authenticated
async function checkAuthentication() {
    try {
        const token = getCookie('auth_token');
        if (!token) {
            console.log('No auth token found');
            return false;
        }
        
        // Test the token with the debug endpoint
        const response = await fetch('/api/admin/auth-test', {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            },
            credentials: 'include'
        });
        
        if (response.ok) {
            const data = await response.json();
            console.log('Auth check result:', data);
            return data.authenticated && data.is_super;
        }
        
        console.log('Auth check failed with status:', response.status);
        return false;
    } catch (error) {
        console.error('Auth check error:', error);
        return false;
    }
}

// Logging Functions
let allLogs = [];

async function showSystemLogs() {
    const modal = document.getElementById('logs-modal');
    const content = document.getElementById('logs-content');
    
    modal.classList.remove('hidden');
    await refreshLogs();
}

async function refreshLogs() {
    const content = document.getElementById('logs-content');
    content.innerHTML = '<p class="text-secondary">Loading logs...</p>';
    
    try {
        const response = await fetch('/api/admin/system-logs', {
            headers: {
                'Authorization': `Bearer ${getCookie('auth_token')}`
            }
        });
        
        const logs = await response.json();
        allLogs = logs.logs || [];
        displayLogs(allLogs);
        
    } catch (error) {
        content.innerHTML = '<p class="text-danger-color">Failed to load system logs</p>';
    }
}

function displayLogs(logs) {
    const content = document.getElementById('logs-content');
    
    if (logs.length === 0) {
        content.innerHTML = '<p class="text-secondary">No logs found</p>';
        return;
    }
    
    const logsHtml = logs.map(log => {
        const levelColor = {
            'ERROR': 'text-danger-color',
            'WARNING': 'text-warning-color',
            'INFO': 'text-info-color',
            'DEBUG': 'text-secondary'
        }[log.level] || 'text-primary';
        
        return `<div class="mb-2 p-2 border-l-2 border-theme">
            <div class="flex justify-between items-start mb-1">
                <span class="${levelColor} font-semibold">[${log.level}]</span>
                <span class="text-xs text-secondary">${log.timestamp}</span>
            </div>
            <div class="text-primary">${log.module || 'system'}: ${log.message}</div>
            ${log.traceback ? `<pre class="text-xs text-secondary mt-1 overflow-x-auto">${log.traceback}</pre>` : ''}
        </div>`;
    }).join('');
    
    content.innerHTML = logsHtml;
    content.scrollTop = content.scrollHeight;
}

function filterLogs() {
    const filter = document.getElementById('log-level-filter').value;
    const filteredLogs = filter ? allLogs.filter(log => log.level === filter) : allLogs;
    displayLogs(filteredLogs);
}

function hideSystemLogs() {
    document.getElementById('logs-modal').classList.add('hidden');
}

async function downloadLogs(logType) {
    try {
        // Use direct link with token for better browser compatibility
        const token = getCookie('auth_token');
        const downloadUrl = `/api/admin/download-logs?type=${logType}&token=${encodeURIComponent(token)}`;
        
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = downloadUrl;
        a.download = `dosvault_${logType}_logs_${new Date().toISOString().split('T')[0]}.log`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        
    } catch (error) {
        alert('Failed to download logs');
    }
}

async function clearLogs() {
    if (!confirm('This will delete old log files. Continue?')) {
        return;
    }
    
    try {
        const response = await fetch('/api/admin/clear-logs', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${getCookie('auth_token')}`
            }
        });
        
        const result = await response.json();
        alert(result.message || 'Logs cleared successfully');
        
    } catch (error) {
        alert('Failed to clear logs');
    }
}

// Live Log Streaming
let streamInterval = null;
let lastLogTimestamp = null;
let streamPaused = false;
let streamLevelFilter = '';

function toggleLogStream() {
    const modal = document.getElementById('stream-modal');
    const btn = document.getElementById('stream-btn');
    const text = document.getElementById('stream-text');
    
    if (streamInterval) {
        // Stop streaming
        clearInterval(streamInterval);
        streamInterval = null;
        modal.classList.add('hidden');
        text.textContent = 'Start Log Stream';
        btn.className = 'w-full bg-accent hover:bg-opacity-80 px-4 py-2 rounded font-medium transition-colors';
    } else {
        // Start streaming
        modal.classList.remove('hidden');
        text.textContent = 'Stop Log Stream';
        btn.className = 'w-full bg-danger-color hover:bg-opacity-80 px-4 py-2 rounded font-medium transition-colors';
        startLogStream();
    }
}

async function startLogStream() {
    const content = document.getElementById('stream-content');
    const status = document.getElementById('stream-status');
    
    content.innerHTML = '<p class="text-secondary">Starting log stream...</p>';
    status.textContent = 'Connecting...';
    status.className = 'text-sm px-2 py-1 rounded bg-warning-color text-secondary';
    
    // Test token retrieval first
    try {
        const token = await getAuthToken();
        if (!token) {
            content.innerHTML = '<p class="text-danger-color">No authentication token found. Try refreshing the page.</p>';
            status.textContent = 'No Token';
            status.className = 'text-sm px-2 py-1 rounded bg-danger-color text-secondary';
            return;
        }
        
        console.log('Token retrieved successfully, starting stream...');
        content.innerHTML = '<p class="text-secondary">Token found, connecting to log stream...</p>';
    } catch (error) {
        content.innerHTML = `<p class="text-danger-color">Token error: ${error.message}</p>`;
        status.textContent = 'Token Error';
        status.className = 'text-sm px-2 py-1 rounded bg-danger-color text-secondary';
        return;
    }
    
    // Reset timestamp to get recent logs
    lastLogTimestamp = new Date(Date.now() - 30000).toISOString(); // Start from 30 seconds ago
    
    // Try the first fetch
    await fetchStreamLogs();
    
    // Only start the interval if the first fetch succeeded
    if (!content.innerHTML.includes('[STREAM ERROR]')) {
        streamInterval = setInterval(async () => {
            if (!streamPaused) {
                await fetchStreamLogs();
            }
        }, 2000);
        
        status.textContent = 'Connected';
        status.className = 'text-sm px-2 py-1 rounded bg-accent text-secondary';
    }
}

async function fetchStreamLogs() {
    try {
        const token = await getAuthToken();
        if (!token) {
            throw new Error('No authentication token found');
        }
        
        let url = '/api/admin/system-logs?limit=50';
        if (lastLogTimestamp) {
            url += `&since=${encodeURIComponent(lastLogTimestamp)}`;
        }
        
        console.log('Making request to:', url);
        console.log('Using token:', token.substring(0, 20) + '...');
        
        const response = await fetch(url, {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            },
            credentials: 'include'
        });
        
        console.log('Response status:', response.status);
        console.log('Response headers:', Object.fromEntries(response.headers.entries()));
        
        if (response.status === 401) {
            // Let's see what the server says about this token
            console.log('401 error, testing token with auth-test endpoint...');
            try {
                const testResponse = await fetch('/api/admin/auth-test', {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    },
                    credentials: 'include'
                });
                const testData = await testResponse.json();
                console.log('Auth test result:', testData);
            } catch (e) {
                console.log('Auth test failed:', e);
            }
            
            throw new Error('Authentication expired - please refresh the page');
        }
        
        if (!response.ok) {
            const errorText = await response.text();
            console.log('Error response:', errorText);
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        const data = await response.json();
        
        if (data.error) {
            throw new Error(data.error);
        }
        
        const logs = data.logs || [];
        
        if (logs.length > 0) {
            appendStreamLogs(logs);
            // Update last timestamp to the newest log
            const timestamps = logs.map(log => new Date(log.timestamp));
            lastLogTimestamp = new Date(Math.max(...timestamps)).toISOString();
            
            // Update status to show activity
            const status = document.getElementById('stream-status');
            status.textContent = 'Active';
            status.className = 'text-sm px-2 py-1 rounded bg-accent text-secondary';
        }
        
    } catch (error) {
        console.error('Error fetching stream logs:', error);
        const status = document.getElementById('stream-status');
        const content = document.getElementById('stream-content');
        
        status.textContent = 'Error';
        status.className = 'text-sm px-2 py-1 rounded bg-danger-color text-secondary';
        
        // Add error message to the log content
        const errorElement = document.createElement('div');
        errorElement.className = 'mb-2 p-2 border-l-2 border-danger-color text-sm bg-danger-color bg-opacity-10';
        errorElement.innerHTML = `
            <div class="text-danger-color font-semibold">[STREAM ERROR]</div>
            <div class="text-primary">${error.message}</div>
            <div class="text-secondary text-xs mt-1">${new Date().toLocaleTimeString()}</div>
        `;
        content.appendChild(errorElement);
        content.scrollTop = content.scrollHeight;
        
        // If it's an auth error, stop the stream
        if (error.message.includes('Authentication') || error.message.includes('401')) {
            if (streamInterval) {
                clearInterval(streamInterval);
                streamInterval = null;
                document.getElementById('stream-text').textContent = 'Start Log Stream';
                document.getElementById('stream-btn').className = 'w-full bg-accent hover:bg-opacity-80 px-4 py-2 rounded font-medium transition-colors';
            }
        }
    }
}

function appendStreamLogs(logs) {
    const content = document.getElementById('stream-content');
    
    // Clear "connecting" message if it's the first logs
    if (content.children.length === 1 && content.children[0].textContent.includes('Connecting')) {
        content.innerHTML = '';
    }
    
    logs.forEach(log => {
        // Apply level filter
        if (streamLevelFilter && !shouldShowLogLevel(log.level, streamLevelFilter)) {
            return;
        }
        
        const levelColor = {
            'ERROR': 'text-danger-color',
            'WARNING': 'text-warning-color',
            'INFO': 'text-info-color',
            'DEBUG': 'text-secondary'
        }[log.level] || 'text-primary';
        
        const logElement = document.createElement('div');
        logElement.className = 'mb-1 p-1 border-l-2 border-theme text-xs';
        logElement.innerHTML = `
            <div class="flex justify-between items-start">
                <span class="${levelColor} font-semibold">[${log.level}]</span>
                <span class="text-xs text-secondary">${new Date(log.timestamp).toLocaleTimeString()}</span>
            </div>
            <div class="text-primary">${log.module || 'system'}: ${log.message}</div>
            ${log.traceback ? `<pre class="text-xs text-secondary mt-1 overflow-x-auto">${log.traceback}</pre>` : ''}
        `;
        
        content.appendChild(logElement);
    });
    
    // Auto-scroll to bottom
    content.scrollTop = content.scrollHeight;
    
    // Limit the number of log entries to prevent memory issues
    while (content.children.length > 500) {
        content.removeChild(content.firstChild);
    }
}

function shouldShowLogLevel(logLevel, filter) {
    const levels = ['DEBUG', 'INFO', 'WARNING', 'ERROR'];
    const logIndex = levels.indexOf(logLevel);
    
    switch (filter) {
        case 'ERROR':
            return logLevel === 'ERROR';
        case 'WARNING':
            return logIndex >= 2; // WARNING and ERROR
        case 'INFO':
            return logIndex >= 1; // INFO, WARNING, and ERROR
        default:
            return true; // Show all
    }
}

function updateStreamFilter() {
    streamLevelFilter = document.getElementById('stream-level-filter').value;
    // Re-filter existing logs
    if (streamInterval) {
        const content = document.getElementById('stream-content');
        const logs = Array.from(content.children);
        logs.forEach(logElement => {
            const levelSpan = logElement.querySelector('[class*="text-"][class*="-color"]');
            if (levelSpan) {
                const level = levelSpan.textContent.replace('[', '').replace(']', '');
                logElement.style.display = shouldShowLogLevel(level, streamLevelFilter) ? 'block' : 'none';
            }
        });
    }
}

function toggleStreamPause() {
    const btn = document.getElementById('pause-btn');
    streamPaused = !streamPaused;
    btn.textContent = streamPaused ? 'Resume' : 'Pause';
    btn.className = streamPaused 
        ? 'px-3 py-1 bg-accent hover:bg-opacity-80 rounded text-sm font-medium transition-colors'
        : 'px-3 py-1 bg-tertiary hover:bg-opacity-80 rounded text-sm font-medium transition-colors';
}

function clearStreamLogs() {
    document.getElementById('stream-content').innerHTML = '<p class="text-secondary">Log stream cleared...</p>';
}

function hideLogStream() {
    if (streamInterval) {
        clearInterval(streamInterval);
        streamInterval = null;
    }
    document.getElementById('stream-modal').classList.add('hidden');
    document.getElementById('stream-text').textContent = 'Start Log Stream';
    document.getElementById('stream-btn').className = 'w-full bg-accent hover:bg-opacity-80 px-4 py-2 rounded font-medium transition-colors';
}

// Manual authentication test function
async function tryManualAuth() {
    const content = document.getElementById('stream-content');
    const token = getCookie('auth_token');
    
    content.innerHTML = '<p class="text-secondary">Testing authentication manually...</p>';
    
    console.log('Manual auth test - Token:', token);
    
    try {
        // Try both approaches: with Authorization header and without
        const tests = [
            {
                name: 'With Authorization Header',
                options: {
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    },
                    credentials: 'include'
                }
            },
            {
                name: 'Cookie Only',
                options: {
                    credentials: 'include'
                }
            }
        ];
        
        let results = '<div class="text-sm space-y-2">';
        
        for (const test of tests) {
            try {
                console.log(`Testing: ${test.name}`);
                const response = await fetch('/api/admin/auth-test', test.options);
                const data = await response.json();
                
                console.log(`${test.name} result:`, data);
                
                results += `
                    <div class="p-2 border border-theme rounded">
                        <div class="font-semibold">${test.name}:</div>
                        <div class="text-xs">Status: ${response.status}</div>
                        <div class="text-xs">Authenticated: ${data.authenticated || 'false'}</div>
                        <div class="text-xs">Is Super: ${data.is_super || 'false'}</div>
                        <div class="text-xs">Username: ${data.username || 'none'}</div>
                        <div class="text-xs">Role: ${data.role || 'none'}</div>
                        <div class="text-xs">Auth Header Present: ${data.auth_header_present || 'false'}</div>
                        <div class="text-xs">Cookie Present: ${data.cookie_present || 'false'}</div>
                    </div>
                `;
            } catch (error) {
                console.error(`${test.name} error:`, error);
                results += `
                    <div class="p-2 border border-danger-color rounded">
                        <div class="font-semibold text-danger-color">${test.name}: Error</div>
                        <div class="text-xs">${error.message}</div>
                    </div>
                `;
            }
        }
        
        results += '</div>';
        content.innerHTML = results;
        
    } catch (error) {
        console.error('Manual auth test error:', error);
        content.innerHTML = `<p class="text-danger-color">Manual test failed: ${error.message}</p>`;
    }
}

// Configuration Editor Functions
let currentConfig = null;

async function showConfigEditor() {
    const modal = document.getElementById('config-modal');
    modal.classList.remove('hidden');
    
    await loadConfiguration();
}

function hideConfigEditor() {
    document.getElementById('config-modal').classList.add('hidden');
}

async function loadConfiguration() {
    const status = document.getElementById('config-status');
    status.innerHTML = '<span class="text-secondary">Loading configuration...</span>';
    
    try {
        const token = await getAuthToken();
        const response = await fetch('/api/admin/config', {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            },
            credentials: 'include'
        });
        
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }
        
        currentConfig = await response.json();
        populateConfigForm(currentConfig);
        
        status.innerHTML = '<span class="text-accent">Configuration loaded successfully</span>';
    } catch (error) {
        status.innerHTML = `<span class="text-danger-color">Failed to load configuration: ${error.message}</span>`;
    }
}

function populateConfigForm(config) {
    // Populate form fields
    document.getElementById('config-host').value = config.host || '';
    document.getElementById('config-port').value = config.port || '';
    document.getElementById('config-rom-path').value = config.rom_path || '';
    document.getElementById('config-images-path').value = config.images_path || '';
    document.getElementById('config-igdb-client-id').value = config.igdb_client_id || '';
    document.getElementById('config-igdb-secret').value = config.igdb_api_key || '';
    
    // Populate JSON editor
    document.getElementById('config-json').value = JSON.stringify(config, null, 2);
}

function collectConfigFromForm() {
    const config = {
        host: document.getElementById('config-host').value,
        port: parseInt(document.getElementById('config-port').value) || 8080,
        rom_path: document.getElementById('config-rom-path').value,
        images_path: document.getElementById('config-images-path').value,
        igdb_client_id: document.getElementById('config-igdb-client-id').value,
        igdb_api_key: document.getElementById('config-igdb-secret').value
    };
    
    // Try to merge with JSON editor content
    try {
        const jsonConfig = JSON.parse(document.getElementById('config-json').value);
        return { ...jsonConfig, ...config };
    } catch (error) {
        return config;
    }
}

async function saveConfig() {
    const status = document.getElementById('config-status');
    status.innerHTML = '<span class="text-warning-color">Saving configuration...</span>';
    
    try {
        const config = collectConfigFromForm();
        const token = await getAuthToken();
        
        const response = await fetch('/api/admin/config', {
            method: 'POST',
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'application/json'
            },
            credentials: 'include',
            body: JSON.stringify(config)
        });
        
        if (!response.ok) {
            const errorText = await response.text();
            throw new Error(`HTTP ${response.status}: ${errorText}`);
        }
        
        const result = await response.json();
        status.innerHTML = '<span class="text-accent">Configuration saved successfully! Restart required for changes to take effect.</span>';
        
        // Refresh the configuration display
        await loadConfiguration();
        
    } catch (error) {
        status.innerHTML = `<span class="text-danger-color">Failed to save configuration: ${error.message}</span>`;
    }
}

function resetConfig() {
    if (currentConfig) {
        populateConfigForm(currentConfig);
        document.getElementById('config-status').innerHTML = '<span class="text-secondary">Configuration reset to last saved values</span>';
    }
}

function formatJSON() {
    try {
        const jsonText = document.getElementById('config-json').value;
        const parsed = JSON.parse(jsonText);
        document.getElementById('config-json').value = JSON.stringify(parsed, null, 2);
        document.getElementById('config-status').innerHTML = '<span class="text-accent">JSON formatted successfully</span>';
    } catch (error) {
        document.getElementById('config-status').innerHTML = '<span class="text-danger-color">Invalid JSON: ' + error.message + '</span>';
    }
}
</script>
{% endblock %}