{% extends "base.html" %}

{% block title %}Менеджер файлов - LKM37{% endblock %}
{% block nav_files %}active{% endblock %}

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

<div class="row mb-4">
    <div class="col-md-12">
        <div class="card bg-black border-success">
            <div class="card-body">
                <h5 class="text-success mb-3">ЗАГРУЗИТЬ НОВЫЙ ФАЙЛ</h5>
                <form id="uploadForm" class="row g-3">
                    <div class="col-md-8">
                        <input type="file" id="fileInput" class="form-control bg-dark border-success text-success">
                    </div>
                    <div class="col-md-4">
                        <button type="button" onclick="uploadFile()" class="btn btn-matrix w-100">ЗАГРУЗИТЬ В СИСТЕМУ</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header border-success">СПИСОК_ЗАГРУЖЕННЫХ_ФАЙЛОВ</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">
                        <th>ИМЯ</th>
                        <th>ТИП</th>
                        <th>FILE_ID (TELEGRAM)</th>
                        <th>ДЕЙСТВИЯ</th>
                    </tr>
                </thead>
                <tbody id="filesTable">
                    <!-- Будет заполняться через API -->
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_script %}
<script>
document.addEventListener('DOMContentLoaded', loadFiles);

async function loadFiles() {
    const response = await fetch('/api/files/list');
    const result = await response.json();
    const table = document.getElementById('filesTable');
    table.innerHTML = '';

    result.files.forEach(f => {
        table.innerHTML += `
            <tr>
                <td>${f.filename}</td>
                <td><span class="badge bg-secondary">${f.file_type}</span></td>
                <td><code class="text-success">${f.file_id}</code></td>
                <td>
                    <button class="btn btn-sm btn-outline-info" onclick="copyId('${f.file_id}')">КОПИРОВАТЬ ID</button>
                </td>
            </tr>
        `;
    });
}

function copyId(id) {
    navigator.clipboard.writeText(id);
    alert('FILE_ID скопирован!');
}

async function uploadFile() {
    const fileInput = document.getElementById('fileInput');
...

    if (!fileInput.files[0]) return alert('Выберите файл');
    
    const formData = new FormData();
    formData.append('file', fileInput.files[0]);
    
    const response = await fetch('/api/files/upload', { method: 'POST', body: formData });
    const result = await response.json();
    if (result.success) {
        alert('Файл загружен и зарегистрирован в Telegram!');
        location.reload();
    } else {
        alert('Ошибка: ' + result.error);
    }
}
</script>
{% endblock %}