@section('title', 'Streamings')
@include('admin/includes/header')
<link href="/assets-manager/css/sweetalert2.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
@section('head')
@endsection

<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('spinner-border spinner-border-sm text-secondary').css('margin-left', '25px');;
        }
        if (status.type === 'update') {
          stItem.addClass('badge opacity-75 rounded-pill text-decoration-none px-3 py-2 border-0 text-white bg-' + color).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>

<main class="flex-shrink-0 mt-2">
    <div class="container">

        <div class="row mb-3">
            <div class="col-md-12 d-flex align-middle">
                <div>
                    @isset($s)
                        <h4>Buscando por: {{ $s }}</h4>
                    @else
                        <h4>Lista de streams ativos</h4>
                    @endif
                </div>
                <div class="ms-auto">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="pSea" maxlength="5" placeholder="Buscar porta..." autocapitalize="off" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1');"></input>
                        <button class="btn btn-outline-secondary" type="button" id="sea">Buscar</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-group me-3">
            <a href="{{ route('admin.streams') }}"
               class="btn btn-sm {{ url()->current() == route('admin.streams') ? 'btn-success' : 'btn-secondary' }}">
                Todos
            </a>

            @foreach($allServers as $server)
                <a href="{{ route('admin.streams', [$server->id]) }}"
                   class="btn btn-sm {{ url()->current() == route('admin.streams', [$server->id]) ? 'btn-success opacity-75' : 'btn-secondary' }}">
                    {{ $server->display }}
                </a>
            @endforeach
        </div>


        @if (\Session::has('success'))
            <div class="alert alert-success alert-icon alert-dismissible fade show fw-semibold" role="alert">
                {!! \Session::get('success') !!}
            </div>
            @php Session::forget('success'); @endphp
        @endif
        <hr class="mt-2 mb-2 col-5">
        @if($allStreams->count() == 0)
            <div class="py-4 text-center">Nenhum streaming</div>
        @else
            <table class="table">
                <thead>
                <tr>
                    <th scope="col">Porta</th>
                    <th scope="col">Servidor</th>
                    <th scope="col">Status</th>
                    <th scope="col">Senha das estatísticas</th>
                    <th class="pe-1 text-end" scope="col">Ação</th>
                </tr>
                </thead>
                <tbody>
                @foreach($allStreams as $stream)
                <tr>
                    <th scope="row">{{ $stream->port }}</th>
                    <td><span id="sn_{{ $stream->port }}"></span></td>
                    <td style="min-width:100px"><span id="st_{{ $stream->port }}"></span></td>
                    <td>{{ $stream->password }}</td>
                    <td class="pe-1 text-end">
                        <button type="button" data-action="verifyAutodj" data-port="{{ $stream->port }}" id="btn_3_{{ $stream->port }}" class="btn btn-success btn-sm actADJServer">
                            <i class="bi bi-music-note-list"></i>
                        </button>
                        <button type="button" data-action="startAutodj" disabled data-port="{{ $stream->port }}" id="btn_1_{{ $stream->port }}" class="btn btn-success btn-sm actServer">
                            <i class="bi bi-play-circle"></i>
                        </button>
                        <button type="button" data-action="startStream" disabled data-port="{{ $stream->port }}" id="btn_2_{{ $stream->port }}" class="btn btn-secondary btn-sm actServer">
                            <i class="bi bi-volume-up"></i>
                        </button>
                    </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>

            {{ $allStreams->links('vendor.pagination.default') }}
        @endif
    </div>

    <div class="modal fade" id="verifyADJModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><span id="portADJ"></span> - Verificação do Auto DJ</h5>
                </div>
                <div class="modal-body">
                    <div id="verifyADJModal-loading" class="d-none d-flex justify-content-center align-items-center" style="height: 200px">
                      <div class="spinner-border text-secondary opacity-75" role="status">
                        <span class="visually-hidden">Carregando...</span>
                      </div>
                    </div>

                    <!-- Conteúdo inicial: lista de playlists selecionáveis -->
                    <div id="verifyADJModal-select" class="d-none">
                      <h6 id="verifyADJModal-subtitle" class="modal-subtitle">Selecione as playlists que deseja verificar:</h6>
                      <div style="max-height:400px; overflow-y:auto;width:100%">
                        <table class="table table-sm table-hover align-middle">
                          <thead id="verifyADJModal-table" class="table-light">
                            <tr>
                              <th style="position: sticky; top: 0; background-color:white; z-index:2;">
                                <input type="checkbox" id="checkAll" checked>
                              </th>
                              <th style="position: sticky; top: 0; background-color:white; z-index:2;">ID</th>
                              <th style="position: sticky; top: 0; background-color:white; z-index:2;">Nome</th>
                              <th style="position: sticky; top: 0; background-color:white; z-index:2;">Arquivos</th>
                            </tr>
                          </thead>
                          <tbody id="playlistTableBody">
                          </tbody>
                        </table>
                      </div>
                    </div>

                    <!-- Resultado: apenas playlists problemáticas (com erro ou arquivos faltantes) -->
                    <div id="verifyADJModal-results" class="d-none">
                      <div id="resultsContainer" style="max-height:520px; overflow-y:auto;"></div>
                    </div>

                    <!-- mensagem quando não houver problemas -->
                    <div id="verifyADJModal-none" class="d-none text-center p-4">
                      <h5>✅ Todas as playlists verificadas estão OK — sem arquivos faltando.</h5>
                    </div>

                </div>
                <div class="modal-footer">
                    <!-- Confirmar aparece apenas na tela de seleção -->
                    <button type="button" onclick="verifyAutoDJ()" class="btn btn-primary" id="confirmVerification">Confirmar</button>
                    <button type="button" class="btn btn-secondary" id="closeVerifyModal" data-bs-dismiss="modal">Fechar</button>
                </div>
            </div>
        </div>
    </div>
</main>

@include('admin/includes/footer')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="/assets-manager/js/sweetalert2.all.js"></script>

<script>
    var verifyADJModal = new bootstrap.Modal(document.getElementById("verifyADJModal"), {backdrop: 'static', keyboard: false});
    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);
      }
    }
    $(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('.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; }

/* ===== TEMA ESCURO (especifico desta tela) ===== */
/* cabecalhos sticky dos modais tinham fundo branco inline */
[data-bs-theme="dark"] #verifyADJModal-table th,
[data-bs-theme="dark"] #logsServiceModal-table th {
    background: #20242d !important;
    color: #e7eaee;
}
[data-bs-theme="dark"] .fileleaf { color: #cfd4db; }

</style>