@section('title', 'Capas')

@section('head')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/manager-app.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/manager-covers.css') }}">
@endsection

@include('admin/includes/header')

<div class="mgr-head">
    <div>
        <h1>Cache de capas</h1>
        <p>Atualização e remoção das capas gravadas na cover-api. O identificador aparece na resposta da API, nos campos cache_id e artist_cache_id.</p>
    </div>
</div>

@if (! $configured)
    <div class="alert alert-danger">
        Falta a variável COVER_API_TOKEN no ambiente do painel. Enquanto ela não for definida, esta tela não consegue falar com a cover-api.
    </div>
@endif

<div class="alert" id="aviso" hidden></div>

<div class="app-grid app-grid--even">
    <section class="app-card">
        <header class="app-card__head">
            <div>
                <h2>Definir capa</h2>
                <p>A capa definida aqui passa a valer no lugar da busca automática e não expira.</p>
            </div>
        </header>

        <div class="app-card__body">
            <div class="app-fields">
                <label class="app-field is-wide">
                    <span class="form-label">Identificar por</span>

                    <select class="form-select" id="saveMode">
                        <option value="q">Metadado da música</option>
                        <option value="artist">Nome do artista</option>
                        <option value="id">Identificador</option>
                    </select>
                </label>

                <label class="app-field is-wide">
                    <span class="form-label" id="saveValueLabel">Metadado como a rádio transmite</span>
                    <input class="form-control" type="text" id="saveValue" autocomplete="off"
                           placeholder="Comunidade Católica Kairós - Posso Descansar">
                </label>

                <div class="app-field is-wide">
                    <button class="btn btn-sm app-save" type="button" id="btnSaveLookup">
                        <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                        <span class="app-save__label">Ver o que está gravado</span>
                    </button>
                </div>

                <div class="app-field is-wide" id="saveCurrent"></div>

                <label class="app-field is-wide">
                    <span class="form-label">Endereço da nova imagem</span>
                    <input class="form-control" type="url" id="saveImage" autocomplete="off" placeholder="https://...">
                </label>

                <div class="app-field is-wide" id="saveImagePreview"></div>
            </div>
        </div>

        <footer class="app-card__foot">
            <button class="btn btn-primary app-save" type="button" id="btnSave">
                <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                <span class="app-save__label">Salvar capa</span>
            </button>
        </footer>
    </section>

    <section class="app-card">
        <header class="app-card__head">
            <div>
                <h2>Remover do cache</h2>
                <p>A capa é apagada e uma nova busca acontece na próxima vez que a música tocar.</p>
            </div>
        </header>

        <div class="app-card__body">
            <div class="app-fields">
                <label class="app-field is-wide">
                    <span class="form-label">Identificador</span>
                    <input class="form-control cvr__mono" type="text" id="removeId" autocomplete="off"
                           placeholder="track:92de34c780832ca01a3616d69ef3e986">
                </label>

                <div class="app-field is-wide">
                    <button class="btn btn-sm app-save" type="button" id="btnRemoveLookup">
                        <i class="fa-solid fa-circle-notch fa-spin spin"></i>
                        <span class="app-save__label">Buscar</span>
                    </button>
                </div>

                <div class="app-field is-wide" id="removeResult"></div>
            </div>
        </div>
    </section>
</div>

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

    var ROUTES = {
        lookup: '{{ route('admin.covers.lookup') }}',
        save: '{{ route('admin.covers.save') }}',
        remove: '{{ route('admin.covers.remove') }}'
    };

    var TOKEN = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    var SEM_CAPA = 'https://cover-api.brascast.com/covers/default/no-cover.jpg';

    var enviando = false;

    function post(url, dados) {
        var corpo = new FormData();

        corpo.append('_token', TOKEN);

        Object.keys(dados).forEach(function (chave) {
            if (dados[chave] !== '' && dados[chave] != null) {
                corpo.append(chave, dados[chave]);
            }
        });

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

    var caixaAviso = document.getElementById('aviso');

    function aviso(tipo, texto) {
        caixaAviso.className = 'alert' + (tipo === 'ok' ? '' : ' alert-danger');
        caixaAviso.textContent = texto;
        caixaAviso.hidden = false;

        window.scrollTo({ top: 0, behavior: 'smooth' });
    }

    function escapar(valor) {
        var d = document.createElement('div');

        d.textContent = valor == null ? '' : String(valor);

        return d.innerHTML;
    }

    /* guards against a double submit and shows it on the button itself */
    function ocupar(botao) {
        botao.classList.add('is-saving');
        botao.disabled = true;
        enviando = true;
    }

    function liberar(botao) {
        botao.classList.remove('is-saving');
        botao.disabled = false;
        enviando = false;
    }

    function origem(item) {
        if (item.manual) {
            return 'definida manualmente';
        }

        if (item.source === 'fallback') {
            return 'sem capa encontrada';
        }

        return (item.source || 'origem desconhecida') + (item.score != null ? ', nota ' + item.score : '');
    }

    /* the stored record, with the cover next to it */
    function cartao(item, id, acao) {
        var imagem = item && item.image_url ? item.image_url : SEM_CAPA;
        var titulo = item
            ? escapar((item.artist || 'artista não identificado') + (item.track ? ' - ' + item.track : ''))
            : 'Nenhum registro gravado com este identificador';

        return '<div class="cvr__rec">'
            + '<img class="cvr__img" src="' + escapar(imagem) + '" alt="" onerror="this.src=\'' + SEM_CAPA + '\'">'
            + '<div class="cvr__body">'
                + '<div class="cvr__name">' + titulo + '</div>'
                + (item ? '<div class="cvr__meta">' + escapar(origem(item))
                    + (Number(item.v || 1) < 2 ? ', formato antigo' : '') + '</div>' : '')
                + (item && item.q_input ? '<div class="cvr__meta">Metadado: ' + escapar(item.q_input) + '</div>' : '')
                + '<div class="cvr__id">' + escapar(id) + '</div>'
                + (acao || '')
            + '</div>'
        + '</div>';
    }

    /* ---------- save ---------- */

    var saveMode = document.getElementById('saveMode');
    var saveValue = document.getElementById('saveValue');
    var saveImage = document.getElementById('saveImage');

    var ROTULOS = {
        q: ['Metadado como a rádio transmite', 'Comunidade Católica Kairós - Posso Descansar'],
        artist: ['Nome do artista', 'Comunidade Católica Kairós'],
        id: ['Identificador', 'track:92de34c780832ca01a3616d69ef3e986']
    };

    saveMode.addEventListener('change', function () {
        var r = ROTULOS[saveMode.value];

        document.getElementById('saveValueLabel').textContent = r[0];
        saveValue.placeholder = r[1];
        saveValue.classList.toggle('cvr__mono', saveMode.value === 'id');
        document.getElementById('saveCurrent').innerHTML = '';
    });

    function alvoDoSave() {
        var dados = {};

        dados[saveMode.value] = saveValue.value.trim();

        return dados;
    }

    document.getElementById('btnSaveLookup').addEventListener('click', function () {
        if (enviando) {
            return;
        }

        if (! saveValue.value.trim()) {
            aviso('erro', 'Preencha o campo de identificação primeiro.');

            return;
        }

        var botao = this;

        ocupar(botao);

        post(ROUTES.lookup, alvoDoSave()).then(function (r) {
            liberar(botao);

            if (! r.ok || ! r.dados.success) {
                aviso('erro', r.dados.message || 'Não foi possível consultar.');

                return;
            }

            document.getElementById('saveCurrent').innerHTML = cartao(r.dados.item, r.dados.id, '');
        }).catch(function () {
            liberar(botao);
            aviso('erro', 'Falha de comunicação com o painel.');
        });
    });

    saveImage.addEventListener('change', function () {
        var url = saveImage.value.trim();

        document.getElementById('saveImagePreview').innerHTML = url
            ? '<div class="cvr__rec">'
                + '<img class="cvr__img" src="' + escapar(url) + '" alt="" onerror="this.src=\'' + SEM_CAPA + '\'">'
                + '<div class="cvr__body"><div class="cvr__meta">Prévia da imagem informada</div></div>'
            + '</div>'
            : '';
    });

    document.getElementById('btnSave').addEventListener('click', function () {
        if (enviando) {
            return;
        }

        if (! saveValue.value.trim() || ! saveImage.value.trim()) {
            aviso('erro', 'Preencha a identificação e o endereço da imagem.');

            return;
        }

        var botao = this;
        var dados = alvoDoSave();

        dados.image_url = saveImage.value.trim();

        ocupar(botao);

        post(ROUTES.save, dados).then(function (r) {
            liberar(botao);

            if (! r.ok || ! r.dados.success) {
                aviso('erro', r.dados.message || 'Não foi possível salvar a capa.');

                return;
            }

            aviso('ok', 'Capa definida. Ela passa a valer na próxima consulta.');
            document.getElementById('saveCurrent').innerHTML = cartao(r.dados.item, r.dados.id, '');
        }).catch(function () {
            liberar(botao);
            aviso('erro', 'Falha de comunicação com o painel.');
        });
    });

    /* ---------- remove ---------- */

    var removeId = document.getElementById('removeId');
    var removeResult = document.getElementById('removeResult');

    function botaoRemover(id) {
        return '<button class="btn btn-sm btn-danger" type="button" data-remove="' + escapar(id) + '">Confirmar remoção</button>';
    }

    function mostrarRemocao(id, item, extra) {
        removeResult.innerHTML = cartao(item, id, item ? botaoRemover(id) : '') + (extra || '');
    }

    document.getElementById('btnRemoveLookup').addEventListener('click', function () {
        if (enviando) {
            return;
        }

        var id = removeId.value.trim();

        if (! /^(track|artist):[0-9a-f]{32}$/.test(id)) {
            aviso('erro', 'O identificador precisa ser track: ou artist: seguido de 32 caracteres.');

            return;
        }

        var botao = this;

        ocupar(botao);
        removeResult.innerHTML = '';

        post(ROUTES.lookup, { id: id }).then(function (r) {
            if (! r.ok || ! r.dados.success) {
                liberar(botao);
                aviso('erro', r.dados.message || 'Não foi possível consultar.');

                return;
            }

            var item = r.dados.item;

            /* the artist record is what repeats a wrong photo across every
               song, so it shows up next to the track one */
            if (item && item.type === 'track' && item.artist) {
                post(ROUTES.lookup, { artist: item.artist }).then(function (r2) {
                    liberar(botao);

                    var extra = '';

                    if (r2.ok && r2.dados.success && r2.dados.item) {
                        extra = '<div class="cvr__extra">'
                            + '<p class="cvr__extra-title">Este artista também tem registro próprio</p>'
                            + cartao(r2.dados.item, r2.dados.id, botaoRemover(r2.dados.id))
                        + '</div>';
                    }

                    mostrarRemocao(id, item, extra);
                }).catch(function () {
                    liberar(botao);
                    mostrarRemocao(id, item, '');
                });

                return;
            }

            liberar(botao);
            mostrarRemocao(id, item, '');
        }).catch(function () {
            liberar(botao);
            aviso('erro', 'Falha de comunicação com o painel.');
        });
    });

    removeResult.addEventListener('click', function (evento) {
        var botao = evento.target.closest('[data-remove]');

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

        var id = botao.getAttribute('data-remove');

        ocupar(botao);

        post(ROUTES.remove, { id: id }).then(function (r) {
            liberar(botao);

            if (! r.ok || ! r.dados.success) {
                aviso('erro', r.dados.message || 'Não foi possível remover.');

                return;
            }

            var removidos = (r.dados.removidos || []).length;

            aviso(removidos ? 'ok' : 'erro', removidos
                ? 'Registro removido. A busca será refeita na próxima execução da música.'
                : 'Nada foi removido: o identificador não estava mais gravado.');

            botao.closest('.cvr__rec').classList.add('is-gone');
            botao.remove();
        }).catch(function () {
            liberar(botao);
            aviso('erro', 'Falha de comunicação com o painel.');
        });
    });
}());
</script>

@include('admin/includes/footer')