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

{% block title %}恢复备份 - {{ block.super }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="card-title mb-0">恢复备份</h2>
                        <p class="text-muted">从备份恢复系统数据</p>
                    </div>
                    <a href="{% url 'backup_list' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left me-1"></i> 返回备份列表
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5 class="card-title mb-0">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i> 恢复确认
                </h5>
            </div>
            <div class="card-body">
                <div class="alert alert-danger">
                    <div class="d-flex">
                        <div class="flex-shrink-0 me-2">
                            <i class="bi bi-exclamation-triangle-fill"></i>
                        </div>
                        <div>
                            <h6 class="alert-heading">警告！恢复备份将覆盖当前数据</h6>
                            <p class="mb-0">此操作不可逆，将用备份数据替换当前系统中的所有数据。请确保已经了解可能的影响。</p>
                        </div>
                    </div>
                </div>
                
                <h5 class="mb-3">备份详情</h5>
                <div class="table-responsive mb-4">
                    <table class="table table-bordered">
                        <tbody>
                            <tr>
                                <th style="width: 150px;">备份名称</th>
                                <td>{{ backup.name }}</td>
                            </tr>
                            <tr>
                                <th>创建时间</th>
                                <td>{{ backup.created_at|date:"Y-m-d H:i:s" }}</td>
                            </tr>
                            <tr>
                                <th>创建者</th>
                                <td>{{ backup.created_by }}</td>
                            </tr>
                            <tr>
                                <th>备份大小</th>
                                <td>{{ backup.size }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <form method="post" action="{% url 'restore_backup' backup.name %}" id="restoreForm">
                    {% csrf_token %}
                    
                    <div class="mb-3">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="restore_db" name="restore_db" checked disabled>
                            <label class="form-check-label" for="restore_db">
                                恢复数据库 <span class="badge bg-success">必选</span>
                            </label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" id="restore_media" name="restore_media" checked>
                            <label class="form-check-label" for="restore_media">
                                恢复媒体文件
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-check mb-4">
                        <input class="form-check-input" type="checkbox" id="confirm_restore" name="confirm_restore" required>
                        <label class="form-check-label" for="confirm_restore">
                            <strong>我确认要恢复此备份，并且了解此操作会覆盖当前系统数据</strong>
                        </label>
                    </div>
                    
                    <div class="d-flex justify-content-between mt-4">
                        <a href="{% url 'backup_list' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-circle me-1"></i> 取消
                        </a>
                        <button type="button" class="btn btn-warning" id="confirmRestoreBtn">
                            <i class="bi bi-arrow-clockwise me-1"></i> 恢复备份
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header">
                <h5 class="card-title mb-0">帮助信息</h5>
            </div>
            <div class="card-body">
                <h6 class="mb-3">恢复操作会导致：</h6>
                <ul class="text-muted mb-4">
                    <li>当前系统所有数据被替换</li>
                    <li>恢复后的数据将回退到备份时的状态</li>
                    <li>备份后的新数据将丢失</li>
                    <li>当前的会话可能会失效</li>
                </ul>
                
                <h6 class="mb-3">建议在恢复前：</h6>
                <ul class="text-muted mb-4">
                    <li>创建当前系统的备份</li>
                    <li>通知所有用户暂停使用系统</li>
                    <li>选择系统使用较少的时间进行恢复</li>
                </ul>
                
                <div class="alert alert-primary">
                    <i class="bi bi-info-circle-fill me-2"></i>
                    恢复完成后可能需要重新登录系统
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 确认恢复模态框 -->
<div class="modal fade" id="confirmRestoreModal" tabindex="-1" aria-labelledby="confirmRestoreModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="confirmRestoreModalLabel">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i> 最终确认
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="fw-bold">请输入 "RESTORE" 确认恢复操作：</p>
                <input type="text" class="form-control" id="confirmText" placeholder="请输入 RESTORE">
                <p class="text-danger mt-3">
                    <i class="bi bi-exclamation-triangle-fill me-1"></i>
                    此操作完成后，当前系统中的所有数据将被替换为备份中的数据，无法撤销！
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="finalRestoreBtn" disabled>
                    <i class="bi bi-arrow-clockwise me-1"></i> 确认恢复
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 恢复确认
        const confirmRestoreBtn = document.getElementById('confirmRestoreBtn');
        const confirmRestoreModal = new bootstrap.Modal(document.getElementById('confirmRestoreModal'));
        const confirmText = document.getElementById('confirmText');
        const finalRestoreBtn = document.getElementById('finalRestoreBtn');
        const restoreForm = document.getElementById('restoreForm');
        
        if (confirmRestoreBtn && confirmText && finalRestoreBtn && restoreForm) {
            confirmRestoreBtn.addEventListener('click', function() {
                const confirmCheckbox = document.getElementById('confirm_restore');
                if (confirmCheckbox && confirmCheckbox.checked) {
                    confirmRestoreModal.show();
                } else {
                    alert('请先勾选确认框');
                }
            });
            
            confirmText.addEventListener('input', function() {
                finalRestoreBtn.disabled = this.value !== 'RESTORE';
            });
            
            finalRestoreBtn.addEventListener('click', function() {
                restoreForm.submit();
            });
        }
    });
</script>
{% endblock %}