@extends('layouts.app')

@section('content')
<div class="page-header">
    <div class="page-title">
        <h1><i class="fas fa-broadcast-tower me-2 text-info"></i>Live DECT Monitor</h1>
        <p>Real-time handset, base station and RF signal data</p>
    </div>
    <div class="page-actions d-flex gap-2 align-items-center">
        <span id="lastSync" class="text-muted small"></span>
        <span id="syncBadge" class="badge bg-secondary">Loading...</span>
        <button class="btn btn-sm btn-outline-info" onclick="loadAll()"><i class="fas fa-sync-alt me-1"></i>Refresh</button>
    </div>
</div>

<!-- Summary Cards -->
<div class="row g-3 mb-4" id="summaryCards">
    <div class="col-xl-2 col-lg-3 col-md-4 col-6">
        <div class="card h-100"><div class="card-body text-center">
            <div class="text-muted small mb-1">Total Handsets</div>
            <div class="fs-2 fw-bold text-info" id="cTotal">—</div>
        </div></div>
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-6">
        <div class="card h-100"><div class="card-body text-center">
            <div class="text-muted small mb-1">Registered</div>
            <div class="fs-2 fw-bold text-success" id="cReg">—</div>
        </div></div>
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-6">
        <div class="card h-100"><div class="card-body text-center">
            <div class="text-muted small mb-1">Connected</div>
            <div class="fs-2 fw-bold text-success" id="cConn">—</div>
        </div></div>
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-6">
        <div class="card h-100"><div class="card-body text-center">
            <div class="text-muted small mb-1">Disconnected</div>
            <div class="fs-2 fw-bold text-danger" id="cDisc">—</div>
        </div></div>
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-6">
        <div class="card h-100"><div class="card-body text-center">
            <div class="text-muted small mb-1">Bases Online</div>
            <div class="fs-2 fw-bold text-success" id="cBases">—</div>
        </div></div>
    </div>
    <div class="col-xl-2 col-lg-3 col-md-4 col-6">
        <div class="card h-100"><div class="card-body text-center">
            <div class="text-muted small mb-1">Avg RF</div>
            <div class="fs-2 fw-bold" id="cRf">—</div>
        </div></div>
    </div>
</div>

<!-- Handsets Table -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-mobile-alt me-2"></i>Handsets</h5>
        <span class="badge bg-secondary" id="handsetCount">—</span>
    </div>
    <div class="card-body p-0" id="handsetsTable">
        <div class="text-center p-4 text-muted">Loading...</div>
    </div>
</div>

<!-- Base Stations Table -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-server me-2"></i>Base Stations</h5>
        <span class="badge bg-secondary" id="baseCount">—</span>
    </div>
    <div class="card-body p-0" id="basesTable">
        <div class="text-center p-4 text-muted">Loading...</div>
    </div>
</div>

<!-- RF Panel -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0"><i class="fas fa-signal me-2"></i>RF Signal Monitoring</h5>
        <small class="text-muted">Excellent &gt;-75 · Good -75 to -85 · Fair -85 to -90 · Poor &lt;-90 dBm</small>
    </div>
    <div class="card-body">
        <div class="row" id="rfPanel">
            <div class="col text-center text-muted p-4">Loading RF data...</div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
const API = '/api/dect';

function statusBadge(h) {
    if (h.connected)  return '<span class="badge bg-success">Connected</span>';
    if (h.registered) return '<span class="badge bg-warning text-dark">Registered</span>';
    return '<span class="badge bg-danger">Disconnected</span>';
}
function baseBadge(b) {
    return b.status === 'online' ? '<span class="badge bg-success">Online</span>' : '<span class="badge bg-danger">Offline</span>';
}
function rfQualityBadge(q) {
    const map = {excellent:'success', good:'success', fair:'warning', poor:'danger', unknown:'secondary'};
    return `<span class="badge bg-${map[q]||'secondary'}">${q||'—'}</span>`;
}
function rfBar(dbm) {
    if (dbm == null) return '';
    const pct = Math.max(0, Math.min(100, (dbm + 100) * 2));
    const cls  = dbm > -75 ? 'bg-success' : dbm > -85 ? 'bg-warning' : 'bg-danger';
    return `<div class="progress mt-2" style="height:6px"><div class="progress-bar ${cls}" style="width:${pct}%"></div></div>`;
}

async function loadSummary() {
    const r = await fetch(`${API}/summary`).then(r=>r.json()).catch(()=>null);
    if (!r) return;
    document.getElementById('cTotal').textContent = r.handsets.total;
    document.getElementById('cReg').textContent   = r.handsets.registered;
    document.getElementById('cConn').textContent  = r.handsets.connected;
    document.getElementById('cDisc').textContent  = r.handsets.disconnected;
    document.getElementById('cBases').textContent = r.base_stations.online + '/' + r.base_stations.total;
    const rfEl = document.getElementById('cRf');
    rfEl.textContent = r.rf.avg_dbm !== null ? r.rf.avg_dbm + ' dBm' : '—';
    rfEl.className   = 'fs-2 fw-bold text-' + (r.rf.quality === 'excellent'||r.rf.quality === 'good' ? 'success' : r.rf.quality === 'fair' ? 'warning' : r.rf.quality === 'poor' ? 'danger' : 'muted');
    document.getElementById('lastSync').textContent = r.last_sync ? 'Last sync: ' + r.last_sync : '';
    const badge = document.getElementById('syncBadge');
    badge.className   = 'badge ' + (r.realtime ? 'bg-success' : 'bg-secondary');
    badge.textContent = r.realtime ? '● Live' : 'Stale';
}

async function loadHandsets() {
    const r = await fetch(`${API}/handsets`).then(r=>r.json()).catch(()=>null);
    if (!r) return;
    document.getElementById('handsetCount').textContent = r.total;
    if (!r.data.length) {
        document.getElementById('handsetsTable').innerHTML = '<div class="text-center p-4 text-muted">No handsets. Push data from W90DM browser console.</div>';
        return;
    }
    const rows = r.data.map(h=>`<tr>
        <td><strong>${h.extension||'—'}</strong></td>
        <td>${h.name||'—'}</td>
        <td>${h.assigned_user||'—'}</td>
        <td><span class="badge bg-light text-dark border">${h.model||'—'}</span></td>
        <td><code>${h.firmware||'—'}</code></td>
        <td>${h.registered?'<span class="badge bg-success">Yes</span>':'<span class="badge bg-danger">No</span>'}</td>
        <td>${statusBadge(h)}</td>
        <td><code class="text-muted small">${h.ipui||'—'}</code></td>
        <td class="text-muted small">${h.last_seen||'—'}</td>
    </tr>`).join('');
    document.getElementById('handsetsTable').innerHTML = `<div class="table-responsive"><table class="table table-hover mb-0">
        <thead class="table-light"><tr><th>Extension</th><th>Name</th><th>Manager</th><th>Model</th><th>Firmware</th><th>Registered</th><th>Status</th><th>IPUI</th><th>Last Seen</th></tr></thead>
        <tbody>${rows}</tbody></table></div>`;
}

async function loadBases() {
    const r = await fetch(`${API}/base-stations`).then(r=>r.json()).catch(()=>null);
    if (!r) return;
    document.getElementById('baseCount').textContent = r.total;
    if (!r.data.length) {
        document.getElementById('basesTable').innerHTML = '<div class="text-center p-4 text-muted">No base stations found.</div>';
        return;
    }
    const rows = r.data.map(b=>`<tr>
        <td><strong>${b.name||'—'}</strong></td>
        <td><code>${b.ip||'—'}</code></td>
        <td><code>${b.firmware||'—'}</code></td>
        <td>${b.sync_level||'—'}</td>
        <td>${b.cluster||'—'}</td>
        <td>${baseBadge(b)}</td>
        <td class="text-muted small">${b.last_seen||'—'}</td>
    </tr>`).join('');
    document.getElementById('basesTable').innerHTML = `<div class="table-responsive"><table class="table table-hover mb-0">
        <thead class="table-light"><tr><th>Name</th><th>IP</th><th>Firmware</th><th>Sync Level</th><th>Cluster</th><th>Status</th><th>Last Seen</th></tr></thead>
        <tbody>${rows}</tbody></table></div>`;
}

async function loadRf() {
    const r = await fetch(`${API}/rf-stats`).then(r=>r.json()).catch(()=>null);
    if (!r||!r.data.length) {
        document.getElementById('rfPanel').innerHTML = '<div class="col text-center text-muted p-4">No RF data. RF stats are collected automatically during each sync.</div>';
        return;
    }
    document.getElementById('rfPanel').innerHTML = r.data.map(b=>`
        <div class="col-xl-4 col-lg-6 mb-3">
            <div class="card border h-100">
                <div class="card-body">
                    <h6 class="card-title"><i class="fas fa-broadcast-tower me-2 text-info"></i>${b.base_name}</h6>
                    <div class="d-flex justify-content-between mb-1"><span class="text-muted small">Best</span><strong>${b.best_dbm} dBm</strong></div>
                    <div class="d-flex justify-content-between mb-1"><span class="text-muted small">Worst</span><strong>${b.worst_dbm} dBm</strong></div>
                    <div class="d-flex justify-content-between mb-1"><span class="text-muted small">Average</span><strong>${b.avg_dbm} dBm</strong></div>
                    <div class="d-flex justify-content-between mb-2"><span class="text-muted small">Quality</span>${rfQualityBadge(b.quality)}</div>
                    ${rfBar(b.avg_dbm)}
                </div>
            </div>
        </div>`).join('');
}

async function loadAll() {
    await Promise.all([loadSummary(), loadHandsets(), loadBases(), loadRf()]);
}

loadAll();
setInterval(loadAll, 30000);
</script>
@endpush