@section('title', 'Servidores')

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/manager-servers.css') }}">
@endsection

@include('admin/includes/header')

<div class="mgr-head">
    <div>
        <h1>Servidores</h1>
        <p>{{ $allServers->total() }} {{ $allServers->total() == 1 ? 'servidor cadastrado' : 'servidores cadastrados' }}. A ocupação considera os streams criados no servidor.</p>
    </div>
</div>

@if (\Session::has('success'))
    <div class="alert">{!! \Session::get('success') !!}</div>
    @php Session::forget('success'); @endphp
@endif

@if($allServers->count() == 0)
    <div class="card"><p class="srv__empty">Nenhum servidor cadastrado.</p></div>
@else
    <div class="srv__grid">
        @foreach($allServers as $server)
            @php
                $data = $counts[$server->id] ?? null;
                $total = (int) ($data->total ?? 0);
                $suspended = (int) ($data->suspended ?? 0);
                $limit = (int) $server->limit;
                $usage = $limit > 0 ? min(100, round($total * 100 / $limit)) : 0;
            @endphp

            <article class="srv @if($master == $server->id) srv--main @endif">
                <header class="srv__head">
                    <div>
                        <h2 class="srv__name">
                            {{ $server->display }}
                            @if($master == $server->id)
                                <span class="srv__tag">principal</span>
                            @endif
                        </h2>
                        <p class="srv__ip">
                            @include('admin.includes.flag', ['code' => $server->location ?? 'br'])
                            <span>{{ $server->ip }}</span>
                        </p>
                    </div>

                    <span class="srv__count">{{ $total }}<small>de {{ $limit }}</small></span>
                </header>

                {{-- a barra diz de relance quanto do servidor já está tomado --}}
                <div class="srv__bar" role="img" aria-label="{{ $usage }}% do limite">
                    <span class="srv__bar-fill @if($usage >= 90) is-full @elseif($usage >= 70) is-high @endif" style="width: {{ $usage }}%"></span>
                </div>

                <dl class="srv__facts">
                    <div>
                        <dt>Streams</dt>
                        <dd>{{ $total }}</dd>
                    </div>
                    <div>
                        <dt>Suspensos</dt>
                        <dd class="@if($suspended) is-warn @endif">{{ $suspended }}</dd>
                    </div>
                    <div>
                        <dt>Ocupação</dt>
                        <dd>{{ $usage }}%</dd>
                    </div>
                </dl>

                <footer class="srv__acts">
                    <a class="btn" href="{{ route('admin.streams', $server->id) }}">
                        <i class="fa-solid fa-list-ul"></i>
                        <span>Ver streams</span>
                    </a>

                    <button class="btn actServer" type="button" data-action="startStreams"
                            data-nmserver="{{ $server->name }}" data-server="{{ $server->id }}">
                        <i class="fa-solid fa-circle-play"></i>
                        <span>Ligar streams</span>
                    </button>

                    <button class="btn actServer" type="button" data-action="startAutodjs"
                            data-nmserver="{{ $server->name }}" data-server="{{ $server->id }}">
                        <i class="fa-solid fa-volume-high"></i>
                        <span>Ligar Auto DJs</span>
                    </button>
                </footer>
            </article>
        @endforeach
    </div>

    {{ $allServers->links('vendor.pagination.default') }}
@endif

{{-- confirmação e acompanhamento moram no mesmo lugar: a segunda tela do modal
     mostra porta por porta o que o servidor respondeu --}}
<div class="mmodal" id="srvModal" hidden>
    <div class="mmodal__card mmodal__card--slim" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title" id="srvModal-title"></h2>
            <button class="mmodal__x" type="button" data-srv-close aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        <div class="mmodal__body">
            <p class="srv__ask" id="srvModal-ask"></p>

            <div class="srv__run" id="srvModal-run" hidden>
                <p class="srv__run-head">
                    <span id="srvModal-progress">0 de 0</span>
                    <span class="srv__run-bar"><span id="srvModal-bar"></span></span>
                </p>

                <ul class="srv__log" id="srvModal-log"></ul>
            </div>
        </div>

        <footer class="mmodal__foot">
            <button class="btn" type="button" data-srv-close id="srvModal-cancel">Cancelar</button>
            <button class="btn btn-primary" type="button" id="srvModal-ok">Confirmar</button>
        </footer>
    </div>
</div>

<script>
(function () {
    'use strict';

    /**
     * Ligar tudo de um servidor.
     *
     * As portas são pedidas uma a uma, e não todas de uma vez como antes: o
     * servidor recebia dezenas de chamadas no mesmo instante e a tela não tinha
     * como dizer em qual delas estava.
     */
    var modal = document.getElementById('srvModal');
    var title = document.getElementById('srvModal-title');
    var ask = document.getElementById('srvModal-ask');
    var runBox = document.getElementById('srvModal-run');
    var progress = document.getElementById('srvModal-progress');
    var bar = document.getElementById('srvModal-bar');
    var log = document.getElementById('srvModal-log');
    var ok = document.getElementById('srvModal-ok');
    var cancel = document.getElementById('srvModal-cancel');

    var choice = null;

    var routes = {
        listPorts: '{{ route('admin.listPorts') }}',
        batch: '{{ route('admin.serverBatch') }}'
    };

    function close() {
        modal.hidden = true;
        document.body.classList.remove('mgr-locked');
    }

    function post(url, data) {
        var body = new FormData();

        Object.keys(data).forEach(function (key) {
            var value = data[key];

            /* uma lista precisa ir campo a campo: append de um array manda o
               texto "8000,8010,..." e o servidor recusa por nao ser lista */
            if (Array.isArray(value)) {
                value.forEach(function (one) { body.append(key + '[]', one); });

                return;
            }

            body.append(key, value);
        });

        return fetch(url, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            body: body
        }).then(function (r) { return r.json(); });
    }

    function note(html, isError, tone) {
        var row = document.createElement('li');

        row.className = 'srv__log-item' + (isError ? ' is-err' : (tone ? ' is-' + tone : ''));
        row.innerHTML = html;
        log.appendChild(row);
        log.scrollTop = log.scrollHeight;
    }

    var TONES = {
        started: 'ok',
        already: 'ok',
        skipped: 'aviso',
        failed: 'erro'
    };

    function count(total, one, many) {
        return total + ' ' + (total === 1 ? one : many);
    }

    function runBatches(ports, size) {
        var done = 0;
        var counts = { started: 0, already: 0, skipped: 0, failed: 0 };
        var batches = [];

        for (var i = 0; i < ports.length; i += size) {
            batches.push(ports.slice(i, i + size));
        }

        function showProgress() {
            progress.textContent = done + ' de ' + ports.length;
            bar.style.width = Math.round(done * 100 / ports.length) + '%';
        }

        showProgress();

        /* um lote por vez: dentro dele o painel fala com o servidor em paralelo */
        return batches.reduce(function (queue, batch) {
            return queue.then(function () {
                return post(routes.batch, { action: choice.action, server: choice.id, ports: batch })
                    .then(function (answer) {
                        var items = (answer && answer.results) || [];

                        items.forEach(function (item) {
                            counts[item.state] = (counts[item.state] || 0) + 1;
                            note('<b>' + item.port + '</b> ' + item.message, item.state === 'failed', TONES[item.state]);
                        });

                        if (! items.length) {
                            note('<b>' + batch.join(', ') + '</b> sem resposta', true);
                        }
                    })
                    .catch(function () {
                        note('<b>' + batch.join(', ') + '</b> falhou', true);
                        counts.failed += batch.length;
                    })
                    .then(function () {
                        done += batch.length;
                        showProgress();
                    });
            });
        }, Promise.resolve()).then(function () {
            return counts;
        });
    }

    document.addEventListener('click', function (event) {
        var button = event.target.closest('.actServer');

        if (button) {
            choice = {
                action: button.dataset.action,
                id: button.dataset.server,
                name: button.dataset.nmserver
            };

            title.textContent = choice.action === 'startStreams' ? 'Ligar todos os streams' : 'Ligar todos os Auto DJs';
            ask.innerHTML = 'Confirma ligar tudo do servidor <b>' + choice.name + '</b>?';

            ask.hidden = false;
            runBox.hidden = true;
            log.innerHTML = '';
            ok.hidden = false;
            ok.disabled = false;
            cancel.textContent = 'Cancelar';

            modal.hidden = false;
            document.body.classList.add('mgr-locked');

            return;
        }

        if (event.target.closest('[data-srv-close]')) {
            close();
        }
    });

    ok.addEventListener('click', function () {
        ok.disabled = true;
        ask.hidden = true;
        runBox.hidden = false;
        cancel.textContent = 'Fechar';

        post(routes.listPorts, { id: choice.id }).then(function (answer) {
            var ports = (answer && answer.data) || [];

            if (! ports.length) {
                note('Nenhuma porta ativa neste servidor.', true);
                ok.hidden = true;

                return;
            }

            return runBatches(ports, answer.chunk || 25).then(function (counts) {
                note('<b>Concluído.</b> '
                    + count(counts.started, 'ligada', 'ligadas') + ', '
                    + counts.already + ' já no ar, '
                    + count(counts.skipped, 'ignorada', 'ignoradas') + ', '
                    + count(counts.failed, 'com falha', 'com falha'), counts.failed > 0);
                ok.hidden = true;
            });
        }).catch(function () {
            note('Não foi possível consultar as portas do servidor.', true);
            ok.hidden = true;
        });
    });

    document.addEventListener('keydown', function (event) {
        if (event.key === 'Escape' && ! modal.hidden && ok.hidden !== false) {
            close();
        }
    });
}());
</script>

@include('admin/includes/footer')