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

{% block title %}Restaurar Backup - {{ block.super }}{% endblock %}

{% block extra_css %}
<style>
    .restaurar-hero {
        background: linear-gradient(135deg, #5f1d1d, #7a1f1f);
        color: #fff;
        border-radius: 14px;
        padding: 2rem 2.5rem;
        margin-bottom: 1.5rem;
    }
    .backup-arquivo {
        cursor: pointer;
        border: 2px solid #dee2e6;
        border-radius: 12px;
        padding: .75rem 1rem;
        width: 100%;
        text-align: left;
        background: #fff;
        transition: all .15s ease-in-out;
    }
    .backup-arquivo:hover {
        border-color: #0d6efd;
        box-shadow: 0 2px 10px rgba(13, 110, 253, .15);
    }
    .backup-arquivo.selecionado {
        border-color: #dc3545;
        background: #fff5f5;
    }
</style>
{% endblock %}

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

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

        <div class="restaurar-hero d-flex align-items-center flex-wrap">
            <i class="bi bi-arrow-counterclockwise fs-1 me-3"></i>
            <div>
                <h2 class="mb-1"><strong>Restaurar Backup</strong></h2>
                <p class="mb-0">Volta os dados da loja para um backup escolhido. Somente o Administrador pode usar esta tela.</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 restaurado com sucesso!</strong><br>{{ message }}</div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
                {% endif %}
            {% endfor %}
        {% endif %}

        <div class="alert alert-warning d-flex align-items-start gap-2">
            <i class="bi bi-exclamation-octagon fs-4"></i>
            <div>
                <strong>Atenção:</strong> restaurar substitui <strong>tudo</strong> o que foi registrado
                (vendas, caixas, clientes, produtos) pelos dados da época do backup. Antes de continuar,
                <strong>feche o sistema em todas as outras máquinas</strong> e garanta que não há venda ou caixa em andamento.
            </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 1 — Encontre a pasta dos backups</h5>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2 mb-3">
                    <button type="button" class="btn btn-primary" id="btnAbrirNavegador">
                        <i class="bi bi-folder2-open"></i> Escolher pasta do backup
                    </button>
                    <button type="button" class="btn btn-success" id="btnPastaSistema">
                        <i class="bi bi-shield"></i> Backups do sistema
                    </button>
                </div>
                <div class="border rounded p-2 small bg-light" id="pastaEscolhidaLbl">
                    <i class="bi bi-folder-fill"></i> Nenhuma pasta escolhida ainda
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-4" id="cardArquivos" style="display: none;">
            <div class="card-header bg-white">
                <h5 class="mb-0 pt-2"><i class="bi bi-files"></i> Passo 2 — Escolha o backup desejado</h5>
            </div>
            <div class="card-body" id="listaArquivos">
            </div>
        </div>

        <form method="post" id="formRestaurar" action="{% url 'backup_restaurar_aplicar' %}">
            {% csrf_token %}
            <input type="hidden" name="arquivo" id="inputArquivo" value="">

            <div class="card shadow-sm mb-4">
                <div class="card-body text-center">
                    <p class="text-muted mb-3" id="lblArquivoEscolhido">Selecione um backup na lista acima</p>
                    <button type="button" class="btn btn-danger btn-lg px-5" id="btnRestaurar" data-bs-toggle="modal" data-bs-target="#modalConfirmacaoRestaurar" disabled>
                        <i class="bi bi-arrow-counterclockwise"></i> Restaurar Este Backup
                    </button>
                    <div class="mt-3 d-none" id="divProcessandoRestaurar">
                        <div class="spinner-border text-danger" role="status"></div>
                        <p class="mt-2 fw-bold">Restaurando dados, 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 dos backups</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">Os backups dentro desta pasta serão listados ao confirmar</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 da restauração -->
            <div class="modal fade" id="modalConfirmacaoRestaurar" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header bg-danger text-white">
                            <h5 class="modal-title"><i class="bi bi-exclamation-triangle"></i> Confirmar restauração</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="alert alert-danger">
                                <strong>Cuidado!</strong> Isto vai APAGAR os dados atuais e voltar o sistema para o backup abaixo:
                            </div>
                            <div class="border rounded p-3 bg-light">
                                <div class="fw-bold"><i class="bi bi-file-earmark-zip"></i> <span id="confirmarNomeArquivo"></span></div>
                                <div class="small mt-1" id="confirmarDetalhesArquivo"></div>
                            </div>
                            <p class="small text-muted mt-2 mb-0">
                                <i class="bi bi-shield-check text-success"></i>
                                Antes de substituir, o sistema salvará automaticamente uma cópia dos dados atuais
                                na pasta "backups", para o caso de se arrepender.
                            </p>
                        </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-danger" id="btnConfirmarRestaurar">
                                <i class="bi bi-arrow-counterclockwise"></i> Sim, restaurar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

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

{% block extra_js %}
<script>
    var pastaSistema = "{{ pasta_backups_sistema|escapejs }}";
    var pastaEscolhida = '';
    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');
    var modalRestaurarEl = document.getElementById('modalConfirmacaoRestaurar');
    var modalRestaurar = new bootstrap.Modal(modalRestaurarEl);
    var btnRestaurar = document.getElementById('btnRestaurar');
    var selecionado = null;

    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 = '';
                if (pastaAtual === '') {
                    html += '<div class="small text-muted px-2 mt-1 mb-1">Unidades disponíveis:</div>';
                }
                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>';
                });
                // backups encontrados dentro da pasta atual (clicáveis)
                data.arquivos_visiveis.forEach(function(a) {
                    html += '<button type="button" class="btn btn-danger-subtle border border-danger-subtle w-100 text-start d-flex align-items-center gap-2 py-2 mb-1 subarquivo" data-path="' + a.path.replace(/"/g, '&quot;') + '">' +
                        '<i class="bi bi-file-earmark-zip text-danger fs-5"></i>' +
                        '<span class="flex-grow-1"><span class="fw-bold d-block">' + a.nome + '</span>' +
                        '<span class="small text-muted">Gerado em ' + a.quando + ' &mdash; ' + a.tamanho + ' (clique para restaurar este)</span></span></button>';
                });
                if (!data.subpastas.length && !data.arquivos_visiveis.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 está vazia.</div>';
                }
                listaSubpastas.innerHTML = html;

                document.querySelectorAll('.subpasta').forEach(function(btn) {
                    btn.addEventListener('click', function() { carregarPasta(btn.dataset.path); });
                });
                document.querySelectorAll('.subarquivo').forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        modalPasta.hide();
                        var arq = {path: btn.dataset.path, nome: btn.querySelector('.fw-bold').textContent};
                        selecionarArquivoDireto(arq);
                    });
                });
            })
            .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();
        selecionarPasta(pastaAtual);
    });

    document.getElementById('btnAbrirNavegador').addEventListener('click', function() {
        modalPasta.show();
        carregarPasta(pastaEscolhida);
    });

    document.getElementById('btnPastaSistema').addEventListener('click', function() {
        selecionarPasta(pastaSistema);
    });

    function selecionarPasta(pasta) {
        pastaEscolhida = pasta;
        document.getElementById('pastaEscolhidaLbl').innerHTML =
            '<i class="bi bi-folder-fill"></i> ' + pasta;
        carregarArquivos();
    }

    function carregarArquivos() {
        var lista = document.getElementById('listaArquivos');
        var card = document.getElementById('cardArquivos');
        card.style.display = '';
        lista.innerHTML = '<div class="text-center py-4"><div class="spinner-border text-primary"></div></div>';
        fetch('/backup/restaurar/listar/?p=' + encodeURIComponent(pastaEscolhida))
            .then(function(resp) { return resp.json(); })
            .then(function(data) {
                if (data.erro) {
                    lista.innerHTML = '<div class="alert alert-danger m-2">' + data.erro + '</div>';
                    return;
                }
                if (!data.arquivos.length) {
                    lista.innerHTML = '<div class="alert alert-light border text-center mb-0">' +
                        '<i class="bi bi-info-circle"></i> Nenhum arquivo de backup encontrado nesta pasta. ' +
                        'Procure a pasta onde o backup foi salvo (ex.: dentro do pendrive).</div>';
                    return;
                }
                var html = '';
                data.arquivos.forEach(function(a) {
                    html += '<button type="button" class="backup-arquivo mb-2" data-path="' + a.path.replace(/"/g, '&quot;') + '" data-nome="' + a.nome + '" data-quando="' + a.quando + '" data-tamanho="' + a.tamanho + '">' +
                        '<div class="d-flex justify-content-between align-items-center">' +
                        '<div><div class="fw-bold"><i class="bi bi-file-earmark-zip text-danger"></i> ' + a.nome + '</div>' +
                        '<div class="small text-muted">Gerado em ' + a.quando + ' &mdash; ' + a.tamanho + '</div></div>' +
                        '<i class="bi bi-check-circle-fill text-danger fs-4 icone-sel"></i></div></button>';
                });
                lista.innerHTML = html;

                document.querySelectorAll('.backup-arquivo').forEach(function(btn) {
                    btn.addEventListener('click', function() { selecionarArquivo(btn); });
                });
            })
            .catch(function() {
                lista.innerHTML = '<div class="alert alert-danger m-2">Não foi possível listar os backups desta pasta.</div>';
            });
    }

    function selecionarArquivoDireto(arq) {
        selecionado = {path: arq.path, nome: arq.nome, quando: '', tamanho: ''};
        document.querySelectorAll('.backup-arquivo').forEach(function(b) {
            b.classList.remove('selecionado');
        });
        document.getElementById('inputArquivo').value = arq.path;
        document.getElementById('lblArquivoEscolhido').innerHTML =
            'Backup selecionado: <strong>' + arq.nome + '</strong>';
        btnRestaurar.disabled = false;
        document.getElementById('cardArquivos').style.display = '';
        document.getElementById('listaArquivos').innerHTML =
            '<div class="alert alert-success border m-0 mb-0"><i class="bi bi-check-circle"></i> ' +
            '<strong>' + arq.nome + '</strong> selecionado atrav\u00e9s do explorador de pastas. ' +
            'Revise o caminho e clique em "Restaurar Este Backup" abaixo.</div>';
    }

    function selecionarArquivo(btn) {
        selecionado = btn.dataset;
        document.querySelectorAll('.backup-arquivo').forEach(function(b) {
            b.classList.toggle('selecionado', b === btn);
        });
        document.getElementById('inputArquivo').value = selecionado.path;
        document.getElementById('lblArquivoEscolhido').innerHTML =
            'Backup selecionado: <strong>' + selecionado.nome + '</strong> (gerado em ' + selecionado.quando + ')';
        btnRestaurar.disabled = false;
    }

    modalRestaurarEl.addEventListener('show.bs.modal', function() {
        if (!selecionado) { modalRestaurarEl.hide(); return; }
        document.getElementById('confirmarNomeArquivo').textContent = selecionado.nome;
        document.getElementById('confirmarDetalhesArquivo').textContent =
            'Momento do backup: ' + selecionado.quando + ' — Tamanho: ' + selecionado.tamanho;
    });

    document.getElementById('btnConfirmarRestaurar').addEventListener('click', function() {
        modalRestaurar.hide();
        btnRestaurar.disabled = true;
        btnRestaurar.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Restaurando...';
        document.getElementById('divProcessandoRestaurar').classList.remove('d-none');
        document.getElementById('formRestaurar').submit();
    });
</script>
{% endblock %}