{% extends 'base.html' %}
{% load static %}

{% block title %}Backup do Sistema - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .backup-hero {
        background: linear-gradient(135deg, #1d3a5f, #14532d);
        color: #fff;
        border-radius: 14px;
        padding: 2rem 2.5rem;
        margin-bottom: 1.5rem;
    }
    .backup-hero i.icone-principal {
        font-size: 3.5rem;
        vertical-align: middle;
        margin-right: 1rem;
    }
    .unidade-card {
        cursor: pointer;
        border: 2px solid #dee2e6;
        border-radius: 12px;
        padding: 1rem 1.25rem;
        height: 100%;
        transition: all .15s ease-in-out;
        background: #fff;
        text-align: left;
        width: 100%;
    }
    .unidade-card:hover {
        border-color: #0d6efd;
        box-shadow: 0 2px 10px rgba(13, 110, 253, .15);
        transform: translateY(-2px);
    }
    .unidade-card.selecionada {
        border-color: #198754;
        background: #f0fff4;
    }
    .unidade-card .ic-usb {
        font-size: 2rem;
        color: #0d6efd;
    }
    .unidade-card .ic-hd {
        font-size: 2rem;
        color: #6c757d;
    }
    .barra-livre {
        height: 6px;
        border-radius: 4px;
        background: #e9ecef;
        margin-top: .35rem;
        overflow: hidden;
    }
    .barra-livre span {
        display: block;
        height: 100%;
        background: #198754;
    }
    .destino-box {
        background: #f8f9fa;
        border: 1px dashed #adb5bd;
        border-radius: 12px;
        padding: 1.25rem;
    }
    #btnGerar:disabled {
        cursor: not-allowed;
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{% url 'dashboard' %}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Voltar
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-10">

        <div class="backup-hero d-flex align-items-center flex-wrap">
            <i class="bi bi-shield-check icone-principal"></i>
            <div>
                <h2 class="mb-1"><strong>Backup do Sistema</strong></h2>
                <p class="mb-0">Salve uma cópia de segurança dos dados da loja em um local seguro.</p>
            </div>
        </div>

        {% if messages %}
            {% for message in messages %}
                {% if message.tags == 'error' %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="bi bi-exclamation-triangle"></i> {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                {% else %}
                <div class="alert alert-success alert-dismissible fade show d-flex align-items-center" role="alert">
                    <i class="bi bi-check-circle-fill fs-4 me-2"></i>
                    <div><strong>Backup gerado com sucesso!</strong><br>{{ message }}</div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                {% endif %}
            {% endfor %}
        {% endif %}

        {% if eh_admin %}
        <div class="d-flex justify-content-end mb-3">
            <a href="{% url 'backup_restaurar' %}" class="btn btn-danger ms-auto">
                <i class="bi bi-arrow-counterclockwise"></i> Restaurar Backup
            </a>
        </div>
        {% endif %}

        <div class="card shadow-sm mb-4">
            <div class="card-body text-center py-4">
                <p class="mb-1 text-muted"><i class="bi bi-database"></i> Dados que serão copiados</p>
                <h4 class="mb-3">Banco de dados da loja</h4>
                <span class="badge bg-success fs-6">
                    <i class="bi bi-file-earmark-check"></i>
                    {% if db_existe %} Arquivo saudável — tamanho: {{ db_tamanho }}{% else %} Banco não encontrado!{% endif %}
                </span>
            </div>
        </div>

        {% if db_existe %}
        <form method="post" id="formBackup">
            {% csrf_token %}
            <input type="hidden" name="destino" id="inputDestino" value="{% if input_destino %}{{ input_destino }}{% endif %}">

            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0 pt-2"><i class="bi bi-usb-drive"></i> Passo 1 — Escolha onde salvar (pendrive ou disco)</h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">Clique em uma unidade abaixo para <strong>abrir e navegar</strong> até a pasta desejada. Conecte o pendrive e clique em <strong>Atualizar</strong> se não aparecer.</p>

                    <div class="row g-3 mb-2" id="listaUnidades">
                        {% for u in unidades %}
                        <div class="col-6 col-md-4 col-lg-3">
                            <button type="button" class="unidade-card" data-destino="{{ u.letra }}">
                                <i class="bi {% if u.removivel %}bi-usb-drive ic-usb{% else %}bi-device-hdd ic-hd{% endif %}"></i>
                                <div class="fw-bold mt-1">{{ u.rotulo }} ({{ u.letra }})</div>
                                <div class="small text-muted">Livre: {{ u.livre_fmt }}</div>
                                <div class="barra-livre"><span style="width: 50%;"></span></div>
                            </button>
                        </div>
                        {% empty %}
                        <div class="col-12">
                            <div class="alert alert-light border text-center mb-0">
                                <i class="bi bi-info-circle"></i> Nenhuma unidade encontrada. Conecte o pendrive e clique em <strong>Atualizar unidades</strong>.
                            </div>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="text-end">
                        <button type="button" class="btn btn-secondary btn-sm" onclick="location.reload()">
                            <i class="bi bi-arrow-clockwise"></i> Atualizar unidades
                        </button>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0 pt-2"><i class="bi bi-folder2-open"></i> Passo 2 — Confirme o destino</h5>
                </div>
                <div class="card-body">
                    <div class="destino-box">
                        <label class="form-label fw-bold">
                            <i class="bi bi-pin-angle"></i> Pasta selecionada:
                        </label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text"><i class="bi bi-folder-fill"></i></span>
                            <input type="text" class="form-control" id="destinoVisivel"
                                   placeholder="Clique em uma unidade acima ou digite o caminho completo (ex.: E:\Backups)"
                                   autocomplete="off">
                        </div>
                        <div class="d-flex flex-wrap gap-2 mt-3">
                            <button type="button" class="btn btn-primary" id="btnAbrirNavegador" data-path="">
                                <i class="bi bi-folder2-open"></i> Escolher pasta pelo explorador
                            </button>
                            <button type="button" class="btn btn-success" id="btnPastaSistema">
                                <i class="bi bi-shield"></i> Salvar na pasta Backups do sistema
                            </button>
                        </div>
                        <small class="text-muted d-block mt-2">
                            Dica: você pode digitar ou colar qualquer caminho, como uma subpasta dentro do pendrive (ex.: <code>E:\Backups\Novembro</code>).
                        </small>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm mb-4">
                <div class="card-body text-center">
                    <p class="text-muted mb-3"><i class="bi bi-arrow-down-up"></i> Passo 3 — Clique no botão para gerar a cópia</p>
                    <button type="button" class="btn btn-success btn-lg px-5" id="btnGerar" data-bs-toggle="modal" data-bs-target="#modalConfirmacao" disabled>
                        <i class="bi bi-cloud-arrow-down"></i> Gerar Backup Agora
                    </button>
                    <div class="mt-3 d-none" id="divProcessando">
                        <div class="spinner-border text-success" role="status"></div>
                        <p class="mt-2 fw-bold">Salvando cópia de segurança, aguarde...</p>
                    </div>
                </div>
            </div>

            <!-- Modal de navegação de pastas -->
            <div class="modal fade" id="modalPasta" tabindex="-1">
                <div class="modal-dialog modal-lg modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header bg-primary text-white">
                            <h5 class="modal-title"><i class="bi bi-folder2-open"></i> Escolha a pasta para salvar</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="d-flex align-items-center gap-2 mb-3">
                                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnPastaAcima">
                                    <i class="bi bi-arrow-up"></i> Voltar
                                </button>
                                <div class="flex-grow-1 border rounded p-2 small bg-light" id="pastaAtualBreadcrumb">
                                    Meu Computador
                                </div>
                            </div>
                            <div class="border rounded p-2" id="listaSubpastas" style="min-height: 250px; max-height: 350px; overflow-y: auto;">
                                <div class="text-center py-5">
                                    <div class="spinner-border text-primary"></div>
                                </div>
                            </div>
                            <div class="d-flex align-items-center gap-2 mt-3">
                                <i class="bi bi-folder-chevron fs-4 text-warning"></i>
                                <div>
                                    <div class="fw-bold" id="pastaSelecionadaModal">Meu Computador</div>
                                    <div class="small text-muted">A cópia será salva dentro da pasta destacada acima (a pasta aberta agora)</div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                            <button type="button" class="btn btn-success" id="btnUsarPasta" disabled>
                                <i class="bi bi-check2"></i> Usar esta pasta
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Modal de confirmação -->
            <div class="modal fade" id="modalConfirmacao" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header bg-success text-white">
                            <h5 class="modal-title"><i class="bi bi-question-circle"></i> Confirmar backup</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-2">Deseja gerar o backup agora?</p>
                            <p class="mb-0">Os dados serão copiados para:</p>
                            <div class="alert alert-light border fw-bold mb-0"><i class="bi bi-folder-fill"></i> <span id="destinoConfirmado"></span></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Não, voltar</button>
                            <button type="button" class="btn btn-success" id="btnConfirmarModal">
                                <i class="bi bi-check-circle"></i> Sim, gerar backup
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        {% endif %}

    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    var destinoSistema = "{{ pastas_backups|escapejs }}";
    var modalEl = document.getElementById('modalConfirmacao');
    var modal = new bootstrap.Modal(modalEl);
    var destinoVisivel = document.getElementById('destinoVisivel');
    var inputDestino = document.getElementById('inputDestino');
    var btnGerar = document.getElementById('btnGerar');

    function atualizarEstado() {
        var valor = destinoVisivel.value.trim();
        inputDestino.value = valor;
        btnGerar.disabled = (valor === '');
        document.querySelectorAll('.unidade-card').forEach(function(card) {
            card.classList.toggle('selecionada', card.dataset.destino === valor);
        });
    }

    destinoVisivel.addEventListener('input', atualizarEstado);

    document.querySelectorAll('.unidade-card').forEach(function(card) {
        card.addEventListener('click', function() {
            abrirNavegadorEm(card.dataset.destino, true);
        });
    });

    document.getElementById('btnPastaSistema').addEventListener('click', function() {
        destinoVisivel.value = destinoSistema;
        atualizarEstado();
    });

    // ---------------- Navegador de pastas ----------------
    var pastaAtual = '';
    var modalPastaEl = document.getElementById('modalPasta');
    var modalPasta = new bootstrap.Modal(modalPastaEl);
    var listaSubpastas = document.getElementById('listaSubpastas');
    var breadcrumb = document.getElementById('pastaAtualBreadcrumb');
    var pastaSelNome = document.getElementById('pastaSelecionadaModal');
    var btnUsarPasta = document.getElementById('btnUsarPasta');
    var btnPastaAcima = document.getElementById('btnPastaAcima');

    function abrirNavegadorEm(path, substituirCampo) {
        if (substituirCampo) pastaAtual = path.trim();
        modalPasta.show();
        carregarPasta(pastaAtual);
    }

    function carregarPasta(path) {
        listaSubpastas.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary"></div></div>';
        fetch('/backup/navegar/?p=' + encodeURIComponent(path))
            .then(function(resp) { return resp.json(); })
            .then(function(data) {
                if (data.erro) {
                    listaSubpastas.innerHTML = '<div class="alert alert-danger m-2">' + data.erro + '</div>';
                    btnPastaAcima.dataset.pai = '';
                    return;
                }
                pastaAtual = data.caminho === 'Meu Computador' ? '' : data.caminho;
                if (pastaAtual === '') {
                    breadcrumb.textContent = 'Meu Computador';
                    pastaSelNome.textContent = 'Selecione uma unidade abaixo';
                    btnUsarPasta.disabled = true;
                    btnPastaAcima.style.display = 'none';
                } else {
                    breadcrumb.textContent = pastaAtual;
                    pastaSelNome.textContent = pastaAtual;
                    btnUsarPasta.disabled = false;
                    btnPastaAcima.style.display = '';
                }
                btnPastaAcima.dataset.pai = data.pai || '';

                var html = '';
                data.subpastas.forEach(function(sp) {
                    html += '<button type="button" class="btn btn-light border w-100 text-start d-flex align-items-center gap-2 py-2 mb-1 subpasta" data-path="' + sp.path.replace(/"/g, '&quot;') + '">' +
                        '<i class="bi bi-folder-fill text-warning fs-5"></i> <span>' + sp.nome + '</span></button>';
                });
                if (pastaAtual === '') {
                    html += '<div class="small text-muted px-2 mt-2 mb-1">Unidades disponíveis:</div>';
                }
                if (!data.subpastas.length && pastaAtual !== '') {
                    html = '<div class="text-center text-muted py-4"><i class="bi bi-folder fs-1 d-block mb-2"></i>Esta pasta não possui subpastas.</div>';
                }
                listaSubpastas.innerHTML = html;

                document.querySelectorAll('.subpasta').forEach(function(btn) {
                    btn.addEventListener('click', function() { carregarPasta(btn.dataset.path); });
                });
            })
            .catch(function() {
                listaSubpastas.innerHTML = '<div class="alert alert-danger m-2">Não foi possível abrir o local.</div>';
            });
    }

    btnPastaAcima.addEventListener('click', function() {
        carregarPasta(btnPastaAcima.dataset.pai);
    });

    btnUsarPasta.addEventListener('click', function() {
        modalPasta.hide();
        destinoVisivel.value = pastaAtual;
        atualizarEstado();
        destinoVisivel.closest('.destino-box').scrollIntoView({behavior: 'smooth'});
    });

    document.getElementById('btnAbrirNavegador').addEventListener('click', function() {
        abrirNavegadorEm(destinoVisivel.value, true);
    });

    modalEl.addEventListener('show.bs.modal', function() {
        document.getElementById('destinoConfirmado').textContent = destinoVisivel.value;
    });

    document.getElementById('btnConfirmarModal').addEventListener('click', function() {
        modal.hide();
        btnGerar.disabled = true;
        btnGerar.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Gerando...';
        document.getElementById('divProcessando').classList.remove('d-none');
        document.getElementById('formBackup').submit();
    });
</script>
{% endblock %}