{% extends 'admin/admin_base.html' %}
{% block title %}Файлы{% endblock %}
{% block breadcrumb %}
{{ super() }}
<li class="breadcrumb-item active">Файлы</li>
{% endblock %}
{% block admin_content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h2 class="mb-4"><i class="bi bi-file-earmark-arrow-up-fill"></i> Управление файлами</h2>
            
            <!-- Кнопки действий -->
            <div class="mb-3 d-flex gap-2 flex-wrap">
                <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#uploadFilesModal">
                    <i class="bi bi-cloud-upload"></i> Загрузить файлы
                </button>
                <button class="btn btn-info btn-sm" onclick="loadFiles()">
                    <i class="bi bi-arrow-clockwise"></i> Обновить список
                </button>
                <button class="btn btn-secondary btn-sm" onclick="showStorageInfo()">
                    <i class="bi bi-hdd"></i> Информация о хранилище
                </button>
                <button class="btn btn-primary btn-sm" onclick="showStatistics()">
                    <i class="bi bi-graph-up"></i> Статистика загрузки
                </button>
                <button class="btn btn-warning btn-sm" id="bulkUpdateBtn" onclick="bulkUpdateFiles()" style="display: none;">
                    <i class="bi bi-pencil-square"></i> Изменить выбранные
                </button>
                <button class="btn btn-danger btn-sm" id="bulkDeleteBtn" onclick="bulkDeleteFiles()" style="display: none;">
                    <i class="bi bi-trash"></i> Удалить выбранные
                </button>
                <button class="btn btn-secondary btn-sm" onclick="selectAllFiles()">
                    <i class="bi bi-check-all"></i> Выбрать все
                </button>
                <button class="btn btn-secondary btn-sm" onclick="deselectAllFiles()">
                    <i class="bi bi-x-square"></i> Снять выбор
                </button>
            </div>
            
            <!-- Фильтры и поиск -->
            <div class="card mb-3">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label">Поиск</label>
                            <input type="text" class="form-control" id="searchInput" placeholder="Имя файла..." onkeyup="filterFiles()">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">MIME-тип</label>
                            <select class="form-select" id="mimeTypeFilter" onchange="filterFiles()">
                                <option value="">Все типы</option>
                                <option value="image/">Изображения</option>
                                <option value="application/pdf">PDF</option>
                                <option value="text/">Текстовые</option>
                                <option value="video/">Видео</option>
                                <option value="audio/">Аудио</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Сортировка</label>
                            <select class="form-select" id="sortBy" onchange="loadFiles()">
                                <option value="uploaded_at">По дате</option>
                                <option value="filename">По имени</option>
                                <option value="size">По размеру</option>
                                <option value="download_count">По скачиваниям</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Порядок</label>
                            <select class="form-select" id="sortOrder" onchange="loadFiles()">
                                <option value="desc">По убыванию</option>
                                <option value="asc">По возрастанию</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Публичные</label>
                            <select class="form-select" id="isPublicFilter" onchange="filterFiles()">
                                <option value="">Все</option>
                                <option value="true">Публичные</option>
                                <option value="false">Приватные</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Таблица файлов -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Список файлов</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th width="40">
                                        <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll()">
                                    </th>
                                    <th>Имя файла</th>
                                    <th>Тип</th>
                                    <th>Размер</th>
                                    <th>Загружен</th>
                                    <th>Скачиваний</th>
                                    <th>Публичный</th>
                                    <th>Действия</th>
                                </tr>
                            </thead>
                            <tbody id="filesTableBody">
                                <tr>
                                    <td colspan="7" class="text-center">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Загрузка...</span>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Пагинация -->
                    <nav aria-label="Пагинация файлов">
                        <ul class="pagination justify-content-center" id="pagination">
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно загрузки файлов -->
<div class="modal fade" id="uploadFilesModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-cloud-upload"></i> Загрузка файлов</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="uploadForm" enctype="multipart/form-data">
                    <div class="mb-3">
                        <label for="filesInput" class="form-label">Выберите файлы</label>
                        <input type="file" class="form-control" id="filesInput" multiple required>
                        <div class="form-text">Можно выбрать несколько файлов. Максимальный размер: 100 МБ</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="categoryInput" class="form-label">Категория (опционально)</label>
                        <input type="text" class="form-control" id="categoryInput" placeholder="Например: документы, изображения">
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="isPublicCheck">
                            <label class="form-check-label" for="isPublicCheck">
                                Публичный доступ
                            </label>
                        </div>
                    </div>
                    
                    <!-- Прогресс-бар загрузки -->
                    <div id="uploadProgress" style="display: none;">
                        <div class="progress mb-2">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                 role="progressbar" style="width: 0%" id="progressBar">
                                0%
                            </div>
                        </div>
                        <div class="text-center">
                            <button type="button" class="btn btn-danger btn-sm" id="cancelUploadBtn" onclick="cancelUpload()">
                                <i class="bi bi-x-circle"></i> Отменить загрузку
                            </button>
                        </div>
                    </div>
                    
                    <!-- Список загружаемых файлов -->
                    <div id="uploadFilesList" class="mt-3"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" onclick="uploadFiles()">
                    <i class="bi bi-cloud-upload"></i> Загрузить
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно предпросмотра файла -->
<div class="modal fade" id="previewFileModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="previewFileName">Предпросмотр файла</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center" id="previewFileContent">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Загрузка...</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
                <a href="#" class="btn btn-primary" id="downloadPreviewBtn" download>
                    <i class="bi bi-download"></i> Скачать
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно информации о хранилище -->
<div class="modal fade" id="storageInfoModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-hdd"></i> Информация о хранилище</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="storageInfoContent">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Загрузка...</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно статистики -->
<div class="modal fade" id="statisticsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-graph-up"></i> Статистика загрузки файлов</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="statisticsContent">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Загрузка...</span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
            </div>
        </div>
    </div>
</div>

<!-- Модальное окно массового обновления -->
<div class="modal fade" id="bulkUpdateModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-pencil-square"></i> Массовое обновление файлов</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Публичный доступ</label>
                    <select class="form-select" id="bulkIsPublic">
                        <option value="">Не изменять</option>
                        <option value="true">Да</option>
                        <option value="false">Нет</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Метаданные (JSON)</label>
                    <textarea class="form-control" id="bulkMetadata" rows="4" placeholder='{"key": "value"}'></textarea>
                    <small class="form-text text-muted">Оставьте пустым, чтобы не изменять метаданные</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Отмена</button>
                <button type="button" class="btn btn-primary" onclick="confirmBulkUpdate()">Применить</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block admin_scripts %}
<script>
let currentPage = 1;
let uploadAbortController = null;

// Загрузка списка файлов
async function loadFiles(page = 1) {
    currentPage = page;
    const search = document.getElementById('searchInput').value;
    const mimeType = document.getElementById('mimeTypeFilter').value;
    const sortBy = document.getElementById('sortBy').value;
    const sortOrder = document.getElementById('sortOrder').value;
    const isPublic = document.getElementById('isPublicFilter').value;
    
    const params = new URLSearchParams({
        page: page,
        per_page: 20,
        sort_by: sortBy,
        sort_order: sortOrder
    });
    
    if (search) params.append('search', search);
    if (mimeType) params.append('mime_type', mimeType);
    if (isPublic) params.append('is_public', isPublic);
    
    try {
        const response = await fetch(`/api/v1/admin/files?${params}`);
        const data = await response.json();
        
        if (data.success) {
            renderFilesTable(data.files);
            renderPagination(data.pagination);
        } else {
            showAlert('Ошибка', data.error || 'Не удалось загрузить файлы', 'danger');
        }
    } catch (error) {
        console.error('Ошибка при загрузке файлов:', error);
        showAlert('Ошибка', 'Не удалось загрузить файлы', 'danger');
    }
}

// Отображение таблицы файлов
function renderFilesTable(files) {
    const tbody = document.getElementById('filesTableBody');
    
    if (files.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">Файлы не найдены</td></tr>';
        return;
    }
    
    tbody.innerHTML = files.map(file => `
        <tr>
            <td>
                <input type="checkbox" class="file-checkbox" value="${file.id}" onchange="updateBulkButtons()">
            </td>
            <td>
                <i class="bi ${getFileIcon(file.mime_type)}"></i>
                ${escapeHtml(file.filename)}
            </td>
            <td><span class="badge bg-secondary">${file.mime_type}</span></td>
            <td>${formatFileSize(file.size)}</td>
            <td>
                <small class="text-muted">
                    ${new Date(file.uploaded_at).toLocaleString('ru-RU')}<br>
                    ${file.uploader_username || 'Система'}
                </small>
            </td>
            <td>${file.download_count}</td>
            <td>
                ${file.is_public 
                    ? '<span class="badge bg-success">Да</span>' 
                    : '<span class="badge bg-secondary">Нет</span>'}
            </td>
            <td>
                <div class="btn-group btn-group-sm">
                    ${isPreviewable(file.mime_type) 
                        ? `<button class="btn btn-info" onclick="previewFile('${file.id}')" title="Предпросмотр">
                            <i class="bi bi-eye"></i>
                        </button>` 
                        : ''}
                    <a href="/api/v1/admin/files/${file.id}/download" class="btn btn-primary" title="Скачать">
                        <i class="bi bi-download"></i>
                    </a>
                    <button class="btn btn-danger" onclick="deleteFile('${file.id}', '${escapeHtml(file.filename)}')" title="Удалить">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

// Отображение пагинации
function renderPagination(pagination) {
    const paginationEl = document.getElementById('pagination');
    
    if (pagination.pages <= 1) {
        paginationEl.innerHTML = '';
        return;
    }
    
    let html = '';
    
    // Предыдущая страница
    html += `<li class="page-item ${pagination.page === 1 ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="loadFiles(${pagination.page - 1}); return false;">Предыдущая</a>
    </li>`;
    
    // Страницы
    for (let i = 1; i <= pagination.pages; i++) {
        if (i === 1 || i === pagination.pages || (i >= pagination.page - 2 && i <= pagination.page + 2)) {
            html += `<li class="page-item ${i === pagination.page ? 'active' : ''}">
                <a class="page-link" href="#" onclick="loadFiles(${i}); return false;">${i}</a>
            </li>`;
        } else if (i === pagination.page - 3 || i === pagination.page + 3) {
            html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
        }
    }
    
    // Следующая страница
    html += `<li class="page-item ${pagination.page === pagination.pages ? 'disabled' : ''}">
        <a class="page-link" href="#" onclick="loadFiles(${pagination.page + 1}); return false;">Следующая</a>
    </li>`;
    
    paginationEl.innerHTML = html;
}

// Загрузка файлов
async function uploadFiles() {
    const filesInput = document.getElementById('filesInput');
    const categoryInput = document.getElementById('categoryInput');
    const isPublicCheck = document.getElementById('isPublicCheck');
    const uploadProgress = document.getElementById('uploadProgress');
    const progressBar = document.getElementById('progressBar');
    const uploadFilesList = document.getElementById('uploadFilesList');
    
    if (!filesInput.files || filesInput.files.length === 0) {
        showAlert('Ошибка', 'Выберите файлы для загрузки', 'warning');
        return;
    }
    
    // Создаем FormData
    const formData = new FormData();
    for (let file of filesInput.files) {
        formData.append('files', file);
    }
    
    if (categoryInput.value) {
        formData.append('category', categoryInput.value);
    }
    
    formData.append('is_public', isPublicCheck.checked ? 'true' : 'false');
    formData.append('metadata', JSON.stringify({}));
    
    // Показываем прогресс-бар
    uploadProgress.style.display = 'block';
    progressBar.style.width = '0%';
    progressBar.textContent = '0%';
    
    // Создаем AbortController для отмены загрузки
    uploadAbortController = new AbortController();
    
    // Показываем список файлов
    uploadFilesList.innerHTML = Array.from(filesInput.files).map(file => `
        <div class="alert alert-info mb-2">
            <i class="bi bi-file-earmark"></i> ${escapeHtml(file.name)} 
            <span class="badge bg-secondary">${formatFileSize(file.size)}</span>
        </div>
    `).join('');
    
    try {
        const response = await fetch('/api/v1/admin/files/upload', {
            method: 'POST',
            body: formData,
            signal: uploadAbortController.signal
        });
        
        const data = await response.json();
        
        if (data.success) {
            progressBar.style.width = '100%';
            progressBar.textContent = '100%';
            progressBar.classList.remove('progress-bar-animated');
            progressBar.classList.add('bg-success');
            
            showAlert('Успех', `Загружено файлов: ${data.count}`, 'success');
            
            // Очищаем форму
            filesInput.value = '';
            categoryInput.value = '';
            isPublicCheck.checked = false;
            
            // Закрываем модальное окно через 1 секунду
            setTimeout(() => {
                bootstrap.Modal.getInstance(document.getElementById('uploadFilesModal')).hide();
                uploadProgress.style.display = 'none';
                progressBar.classList.remove('bg-success');
                progressBar.classList.add('progress-bar-animated');
                progressBar.style.width = '0%';
                uploadFilesList.innerHTML = '';
                loadFiles();
            }, 1000);
        } else {
            showAlert('Ошибка', data.error || 'Не удалось загрузить файлы', 'danger');
            uploadProgress.style.display = 'none';
        }
    } catch (error) {
        if (error.name === 'AbortError') {
            showAlert('Информация', 'Загрузка отменена', 'info');
        } else {
            showAlert('Ошибка', 'Ошибка при загрузке файлов: ' + error.message, 'danger');
        }
        uploadProgress.style.display = 'none';
    } finally {
        uploadAbortController = null;
    }
}

// Отмена загрузки
function cancelUpload() {
    if (uploadAbortController) {
        uploadAbortController.abort();
    }
}

// Предпросмотр файла
async function previewFile(fileId) {
    const modal = new bootstrap.Modal(document.getElementById('previewFileModal'));
    const previewContent = document.getElementById('previewFileContent');
    const previewName = document.getElementById('previewFileName');
    const downloadBtn = document.getElementById('downloadPreviewBtn');
    
    previewContent.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Загрузка...</span></div>';
    modal.show();
    
    try {
        // Получаем информацию о файле
        const infoResponse = await fetch(`/api/v1/admin/files/${fileId}`);
        const infoData = await infoResponse.json();
        
        if (!infoData.success) {
            previewContent.innerHTML = '<div class="alert alert-danger">Не удалось загрузить информацию о файле</div>';
            return;
        }
        
        const file = infoData.file;
        previewName.textContent = file.filename;
        downloadBtn.href = `/api/v1/admin/files/${fileId}/download`;
        
        // Загружаем предпросмотр
        const previewResponse = await fetch(`/api/v1/admin/files/${fileId}/preview`);
        
        if (!previewResponse.ok) {
            previewContent.innerHTML = '<div class="alert alert-warning">Предпросмотр для данного типа файла не поддерживается</div>';
            return;
        }
        
        const mimeType = file.mime_type;
        
        if (mimeType.startsWith('image/')) {
            const blob = await previewResponse.blob();
            const url = URL.createObjectURL(blob);
            previewContent.innerHTML = `<img src="${url}" class="img-fluid" alt="${escapeHtml(file.filename)}">`;
        } else if (mimeType === 'application/pdf') {
            const blob = await previewResponse.blob();
            const url = URL.createObjectURL(blob);
            previewContent.innerHTML = `<iframe src="${url}" class="w-100" style="height: 600px;" frameborder="0"></iframe>`;
        } else if (mimeType.startsWith('text/')) {
            const text = await previewResponse.text();
            previewContent.innerHTML = `<pre class="bg-light p-3 rounded">${escapeHtml(text)}</pre>`;
        } else {
            previewContent.innerHTML = '<div class="alert alert-info">Предпросмотр для данного типа файла не поддерживается</div>';
        }
    } catch (error) {
        console.error('Ошибка при предпросмотре файла:', error);
        previewContent.innerHTML = '<div class="alert alert-danger">Ошибка при загрузке предпросмотра</div>';
    }
}

// Удаление файла
async function deleteFile(fileId, filename) {
    if (!confirm(`Вы уверены, что хотите удалить файл "${filename}"?`)) {
        return;
    }
    
    try {
        const response = await fetch(`/api/v1/admin/files/${fileId}`, {
            method: 'DELETE'
        });
        
        const data = await response.json();
        
        if (data.success) {
            showAlert('Успех', 'Файл удален', 'success');
            loadFiles(currentPage);
        } else {
            showAlert('Ошибка', data.error || 'Не удалось удалить файл', 'danger');
        }
    } catch (error) {
        console.error('Ошибка при удалении файла:', error);
        showAlert('Ошибка', 'Ошибка при удалении файла', 'danger');
    }
}

// Фильтрация файлов
function filterFiles() {
    loadFiles(1);
}

// Информация о хранилище
async function showStorageInfo() {
    const modal = new bootstrap.Modal(document.getElementById('storageInfoModal'));
    const content = document.getElementById('storageInfoContent');
    
    content.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Загрузка...</span></div>';
    modal.show();
    
    try {
        const response = await fetch('/api/v1/admin/storage/usage');
        const data = await response.json();
        
        if (data.success) {
            const usage = data.usage;
            const usagePercent = usage.usage_percent;
            const progressColor = usagePercent > 90 ? 'danger' : usagePercent > 70 ? 'warning' : 'success';
            
            content.innerHTML = `
                <div class="mb-3">
                    <h6>Использование хранилища</h6>
                    <div class="progress" style="height: 30px;">
                        <div class="progress-bar bg-${progressColor}" role="progressbar" 
                             style="width: ${usagePercent}%" aria-valuenow="${usagePercent}" 
                             aria-valuemin="0" aria-valuemax="100">
                            ${usagePercent}%
                        </div>
                    </div>
                </div>
                <table class="table table-sm">
                    <tr>
                        <td><strong>Использовано:</strong></td>
                        <td>${formatFileSize(usage.used)}</td>
                    </tr>
                    <tr>
                        <td><strong>Лимит:</strong></td>
                        <td>${formatFileSize(usage.limit)}</td>
                    </tr>
                    <tr>
                        <td><strong>Доступно:</strong></td>
                        <td>${formatFileSize(usage.available)}</td>
                    </tr>
                    <tr>
                        <td><strong>Файлов:</strong></td>
                        <td>${usage.file_count}</td>
                    </tr>
                    <tr>
                        <td><strong>Путь:</strong></td>
                        <td><code>${usage.storage_path}</code></td>
                    </tr>
                    <tr>
                        <td><strong>Тип:</strong></td>
                        <td>${usage.storage_type}</td>
                    </tr>
                </table>
            `;
        } else {
            content.innerHTML = '<div class="alert alert-danger">Не удалось загрузить информацию о хранилище</div>';
        }
    } catch (error) {
        console.error('Ошибка при загрузке информации о хранилище:', error);
        content.innerHTML = '<div class="alert alert-danger">Ошибка при загрузке информации</div>';
    }
}

// Вспомогательные функции
function getFileIcon(mimeType) {
    if (mimeType.startsWith('image/')) return 'bi-file-image';
    if (mimeType === 'application/pdf') return 'bi-file-pdf';
    if (mimeType.startsWith('text/')) return 'bi-file-text';
    if (mimeType.startsWith('video/')) return 'bi-file-play';
    if (mimeType.startsWith('audio/')) return 'bi-file-music';
    return 'bi-file-earmark';
}

function isPreviewable(mimeType) {
    return mimeType.startsWith('image/') || 
           mimeType === 'application/pdf' || 
           mimeType.startsWith('text/');
}

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

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

function showAlert(title, message, type) {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        <strong>${title}:</strong> ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    document.body.insertBefore(alertDiv, document.body.firstChild);
    setTimeout(() => alertDiv.remove(), 5000);
}

// Массовые операции
function updateBulkButtons() {
    const checked = document.querySelectorAll('.file-checkbox:checked').length;
    const bulkUpdateBtn = document.getElementById('bulkUpdateBtn');
    const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
    
    if (checked > 0) {
        bulkUpdateBtn.style.display = 'inline-block';
        bulkDeleteBtn.style.display = 'inline-block';
    } else {
        bulkUpdateBtn.style.display = 'none';
        bulkDeleteBtn.style.display = 'none';
    }
}

function toggleSelectAll() {
    const selectAll = document.getElementById('selectAllCheckbox').checked;
    document.querySelectorAll('.file-checkbox').forEach(cb => {
        cb.checked = selectAll;
    });
    updateBulkButtons();
}

function selectAllFiles() {
    document.getElementById('selectAllCheckbox').checked = true;
    toggleSelectAll();
}

function deselectAllFiles() {
    document.getElementById('selectAllCheckbox').checked = false;
    toggleSelectAll();
}

async function bulkDeleteFiles() {
    const checked = Array.from(document.querySelectorAll('.file-checkbox:checked')).map(cb => cb.value);
    if (checked.length === 0) {
        showAlert('Ошибка', 'Выберите файлы для удаления', 'warning');
        return;
    }
    
    if (!confirm(`Вы уверены, что хотите удалить ${checked.length} файл(ов)?`)) {
        return;
    }
    
    try {
        const response = await fetch('/api/v1/admin/files/bulk/delete', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({file_ids: checked})
        });
        
        const data = await response.json();
        
        if (data.success) {
            showAlert('Успех', `Удалено файлов: ${data.deleted_count} из ${data.total_count}`, 'success');
            loadFiles(currentPage);
            deselectAllFiles();
        } else {
            showAlert('Ошибка', data.error || 'Не удалось удалить файлы', 'danger');
        }
    } catch (error) {
        console.error('Ошибка при массовом удалении:', error);
        showAlert('Ошибка', 'Ошибка при удалении файлов', 'danger');
    }
}

function bulkUpdateFiles() {
    const checked = Array.from(document.querySelectorAll('.file-checkbox:checked')).map(cb => cb.value);
    if (checked.length === 0) {
        showAlert('Ошибка', 'Выберите файлы для обновления', 'warning');
        return;
    }
    
    const modal = new bootstrap.Modal(document.getElementById('bulkUpdateModal'));
    modal.show();
}

async function confirmBulkUpdate() {
    const checked = Array.from(document.querySelectorAll('.file-checkbox:checked')).map(cb => cb.value);
    const isPublic = document.getElementById('bulkIsPublic').value;
    const metadataStr = document.getElementById('bulkMetadata').value;
    
    const updates = {};
    if (isPublic !== '') {
        updates.is_public = isPublic === 'true';
    }
    if (metadataStr.trim()) {
        try {
            updates.metadata = JSON.parse(metadataStr);
        } catch (e) {
            showAlert('Ошибка', 'Некорректный JSON в метаданных', 'danger');
            return;
        }
    }
    
    if (Object.keys(updates).length === 0) {
        showAlert('Ошибка', 'Выберите параметры для обновления', 'warning');
        return;
    }
    
    try {
        const response = await fetch('/api/v1/admin/files/bulk/update', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({file_ids: checked, updates: updates})
        });
        
        const data = await response.json();
        
        if (data.success) {
            showAlert('Успех', `Обновлено файлов: ${data.updated_count} из ${data.total_count}`, 'success');
            bootstrap.Modal.getInstance(document.getElementById('bulkUpdateModal')).hide();
            loadFiles(currentPage);
            deselectAllFiles();
            // Очищаем форму
            document.getElementById('bulkIsPublic').value = '';
            document.getElementById('bulkMetadata').value = '';
        } else {
            showAlert('Ошибка', data.error || 'Не удалось обновить файлы', 'danger');
        }
    } catch (error) {
        console.error('Ошибка при массовом обновлении:', error);
        showAlert('Ошибка', 'Ошибка при обновлении файлов', 'danger');
    }
}

// Статистика загрузки файлов
async function showStatistics() {
    const modal = new bootstrap.Modal(document.getElementById('statisticsModal'));
    const content = document.getElementById('statisticsContent');
    
    content.innerHTML = '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Загрузка...</span></div>';
    modal.show();
    
    try {
        const days = prompt('За какой период показать статистику (дней)?', '30');
        if (!days) {
            modal.hide();
            return;
        }
        
        const response = await fetch(`/api/v1/admin/files/statistics?days=${days}`);
        const data = await response.json();
        
        if (data.success) {
            const stats = data.statistics;
            
            // Формируем HTML с графиком
            let chartHtml = `
                <div class="mb-4">
                    <h6>Общая статистика</h6>
                    <table class="table table-sm">
                        <tr>
                            <td><strong>Всего файлов:</strong></td>
                            <td>${stats.total_files}</td>
                        </tr>
                        <tr>
                            <td><strong>Общий размер:</strong></td>
                            <td>${formatFileSize(stats.total_size)}</td>
                        </tr>
                        <tr>
                            <td><strong>Средний размер:</strong></td>
                            <td>${formatFileSize(stats.avg_size)}</td>
                        </tr>
                        <tr>
                            <td><strong>Период:</strong></td>
                            <td>${stats.period_days} дней</td>
                        </tr>
                    </table>
                </div>
                <div class="mb-4">
                    <h6>График загрузки файлов по времени</h6>
                    <canvas id="uploadChart" style="max-height: 300px;"></canvas>
                </div>
            `;
            
            content.innerHTML = chartHtml;
            
            // Рисуем график (используем Chart.js, если доступен)
            if (typeof Chart !== 'undefined') {
                const ctx = document.getElementById('uploadChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: stats.chart_data.map(d => new Date(d.date).toLocaleDateString('ru-RU')),
                        datasets: [{
                            label: 'Количество файлов',
                            data: stats.chart_data.map(d => d.count),
                            borderColor: 'rgb(75, 192, 192)',
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            yAxisID: 'y'
                        }, {
                            label: 'Размер (MB)',
                            data: stats.chart_data.map(d => Math.round(d.total_size / 1024 / 1024)),
                            borderColor: 'rgb(255, 99, 132)',
                            backgroundColor: 'rgba(255, 99, 132, 0.2)',
                            yAxisID: 'y1'
                        }]
                    },
                    options: {
                        responsive: true,
                        interaction: {
                            mode: 'index',
                            intersect: false,
                        },
                        scales: {
                            y: {
                                type: 'linear',
                                display: true,
                                position: 'left',
                                title: {display: true, text: 'Количество файлов'}
                            },
                            y1: {
                                type: 'linear',
                                display: true,
                                position: 'right',
                                title: {display: true, text: 'Размер (MB)'},
                                grid: {drawOnChartArea: false}
                            }
                        }
                    }
                });
            } else {
                // Если Chart.js не загружен, показываем таблицу
                let tableHtml = '<table class="table table-sm"><thead><tr><th>Дата</th><th>Файлов</th><th>Размер</th></tr></thead><tbody>';
                stats.chart_data.forEach(d => {
                    tableHtml += `<tr><td>${new Date(d.date).toLocaleDateString('ru-RU')}</td><td>${d.count}</td><td>${formatFileSize(d.total_size)}</td></tr>`;
                });
                tableHtml += '</tbody></table>';
                content.innerHTML = content.innerHTML.replace('<canvas id="uploadChart"', tableHtml + '<canvas id="uploadChart"');
            }
        } else {
            content.innerHTML = '<div class="alert alert-danger">Не удалось загрузить статистику</div>';
        }
    } catch (error) {
        console.error('Ошибка при загрузке статистики:', error);
        content.innerHTML = '<div class="alert alert-danger">Ошибка при загрузке статистики</div>';
    }
}

// Загрузка файлов при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
    loadFiles();
});
</script>
{% endblock %}
