@section('title', 'Aplicativos')
@include('admin/includes/header')
@section('head')
@endsection
<style>
.balloon-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: default;
}

.balloon-tooltip {
    visibility: hidden;
    opacity: 0;
    background: #1e293b;
    color: #f1f5f9;
    font-size: .78rem;
    line-height: 1.5;
    text-align: center;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.balloon-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1e293b;
}

.balloon-tooltip-wrap:hover .balloon-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(-3px);
}

/* ── Play Store button states ── */
.btn-playstore-checking {
    pointer-events: none;
    opacity: .8;
}
.btn-playstore-ok      { background-color: #198754 !important; border-color: #198754 !important; color: #fff !important; }
.btn-playstore-missing { background-color: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; }
.btn-playstore-unknown { background-color: #6c757d !important; border-color: #6c757d !important; color: #fff !important; }

/* Customização para scroll da barra de contas no Modal */
.table-responsive-scroll::-webkit-scrollbar { width: 8px; }
.table-responsive-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px;}
.table-responsive-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px;}
.table-responsive-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ===== TEMA ESCURO (especifico desta tela) ===== */
[data-bs-theme="dark"] .table-responsive-scroll::-webkit-scrollbar-track { background: #20242d; }
[data-bs-theme="dark"] .table-responsive-scroll::-webkit-scrollbar-thumb { background: #3a4150; }
[data-bs-theme="dark"] .table-responsive-scroll::-webkit-scrollbar-thumb:hover { background: #4a5160; }
</style>

<main class="flex-shrink-0 mt-3">
    <div class="container">
        @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
        @if (\Session::has('error'))
            <div class="alert alert-danger alert-icon alert-dismissible fade show fw-semibold" role="alert">
                {!! \Session::get('error') !!}
            </div>
            @php Session::forget('error'); @endphp
        @endif
	
	    <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 apps</h4>
                    @endif
                </div>
                <div class="ms-auto">
                    <div class="input-group">
                        
                        <button type="button" class="btn btn-outline-primary me-2" data-bs-toggle="modal" data-bs-target="#accountsModal">
                            <i class="bi bi-person-lines-fill"></i> Gerenciar Contas
                        </button>
                    
                        <input type="text" class="form-control" id="pSea" maxlength="5" placeholder="Buscar app..." oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1');" autocomplete="off">
                        <button class="btn btn-outline-secondary" type="button" id="sea">Buscar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex flex-wrap gap-2 mb-3">
            <form action="{{ route('admin.apps.filter') }}" method="POST" class="d-inline">
            @csrf
            <button type="submit"
                class="badge rounded-pill {{ !isset($accountFilter) ? 'bg-success' : 'bg-secondary' }} text-decoration-none px-3 py-2 border-0"
                style="cursor:pointer; {{ !isset($accountFilter) ? 'box-shadow: 0 0 0 2px rgba(0,0,0,0.1), 0 0 0 4px #198754;' : '' }}">
                Ver todos
            </button>
            </form>

            @foreach($accountsFilter as $account => $count)
                @if($account === 0)
                    @continue
                @endif
                <form action="{{ route('admin.apps.filter') }}" method="POST" class="d-inline">
                    @csrf
                    <input type="hidden" name="account" value="{{ $account }}">
                    
                    @php
                        // Busca o nome e o status usando data_get
                        $accName = data_get($accountsMap, $account . '.name', 'Conta ' . str_pad($account, 2, '0', STR_PAD_LEFT));
                        $status = data_get($accountsMap, $account . '.status');
                        
                        // Conta desativada
                        $isDeactivated = ($status !== null && $status == 0);
                        // Filtro selecionado
                        $isSelected = isset($accountFilter) && $accountFilter == $account;
                        
                        // Lógica de cores baseada nos requisitos
                        if ($isDeactivated) {
                            $badgeClass = 'bg-danger';
                        } elseif ($isSelected) {
                            $badgeClass = 'bg-success';
                        } elseif ($count > 0) {
                            $badgeClass = 'bg-primary';
                        } else {
                            $badgeClass = 'bg-secondary';
                        }
                        
                        // Se estiver selecionado, colocamos uma borda proeminente
                        $highlightSelected = $isSelected ? 'box-shadow: 0 0 0 2px rgba(0,0,0,0.1), 0 0 0 4px ' . ($isDeactivated ? '#dc3545' : '#198754') . ';' : '';
                    @endphp

                    <button type="submit"
                        class="badge rounded-pill {{ $badgeClass }} text-decoration-none px-3 py-2 border-0"
                        style="cursor:pointer; {{ $highlightSelected }}">
                        {{ $accName }} {{ $isDeactivated ? '(Off)' : '' }}: {{ $count }}
                    </button>
                </form>
            @endforeach

            @php
                $semContaCount = $accountsFilter[0] ?? 0;
                $isSemContaSelected = isset($accountFilter) && $accountFilter === '0';
            @endphp
            
            <form action="{{ route('admin.apps.filter') }}" method="POST" class="d-inline">
                @csrf
                <input type="hidden" name="account" value="0">
                <button type="submit"
                    class="badge rounded-pill {{ $isSemContaSelected ? 'bg-success' : 'bg-secondary' }} text-decoration-none px-3 py-2 border-0"
                    style="cursor:pointer; {{ $isSemContaSelected ? 'box-shadow: 0 0 0 2px rgba(0,0,0,0.1), 0 0 0 4px #198754;' : '' }}">
                    Sem conta: {{ $semContaCount }}
                </button>
            </form>
        </div>
	
        @if($allApps->count() == 0)
            <div class="py-4 text-center">Nenhum aplicativo</div>
        @else

            <table class="table table-vcenter">
                <thead>
                <tr>
                    <th class="d-none" scope="col">#</th>
					<th scope="col">#</th>
                    <th scope="col">Porta</th>
                    <th scope="col">Nome</th>
                    <th scope="col">Solicitado em</th>
                    <th scope="col">Status</th>
                    <th scope="col">Conta</th>
                    <th class="pe-1 text-end" scope="col">Ação</th>
                </tr>
                </thead>
                <tbody>
                @php
                    foreach($allApps as $app){
                @endphp
                <tr>
                    <th class="d-none" scope="row">{{ $app->id }}</th>
					<td>
						@if(!empty($app->update_released_at))
							<span class="balloon-tooltip-wrap me-1">
								<i class="bi bi-clock-history text-muted"></i>
								<span class="balloon-tooltip">
									Última liberação do formulário em<br>
									<b>{{ date('d/m/Y H:i', strtotime($app->update_released_at)) }}</b>
								</span>
							</span>
						@else
							<span class="text-muted me-1" style="font-size:.8rem; letter-spacing:1px;">--</span>
						@endif
					</td>
                    <td class="fw-semibold" style="width:7%">{{ $app->port }} </td>
                    <td>
						<span class="fw-semibold text-dark">{{ $app->name }}</span>
					</td>
                    <td>{{ date('d/m/Y H:i',strtotime($app->created_at)) }}</td>
                    <td id="status-cell-{{ $app->id }}">
					{!! ($app->status == 0 ? '<span class="fw-semibold text-warning">Pendente</span>' : ($app->status == 2 ? '<span class="fw-semibold text-warning">Aguard. Publicação</span>' : ($app->status == 3 ? '<span class="fw-semibold text-primary">Análise</span>' : ($app->status == 4 ? '<span class="fw-semibold text-danger">Desativado</span>' : '<span class="fw-semibold text-success">Publicado</span>')))) !!}
					</td>
                    <td>
                        <span class="fw-semibold">
                            {{ $app->account_display ?? '--' }}
                        </span>
                    </td>
                   <td class="pe-1 text-end">
						@if($app->status != '0')
						<form id="form-release-{{ $app->id }}" action="{{ route('admin.apps.release') }}" method="POST" class="d-none">
							@csrf
							<input type="hidden" name="id" value="{{ $app->id }}">
							<input type="hidden" name="server" value="{{ $app->qr }}">
							<input type="hidden" name="action_type" id="form-release-action-{{ $app->id }}" value="form">
						</form>
						@endif

						@php
							$previewUrl = 'https://android-content.brascast.com/configs/index.php?id=' . $app->site_id . '&s=' . $app->qr;
						@endphp

						<div class="btn-group" role="group">
							@if(!empty($app->app_link))
							<a href="https://play.google.com/store/apps/details?id={{ $app->app_link }}"
							   target="_blank" rel="noopener noreferrer"
							   class="btn btn-secondary btn-sm btn-playstore btn-playstore-checking"
							   data-package="{{ $app->app_link }}"
							   title="Verificando na Play Store…">
								<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
							</a>
							@endif

							@if($app->status == '0')
								<button class="btn btn-secondary btn-sm" title="Formulário pendente" disabled>
									<i class="bi bi-pencil-square align-top"></i>
								</button>
							@else
								<a href="{{ route('admin.app',[$app->qr,$app->id]) }}" target="_blank" class="btn btn-secondary btn-sm" title="Editar / detalhes">
									<i class="bi bi-pencil-square align-top"></i>
								</a>
							@endif

							<div class="btn-group" role="group">
								<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
									<i class="bi bi-gear align-top"></i>
								</button>
								<ul class="dropdown-menu dropdown-menu-end shadow-sm">
									<li>
										<button type="button" class="dropdown-item"
											onclick="quickStatus({{ $app->id }}, {{ $app->qr }}, {{ (int) $app->status }}, '{{ addslashes($app->name) }}')">
											<i class="bi bi-toggles me-2"></i> Alterar status
										</button>
									</li>
									<li>
										<a href="{{ $previewUrl }}" target="_blank" rel="noopener noreferrer" class="dropdown-item">
											<i class="bi bi-eye me-2"></i> Visualizar app
										</a>
									</li>
									@if($app->status != '0')
									<li><hr class="dropdown-divider"></li>
									<li>
										<button type="button" class="dropdown-item text-danger"
											onclick="formRelease({{ $app->port }}, '{{ addslashes($app->name) }}', {{ $app->id }}, {{ $app->qr }})">
											<i class="bi bi-arrow-clockwise me-2"></i> Liberar formulário
										</button>
									</li>
									@endif
								</ul>
							</div>
						</div>
					</td>
                </tr>
					@php  } @endphp
                </tbody>
            </table>

			@empty($s)
             {{ $allApps->links('vendor.pagination.default') }}
			@endif
			
        @endif
    </div>
</main>

<div class="modal fade" id="accountsModal" tabindex="-1" aria-labelledby="accountsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="accountsModalLabel">Contas da Play Store</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('admin.apps.storeAccount') }}" method="POST" id="formAddAccount" class="mb-4 bg-light p-3 rounded border">
                    @csrf
                    <h6 class="mb-3">Adicionar Nova Conta</h6>
                    <div class="row g-2 align-items-end">
                        <div class="col-md-7">
                            <label class="form-label text-muted small mb-1">Nome de identificação</label>
                            <input type="text" name="name" class="form-control" required placeholder="Ex: Principal, Conta do João, etc.">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label text-muted small mb-1">Status Inicial</label>
                            <select name="status" class="form-select">
                                <option value="1" selected>Ativada</option>
                                <option value="0">Desativada</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" id="btnAddAccount" class="btn btn-primary w-100">Adicionar</button>
                        </div>
                    </div>
                </form>

                <div class="table-responsive table-responsive-scroll" style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-bordered table-vcenter table-hover text-center mb-0">
                        <thead class="table-light sticky-top" style="z-index: 10;">
                            <tr>
                                <th style="width: 10%">ID</th>
                                <th>Nome da Conta</th>
                                <th style="width: 20%">Status</th>
                                <th style="width: 15%">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(isset($playstoreAccounts) && $playstoreAccounts->count() > 0)
                                @foreach($playstoreAccounts as $acc)
                                <tr>
                                    <td class="text-muted fw-bold">#{{ $acc->id }}</td>
                                    <td class="text-start">{{ $acc->name }}</td>
                                    <td>
                                        @if($acc->status == 1)
                                            <span class="badge bg-success">Ativada</span>
                                        @else
                                            <span class="badge bg-danger">Desativada</span>
                                        @endif
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-secondary" onclick="editAccountModal({{ $acc->id }}, '{{ addslashes($acc->name) }}', {{ $acc->status }})">
                                            <i class="bi bi-pencil-square"></i> Editar
                                        </button>
                                    </td>
                                </tr>
                                @endforeach
                            @else
                                <tr><td colspan="4" class="py-3">Nenhuma conta cadastrada ainda.</td></tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editAccountModal" tabindex="-1" aria-labelledby="editAccountModalLabel" aria-hidden="true" style="z-index: 1060;">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <form action="{{ route('admin.apps.updateAccount') }}" method="POST" id="formEditAccount">
            @csrf
            <input type="hidden" name="id" id="edit_account_id">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Editar Conta</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Nome</label>
                        <input type="text" name="name" id="edit_account_name" class="form-control" required>
                    </div>
                    <div class="mb-2">
                        <label class="form-label">Status</label>
                        <select name="status" id="edit_account_status" class="form-select">
                            <option value="1">Ativada</option>
                            <option value="0">Desativada</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer p-2">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" id="btnEditAccount" class="btn btn-primary btn-sm">Salvar</button>
                </div>
            </div>
        </form>
    </div>
</div>

@include('admin/includes/footer')

<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/assets-manager/js/sweetalert2.all.js"></script>
<script>

    // Evitar múltiplos submits e mostrar Loading nos Modais
    document.getElementById('formAddAccount').addEventListener('submit', function() {
        let btn = document.getElementById('btnAddAccount');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
    });

    document.getElementById('formEditAccount').addEventListener('submit', function() {
        let btn = document.getElementById('btnEditAccount');
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
    });

    // Função para abrir o modal de edição
    function editAccountModal(id, name, status) {
        document.getElementById('edit_account_id').value = id;
        document.getElementById('edit_account_name').value = name;
        document.getElementById('edit_account_status').value = status;
        
        var editModal = new bootstrap.Modal(document.getElementById('editAccountModal'));
        editModal.show();
    }

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

    $('#sea').on('click',function(){
        var sValue = $('#pSea').val();
        window.location = "{{ route('admin.apps') }}/"+sValue;
    });
	const STATUS_MAP = {
    0: { label: 'Pendente',           cls: 'text-warning' },
    1: { label: 'Publicado',          cls: 'text-success' },
    2: { label: 'Aguard. Publicação', cls: 'text-warning' },
    3: { label: 'Análise',            cls: 'text-primary' },
    4: { label: 'Desativado',         cls: 'text-danger'  },
};

	function statusBadgeHtml(status) {
		const s = STATUS_MAP[status] ?? STATUS_MAP[1];
		return `<span class="fw-semibold ${s.cls}">${s.label}</span>`;
	}

	function quickStatus(id, server, current, name) {
		const options = Object.entries(STATUS_MAP)
			.map(([v, s]) => `<option value="${v}" ${Number(v) === Number(current) ? 'selected' : ''}>${s.label}</option>`)
			.join('');

		Sweetalert2.fire({
			title: 'Alterar status',
			html: `<p class="text-muted mb-3" style="font-size:.9rem;">${name}</p>
				   <select id="qs-select" class="form-select">${options}</select>`,
			showCancelButton: true,
			confirmButtonText: 'Salvar',
			cancelButtonText: 'Cancelar',
			confirmButtonColor: '#6c757d',
			preConfirm: () => document.getElementById('qs-select').value,
		}).then((result) => {
			if (!result.isConfirmed) return;
			const cell = document.getElementById('status-cell-' + id);

			fetch(`{{ route('admin.apps.quickStatus') }}`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'X-Requested-With': 'XMLHttpRequest',
					'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
				},
				body: JSON.stringify({ id, server, status: result.value }),
			})
			.then(r => r.json())
			.then(json => {
				if (json.success) {
					if (cell) cell.innerHTML = statusBadgeHtml(json.status);
					Sweetalert2.fire({ icon: 'success', title: 'Status atualizado', timer: 1200, showConfirmButton: false });
				} else {
					Sweetalert2.fire({ icon: 'error', title: 'Erro', text: json.message ?? 'Não foi possível atualizar.' });
				}
			})
			.catch(() => Sweetalert2.fire({ icon: 'error', title: 'Erro', text: 'Falha de conexão.' }));
		});
	}

    function formRelease(port, name, id, server) {
		Sweetalert2.fire({
			title: 'Liberar formulário',
			html: `
				<p class="text-muted mb-3">Porta: <b>${port}</b> &mdash; <b>${name}</b></p>
				<div style="display:flex; flex-direction:column; gap:10px; text-align:left;">
					<label style="
						display:flex; align-items:flex-start; gap:12px;
						border:2px solid #e2e8f0; border-radius:10px;
						padding:14px 16px; cursor:pointer;
						transition: border-color .2s, background .2s;
					" id="opt-form-label">
						<input type="radio" name="release_type" value="form" checked
							style="margin-top:3px; accent-color:#6c757d; width:16px; height:16px; flex-shrink:0;"
							onchange="highlightOption()">
						<div>
							<div style="font-weight:600; font-size:.95rem;">↩️ Liberar formulário</div>
							<div style="font-size:.82rem; color:#64748b; margin-top:2px;">
								O cliente poderá preencher os dados novamente do início.
							</div>
						</div>
					</label>
					<label style="
						display:flex; align-items:flex-start; gap:12px;
						border:2px solid #e2e8f0; border-radius:10px;
						padding:14px 16px; cursor:pointer;
						transition: border-color .2s, background .2s;
					" id="opt-update-label">
						<input type="radio" name="release_type" value="update"
							style="margin-top:3px; accent-color:#0d6efd; width:16px; height:16px; flex-shrink:0;"
							onchange="highlightOption()">
						<div>
							<div style="font-weight:600; font-size:.95rem;">🔄 Marcar atualização</div>
							<div style="font-size:.82rem; color:#64748b; margin-top:2px;">
								Mantém a personalização atual e muda o status para <b>Aguardando Publicação</b>, para ser atualizado novamente.
							</div>
						</div>
					</label>
				</div>
			`,
			showCancelButton: true,
			confirmButtonText: 'Confirmar',
			cancelButtonText: 'Cancelar',
			confirmButtonColor: '#6c757d',
			didOpen: () => { highlightOption(); }
		}).then((result) => {
			if (result.isConfirmed) {
				const selected = document.querySelector('input[name="release_type"]:checked');
				if (selected) {
					$('#form-release-action-' + id).val(selected.value);
					$('#form-release-' + id).submit();
				}
			}
		});
	}

	function highlightOption() {
		const selected = document.querySelector('input[name="release_type"]:checked')?.value;

		const formLabel   = document.getElementById('opt-form-label');
		const updateLabel = document.getElementById('opt-update-label');

		if (!formLabel || !updateLabel) return;

		// Cores sensiveis ao tema (o popup fica escuro no modo escuro)
		var dark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
		var idle = dark ? '#3a4150' : '#e2e8f0';

		formLabel.style.borderColor   = selected === 'form'   ? '#6c757d' : idle;
		formLabel.style.background    = selected === 'form'   ? (dark ? 'rgba(108,117,125,.22)' : '#f8f9fa') : '';
		updateLabel.style.borderColor = selected === 'update' ? '#0d6efd' : idle;
		updateLabel.style.background  = selected === 'update' ? (dark ? 'rgba(13,110,253,.22)' : '#eff6ff') : '';
    }
	
    (function checkPlayStoreLinks() {

        const ICON_PLAY    = '<i class="bi bi-google-play align-top"></i>';
        const CONCURRENCY  = 5;
        const CSRF_TOKEN   = document.querySelector('meta[name="csrf-token"]')?.content ?? '';

        const buttons = Array.from(document.querySelectorAll('.btn-playstore'));
        if (!buttons.length) return;

        function applyState(btn, state) {
			btn.classList.remove(
				'btn-playstore-checking',
				'btn-playstore-ok',
				'btn-playstore-missing',
				'btn-playstore-unknown'
			);
			btn.innerHTML = ICON_PLAY;

			const titleMap = {
				ok      : 'App encontrado na Play Store ✓',
				missing : 'App NÃO encontrado na Play Store (404)',
				unknown : 'Não foi possível verificar o status na Play Store',
			};

			btn.classList.add('btn-playstore-' + state);
			btn.title = titleMap[state];
			btn.style.pointerEvents = '';
		}
        async function checkOne(btn) {
            const pkg = btn.dataset.package;
            if (!pkg) { applyState(btn, 'unknown'); return; }

            try {
                const res = await fetch(
					`{{ route('admin.apps.checkLink') }}?package=${encodeURIComponent(pkg)}`,
					{
						method : 'GET',
						headers: {
							'X-Requested-With': 'XMLHttpRequest',
							'X-CSRF-TOKEN'    : CSRF_TOKEN,
						},
					}
				);
                if (!res.ok) { applyState(btn, 'unknown'); return; }

                const json = await res.json();
                if      (json.status === 200) applyState(btn, 'ok');
                else if (json.status === 404) applyState(btn, 'missing');
                else                          applyState(btn, 'unknown');
            } catch (_) {
                applyState(btn, 'unknown');
            }
        }
        async function runQueue() {
            const queue = [...buttons];
            async function worker() {
                while (queue.length) {
                    const btn = queue.shift();
                    await checkOne(btn);
                }
            }

            const workers = Array.from({ length: CONCURRENCY }, worker);
            await Promise.all(workers);
        }

        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', runQueue);
        } else {
            runQueue();
        }

    })();
</script>