<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Управление приложениями - OldMarket Admin</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .sidebar {
            width: 250px;
            background: #2c3e50;
            color: white;
            height: 100vh;
            position: fixed;
            padding: 20px;
        }
        .sidebar h2 {
            margin-bottom: 30px;
            text-align: center;
        }
        .sidebar .user-info {
            background: #34495e;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 20px;
            text-align: center;
        }
        .sidebar ul {
            list-style: none;
        }
        .sidebar li {
            margin: 15px 0;
        }
        .sidebar a {
            color: white;
            text-decoration: none;
            padding: 10px;
            display: block;
            border-radius: 5px;
            transition: background 0.3s;
        }
        .sidebar a:hover {
            background: #34495e;
        }
        .content {
            margin-left: 250px;
            padding: 40px;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        .btn {
            background: #3498db;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
        }
        .btn:hover {
            background: #2980b9;
        }
        .btn-danger {
            background: #e74c3c;
        }
        .btn-danger:hover {
            background: #c0392b;
        }
        .btn-success {
            background: #27ae60;
        }
        .btn-success:hover {
            background: #219a52;
        }
        .btn-warning {
            background: #f39c12;
        }
        .btn-warning:hover {
            background: #e67e22;
        }
        .btn-info {
            background: #17a2b8;
        }
        .btn-info:hover {
            background: #138496;
        }
        table {
            width: 100%;
            background: white;
            border-collapse: collapse;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background: #34495e;
            color: white;
        }
        tr:hover {
            background: #f5f5f5;
        }
        .app-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }
        .modal-content {
            background: white;
            margin: 50px auto;
            padding: 30px;
            width: 80%;
            max-width: 600px;
            border-radius: 10px;
            max-height: 80vh;
            overflow-y: auto;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .versions-list {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 5px;
        }
        .version-item {
            padding: 8px;
            border-bottom: 1px solid #ddd;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .version-item:last-child {
            border-bottom: none;
        }
        .download-link {
            color: #3498db;
            text-decoration: none;
            font-size: 12px;
        }
        .download-link:hover {
            text-decoration: underline;
        }
        .current-version {
            background: #d4edda;
            border-left: 4px solid #28a745;
        }
        .action-buttons {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }
        .action-buttons .btn {
            padding: 5px 10px;
            font-size: 12px;
        }
        .rating-display {
            color: #f39c12;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <h2>OldMarket Admin</h2>
        <div class="user-info">
            Вы вошли как: <strong>{{ username }}</strong>
        </div>
        <ul>
            <li><a href="/admin">Дашборд</a></li>
            <li><a href="/admin/apps">Управление приложениями</a></li>
            <li><a href="/admin/reviews">Управление отзывами</a></li>
            <li><a href="/api/apps" target="_blank">API приложений</a></li>
            <li><a href="/admin/logout">Выйти</a></li>
        </ul>
    </div>
    
    <div class="content">
        <div class="header">
            <h1>Управление приложениями</h1>
            <button class="btn" onclick="showAddForm()">Добавить приложение</button>
        </div>
        
        <table id="apps-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Иконка</th>
                    <th>Название</th>
                    <th>Пакет</th>
                    <th>Версия</th>
                    <th>API</th>
                    <th>Загрузки</th>
                    <th>Рейтинг</th>
                    <th>Действия</th>
                </tr>
            </thead>
            <tbody>
                {% for app in apps %}
                <tr>
                    <td>{{ app.id }}</td>
                    <td>
                        {% if app.icon %}
                        <img src="/html/apps/{{ app.icon }}" alt="{{ app.name }}" class="app-icon">
                        {% endif %}
                    </td>
                    <td>{{ app.name }}</td>
                    <td>{{ app.package }}</td>
                    <td>{{ app.version }}</td>
                    <td>{{ app.api }}</td>
                    <td>{{ app.downloads }}</td>
                    <td class="rating-display">{{ app.rating }}</td>
                    <td>
                        <div class="action-buttons">
                            <button class="btn btn-success" onclick="showAppDetails({{ app.id }})">Подробно</button>
                            <button class="btn btn-info" onclick="showEditForm({{ app.id }})">Изменить</button>
                            <button class="btn btn-warning" onclick="showVersionModal({{ app.id }})">Версия+</button>
                            <button class="btn btn-danger" onclick="deleteApp({{ app.id }})">Удалить</button>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Модальное окно для добавления приложения -->
    <div id="addModal" class="modal">
        <div class="modal-content">
            <h2>Добавить приложение</h2>
            <form id="addAppForm" enctype="multipart/form-data">
                <div class="form-group">
                    <label>Название:</label>
                    <input type="text" name="name" required>
                </div>
                <div class="form-group">
                    <label>Пакет:</label>
                    <input type="text" name="package" required>
                </div>
                <div class="form-group">
                    <label>Версия:</label>
                    <input type="text" name="version" required>
                </div>
                <div class="form-group">
                    <label>API уровень:</label>
                    <input type="text" name="api" required>
                </div>
                <div class="form-group">
                    <label>Описание:</label>
                    <textarea name="description" rows="3" required></textarea>
                </div>
                <div class="form-group">
                    <label>Рейтинг (0.0 - 5.0):</label>
                    <input type="number" name="rating" min="0" max="5" step="0.1" value="0.0">
                </div>
                <div class="form-group">
                    <label>Это игра?</label>
                    <input type="checkbox" name="is_game">
                </div>
                <div class="form-group">
                    <label>APK файл:</label>
                    <input type="file" name="apk_file" accept=".apk" required>
                </div>
                <div class="form-group">
                    <label>Иконка:</label>
                    <input type="file" name="icon" accept="image/*" required>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn">Добавить</button>
                    <button type="button" class="btn" onclick="hideAddForm()">Отмена</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Модальное окно для редактирования приложения -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <h2>Редактировать приложение</h2>
            <form id="editAppForm" enctype="multipart/form-data">
                <input type="hidden" id="editAppId" name="app_id">
                <div class="form-group">
                    <label>Название:</label>
                    <input type="text" id="editName" name="name" required>
                </div>
                <div class="form-group">
                    <label>Пакет:</label>
                    <input type="text" id="editPackage" name="package" required>
                </div>
                <div class="form-group">
                    <label>Версия:</label>
                    <input type="text" id="editVersion" name="version" required>
                </div>
                <div class="form-group">
                    <label>API уровень:</label>
                    <input type="text" id="editApi" name="api" required>
                </div>
                <div class="form-group">
                    <label>Описание:</label>
                    <textarea id="editDescription" name="description" rows="3" required></textarea>
                </div>
                <div class="form-group">
                    <label>Рейтинг (0.0 - 5.0):</label>
                    <input type="number" id="editRating" name="rating" min="0" max="5" step="0.1" required>
                </div>
                <div class="form-group">
                    <label>Это игра?</label>
                    <input type="checkbox" id="editIsGame" name="is_game">
                </div>
                <div class="form-group">
                    <label>Новая иконка (оставьте пустым, чтобы не менять):</label>
                    <input type="file" name="icon" accept="image/*">
                </div>
                <div class="form-group">
                    <button type="submit" class="btn">Сохранить</button>
                    <button type="button" class="btn" onclick="hideEditForm()">Отмена</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Модальное окно для просмотра деталей приложения -->
    <div id="detailsModal" class="modal">
        <div class="modal-content">
            <h2>Детали приложения</h2>
            <div id="appDetails"></div>
            <div class="form-group">
                <button type="button" class="btn" onclick="hideDetailsModal()">Закрыть</button>
            </div>
        </div>
    </div>

    <!-- Модальное окно для добавления версии -->
    <div id="versionModal" class="modal">
        <div class="modal-content">
            <h2>Добавить версию</h2>
            <form id="addVersionForm" enctype="multipart/form-data">
                <input type="hidden" id="versionAppId" name="app_id">
                <div class="form-group">
                    <label>Версия (например: 1.0, 2.1, Geometry Dash 1.0):</label>
                    <input type="text" name="version" required>
                    <small>Используется в URL: /api/download/{app_id}/{version}</small>
                </div>
                <div class="form-group">
                    <label>API уровень:</label>
                    <input type="text" name="api" required>
                </div>
                <div class="form-group">
                    <label>APK файл:</label>
                    <input type="file" name="apk_file" accept=".apk" required>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn">Добавить версию</button>
                    <button type="button" class="btn" onclick="hideVersionModal()">Отмена</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        function showAddForm() {
            document.getElementById('addModal').style.display = 'block';
        }
        
        function hideAddForm() {
            document.getElementById('addModal').style.display = 'none';
        }

        function showEditForm(appId) {
            // Загружаем данные приложения
            fetch(`/api/admin/apps/${appId}`)
                .then(response => response.json())
                .then(app => {
                    document.getElementById('editAppId').value = app.id;
                    document.getElementById('editName').value = app.name;
                    document.getElementById('editPackage').value = app.package;
                    document.getElementById('editVersion').value = app.version;
                    document.getElementById('editApi').value = app.api;
                    document.getElementById('editDescription').value = app.description;
                    document.getElementById('editRating').value = app.rating;
                    document.getElementById('editIsGame').checked = app.is_game;
                    
                    document.getElementById('editModal').style.display = 'block';
                })
                .catch(error => {
                    alert('Ошибка при загрузке данных: ' + error);
                });
        }
        
        function hideEditForm() {
            document.getElementById('editModal').style.display = 'none';
        }

        function showDetailsModal() {
            document.getElementById('detailsModal').style.display = 'block';
        }
        
        function hideDetailsModal() {
            document.getElementById('detailsModal').style.display = 'none';
        }

        function showVersionModal(appId) {
            document.getElementById('versionAppId').value = appId;
            document.getElementById('versionModal').style.display = 'block';
        }
        
        function hideVersionModal() {
            document.getElementById('versionModal').style.display = 'none';
        }
        
        async function showAppDetails(appId) {
            try {
                const response = await fetch(`/api/app/${appId}`);
                const app = await response.json();
                
                let versionsHtml = '';
                if (app.versions && app.versions.length > 0) {
                    versionsHtml = '<h3>Версии:</h3><div class="versions-list">';
                    app.versions.forEach(version => {
                        const isCurrent = version.version === app.version;
                        const versionClass = isCurrent ? 'version-item current-version' : 'version-item';
                        
                        // Создаем URL для скачивания версии
                        const downloadUrl = `/api/download/${appId}/${encodeURIComponent(version.version)}`;
                        versionsHtml += `
                            <div class="${versionClass}">
                                <div>
                                    <strong>${version.version}</strong> (API: ${version.api})<br>
                                    <small>Файл: ${version.apk_file}</small><br>
                                    <a href="${downloadUrl}" class="download-link" target="_blank">Скачать эту версию</a>
                                </div>
                                <div>
                                    ${isCurrent ? '<strong>Текущая</strong>' : `<button class="btn btn-success" onclick="setMainVersion(${appId}, '${version.version}')">Сделать основной</button>`}
                                </div>
                            </div>
                        `;
                    });
                    versionsHtml += '</div>';
                }
                
                document.getElementById('appDetails').innerHTML = `
                    <div class="form-group">
                        <strong>ID:</strong> ${app.id}
                    </div>
                    <div class="form-group">
                        <strong>Название:</strong> ${app.name}
                    </div>
                    <div class="form-group">
                        <strong>Пакет:</strong> ${app.package}
                    </div>
                    <div class="form-group">
                        <strong>Текущая версия:</strong> ${app.version} (API: ${app.api})
                    </div>
                    <div class="form-group">
                        <strong>Загрузки:</strong> ${app.downloads || 0}
                    </div>
                    <div class="form-group">
                        <strong>Рейтинг:</strong> ${app.rating || 0}
                    </div>
                    <div class="form-group">
                        <strong>Отзывы:</strong> ${app.review_count || 0}
                    </div>
                    <div class="form-group">
                        <strong>Основная ссылка для скачивания:</strong><br>
                        <a href="/api/download/${app.id}" target="_blank">/api/download/${app.id}</a>
                    </div>
                    <div class="form-group">
                        <strong>Описание:</strong><br>${app.description}
                    </div>
                    ${versionsHtml}
                    <div class="form-group">
                        <button type="button" class="btn btn-warning" onclick="showVersionModal(${app.id})">Добавить версию</button>
                        <button type="button" class="btn btn-info" onclick="showEditForm(${app.id})">Изменить приложение</button>
                    </div>
                `;
                showDetailsModal();
            } catch (error) {
                alert('Ошибка при загрузке деталей: ' + error);
            }
        }
        
        async function setMainVersion(appId, version) {
            if (confirm(`Установить версию "${version}" как основную?`)) {
                try {
                    const formData = new FormData();
                    formData.append('version', version);
                    
                    const response = await fetch(`/api/admin/apps/${appId}/set-version`, {
                        method: 'POST',
                        body: formData
                    });
                    const result = await response.json();
                    alert(result.message);
                    location.reload();
                } catch (error) {
                    alert('Ошибка при установке версии: ' + error);
                }
            }
        }
        
        async function deleteApp(appId) {
            if (confirm('Вы уверены, что хотите удалить это приложение? Будут удалены все версии и отзывы.')) {
                try {
                    const response = await fetch(`/api/admin/apps/${appId}`, {
                        method: 'DELETE'
                    });
                    const result = await response.json();
                    alert(result.message);
                    location.reload();
                } catch (error) {
                    alert('Ошибка при удалении: ' + error);
                }
            }
        }
        
        document.getElementById('addAppForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            
            try {
                const response = await fetch('/api/admin/apps', {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                alert(result.message);
                hideAddForm();
                location.reload();
            } catch (error) {
                alert('Ошибка при добавлении: ' + error);
            }
        });

        document.getElementById('editAppForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const appId = document.getElementById('editAppId').value;
            
            try {
                const response = await fetch(`/api/admin/apps/${appId}`, {
                    method: 'PUT',
                    body: formData
                });
                const result = await response.json();
                alert(result.message);
                hideEditForm();
                location.reload();
            } catch (error) {
                alert('Ошибка при обновлении: ' + error);
            }
        });

        document.getElementById('addVersionForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const appId = document.getElementById('versionAppId').value;
            
            try {
                const response = await fetch(`/api/admin/apps/${appId}/versions`, {
                    method: 'POST',
                    body: formData
                });
                const result = await response.json();
                alert(result.message);
                hideVersionModal();
                // Обновляем детали приложения
                showAppDetails(appId);
            } catch (error) {
                alert('Ошибка при добавлении версии: ' + error);
            }
        });
    </script>
</body>
</html>