{{--
    O painel do pedido de atualizacao.

    A mesma caixa serve aos dois catalogos: programas e programetes, que passam
    pelo download, e campanhas e vinhetas, que ja chegam prontas. Quem cria o
    pedido e cada tela; acompanhar e sempre igual, entao mora aqui.

    A tela chama window.contentJob.acompanhar() depois de abrir um pedido.
--}}

<div class="job" id="pedido" hidden>
    <header class="job__head">
        <div>
            <h2 class="job__title" id="pedido-titulo">Pedido</h2>
            <p class="job__sub" id="pedido-sub"></p>
        </div>

        <div class="job__acts">
            <button class="btn btn-primary app-save" type="button" id="pedido-enviar" hidden>
                <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                <span class="app-save__label">Enviar pros servidores</span>
            </button>
        </div>
    </header>

    <div class="job__steps">
        <span class="job__step" id="etapa-1"><b>1</b> <span id="etapa-1-txt">Baixando o conteúdo</span></span>
        <span class="job__line" id="linha-1"></span>
        <span class="job__step" id="etapa-2"><b>2</b> Enviando pros servidores</span>
    </div>

    <div class="job__bar" id="pedido-barra"><span style="width: 0"></span></div>
    <p class="job__count" id="pedido-contagem"></p>

    <div class="job__list mgr-scroll" id="pedido-lista"></div>
</div>

<script>
window.contentJob = (function () {
    'use strict';

    var token = document.querySelector('meta[name="csrf-token"]');
    var caixa = document.getElementById('pedido');
    var pedido = null;
    var relogio = null;

    var TITULOS = {
        download: 'Baixando o conteúdo',
        ready: 'Conteúdo baixado',
        deploy: 'Enviando pros servidores',
        done: 'Pedido concluído',
        failed: 'O pedido falhou'
    };

    /* campaigns and jingles skip the download: the audio is already there */
    var TITULOS_ADD = {
        download: 'Preparando o pedido',
        ready: 'Áudios prontos na máquina de conteúdo',
        deploy: 'Enviando pros servidores',
        done: 'Pedido concluído',
        failed: 'O pedido falhou'
    };

    function escapa(valor) {
        return String(valor === null || valor === undefined ? '' : valor).replace(/[&<>"]/g, function (c) {
            return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c];
        });
    }

    function marcar(id, classe) {
        document.getElementById(id).className = 'job__step' + (classe ? ' ' + classe : '');
    }

    function listaDeItens(itens) {
        if (! itens.length) {
            return '<p class="job__none">Nenhum conteúdo neste pedido.</p>';
        }

        var cor = { pending: '', running: 'is-run', done: 'is-done', failed: 'is-bad', skipped: 'is-done' };

        return itens.map(function (item) {
            return '<div class="job__item">'
                + '<span class="job__dot ' + (cor[item.state] || '') + '"></span>'
                + '<span class="job__item-name">' + escapa(item.name) + '</span>'
                + '<span class="job__item-files">' + item.files_done + '/' + item.files_total + '</span>'
                + (item.state === 'failed'
                    ? '<button class="btn btn-sm" type="button" data-repetir="' + item.id + '">Repetir</button>'
                      + '<span class="job__item-err">' + escapa(item.error) + '</span>'
                    : '')
                + '</div>';
        }).join('');
    }

    function listaDeDestinos(destinos) {
        if (! destinos.length) {
            return '<p class="job__none">Nenhum servidor neste envio.</p>';
        }

        var cor = { pending: '', running: 'is-run', done: 'is-done', failed: 'is-bad' };

        return destinos.map(function (destino) {
            return '<div class="job__item">'
                + '<span class="job__dot ' + (cor[destino.state] || '') + '"></span>'
                + '<span class="job__item-name">' + escapa(destino.name) + '</span>'
                + '<span class="job__item-files">' + destino.items_done + '/' + destino.items_total + '</span>'
                + (destino.state === 'failed' ? '<span class="job__item-err">' + escapa(destino.error) + '</span>' : '')
                + '</div>';
        }).join('');
    }

    function desenhar(dados) {
        pedido = dados.job;

        caixa.hidden = false;

        var itens = dados.items || [];
        var destinos = dados.targets || [];
        var noEnvio = pedido.stage === 'deploy' || pedido.stage === 'done';
        var adicional = itens.length > 0 && itens[0].source === 'library_add';
        var titulos = adicional ? TITULOS_ADD : TITULOS;

        document.getElementById('pedido-titulo').textContent = titulos[pedido.stage] || 'Pedido';
        document.getElementById('etapa-1-txt').textContent = adicional ? 'Áudios na máquina de conteúdo' : 'Baixando o conteúdo';

        document.getElementById('pedido-sub').textContent = 'Pedido #' + pedido.id + ' · '
            + (pedido.scope === 'all' ? 'todos os conteúdos' : itens.length + (itens.length === 1 ? ' conteúdo' : ' conteúdos'))
            + (pedido.error ? ' · ' + pedido.error : '');

        /* step 1 closes when the download ends; step 2 only exists after it */
        marcar('etapa-1', pedido.stage === 'download' ? 'is-now' : (pedido.stage === 'failed' && ! noEnvio ? 'is-bad' : 'is-done'));
        marcar('etapa-2', pedido.stage === 'deploy' ? 'is-now' : (pedido.stage === 'done' ? 'is-done' : (pedido.stage === 'failed' && noEnvio ? 'is-bad' : '')));
        document.getElementById('linha-1').className = 'job__line' + (noEnvio || pedido.stage === 'ready' ? ' is-done' : '');

        var feitos = noEnvio
            ? destinos.filter(function (d) { return d.state === 'done'; }).length
            : itens.filter(function (i) { return i.state === 'done' || i.state === 'skipped'; }).length;

        var total = noEnvio ? destinos.length : itens.length;
        var porcento = total > 0 ? Math.round(feitos * 100 / total) : 0;

        var barra = document.getElementById('pedido-barra');

        barra.className = 'job__bar' + (pedido.stage === 'failed' ? ' is-bad' : '');
        barra.firstElementChild.style.width = porcento + '%';

        document.getElementById('pedido-contagem').textContent = noEnvio
            ? feitos + ' de ' + total + (total === 1 ? ' servidor atualizado' : ' servidores atualizados')
            : feitos + ' de ' + total + (adicional
                ? (total === 1 ? ' conteúdo pronto' : ' conteúdos prontos')
                : (total === 1 ? ' conteúdo baixado' : ' conteúdos baixados'))
              + (dados.failed ? ' · ' + dados.failed + ' com falha' : '');

        var enviar = document.getElementById('pedido-enviar');

        enviar.hidden = pedido.stage !== 'ready';
        enviar.classList.remove('is-saving');

        document.getElementById('pedido-lista').innerHTML = noEnvio ? listaDeDestinos(destinos) : listaDeItens(itens);
    }

    /* polls only while the job moves: a finished job never changes */
    function acompanhar() {
        fetch('{{ route('admin.contents.jobs.current') }}', { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (dados) {
                if (! dados || ! dados.job) {
                    caixa.hidden = true;
                    parar();

                    return;
                }

                desenhar(dados);

                if (dados.job.stage === 'download' || dados.job.stage === 'deploy') {
                    comecar();
                } else {
                    parar();
                }
            })
            .catch(parar);
    }

    function comecar() {
        if (! relogio) {
            relogio = setInterval(acompanhar, 2500);
        }
    }

    function parar() {
        if (relogio) {
            clearInterval(relogio);
            relogio = null;
        }
    }

    function cabecalhos() {
        return {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': token ? token.content : ''
        };
    }

    document.getElementById('pedido-enviar').addEventListener('click', function () {
        var botao = this;

        if (! pedido || botao.classList.contains('is-saving')) {
            return;
        }

        botao.classList.add('is-saving');

        fetch('{{ url('manager/contents/jobs') }}/' + pedido.id + '/deploy', {
            method: 'POST',
            headers: cabecalhos(),
            body: JSON.stringify({ _token: token ? token.content : '' })
        }).then(function (r) { return r.json(); })
          .then(function () { acompanhar(); })
          .catch(function () { botao.classList.remove('is-saving'); });
    });

    document.getElementById('pedido-lista').addEventListener('click', function (evento) {
        var botao = evento.target.closest('[data-repetir]');

        if (! botao || ! pedido) {
            return;
        }

        botao.disabled = true;

        fetch('{{ url('manager/contents/jobs') }}/' + pedido.id + '/retry/' + botao.dataset.repetir, {
            method: 'POST',
            headers: cabecalhos(),
            body: JSON.stringify({ _token: token ? token.content : '' })
        }).then(function () { acompanhar(); })
          .catch(function () { botao.disabled = false; });
    });

    acompanhar();

    return { acompanhar: acompanhar, cabecalhos: cabecalhos };
}());
</script>