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

@include('admin/includes/header')

<script src="/assets/js/lib/jquery.min.js"></script>

<script>
    const allServers = @json($allServers);

    function getCurrentServer (stream) {
        return allServers.filter(it => it.id === stream.server_id)[0];
    }
    function getNameServer (stream) {
      const currentServer = getCurrentServer(stream);
      return currentServer && currentServer.name ? currentServer.name.toUpperCase() : 'N/A';
    }

    function resolveStatus (stream) {
        updateBadge(stream, { type: 'carregamento' });
        const currentServer = getCurrentServer(stream);
        if (currentServer) {
            $.getJSON(`/check-status-port?p=${stream.port}&s=${currentServer.name}&ip=${currentServer.ip}`)
            .done((response) => {
              var text = 'Offline';
              var color = 'warning';
              var { status_port, status_live, status_relay, status_autodj } = response.data || {};
              if (status_port === 'closed') {
                text = 'Porta desligada'
              } else if(status_live === 'on') {
                text = 'Ao vivo'
                color = 'danger';
              } else if (status_relay === 'on') {
                text = 'Retransmissão'
                color = 'primary';
              } else if (status_autodj === 'on') {
                text = 'Auto DJ'
                color = 'success';
              }

              if (status_port === 'open') { // se a porta for aberta, deixa ligar o auto dj
                  $('#btn_1_'+stream.port).prop("disabled", text !== 'Offline');
              }
              $('#btn_2_'+stream.port).prop("disabled", status_port !== 'closed'); // controla se pode ou não ligar a porta

              updateBadge(stream, { type: 'update', text, color });
            }).fail((failData) => {
              $('#btn_1_'+stream.port).prop("disabled", true);
              updateBadge(stream, { type: 'update', text: 'Sem informação', color: 'warning' });
            });
        }
    }

    function updateBadge (stream, status) {
        if (!status.type) return;
        const { text, color } = status;
        const stItem = $('#st_' + stream.port);
        stItem.off('click');
        stItem.removeClass(); // limpa tudo pra começar
        stItem.text('');

        if (status.type === 'carregamento') {
            stItem.addClass('str__state is-loading').text('...');
        }

        if (status.type === 'update') {
          /* a cor vinha do bootstrap; agora sai da folha desta tela */
          var estado = { danger: 'is-live', primary: 'is-relay', success: 'is-autodj', warning: 'is-off' }[color] || 'is-off';

          stItem.addClass('str__state ' + estado).text(text).removeAttr('style');
          // mantendo simples: atualização por chamada manual (o usuário pode atualizar pela interface de lista)
          stItem.on('click', () => {
            resolveStatus(stream);
          });
        }
    }

</script>

<div class="mgr-head">
    <div>
        <h1>Streams</h1>
        @isset($s)
            <p>{{ $allStreams->total() }} {{ $allStreams->total() == 1 ? 'resultado' : 'resultados' }} para esta porta.</p>
        @else
            <p>{{ $allStreams->total() }} streams ativos. O estado de cada porta é consultado no servidor.</p>
        @endisset
    </div>
</div>

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

<div class="str__bar">
    @isset($s)
        {{-- a busca fica à vista, e o X desfaz sem precisar procurar o caminho --}}
        <span class="str__chip">
            <i class="fa-solid fa-magnifying-glass"></i>
            <span>Porta <b>{{ $s }}</b></span>
            <a href="{{ route('admin.streams') }}" title="Limpar a busca" aria-label="Limpar a busca">
                <i class="fa-solid fa-xmark"></i>
            </a>
        </span>
    @endisset

    <div class="str__servers">
        <a class="str__server @if(url()->current() == route('admin.streams')) is-on @endif" href="{{ route('admin.streams') }}">Todos</a>

        @foreach($allServers as $server)
            <a class="str__server @if(url()->current() == route('admin.streams', [$server->id])) is-on @endif"
               href="{{ route('admin.streams', [$server->id]) }}">{{ $server->display }}</a>
        @endforeach
    </div>

    <div class="str__find">
        <i class="fa-solid fa-magnifying-glass str__find-ic"></i>

        <input class="str__find-in" type="text" id="pSea" maxlength="5" placeholder="Porta ou porta do Auto DJ"
               autocapitalize="off" autocomplete="off" inputmode="numeric" aria-label="Buscar pela porta"
               oninput="this.value = this.value.replace(/[^0-9]/g, '');">

        <button class="str__find-go" type="button" id="sea">Buscar</button>
    </div>
</div>

<div class="card">
    @if($allStreams->count() == 0)
        <p class="str__empty">Nenhum streaming encontrado.</p>
    @else
        <table class="str__table">
            <thead>
                <tr>
                    <th>Porta</th>
                    <th>Servidor</th>
                    <th>Estado</th>
                    <th>Senha das estatísticas</th>
                    <th class="text-end">Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach($allStreams as $stream)
                    <tr>
                        <td>
                            <span class="str__port">{{ $stream->port }}
                                <small>Porta DJ {{ $stream->autodj_port }}</small>
                            </span>
                        </td>
                        <td><span id="sn_{{ $stream->port }}"></span></td>
                        <td><span id="st_{{ $stream->port }}" title="Clique para consultar de novo"></span></td>
                        <td><span class="str__pass">{{ $stream->password }}</span></td>
                        <td>
                            <span class="str__acts">
                                <button type="button" class="str__ico actLogsServer" data-action="verifyLogs"
                                        data-port="{{ $stream->port }}" id="btn_4_{{ $stream->port }}" title="Logs da porta">
                                    <i class="fa-solid fa-list-ul"></i>
                                </button>

                                <button type="button" class="str__ico actADJServer" data-action="verifyAutodj"
                                        data-port="{{ $stream->port }}" id="btn_3_{{ $stream->port }}" title="Verificar as playlists">
                                    <i class="fa-solid fa-list-check"></i>
                                </button>

                                <button type="button" class="str__ico actServer" data-action="startAutodj" disabled
                                        data-port="{{ $stream->port }}" id="btn_1_{{ $stream->port }}" title="Ligar o Auto DJ">
                                    <i class="fa-solid fa-circle-play"></i>
                                </button>

                                <button type="button" class="str__ico actServer" data-action="startStream" disabled
                                        data-port="{{ $stream->port }}" id="btn_2_{{ $stream->port }}" title="Ligar a porta">
                                    <i class="fa-solid fa-volume-high"></i>
                                </button>
                            </span>
                        </td>
                    </tr>

                    <script>
                        document.getElementById("btn_3_{{ $stream->port }}").setAttribute('data-server', getNameServer(@json($stream)));
                        document.getElementById("sn_{{ $stream->port }}").innerText = getNameServer(@json($stream));
                        resolveStatus(@json($stream));
                    </script>
                @endforeach
            </tbody>
        </table>
    @endif
</div>

@if($allStreams->count())
    {{ $allStreams->links('vendor.pagination.default') }}
@endif

<div class="mmodal" id="verifyADJModal" hidden>
    <div class="mmodal__card" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title"><span id="portADJ"></span> &middot; Verificação do Auto DJ</h2>
            <button class="mmodal__x" type="button" data-close-modal="verifyADJModal" aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        <div class="mmodal__body">
            <div id="verifyADJModal-loading" class="mmodal__wait d-none">
                <i class="fa-solid fa-circle-notch fa-spin"></i>
            </div>

            {{-- primeiro passo: escolher o que verificar --}}
            <div id="verifyADJModal-select" class="d-none">
                <p id="verifyADJModal-subtitle" class="mgr-head p">Selecione as playlists que deseja verificar:</p>

                <div class="mmodal__scroll">
                    <table class="table">
                        <thead id="verifyADJModal-table">
                            <tr>
                                <th><input type="checkbox" id="checkAll" checked></th>
                                <th>ID</th>
                                <th>Nome</th>
                                <th>Arquivos</th>
                            </tr>
                        </thead>
                        <tbody id="playlistTableBody"></tbody>
                    </table>
                </div>
            </div>

            {{-- resultado: só o que tem problema --}}
            <div id="verifyADJModal-results" class="d-none">
                <div id="resultsContainer" class="mmodal__scroll"></div>
            </div>

            <div id="verifyADJModal-none" class="d-none str__empty">
                Todas as playlists verificadas estão certas, sem arquivo faltando.
            </div>
        </div>

        <footer class="mmodal__foot">
            <button type="button" class="btn" id="closeVerifyModal" data-close-modal="verifyADJModal">Fechar</button>
            <button type="button" class="btn btn-primary" id="confirmVerification" onclick="verifyAutoDJ()">Confirmar</button>
        </footer>
    </div>
</div>

<div class="mmodal" id="logsServiceModal" hidden>
    <div class="mmodal__card" role="dialog" aria-modal="true">
        <header class="mmodal__head">
            <h2 class="mmodal__title">Logs da porta <b id="portLogs"></b></h2>
            <button class="mmodal__x" type="button" data-close-modal="logsServiceModal" aria-label="Fechar">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </header>

        <div class="mmodal__body">
            <div id="logsServiceModal-loading" class="mmodal__wait d-none">
                <i class="fa-solid fa-circle-notch fa-spin"></i>
            </div>

            <div id="logsServiceModal-results" class="d-none">
                <div class="mmodal__scroll">
                    <table class="table">
                        <thead id="logsServiceModal-table">
                            <tr>
                                <th style="width: 120px">Data</th>
                                <th style="width: 190px">Responsável</th>
                                <th>Ação</th>
                                <th style="width: 130px">IP</th>
                            </tr>
                        </thead>
                        <tbody id="logsServiceTableBody"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <footer class="mmodal__foot">
            <button type="button" class="btn" data-close-modal="logsServiceModal">Fechar</button>
        </footer>
    </div>
</div>
</main>

@include('admin/includes/footer')



<script>
    /* Modal da casa, com a mesma interface que o resto do arquivo já usa. O
       Bootstrap era carregado só por causa destes dois, e a folha dele nem
       existe neste servidor. */
    function abrirFechar(id) {
        var caixa = document.getElementById(id);

        return {
            show: function () {
                caixa.hidden = false;
                document.body.classList.add('mgr-locked');
            },
            hide: function () {
                caixa.hidden = true;
                document.body.classList.remove('mgr-locked');
            }
        };
    }

    var verifyADJModal = abrirFechar("verifyADJModal");
    var logsServiceModal = abrirFechar("logsServiceModal");

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

        if (botao) {
            document.getElementById(botao.dataset.closeModal).hidden = true;
            document.body.classList.remove('mgr-locked');
        }
    });

    document.addEventListener('keydown', function (evento) {
        if (evento.key !== 'Escape') { return; }

        ["verifyADJModal", "logsServiceModal"].forEach(function (id) {
            document.getElementById(id).hidden = true;
        });

        document.body.classList.remove('mgr-locked');
    });
    var currentServerVerification = null;
    var currentPortVerification = null;
    var playlistsVerification = [];

    $("#pSea").on('keyup', function (e) {
        if (e.key === 'Enter' || e.keyCode === 13) {
            var aValue = this.value;
            window.location = "{{ route('admin.streams') }}/1/"+aValue;
        }
    });

    $('#sea').on('click',function(){
        var sValue = $('#pSea').val();
        window.location = "{{ route('admin.streams') }}/1/"+sValue;
    });

    function startAutodj(port){
        Sweetalert2.fire({
            title: "<h3 class='mb-2'>Processo iniciado:</h3>",
            html: `<p class='contentModal'>Ligando o Auto DJ da porta <b>${port}</b>...</p>`,
            allowEscapeKey: false,
            allowOutsideClick: false,
            showConfirmButton: false,
        });
        $.post("/manager/server/autodj/start", {port: port}).done(function (data) {
            $('.contentModal').html(data.data);

            setTimeout(() => {
                Sweetalert2.close();
                var allStreams = @json($allStreams).data;
                const stream = allStreams.filter(it => it.port == port)[0] || null;
                if (stream) resolveStatus(stream); // atualizar status na tela

            }, 3000);
        }, "json");
    }

    function startStream(port){
        Sweetalert2.fire({
            title: "<h3 class='mb-2'>Processo iniciado:</h3>",
            html: `<p class='contentModal'>Ligando a porta <b>${port}</b>...</p>`,
            allowEscapeKey: false,
            allowOutsideClick: false,
            showConfirmButton: false,
        });
        $.post("/manager/server/stream/start", {port: port}).done(function (data) {
            $('.contentModal').html(data.data);

            setTimeout(() => {
                Sweetalert2.close();
                var allStreams = @json($allStreams).data;
                const stream = allStreams.filter(it => it.port == port)[0] || null;
                if (stream) resolveStatus(stream); // atualizar status na tela

            }, 3000);
        }, "json");
    }

    function startVerifyAutoDJ (data_port, data_server) {
        verifyADJModal.show();

        currentServerVerification = data_server;
        currentPortVerification = data_port;
        playlistsVerification = [];

        // reset UI: sempre mostrar loading enquanto carrega playlists
        $('#verifyADJModal-loading').removeClass('d-none').addClass('d-flex');
        $('#verifyADJModal-select').addClass('d-none');
        $('#verifyADJModal-results').addClass('d-none');
        $('#verifyADJModal-subtitle').addClass('d-none');
        $('#verifyADJModal-table').addClass('d-none');
        $('#verifyADJModal-none').addClass('d-none');
        changeConfirmButton(false);

        // Carrega playlists via API
        $.getJSON(`/manager/start-verification-playlists?port=${data_port}`).done((response) => {
            $('#verifyADJModal-loading').addClass('d-none').removeClass('d-flex');
            $('#verifyADJModal-select').removeClass('d-none').addClass('d-block');
            

            // Mostrar botão confirmar apenas na tela de seleção
            changeConfirmButton(true);

            $("#checkAll").prop("checked", true);

            const tbody = $("#playlistTableBody");
            tbody.empty();

            response.playlists.forEach(pl => {
              tbody.append(`
                <tr>
                  <td><input id="pl_${pl.id}" type="checkbox" class="playlist-check" value="${pl.id}" checked></td>
                  <td>${pl.id}</td>
                  <td>${pl.name}</td>
                  <td>${pl.total_files}</td>
                </tr>
              `);
            });
            playlistsVerification = response.playlists;
            if (!response.playlists || response.playlists.length === 0) {
                tbody.append(`<tr><td colspan="4" class="text-center">Nenhuma playlist encontrada para verificação.</td></tr>`);
                changeConfirmButton(false);
                return;
            }
            
            $('#verifyADJModal-subtitle').removeClass('d-none');
            $('#verifyADJModal-table').removeClass('d-none');
            
        }).fail(() => {
            $('#verifyADJModal-loading').addClass('d-none').removeClass('d-flex');
            $('#verifyADJModal-select').removeClass('d-none').addClass('d-block');
            $("#playlistTableBody").html(`<tr><td colspan="4" class="text-center text-danger">Erro ao carregar playlists</td></tr>`);
            changeConfirmButton(false);
        });
    }

    // Converte um $.ajax em Promise nativa (para usar Promise.all sem problemas)
    function ajaxPromise(url, options = {}) {
        return new Promise((resolve, reject) => {
            $.ajax(Object.assign({ url: url, dataType: 'json', timeout: 20000 }, options))
            .done((data) => resolve(data))
            .fail((jqXHR, textStatus, errorThrown) => reject({ jqXHR, textStatus, errorThrown }));
        });
    }

    // Função que monta a árvore HTML a partir de three_missing (objeto)
    // Mostra apenas categorias permitidas e sempre expandida
    function buildTreeFromThreeMissing(three_missing) {
        const allowedCats = ['comerciais','gerenciador','vinhetas','adicionais','outros'];
        const container = document.createElement('div');
        container.classList.add('three-missing-tree');

        if (!three_missing || Object.keys(three_missing).length === 0) {
            const empty = document.createElement('div');
            empty.classList.add('small', 'text-muted');
            empty.textContent = 'Sem informação da árvore (three_missing vazio).';
            container.appendChild(empty);
            return container;
        }

        // percorre apenas categorias permitidas (se existirem)
        let anyShown = false;
        for (const cat of allowedCats) {
            const keyLower = Object.keys(three_missing).find(k => k.toLowerCase() === cat);
            if (!keyLower) continue;
            const catObj = three_missing[keyLower] || {};
            // só exibe se tiver conteúdo
            if (!catObj || Object.keys(catObj).length === 0) continue;

            anyShown = true;
            const catHeader = document.createElement('div');
            catHeader.classList.add('fw-semibold', 'mb-1', 'mt-2');
            catHeader.textContent = keyLower;
            container.appendChild(catHeader);

            // função recursiva para montar lista, já expandida
            function createNodeExpanded(obj) {
                const ul = document.createElement('ul');
                ul.classList.add('file-tree-list');
                for (const k in obj) {
                    const v = obj[k];
                    const li = document.createElement('li');
                    if (v && typeof v === 'object' && Object.keys(v).length > 0) {
                        const span = document.createElement('div');
                        span.classList.add('fileleaf','folder-name','fw-semibold');
                        span.textContent = k;
                        li.appendChild(span);
                        const child = createNodeExpanded(v);
                        // já mostrado expandido
                        child.style.display = 'block';
                        li.appendChild(child);
                    } else {
                        const span = document.createElement('div');
                        span.classList.add('fileleaf');
                        span.textContent = (typeof v === 'string' && v.length > 0) ? v : k;
                        li.appendChild(span);
                    }
                    ul.appendChild(li);
                }
                return ul;
            }

            const tree = createNodeExpanded(catObj);
            tree.style.display = 'block';
            container.appendChild(tree);
        }

        if (!anyShown) {
            const empty = document.createElement('div');
            empty.classList.add('small', 'text-muted');
            empty.textContent = 'Nenhuma categoria relevante com conteúdo.';
            container.appendChild(empty);
        }

        return container;
    }

    // Verifica as playlists selecionadas, chama APIs, filtra apenas as problemáticas e renderiza
    function verifyAutoDJ () {
      const checked = $(".playlist-check:checked");

      if (checked.length === 0) {
        Sweetalert2.fire({ icon: 'info', title: 'Nenhuma playlist selecionada' });
        return;
      }

      // Desabilita botão e mostra loading
      $('#confirmVerification').prop('disabled', true).text('Verificando...');
      $('#verifyADJModal-loading').removeClass('d-none').addClass('d-flex');
      $('#verifyADJModal-select').addClass('d-none');
      $('#verifyADJModal-results').addClass('d-none');
      $('#verifyADJModal-none').addClass('d-none');

      const playlistIds = checked.map(function() {
        return $(this).attr('id').split('_')[1];
      }).get();

      var port = currentPortVerification;
      var server = currentServerVerification;

      // Cria promessas nativas a partir de ajaxPromise
      const promises = playlistIds.map(id => {
        const url = `https://${server}.brascast.com/api_manager/stream/checkPlaylist.php?p=${port}&id=${id}`;
        return ajaxPromise(url)
          .then(resp => ({ id, ok: true, resp }))
          .catch(err => ({ id, ok: false, error: err }));
      });

      Promise.all(promises).then(results => {
        const problematic = [];

        results.forEach(r => {
          if (!r.ok) {
            problematic.push({
              id: r.id,
              status: 'corrompida',
              message: 'Erro na requisição ou resposta inválida',
              rawError: r.error,
              three_missing: null
            });
            return;
          }

          const data = r.resp;

          if (data == null) {
            problematic.push({
                id: r.id,
                status: 'corrompida',
                message: 'Resposta vazia',
                rawResponse: data,
                three_missing: null
            });
            return;
          }

          if (data.error) {
            problematic.push({
              id: r.id,
              status: 'corrompida',
              message: data.error || 'Erro retornado pela API',
              rawResponse: data,
              three_missing: data.three_missing || null
            });
            return;
          }

          // Determinar count de faltantes
          let countMissing = 0;
          if (typeof data.count !== 'undefined') {
            countMissing = Number(data.count) || 0;
          } else if (Array.isArray(data.missing_files)) {
            countMissing = data.missing_files.length;
          } else if (data.data && Array.isArray(data.data.missing_files)) {
            countMissing = data.data.missing_files.length;
          }

          if (countMissing > 0) {
            problematic.push({
              id: r.id,
              status: 'faltando',
              message: `${countMissing} arquivo(s) faltando`,
              three_missing: data.three_missing || data.data?.three_missing || null,
              rawResponse: data
            });
            return;
          }

          // se chegou aqui, sem problemas -> não adiciona
        });

        // Atualiza UI: esconde loading
        $('#verifyADJModal-loading').addClass('d-none').removeClass('d-flex');
        $('#confirmVerification').prop('disabled', false).text('Confirmar');

        if (problematic.length === 0) {
          // ocultar botão Confirmar após verificação concluída
          changeConfirmButton(false);
          $('#verifyADJModal-results').addClass('d-none');
          $('#verifyADJModal-none').removeClass('d-none');
          $('#verifyADJModal-select').addClass('d-none');
          return;
        }

        // Renderiza resultados (já sem botão de abrir/fechar; árvore sempre expandida)
        const container = $('#resultsContainer');
        container.empty();

        problematic.forEach(p => {
          let name = playlistsVerification.filter(it => it.id == p.id)[0]?.name || 'Sem nome';
          const card = $(`
            <div class="card mb-2">
              <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                  <strong>ID: ${p.id} - ${name}</strong>
                  <small class="ms-2 text-muted">${p.status === 'corrompida' ? 'Corrompida' : p.message}</small>
                </div>
              </div>
              <div class="card-body p-2 tree-body">
                <div class="small text-muted mb-2">Árvore de arquivos faltantes:</div>
                <div class="tree-root"></div>
              </div>
            </div>
          `);

          // Preenche árvore (se houver three_missing)
          const treeRoot = card.find('.tree-root')[0];
          if (p.three_missing) {
            const treeNode = buildTreeFromThreeMissing(p.three_missing);
            treeRoot.appendChild(treeNode);
          } else {
            $(treeRoot).append(`<div class="text-muted small">${p.status === 'corrompida' ? 'Resposta inválida. Não foi possível obter a lista de arquivos faltantes.' : 'Sem estrutura de three_missing disponível.'}</div>`);
          }

          container.append(card);
        });

        // Mostra painel de resultados e garante que o botão Confirmar esteja oculto
        $('#verifyADJModal-select').addClass('d-none');
        $('#verifyADJModal-results').removeClass('d-none');
        $('#verifyADJModal-none').addClass('d-none');
        changeConfirmButton(false);

      }).catch(err => {
        $('#verifyADJModal-loading').addClass('d-none').removeClass('d-flex');
        $('#confirmVerification').prop('disabled', false).text('Confirmar');
        changeConfirmButton(false);
        Sweetalert2.fire({ icon: 'error', title: 'Erro', text: 'Erro inesperado durante a verificação. Veja console.' });
        console.error(err);
      });

    }

    function changeConfirmButton (value) {
      // mostra o botão somente na tela de seleção (value === true)
      if (value === true) {
          $('#confirmVerification').removeClass('d-none').addClass('d-flex');
          $('#confirmVerification').prop('disabled', false);
      } else {
          $('#confirmVerification').addClass('d-none').removeClass('d-flex');
          $('#confirmVerification').prop('disabled', true);
      }
    }
    function verifyLogs (port, server) {
        logsServiceModal.show();

        // reset UI: sempre mostrar loading enquanto carrega
        $('#logsServiceModal-loading').removeClass('d-none').addClass('d-flex');
        $('#logsServiceModal-results').addClass('d-none');

        // Carrega playlists via API
        $.getJSON(`/manager/getServiceLogs?p=${port}&s=${server}`).done((response) => {
            $('#logsServiceModal-loading').addClass('d-none').removeClass('d-flex');
            $('#logsServiceModal-results').removeClass('d-none').addClass('d-block');

            const tbody = $("#logsServiceTableBody");
            tbody.empty();

            response.logs.forEach((log, index) => {
				let nameHtml = '<span class="text-muted small">---</span>';
				let badgeHtml = '';

				if (log.display_name) {
					const parts = log.display_name.split(' |-| ');
					const name = parts[0] || log.display_name;
					const type = parts[1] || null;

					const badgeColors = {
						'Atendente':        'warning text-dark',
						'Titular':          'primary',
						'Administrador':    'danger',
						'Usuário removido': 'secondary',
					};

					const badgeClass = type ? (badgeColors[type] || 'secondary') : 'secondary';
					nameHtml  = `<span title="${name}">${name}</span>`;
					badgeHtml = type ? `<span class="badge bg-${badgeClass} ms-1">${type}</span>` : '';
				}

				let dateHtml = log.created_at || '---';
				try {
					const d = new Date(log.created_at.replace(' ', 'T'));
					if (!isNaN(d)) {
						dateHtml = `${d.toLocaleDateString('pt-BR')} <span class="text-muted">${d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}</span>`;
					}
				} catch(e) {}

				// Linha zebrada simples: sem borda extra, só fundo alternado
				const rowClass = index % 2 === 0 ? '' : 'table-light';

				tbody.append(`
					<tr class="${rowClass}">
						<td class="small text-nowrap">${dateHtml}</td>
						<td class="small text-nowrap">${nameHtml}${badgeHtml}</td>
						<td class="small">${log.action}</td>
						<td class="small text-muted text-nowrap">${log.ip}</td>
					</tr>
				`);
			});
			
            if (!response.logs || response.logs.length === 0) {
                $('#logsServiceModal-loading').addClass('d-none').removeClass('d-flex');
                $('#logsServiceModal-results').removeClass('d-none').addClass('d-block');
                $('#logsServiceModal-results').html(`
                  <h5 style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    min-height: 150px;
                    text-align: center;
                  ">
                    <span class="text-danger">Nenhuma log encontrado.</span>
                  </h5>
                `);

                return;
            }
            
            $('#logsServiceModal-table').removeClass('d-none');
            
        }).fail(() => {
            $('#logsServiceModal-loading').addClass('d-none').removeClass('d-flex');
            $('#logsServiceModal-results').removeClass('d-none').addClass('d-block');
            $("#logsServiceTableBody").html(`<tr><td colspan="4" class="text-center text-danger">Erro ao carregar logs</td></tr>`);
        });
    }
    
    $(document).find('.actADJServer').on( "click", function() {
        let port = $(this).attr('data-port');
        let server = $(this).attr('data-server');
        $('#portADJ').text(port);
        startVerifyAutoDJ(port, server);
    })
    
    $(document).find('.actLogsServer').on( "click", function() {
        let port = $(this).attr('data-port');
        let server = $(this).attr('data-server');
        $('#portLogs').text(port);
        verifyLogs(port, server);
    })

    $(document).find('.actServer').on( "click", function() {
        let action = $(this).attr('data-action');
        let port = $(this).attr('data-port');
        let server = $(this).attr('data-server');

        let titleFire = 'Deseja realizar esta ação?';
        if (action == 'startStream') {
            titleFire = 'Deseja realmente iniciar a porta <b>' + port + '</b>?';
        }
        if (action == 'startAutodj') {
            titleFire = 'Deseja realmente iniciar o AutoDJ da porta <b>' + port + '</b>?'
        }
        Sweetalert2.fire({
            title: titleFire,
            showDenyButton: false,
            showCancelButton: true,
            confirmButtonText: 'Confirmar',
            cancelButtonText: 'Cancelar',
            html: titleFire
        }).then((result) => {
            if (result.isConfirmed) {
                if(action == 'startStream'){
                    startStream(port);
                }
                if(action == 'startAutodj'){
                    startAutodj(port);
                }
            }
        });
    });

    // Delegation para inputs gerados dinamicamente
    $(document).on("change", ".playlist-check", function() {
        const total = $(".playlist-check").length;
        const checked = $(".playlist-check:checked").length;

        $("#checkAll").prop("checked", total === checked);

        changeConfirmButton(checked > 0);
    });

    $(document).on("change", "#checkAll", function() {
        $(".playlist-check").prop("checked", this.checked);

        const checked = $(".playlist-check:checked").length;
        changeConfirmButton(checked > 0);
    });

</script>

<style>

.file-tree-list {
  list-style-type: none;
  padding-left: 1rem;
  margin-bottom: 0.25rem;
}
.file-tree-list li {
  margin: 2px 0;
  line-height: 1.4;
}

/* removed caret animations: tree is always expanded and static */
.folder-name {
  margin-bottom: 4px;
}

/* nested lists shown by default */
.file-tree-list ul, .file-tree-list {
  display: block;
}

/* file leaf style */
.fileleaf {
  margin-left: 0.5rem;
  color: #333;
  white-space: pre-wrap;
}

/* small tweaks */
.tree-root { padding-left: 6px; }

</style>