@extends('layouts.app')

@section('content')
<div class="container-fluid py-3">
    <!-- DECT NOC Dashboard -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <h1 class="h4 mb-1">
                        <i data-lucide="radio" class="me-2"></i>
                        DECT Network Operations Center
                    </h1>
                    <small class="text-muted">Last updated: <span id="lastUpdate">--</span></small>
                </div>
                <div class="badge bg-success">
                    <i data-lucide="activity" class="me-1"></i>
                    LIVE
                </div>
            </div>
        </div>
    </div>

    <!-- Compact KPI Row -->
    <div class="row mb-3">
        <div class="col-auto">
            <div class="border border-secondary rounded p-2 bg-light">
                <div class="d-flex align-items-center">
                    <small class="text-muted me-2">HANDSETS</small>
                    <strong class="text-success" id="handsetKpi" style="font-size: 1.2rem;">1</strong>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <div class="border border-secondary rounded p-2 bg-light">
                <div class="d-flex align-items-center">
                    <small class="text-muted me-2">BASES</small>
                    <strong class="text-primary" id="baseKpi" style="font-size: 1.2rem;">1</strong>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <div class="border border-secondary rounded p-2 bg-light">
                <div class="d-flex align-items-center">
                    <small class="text-muted me-2">RF HEALTH</small>
                    <strong class="text-warning" id="rfKpi" style="font-size: 1.2rem;">GOOD</strong>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <div class="border border-secondary rounded p-2 bg-light">
                <div class="d-flex align-items-center">
                    <small class="text-muted me-2">ALERTS</small>
                    <strong class="text-danger" id="alertKpi" style="font-size: 1.2rem;">0</strong>
                </div>
            </div>
        </div>
    </div>

    <!-- Main NOC Content -->
    <div class="row">
        <!-- Live RF Heatmap -->
        <div class="col-lg-8 mb-3">
            <div class="card border-secondary">
                <div class="card-header bg-dark text-white py-2">
                    <h6 class="mb-0">
                        <i data-lucide="activity" class="me-2"></i>
                        Live RF Heatmap
                    </h6>
                </div>
                <div class="card-body p-2">
                    <div style="height: 180px; background: #2d3748; border-radius: 4px; padding: 10px;">
                        <div class="text-center text-white">
                            <div style="font-size: 24px; font-weight: bold; margin-bottom: 10px;">
                                <span id="rfSignalStrength">-73.6</span> dBm
                            </div>
                            <div style="display: flex; justify-content: center; gap: 5px; margin-bottom: 10px;">
                                <div style="width: 30px; height: 40px; background: #28a745; border-radius: 3px;"></div>
                                <div style="width: 30px; height: 50px; background: #17a2b8; border-radius: 3px;"></div>
                                <div style="width: 30px; height: 60px; background: #28a745; border-radius: 3px;"></div>
                                <div style="width: 30px; height: 55px; background: #17a2b8; border-radius: 3px;"></div>
                                <div style="width: 30px; height: 45px; background: #ffc107; border-radius: 3px;"></div>
                            </div>
                            <div style="font-size: 14px;">
                                Quality: <span id="rfQuality">GOOD</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Infrastructure Status -->
        <div class="col-lg-4 mb-3">
            <div class="card border-secondary">
                <div class="card-header bg-dark text-white py-2">
                    <h6 class="mb-0">
                        <i data-lucide="server" class="me-2"></i>
                        Infrastructure Status
                    </h6>
                </div>
                <div class="card-body p-2">
                    <div>
                        <div class="border-bottom pb-2 mb-2">
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <strong class="text-success">Base Station 1</strong>
                                    <div class="small text-muted">IP: 192.168.8.110</div>
                                </div>
                                <span class="badge bg-success">ONLINE</span>
                            </div>
                        </div>
                        <div>
                            <div class="d-flex justify-content-between align-items-start">
                                <div>
                                    <strong class="text-success">Handset 1357</strong>
                                    <div class="small text-muted">Model: W59R</div>
                                    <div class="small text-muted">Firmware: 46.80.0.25</div>
                                </div>
                                <span class="badge bg-success">CONNECTED</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Tables Row -->
    <div class="row">
        <!-- Handsets Table -->
        <div class="col-lg-6 mb-3">
            <div class="card border-secondary">
                <div class="card-header bg-dark text-white py-2">
                    <h6 class="mb-0">
                        <i data-lucide="smartphone" class="me-2"></i>
                        Handsets
                    </h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-dark mb-0">
                            <thead>
                                <tr>
                                    <th>Ext</th>
                                    <th>User</th>
                                    <th>Model</th>
                                    <th>Firmware</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="handsetsTable">
                                <tr>
                                    <td>1357</td>
                                    <td>Hannes</td>
                                    <td>W59R</td>
                                    <td>46.80.0.25</td>
                                    <td><span class="badge bg-success">Online</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Base Stations Table -->
        <div class="col-lg-6 mb-3">
            <div class="card border-secondary">
                <div class="card-header bg-dark text-white py-2">
                    <h6 class="mb-0">
                        <i data-lucide="wifi" class="me-2"></i>
                        Base Stations
                    </h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-dark mb-0">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>IP</th>
                                    <th>Firmware</th>
                                    <th>Sync</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="baseStationsTable">
                                <tr>
                                    <td>Base 1</td>
                                    <td>192.168.8.110</td>
                                    <td>130.87.0.30</td>
                                    <td>Level 1</td>
                                    <td><span class="badge bg-success">Online</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Live Event Feed -->
    <div class="row">
        <div class="col-12">
            <div class="card border-secondary">
                <div class="card-header bg-dark text-white py-2">
                    <h6 class="mb-0">
                        <i data-lucide="clock" class="me-2"></i>
                        Recent Events
                    </h6>
                </div>
                <div class="card-body p-2">
                    <div style="max-height: 150px; overflow-y: auto;">
                        <div class="small text-muted mb-1">
                            <span class="text-muted">06:34</span> - Handset 1357 registered
                        </div>
                        <div class="small text-muted mb-1">
                            <span class="text-muted">06:33</span> - RF health updated
                        </div>
                        <div class="small text-muted mb-1">
                            <span class="text-muted">06:32</span> - Base Station online
                        </div>
                        <div class="small text-muted">
                            <span class="text-muted">06:30</span> - Synchronization complete
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log("DECT NOC Dashboard: DOM loaded");
    
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
    
    // Update last update time
    function updateLastUpdateTime() {
        const now = new Date();
        const element = document.getElementById('lastUpdate');
        if (element) {
            element.textContent = now.toLocaleTimeString();
        }
    }
    
    // Simple data loading function
    function loadDashboardData() {
        console.log("Loading DECT dashboard data...");
        
        fetch("/api/dect-proxy/summary")
            .then(response => response.json())
            .then(data => {
                console.log("API data loaded:", data);
                
                // Update KPI cards
                const handsetKpi = document.getElementById("handsetKpi");
                const baseKpi = document.getElementById("baseKpi");
                const rfKpi = document.getElementById("rfKpi");
                const alertKpi = document.getElementById("alertKpi");
                
                if (handsetKpi) handsetKpi.textContent = data.handsets?.connected || 0;
                if (baseKpi) baseKpi.textContent = data.base_stations?.online || 0;
                
                // RF Health
                let rfHealth = "GOOD";
                if (data.rf?.avg_dbm !== null) {
                    rfHealth = Math.max(70, 100 + data.rf.avg_dbm) + "%";
                    const rfSignal = document.getElementById('rfSignalStrength');
                    if (rfSignal) rfSignal.textContent = data.rf.avg_dbm;
                }
                if (rfKpi) rfKpi.textContent = rfHealth;
                
                if (data.rf?.quality) {
                    const rfQuality = document.getElementById('rfQuality');
                    if (rfQuality) rfQuality.textContent = data.rf.quality.toUpperCase();
                }
                
                // Alerts
                const alerts = (data.handsets?.disconnected || 0) + (data.base_stations?.offline || 0);
                if (alertKpi) alertKpi.textContent = alerts;
                
                updateLastUpdateTime();
                console.log("Dashboard updated");
            })
            .catch(error => {
                console.error("API error:", error);
            });
    }
    
    // Load data immediately
    loadDashboardData();
    
    // Refresh every 30 seconds
    setInterval(loadDashboardData, 30000);
});
</script>
@endsection