<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Панель Адміністратора WebQuiz</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);
        }

        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            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"], select {
            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);
        }



        .quiz-list {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            padding: 10px;
            background: var(--light-bg);
        }

        .quiz-item {
            padding: 8px;
            margin: 2px 0;
            background: var(--white);
            border-radius: 3px;
            cursor: pointer;
            border: 1px solid transparent;
        }

        .quiz-item:hover {
            border-color: var(--button-bg);
        }

        .quiz-item.selected {
            background: var(--button-bg);
            color: var(--white);
        }

        .quiz-item.current {
            background: var(--warning-bg);
            border-color: var(--warning-border);
            font-weight: bold;
        }

        .quiz-item.current.selected {
            background: var(--success-green);
            color: var(--white);
            border-color: var(--success-green);
        }

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

        .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;
        }

        /* Modal styles */
        .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: 5% auto;
            padding: 20px;
            border-radius: 10px;
            width: 90%;
            max-width: 800px;
            max-height: 80vh;
            overflow-y: auto;
        }

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

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

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

        .mode-toggle {
            margin: 20px 0;
            text-align: center;
        }

        .mode-toggle button {
            margin: 0 5px;
        }

        .mode-toggle button.active {
            background: var(--button-hover);
        }

        .editor-content {
            margin-top: 20px;
        }

        .wizard-form {
            display: none;
        }

        .text-editor {
            display: none;
        }

        .wizard-form.active, .text-editor.active {
            display: block;
        }

        .question-item {
            border: 1px solid var(--border-color);
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
            background: var(--light-bg);
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .option-item {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }

        .option-item input[type="text"] {
            flex: 1;
            margin: 0 10px;
        }

        .option-item input[type="radio"] {
            margin-right: 5px;
        }

        .text-editor textarea {
            width: 100%;
            height: 400px;
            font-family: 'Courier New', monospace;
            font-size: 14px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            padding: 10px;
            resize: vertical;
        }

        .validation-errors {
            color: var(--error-color);
            background: var(--error-bg);
            border: 1px solid var(--error-border);
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;
        }

        .quiz-actions {
            display: flex;
            gap: 10px;
            margin: 10px 0;
        }

        .quiz-actions button {
            flex: 1;
        }

        .btn-danger {
            background: var(--danger-red);
        }

        .btn-danger:hover {
            background: var(--danger-red-hover);
        }

        .downloadable-quiz-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            margin-bottom: 10px;
            background: var(--white);
        }

        .downloadable-quiz-info {
            flex: 1;
        }

        .downloadable-quiz-name {
            font-weight: bold;
            margin-bottom: 5px;
        }

        .downloadable-quiz-url {
            font-size: 0.9em;
            color: var(--text-muted);
            word-break: break-all;
        }

        .download-btn {
            background: var(--success-green);
            color: var(--white);
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.9em;
        }

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

        .download-btn:disabled {
            background: var(--muted-gray);
            cursor: not-allowed;
        }

        .btn-danger:disabled {
            background: var(--danger-red);
            color: var(--white);
            opacity: 0.6;
        }

        /* Network info styles */
        .network-info {
            background: var(--warning-bg);
            border: 1px solid var(--warning-border);
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
        }

        .network-info h3 {
            margin-top: 0;
            color: var(--warning-color);
        }

        .info-section {
            margin: 15px 0;
        }

        .url-list {
            margin-top: 10px;
        }

        .url-item {
            background: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 3px;
            padding: 10px;
            margin: 5px 0;
            font-family: monospace;
        }

        .url-item .label {
            font-weight: bold;
            color: var(--button-bg);
            margin-bottom: 5px;
        }

        .url-item .url {
            color: var(--text-muted);
            font-size: 14px;
        }

        .url-item a {
            color: var(--button-bg);
            text-decoration: none;
            margin-right: 15px;
        }

        .url-item a:hover {
            text-decoration: underline;
        }

        /* Image picker styles */
        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
            padding: 20px;
            max-height: 400px;
            overflow-y: auto;
        }

        .image-item {
            border: 2px solid transparent;
            border-radius: 8px;
            padding: 10px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
            background: var(--container-bg);
        }

        .image-item:hover {
            border-color: var(--button-bg);
            transform: scale(1.05);
            box-shadow: 0 4px 12px var(--shadow);
        }

        .image-item img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 8px;
        }

        .image-filename {
            font-size: 12px;
            color: var(--text-color);
            word-break: break-word;
            line-height: 1.2;
        }

        #image-picker-modal .modal-content {
            max-width: 800px;
            width: 90%;
        }

        /* Quiz Editor Form Styles */
        .question-text, .question-image, .option-text {
            width: 100%;
            padding: 8px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }

        .options-container {
            margin: 10px 0;
        }

        /* Pending Approvals Section */
        .pending-approvals {
            margin-top: 30px;
            background: var(--warning-bg);
            border: 2px solid var(--warning-border);
            border-radius: 8px;
            padding: 20px;
        }

        .pending-user-item {
            background: var(--white);
            border: 1px solid var(--border-color);
            border-radius: 5px;
            padding: 15px;
            margin: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .pending-user-info {
            flex: 1;
        }

        .pending-user-name {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .pending-user-data {
            color: var(--text-muted);
            font-size: 14px;
            margin: 3px 0;
        }

        .approve-btn {
            background: var(--success-green);
            color: var(--white);
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }

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

        /* Downloadable Quizzes Section */
        .downloadable-quizzes {
            margin-top: 30px;
        }

        /* Question type toggle buttons */
        .question-type-toggle {
            background: var(--option-bg);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            padding: 8px 16px;
            margin: 0 5px 10px 0;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .question-type-toggle:hover {
            background: var(--option-hover);
        }

        .question-type-toggle.active {
            background: var(--button-bg);
            color: var(--white);
            border-color: var(--button-bg);
        }

        .min-correct-container {
            background: var(--light-bg);
            padding: 15px;
            border-radius: 5px;
            margin-top: 10px;
        }

        /* Footer styles */
        .admin-footer {
            text-align: center;
            padding: 20px;
            margin-top: 30px;
            border-top: 1px solid var(--border-color);
            color: var(--text-muted);
            font-size: 14px;
        }

        .footer-version {
            margin-bottom: 10px;
        }

        .footer-update {
            display: none;
            background: var(--warning-bg);
            border: 1px solid var(--warning-border);
            color: var(--warning-color);
            padding: 10px 15px;
            border-radius: 5px;
            margin-top: 10px;
            display: inline-block;
        }

        .footer-update a {
            color: var(--button-bg);
            text-decoration: none;
            font-weight: bold;
        }

        .footer-update a:hover {
            text-decoration: underline;
        }

        .footer-update.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 Панель Адміністратора WebQuiz</h1>

        <!-- Authentication Section -->
        <div id="auth-section">
            <div class="form-group">
                <label for="master-key">Ключ:</label>
                <input type="password" id="master-key" placeholder="Введіть ключ">
            </div>
            <div class="actions">
                <button onclick="authenticate()">Увійти</button>
            </div>
        </div>

        <!-- Admin Panel (hidden until authenticated) -->
        <div id="admin-panel" class="hidden">

            <div class="form-group">
                <label>Доступні Файли Quiz:</label>
                <div id="quiz-list" class="quiz-list">
                    Завантаження файлів quiz...
                </div>
            </div>

            <div class="actions">
                <button id="switch-btn" onclick="switchQuiz()" disabled>Переключитися на Вибраний Quiz</button>
                <button onclick="refreshQuizzes()">🔄</button>
                <button id="edit-btn" onclick="editSelectedQuiz()" disabled>✏️</button>
                <button id="duplicate-btn" onclick="duplicateSelectedQuiz()" disabled>📋</button>
            </div>

            <div class="quiz-actions">
                <button onclick="createNewQuiz()">📝 Створити Новий Quiz</button>
                <button id="delete-btn" onclick="deleteSelectedQuiz()" disabled class="btn-danger">🗑️ Видалити Quiz</button>
            </div>

            <!-- Pending Approvals Section (only shown when registration.approve is true) -->
            <div id="pending-approvals-section" class="pending-approvals hidden">
                <h3 style="margin-top: 0;">⏳ Очікуючі Підтвердження</h3>
                <div id="pending-users-list">
                    <p style="text-align: center; color: var(--text-muted);">Немає користувачів, що очікують підтвердження</p>
                </div>
            </div>

            <!-- Downloadable Quizzes Section -->
            <div id="downloadable-quizzes-section" class="downloadable-quizzes hidden">
                <div class="form-group">
                    <label>Доступні Quiz для Завантаження:</label>
                    <div id="downloadable-quiz-list" class="quiz-list">
                        <!-- Downloadable quizzes will be populated by JavaScript -->
                    </div>
                </div>
            </div>

            <!-- Network Access Information -->
            <div class="network-info" id="network-info">
                <div id="access-urls" class="info-section">
                    <strong>URL для доступу з інших пристроїв:</strong>
                    <div id="url-list" class="url-list">
                        Визначення мережевих інтерфейсів...
                    </div>
                </div>
            </div>

            <div class="back-link">
                <a href="/">← Назад до Quiz</a>
                <span style="margin: 0 10px;">|</span>
                <a href="/files/">📁 File Manager</a>
                <span style="margin: 0 10px;">|</span>
                <a href="/live-stats/">📊 Live Stats</a>
            </div>

            <!-- Footer -->
            <div class="admin-footer">
                <div class="footer-version" id="footer-version">
                    WebQuiz v<span id="version-number">...</span>
                    <span id="footer-docs-link" style="margin-left: 15px;"></span>
                </div>
                <div id="footer-update" class="footer-update hidden"></div>
            </div>
        </div>

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

    <!-- Quiz Editor Modal -->
    <div id="quiz-editor-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="modal-title">Створити Новий Quiz</h2>
                <span class="close" onclick="closeQuizEditor()">&times;</span>
            </div>

            <div class="form-group">
                <label for="quiz-filename">Ім'я Файлу Quiz:</label>
                <input type="text" id="quiz-filename" placeholder="Введіть ім'я файлу (без розширення .yaml)">
            </div>

            <div class="mode-toggle">
                <button id="wizard-mode-btn" class="active" onclick="switchEditorMode('wizard')">🧙‍♂️ Режим Майстра</button>
                <button id="text-mode-btn" onclick="switchEditorMode('text')">📝 Текстовий Режим</button>
            </div>

            <div class="editor-content">
                <!-- Wizard Mode -->
                <div id="wizard-form" class="wizard-form active">
                    <div class="form-group">
                        <label>Назва Quiz (необов'язково):</label>
                        <input type="text" id="quiz-title" placeholder="наприклад, Математичний Quiz" style="width: 100%; margin-bottom: 20px;">
                        <small style="color: var(--text-muted);">Якщо не вказано, буде використана стандартна назва</small>
                    </div>
                    <div class="form-group">
                        <label style="display: flex; align-items: center; margin-bottom: 10px;">
                            <input type="checkbox" id="show-right-answer" checked style="margin-right: 10px;">
                            Показувати правильні відповіді
                        </label>
                        <small style="color: var(--text-muted); display: block; margin-bottom: 20px;">Якщо вимкнено, правильні відповіді не показуватимуться під час питань та в підсумковій таблиці</small>
                    </div>
                    <div class="form-group">
                        <label style="display: flex; align-items: center; margin-bottom: 10px;">
                            <input type="checkbox" id="randomize-questions" style="margin-right: 10px;">
                            Рандомізувати порядок питань
                        </label>
                        <small style="color: var(--text-muted); display: block; margin-bottom: 20px;">Кожен студент отримає унікальний випадковий порядок питань для запобігання списування</small>
                    </div>
                    <div class="form-group">
                        <div id="questions-container">
                            <!-- Questions will be added dynamically -->
                        </div>
                        <button type="button" onclick="addQuestion()">➕ Додати Питання</button>
                    </div>
                </div>

                <!-- Text Mode -->
                <div id="text-form" class="text-editor">
                    <div class="form-group">
                        <label for="quiz-content">YAML Контент:</label>
                        <textarea id="quiz-content" placeholder="Введіть YAML контент quiz тут..."></textarea>
                    </div>
                    <button type="button" onclick="validateQuizContent()">✅ Перевірити YAML</button>
                    <div id="validation-results"></div>
                </div>
            </div>

            <div class="actions">
                <button onclick="saveQuiz()">💾 Зберегти Quiz</button>
                <button onclick="closeQuizEditor()">❌ Скасувати</button>
            </div>
        </div>
    </div>

    <!-- Image Picker Modal -->
    <div id="image-picker-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>📷 Вибрати Зображення</h2>
                <span class="close" onclick="closeImagePicker()">&times;</span>
            </div>

            <div id="image-picker-content">
                <div id="image-grid" class="image-grid">
                    Завантаження зображень...
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentMasterKey = '';
        let selectedQuiz = '';
        let currentQuiz = '';

        // HTML escape function to prevent quote truncation in form inputs
        function escapeHtml(text) {
            if (text === null || text === undefined) {
                return '';
            }
            const map = {
                '&': '&amp;',
                '<': '&lt;',
                '>': '&gt;',
                '"': '&quot;',
                "'": '&#39;'
            };
            return String(text).replace(/[&<>"']/g, m => map[m]);
        }

        async function authenticate() {
            const masterKey = document.getElementById('master-key').value.trim();
            if (!masterKey) {
                showMessage('Будь ласка, введіть ключ', 'error');
                return;
            }

            try {
                const response = await fetch('/api/admin/auth', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Master-Key': masterKey
                    },
                    body: JSON.stringify({})
                });

                const data = await response.json();

                if (response.ok) {
                    currentMasterKey = masterKey;
                    document.getElementById('auth-section').style.display = 'none';
                    document.getElementById('admin-panel').classList.remove('hidden');
                    showMessage('Успішна автентифікація!', 'success');
                    await loadQuizzes();
                    displayNetworkInfo();
                    displayDownloadableQuizzes();
                    connectToAdminWebSocket(); // Connect to admin WebSocket for approvals
                    displayVersion(); // Display version in footer
                    checkForUpdates(); // Check for updates
                } else {
                    showMessage(data.error || 'Автентифікація невдала', 'error');
                }
            } catch (error) {
                showMessage('Помилка з\'єднання: ' + error.message, 'error');
            }
        }

        async function loadQuizzes() {
            try {
                const response = await fetch('/api/admin/list-quizzes', {
                    headers: {
                        'X-Master-Key': currentMasterKey
                    }
                });

                const data = await response.json();

                if (response.ok) {
                    currentQuiz = data.current_quiz;
                    displayQuizzes(data.quizzes);
                } else {
                    showMessage(data.error || 'Не вдалося завантажити quiz', 'error');
                }
            } catch (error) {
                showMessage('Помилка завантаження quiz: ' + error.message, 'error');
            }
        }

        function displayQuizzes(quizzes) {
            const quizList = document.getElementById('quiz-list');

            if (quizzes.length === 0) {
                quizList.innerHTML = '<div style="text-align: center; color: var(--text-muted);">Файли quiz не знайдені</div>';
                return;
            }

            let html = '';
            quizzes.forEach(quiz => {
                const isCurrent = quiz === currentQuiz;
                const classes = isCurrent ? 'quiz-item current' : 'quiz-item';
                html += `<div class="${classes}" onclick="selectQuiz('${quiz}')">${quiz}${isCurrent ? ' (current)' : ''}</div>`;
            });

            quizList.innerHTML = html;
        }

        function selectQuiz(quizName) {
            selectedQuiz = quizName;

            // Update UI
            document.querySelectorAll('.quiz-item').forEach(item => {
                item.classList.remove('selected');
            });

            event.target.classList.add('selected');

            // Enable switch button if different from current
            const switchBtn = document.getElementById('switch-btn');
            const editBtn = document.getElementById('edit-btn');
            const duplicateBtn = document.getElementById('duplicate-btn');
            const deleteBtn = document.getElementById('delete-btn');

            if (selectedQuiz !== currentQuiz) {
                switchBtn.disabled = false;
                switchBtn.textContent = 'Переключитися на Вибраний Quiz';
            } else {
                switchBtn.disabled = false;
                switchBtn.textContent = 'Перезапустити Поточний Quiz';
            }

            // Enable edit and duplicate buttons (current quiz can be edited now)
            editBtn.disabled = false;
            duplicateBtn.disabled = false;
            deleteBtn.disabled = selectedQuiz === currentQuiz; // Can't delete current quiz
        }

        async function switchQuiz() {
            if (!selectedQuiz) {
                showMessage('Будь ласка, виберіть quiz', 'warning');
                return;
            }

            const isRestart = selectedQuiz === currentQuiz;

            const switchBtn = document.getElementById('switch-btn');
            switchBtn.disabled = true;
            switchBtn.textContent = isRestart ? 'Restarting...' : 'Switching...';

            try {
                const response = await fetch('/api/admin/switch-quiz', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Master-Key': currentMasterKey
                    },
                    body: JSON.stringify({
                        quiz_filename: selectedQuiz
                    })
                });

                const data = await response.json();

                if (response.ok) {
                    const action = isRestart ? 'restarted' : 'switched to';
                    showMessage(`Successfully ${action} "${selectedQuiz}". CSV file: ${data.csv_file}`, 'success');
                    currentQuiz = selectedQuiz;

                    // Refresh the quiz list to update current indicators
                    await loadQuizzes();

                    // Reset selection
                    selectedQuiz = '';
                    switchBtn.textContent = 'Переключитися на Вибраний Quiz';
                } else {
                    showMessage(data.error || `Failed to ${isRestart ? 'restart' : 'switch'} quiz`, 'error');
                    switchBtn.disabled = false;
                    switchBtn.textContent = isRestart ? 'Restart Current Quiz' : 'Switch to Selected Quiz';
                }
            } catch (error) {
                showMessage(`Error ${isRestart ? 'restarting' : 'switching'} quiz: ` + error.message, 'error');
                switchBtn.disabled = false;
                switchBtn.textContent = isRestart ? 'Restart Current Quiz' : 'Switch to Selected Quiz';
            }
        }

        async function refreshQuizzes() {
            await loadQuizzes();
            showMessage('Список quiz оновлено', 'success');
        }

        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();
            }
        });

        // Quiz Editor Variables
        let editorMode = 'wizard';
        let isEditMode = false;
        let editingQuizName = '';
        let questionCounter = 1;

        // Quiz Editor Functions
        function createNewQuiz() {
            isEditMode = false;
            editingQuizName = '';
            document.getElementById('modal-title').textContent = 'Створити Новий Quiz';
            document.getElementById('quiz-filename').value = '';
            document.getElementById('quiz-filename').disabled = false;
            resetQuizEditor();
            document.getElementById('quiz-editor-modal').style.display = 'block';
        }

        async function editSelectedQuiz() {
            if (!selectedQuiz) {
                showMessage('Будь ласка, виберіть quiz для редагування', 'warning');
                return;
            }

            isEditMode = true;
            editingQuizName = selectedQuiz;
            document.getElementById('modal-title').textContent = `Редагувати Quiz: ${selectedQuiz}`;
            document.getElementById('quiz-filename').value = selectedQuiz.replace('.yaml', '');
            document.getElementById('quiz-filename').disabled = true;

            try {
                const response = await fetch(`/api/admin/quiz/${selectedQuiz}`, {
                    headers: {
                        'X-Master-Key': currentMasterKey
                    }
                });

                const data = await response.json();

                if (response.ok) {
                    // Load quiz data into editor
                    document.getElementById('quiz-content').value = data.content;
                    if (data.parsed) {
                        loadQuizDataToWizard(data.parsed);
                    }
                    document.getElementById('quiz-editor-modal').style.display = 'block';
                } else {
                    showMessage(data.error || 'Не вдалося завантажити quiz', 'error');
                }
            } catch (error) {
                showMessage('Помилка завантаження quiz: ' + error.message, 'error');
            }
        }

        async function duplicateSelectedQuiz() {
            if (!selectedQuiz) {
                showMessage('Будь ласка, виберіть quiz для дублювання', 'warning');
                return;
            }

            const newFilename = prompt(`Введіть ім’я для дубльованого quiz:`, selectedQuiz.replace('.yaml', '_copy'));
            if (!newFilename) {
                return;
            }

            try {
                // First get the original quiz content
                const getResponse = await fetch(`/api/admin/quiz/${selectedQuiz}`, {
                    headers: {
                        'X-Master-Key': currentMasterKey
                    }
                });

                const getResult = await getResponse.json();

                if (!getResponse.ok) {
                    showMessage(getResult.error || 'Не вдалося завантажити оригінальний quiz', 'error');
                    return;
                }

                // Create new quiz with the same content
                const createResponse = await fetch('/api/admin/create-quiz', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Master-Key': currentMasterKey
                    },
                    body: JSON.stringify({
                        filename: newFilename,
                        mode: 'text',
                        content: getResult.content
                    })
                });

                const createResult = await createResponse.json();

                if (createResponse.ok) {
                    showMessage(`Quiz duplicated successfully as "${createResult.filename}"`, 'success');
                    await loadQuizzes();
                } else {
                    showMessage(createResult.error || 'Не вдалося дублювати quiz', 'error');
                }
            } catch (error) {
                showMessage('Помилка дублювання quiz: ' + error.message, 'error');
            }
        }

        async function deleteSelectedQuiz() {
            if (!selectedQuiz) {
                showMessage('Будь ласка, виберіть quiz для видалення', 'warning');
                return;
            }

            if (selectedQuiz === currentQuiz) {
                showMessage('Неможливо видалити поточний активний quiz', 'error');
                return;
            }

            if (!confirm(`Ви впевнені, що хочете видалити "${selectedQuiz}"? Ця дія не може бути скасована.`)) {
                return;
            }

            try {
                const response = await fetch(`/api/admin/quiz/${selectedQuiz}`, {
                    method: 'DELETE',
                    headers: {
                        'X-Master-Key': currentMasterKey
                    }
                });

                const data = await response.json();

                if (response.ok) {
                    showMessage(data.message, 'success');
                    selectedQuiz = '';
                    await loadQuizzes();
                } else {
                    showMessage(data.error || 'Не вдалося видалити quiz', 'error');
                }
            } catch (error) {
                showMessage('Помилка видалення quiz: ' + error.message, 'error');
            }
        }

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

        function switchEditorMode(mode) {
            editorMode = mode;

            // Update buttons
            document.getElementById('wizard-mode-btn').classList.toggle('active', mode === 'wizard');
            document.getElementById('text-mode-btn').classList.toggle('active', mode === 'text');

            // Show/hide forms
            document.getElementById('wizard-form').classList.toggle('active', mode === 'wizard');
            document.getElementById('text-form').classList.toggle('active', mode === 'text');

            // Sync data between modes
            if (mode === 'text') {
                syncWizardToText();
            } else {
                syncTextToWizard();
            }
        }

        function resetQuizEditor() {
            editorMode = 'wizard';
            questionCounter = 1;

            // Reset mode buttons
            document.getElementById('wizard-mode-btn').classList.add('active');
            document.getElementById('text-mode-btn').classList.remove('active');

            // Reset forms
            document.getElementById('wizard-form').classList.add('active');
            document.getElementById('text-form').classList.remove('active');

            // Clear content
            document.getElementById('questions-container').innerHTML = '';
            document.getElementById('quiz-content').value = '';
            document.getElementById('validation-results').innerHTML = '';

            // Add initial question if in wizard mode
            addQuestion();
        }

        function addQuestion() {
            const container = document.getElementById('questions-container');
            const questionDiv = document.createElement('div');
            questionDiv.className = 'question-item';
            questionDiv.dataset.questionId = questionCounter;

            questionDiv.innerHTML = `
                <div class="question-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 10px; background: var(--question-bg); border-radius: 5px;">
                    <span style="font-weight: bold;">Question ${questionCounter}</span>
                    <div>
                        <button type="button" onclick="moveQuestion(${questionCounter}, 'up')" style="margin-right: 5px; padding: 5px 8px; font-size: 12px;">↑</button>
                        <button type="button" onclick="moveQuestion(${questionCounter}, 'down')" style="margin-right: 5px; padding: 5px 8px; font-size: 12px;">↓</button>
                        <button type="button" onclick="removeQuestion(${questionCounter})" class="btn-danger" style="padding: 5px 8px; font-size: 12px;">×</button>
                    </div>
                </div>
                <div class="form-group">
                    <label>Текст Питання (необов'язково, якщо є зображення):</label>
                    <input type="text" class="question-text" placeholder="Введіть текст питання" style="width: 100%;">
                </div>
                <div class="form-group">
                    <label>Зображення Питання (необов'язково, якщо є текст):</label>
                    <div style="display: flex; align-items: center; gap: 5px;">
                        <input type="text" class="question-image" placeholder="напр., /imgs/diagram.png" style="width: 100%;">
                        <button type="button" onclick="openImagePicker('question-image', ${questionCounter})" style="padding: 5px 8px; font-size: 16px;" title="Select image">📷</button>
                    </div>
                    <small style="color: var(--text-muted);">Введіть шлях, що починається з /imgs/ для зображень. Має бути наданий текст питання АБО зображення.</small>
                </div>
                <div class="form-group">
                    <label>Тип Питання:</label>
                    <div style="margin: 10px 0;">
                        <button type="button" class="question-type-toggle active" data-type="single" onclick="toggleQuestionType(${questionCounter}, 'single')">📝 Одна правильна відповідь</button>
                        <button type="button" class="question-type-toggle" data-type="multiple" onclick="toggleQuestionType(${questionCounter}, 'multiple')">☑️ Кілька правильних відповідей</button>
                    </div>
                </div>
                <div class="form-group">
                    <label>Варіанти Відповідей:</label>
                    <small style="color: var(--text-muted); margin-bottom: 10px; display: block;">Для зображень у варіантах починайте з / (наприклад, /static/option1.png)</small>
                    <div class="options-container">
                        <div class="option-item">
                            <input type="radio" name="correct-${questionCounter}" value="0" checked>
                            <input type="text" class="option-text" placeholder="Варіант 1">
                            <button type="button" onclick="openImagePicker('option-text', ${questionCounter}, 0)" style="padding: 2px 5px; font-size: 12px;" title="Select image">📷</button>
                            <button type="button" onclick="removeOption(this)">×</button>
                        </div>
                        <div class="option-item">
                            <input type="radio" name="correct-${questionCounter}" value="1">
                            <input type="text" class="option-text" placeholder="Варіант 2">
                            <button type="button" onclick="openImagePicker('option-text', ${questionCounter}, 1)" style="padding: 2px 5px; font-size: 12px;" title="Select image">📷</button>
                            <button type="button" onclick="removeOption(this)">×</button>
                        </div>
                    </div>
                    <button type="button" onclick="addOption(${questionCounter})">+ Додати Варіант</button>
                </div>
                <div class="form-group min-correct-container" style="display: none;">
                    <label for="min-correct-${questionCounter}">Мінімум правильних відповідей:</label>
                    <input type="number" id="min-correct-${questionCounter}" class="min-correct-input" min="1" placeholder="Усі правильні" style="width: 80px;">
                    <small style="color: var(--text-muted); display: block;">Залиште порожнім, щоб вимагати всі правильні відповіді</small>
                </div>
            `;

            container.appendChild(questionDiv);
            questionCounter++;
            updateQuestionNumbers();
        }

        function removeQuestion(questionId) {
            const questionDiv = document.querySelector(`[data-question-id="${questionId}"]`);
            if (questionDiv) {
                questionDiv.remove();
                updateQuestionNumbers();
            }
        }

        function moveQuestion(questionId, direction) {
            const questionDiv = document.querySelector(`[data-question-id="${questionId}"]`);
            if (!questionDiv) return;

            const container = document.getElementById('questions-container');
            const allQuestions = Array.from(container.children);
            const currentIndex = allQuestions.indexOf(questionDiv);

            let moved = false;
            if (direction === 'up' && currentIndex > 0) {
                // Move up
                container.insertBefore(questionDiv, allQuestions[currentIndex - 1]);
                updateQuestionNumbers();
                moved = true;
            } else if (direction === 'down' && currentIndex < allQuestions.length - 1) {
                // Move down
                container.insertBefore(allQuestions[currentIndex + 1], questionDiv);
                updateQuestionNumbers();
                moved = true;
            }

            // Animate scroll to the moved question
            if (moved) {
                setTimeout(() => {
                    questionDiv.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center',
                        inline: 'nearest'
                    });

                    // Add a brief highlight animation
                    questionDiv.style.transition = 'background-color 0.3s ease';
                    const originalBg = getComputedStyle(questionDiv).backgroundColor;
                    questionDiv.style.backgroundColor = 'var(--option-selected)';

                    setTimeout(() => {
                        questionDiv.style.backgroundColor = originalBg;
                        setTimeout(() => {
                            questionDiv.style.transition = '';
                        }, 300);
                    }, 300);
                }, 50);
            }
        }

        function updateQuestionNumbers() {
            const container = document.getElementById('questions-container');
            const questions = container.children;

            // Store checked states before updating names
            const checkedStates = [];
            for (let i = 0; i < questions.length; i++) {
                const questionDiv = questions[i];
                const radioButtons = questionDiv.querySelectorAll('input[type="radio"]');
                let checkedIndex = -1;
                radioButtons.forEach((radio, index) => {
                    if (radio.checked) {
                        checkedIndex = index;
                    }
                });
                checkedStates[i] = checkedIndex;
            }

            // Update numbers and radio button names
            for (let i = 0; i < questions.length; i++) {
                const questionDiv = questions[i];
                const questionNumber = i + 1;

                // Update the visual question number in header
                const headerSpan = questionDiv.querySelector('.question-header span');
                if (headerSpan) {
                    headerSpan.textContent = `Питання ${questionNumber}`;
                }

                // Update radio button names to ensure correct grouping
                const radioButtons = questionDiv.querySelectorAll('input[type="radio"]');
                radioButtons.forEach((radio, index) => {
                    radio.name = `correct-${questionNumber}`;
                    // Restore checked state
                    radio.checked = (index === checkedStates[i]);
                });
            }

            // Update button visibility
            updateMoveButtonVisibility();
        }

        function updateMoveButtonVisibility() {
            const container = document.getElementById('questions-container');
            const questions = container.children;

            for (let i = 0; i < questions.length; i++) {
                const questionDiv = questions[i];
                const upButton = questionDiv.querySelector('button[onclick*="up"]');
                const downButton = questionDiv.querySelector('button[onclick*="down"]');

                if (upButton) {
                    upButton.style.display = i === 0 ? 'none' : 'inline-block';
                }

                if (downButton) {
                    downButton.style.display = i === questions.length - 1 ? 'none' : 'inline-block';
                }
            }
        }

        function toggleQuestionType(questionId, type) {
            const questionDiv = document.querySelector(`[data-question-id="${questionId}"]`);
            if (!questionDiv) return;

            const toggleButtons = questionDiv.querySelectorAll('.question-type-toggle');
            const optionInputs = questionDiv.querySelectorAll('input[type="radio"], input[type="checkbox"]');
            const minCorrectContainer = questionDiv.querySelector('.min-correct-container');

            // Update toggle button states
            toggleButtons.forEach(btn => {
                if (btn.dataset.type === type) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });

            // Convert input types
            if (type === 'multiple') {
                // Convert to checkboxes
                optionInputs.forEach(input => {
                    if (input.type === 'radio') {
                        input.type = 'checkbox';
                        input.name = `correct-${questionId}-multiple`;
                    }
                });
                minCorrectContainer.style.display = 'block';
            } else {
                // Convert to radio buttons
                optionInputs.forEach((input, index) => {
                    if (input.type === 'checkbox') {
                        input.type = 'radio';
                        input.name = `correct-${questionId}`;
                        // Keep only first checked item for radio mode
                        input.checked = index === 0;
                    }
                });
                minCorrectContainer.style.display = 'none';
            }
        }

        function addOption(questionId) {
            const questionDiv = document.querySelector(`[data-question-id="${questionId}"]`);
            const optionsContainer = questionDiv.querySelector('.options-container');
            const optionIndex = optionsContainer.children.length;

            // Determine current question type
            const isMultiple = questionDiv.querySelector('.question-type-toggle[data-type="multiple"]').classList.contains('active');
            const inputType = isMultiple ? 'checkbox' : 'radio';
            const inputName = isMultiple ? `correct-${questionId}-multiple` : `correct-${questionId}`;

            const optionDiv = document.createElement('div');
            optionDiv.className = 'option-item';
            optionDiv.innerHTML = `
                <input type="${inputType}" name="${inputName}" value="${optionIndex}">
                <input type="text" class="option-text" placeholder="Варіант ${optionIndex + 1}">
                <button type="button" onclick="openImagePicker('option-text', ${questionId}, ${optionIndex})" style="padding: 2px 5px; font-size: 12px;" title="Select image">📷</button>
                <button type="button" onclick="removeOption(this)">×</button>
            `;

            optionsContainer.appendChild(optionDiv);
        }

        function removeOption(button) {
            const optionDiv = button.parentElement;
            const optionsContainer = optionDiv.parentElement;

            if (optionsContainer.children.length > 2) {
                optionDiv.remove();

                // Re-index radio buttons and update values
                Array.from(optionsContainer.children).forEach((option, index) => {
                    const radio = option.querySelector('input[type="radio"]');
                    radio.value = index;
                });
            } else {
                showMessage('Питання має мати принаймні 2 варіанти', 'warning');
            }
        }

        function loadQuizDataToWizard(quizData) {
            const container = document.getElementById('questions-container');
            container.innerHTML = '';
            questionCounter = 1;

            // Populate title field
            document.getElementById('quiz-title').value = quizData.title || '';

            // Populate show_right_answer field
            document.getElementById('show-right-answer').checked = quizData.show_right_answer !== false;

            // Populate randomize_questions field
            document.getElementById('randomize-questions').checked = quizData.randomize_questions === true;

            if (quizData.questions) {
                quizData.questions.forEach(question => {
                    const questionDiv = document.createElement('div');
                    questionDiv.className = 'question-item';
                    questionDiv.dataset.questionId = questionCounter;

                    const isMultipleChoice = Array.isArray(question.correct_answer);
                    const correctAnswers = isMultipleChoice ? question.correct_answer : [question.correct_answer];
                    const inputType = isMultipleChoice ? 'checkbox' : 'radio';
                    const inputName = isMultipleChoice ? `correct-${questionCounter}-multiple` : `correct-${questionCounter}`;

                    let optionsHtml = '';
                    question.options.forEach((option, index) => {
                        const isCorrect = correctAnswers.includes(index);
                        optionsHtml += `
                            <div class="option-item">
                                <input type="${inputType}" name="${inputName}" value="${index}" ${isCorrect ? 'checked' : ''}>
                                <input type="text" class="option-text" value="${escapeHtml(option)}" placeholder="Варіант ${index + 1}">
                                <button type="button" onclick="openImagePicker('option-text', ${questionCounter}, ${index})" style="padding: 2px 5px; font-size: 12px;" title="Select image">📷</button>
                                <button type="button" onclick="removeOption(this)">×</button>
                            </div>
                        `;
                    });

                    const minCorrectValue = question.min_correct || '';
                    const minCorrectDisplay = isMultipleChoice ? 'block' : 'none';

                    questionDiv.innerHTML = `
                        <div class="question-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 10px; background: var(--question-bg); border-radius: 5px;">
                            <span style="font-weight: bold;">Питання ${questionCounter}</span>
                            <div>
                                <button type="button" onclick="moveQuestion(${questionCounter}, 'up')" style="margin-right: 5px; padding: 5px 8px; font-size: 12px;">↑</button>
                                <button type="button" onclick="moveQuestion(${questionCounter}, 'down')" style="margin-right: 5px; padding: 5px 8px; font-size: 12px;">↓</button>
                                <button type="button" onclick="removeQuestion(${questionCounter})" class="btn-danger" style="padding: 5px 8px; font-size: 12px;">×</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Текст Питання (необов'язково, якщо є зображення):</label>
                            <input type="text" class="question-text" value="${escapeHtml(question.question || '')}" placeholder="Введіть текст питання" style="width: 100%;">
                        </div>
                        <div class="form-group">
                            <label>Зображення Питання (необов'язково, якщо є текст):</label>
                            <div style="display: flex; align-items: center; gap: 5px;">
                                <input type="text" class="question-image" value="${escapeHtml(question.image || '')}" placeholder="напр., /imgs/diagram.png" style="width: 100%;">
                                <button type="button" onclick="openImagePicker('question-image', ${questionCounter})" style="padding: 5px 8px; font-size: 16px;" title="Select image">📷</button>
                            </div>
                            <small style="color: var(--text-muted);">Введіть шлях, що починається з /imgs/ для зображень. Має бути наданий текст питання АБО зображення.</small>
                        </div>
                        <div class="form-group">
                            <label>Тип Питання:</label>
                            <div style="margin: 10px 0;">
                                <button type="button" class="question-type-toggle ${!isMultipleChoice ? 'active' : ''}" data-type="single" onclick="toggleQuestionType(${questionCounter}, 'single')">📝 Одна правильна відповідь</button>
                                <button type="button" class="question-type-toggle ${isMultipleChoice ? 'active' : ''}" data-type="multiple" onclick="toggleQuestionType(${questionCounter}, 'multiple')">☑️ Кілька правильних відповідей</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Варіанти Відповідей:</label>
                            <small style="color: var(--text-muted); margin-bottom: 10px; display: block;">Для зображень у варіантах починайте з / (наприклад, /static/option1.png)</small>
                            <div class="options-container">
                                ${optionsHtml}
                            </div>
                            <button type="button" onclick="addOption(${questionCounter})">+ Додати Варіант</button>
                        </div>
                        <div class="form-group min-correct-container" style="display: ${minCorrectDisplay};">
                            <label for="min-correct-${questionCounter}">Мінімум правильних відповідей:</label>
                            <input type="number" id="min-correct-${questionCounter}" class="min-correct-input" min="1" value="${minCorrectValue}" placeholder="Усі правильні" style="width: 80px;">
                            <small style="color: var(--text-muted); display: block;">Залиште порожнім, щоб вимагати всі правильні відповіді</small>
                        </div>
                    `;

                    container.appendChild(questionDiv);
                    questionCounter++;
                });
                updateQuestionNumbers();
            }
        }

        function syncWizardToText() {
            const quizData = getWizardData();
            if (quizData) {
                const yamlContent = `questions:\n${quizData.questions.map(q => {
                    let questionYaml = '-';
                    if (q.question) {
                        questionYaml += ` question: "${q.question}"`;
                    }
                    if (q.image) {
                        questionYaml += `\n  image: "${q.image}"`;
                    }
                    questionYaml += `\n  options:\n${q.options.map(opt => `  - "${opt}"`).join('\n')}\n  correct_answer: ${q.correct_answer}`;
                    return questionYaml;
                }).join('\n')}`;
                document.getElementById('quiz-content').value = yamlContent;
            }
        }

        function syncTextToWizard() {
            try {
                const content = document.getElementById('quiz-content').value.trim();
                if (content) {
                    // Basic YAML parsing simulation - in production, you'd want proper YAML parsing
                    const lines = content.split('\n');
                    // This is a simplified sync - full implementation would need proper YAML parsing
                    showMessage('Синхронізація тексту з майстром - може знадобитися ручне оновлення', 'warning');
                }
            } catch (error) {
                showMessage('Помилка синхронізації тексту з майстром: ' + error.message, 'error');
            }
        }

        function getWizardData() {
            const questions = [];
            const questionDivs = document.querySelectorAll('.question-item');

            questionDivs.forEach((div, index) => {
                const questionText = div.querySelector('.question-text').value.trim();
                const questionImage = div.querySelector('.question-image').value.trim();
                const options = Array.from(div.querySelectorAll('.option-text')).map(input => input.value.trim());

                // Either question text OR image must be provided
                const hasQuestionContent = questionText || questionImage;

                // Check if we have valid question content and options
                if (hasQuestionContent && options.every(opt => opt) && options.length > 0) {
                    const questionData = {
                        options: options
                    };

                    // Determine question type and correct answers
                    const isMultiple = div.querySelector('.question-type-toggle[data-type="multiple"]').classList.contains('active');

                    if (isMultiple) {
                        // Multiple choice - collect all checked checkboxes
                        const checkedCheckboxes = Array.from(div.querySelectorAll('input[type="checkbox"]:checked'));
                        const correctAnswers = checkedCheckboxes.map(cb => parseInt(cb.value)).sort((a, b) => a - b);

                        if (correctAnswers.length > 0) {
                            questionData.correct_answer = correctAnswers;

                            // Add min_correct if specified
                            const minCorrectInput = div.querySelector('.min-correct-input');
                            if (minCorrectInput && minCorrectInput.value.trim()) {
                                const minCorrect = parseInt(minCorrectInput.value);
                                if (minCorrect > 0 && minCorrect <= correctAnswers.length) {
                                    questionData.min_correct = minCorrect;
                                }
                            }
                        } else {
                            // Default to first option if no checkboxes selected
                            questionData.correct_answer = [0];
                        }
                    } else {
                        // Single choice - get checked radio button
                        const correctRadio = div.querySelector('input[type="radio"]:checked');
                        questionData.correct_answer = correctRadio ? parseInt(correctRadio.value) : 0;
                    }

                    // Include question text if provided
                    if (questionText) {
                        questionData.question = questionText;
                    }

                    // Include image if provided
                    if (questionImage) {
                        questionData.image = questionImage;
                    }

                    questions.push(questionData);
                }
            });

            const quizData = { questions };

            // Include title if provided
            const quizTitle = document.getElementById('quiz-title').value.trim();
            if (quizTitle) {
                quizData.title = quizTitle;
            }

            // Include show_right_answer setting
            quizData.show_right_answer = document.getElementById('show-right-answer').checked;

            // Include randomize_questions setting
            quizData.randomize_questions = document.getElementById('randomize-questions').checked;

            return quizData;
        }

        async function validateQuizContent() {
            const content = document.getElementById('quiz-content').value.trim();
            const resultsDiv = document.getElementById('validation-results');

            if (!content) {
                resultsDiv.innerHTML = '<div class="validation-errors">Контент порожній</div>';
                return;
            }

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

                const data = await response.json();

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

        async function saveQuiz() {
            const filename = document.getElementById('quiz-filename').value.trim();

            if (!filename) {
                showMessage('Будь ласка, введіть ім’я файлу', 'error');
                return;
            }

            let quizData, content;

            if (editorMode === 'wizard') {
                quizData = getWizardData();
                if (!quizData.questions || quizData.questions.length === 0) {
                    showMessage('Будь ласка, додайте принаймні одне питання', 'error');
                    return;
                }
            } else {
                content = document.getElementById('quiz-content').value.trim();
                if (!content) {
                    showMessage('Будь ласка, введіть контент quiz', 'error');
                    return;
                }
            }

            try {
                const url = isEditMode ? `/api/admin/quiz/${editingQuizName}` : '/api/admin/create-quiz';
                const method = isEditMode ? 'PUT' : 'POST';

                const response = await fetch(url, {
                    method,
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Master-Key': currentMasterKey
                    },
                    body: JSON.stringify({
                        filename,
                        mode: editorMode,
                        quiz_data: editorMode === 'wizard' ? quizData : undefined,
                        content: editorMode === 'text' ? content : undefined
                    })
                });

                const data = await response.json();

                if (response.ok) {
                    showMessage(data.message, 'success');
                    closeQuizEditor();
                    await loadQuizzes();
                } else {
                    showMessage(data.error || 'Не вдалося зберегти quiz', 'error');
                }
            } catch (error) {
                showMessage('Помилка збереження quiz: ' + error.message, 'error');
            }
        }

        // Network information display using server-generated data
        function displayNetworkInfo() {
            if (typeof NETWORK_INFO === 'undefined') {
                document.getElementById('wifi-name').textContent = 'Мережева інформація недоступна';
                document.getElementById('url-list').innerHTML = '<div class="url-item">Network detection failed</div>';
                return;
            }

            // Generate URL list from server data
            let urlHtml = '';

            if (NETWORK_INFO.urls && NETWORK_INFO.urls.length > 0) {
                NETWORK_INFO.urls.forEach(url => {
                    urlHtml += `
                        <div class="url-item">
                            <div class="label"><a href="${url.quiz_url}" target="_blank">${url.quiz_url}</a></div>
                        </div>
                    `;
                });
            } else {
                urlHtml += `
                    <div class="url-item">
                        <div class="label">⚠️ Зовнішні Мережеві Інтерфейси Не Знайдені</div>
                        <div class="url">
                            Сервер доступний тільки локально. Перевірте мережеві налаштування або параметри файрвола.
                        </div>
                    </div>
                `;
            }

            document.getElementById('url-list').innerHTML = urlHtml;
        }

        // Image picker functionality
        let currentImageTarget = null;

        async function openImagePicker(fieldType, questionId, optionIndex = null) {
            try {
                // Store the target information
                currentImageTarget = { fieldType, questionId, optionIndex };

                // Load images from server
                const response = await fetch('/api/admin/list-images', {
                    headers: {
                        'X-Master-Key': currentMasterKey
                    }
                });

                const data = await response.json();

                if (response.ok) {
                    displayImageGrid(data.images);
                    document.getElementById('image-picker-modal').style.display = 'block';
                } else {
                    showMessage(data.error || 'Не вдалося завантажити зображення', 'error');
                }
            } catch (error) {
                showMessage('Помилка завантаження зображень: ' + error.message, 'error');
            }
        }

        function displayImageGrid(images) {
            const gridContainer = document.getElementById('image-grid');

            if (!images || images.length === 0) {
                gridContainer.innerHTML = `
                    <div style="text-align: center; padding: 40px; color: var(--text-muted);">
                        <p>Зображення не знайдені в директорії quizzes/imgs</p>
                        <small>Додайте файли зображень до директорії quizzes/imgs, щоб побачити їх тут</small>
                    </div>
                `;
                return;
            }

            let gridHtml = '';
            images.forEach(image => {
                gridHtml += `
                    <div class="image-item" onclick="selectImage('${image.path}')" title="${image.filename}">
                        <img src="${image.path}" alt="${image.filename}" loading="lazy">
                        <div class="image-filename">${image.filename}</div>
                    </div>
                `;
            });

            gridContainer.innerHTML = gridHtml;
        }

        function selectImage(imagePath) {
            if (!currentImageTarget) {
                showMessage('Поле не вибрано', 'error');
                return;
            }

            // Find the target input field based on stored information
            let targetInput = null;

            if (currentImageTarget.fieldType === 'question-image') {
                // Find question image field by question ID
                const questionDiv = document.querySelector(`[data-question-id="${currentImageTarget.questionId}"]`);
                if (questionDiv) {
                    targetInput = questionDiv.querySelector('.question-image');
                }
            } else if (currentImageTarget.fieldType === 'option-text') {
                // Find option text field by question ID and option index
                const questionDiv = document.querySelector(`[data-question-id="${currentImageTarget.questionId}"]`);
                if (questionDiv) {
                    const optionInputs = questionDiv.querySelectorAll('.option-text');
                    if (optionInputs[currentImageTarget.optionIndex]) {
                        targetInput = optionInputs[currentImageTarget.optionIndex];
                    }
                }
            }

            if (targetInput) {
                targetInput.value = imagePath;
                closeImagePicker();
                showMessage(`Зображення вибрано: ${imagePath}`, 'success');
            } else {
                showMessage('Поле вводу не знайдено', 'error');
            }
        }

        function closeImagePicker() {
            document.getElementById('image-picker-modal').style.display = 'none';
            currentImageTarget = null;
        }

        // Downloadable Quizzes Functions
        function displayDownloadableQuizzes() {
            if (typeof DOWNLOADABLE_QUIZZES !== 'undefined' && DOWNLOADABLE_QUIZZES.length > 0) {
                const section = document.getElementById('downloadable-quizzes-section');
                const quizList = document.getElementById('downloadable-quiz-list');

                section.classList.remove('hidden');

                let html = '';
                DOWNLOADABLE_QUIZZES.forEach((quiz, index) => {
                    html += `
                        <div class="downloadable-quiz-item">
                            <div class="downloadable-quiz-info">
                                <div class="downloadable-quiz-name">${quiz.name}</div>
                                <div class="downloadable-quiz-url">${quiz.download_path}</div>
                                <small style="color: var(--text-muted);">Папка: ${quiz.folder}</small>
                            </div>
                            <button class="download-btn" onclick="downloadQuiz(${index})" id="download-btn-${index}">
                                📥 Завантажити
                            </button>
                        </div>
                    `;
                });
                quizList.innerHTML = html;
            }
        }

        async function downloadQuiz(quizIndex) {
            const quiz = DOWNLOADABLE_QUIZZES[quizIndex];
            const button = document.getElementById(`download-btn-${quizIndex}`);

            // Show confirmation
            const confirmed = confirm(`Завантажити quiz "${quiz.name}"?\n\nЦе завантажить та розпакує файли з:\n${quiz.download_path}\n\nФайли будуть перезаписані в директорії quizzes.`);
            if (!confirmed) {
                return;
            }

            // Disable button and show loading state
            button.disabled = true;
            button.innerHTML = '⏳ Завантаження...';

            try {
                const response = await fetch('/api/admin/download-quiz', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Admin-Key': currentMasterKey
                    },
                    body: JSON.stringify({
                        name: quiz.name,
                        download_path: quiz.download_path,
                        folder: quiz.folder
                    })
                });

                const data = await response.json();

                if (response.ok) {
                    showMessage(`✅ ${data.message} (Витягнуто файлів: ${data.extracted_files})`, 'success');
                    // Refresh quiz list to show newly downloaded quizzes
                    await loadQuizzes();
                } else {
                    showMessage(`❌ Помилка завантаження: ${data.error}`, 'error');
                }
            } catch (error) {
                showMessage(`❌ Помилка мережі: ${error.message}`, 'error');
            } finally {
                // Re-enable button
                button.disabled = false;
                button.innerHTML = '📥 Завантажити';
            }
        }

        // Admin WebSocket for Pending Approvals
        let adminWebSocket = null;
        let pendingUsers = {};

        function connectToAdminWebSocket() {
            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
            const wsUrl = `${protocol}//${window.location.host}/ws/admin`;

            adminWebSocket = new WebSocket(wsUrl);

            adminWebSocket.onopen = () => {
                console.log('Admin WebSocket connected');
            };

            adminWebSocket.onmessage = (event) => {
                try {
                    const data = JSON.parse(event.data);
                    handleAdminWebSocketMessage(data);
                } catch (error) {
                    console.error('Error parsing admin WebSocket message:', error);
                }
            };

            adminWebSocket.onclose = () => {
                console.log('Admin WebSocket disconnected');
                // Reconnect after 5 seconds
                setTimeout(connectToAdminWebSocket, 5000);
            };

            adminWebSocket.onerror = (error) => {
                console.error('Admin WebSocket error:', error);
            };
        }

        function handleAdminWebSocketMessage(data) {
            if (data.type === 'initial_state') {
                // Initial state - show/hide section based on requires_approval
                if (data.requires_approval) {
                    document.getElementById('pending-approvals-section').classList.remove('hidden');
                    pendingUsers = data.pending_users || {};
                    displayPendingUsers();
                }
            } else if (data.type === 'new_registration') {
                // New user registered
                const user_data = data.user_data;
                pendingUsers[user_data.user_id] = user_data;
                document.getElementById('pending-approvals-section').classList.remove('hidden');
                displayPendingUsers();
                showMessage(`Новий користувач: ${user_data.username}`, 'success');
            } else if (data.type === 'registration_updated') {
                // User updated registration data
                const user_data = data.user_data;
                pendingUsers[user_data.user_id] = user_data;
                displayPendingUsers();
                showMessage(`Користувач ${user_data.username} оновив дані`, 'success');
            } else if (data.type === 'user_approved') {
                // User was approved
                const user_id = data.user_id;
                if (pendingUsers[user_id]) {
                    delete pendingUsers[user_id];
                    displayPendingUsers();
                }
            }
        }

        function fieldNameToLabel(fieldName) {
            // Convert field name to label: "моля_парола" -> "Моля Парола"
            return fieldName
                .split('_')
                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                .join(' ');
        }

        function displayPendingUsers() {
            const listContainer = document.getElementById('pending-users-list');
            const userIds = Object.keys(pendingUsers);

            if (userIds.length === 0) {
                listContainer.innerHTML = '<p style="text-align: center; color: var(--text-muted);">Немає користувачів, що очікують підтвердження</p>';
                return;
            }

            let html = '';
            for (const user_id of userIds) {
                const user = pendingUsers[user_id];
                html += `
                    <div class="pending-user-item" id="pending-user-${user_id}">
                        <div class="pending-user-info">
                            <div class="pending-user-name">👤 ${user.username}</div>
                `;

                // Add additional registration fields
                for (const [key, value] of Object.entries(user)) {
                    if (key !== 'user_id' && key !== 'username' && key !== 'approved' && key !== 'registered_at') {
                        const label = fieldNameToLabel(key);
                        html += `<div class="pending-user-data">${label}: ${value}</div>`;
                    }
                }

                html += `
                        </div>
                        <button class="approve-btn" onclick="approveUser('${user_id}')">✓ Підтвердити</button>
                    </div>
                `;
            }

            listContainer.innerHTML = html;
        }

        async function approveUser(userId) {
            if (!currentMasterKey) {
                showMessage('Потрібна автентифікація', 'error');
                return;
            }

            try {
                const response = await fetch('/api/admin/approve-user', {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Master-Key': currentMasterKey
                    },
                    body: JSON.stringify({ user_id: userId })
                });

                const data = await response.json();

                if (response.ok) {
                    showMessage(`Користувача підтверджено!`, 'success');
                    // Remove from pending list
                    if (pendingUsers[userId]) {
                        delete pendingUsers[userId];
                        displayPendingUsers();
                    }
                } else {
                    showMessage(data.error || 'Помилка підтвердження', 'error');
                }
            } catch (error) {
                showMessage('Помилка з\'єднання: ' + error.message, 'error');
            }
        }

        // Auto-authenticate for trusted IPs
        if (typeof IS_TRUSTED_IP !== 'undefined' && IS_TRUSTED_IP) {
            // Hide auth section and show admin panel immediately
            document.getElementById('auth-section').style.display = 'none';
            document.getElementById('admin-panel').classList.remove('hidden');
            currentMasterKey = 'trusted-ip'; // Set a placeholder key for API calls
            showMessage('Авто-автентифікація з довіреного IP', 'success');
            loadQuizzes();
            displayNetworkInfo(); // Show network info for trusted IPs
            displayDownloadableQuizzes();
            connectToAdminWebSocket(); // Connect to admin WebSocket for approvals
            displayVersion(); // Display version in footer
            checkForUpdates(); // Check for updates
        }

        // Version display functionality
        function displayVersion() {
            const versionSpan = document.getElementById('version-number');
            const docsLinkSpan = document.getElementById('footer-docs-link');

            if (typeof WEBQUIZ_VERSION !== 'undefined') {
                versionSpan.textContent = WEBQUIZ_VERSION;

                // Add documentation link
                const docUrl = `https://github.com/oduvan/webquiz/releases/download/v${WEBQUIZ_VERSION}/webquiz-documentation-uk.pdf`;
                docsLinkSpan.innerHTML = `| <a href="${docUrl}" target="_blank" style="color: var(--button-bg); text-decoration: none;">📄 Документація</a>`;
            } else {
                versionSpan.textContent = 'unknown';
                docsLinkSpan.innerHTML = '';
            }
        }

        // Version check functionality
        async function checkForUpdates() {
            // Only check if version is defined
            if (typeof WEBQUIZ_VERSION === 'undefined') {
                return;
            }

            try {
                const response = await fetch('https://pypi.org/pypi/webquiz/json', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json'
                    }
                });

                if (!response.ok) {
                    return; // Silently fail
                }

                const data = await response.json();
                const latestVersion = data.info.version;
                const currentVersion = WEBQUIZ_VERSION;

                // Parse versions into arrays of integers
                const parseVersion = (version) => {
                    return version.split('.').map(part => parseInt(part, 10) || 0);
                };

                const currentParts = parseVersion(currentVersion);
                const latestParts = parseVersion(latestVersion);

                // Compare versions
                const maxLength = Math.max(currentParts.length, latestParts.length);
                let isNewer = false;

                for (let i = 0; i < maxLength; i++) {
                    const current = currentParts[i] || 0;
                    const latest = latestParts[i] || 0;

                    if (latest > current) {
                        isNewer = true;
                        break;
                    } else if (latest < current) {
                        break;
                    }
                }

                // Show update notification if newer version available
                if (isNewer) {
                    const updateElement = document.getElementById('footer-update');
                    updateElement.classList.remove('hidden');
                    updateElement.innerHTML = `⬆️ Update available: <a href="https://github.com/oduvan/webquiz/releases/tag/v${latestVersion}" target="_blank">v${latestVersion}</a>`;
                }
            } catch (error) {
                // Silently fail - don't show any error messages
                return;
            }
        }

    </script>

</body>
</html>
