@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Extension Status</h4>
        <div class="text-secondary small mt-1">
            Live registration and call state &mdash;
            <span id="esLiveIndicator" class="d-inline-flex align-items-center gap-1">
                <span class="es-pulse-dot"></span> <span id="esLastUpdated">connecting&hellip;</span>
            </span>
        </div>
    </div>
    <div class="d-flex align-items-center gap-2 mt-2 mt-md-0">
        <div class="input-group input-group-sm" style="max-width:280px;">
            <span class="input-group-text border-end-0 bg-transparent"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg></span>
            <input type="text" id="esSearch" class="form-control border-start-0" placeholder="Search extensions&hellip;">
        </div>
        <div class="es-view-toggle" role="group" aria-label="View mode">
            <button id="esViewGrid" class="es-view-btn active" title="Card grid view" type="button">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
                <span>Cards</span>
            </button>
            <button id="esViewList" class="es-view-btn" title="Compact list view" type="button">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></svg>
                <span>List</span>
            </button>
        </div>
        <a href="{{ route('extensions.index') }}" class="btn btn-outline-secondary btn-sm">All Extensions</a>
    </div>
</div>

{{-- Summary stat cards --}}
<div class="row g-3 mb-3">
    <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center gap-3 py-3">
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:42px;height:42px;background:#e0e7ff;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4338ca" stroke-width="2" stroke-linecap="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
                </div>
                <div>
                    <div class="text-secondary small">Total</div>
                    <div class="fs-4 fw-bold" id="esCntTotal">0</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center gap-3 py-3">
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:42px;height:42px;background:#dcfce7;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div>
                    <div class="text-secondary small">Online</div>
                    <div class="fs-4 fw-bold text-success" id="esCntOnline">0</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center gap-3 py-3">
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:42px;height:42px;background:#dbeafe;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                </div>
                <div>
                    <div class="text-secondary small">In Call</div>
                    <div class="fs-4 fw-bold text-primary" id="esCntBusy">0</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center gap-3 py-3">
                <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:42px;height:42px;background:#fee2e2;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                </div>
                <div>
                    <div class="text-secondary small">Offline</div>
                    <div class="fs-4 fw-bold text-danger" id="esCntOffline">0</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Filter tabs --}}
<div class="d-flex align-items-center gap-2 mb-3 flex-wrap">
    <button class="btn btn-sm btn-primary es-filter-btn active" data-filter="all">All</button>
    <button class="btn btn-sm btn-outline-success es-filter-btn" data-filter="online">Online</button>
    <button class="btn btn-sm btn-outline-info es-filter-btn" data-filter="busy">In Call / Ringing</button>
    <button class="btn btn-sm btn-outline-danger es-filter-btn" data-filter="offline">Offline</button>
</div>

{{-- Extension grid (cards) and list (table) — toggle via #esViewGrid / #esViewList --}}
<div class="row g-3" id="esGrid">
    <div class="col-12 text-center text-secondary py-5">Loading&hellip;</div>
</div>
<div id="esList" style="display:none;">
    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-sm table-hover mb-0 align-middle es-list-table">
                <thead class="bg-light">
                    <tr>
                        <th style="width:80px;">Ext</th>
                        <th>Name</th>
                        <th style="width:120px;">Status</th>
                        <th style="width:240px;">Devices</th>
                        <th style="width:160px;">IP</th>
                        <th style="width:200px;">Departments</th>
                        <th style="width:80px;" class="text-end">RTT</th>
                    </tr>
                </thead>
                <tbody id="esListBody">
                    <tr><td colspan="7" class="text-center text-secondary py-4">Loading&hellip;</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Styles --}}
<style>
.es-pulse-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #16a34a; animation: esPulse 2s infinite;
}
.es-pulse-dot.offline { background: #dc2626; animation: none; }
@keyframes esPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.7); }
}

.es-card {
    border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
    padding: 14px 16px; transition: all .2s; position: relative; overflow: hidden;
}
.es-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px); }
.es-card .es-status-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.es-card .es-status-bar.online { background: #16a34a; }
.es-card .es-status-bar.busy { background: #2563eb; }
.es-card .es-status-bar.ringing { background: #eab308; }
.es-card .es-status-bar.offline { background: #dc2626; }
.es-card .es-ext-num { font-weight: 700; font-size: 1.1rem; font-family: 'SFMono-Regular', Consolas, monospace; }
.es-card .es-ext-name { font-size: .82rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-card .es-detail { font-size: .72rem; color: #9ca3af; }
.es-card .es-detail code { font-size: .72rem; color: #6b7280; background: #f3f4f6; padding: 1px 4px; border-radius: 3px; }
.es-card .es-badge { font-size: .68rem; padding: 2px 8px; border-radius: 12px; font-weight: 600; letter-spacing: .02em; }
.es-card .es-badge.online { background: #dcfce7; color: #15803d; }
.es-card .es-badge.busy { background: #dbeafe; color: #1d4ed8; }
.es-card .es-badge.ringing { background: #fef3c7; color: #a16207; }
.es-card .es-badge.offline { background: #fee2e2; color: #b91c1c; }
.es-card .es-badge.unknown { background: #f3f4f6; color: #6b7280; }
.es-card .es-dept { font-size: .65rem; padding: 1px 6px; border-radius: 8px; font-weight: 500; }
.es-card .es-rtt { font-family: 'SFMono-Regular', Consolas, monospace; font-size: .72rem; }
.es-card .es-rtt.good { color: #16a34a; }
.es-card .es-rtt.warn { color: #d97706; }
.es-card .es-rtt.bad { color: #dc2626; }

.es-card.es-state-change { animation: esFlash .6s ease; }
@keyframes esFlash {
    0%, 100% { background: #fff; }
    30% { background: #eef2ff; }
}

/* Segmented view-mode toggle (Cards / List) */
.es-view-toggle {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.es-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    color: #6b7280;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}
.es-view-btn:hover { color: #374151; }
.es-view-btn.active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04);
}
.es-view-btn svg { flex-shrink: 0; }
.es-view-btn span { line-height: 1; }

/* Compact list view */
.es-list-table { font-size: .82rem; }
.es-list-table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; font-weight: 600; border-bottom: 1px solid #e5e7eb; }
.es-list-table tbody tr { transition: background .15s; }
.es-list-table tbody tr.es-state-change { animation: esFlash .6s ease; }
.es-list-table .es-ext-num { font-family: 'SFMono-Regular', Consolas, monospace; font-weight: 700; }
.es-list-table .es-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.es-list-table .es-status-dot.online { background: #16a34a; }
.es-list-table .es-status-dot.busy { background: #2563eb; }
.es-list-table .es-status-dot.ringing { background: #eab308; animation: esPulse 1.5s infinite; }
.es-list-table .es-status-dot.offline { background: #dc2626; }
.es-list-table .es-status-dot.unknown { background: #9ca3af; }
.es-list-table .es-device-icons { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.es-list-table .es-device-icon { font-size: .9rem; opacity: .65; }
.es-list-table .es-device-icon.online { opacity: 1; }
.es-list-table code { font-size: .72rem; color: #6b7280; background: #f3f4f6; padding: 1px 4px; border-radius: 3px; }
.es-list-table .es-rtt { font-family: 'SFMono-Regular', Consolas, monospace; font-size: .76rem; }
.es-list-table .es-rtt.good { color: #16a34a; }
.es-list-table .es-rtt.warn { color: #d97706; }
.es-list-table .es-rtt.bad { color: #dc2626; }
.es-dial { cursor: pointer; }
.es-dial:hover { color: #2563eb; text-decoration: underline; }
</style>

@endsection

@push('scripts')
<script>
(function() {
    // Defensive JSON embedding: JSON_INVALID_UTF8_SUBSTITUTE stops json_encode
    // from returning false on stray bytes, and the `?: '{}'` fallback guarantees
    // valid JS even in the worst case — so this script can never die with a
    // SyntaxError and freeze the page on "Loading".
    const DIR = {!! json_encode($extensionDirectory, JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP|JSON_INVALID_UTF8_SUBSTITUTE) ?: '{}' !!};
    const LIVE_URL = @json(route('extensions.live'));
    let snapshot = {!! json_encode($initialSnapshot, JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP|JSON_INVALID_UTF8_SUBSTITUTE) ?: '{}' !!};
    let prevStates = {};
    let filter = 'all';
    let searchTerm = '';

    const grid = document.getElementById('esGrid');
    const listWrap = document.getElementById('esList');
    const listBody = document.getElementById('esListBody');
    const cntTotal = document.getElementById('esCntTotal');
    const cntOnline = document.getElementById('esCntOnline');
    const cntBusy = document.getElementById('esCntBusy');
    const cntOffline = document.getElementById('esCntOffline');
    const lastUpdated = document.getElementById('esLastUpdated');
    const pulseDot = document.querySelector('.es-pulse-dot');

    // View mode: 'grid' or 'list'. Persisted in localStorage.
    // Auto-default to 'list' for big deployments (50+ extensions) for density.
    const totalExts = Object.keys(DIR).length;
    let viewMode = localStorage.getItem('extStatusView')
        || (totalExts >= 50 ? 'list' : 'grid');
    applyViewMode();

    function esc(v) {
        return String(v ?? '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    function regState(c) {
        const s = String(c.status||'').toLowerCase();
        const u = String(c.contact_uri||'').toLowerCase();
        if (s.includes('unavail')||s.includes('unreachable')||s.includes('fail')||s.includes('expired')||s.includes('offline')) return 'Offline';
        if (s.includes('avail')||s.includes('reachable')||s.includes('ok')) return 'Reachable';
        if (s.includes('nonqual')&&(u.includes('127.0.0.1')||u.includes('transport=ws')||u.includes('transport=wss'))) return 'Reachable';
        return 'Unknown';
    }

    function callState(ext, raw) {
        const lines = String(raw||'').split(/\r?\n/).filter(Boolean);
        const ch = lines.filter(l => l.includes('PJSIP/'+ext+'-')||l.includes('/'+ext+'@'));
        if (!ch.length) return 'Idle';
        const n = ch.join(';').toLowerCase();
        if (n.includes(';ring;')||n.includes(';ringing;')) return 'Ringing';
        if (n.includes(';up;')) return 'Busy';
        return 'In Call';
    }

    function stateKey(reg, call) {
        if (reg === 'Offline') return 'offline';
        if (call === 'Ringing') return 'ringing';
        if (call === 'Busy' || call === 'In Call') return 'busy';
        if (reg === 'Reachable') return 'online';
        return 'unknown';
    }

    function stateLabel(reg, call) {
        if (reg === 'Offline') return 'Offline';
        if (call === 'Ringing') return 'Ringing';
        if (call === 'Busy') return 'In Call';
        if (call === 'In Call') return 'In Call';
        if (reg === 'Reachable') return 'Online';
        return 'Unknown';
    }

    function render() {
        const contacts = Array.isArray(snapshot.contacts) ? snapshot.contacts : [];
        const raw = snapshot.channels_raw || '';
        let total = 0, online = 0, busy = 0, offline = 0;
        const cards = [];
        const rows = [];

        contacts.forEach(c => {
            const ext = String(c.extension||'');
            const dir = DIR[ext] || { name: 'Ext '+ext, departments:[], dept_colors:[], device_info:null };
            const reg = regState(c);
            const cs = callState(ext, raw);
            const sk = stateKey(reg, cs);
            const sl = stateLabel(reg, cs);

            total++;
            if (sk === 'online' || sk === 'busy' || sk === 'ringing') online++;
            if (sk === 'busy' || sk === 'ringing') busy++;
            if (sk === 'offline') offline++;

            // Filter
            if (filter === 'online' && sk !== 'online' && sk !== 'busy' && sk !== 'ringing') return;
            if (filter === 'busy' && sk !== 'busy' && sk !== 'ringing') return;
            if (filter === 'offline' && sk !== 'offline') return;

            // Search
            if (searchTerm) {
                const haystack = [ext, dir.name, c.device||'', c.ip||'', sl, ...(dir.departments||[])].join(' ').toLowerCase();
                if (!haystack.includes(searchTerm)) return;
            }

            const changed = prevStates[ext] && prevStates[ext] !== sk;
            prevStates[ext] = sk;

            const rtt = Number(c.rtt);
            const rttOk = Number.isFinite(rtt) && rtt > 0;
            const rttCls = !rttOk ? '' : (rtt > 100 ? 'bad' : (rtt > 50 ? 'warn' : 'good'));

            let deptHtml = '';
            if (dir.departments && dir.departments.length) {
                deptHtml = dir.departments.map((d,i) => {
                    const clr = (dir.dept_colors||[])[i] || '#6366f1';
                    return '<span class="es-dept" style="background:'+clr+'18;color:'+clr+';border:1px solid '+clr+'44;">'+esc(d)+'</span>';
                }).join(' ');
            }

            let deviceHtml = '';
            const di = dir.device_info;
            if (di && (di.vendor || di.model)) {
                deviceHtml = '<span class="es-detail">' + esc([di.vendor, di.model].filter(Boolean).join(' ')) + '</span>';
            }

            // Build devices list HTML
            let devicesHtml = '';
            const devices = c.devices || [];
            if (devices.length > 0) {
                devicesHtml = '<div style="margin-top:6px;border-top:1px solid #f1f5f9;padding-top:6px;">';
                devices.forEach(d => {
                    const dStatus = String(d.status||'').toLowerCase();
                    const isOnline = dStatus.includes('avail') || dStatus.includes('reachable');
                    const dot = isOnline ? '#16a34a' : '#d1d5db';
                    const typeIcons = {web_phone:'🌐', sip_phone:'📞', teams:'🟣', mobile_app:'📱'};
                    const icon = typeIcons[d.type] || '📞';
                    devicesHtml += '<div style="display:flex;align-items:center;gap:6px;padding:2px 0;font-size:.72rem;">' +
                        '<span style="width:6px;height:6px;border-radius:50%;background:'+dot+';flex-shrink:0;"></span>' +
                        '<span>' + icon + '</span>' +
                        '<span style="color:#374151;font-weight:500;">' + esc(d.label||d.type) + '</span>' +
                        (d.ip ? '<code style="font-size:.65rem;color:#9ca3af;margin-left:auto;">' + esc(d.ip) + '</code>' : '<span style="color:#d1d5db;margin-left:auto;font-size:.65rem;">—</span>') +
                        (d.rtt ? '<span style="font-size:.65rem;color:#6b7280;">' + d.rtt.toFixed(1) + 'ms</span>' : '') +
                    '</div>';
                });
                devicesHtml += '</div>';
            } else {
                // Fallback: show single device info (legacy)
                devicesHtml = '<div style="margin-top:4px;">' +
                    (c.ip ? '<span class="es-detail"><code>' + esc(c.ip) + (c.port ? ':'+esc(c.port) : '') + '</code></span> ' : '') +
                    '<span class="es-detail">' + esc(c.device||'') + '</span>' +
                '</div>';
            }

            cards.push(
                '<div class="col-12 col-sm-6 col-lg-4 col-xl-3">' +
                    '<div class="es-card' + (changed ? ' es-state-change' : '') + '">' +
                        '<div class="es-status-bar ' + sk + '"></div>' +
                        '<div class="d-flex justify-content-between align-items-start mb-1">' +
                            '<div style="min-width:0;">' +
                                '<span class="es-ext-num es-dial" title="Click to call extension ' + esc(ext) + '" onclick="clickToDial(\'' + esc(ext) + '\')">' + esc(ext) + '</span>' +
                                '<div class="es-ext-name" title="' + esc(dir.name) + '">' + esc(dir.name) + '</div>' +
                            '</div>' +
                            '<span class="es-badge ' + sk + '">' + esc(sl) + '</span>' +
                        '</div>' +
                        '<div class="d-flex flex-wrap gap-1 mb-0">' + deptHtml + '</div>' +
                        devicesHtml +
                    '</div>' +
                '</div>'
            );

            // Compact list row — same data, denser layout
            const typeIcons = {web_phone:'🌐', sip_phone:'📞', teams:'🟣', mobile_app:'📱'};
            const deviceIcons = devices.length
                ? devices.map(d => {
                    const dOnline = String(d.status||'').toLowerCase().includes('avail');
                    return '<span class="es-device-icon' + (dOnline ? ' online' : '') + '" title="' + esc((d.label||d.type)+' '+(d.status||'')) + '">' + (typeIcons[d.type]||'📞') + '</span>';
                  }).join('')
                : '<span class="es-device-icon">—</span>';
            const primaryIp = c.ip ? (c.ip + (c.port ? ':'+c.port : '')) : (devices.find(d=>d.ip)||{}).ip || '';
            const deptList = (dir.departments||[]).map((d,i)=>{
                const clr = (dir.dept_colors||[])[i] || '#6366f1';
                return '<span class="es-dept" style="background:'+clr+'18;color:'+clr+';border:1px solid '+clr+'44;">'+esc(d)+'</span>';
            }).join(' ');
            rows.push(
                '<tr' + (changed ? ' class="es-state-change"' : '') + '>' +
                    '<td><span class="es-ext-num es-dial" title="Click to call extension ' + esc(ext) + '" onclick="clickToDial(\'' + esc(ext) + '\')">' + esc(ext) + '</span></td>' +
                    '<td>' + esc(dir.name) + '</td>' +
                    '<td><span class="es-status-dot ' + sk + '"></span><span class="text-muted">' + esc(sl) + '</span></td>' +
                    '<td><div class="es-device-icons">' + deviceIcons + '</div></td>' +
                    '<td>' + (primaryIp ? '<code>' + esc(primaryIp) + '</code>' : '<span class="text-muted">—</span>') + '</td>' +
                    '<td><div class="d-flex flex-wrap gap-1">' + (deptList || '<span class="text-muted">—</span>') + '</div></td>' +
                    '<td class="text-end"><span class="es-rtt ' + rttCls + '">' + (rttOk ? rtt.toFixed(0) + 'ms' : '—') + '</span></td>' +
                '</tr>'
            );
        });

        cntTotal.textContent = total;
        cntOnline.textContent = online;
        cntBusy.textContent = busy;
        cntOffline.textContent = offline;

        grid.innerHTML = cards.length
            ? cards.join('')
            : '<div class="col-12 text-center text-secondary py-5">No extensions match your filter.</div>';
        listBody.innerHTML = rows.length
            ? rows.join('')
            : '<tr><td colspan="7" class="text-center text-secondary py-4">No extensions match your filter.</td></tr>';
    }

    function applyViewMode() {
        const gridBtn = document.getElementById('esViewGrid');
        const listBtn = document.getElementById('esViewList');
        if (viewMode === 'list') {
            grid.style.display = 'none';
            listWrap.style.display = '';
            gridBtn?.classList.remove('active');
            listBtn?.classList.add('active');
        } else {
            grid.style.display = '';
            listWrap.style.display = 'none';
            listBtn?.classList.remove('active');
            gridBtn?.classList.add('active');
        }
    }

    async function poll() {
        try {
            const r = await fetch(LIVE_URL, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if (!r.ok) throw new Error(r.status);
            snapshot = await r.json();
            const t = snapshot.generated_at ? new Date(snapshot.generated_at).toLocaleTimeString() : 'now';
            lastUpdated.textContent = 'updated ' + t;
            pulseDot.classList.remove('offline');
            render();
        } catch (e) {
            lastUpdated.textContent = 'connection lost';
            pulseDot.classList.add('offline');
        }
    }

    // Filter buttons
    document.querySelectorAll('.es-filter-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.es-filter-btn').forEach(b => {
                b.classList.remove('active','btn-primary','btn-success','btn-info','btn-danger');
                b.classList.add('btn-outline-' + (b.dataset.filter === 'online' ? 'success' : b.dataset.filter === 'busy' ? 'info' : b.dataset.filter === 'offline' ? 'danger' : 'primary'));
            });
            filter = btn.dataset.filter;
            const colorMap = { all:'primary', online:'success', busy:'info', offline:'danger' };
            btn.classList.remove('btn-outline-'+colorMap[filter]);
            btn.classList.add('active','btn-'+colorMap[filter]);
            render();
        });
    });

    // Search
    document.getElementById('esSearch').addEventListener('input', function() {
        searchTerm = this.value.trim().toLowerCase();
        render();
    });

    // View mode toggle
    document.getElementById('esViewGrid').addEventListener('click', () => {
        viewMode = 'grid';
        localStorage.setItem('extStatusView', viewMode);
        applyViewMode();
    });
    document.getElementById('esViewList').addEventListener('click', () => {
        viewMode = 'list';
        localStorage.setItem('extStatusView', viewMode);
        applyViewMode();
    });

    // Initial render + start polling
    render();
    setInterval(poll, 2000);
    poll();
})();
</script>
@endpush