@section('title', 'Verificação de Conteúdos')
@include('admin/includes/header')

<style>
.cv-folder-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 28px 16px; border: 2px solid #e3e6ea; border-radius: 12px;
    background: #fff; cursor: pointer; transition: all .18s; text-decoration: none; color: #333;
    width: 100%;
}
.cv-folder-btn:hover, .cv-folder-btn.active { border-color: #0d6efd; background: #f0f5ff; color: #0d6efd; }
.cv-folder-btn i { font-size: 2rem; }
.cv-folder-btn span { font-size: .9rem; font-weight: 600; text-align: center; }
.cv-folder-btn .cv-count {
    font-size: .75rem; font-weight: 400; color: #888; background: #f0f0f0;
    padding: 2px 8px; border-radius: 20px;
}
.cv-folder-btn.active .cv-count { background: #d0e2ff; color: #0d6efd; }

.cv-toolbar {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.cv-search-wrap { flex: 1; min-width: 180px; position: relative; }
.cv-search-wrap i {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: #aaa; font-size: .9rem; pointer-events: none;
}
.cv-search-input {
    width: 100%; padding: 7px 12px 7px 32px; border: 1px solid #e3e6ea; border-radius: 8px;
    font-size: .88rem; outline: none; transition: border-color .15s;
}
.cv-search-input:focus { border-color: #0d6efd; box-shadow: 0 0 0 3px rgba(13,110,253,.1); }
.cv-sort-btn {
    display: flex; align-items: center; gap: 6px; padding: 7px 14px;
    border: 1px solid #e3e6ea; border-radius: 8px; background: #fff;
    font-size: .85rem; cursor: pointer; white-space: nowrap; transition: all .15s; color: #555;
}
.cv-sort-btn:hover, .cv-sort-btn.active { border-color: #0d6efd; color: #0d6efd; background: #f0f5ff; }
.cv-results-info { font-size: .8rem; color: #888; padding: 4px 0; white-space: nowrap; }

.cv-content-item { border: 1px solid #e3e6ea; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: #fff; }
.cv-content-item.cv-hidden { display: none; }
.cv-content-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; cursor: pointer; user-select: none; transition: background .15s;
}
.cv-content-header:hover { background: #f8f9fa; }
.cv-content-header.open { background: #f0f5ff; border-bottom: 1px solid #d0e2ff; }
.cv-content-title { font-weight: 600; font-size: .92rem; }
.cv-content-meta  { font-size: .76rem; color: #888; margin-top: 2px; }
.cv-content-arrow { transition: transform .2s; color: #aaa; }
.cv-content-header.open .cv-content-arrow { transform: rotate(180deg); color: #0d6efd; }
.cv-content-body  { display: none; padding: 16px; background: #fafbff; }
.cv-no-results    { color: #888; font-size: .9rem; padding: 12px 4px; }

.cv-player { background: #fff; border: 1px solid #e3e6ea; border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.cv-player-name { font-size: .8rem; color: #555; margin-bottom: 4px; }
.cv-player-date { font-size: .72rem; color: #aaa; margin-bottom: 10px; }
.cv-player-ctrl { display: flex; align-items: center; gap: 10px; }
.cv-play-btn {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: #0d6efd; color: #fff; display: flex; align-items: center;
    justify-content: center; cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.cv-play-btn:hover { background: #0b5ed7; }
.cv-play-btn i { font-size: .85rem; pointer-events: none; }
.cv-progress-wrap {
    flex: 1; height: 6px; background: #e3e6ea; border-radius: 3px;
    cursor: pointer; position: relative; overflow: hidden;
}
.cv-progress-bar {
    height: 100%; width: 0; background: #0d6efd;
    border-radius: 3px; transition: width .1s linear; pointer-events: none;
}
.cv-time { font-size: .75rem; color: #888; white-space: nowrap; min-width: 80px; text-align: right; }
.cv-download-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid #e3e6ea;
    background: #fff; color: #555; display: flex; align-items: center;
    justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .15s;
}
.cv-download-btn:hover:not(:disabled) { background: #f0f5ff; border-color: #0d6efd; color: #0d6efd; }
.cv-download-btn:disabled { opacity: .5; cursor: not-allowed; }
.cv-download-btn i { font-size: .85rem; pointer-events: none; }

.cmp-toolbar {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
    background: #f8f9fa; padding: 12px 16px; border-radius: 12px;
}
.cmp-filter-group {
    display: flex; gap: 4px; background: #fff; border-radius: 40px; padding: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.cmp-filter-btn {
    border: none; background: transparent; padding: 6px 16px; border-radius: 30px;
    font-size: .8rem; font-weight: 500; cursor: pointer; transition: all .15s;
}
.cmp-filter-btn.active {
    background: #0d6efd; color: #fff;
}
.cmp-expand-btn, .cmp-collapse-btn {
    background: #fff; border: 1px solid #e3e6ea; padding: 6px 14px; border-radius: 30px;
    font-size: .8rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: all .15s;
}
.cmp-expand-btn:hover, .cmp-collapse-btn:hover { background: #f0f5ff; border-color: #0d6efd; }
.cmp-run-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 24px; border: none; border-radius: 40px;
    background: #0d6efd; color: #fff; font-size: .9rem; font-weight: 500;
    cursor: pointer; transition: all .2s; box-shadow: 0 2px 6px rgba(13,110,253,0.2);
}
.cmp-run-btn:hover:not(:disabled) { background: #0b5ed7; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(13,110,253,0.3); }
.cmp-run-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.cmp-type-block { margin-bottom: 28px; }
.cmp-type-title {
    font-size: .85rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #495057; margin-bottom: 12px;
    display: flex; align-items: center; gap: 8px; border-left: 3px solid #0d6efd; padding-left: 10px;
}
.cmp-type-title i { font-size: 1rem; }

.cmp-pair {
    border: 1px solid #e3e6ea; border-radius: 10px; overflow: hidden; margin-bottom: 8px;
    background: #fff; transition: box-shadow .15s;
}
.cmp-pair:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.04); }
.cmp-pair-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: #fff; cursor: pointer; user-select: none;
}
.cmp-pair.cmp-ok    .cmp-pair-header { border-left: 4px solid #28a745; }
.cmp-pair.cmp-warn  .cmp-pair-header { border-left: 4px solid #ffc107; }
.cmp-pair.cmp-err   .cmp-pair-header { border-left: 4px solid #dc3545; }

.cmp-pair-folders { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; flex-wrap: wrap; }
.cmp-pair-badge {
    font-size: .7rem; font-weight: 500; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.cmp-badge-ok   { background: #d1f0da; color: #176a30; }
.cmp-badge-warn { background: #fff3cd; color: #856404; }
.cmp-badge-err  { background: #fde8e8; color: #922b2b; }

.cmp-issues { padding: 12px 16px; background: #fafbff; border-top: 1px solid #e3e6ea; }
.cmp-issue  { display: flex; align-items: flex-start; gap: 8px; font-size: .82rem; margin-bottom: 8px; }
.cmp-issue:last-child { margin-bottom: 0; }
.cmp-issue i { margin-top: 2px; flex-shrink: 0; }
.cmp-issue-dup-list { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.cmp-issue-dup-row  { font-size: .78rem; color: #555; display: flex; align-items: center; gap: 6px; }
.cmp-issue-dup-row i { color: #aaa; font-size: .7rem; }

.cmp-summary {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding: 16px 20px; background: #f8f9fa; border-radius: 14px; margin-bottom: 24px;
    font-size: .88rem; border: 1px solid #e9ecef;
}
.cmp-summary-item { display: flex; align-items: center; gap: 8px; }
.cmp-summary-dot  { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

.cv-toast-wrap {
    position: fixed; bottom: 24px; right: 24px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.cv-toast {
    display: flex; align-items: center; gap: 10px;
    background: #1e2430; color: #fff; border-radius: 10px;
    padding: 11px 16px; font-size: .83rem; min-width: 220px; max-width: 340px;
    box-shadow: 0 4px 18px rgba(0,0,0,.22); animation: cv-toast-in .22s ease; pointer-events: auto;
}
.cv-toast.cv-toast-ok   { border-left: 4px solid #28a745; }
.cv-toast.cv-toast-err  { border-left: 4px solid #dc3545; }
.cv-toast.cv-toast-info { border-left: 4px solid #0d6efd; }
.cv-toast i { font-size: 1rem; flex-shrink: 0; }
.cv-toast-out { animation: cv-toast-out .25s ease forwards; }
@keyframes cv-toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cv-toast-out { to { opacity: 0; transform: translateY(12px); } }

.cv-spinner {
    display: inline-block; width: 18px; height: 18px; border: 2px solid #ccc;
    border-top-color: #0d6efd; border-radius: 50%; animation: cv-spin .7s linear infinite;
}
@keyframes cv-spin { to { transform: rotate(360deg); } }

.breadcrumb {
    background: #f8f9fa; padding: 8px 16px; border-radius: 30px; font-size: .85rem;
}
.breadcrumb-item a { text-decoration: none; color: #0d6efd; }
.breadcrumb-item a:hover { text-decoration: underline; }

/* ===================================================================
   TEMA ESCURO (especifico desta tela)
   Ajusta o sistema .cv-* / .cmp-* que foi desenhado para fundo branco.
   =================================================================== */
[data-bs-theme="dark"] .cv-folder-btn,
[data-bs-theme="dark"] .cv-content-item,
[data-bs-theme="dark"] .cv-player,
[data-bs-theme="dark"] .cv-sort-btn,
[data-bs-theme="dark"] .cv-download-btn,
[data-bs-theme="dark"] .cmp-filter-group,
[data-bs-theme="dark"] .cmp-expand-btn,
[data-bs-theme="dark"] .cmp-collapse-btn,
[data-bs-theme="dark"] .cmp-pair,
[data-bs-theme="dark"] .cmp-pair-header {
    background: #1b1f27;
    border-color: #2a2f3a;
    color: #e7eaee;
}
[data-bs-theme="dark"] .cv-folder-btn,
[data-bs-theme="dark"] .cv-sort-btn,
[data-bs-theme="dark"] .cv-download-btn,
[data-bs-theme="dark"] .cv-player-name,
[data-bs-theme="dark"] .cmp-issue-dup-row { color: #cfd4db; }
[data-bs-theme="dark"] .cv-content-meta,
[data-bs-theme="dark"] .cv-results-info,
[data-bs-theme="dark"] .cv-time,
[data-bs-theme="dark"] .cv-no-results,
[data-bs-theme="dark"] .cv-player-date,
[data-bs-theme="dark"] .cv-content-arrow,
[data-bs-theme="dark"] .cv-search-wrap i,
[data-bs-theme="dark"] .cmp-issue-dup-row i,
[data-bs-theme="dark"] .cv-count { color: #98a2b3; }

/* preenchimentos sutis (eram #f8f9fa / #fafbff / #f0f0f0) */
[data-bs-theme="dark"] .cv-count,
[data-bs-theme="dark"] .cv-content-header:hover,
[data-bs-theme="dark"] .cmp-toolbar,
[data-bs-theme="dark"] .cmp-summary,
[data-bs-theme="dark"] .breadcrumb,
[data-bs-theme="dark"] .cv-content-body,
[data-bs-theme="dark"] .cmp-issues { background: #20242d; }
[data-bs-theme="dark"] .cmp-summary { border-color: #2a2f3a; }

/* estados azuis (hover / ativo / aberto) — eram #f0f5ff / #d0e2ff */
[data-bs-theme="dark"] .cv-folder-btn:hover,
[data-bs-theme="dark"] .cv-folder-btn.active,
[data-bs-theme="dark"] .cv-sort-btn:hover,
[data-bs-theme="dark"] .cv-sort-btn.active,
[data-bs-theme="dark"] .cmp-expand-btn:hover,
[data-bs-theme="dark"] .cmp-collapse-btn:hover,
[data-bs-theme="dark"] .cv-download-btn:hover:not(:disabled),
[data-bs-theme="dark"] .cv-content-header.open {
    background: rgba(59,130,246,.16);
    border-color: #3b82f6;
    color: #6aa8ff;
}
[data-bs-theme="dark"] .cv-content-header.open { border-bottom-color: rgba(59,130,246,.35); }
[data-bs-theme="dark"] .cv-folder-btn.active .cv-count { background: rgba(59,130,246,.28); color: #9ec5ff; }
[data-bs-theme="dark"] .cv-content-header.open .cv-content-arrow { color: #6aa8ff; }

/* inputs / trilha de progresso / spinner */
[data-bs-theme="dark"] .cv-search-input,
[data-bs-theme="dark"] .cv-progress-wrap { background: #20242d; border-color: #2a2f3a; color: #e7eaee; }
[data-bs-theme="dark"] .cv-search-input::placeholder { color: #98a2b3; }
[data-bs-theme="dark"] .cv-spinner { border-color: #3a4150; border-top-color: #6aa8ff; }

/* rotulo de secao */
[data-bs-theme="dark"] .cmp-type-title { color: #cfd4db; }

/* selos de status (pastel claro -> tom escuro translucido) */
[data-bs-theme="dark"] .cmp-badge-ok   { background: rgba(50,213,131,.16); color: #6ee7a8; }
[data-bs-theme="dark"] .cmp-badge-warn { background: rgba(251,191,36,.16); color: #fbd66a; }
[data-bs-theme="dark"] .cmp-badge-err  { background: rgba(239,68,68,.16);  color: #f7a5a0; }
</style>

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

    <div class="d-flex align-items-center mb-3 gap-2">
        <i class="bi bi-folder2-open fs-5 text-primary"></i>
        <h5 class="fw-semibold mb-0">Verificação de Conteúdos</h5>
        <span class="text-muted" style="font-size:.82rem;">— snapshot da execução anterior</span>
    </div>

    <div id="cv-loading" class="text-muted" style="font-size:.9rem; display:flex; align-items:center; gap:8px;">
        <span class="cv-spinner"></span> Carregando...
    </div>
    <div id="cv-erro" class="alert alert-danger" style="display:none;"></div>

    <div id="cv-main" style="display:none;">

        <ul class="nav nav-tabs mb-3" id="cv-tabs">
            <li class="nav-item">
                <button class="nav-link active" id="tab-browser-btn" onclick="cvSwitchTab('browser')">
                    <i class="bi bi-folder2-open me-1"></i> Histórico
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" id="tab-compare-btn" onclick="cvSwitchTab('compare')">
                    <i class="bi bi-arrow-left-right me-1"></i> Comparação
                </button>
            </li>
        </ul>

        <div id="tab-browser">

            <nav id="cv-breadcrumb" class="mb-3" style="display:none;">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="#" id="cv-bc-root">
                            <i class="bi bi-house-door"></i> Início
                        </a>
                    </li>
                    <li class="breadcrumb-item active" id="cv-bc-folder"></li>
                </ol>
            </nav>

            <div id="cv-screen-folders">
                <div class="row g-3" id="cv-folder-list"></div>
            </div>

            <div id="cv-screen-contents" style="display:none;">
                <div class="cv-toolbar">
                    <div class="cv-search-wrap">
                        <i class="bi bi-search"></i>
                        <input type="text" id="cv-search" class="cv-search-input"
                               placeholder="Buscar conteúdo..." autocomplete="off">
                    </div>
                    <button id="cv-sort-btn" class="cv-sort-btn" title="Alternar ordem">
                        <i class="bi bi-sort-alpha-down" id="cv-sort-icon"></i>
                        <span id="cv-sort-label">A–Z</span>
                    </button>
                    <span class="cv-results-info" id="cv-results-info"></span>
                </div>
                <div id="cv-content-list"></div>
                <div id="cv-no-results" class="cv-no-results" style="display:none;">
                    <i class="bi bi-search me-1"></i> Nenhum resultado encontrado.
                </div>
            </div>

        </div>

        <div id="tab-compare" style="display:none;">

            <div class="d-flex justify-content-center align-items-center">
                <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
                    <button class="cmp-run-btn" id="cmp-run-btn" onclick="cmpRun()">
                        <i class="bi bi-play-circle"></i> Executar verificação
                    </button>
                    <div id="cmp-status" class="text-muted" style="font-size:.85rem;"></div>
                </div>
            </div>

            <div id="cmp-toolbar" style="display:none;" class="cmp-toolbar">
                <div class="cv-search-wrap" style="flex:1;">
                    <i class="bi bi-search"></i>
                    <input type="text" id="cmp-search" class="cv-search-input" placeholder="Buscar programa...">
                </div>
                <div class="cmp-filter-group">
                    <button class="cmp-filter-btn active" data-filter="all">Todos</button>
                    <button class="cmp-filter-btn" data-filter="ok">OK</button>
                    <button class="cmp-filter-btn" data-filter="warn">Aviso</button>
                    <button class="cmp-filter-btn" data-filter="err">Erro</button>
                </div>
                <div class="d-flex gap-2" id="cmp-expand-collapse-wrap">
                    <button class="cmp-expand-btn" id="cmp-expand-all"><i class="bi bi-arrows-expand"></i> Expandir</button>
                    <button class="cmp-collapse-btn" id="cmp-collapse-all"><i class="bi bi-arrows-collapse"></i> Recolher</button>
                </div>
                <button class="cv-sort-btn" id="cmp-sort-btn" title="Ordenar por nome">
                    <i class="bi bi-sort-alpha-down" id="cmp-sort-icon"></i>
                    <span id="cmp-sort-label">A–Z</span>
                </button>
                <span id="cmp-results-info" class="cv-results-info"></span>
            </div>

            <div id="cmp-result" style="display:none;"></div>

        </div>

    </div>

</div>
</main>

<div class="cv-toast-wrap" id="cv-toast-wrap"></div>

@include('admin/includes/footer')
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://getbootstrap.com/docs/5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
let CV_DATA     = {};
let CV_SORT_AZ  = true;
let CV_CUR_TYPE = '';
let CMP_RAW_DATA = null;
let CMP_FILTERED = null;
let CMP_SORT_AZ  = true;
let CMP_FILTER   = 'all';
let CMP_SEARCH   = '';

const CV_LABELS = {
    'programas':               'Programas',
    'programetes':             'Programetes',
    'programas-fim-de-semana': 'Fim de Semana',
};

const CV_ICONS = {
    'programas':               'bi-mic-fill',
    'programetes':             'bi-soundwave',
    'programas-fim-de-semana': 'bi-calendar-week-fill',
};

function cvFmt(str) {
    if (!str) return '—';
    let d = new Date(str.replace(' ', 'T'));
    if (isNaN(d)) return str;
    return d.toLocaleDateString('pt-BR') + ' ' + d.toLocaleTimeString('pt-BR', {hour: '2-digit', minute: '2-digit'});
}

function cvFmtDuration(sec) {
    if (isNaN(sec)) return '--:--';
    let m = Math.floor(sec / 60), s = Math.floor(sec % 60);
    return String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
}

function cvStreamUrl(type, name, file) {
    let base = '{{ route("admin.contentsVerify.stream", ["type" => "XTYPE", "name" => "XNAME", "file" => "XFILE"]) }}';
    return base.replace('XTYPE', encodeURIComponent(type))
               .replace('XNAME', encodeURIComponent(name))
               .replace('XFILE', encodeURIComponent(file));
}

function cvToast(msg, type, duration) {
    let icons = {ok: 'bi-check-circle-fill', err: 'bi-x-circle-fill', info: 'bi-arrow-down-circle-fill'};
    let el = document.createElement('div');
    el.className = 'cv-toast cv-toast-' + (type || 'info');
    el.innerHTML = '<i class="bi ' + (icons[type] || icons.info) + '"></i><span>' + msg + '</span>';
    document.getElementById('cv-toast-wrap').appendChild(el);
    setTimeout(() => {
        el.classList.add('cv-toast-out');
        setTimeout(() => el.remove(), 260);
    }, duration || 3000);
}

function cvDownload(url, filename, btn) {
    btn.disabled = true;
    let icon = btn.querySelector('i');
    let prevClass = icon.className;
    icon.className = 'bi bi-hourglass-split';
    cvToast('Preparando download...', 'info', 2500);
    fetch(url, {credentials: 'same-origin'})
        .then(r => {
            if (!r.ok) throw new Error('HTTP ' + r.status);
            return r.blob();
        })
        .then(blob => {
            let a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(a.href);
            cvToast('Download iniciado: ' + filename, 'ok');
        })
        .catch(() => cvToast('Erro ao baixar o arquivo.', 'err'))
        .finally(() => {
            btn.disabled = false;
            icon.className = prevClass;
        });
}

function cvSwitchTab(tab) {
    if (tab === 'browser') {
        $('#tab-browser').show();
        $('#tab-compare').hide();
        $('#tab-browser-btn').addClass('active');
        $('#tab-compare-btn').removeClass('active');
        document.querySelectorAll('.cmp-pair audio').forEach(a => a.pause());
    } else {
        document.querySelectorAll('.cv-player audio').forEach(a => a.pause());
        $('#tab-browser').hide();
        $('#tab-compare').show();
        $('#tab-browser-btn').removeClass('active');
        $('#tab-compare-btn').addClass('active');
        if (CMP_RAW_DATA) cmpApplyFiltersAndRender();
    }
}

function cvShowFolders() {
    $('#cv-screen-contents').hide();
    $('#cv-breadcrumb').hide();
    $('#cv-folder-list').empty();
    CV_CUR_TYPE = '';

    Object.keys(CV_DATA).forEach(type => {
        let count = (CV_DATA[type] || []).length;
        let icon = CV_ICONS[type] || 'bi-folder-fill';
        let label = CV_LABELS[type] || type;
        $('#cv-folder-list').append(
            `<div class="col-md-4">
                <button class="cv-folder-btn" onclick="cvOpenFolder('${type}')">
                    <i class="bi ${icon}"></i>
                    <span>${label}</span>
                    <span class="cv-count">${count} conteúdo${count !== 1 ? 's' : ''}</span>
                </button>
            </div>`
        );
    });
    $('#cv-screen-folders').show();
}

function cvOpenFolder(type) {
    CV_CUR_TYPE = type;
    $('#cv-screen-folders').hide();
    $('#cv-content-list').empty();
    $('#cv-search').val('');
    $('#cv-no-results').hide();
    $('#cv-bc-folder').text(CV_LABELS[type] || type);
    $('#cv-breadcrumb').show();

    let itens = CV_DATA[type] || [];
    if (itens.length === 0) {
        $('#cv-content-list').html('<p class="text-muted">Nenhum conteúdo nesta pasta.</p>');
        $('#cv-screen-contents').show();
        cvUpdateInfo(0, 0);
        return;
    }
    cvRenderItems(type, itens);
    $('#cv-screen-contents').show();
    cvApplyFilter();
}

function cvRenderItems(type, itens) {
    $('#cv-content-list').empty();
    let sorted = itens.slice().sort((a, b) => {
        let cmp = a.name.localeCompare(b.name, 'pt-BR', {sensitivity: 'base'});
        return CV_SORT_AZ ? cmp : -cmp;
    });

    sorted.forEach((item, idx) => {
        let files = item.files || [];
        let id = 'cv-item-' + idx;
        let playersHtml = '';

        files.forEach(f => {
            let streamUrl = cvStreamUrl(type, item.name, f.name);
            let escapedUrl = streamUrl.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
            let escapedFilename = f.name.replace(/\\/g, '\\\\').replace(/'/g, "\\'");
            playersHtml += `
                <div class="cv-player">
                    <div class="cv-player-name"><i class="bi bi-file-earmark-music me-1"></i>${f.name}</div>
                    <div class="cv-player-date"><i class="bi bi-pencil-square me-1"></i>Alteração de arquivo: ${cvFmt(f.modified_at)}</div>
                    <div class="cv-player-ctrl">
                        <button class="cv-play-btn" onclick="cvToggle(this)"><i class="bi bi-play-fill"></i></button>
                        <div class="cv-progress-wrap" onclick="cvSeek(this, event)"><div class="cv-progress-bar"></div></div>
                        <span class="cv-time">--:-- / --:--</span>
                        <button class="cv-download-btn" onclick="cvDownload('${escapedUrl}', '${escapedFilename}', this)" title="Baixar arquivo">
                            <i class="bi bi-download"></i>
                        </button>
                    </div>
                    <audio preload="none" src="${streamUrl}" style="display:none;"></audio>
                </div>`;
        });

        $('#cv-content-list').append(`
            <div class="cv-content-item" data-name="${item.name.toLowerCase()}">
                <div class="cv-content-header" onclick="cvToggleItem(this, '${id}')">
                    <div>
                        <div class="cv-content-title"><i class="bi bi-folder me-2 text-warning"></i>${item.name}</div>
                        <div class="cv-content-meta">Arquivado em: ${cvFmt(item.archived_at)} &nbsp;·&nbsp; ${files.length} arquivo${files.length !== 1 ? 's' : ''}</div>
                    </div>
                    <i class="bi bi-chevron-down cv-content-arrow"></i>
                </div>
                <div class="cv-content-body" id="${id}">${playersHtml}</div>
            </div>
        `);
    });
}

function cvApplyFilter() {
    let q = ($('#cv-search').val() || '').toLowerCase().trim();
    let items = $('#cv-content-list .cv-content-item');
    let visible = 0;
    items.each(function () {
        let name = $(this).data('name') || '';
        let show = !q || name.includes(q);
        $(this).toggleClass('cv-hidden', !show);
        if (show) visible++;
    });
    cvUpdateInfo(visible, items.length);
    $('#cv-no-results').toggle(visible === 0 && items.length > 0);
}

function cvUpdateInfo(visible, total) {
    if (total === 0) { $('#cv-results-info').text(''); return; }
    $('#cv-results-info').text(visible === total ? total + ' conteúdo' + (total !== 1 ? 's' : '') : visible + ' de ' + total);
}

$('#cv-sort-btn').on('click', function () {
    CV_SORT_AZ = !CV_SORT_AZ;
    $('#cv-sort-icon').attr('class', CV_SORT_AZ ? 'bi bi-sort-alpha-down' : 'bi bi-sort-alpha-up');
    $('#cv-sort-label').text(CV_SORT_AZ ? 'A–Z' : 'Z–A');
    $(this).toggleClass('active', !CV_SORT_AZ);
    if (CV_CUR_TYPE) {
        document.querySelectorAll('.cv-player audio').forEach(a => a.pause());
        cvRenderItems(CV_CUR_TYPE, CV_DATA[CV_CUR_TYPE] || []);
        cvApplyFilter();
    }
});

$('#cv-search').on('input', cvApplyFilter);

function cvToggleItem(header, id) {
    let body = document.getElementById(id);
    let isOpen = body.style.display === 'block';
    if (isOpen) {
        $(body).find('audio').each(function () {
            this.pause();
            $(this).closest('.cv-player').find('.cv-play-btn i').removeClass('bi-pause-fill').addClass('bi-play-fill');
        });
    }
    body.style.display = isOpen ? 'none' : 'block';
    $(header).toggleClass('open', !isOpen);
}

function cvToggle(btn) {
    let player = btn.closest('.cv-player');
    let audio = player.querySelector('audio');
    let icon = btn.querySelector('i');
    let isPlaying = !audio.paused;
    document.querySelectorAll('.cv-player audio').forEach(a => {
        if (a !== audio) {
            a.pause();
            a.closest('.cv-player').querySelector('.cv-play-btn i').className = 'bi bi-play-fill';
        }
    });
    if (isPlaying) {
        audio.pause();
        icon.className = 'bi bi-play-fill';
    } else {
        audio.play();
        icon.className = 'bi bi-pause-fill';
    }
}

function cvSeek(progressWrap, e) {
    let player = progressWrap.closest('.cv-player');
    let audio = player.querySelector('audio');
    if (!audio.duration) return;
    let rect = progressWrap.getBoundingClientRect();
    audio.currentTime = ((e.clientX - rect.left) / rect.width) * audio.duration;
}

document.addEventListener('timeupdate', function (e) {
    if (e.target.tagName !== 'AUDIO') return;
    let player = e.target.closest('.cv-player');
    if (!player) return;
    let pct = e.target.duration ? (e.target.currentTime / e.target.duration * 100) : 0;
    player.querySelector('.cv-progress-bar').style.width = pct + '%';
    player.querySelector('.cv-time').textContent = cvFmtDuration(e.target.currentTime) + ' / ' + cvFmtDuration(e.target.duration);
}, true);

document.addEventListener('ended', function (e) {
    if (e.target.tagName !== 'AUDIO') return;
    let player = e.target.closest('.cv-player');
    if (!player) return;
    player.querySelector('.cv-play-btn i').className = 'bi bi-play-fill';
    player.querySelector('.cv-progress-bar').style.width = '0%';
    player.querySelector('.cv-time').textContent = '--:-- / --:--';
}, true);

document.getElementById('cv-bc-root').addEventListener('click', function (e) {
    e.preventDefault();
    document.querySelectorAll('.cv-player audio').forEach(a => a.pause());
    $('#cv-screen-contents').hide();
    cvShowFolders();
});

function cmpRun() {
    let btn = document.getElementById('cmp-run-btn');
    btn.disabled = true;
    let originalHtml = btn.innerHTML;
    btn.innerHTML = '<span class="cv-spinner" style="width:16px;height:16px;border-width:2px;"></span> Verificando...';
    $('#cmp-status').text('');
    $('#cmp-result').hide();
    $('#cmp-toolbar').hide();

    $.ajax({
        url: '{{ route("admin.contentsVerify.compare") }}',
        headers: {'X-Requested-With': 'XMLHttpRequest'},
        success: function (data) {
            btn.disabled = false;
            btn.innerHTML = originalHtml;
            CMP_RAW_DATA = data;
            CMP_FILTER = 'all';
            CMP_SEARCH = '';
            CMP_SORT_AZ = true;
            $('#cmp-search').val('');
            $('#cmp-sort-icon').attr('class', 'bi bi-sort-alpha-down');
            $('#cmp-sort-label').text('A–Z');
            $('.cmp-filter-btn').removeClass('active');
            $('.cmp-filter-btn[data-filter="all"]').addClass('active');
            cmpApplyFiltersAndRender();
            $('#cmp-toolbar').show();
        },
        error: function (xhr) {
            btn.disabled = false;
            btn.innerHTML = originalHtml;
            $('#cmp-status').text('Erro: ' + xhr.status);
            CMP_RAW_DATA = null;
            $('#cmp-toolbar').hide();
        }
    });
}

function cmpApplyFiltersAndRender() {
    if (!CMP_RAW_DATA) return;
    CMP_FILTERED = JSON.parse(JSON.stringify(CMP_RAW_DATA));
    Object.keys(CMP_FILTERED).forEach(type => {
        let items = CMP_FILTERED[type];
        if (!items) return;
        let filtered = items.filter(p => {
            let status = cmpGetStatus(p);
            let matchStatus = CMP_FILTER === 'all' ||
                              (CMP_FILTER === 'ok' && status === 'ok') ||
                              (CMP_FILTER === 'warn' && status === 'warn') ||
                              (CMP_FILTER === 'err' && status === 'err');
            if (!matchStatus) return false;
            if (CMP_SEARCH.trim() !== '') return p.name.toLowerCase().includes(CMP_SEARCH.toLowerCase());
            return true;
        });
        filtered.sort((a, b) => {
            let cmp = a.name.localeCompare(b.name, 'pt-BR', {sensitivity: 'base'});
            return CMP_SORT_AZ ? cmp : -cmp;
        });
        CMP_FILTERED[type] = filtered;
    });
    cmpRenderFiltered();
}

function cmpGetStatus(p) {
    if (p.current.empty) return 'warn';
    if (p.ok) return 'ok';
    let hasDup = p.issues.some(i => i.type === 'duplicate');
    if (hasDup) return 'err';
    return 'warn';
}

function cmpRenderFiltered() {
    let container = $('#cmp-result');
    container.empty();

    let types = Object.keys(CMP_FILTERED).filter(type => CMP_FILTERED[type].length > 0);
    if (types.length === 0) {
        container.html('<p class="text-muted">Nenhum programa corresponde aos filtros.</p>');
        container.show();
        $('#cmp-results-info').text('0 itens');
        $('#cmp-expand-collapse-wrap').hide();
        return;
    }

    let totalOk = 0, totalWarn = 0, totalErr = 0, totalMissing = 0;
    types.forEach(type => {
        CMP_FILTERED[type].forEach(p => {
            let status = cmpGetStatus(p);
            if (status === 'ok') totalOk++;
            else if (status === 'warn') totalWarn++;
            else if (status === 'err') totalErr++;
            if (p.current.empty) totalMissing++;
        });
    });

    let summaryHtml = `
        <div class="cmp-summary">
            <span style="font-weight:600;">Resumo (filtrado):</span>
            <div class="cmp-summary-item"><div class="cmp-summary-dot" style="background:#28a745;"></div>${totalOk} programa${totalOk !== 1 ? 's' : ''} OK</div>
            <div class="cmp-summary-item"><div class="cmp-summary-dot" style="background:#ffc107;"></div>${totalWarn} com contagem diferente</div>
            <div class="cmp-summary-item"><div class="cmp-summary-dot" style="background:#dc3545;"></div>${totalErr} com arquivo duplicado</div>
            ${totalMissing > 0 ? `<div class="cmp-summary-item"><div class="cmp-summary-dot" style="background:#6c757d;"></div>${totalMissing} sem arquivo atual</div>` : ''}
        </div>`;
    container.append(summaryHtml);

    let totalItems = 0;
    let hasAnyIssues = false;

    types.forEach(type => {
        let items = CMP_FILTERED[type];
        totalItems += items.length;
        if (items.length === 0) return;
        let icon = CV_ICONS[type] || 'bi-folder-fill';
        let label = CV_LABELS[type] || type;
        let block = `<div class="cmp-type-block"><div class="cmp-type-title"><i class="bi ${icon}"></i>${label}</div>`;

        items.forEach(p => {
            let status = cmpGetStatus(p);
            let hasDup = p.issues.some(i => i.type === 'duplicate');
            let pairClass, badgeClass, badgeText;
            
            if (p.current.empty) {
                pairClass = 'cmp-warn'; badgeClass = 'cmp-badge-warn'; badgeText = 'Sem arquivo atual';
            } else if (p.ok) {
                pairClass = 'cmp-ok'; badgeClass = 'cmp-badge-ok'; badgeText = 'OK';
            } else if (hasDup) {
                pairClass = 'cmp-err'; badgeClass = 'cmp-badge-err'; badgeText = 'Arquivo duplicado';
            } else {
                pairClass = 'cmp-warn'; badgeClass = 'cmp-badge-warn'; badgeText = 'Contagem diferente';
            }

            let archivedAt = p.hist.archived_at ? ` <span style="font-weight:400;color:#aaa;font-size:.78rem;">— histórico de ${cvFmt(p.hist.archived_at)}</span>` : '';

            // Montagem do bloco do par (Cabeçalho)
            block += `
                <div class="cmp-pair ${pairClass}" data-name="${p.name.toLowerCase()}" data-status="${status}">
                    <div class="cmp-pair-header" onclick="cmpTogglePair(this)">
                        <div class="cmp-pair-folders">
                            <i class="bi bi-folder-fill text-warning" style="font-size:.9rem;"></i>
                            <span>${p.name}</span>${archivedAt}
                        </div>
                        <span class="cmp-pair-badge ${badgeClass}">${badgeText}</span>
                    </div>`;

            // O conteúdo expansível (cmp-issues) começa aqui para TODOS
            block += `<div class="cmp-issues" style="display:none;">`;

            if (p.ok) {
                // Conteúdo para quando está tudo certo
                block += `
                    <div class="cmp-issue">
                        <i class="bi bi-check-circle-fill text-success"></i>
                        <span>Tudo certo! Os arquivos atuais correspondem ao histórico de arquivamento.</span>
                    </div>`;
            } else if (p.current.empty) {
                // Conteúdo para quando não há arquivos na pasta atual
                block += `
                    <div class="cmp-issue">
                        <i class="bi bi-info-circle-fill text-secondary"></i>
                        <span>A pasta deste programa está vazia no diretório de exibição.</span>
                    </div>`;
            } else {
                // Bloco de problemas detectados (Warnings e Errors)
                hasAnyIssues = true; 
                p.issues.forEach(issue => {
                    if (issue.type === 'count_diff') {
                        block += `
                            <div class="cmp-issue">
                                <i class="bi bi-exclamation-triangle-fill text-warning"></i>
                                <span>Contagem diferente: histórico tem <strong>${issue.hist_count}</strong> arquivo${issue.hist_count !== 1 ? 's' : ''}, atual tem <strong>${issue.current_count}</strong>.</span>
                            </div>`;
                    }
                    if (issue.type === 'duplicate') {
                        let dupRows = '';
                        issue.files.forEach(d => {
                            let sameFile = d.current_file === d.hist_file;
                            dupRows += `
                                <div class="cmp-issue-dup-row">
                                    <i class="bi bi-dot"></i>
                                    ${sameFile ? `<span>${d.current_file} — idêntico ao do histórico</span>` : `<span>Atual: ${d.current_file} <i class="bi bi-arrow-left" style="font-size:.7rem;"></i> Histórico: ${d.hist_file} — mesmo conteúdo</span>`}
                                </div>`;
                        });
                        block += `
                            <div class="cmp-issue">
                                <i class="bi bi-x-circle-fill text-danger"></i>
                                <div><span>Arquivo${issue.files.length !== 1 ? 's' : ''} idêntico${issue.files.length !== 1 ? 's' : ''} ao histórico — possível reenvio:</span>
                                <div class="cmp-issue-dup-list">${dupRows}</div></div>
                            </div>`;
                    }
                });
            }

            block += `</div>`; // Fecha .cmp-issues
            block += `</div>`; // Fecha .cmp-pair
        });
        
        block += `</div>`; // Fecha .cmp-type-block
        container.append(block);
    });

    container.show();
    // Mostra os botões de expandir/recolher se houver QUALQUER item na lista
    $('#cmp-expand-collapse-wrap').toggle(totalItems > 0);
    $('#cmp-results-info').text(totalItems + ' programa' + (totalItems !== 1 ? 's' : ''));
}

function cmpTogglePair(header) {
    let issuesDiv = header.parentNode.querySelector('.cmp-issues');
    if (issuesDiv) {
        let isVisible = issuesDiv.style.display === 'block';
        issuesDiv.style.display = isVisible ? 'none' : 'block';
    }
}

function cmpExpandAll() {
    document.querySelectorAll('#cmp-result .cmp-issues').forEach(el => el.style.display = 'block');
}

function cmpCollapseAll() {
    document.querySelectorAll('#cmp-result .cmp-issues').forEach(el => el.style.display = 'none');
}

$(document).ready(function () {
    $('#cmp-search').on('input', function () {
        CMP_SEARCH = $(this).val();
        cmpApplyFiltersAndRender();
    });
    $('.cmp-filter-btn').on('click', function () {
        CMP_FILTER = $(this).data('filter');
        $('.cmp-filter-btn').removeClass('active');
        $(this).addClass('active');
        cmpApplyFiltersAndRender();
    });
    $('#cmp-sort-btn').on('click', function () {
        CMP_SORT_AZ = !CMP_SORT_AZ;
        let icon = $('#cmp-sort-icon');
        let label = $('#cmp-sort-label');
        if (CMP_SORT_AZ) {
            icon.attr('class', 'bi bi-sort-alpha-down');
            label.text('A–Z');
        } else {
            icon.attr('class', 'bi bi-sort-alpha-up');
            label.text('Z–A');
        }
        cmpApplyFiltersAndRender();
    });
    $('#cmp-expand-all').on('click', cmpExpandAll);
    $('#cmp-collapse-all').on('click', cmpCollapseAll);
});

$.ajax({
    url: '{{ route("admin.contentsVerify.list") }}',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    success: function (data) {
        $('#cv-loading').hide();
        if (data.erro) { $('#cv-erro').text('Erro: ' + data.erro).show(); return; }
        CV_DATA = data;
        cvShowFolders();
        $('#cv-main').show();
    },
    error: function (xhr) {
        $('#cv-loading').hide();
        $('#cv-erro').text('Não foi possível carregar o histórico. Código: ' + xhr.status).show();
    }
});
</script>