{% extends "base.html" %}

{% block title %}文件浏览器{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">文件浏览器</h3>
                    <div class="card-tools">
                        <div class="input-group">
                            <input type="text" id="current-path" class="form-control" readonly>
                            <div class="input-group-append">
                                <button class="btn btn-default" onclick="navigateUp()">
                                    <i class="fas fa-arrow-up"></i> 上级目录
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>类型</th>
                                    <th>大小</th>
                                    <th>修改时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="file-list">
                                <!-- 文件列表将通过JavaScript动态加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let currentPath = '';

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 parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function formatDate(timestamp) {
    return new Date(timestamp * 1000).toLocaleString();
}

function loadFiles(path = '') {
    currentPath = path;
    $('#current-path').val(path || '/');
    
    $.get('/api/list_files', { path: path })
        .done(function(response) {
            if (response.success) {
                const fileList = $('#file-list');
                fileList.empty();
                
                response.data.items.forEach(function(item) {
                    const row = $('<tr>');
                    
                    // 名称列
                    const nameCell = $('<td>');
                    const nameLink = $('<a>')
                        .text(item.name)
                        .attr('href', '#')
                        .css('color', item.is_dir ? '#007bff' : 'inherit');
                    
                    if (item.is_dir) {
                        nameLink.click(function(e) {
                            e.preventDefault();
                            loadFiles(path ? path + '/' + item.name : item.name);
                        });
                    }
                    
                    nameCell.append(nameLink);
                    row.append(nameCell);
                    
                    // 类型列
                    row.append($('<td>').text(item.is_dir ? '目录' : '文件'));
                    
                    // 大小列
                    row.append($('<td>').text(item.is_dir ? '-' : formatFileSize(item.size)));
                    
                    // 修改时间列
                    row.append($('<td>').text(formatDate(item.modified)));
                    
                    // 操作列
                    const actionsCell = $('<td>');
                    if (!item.is_dir) {
                        const downloadBtn = $('<button>')
                            .addClass('btn btn-sm btn-primary')
                            .text('下载')
                            .click(function() {
                                window.location.href = '/api/download_file?path=' + 
                                    encodeURIComponent(path ? path + '/' + item.name : item.name);
                            });
                        actionsCell.append(downloadBtn);
                    }
                    row.append(actionsCell);
                    
                    fileList.append(row);
                });
            } else {
                alert('加载文件列表失败：' + response.message);
            }
        })
        .fail(function() {
            alert('加载文件列表失败');
        });
}

function navigateUp() {
    if (!currentPath) return;
    
    const lastSlashIndex = currentPath.lastIndexOf('/');
    if (lastSlashIndex === -1) {
        loadFiles('');
    } else {
        loadFiles(currentPath.substring(0, lastSlashIndex));
    }
}

// 页面加载完成后加载根目录
$(document).ready(function() {
    loadFiles('');
});
</script>
{% endblock %}