<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebQuiz File Manager</title>
    <style>
        :root {
            --bg-color: #f5f5f5;
            --container-bg: white;
            --text-color: #333;
            --border-color: #ddd;
            --button-bg: #007bff;
            --button-hover: #0056b3;
            --success-bg: #d4edda;
            --success-border: #c3e6cb;
            --success-color: #155724;
            --error-bg: #f8d7da;
            --error-border: #f5c6cb;
            --error-color: #721c24;
            --warning-bg: #fff3cd;
            --warning-border: #ffeaa7;
            --warning-color: #856404;
            --disabled-bg: #ccc;
            --light-bg: #fafafa;
            --success-green: #28a745;
            --success-green-hover: #218838;
            --danger-red: #dc3545;
            --danger-red-hover: #c82333;
            --muted-gray: #6c757d;
            --light-gray: #aaa;
            --text-muted: #666;
            --white: white;
            --shadow: rgba(0,0,0,0.1);
            --modal-overlay: rgba(0,0,0,0.5);
            --tab-active: #007bff;
            --tab-inactive: #6c757d;
        }

        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: var(--bg-color);
            color: var(--text-color);
        }

        .container {
            background: var(--container-bg);
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px var(--shadow);
            margin-bottom: 20px;
        }

        h1 {
            text-align: center;
            color: var(--text-color);
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input[type="password"], input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box;
        }

        button {
            background: var(--button-bg);
            color: var(--white);
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 5px;
        }

        button:hover {
            background: var(--button-hover);
        }

        button:disabled {
            background: var(--disabled-bg);
            cursor: not-allowed;
        }

        .hidden {
            display: none;
        }

        .message {
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }

        .success {
            background: var(--success-bg);
            border: 1px solid var(--success-border);
            color: var(--success-color);
        }

        .error {
            background: var(--error-bg);
            border: 1px solid var(--error-border);
            color: var(--error-color);
        }

        .warning {
            background: var(--warning-bg);
            border: 1px solid var(--warning-border);
            color: var(--warning-color);
        }

        /* Tabs */
        .tabs {
            display: flex;
            border-bottom: 2px solid var(--border-color);
            margin-bottom: 20px;
        }

        .tab {
            padding: 12px 24px;
            cursor: pointer;
            background: transparent;
            border: none;
            border-bottom: 3px solid transparent;
            font-size: 16px;
            font-weight: 500;
            color: var(--tab-inactive);
            transition: all 0.3s ease;
            margin: 0;
        }

        .tab:hover {
            background: var(--light-bg);
            color: var(--text-color);
        }

        .tab.active {
            color: var(--tab-active);
            border-bottom-color: var(--tab-active);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .file-grid {
            display: grid;
            gap: 10px;
        }

        .file-item {
            display: grid;
            grid-template-columns: 1fr auto auto auto;
            align-items: center;
            padding: 15px;
            background: var(--light-bg);
            border: 1px solid var(--border-color);
            border-radius: 5px;
            gap: 15px;
        }

        .file-item:hover {
            background: #f0f8ff;
            border-color: var(--button-bg);
        }

        .file-info {
            display: grid;
            gap: 5px;
        }

        .file-name {
            font-weight: bold;
            color: var(--text-color);
            word-break: break-word;
        }

        .file-meta {
            font-size: 0.9em;
            color: var(--text-muted);
        }

        .file-actions {
            display: flex;
            gap: 5px;
        }

        .btn-small {
            padding: 6px 12px;
            font-size: 14px;
            min-width: auto;
        }

        .btn-view {
            background: var(--success-green);
        }

        .btn-view:hover {
            background: var(--success-green-hover);
        }

        .btn-download {
            background: var(--button-bg);
        }

        .btn-download:hover {
            background: var(--button-hover);
        }

        .controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .search-box {
            flex: 1;
            min-width: 200px;
            max-width: 400px;
        }

        .refresh-btn {
            background: var(--muted-gray);
        }

        .refresh-btn:hover {
            background: #545b62;
        }

        .back-link {
            text-align: center;
            margin-top: 20px;
        }

        .back-link a {
            color: var(--button-bg);
            text-decoration: none;
        }

        .back-link a:hover {
            text-decoration: underline;
        }

        .empty-state {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-muted);
        }

        .empty-state .icon {
            font-size: 48px;
            margin-bottom: 10px;
        }

        .actions {
            text-align: center;
            margin-top: 20px;
        }

        /* File viewer modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--modal-overlay);
        }

        .modal-content {
            background-color: var(--container-bg);
            margin: 2% auto;
            padding: 20px;
            border-radius: 10px;
            width: 95%;
            max-width: 1000px;
            height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
            flex-shrink: 0;
        }

        .modal-body {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .file-content {
            flex: 1;
            overflow: auto;
            background: #f8f9fa;
            border: 1px solid var(--border-color);
            padding: 15px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.4;
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        .close {
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            color: var(--light-gray);
        }

        .close:hover {
            color: var(--text-color);
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: var(--text-muted);
        }

        /* CSV Table Styles */
        .csv-table-container {
            flex: 1;
            overflow: auto;
            background: var(--white);
            border: 1px solid var(--border-color);
        }

        .csv-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        .csv-table th,
        .csv-table td {
            border: 1px solid var(--border-color);
            padding: 8px 12px;
            text-align: left;
            white-space: nowrap;
        }

        .csv-table th {
            background: var(--button-bg);
            color: var(--white);
            position: sticky;
            top: 0;
            font-weight: bold;
        }

        .csv-table tr:nth-child(even) {
            background: var(--light-bg);
        }

        .csv-table tr:hover {
            background: #e8f4ff;
        }

        @media (max-width: 768px) {
            .file-item {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .file-actions {
                justify-content: center;
            }

            .controls {
                flex-direction: column;
                align-items: stretch;
            }

            .search-box {
                max-width: none;
            }

            .tabs {
                overflow-x: auto;
            }

            .csv-table th,
            .csv-table td {
                padding: 6px 8px;
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📁 WebQuiz File Manager</h1>

        <!-- Authentication Section -->
        <div id="auth-section">
            <div class="form-group">
                <label for="master-key">Master Key:</label>
                <input type="password" id="master-key" placeholder="Enter master key">
            </div>
            <div class="actions">
                <button onclick="authenticate()">Login</button>
            </div>
        </div>

        <!-- File Manager Panel (hidden until authenticated) -->
        <div id="files-panel" class="hidden">

            <div class="controls">
                <div class="search-box">
                    <input type="text" id="search-input" placeholder="Search files..." onkeyup="filterFiles()">
                </div>
                <button class="refresh-btn" onclick="refreshFiles()">🔄 Refresh</button>
            </div>

            <!-- Tabs -->
            <div class="tabs">
                <button class="tab active" data-tab="csv" onclick="switchTab('csv')">📊 CSV Files</button>
                <button class="tab" data-tab="logs" onclick="switchTab('logs')">📋 Log Files</button>
                <button class="tab" data-tab="quizzes" onclick="switchTab('quizzes')">📝 Quiz Files</button>
                <button class="tab" data-tab="config" onclick="switchTab('config')" id="config-tab-button" style="display: none;">⚙️ Config</button>
            </div>

            <!-- CSV Tab -->
            <div id="csv-tab" class="tab-content active">
                <div id="csv-files" class="file-grid">
                    <div class="loading">Loading CSV files...</div>
                </div>
            </div>

            <!-- Logs Tab -->
            <div id="logs-tab" class="tab-content">
                <div id="logs-files" class="file-grid">
                    <div class="loading">Loading log files...</div>
                </div>
            </div>

            <!-- Quiz Files Tab -->
            <div id="quizzes-tab" class="tab-content">
                <div id="quizzes-files" class="file-grid">
                    <div class="loading">Loading quiz files...</div>
                </div>
            </div>

            <!-- Config Tab -->
            <div id="config-tab" class="tab-content">
                <div class="warning message">
                    ⚠️ <strong>Warning:</strong> Changes will be applied after server restart
                </div>

                <div class="form-group">
                    <label for="config-editor">Configuration File: <span id="config-file-path" style="font-weight: normal; color: var(--text-muted);"></span></label>
                    <textarea id="config-editor" rows="25" style="width: 100%; font-family: 'Courier New', monospace; font-size: 14px; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; box-sizing: border-box;"></textarea>
                </div>

                <div class="actions">
                    <button onclick="saveConfig()" class="save-config-btn">💾 Save Configuration</button>
                </div>

                <div id="config-message-area"></div>
            </div>

            <div class="back-link">
                <a href="/admin/">← Back to Admin Panel</a>
                <span style="margin: 0 10px;">|</span>
                <a href="/">🏠 Quiz Home</a>
                <span style="margin: 0 10px;">|</span>
                <a href="/live-stats/">📊 Live Stats</a>
            </div>
        </div>

        <!-- Messages -->
        <div id="message-area"></div>
    </div>

    <!-- File Viewer Modal -->
    <div id="file-viewer-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="file-viewer-title">File Viewer</h2>
                <span class="close" onclick="closeFileViewer()">&times;</span>
            </div>
            <div class="modal-body">
                <div id="file-content" class="file-content">
                    <div class="loading">Loading file content...</div>
                </div>
                <div id="file-content-table" class="csv-table-container hidden">
                </div>
            </div>
        </div>
    </div>

    <!-- Quiz Editor Modal -->
    <div id="quiz-editor-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="quiz-editor-title">Edit Quiz</h2>
                <span class="close" onclick="closeQuizEditor()">&times;</span>
            </div>
            <div class="modal-body">
                <div class="warning message">
                    ⚠️ <strong>Note:</strong> Changes will create a backup. If this is the active quiz, it will be reloaded.
                </div>
                <div class="form-group">
                    <label for="quiz-editor-content">Quiz YAML Content:</label>
                    <textarea id="quiz-editor-content" rows="20" style="width: 100%; font-family: 'Courier New', monospace; font-size: 14px; padding: 10px; border: 1px solid var(--border-color); border-radius: 5px; box-sizing: border-box;"></textarea>
                </div>
                <div class="actions">
                    <button onclick="validateQuizYAML()" class="btn-view">✅ Validate YAML</button>
                    <button onclick="saveQuizFile()">💾 Save</button>
                    <button onclick="closeQuizEditor()" style="background: var(--muted-gray);">❌ Cancel</button>
                </div>
                <div id="quiz-editor-message-area"></div>
            </div>
        </div>
    </div>

    <script>
        let currentMasterKey = '';
        let allFiles = { logs: [], csv: [], quizzes: [] };
        let currentTab = 'csv';
        let currentEditingQuiz = '';
        let currentCsvContent = '';
        let currentCsvView = 'text';
        let currentViewingFileType = '';

        function switchTab(tabName) {
            currentTab = tabName;

            // Update tab buttons
            document.querySelectorAll('.tab').forEach(tab => {
                if (tab.dataset.tab === tabName) {
                    tab.classList.add('active');
                } else {
                    tab.classList.remove('active');
                }
            });

            // Update tab content
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            document.getElementById(`${tabName}-tab`).classList.add('active');

            // Clear search when switching tabs
            document.getElementById('search-input').value = '';
            filterFiles();
        }

        async function authenticate() {
            const masterKey = document.getElementById('master-key').value.trim();
            if (!masterKey) {
                showMessage('Please enter master key', 'error');
                return;
            }

            try {
                const response = await fetch('/api/admin/auth', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({master_key: masterKey}),
                    credentials: 'same-origin'  // Include cookies for session
                });

                const data = await response.json();

                if (response.ok) {
                    currentMasterKey = 'session';  // Session is now managed by cookie
                    document.getElementById('auth-section').style.display = 'none';
                    document.getElementById('files-panel').classList.remove('hidden');
                    showMessage('Authentication successful!', 'success');
                    await initializePanelData();
                } else {
                    showMessage(data.error || 'Authentication failed', 'error');
                }
            } catch (error) {
                showMessage('Connection error: ' + error.message, 'error');
            }
        }

        async function loadFiles() {
            try {
                const response = await fetch('/api/files/list', {
                    credentials: 'same-origin'
                });

                const data = await response.json();

                if (response.ok) {
                    allFiles = data;
                    displayFiles();
                } else {
                    showMessage(data.error || 'Failed to load files', 'error');
                }
            } catch (error) {
                showMessage('Error loading files: ' + error.message, 'error');
            }
        }

        function displayFiles() {
            displayFileSection('csv', allFiles.csv);
            displayFileSection('logs', allFiles.logs);
            displayFileSection('quizzes', allFiles.quizzes);
        }

        function displayFileSection(type, files) {
            const container = document.getElementById(`${type}-files`);

            if (files.length === 0) {
                const icons = {logs: '📋', csv: '📊', quizzes: '📝'};
                const labels = {logs: 'log', csv: 'CSV', quizzes: 'quiz'};
                container.innerHTML = `
                    <div class="empty-state">
                        <div class="icon">${icons[type] || '📄'}</div>
                        <div>No ${labels[type] || type} files found</div>
                    </div>
                `;
                return;
            }

            let html = '';
            files.forEach(file => {
                const size = formatFileSize(file.size);
                const date = formatDate(file.modified);

                // Different buttons based on file type
                let actionButtons;
                if (type === 'quizzes') {
                    actionButtons = `<button class="btn-small btn-view" onclick="editQuizFile('${file.name}')">✏️ Edit</button>
                       <button class="btn-small btn-download" onclick="downloadFile('${type}', '${file.name}')">💾 Download</button>`;
                } else if (type === 'csv') {
                    // CSV files get Text and Table view buttons
                    actionButtons = `<button class="btn-small btn-view" onclick="viewFile('${type}', '${file.name}', 'text')">📄 Text</button>
                       <button class="btn-small btn-view" onclick="viewFile('${type}', '${file.name}', 'table')">📊 Table</button>
                       <button class="btn-small btn-download" onclick="downloadFile('${type}', '${file.name}')">💾 Download</button>`;
                } else {
                    actionButtons = `<button class="btn-small btn-view" onclick="viewFile('${type}', '${file.name}', 'text')">👁️ View</button>
                       <button class="btn-small btn-download" onclick="downloadFile('${type}', '${file.name}')">💾 Download</button>`;
                }

                html += `
                    <div class="file-item" data-filename="${file.name.toLowerCase()}">
                        <div class="file-info">
                            <div class="file-name">${file.name}</div>
                            <div class="file-meta">Size: ${size} | Modified: ${date}</div>
                        </div>
                        <div class="file-actions">
                            ${actionButtons}
                        </div>
                    </div>
                `;
            });

            container.innerHTML = html;
        }

        async function viewFile(type, filename, viewMode = 'text') {
            try {
                currentViewingFileType = type;
                currentCsvContent = '';
                currentCsvView = viewMode;

                const textContent = document.getElementById('file-content');
                const tableContent = document.getElementById('file-content-table');

                document.getElementById('file-viewer-title').textContent = `${filename}`;
                textContent.innerHTML = '<div class="loading">Loading file content...</div>';
                tableContent.innerHTML = '';
                document.getElementById('file-viewer-modal').style.display = 'block';

                // Show appropriate view based on viewMode
                if (viewMode === 'table') {
                    textContent.classList.add('hidden');
                    tableContent.classList.remove('hidden');
                    tableContent.innerHTML = '<div class="loading">Loading file content...</div>';
                } else {
                    textContent.classList.remove('hidden');
                    tableContent.classList.add('hidden');
                }

                const response = await fetch(`/api/files/${type}/view/${encodeURIComponent(filename)}`, {
                    credentials: 'same-origin'
                });

                if (response.ok) {
                    const content = await response.text();

                    if (viewMode === 'table' && type === 'csv') {
                        // Parse and render as table
                        const parsedData = parseCSV(content);
                        tableContent.innerHTML = renderCsvTable(parsedData);
                    } else {
                        // Show as text
                        textContent.textContent = content;
                    }
                } else {
                    const data = await response.json();
                    const errorHtml = `<div class="error">Error: ${data.error}</div>`;
                    if (viewMode === 'table') {
                        tableContent.innerHTML = errorHtml;
                    } else {
                        textContent.innerHTML = errorHtml;
                    }
                }
            } catch (error) {
                const errorHtml = `<div class="error">Error loading file: ${error.message}</div>`;
                if (currentCsvView === 'table') {
                    document.getElementById('file-content-table').innerHTML = errorHtml;
                } else {
                    document.getElementById('file-content').innerHTML = errorHtml;
                }
            }
        }

        function parseCSV(text) {
            const lines = text.split('\n');
            const result = [];

            for (let i = 0; i < lines.length; i++) {
                const line = lines[i].trim();
                if (!line) continue;

                const row = [];
                let inQuotes = false;
                let currentField = '';

                for (let j = 0; j < line.length; j++) {
                    const char = line[j];
                    const nextChar = line[j + 1];

                    if (inQuotes) {
                        if (char === '"' && nextChar === '"') {
                            // Escaped quote
                            currentField += '"';
                            j++;
                        } else if (char === '"') {
                            // End of quoted field
                            inQuotes = false;
                        } else {
                            currentField += char;
                        }
                    } else {
                        if (char === '"') {
                            // Start of quoted field
                            inQuotes = true;
                        } else if (char === ',') {
                            // Field separator
                            row.push(currentField);
                            currentField = '';
                        } else {
                            currentField += char;
                        }
                    }
                }

                // Add the last field
                row.push(currentField);
                result.push(row);
            }

            return result;
        }

        function renderCsvTable(data) {
            if (data.length === 0) {
                return '<div class="empty-state"><div class="icon">📊</div><div>No data to display</div></div>';
            }

            let html = '<table class="csv-table">';

            // Header row
            html += '<thead><tr>';
            data[0].forEach(cell => {
                html += `<th>${escapeHtml(cell)}</th>`;
            });
            html += '</tr></thead>';

            // Data rows
            html += '<tbody>';
            for (let i = 1; i < data.length; i++) {
                html += '<tr>';
                data[i].forEach(cell => {
                    html += `<td title="${escapeHtml(cell)}">${escapeHtml(cell)}</td>`;
                });
                html += '</tr>';
            }
            html += '</tbody></table>';

            return html;
        }

        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

        async function downloadFile(type, filename) {
            try {
                const response = await fetch(`/api/files/${type}/download/${encodeURIComponent(filename)}`, {
                    credentials: 'same-origin'
                });

                if (response.ok) {
                    const blob = await response.blob();
                    const url = window.URL.createObjectURL(blob);
                    const link = document.createElement('a');
                    link.href = url;
                    link.download = filename;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    window.URL.revokeObjectURL(url);
                    showMessage(`Downloaded ${filename}`, 'success');
                } else {
                    const data = await response.json();
                    showMessage(`Download failed: ${data.error}`, 'error');
                }
            } catch (error) {
                showMessage(`Download error: ${error.message}`, 'error');
            }
        }

        function closeFileViewer() {
            document.getElementById('file-viewer-modal').style.display = 'none';
            document.getElementById('file-content-table').innerHTML = '';
            currentCsvContent = '';
            currentCsvView = 'text';
            currentViewingFileType = '';
        }

        function filterFiles() {
            const searchTerm = document.getElementById('search-input').value.toLowerCase().trim();
            const container = document.getElementById(`${currentTab}-files`);
            const fileItems = container.querySelectorAll('.file-item');

            fileItems.forEach(item => {
                const filename = item.dataset.filename;
                if (!searchTerm || filename.includes(searchTerm)) {
                    item.style.display = 'grid';
                } else {
                    item.style.display = 'none';
                }
            });
        }

        async function refreshFiles() {
            await loadFiles();
            showMessage('Files refreshed', 'success');
        }

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

        function formatDate(isoDate) {
            const date = new Date(isoDate);
            return date.toLocaleString();
        }

        function showMessage(text, type) {
            const messageArea = document.getElementById('message-area');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${type}`;
            messageDiv.textContent = text;

            messageArea.appendChild(messageDiv);

            // Auto-remove after 5 seconds
            setTimeout(() => {
                if (messageDiv.parentNode) {
                    messageDiv.parentNode.removeChild(messageDiv);
                }
            }, 5000);
        }

        // Allow Enter key to authenticate
        document.getElementById('master-key').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                authenticate();
            }
        });

        // Config editor functions
        function initializeConfigEditor() {
            // Only show config tab if a config file was provided
            if (typeof CONFIG_PATH !== 'undefined' && CONFIG_PATH !== null) {
                document.getElementById('config-tab-button').style.display = 'block';
                if (typeof CONFIG_CONTENT !== 'undefined' && CONFIG_CONTENT !== null) {
                    document.getElementById('config-editor').value = CONFIG_CONTENT;
                }
                document.getElementById('config-file-path').textContent = CONFIG_PATH;
            }
        }

        async function saveConfig() {
            const content = document.getElementById('config-editor').value;
            const messageArea = document.getElementById('config-message-area');
            messageArea.innerHTML = '';

            try {
                const response = await fetch('/api/admin/config', {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ content }),
                    credentials: 'same-origin'
                });

                const data = await response.json();

                if (response.ok) {
                    messageArea.innerHTML = `<div class="message success">${data.message}</div>`;
                } else {
                    let errorMessage = data.error || 'Failed to save configuration';
                    if (data.errors && data.errors.length > 0) {
                        errorMessage += ':<ul>' + data.errors.map(err => `<li>${err}</li>`).join('') + '</ul>';
                    }
                    messageArea.innerHTML = `<div class="message error">${errorMessage}</div>`;
                }
            } catch (error) {
                messageArea.innerHTML = `<div class="message error">Error: ${error.message}</div>`;
            }
        }

        // Initialize config editor when panel is loaded
        function initializePanelData() {
            loadFiles();
            initializeConfigEditor();
        }

        // Auto-authenticate function that shows files panel
        function showFilesPanel(message) {
            document.getElementById('auth-section').style.display = 'none';
            document.getElementById('files-panel').classList.remove('hidden');
            showMessage(message, 'success');
            initializePanelData();
        }

        // Check for existing session cookie on page load
        async function checkExistingSession() {
            try {
                const response = await fetch('/api/admin/check-session', {
                    method: 'GET',
                    credentials: 'same-origin'
                });

                if (response.ok) {
                    // Valid session found - auto-authenticate
                    currentMasterKey = 'session'; // Placeholder, actual auth is via cookie
                    showFilesPanel('Session restored');
                    return true;
                }
            } catch (error) {
                // Session check failed, fall through to other auth methods
            }
            return false;
        }

        // Initialize authentication
        (async function initAuth() {
            // First, try to restore existing session
            const hasSession = await checkExistingSession();
            if (hasSession) return;

            // Fall back to trusted IP auto-authentication
            if (typeof IS_TRUSTED_IP !== 'undefined' && IS_TRUSTED_IP) {
                currentMasterKey = 'trusted-ip';
                showFilesPanel('Auto-authenticated from trusted IP');
            }
        })();

        // Quiz Editor Functions
        async function editQuizFile(filename) {
            try {
                currentEditingQuiz = filename;
                document.getElementById('quiz-editor-title').textContent = `Edit Quiz: ${filename}`;
                document.getElementById('quiz-editor-content').value = '';
                document.getElementById('quiz-editor-message-area').innerHTML = '';
                document.getElementById('quiz-editor-modal').style.display = 'block';

                const response = await fetch(`/api/files/quizzes/view/${encodeURIComponent(filename)}`, {
                    credentials: 'same-origin'
                });

                if (response.ok) {
                    const content = await response.text();
                    document.getElementById('quiz-editor-content').value = content;
                } else {
                    const data = await response.json();
                    document.getElementById('quiz-editor-message-area').innerHTML = `<div class="message error">Error: ${data.error}</div>`;
                }
            } catch (error) {
                document.getElementById('quiz-editor-message-area').innerHTML = `<div class="message error">Error loading file: ${error.message}</div>`;
            }
        }

        async function validateQuizYAML() {
            const content = document.getElementById('quiz-editor-content').value.trim();
            const messageArea = document.getElementById('quiz-editor-message-area');

            if (!content) {
                messageArea.innerHTML = '<div class="message error">Content is empty</div>';
                return;
            }

            try {
                const response = await fetch('/api/admin/validate-quiz', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ content }),
                    credentials: 'same-origin'
                });

                const data = await response.json();

                if (response.ok) {
                    if (data.valid) {
                        messageArea.innerHTML = `<div class="message success">✅ Valid YAML! Found ${data.question_count} questions.</div>`;
                    } else {
                        let errorHTML = '<div class="message error">❌ Validation errors:<ul>';
                        data.errors.forEach(err => {
                            errorHTML += `<li>${err}</li>`;
                        });
                        errorHTML += '</ul></div>';
                        messageArea.innerHTML = errorHTML;
                    }
                } else {
                    messageArea.innerHTML = `<div class="message error">Error: ${data.error}</div>`;
                }
            } catch (error) {
                messageArea.innerHTML = `<div class="message error">Error: ${error.message}</div>`;
            }
        }

        async function saveQuizFile() {
            const content = document.getElementById('quiz-editor-content').value;
            const messageArea = document.getElementById('quiz-editor-message-area');

            if (!content.trim()) {
                messageArea.innerHTML = '<div class="message error">Content cannot be empty</div>';
                return;
            }

            try {
                const response = await fetch(`/api/files/quizzes/save/${encodeURIComponent(currentEditingQuiz)}`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ content }),
                    credentials: 'same-origin'
                });

                const data = await response.json();

                if (response.ok) {
                    messageArea.innerHTML = `<div class="message success">${data.message}</div>`;
                    showMessage(`Saved ${currentEditingQuiz}`, 'success');
                    await loadFiles(); // Refresh file list
                    setTimeout(() => {
                        closeQuizEditor();
                    }, 2000);
                } else {
                    let errorMessage = data.error || 'Failed to save quiz';
                    if (data.errors && data.errors.length > 0) {
                        errorMessage += ':<ul>' + data.errors.map(err => `<li>${err}</li>`).join('') + '</ul>';
                    }
                    messageArea.innerHTML = `<div class="message error">${errorMessage}</div>`;
                }
            } catch (error) {
                messageArea.innerHTML = `<div class="message error">Error: ${error.message}</div>`;
            }
        }

        function closeQuizEditor() {
            document.getElementById('quiz-editor-modal').style.display = 'none';
            currentEditingQuiz = '';
        }

        // Close modal when clicking outside
        window.onclick = function(event) {
            const fileModal = document.getElementById('file-viewer-modal');
            const quizModal = document.getElementById('quiz-editor-modal');
            if (event.target === fileModal) {
                closeFileViewer();
            }
            if (event.target === quizModal) {
                closeQuizEditor();
            }
        }
    </script>
</body>
</html>
