
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title data-i18n="trash.title">Trash</title>
    <script src="/static/js/i18n.js"></script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh; padding: 20px;
        }
        .container { max-width: 800px; margin: 0 auto; }
        h1 { color: white; text-align: center; margin-bottom: 20px; }
        .card {
            background: white; border-radius: 12px; padding: 20px;
            margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
        .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
        .btn {
            padding: 12px 20px; border: none; border-radius: 10px;
            cursor: pointer; font-weight: 500; font-size: var(--global-font-size, 16px);
        }
        .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
        .btn-danger { background: #dc3545; color: white; }
        .btn-back { background: #6c757d; color: white; text-decoration: none; display: inline-block; }
        .file-list { display: flex; flex-direction: column; gap: 12px; }
        .file-item {
            display: flex; flex-direction: column; align-items: flex-start;
            padding: 14px; background: #f8f9fa; border-radius: 10px;
        }
        .file-info { flex: 1; width: 100%; }
        .file-name { 
            font-weight: bold; font-size: var(--global-font-size, 16px); 
            word-break: break-word; white-space: pre-wrap;
            line-height: 1.4; margin-bottom: 6px;
        }
        .file-meta { font-size: var(--global-font-size, 13px); color: #666; }
        .file-actions { width: 100%; text-align: left; }
        .restore-link {
            color: #667eea; font-size: var(--global-font-size, 13px); text-decoration: none; cursor: pointer;
        }
        .restore-link:hover { text-decoration: underline; }
        .empty { text-align: center; color: #666; padding: 50px; font-size: 18px; }
        
        /* 原生dialog样式 */
        dialog {
            border: none; border-radius: 16px; padding: 0;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            max-width: 90%; width: 320px;
        }
        dialog::backdrop {
            background: rgba(0,0,0,0.5);
        }
        .dialog-header { padding: 20px; border-bottom: 1px solid #eee; }
        .dialog-title { font-size: 18px; font-weight: bold; }
        .dialog-body { padding: 20px; }
        .dialog-input {
            width: 100%; padding: 12px; border: 1px solid #ddd;
            border-radius: 8px; font-size: var(--global-font-size, 16px); margin-top: 10px;
        }
        .dialog-actions {
            padding: 15px 20px; border-top: 1px solid #eee;
            display: flex; gap: 10px; justify-content: flex-end;
        }
        .dialog-btn {
            padding: 12px 24px; border: none; border-radius: 10px;
            font-size: var(--global-font-size, 16px); cursor: pointer;
        }
        .dialog-btn-cancel { background: #e9ecef; color: #333; }
        .dialog-btn-confirm { background: linear-gradient(135deg, #667eea, #764ba2); color: white; }
        .dialog-btn-danger { background: #dc3545; color: white; }
    </style>
<link rel="stylesheet" href="/static/lib/sweetalert2.min.css">
<script src="/static/lib/sweetalert2.min.js"></script>
</head>
<body>
    <div class="container">
        <h1 data-i18n="trash.title">Trash</h1>
        
        <div class="card">
            <div class="header">
                <span data-i18n="trash.item_count" data-i18n-params='{"count":{{ items|length }}}'>{{count}} items</span>
                <a href="#" class="btn btn-back" onclick="history.back(); return false;">←</a>
            </div>
            
            {% if items %}
            <div class="file-list">
                {% for item in items %}
                <div class="file-item">
                    <div class="file-info">
                        <div class="file-name">{{ item.name }}</div>
                        <div class="file-meta"><span data-i18n="trash.deleted_at">Deleted At</span>: {{ item.deleted_at }}</div>
                    </div>
                    <div class="file-actions">
                        <a class="restore-link" onclick="showRestoreDialog('{{ item.name }}')" data-i18n="trash.restore">Restore</a>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="empty" data-i18n="trash.empty">Trash is empty</div>
            {% endif %}
        </div>

        <div class="card">
            <div class="header">
                <span data-i18n="trash.danger_zone">Danger Zone</span>
            </div>
            <button class="btn btn-danger" style="width: 100%;" onclick="showClearDialog()" data-i18n="trash.clear_all">Empty Trash</button>
        </div>
    </div>

    <!-- 原生dialog: 还原 -->
    <dialog id="restoreDialog">
        <div class="dialog-header">
            <div class="dialog-title" data-i18n="trash.restore_dialog.title">Restore File</div>
        </div>
        <div class="dialog-body">
            <div id="restoreFileName" style="font-weight: bold; margin-bottom: 10px;"></div>
            <input type="text" id="restorePath" class="dialog-input" data-i18n-placeholder="trash.restore_dialog.path_placeholder" placeholder="Enter restore path">
        </div>
        <div class="dialog-actions">
            <button class="dialog-btn dialog-btn-cancel" onclick="closeRestoreDialog()" data-i18n="common.cancel">Cancel</button>
            <button class="dialog-btn dialog-btn-confirm" onclick="confirmRestore()" data-i18n="trash.restore">Restore</button>
        </div>
    </dialog>

    <!-- 原生dialog: 清空 -->
    <dialog id="clearDialog">
        <div class="dialog-header">
            <div class="dialog-title">⚠️ <span data-i18n="trash.clear_dialog.title">Confirm Empty</span></div>
        </div>
        <div class="dialog-body">
            <p data-i18n="trash.clear_dialog.message">Are you sure you want to empty the trash?</p>
            <p style="color: #dc3545; margin-top: 10px;" data-i18n="trash.clear_dialog.warning">This action cannot be undone!</p>
        </div>
        <div class="dialog-actions">
            <button class="dialog-btn dialog-btn-cancel" onclick="closeClearDialog()" data-i18n="common.cancel">Cancel</button>
            <button class="dialog-btn dialog-btn-danger" onclick="confirmClear()" data-i18n="trash.clear">Clear</button>
        </div>
    </dialog>

    <script>
        let currentRestoreName = '';

        function showRestoreDialog(name) {
            currentRestoreName = name;
            // 去掉时间戳前缀
            let defaultPath = name;
            if (name.length > 15 && name[14] === '_') {
                defaultPath = name.substring(15);
            }
            
            document.getElementById('restoreFileName').textContent = name;
            document.getElementById('restorePath').value = defaultPath;
            document.getElementById('restoreDialog').showModal();
        }

        function closeRestoreDialog() {
            document.getElementById('restoreDialog').close();
        }

        function confirmRestore() {
            const path = document.getElementById('restorePath').value.trim();
            if (!path) {
                Swal.fire({ icon: 'warning', title: '提示', text: '请输入还原路径' });
                return;
            }
            
            fetch('/trash/restore/' + encodeURIComponent(currentRestoreName), {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({ target_path: path })
            })
            .then(r => r.json())
            .then(d => {
                closeRestoreDialog();
                if (d.success) {
                    location.reload();
                } else {
                    Swal.fire({ icon: 'error', title: '还原失败', text: d.message });
                }
            });
        }

        function showClearDialog() {
            document.getElementById('clearDialog').showModal();
        }

        function closeClearDialog() {
            document.getElementById('clearDialog').close();
        }

        function confirmClear() {
            fetch('/trash/clear', { method: 'POST' })
            .then(r => r.json())
            .then(d => {
                closeClearDialog();
                Swal.fire(I18n.t('common.error'), d.message, 'error');
                if (d.success) location.reload();
            });
        }
        I18n.setLang(I18n.lang);
    </script>
</body>
</html>
