{% extends 'file_explorer/base.html' %}

{% block title %}上传文件 - 文件管理器{% endblock %}

{% block extra_css %}
<style>
    .upload-area {
        border: 2px dashed #dee2e6;
        border-radius: 10px;
        padding: 40px;
        text-align: center;
        transition: all 0.3s ease;
        background-color: #f8f9fa;
        cursor: pointer;
    }

    .upload-area:hover {
        border-color: #007bff;
        background-color: #e3f2fd;
    }

    .upload-area.dragover {
        border-color: #28a745;
        background-color: #d4edda;
    }

    .file-preview {
        max-width: 200px;
        max-height: 200px;
        object-fit: cover;
        border-radius: 5px;
        margin: 10px auto;
    }

    .upload-progress {
        display: none;
    }

    .file-info {
        background-color: #e9ecef;
        border-radius: 5px;
        padding: 15px;
        margin: 15px 0;
    }
</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-upload me-2"></i>上传文件
                </h5>
            </div>
            <div class="card-body">
                <form method="post" enctype="multipart/form-data" id="uploadForm">
                    {% csrf_token %}

                    <!-- 文件上传区域 -->
                    <div class="upload-area" id="uploadArea">
                        <div id="uploadContent">
                            <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                            <h5>拖拽文件到此处或点击选择文件</h5>
                            <p class="text-muted">支持的文件类型: PDF, DOC, DOCX, XLS, XLSX, JPG, PNG, GIF, ZIP, RAR, TXT</p>
                            <p class="text-muted">最大文件大小: 10MB</p>
                            <input type="file" name="file_path" id="fileInput" class="d-none"
                                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip,.rar,.txt" required>
                            <button type="button" class="btn btn-primary"
                                onclick="document.getElementById('fileInput').click()">
                                <i class="fas fa-folder-open me-1"></i>选择文件
                            </button>
                        </div>

                        <!-- 文件预览 -->
                        <div id="filePreview" class="d-none">
                            <div class="file-info">
                                <div class="row align-items-center">
                                    <div class="col-md-3">
                                        <img id="fileImage" class="file-preview d-none" alt="文件预览">
                                        <div id="fileIcon" class="text-center">
                                            <i class="fas fa-file fa-3x text-primary"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <h6 id="fileName" class="mb-1"></h6>
                                        <p id="fileSize" class="text-muted mb-1"></p>
                                        <p id="fileType" class="text-muted mb-0"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 上传进度 -->
                    <div class="upload-progress" id="uploadProgress">
                        <div class="progress mb-3">
                            <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                        </div>
                        <p class="text-center text-muted">正在上传...</p>
                    </div>

                    <!-- 文件描述 -->
                    <div class="mb-3">
                        <label for="description" class="form-label">
                            <i class="fas fa-align-left me-1"></i>文件描述
                        </label>
                        <textarea class="form-control" id="description" name="description" rows="3"
                            placeholder="请输入文件描述（可选）"></textarea>
                    </div>

                    <!-- 标签 -->
                    <div class="mb-3">
                        <label for="tags" class="form-label">
                            <i class="fas fa-tags me-1"></i>标签
                        </label>
                        <input type="text" class="form-control" id="tags" name="tags" placeholder="请输入标签，用逗号分隔（可选）">
                        <div class="form-text">例如: 文档, 重要, 工作</div>
                    </div>

                    <!-- 权限设置 -->
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_public" name="is_public">
                            <label class="form-check-label" for="is_public">
                                <i class="fas fa-globe me-1"></i>设为公开文件
                            </label>
                            <div class="form-text">公开文件所有用户都可以查看和下载</div>
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">
                            <i class="fas fa-upload me-1"></i>上传文件
                        </button>
                        <a href="{% url 'file_explorer:file_list' %}" class="btn btn-outline-secondary">
                            <i class="fas fa-arrow-left me-1"></i>返回文件列表
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const uploadContent = document.getElementById('uploadContent');
        const filePreview = document.getElementById('filePreview');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const fileType = document.getElementById('fileType');
        const fileImage = document.getElementById('fileImage');
        const fileIcon = document.getElementById('fileIcon');
        const uploadProgress = document.getElementById('uploadProgress');
        const submitBtn = document.getElementById('submitBtn');

        // 拖拽上传
        uploadArea.addEventListener('dragover', function (e) {
            e.preventDefault();
            uploadArea.classList.add('dragover');
        });

        uploadArea.addEventListener('dragleave', function (e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');
        });

        uploadArea.addEventListener('drop', function (e) {
            e.preventDefault();
            uploadArea.classList.remove('dragover');

            const files = e.dataTransfer.files;
            if (files.length > 0) {
                fileInput.files = files;
                handleFileSelect(files[0]);
            }
        });

        // 点击上传
        uploadArea.addEventListener('click', function () {
            fileInput.click();
        });

        // 文件选择处理
        fileInput.addEventListener('change', function (e) {
            if (e.target.files.length > 0) {
                handleFileSelect(e.target.files[0]);
            }
        });

        // 处理文件选择
        function handleFileSelect(file) {
            // 验证文件大小
            if (file.size > 10 * 1024 * 1024) {
                alert('文件大小不能超过10MB');
                return;
            }

            // 验证文件类型
            const allowedTypes = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'jpg', 'jpeg', 'png', 'gif', 'zip', 'rar', 'txt'];
            const fileExtension = file.name.split('.').pop().toLowerCase();

            if (!allowedTypes.includes(fileExtension)) {
                alert('不支持的文件类型');
                return;
            }

            // 显示文件信息
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            fileType.textContent = `文件类型: ${fileExtension.toUpperCase()}`;

            // 显示文件预览
            if (file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    fileImage.src = e.target.result;
                    fileImage.classList.remove('d-none');
                    fileIcon.classList.add('d-none');
                };
                reader.readAsDataURL(file);
            } else {
                fileImage.classList.add('d-none');
                fileIcon.classList.remove('d-none');

                // 根据文件类型设置图标
                const iconElement = fileIcon.querySelector('i');
                iconElement.className = 'fas fa-3x';

                if (fileExtension === 'pdf') {
                    iconElement.classList.add('fa-file-pdf', 'text-danger');
                } else if (['doc', 'docx'].includes(fileExtension)) {
                    iconElement.classList.add('fa-file-word', 'text-primary');
                } else if (['xls', 'xlsx'].includes(fileExtension)) {
                    iconElement.classList.add('fa-file-excel', 'text-success');
                } else if (['jpg', 'jpeg', 'png', 'gif'].includes(fileExtension)) {
                    iconElement.classList.add('fa-file-image', 'text-info');
                } else if (['zip', 'rar'].includes(fileExtension)) {
                    iconElement.classList.add('fa-file-archive', 'text-warning');
                } else {
                    iconElement.classList.add('fa-file', 'text-muted');
                }
            }

            uploadContent.classList.add('d-none');
            filePreview.classList.remove('d-none');
        }

        // 格式化文件大小
        function formatFileSize(bytes) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const sizes = ['Bytes', 'KB', 'MB', 'GB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
        }

        // 表单提交
        document.getElementById('uploadForm').addEventListener('submit', function (e) {
            if (!fileInput.files.length) {
                e.preventDefault();
                alert('请选择要上传的文件');
                return;
            }

            // 显示上传进度
            uploadProgress.style.display = 'block';
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>上传中...';

            // 模拟上传进度
            let progress = 0;
            const progressBar = uploadProgress.querySelector('.progress-bar');
            const interval = setInterval(() => {
                progress += Math.random() * 15;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                }
                progressBar.style.width = progress + '%';
                progressBar.textContent = Math.round(progress) + '%';
            }, 200);
        });
    });
</script>
{% endblock %}