{% extends "base.html" %}

{% block title %}Файловое хранилище - LKM37{% endblock %}
{% block nav_files %}active{% endblock %}

{% block content %}
<h2 class="mb-4" style="color: var(--matrix-green); text-shadow: 0 0 10px var(--matrix-green);">
    >_ ХРАНИЛИЩЕ_АРТЕФАКТОВ (FILES)
</h2>

<div class="card mb-4">
    <div class="card-header border-success d-flex justify-content-between align-items-center">
        <span>СПИСОК_ДОСТУПНЫХ_ФАЙЛОВ</span>
        <button class="btn btn-outline-success btn-sm" onclick="loadFiles()">
            <i class="bi bi-arrow-clockwise"></i> ОБНОВИТЬ
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-dark table-hover mb-0">
                <thead>
                    <tr class="text-success opacity-50" style="font-size: 0.8em;">
                        <th>ИМЯ ФАЙЛА</th>
                        <th>КАТЕГОРИЯ</th>
                        <th>РАЗМЕР</th>
                        <th class="text-end">ДЕЙСТВИЯ</th>
                    </tr>
                </thead>
                <tbody id="filesTable">
                    <tr>
                        <td colspan="4" class="text-center p-5">
                            <div class="spinner-border text-success" role="status"></div>
                            <div class="mt-2">Сканирование секторов...</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="card border-info">
            <div class="card-header border-info text-info">ИНФОРМАЦИЯ</div>
            <div class="card-body small">
                <ul class="mb-0">
                    <li>Категория <b>EXPORT</b>: JSON-выгрузки истории чата.</li>
                    <li>Категория <b>LOG</b>: Системные логи бота и веб-панели.</li>
                    <li>Все файлы доступны для прямого скачивания на локальный хост.</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_script %}
<script>
document.addEventListener('DOMContentLoaded', loadFiles);

async function loadFiles() {
    const table = document.getElementById('filesTable');
    try {
        const response = await fetch('/api/files/list');
        const result = await response.json();
        
        if (!result.success) throw new Error(result.error);
        
        table.innerHTML = '';
        if (result.files.length === 0) {
            table.innerHTML = '<tr><td colspan="4" class="text-center p-4">Файлы не найдены</td></tr>';
            return;
        }

        result.files.forEach(f => {
            const badgeClass = f.file_type === 'EXPORT' ? 'bg-primary' : 'bg-secondary';
            table.innerHTML += `
                <tr>
                    <td class="font-monospace">${f.filename}</td>
                    <td><span class="badge ${badgeClass}">${f.file_type}</span></td>
                    <td class="text-muted">${f.size}</td>
                    <td class="text-end">
                        <a href="${f.path}" class="btn btn-sm btn-matrix" download>
                            <i class="bi bi-download"></i> СКАЧАТЬ
                        </a>
                    </td>
                </tr>
            `;
        });
    } catch (error) {
        table.innerHTML = `<tr><td colspan="4" class="text-center text-danger p-4">Ошибка: ${error.message}</td></tr>`;
    }
}
</script>
{% endblock %}