@section('title', 'Análise de Termos iOS')
@include('admin/includes/header')
<link href="/assets-manager/css/sweetalert2.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">

<style>
:root {
    --bg: #F4F6F9;
    --surface: #FFFFFF;
    --border: #E5E7EB;
    --ink: #111827;
    --muted: #6B7280;
    --subtle: #9CA3AF;

    --amber: #D97706;
    --amber-bg: #FFFBEB;
    --amber-border: #FDE68A;

    --emerald: #059669;
    --emerald-bg: #ECFDF5;
    --emerald-border: #6EE7B7;

    --ruby: #DC2626;
    --ruby-bg: #FEF2F2;
    --ruby-border: #FECACA;

    --cobalt: #2563EB;
    --cobalt-bg: #EFF6FF;
}

* { box-sizing: border-box; }
body { font-family: 'Inter', system-ui, sans-serif !important; background: var(--bg) !important; }

/* ── PAGE HEADER ───────────────────────────────────── */
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0; }
.page-header p  { font-size: 13px; color: var(--muted); margin: 3px 0 0; }

/* ── STAT CARDS (= navegação) ──────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
.stat-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex; align-items: center; gap: 14px;
    cursor: pointer;
    transition: box-shadow .15s, border-color .15s, transform .12s;
    user-select: none;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.stat-card.is-active { border-color: var(--card-color) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-color) 12%, transparent); }

.stat-card-pending  { --card-color: var(--amber);   }
.stat-card-approved { --card-color: var(--emerald); }
.stat-card-rejected { --card-color: var(--ruby);     }

.stat-icon {
    width: 46px; height: 46px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}
.stat-card-pending  .stat-icon { background: var(--amber-bg);   color: var(--amber);  }
.stat-card-approved .stat-icon { background: var(--emerald-bg); color: var(--emerald);}
.stat-card-rejected .stat-icon { background: var(--ruby-bg);    color: var(--ruby);   }

.stat-number {
    font-size: 28px; font-weight: 700; line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums; min-width: 24px;
}
.stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 4px; }

.sk-block { display: inline-block; background: #E5E7EB; border-radius: 4px; animation: pulse 1.2s ease-in-out infinite; }

/* ── TABLE CARD ────────────────────────────────────── */
.terms-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }

.terms-table { width: 100%; border-collapse: collapse; }
.terms-table thead tr { border-bottom: 1px solid var(--border); background: #FAFAFA; }
.terms-table th {
    padding: 10px 16px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
    color: var(--muted);
    text-align: left; white-space: nowrap;
}
.terms-table td { padding: 14px 16px; font-size: 14px; border-bottom: 1px solid #F3F4F6; color: var(--ink); vertical-align: middle; }
.terms-table tbody tr:last-child td { border-bottom: none; }
.terms-table tbody tr { transition: background .1s; }
.terms-table tbody tr:hover td { background: #FAFBFC; }

/* Urgency left border — visible on first column */
.terms-table td.has-urgency { border-left: 3px solid transparent; padding-left: 13px; }
.terms-table tr.urg-high  td.has-urgency { border-left-color: var(--ruby); }
.terms-table tr.urg-mid   td.has-urgency { border-left-color: var(--amber); }
.terms-table tr.urg-new   td.has-urgency { border-left-color: var(--emerald); }

.porta-num { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.site-name  { font-weight: 600; color: var(--ink); }
.radio-name { font-size: 12px; color: var(--muted); margin-top: 1px; }

/* Wait / date badge */
.badge-wait {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: 20px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.badge-wait.high    { background: var(--ruby-bg);    color: var(--ruby); }
.badge-wait.mid     { background: var(--amber-bg);   color: var(--amber);   }
.badge-wait.low     { background: var(--emerald-bg); color: var(--emerald); }
.badge-wait.neutral { background: #F3F4F6;           color: var(--muted);   }

/* Reject reason tag in table */
.badge-reason { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 500; background: var(--ruby-bg); color: var(--ruby); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Action button */
.btn-view {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 7px;
    border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s;
}
.btn-view-primary   { background: var(--cobalt);   color: white; }
.btn-view-secondary { background: #F3F4F6; color: var(--ink); }
.btn-view:hover { opacity: .85; }

/* Skeleton rows */
.sk-row td { padding: 16px; }
.sk-line { height: 13px; background: #F3F4F6; border-radius: 4px; animation: pulse 1.2s ease-in-out infinite; }

/* Empty state */
.empty-state { text-align: center; padding: 52px 20px; }
.empty-state .icon { font-size: 36px; margin-bottom: 12px; }
.empty-state p { font-size: 14px; color: var(--muted); margin: 0; }

/* ── MODAL ─────────────────────────────────────────── */
.modal-fullscreen .modal-content { border: none; }

.modal-info-panel { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: auto; }

.info-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.info-header .site-big { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.info-header .radio-small { font-size: 13px; color: var(--muted); margin-top: 3px; }
.info-header .header-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.info-body { padding: 20px 24px; flex: 1; overflow-y: auto; }

.info-field { margin-bottom: 18px; }
.info-field label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: block; margin-bottom: 4px; }
.info-field .val { font-size: 14px; color: var(--ink); line-height: 1.5; }
.info-field .val.mono { font-family: 'Courier New', monospace; font-size: 13px; }

.wait-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 11px; border-radius: 20px;
    font-size: 12px; font-weight: 700;
}
.wait-pill.high    { background: var(--ruby-bg);    color: var(--ruby);    }
.wait-pill.mid     { background: var(--amber-bg); color: var(--amber);   }
.wait-pill.low     { background: var(--emerald-bg); color: var(--emerald); }
.wait-pill.neutral { background: #F3F4F6;           color: var(--muted); }

.status-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
.status-pill.pending  { background: var(--amber-bg);   color: var(--amber);   }
.status-pill.approved { background: var(--emerald-bg); color: var(--emerald); }
.status-pill.rejected { background: var(--ruby-bg);    color: var(--ruby); }

.info-footer { padding: 16px 24px 20px; border-top: 1px solid var(--border); flex-shrink: 0; background: #FAFAFA; }

.btn-approve {
    width: 100%; padding: 12px; border: none; border-radius: 8px;
    background: var(--emerald); color: white;
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: opacity .15s;
}
.btn-approve:hover { opacity: .88; }

.btn-reject-toggle {
    width: 100%; padding: 11px; margin-top: 8px;
    border: 1.5px solid var(--ruby); border-radius: 8px;
    background: white; color: var(--ruby);
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .15s;
}
.btn-reject-toggle:hover, .btn-reject-toggle.open { background: var(--ruby); color: white; }

.btn-restart {
    width: 100%; padding: 12px; border: 1.5px solid var(--cobalt); border-radius: 8px;
    background: white; color: var(--cobalt);
    font-size: 14px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all .15s;
}
.btn-restart:hover { background: var(--cobalt); color: white; }

.reject-panel {
    margin-top: 12px; padding: 16px;
    background: var(--ruby-bg); border: 1px solid var(--ruby-border);
    border-radius: 10px;
}
.reject-panel label { font-size: 12px; font-weight: 600; color: var(--ruby); display: block; margin-bottom: 6px; }
.reject-panel select,
.reject-panel textarea {
    font-family: 'Inter', sans-serif;
    font-size: 13px; border: 1px solid var(--ruby-border);
    border-radius: 7px; width: 100%; padding: 8px 10px;
    background: white; color: var(--ink);
    outline: none;
}
.reject-panel select:focus,
.reject-panel textarea:focus { border-color: var(--ruby); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ruby) 12%, transparent); }
.reject-panel textarea { resize: vertical; min-height: 72px; margin-top: 8px; }

.btn-confirm-reject {
    width: 100%; padding: 10px; margin-top: 10px;
    border: none; border-radius: 7px;
    background: var(--ruby); color: white; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: opacity .15s;
}
.btn-confirm-reject:hover { opacity: .88; }

/* Divider */
.info-divider { border: none; border-top: 1px solid var(--border); margin: 4px 0 18px; }

/* Evaluation result box (approved/rejected view) */
.result-box { border-radius: 8px; padding: 14px 16px; }
.result-box.approved { background: var(--emerald-bg); border: 1px solid var(--emerald-border); }
.result-box.rejected { background: var(--ruby-bg);    border: 1px solid var(--ruby-border); }
.result-box .result-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.result-box.approved .result-title { color: var(--emerald); }
.result-box.rejected  .result-title { color: var(--ruby); }
.result-box .result-text { font-size: 13px; color: var(--ink); line-height: 1.5; }

/* ── SEARCH TOOLBAR ────────────────────────────────── */
.table-toolbar {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
    background: #FAFAFA;
}
.search-wrap { position: relative; }
.search-wrap .search-ico {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 14px; pointer-events: none; line-height: 1;
}
.search-input {
    font-family: 'Inter', sans-serif; font-size: 13px;
    border: 1.5px solid var(--border); border-radius: 8px;
    padding: 7px 12px 7px 32px; color: var(--ink);
    background: white; outline: none; width: 200px;
    transition: border-color .15s, box-shadow .15s;
}
.search-input:focus { border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-bg); }
.search-info { font-size: 12px; color: var(--muted); white-space: nowrap; }
.search-clear { font-size: 11px; font-weight: 600; color: var(--cobalt); cursor: pointer; background: none; border: none; padding: 0; display: none; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
@media (max-width:768px) { .stats-row { grid-template-columns: 1fr; } }

/* ===================================================================
   TEMA ESCURO (especifico desta tela)
   Redefine os tokens do :root e ajusta as superficies claras fixas.
   As cores fortes (amber/emerald/ruby/cobalt) recebem versoes que
   funcionam sobre fundo escuro tanto como texto quanto como preenchimento.
   =================================================================== */
[data-bs-theme="dark"] {
    --bg: #16191f;
    --surface: #1b1f27;
    --border: #2a2f3a;
    --ink: #e7eaee;
    --muted: #98a2b3;
    --subtle: #6b7280;

    --amber: #fbbf24;   --amber-bg: rgba(251,191,36,.13);  --amber-border: rgba(251,191,36,.40);
    --emerald: #10b981; --emerald-bg: rgba(16,185,129,.14); --emerald-border: rgba(16,185,129,.40);
    --ruby: #ef4444;    --ruby-bg: rgba(239,68,68,.15);     --ruby-border: rgba(239,68,68,.42);
    --cobalt: #3b82f6;  --cobalt-bg: rgba(59,130,246,.18);
}
/* superficies claras fixas (nao usam token) -> tons escuros */
[data-bs-theme="dark"] .terms-table thead tr,
[data-bs-theme="dark"] .info-footer,
[data-bs-theme="dark"] .table-toolbar { background: #20242d; }
[data-bs-theme="dark"] .terms-table td { border-bottom-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .terms-table tbody tr:hover td { background: rgba(255,255,255,.035); }
[data-bs-theme="dark"] .sk-block,
[data-bs-theme="dark"] .sk-line { background: #2a2f3a; }
[data-bs-theme="dark"] .badge-wait.neutral,
[data-bs-theme="dark"] .wait-pill.neutral,
[data-bs-theme="dark"] .btn-view-secondary { background: rgba(255,255,255,.08); }
/* botoes/inputs que eram "white" -> superficie escura */
[data-bs-theme="dark"] .btn-reject-toggle,
[data-bs-theme="dark"] .btn-restart,
[data-bs-theme="dark"] .search-input,
[data-bs-theme="dark"] .reject-panel select,
[data-bs-theme="dark"] .reject-panel textarea { background: var(--surface); color: var(--ink); }
[data-bs-theme="dark"] .search-input::placeholder { color: var(--muted); }
</style>

<main class="flex-shrink-0 mt-4 pb-5">
<div class="container">

    <div class="page-header d-flex justify-content-between align-items-start">
        <div>
            <h1>Termos iOS</h1>
            <p>Documentos enviados pelos clientes aguardando análise</p>
        </div>
        <span id="lastUpdated" style="font-size:12px;color:var(--muted);padding-top:4px;"></span>
    </div>

    <div class="stats-row">
        <div class="stat-card stat-card-pending is-active" id="statCard0" onclick="switchTab('0')">
            <div class="stat-icon">⏳</div>
            <div>
                <div class="stat-number" id="count0"><span class="sk-block" style="width:28px;height:22px;"></span></div>
                <div class="stat-label">Pendentes</div>
            </div>
        </div>
        <div class="stat-card stat-card-approved" id="statCard1" onclick="switchTab('1')">
            <div class="stat-icon">✓</div>
            <div>
                <div class="stat-number" id="count1"><span class="sk-block" style="width:28px;height:22px;"></span></div>
                <div class="stat-label">Aprovados</div>
            </div>
        </div>
        <div class="stat-card stat-card-rejected" id="statCard2" onclick="switchTab('2')">
            <div class="stat-icon">✕</div>
            <div>
                <div class="stat-number" id="count2"><span class="sk-block" style="width:28px;height:22px;"></span></div>
                <div class="stat-label">Reprovados</div>
            </div>
        </div>
    </div>

    <div class="terms-card">

        <div class="table-toolbar">
            <div class="search-wrap">
                <span class="search-ico">🔍</span>
                <input type="text" id="searchPorta" class="search-input" placeholder="Buscar porta..." autocomplete="off">
            </div>
            <button id="btnSearch" class="btn-view btn-view-primary" style="padding:7px 14px;font-size:13px;">Buscar</button>
            <span id="searchInfo" class="search-info"></span>
            <button id="searchClear" class="search-clear">← Voltar</button>
        </div>

        <table class="terms-table">
            <thead>
                <tr>
                    <th style="width:80px;">Porta</th>
                    <th>Rádio / Site</th>
                    <th>Titular</th>
                    <th id="colExtra" style="width:160px;">Aguardando</th>
                    <th style="text-align:right;padding-right:20px;width:200px;">Ação</th>
                </tr>
            </thead>
            <tbody id="termsContainer">
                <tr class="sk-row"><td><div class="sk-line" style="width:48px"></div></td><td><div class="sk-line" style="width:120px"></div></td><td><div class="sk-line" style="width:140px"></div></td><td><div class="sk-line" style="width:70px"></div></td><td></td></tr>
                <tr class="sk-row"><td><div class="sk-line" style="width:48px"></div></td><td><div class="sk-line" style="width:100px"></div></td><td><div class="sk-line" style="width:130px"></div></td><td><div class="sk-line" style="width:80px"></div></td><td></td></tr>
                <tr class="sk-row"><td><div class="sk-line" style="width:48px"></div></td><td><div class="sk-line" style="width:130px"></div></td><td><div class="sk-line" style="width:110px"></div></td><td><div class="sk-line" style="width:60px"></div></td><td></td></tr>
            </tbody>
        </table>
    </div>

</div>
</main>

<div class="modal fade" id="modalAnalise" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">

            <div class="modal-header py-2 px-3" style="background:var(--surface);border-bottom:1px solid var(--border);">
                <div class="d-flex align-items-center gap-2">
                    <span style="font-size:13px;font-weight:600;color:var(--muted);">Analisando termo</span>
                    <span class="badge bg-dark" id="viewPort" style="font-size:13px;font-variant-numeric:tabular-nums;">—</span>
                    <span id="viewStatusPill"></span>
                </div>
                <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-0" style="overflow:hidden;">
                <div class="d-flex h-100">

                    <div style="flex:62;background:#374151;position:relative;">
                        <iframe id="pdfViewer" src="" class="w-100 h-100" style="border:none;display:block;"></iframe>
                    </div>

                    <div class="modal-info-panel border-start" style="flex:38;min-width:320px;max-width:580px;">

                        <div class="info-header">
                            <div class="site-big" id="viewSiteName">—</div>
                            <div class="radio-small" id="viewRadioName">—</div>
                            <div class="header-meta">
                                <span id="viewWaitPill"></span>
                            </div>
                        </div>

                        <div class="info-body">

                            <div class="info-field">
                                <label>Porta</label>
                                <div class="val mono" id="viewPortFull">—</div>
                            </div>

                            <div class="info-field">
                                <label>Titular</label>
                                <div class="val" id="viewTitular">—</div>
                            </div>

                            <div class="info-field">
                                <label>Documento</label>
                                <div class="val mono" id="viewDocumento">—</div>
                            </div>

                            <div class="info-field">
                                <label>Endereço Declarado</label>
                                <div class="val" id="viewEndereco" style="font-size:13px;">—</div>
                            </div>

                            <div class="info-field">
                                <label>Método de Assinatura</label>
                                <div class="val" id="viewMethod">—</div>
                            </div>

                            <div class="info-field">
                                <label>Data de Envio</label>
                                <div class="val" id="viewDate">—</div>
                            </div>

                            <div id="viewResultBox" style="display:none;"></div>

                        </div>

                        <div class="info-footer" id="judgmentBlock">
                            <div style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:12px;">Ações</div>

                            <div id="actionPending">
                                <button type="button" id="btnApprove" class="btn-approve">
                                    ✓ Aceitar Termo
                                </button>
                                <button type="button" id="btnRejectToggle" class="btn-reject-toggle">
                                    ✕ Rejeitar Termo
                                </button>

                                <div id="rejectPanel" class="reject-panel" style="display:none;">
                                    <label>Motivo da recusa</label>
                                    <select id="rejectType">
                                        <option value="" selected disabled>Selecione o motivo...</option>
                                        @foreach($rejectReasons as $key => $reason)
                                        <option value="{{ $key }}">{{ $reason }}</option>
                                        @endforeach
                                    </select>
                                    <textarea id="rejectNote" placeholder="Nota adicional para o cliente (opcional)..."></textarea>
                                    <button type="button" id="btnConfirmReject" class="btn-confirm-reject">Confirmar Rejeição</button>
                                </div>
                            </div>

                            <div id="actionApproved" style="display: none;">
                                <button type="button" id="btnRestart" class="btn-restart">
                                    ↻ Liberar Formulário Novamente
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.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>
let currentStatus = "0";
let activeTerm    = {};
let allTermsData  = [];
let searchMode    = false;

let dataReqSeq  = 0;
let currentXhrs = [];

let termsById = {};

function termKey(item) { return item.server_id + ':' + item.id; }

function abortInFlight() {
    currentXhrs.forEach(function (x) { if (x && x.abort) x.abort(); });
    currentXhrs = [];
}

/* ── Helpers ─────────────────────────────────────── */
function skeletonRows() {
    return `
        <tr class="sk-row"><td><div class="sk-line" style="width:48px"></div></td><td><div class="sk-line" style="width:120px"></div></td><td><div class="sk-line" style="width:140px"></div></td><td><div class="sk-line" style="width:70px"></div></td><td></td></tr>
        <tr class="sk-row"><td><div class="sk-line" style="width:48px"></div></td><td><div class="sk-line" style="width:100px"></div></td><td><div class="sk-line" style="width:130px"></div></td><td><div class="sk-line" style="width:80px"></div></td><td></td></tr>
        <tr class="sk-row"><td><div class="sk-line" style="width:48px"></div></td><td><div class="sk-line" style="width:130px"></div></td><td><div class="sk-line" style="width:110px"></div></td><td><div class="sk-line" style="width:60px"></div></td><td></td></tr>`;
}

function errorRow(msg) {
    return `<tr><td colspan="5"><div class="empty-state"><div class="icon">⚠️</div><p>${msg}</p></div></td></tr>`;
}

function waitingInfo(signedAt) {
    if (!signedAt) return { label: '—', cls: 'neutral', urgency: '' };
    const ms    = Date.now() - new Date(signedAt).getTime();
    const days  = Math.floor(ms / 86400000);
    const hours = Math.floor(ms / 3600000);
    const mins  = Math.floor((ms % 3600000) / 60000);

    if (days >= 3)  return { label: days  + 'd', cls: 'high', urgency: 'urg-high' };
    if (days >= 1)  return { label: days  + 'd', cls: 'high', urgency: 'urg-mid'  };
    if (hours >= 1) return { label: hours + 'h', cls: 'mid',  urgency: 'urg-new'  };
    if (mins >= 1)  return { label: mins  + 'm', cls: 'low',  urgency: 'urg-new'  };
    return            { label: 'Agora mesmo',    cls: 'low',  urgency: 'urg-new'  };
}

function formatDate(str) {
    if (!str) return '';
    const d = new Date(str);
    return d.toLocaleDateString('pt-BR') + ' ' + d.toLocaleTimeString('pt-BR', { hour:'2-digit', minute:'2-digit' });
}

function setColHeader(status) {
    if (status === '0')      $('#colExtra').text('Aguardando');
    else if (status === '1') $('#colExtra').text('Aprovado em');
    else if (status === '2') $('#colExtra').text('Motivo');
    else                     $('#colExtra').text('Status');
}

/* ── Init ────────────────────────────────────────── */
$(document).ready(function () {
    loadCounts();
    loadTabRecords("0");
    markActiveCard("0");

    $('#searchPorta').on('keydown', function (e) {
        if (e.key === 'Enter') triggerSearch();
    });
    $('#btnSearch').click(triggerSearch);
    $('#searchClear').click(clearSearch);

    $('#modalAnalise').on('hidden.bs.modal', function () {
        $('#pdfViewer').attr('src', '');
    });
});

function triggerSearch() {
    const q = $('#searchPorta').val().trim();
    if (!q) return;
    executeSearch(q);
}

function executeSearch(q) {
    searchMode = true;
    setColHeader('all');
    $('#searchInfo').text('Buscando...');
    $('#searchClear').css('display', 'inline');

    abortInFlight();
    const seq = ++dataReqSeq;

    $('#termsContainer').html(skeletonRows());

    const servers  = ['1', '2', '3'];
    let merged     = [];
    let remaining  = servers.length;
    let anyError   = false;

    servers.forEach(function (srv) {
        const xhr = $.get("{{ route('admin.terms.data') }}", { status: 'all', port: q, server: srv })
            .done(function (res) {
                if (seq !== dataReqSeq) return;
                if (res && res.data) merged = merged.concat(res.data);
            })
            .fail(function (x, textStatus) {
                if (textStatus !== 'abort') anyError = true;
            })
            .always(function () {
                if (seq !== dataReqSeq) return;
                remaining--;
                if (remaining === 0) finalize();
            });
        currentXhrs.push(xhr);
    });

    function finalize() {
        if (seq !== dataReqSeq || !searchMode) return;

        if (!merged.length && anyError) {
            $('#termsContainer').html(errorRow('Falha ao buscar. Tente novamente.'));
            $('#searchInfo').text('');
            return;
        }

        merged.sort(function (a, b) {
            return new Date(a.signed_at || 0) - new Date(b.signed_at || 0);
        });

        renderSearchResults(merged, q);

        const total = merged.length;
        $('#searchInfo').text(
            total === 0
                ? 'Nenhum resultado'
                : total + (total === 1 ? ' resultado' : ' resultados') + ' — todos os status'
        );
    }
}

function clearSearch() {
    searchMode = false;
    $('#searchPorta').val('');
    $('#searchClear').css('display', 'none');
    $('#searchInfo').text('');
    setColHeader(currentStatus);
    loadTabRecords(currentStatus);
}

/* ── Count cards ─────────────────────────────────── */
function loadCounts() {
    $.get("{{ route('admin.terms.counts') }}")
        .done(function (res) {
            $('#count0').text(res.pending);
            $('#count1').text(res.approved);
            $('#count2').text(res.rejected);
            updateTimestamp();
        })
        .fail(function () {
             ['0','1','2'].forEach(s => $('#count' + s).html('<span style="font-size:14px;color:var(--muted)">—</span>'));
        });
}

function updateTimestamp() {
    const now = new Date();
    $('#lastUpdated').text('Atualizado às ' + now.toLocaleTimeString('pt-BR', { hour:'2-digit', minute:'2-digit' }));
}

function switchTab(status) {
    currentStatus = status;
    markActiveCard(status);

    if (searchMode) {
        searchMode = false;
        $('#searchPorta').val('');
        $('#searchClear').css('display', 'none');
        $('#searchInfo').text('');
    }
    setColHeader(status);
    loadTabRecords(status);
}

function markActiveCard(status) {
    document.querySelectorAll('.stat-card').forEach(el => el.classList.remove('is-active'));
    document.getElementById('statCard' + status)?.classList.add('is-active');
}

function loadTabRecords(status) {
    abortInFlight();
    const seq = ++dataReqSeq;

    $('#termsContainer').html(skeletonRows());

    const servers  = ['1', '2', '3'];
    let merged     = [];
    let remaining  = servers.length;
    let anyError   = false;

    servers.forEach(function (srv) {
        const xhr = $.get("{{ route('admin.terms.data') }}", { status: status, server: srv })
            .done(function (res) {
                if (seq !== dataReqSeq) return;
                if (res && res.data) merged = merged.concat(res.data);
            })
            .fail(function (x, textStatus) {
                if (textStatus !== 'abort') anyError = true;
            })
            .always(function () {
                if (seq !== dataReqSeq) return;
                remaining--;
                if (remaining === 0) finalize();
            });
        currentXhrs.push(xhr);
    });

    function finalize() {
        if (seq !== dataReqSeq || searchMode || status !== currentStatus) return;

        if (!merged.length && anyError) {
            allTermsData = [];
            $('#termsContainer').html(errorRow('Falha ao buscar dados. Verifique a conexão com os servidores.'));
            return;
        }

        merged.sort(function (a, b) {
            return new Date(a.signed_at || 0) - new Date(b.signed_at || 0);
        });

        allTermsData = merged;
        termsById = {};
        $('#termsContainer').html(buildTableHtml(merged, status));
    }
}

function buildTableHtml(data, status) {
    status = status || currentStatus;

    if (!data || data.length === 0) {
        const msgs = { '0': ['🎉','Nenhum termo pendente no momento.'], '1': ['📋','Nenhum termo aprovado.'], '2': ['📭','Nenhum termo reprovado.'] };
        const [icon, txt] = msgs[status] || ['📭','Nenhum registro encontrado.'];
        return `<tr><td colspan="5"><div class="empty-state"><div class="icon">${icon}</div><p>${txt}</p></div></td></tr>`;
    }

    let html = '';
    data.forEach(function (item) {
        const key = termKey(item);
        termsById[key] = item;

        const wait = waitingInfo(item.signed_at);

        let extraCell = '';
        if (status === '0') {
            extraCell = `<span class="badge-wait ${wait.cls}">⏱ ${wait.label}</span>`;
        } else if (status === '1') {
            extraCell = `<span class="badge-wait neutral">${item.formatted_date}</span>`;
        } else {
            extraCell = item.reject_reason
                ? `<span class="badge-reason" title="${item.reject_reason}">${item.reject_reason}</span>`
                : `<span class="badge-wait neutral">${item.formatted_date}</span>`;
        }

        const urgClass = status === '0' ? wait.urgency : '';
        const btnCls   = status === '0' ? 'btn-view-primary' : 'btn-view-secondary';
        const btnLabel = status === '0' ? 'Analisar' : 'Ver';

        html += `
        <tr class="${urgClass}">
            <td class="has-urgency"><span class="porta-num">${item.port}</span></td>
            <td>
                <div class="site-name">${item.site_name || 'N/A'}</div>
                <div class="radio-name">${item.radio_name || 'App Rádio'}</div>
            </td>
            <td>${item.document_name || 'N/A'}</td>
            <td>${extraCell || 'N/A'}</td>
            <td style="text-align:right;padding-right:20px;">
                <button type="button" class="btn-view ${btnCls} view-term-btn" data-key="${key}">
                    ${btnLabel} →
                </button>
            </td>
        </tr>`;
    });
    return html;
}

function renderSearchResults(data, q) {
    termsById = {};
    if (!data.length) {
        $('#termsContainer').html(`<tr><td colspan="5">
            <div class="empty-state">
                <div class="icon">🔍</div>
                <p>Nenhuma porta encontrada para "<strong>${q}</strong>".</p>
            </div></td></tr>`);
        return;
    }

    const statusBadge = {
        '0': `<span class="badge-wait mid">⏳ Pendente</span>`,
        '1': `<span class="badge-wait low">✓ Aprovado</span>`,
        '2': `<span class="badge-wait high">✕ Reprovado</span>`
    };

    const esc    = q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    const re     = new RegExp('(' + esc + ')', 'gi');
    const hlPort = p => String(p).replace(re, '<mark style="background:var(--cobalt-bg);color:var(--cobalt);border-radius:2px;padding:0 1px;">$1</mark>');

    let html = '';
    data.forEach(function (item) {
        const key    = termKey(item);
        termsById[key] = item;

        const s      = String(item.status);
        const badge  = statusBadge[s] || '';
        const btnCls = s === '0' ? 'btn-view-primary' : 'btn-view-secondary';
        const btnLbl = s === '0' ? 'Analisar' : 'Ver';

        html += `
        <tr>
            <td class="has-urgency"><span class="porta-num">${hlPort(item.port)}</span></td>
            <td>
                <div class="site-name">${item.site_name || 'N/A'}</div>
                <div class="radio-name">${item.radio_name || 'App Rádio'}</div>
            </td>
            <td>${item.document_name || 'N/A'}</td>
            <td>${badge}</td>
            <td style="text-align:right;padding-right:20px;">
                <button type="button" class="btn-view ${btnCls} view-term-btn" data-key="${key}">
                    ${btnLbl} →
                </button>
            </td>
        </tr>`;
    });
    $('#termsContainer').html(html);
}

$(document).on('click', '.view-term-btn', function () {
    const item       = termsById[$(this).attr('data-key')];
    if (!item) return;
    const itemStatus = String(item.status);
    activeTerm = item;

    const wait = waitingInfo(item.signed_at);

    $('#viewPort').text(item.port);
    $('#viewPortFull').text(item.port);
    $('#viewSiteName').text(item.site_name);
    $('#viewRadioName').text(item.radio_name || 'App Rádio');

    const pillMap = { '0': ['pending','Pendente'], '1': ['approved','Aprovado'], '2': ['rejected','Reprovado'] };
    const [pillCls, pillText] = pillMap[itemStatus] || ['neutral','—'];
    $('#viewStatusPill').html(`<span class="status-pill ${pillCls}">${pillText}</span>`);

    if (itemStatus === '0') {
        $('#viewWaitPill').html(`<span class="wait-pill ${wait.cls}">⏱ Aguardando há ${wait.label}</span>`);
    } else {
        $('#viewWaitPill').html('');
    }

    $('#viewTitular').text(item.document_name || 'N/A');
    $('#viewDocumento').text(`${item.entity_type || 'N/A'}: ${item.document_number || 'N/A'}`);
    $('#viewMethod').text(item.sign_method || 'N/A');
    $('#viewDate').text(formatDate(item.signed_at) || 'N/A');

    const addr = [
        item.street, item.number ? `nº ${item.number}` : '',
        item.complement ? `— ${item.complement}` : '',
        item.district, (item.city && item.uf) ? `${item.city}/${item.uf}` : '',
        item.cep ? `(CEP ${item.cep})` : ''
    ].filter(Boolean).join(', ');

    $('#viewEndereco').text(addr || 'N/A');

    const rbox = $('#viewResultBox');
    if (itemStatus === '1') {
        rbox.show().html(`<div class="result-box approved">
            <div class="result-title">✓ Termo Aprovado</div>
            <div class="result-text">Aprovado em ${item.updated_at}</div>
        </div>`);
    } else if (itemStatus === '2') {
        const note = item.reject_note
            ? `<div style="margin-top:8px;padding-top:8px;border-top:1px solid var(--ruby-border);font-size:12px;color:var(--muted);">${item.reject_note}</div>`
            : '';
        rbox.show().html(`<div class="result-box rejected">
            <div class="result-title">✕ Motivo da Reprovação</div>
            <div class="result-text">${item.reject_reason || 'Motivo não especificado.'}${note}</div>
        </div>`);
    } else {
        rbox.hide().html('');
    }

    if (itemStatus === '0') {
        $('#judgmentBlock').show();
        $('#actionPending').show();
        $('#actionApproved').hide();
    } else if (itemStatus === '1') {
        $('#judgmentBlock').show();
        $('#actionPending').hide();
        $('#actionApproved').show();
    } else {
        $('#judgmentBlock').hide();
    }

    $('#rejectPanel').hide();
    $('#btnRejectToggle').removeClass('open');
    $('#rejectType').val('');
    $('#rejectNote').val('');

    const bust = item.signed_at ? new Date(item.signed_at).getTime() : (item.updated_at ? new Date(item.updated_at).getTime() : Date.now());
    $('#pdfViewer').attr('src', item.pdf_path ? '/' + item.pdf_path + '?t=' + bust : '');

    $('#modalAnalise').modal('show');
});

$('#btnRejectToggle').click(function () {
    const open = $('#rejectPanel').is(':visible');
    $('#rejectPanel').slideToggle(180);
    $(this).toggleClass('open', !open);
});

$('#btnApprove').click(function () {
    Sweetalert2.fire({
        title: 'Aceitar este termo?',
        html: `<span style="font-size:14px;color:#6B7280;">Porta <strong>${activeTerm.port}</strong> — ${activeTerm.site_name}</span>`,
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Aceitar',
        cancelButtonText: 'Cancelar',
        confirmButtonColor: '#059669'
    }).then(result => {
        if (result.isConfirmed) executeEvaluation('approve');
    });
});

$('#btnConfirmReject').click(function () {
    const type = $('#rejectType').val();
    const note = $('#rejectNote').val();

    if (!type) {
        Sweetalert2.fire({ title: 'Selecione o motivo', icon: 'warning', confirmButtonColor: '#DC2626' });
        return;
    }
    Sweetalert2.fire({
        title: 'Rejeitar este termo?',
        html: `<span style="font-size:13px;color:#6B7280;">Porta <strong>${activeTerm.port}</strong> — ${activeTerm.site_name}</span>`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Rejeitar',
        cancelButtonText: 'Cancelar',
        confirmButtonColor: '#DC2626'
    }).then(result => {
        if (result.isConfirmed) executeEvaluation('reject', type, note);
    });
});

$('#btnRestart').click(function () {
    Sweetalert2.fire({
        title: 'Liberar formulário novamente?',
        html: `<span style="font-size:14px;color:#6B7280;">Isso mudará o status do termo da porta <strong>${activeTerm.port}</strong> e permitirá novo preenchimento.</span>`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Sim, liberar',
        cancelButtonText: 'Cancelar',
        confirmButtonColor: '#2563EB'
    }).then(result => {
        if (result.isConfirmed) executeRestart();
    });
});

function executeEvaluation(action, rejectType = null, rejectNote = null) {
    Sweetalert2.fire({ title: 'Salvando...', allowOutsideClick: false, didOpen: () => Sweetalert2.showLoading() });

    $.post("{{ route('admin.terms.evaluate') }}", {
        id:          activeTerm.id,
        server_id:   activeTerm.server_id,
        action:      action,
        reject_type: rejectType,
        reject_note: rejectNote,
        _token:      "{{ csrf_token() }}"
    })
    .done(function (res) {
        Sweetalert2.close();
        if (res.success) {
            $('#modalAnalise').modal('hide');
            loadTabRecords(currentStatus);
            loadCounts();
        }
    })
    .fail(function (xhr) {
        Sweetalert2.close();
        const msg = xhr.responseJSON?.message || 'Erro ao salvar a avaliação.';
        Sweetalert2.fire({ title: 'Erro', text: msg, icon: 'error', confirmButtonColor: '#2563EB' });
    });
}

function executeRestart() {
    Sweetalert2.fire({ title: 'Processando...', allowOutsideClick: false, didOpen: () => Sweetalert2.showLoading() });

    $.post("{{ route('admin.terms.restart') }}", {
        id: activeTerm.id,
        server_id: activeTerm.server_id,
        _token: "{{ csrf_token() }}"
    })
    .done(function (res) {
        Sweetalert2.close();
        if (res.success || res.status === 'success') {
            $('#modalAnalise').modal('hide');
            loadTabRecords(currentStatus);
            loadCounts();
        }
    })
    .fail(function (xhr) {
        Sweetalert2.close();
        const msg = xhr.responseJSON?.message || 'Erro ao liberar o formulário.';
        Sweetalert2.fire({ title: 'Erro', text: msg, icon: 'error', confirmButtonColor: '#DC2626' });
    });
}
</script>