@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="page-header d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">Network Topology</h1>
            <p class="text-muted mb-0">Visualize DECT network infrastructure and connections</p>
        </div>
        <div class="d-flex gap-2">
            <button onclick="exportTopology()" class="btn btn-outline-success btn-sm">
                <i class="fas fa-download"></i> Export
            </button>
            <a href="{{ route('dect.topology.realtime') }}" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-broadcast-tower"></i> Real-time
            </a>
            <button onclick="refreshTopology()" class="btn btn-outline-secondary btn-sm">
                <i class="fas fa-sync"></i> Refresh
            </button>
        </div>
    </div>

    <!-- Topology Statistics -->
    <div class="row mb-4">
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <h4 class="text-primary mb-1" id="totalSystems">-</h4>
                    <small class="text-muted">Systems</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <h4 class="text-success mb-1" id="onlineBaseStations">-</h4>
                    <small class="text-muted">Base Stations</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <h4 class="text-info mb-1" id="registeredHandsets">-</h4>
                    <small class="text-muted">Handsets</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <h4 class="text-warning mb-1" id="activeCalls">-</h4>
                    <small class="text-muted">Active Calls</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <h4 class="text-secondary mb-1" id="avgSignal">-</h4>
                    <small class="text-muted">Signal %</small>
                </div>
            </div>
        </div>
        <div class="col-lg-2 col-md-4 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <h4 class="text-secondary mb-1" id="avgBattery">-</h4>
                    <small class="text-muted">Battery %</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Network Topology Visualization -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Network Topology Map</h5>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-outline-primary active" onclick="changeLayout('force')">Force</button>
                    <button class="btn btn-outline-primary" onclick="changeLayout('hierarchical')">Hierarchical</button>
                    <button class="btn btn-outline-primary" onclick="changeLayout('circular')">Circular</button>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div id="topology-container" style="height: 600px; position: relative;">
                <canvas id="topology-canvas" style="width: 100%; height: 100%;"></canvas>
            </div>
        </div>
    </div>

    <!-- Legend -->
    <div class="card border-0 shadow-sm mt-3">
        <div class="card-body">
            <h6 class="card-title mb-3">Legend</h6>
            <div class="row">
                <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                        <div class="rounded-circle bg-primary me-2" style="width: 12px; height: 12px;"></div>
                        <span>System</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                        <div class="rounded-circle bg-success me-2" style="width: 12px; height: 12px;"></div>
                        <span>Base Station (Online)</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                        <div class="rounded-circle bg-danger me-2" style="width: 12px; height: 12px;"></div>
                        <span>Base Station (Offline)</span>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2">
                        <div class="rounded-circle bg-info me-2" style="width: 12px; height: 12px;"></div>
                        <span>Handset (Registered)</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                        <div class="rounded-circle bg-warning me-2" style="width: 12px; height: 12px;"></div>
                        <span>Handset (Offline)</span>
                    </div>
                    <div class="d-flex align-items-center mb-2">
                        <div class="rounded-circle bg-secondary me-2" style="width: 12px; height: 12px;"></div>
                        <span>Active Connection</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Vis.js for network visualization -->
<script src="https://unun.jsdelivr.net/npm/vis-network@9.1.2/dist/vis-network.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vis-network@9.1.2/dist/dist/vis-network.min.css" rel="stylesheet">

<script>
let network = null;
let nodes = null;
let edges = null;

document.addEventListener('DOMContentLoaded', function() {
    initializeTopology();
    loadTopologyStats();
    setInterval(loadTopologyStats, 30000); // Update stats every 30 seconds
});

function initializeTopology() {
    const container = document.getElementById('topology-container');
    
    nodes = new vis.DataSet([]);
    edges = new vis.DataSet([]);
    
    const data = {
        nodes: nodes,
        edges: edges
    };
    
    const options = {
        nodes: {
            shape: 'dot',
            size: 20,
            font: {
                size: 14,
                color: '#333333'
            },
            borderWidth: 2,
            shadow: true
        },
        edges: {
            width: 2,
            shadow: true,
            smooth: {
                type: 'continuous'
            }
        },
        physics: {
            forceAtlas2Based: {
                gravitationalConstant: -26,
                centralGravity: 0.005,
                springLength: 230,
                springConstant: 0.18
            },
            solver: 'forceAtlas2Based',
            timestep: 0.35
        },
        interaction: {
            hover: true,
            tooltipDelay: 200,
            zoomView: true,
            dragView: true
        }
    };
    
    network = new vis.Network(container, data, options);
    
    // Load topology data
    loadTopologyData();
    
    // Add click event handler
    network.on('click', function(params) {
        if (params.nodes.length > 0) {
            const nodeId = params.nodes[0];
            handleNodeClick(nodeId);
        }
    });
    
    // Add hover event handler
    network.on('hoverNode', function(params) {
        const nodeId = params.node;
        const node = nodes.get(nodeId);
        if (node && node.data) {
            showNodeTooltip(node);
        }
    });
}

function loadTopologyData() {
    fetch('/dect/topology/data')
        .then(response => response.json())
        .then(data => {
            const processedNodes = data.nodes.map(node => ({
                id: node.id,
                label: node.label,
                color: getNodeColor(node.type, node.status),
                shape: getNodeShape(node.type),
                size: getNodeSize(node.type),
                data: node.data
            }));
            
            const processedEdges = data.edges.map(edge => ({
                from: edge.from,
                to: edge.to,
                color: edge.status === 'active' ? '#2ecc71' : '#95a5a6',
                width: edge.status === 'active' ? 3 : 1,
                dashes: edge.status === 'inactive'
            }));
            
            nodes.clear();
            edges.clear();
            nodes.add(processedNodes);
            edges.add(processedEdges);
        })
        .catch(error => console.error('Error loading topology data:', error));
}

function loadTopologyStats() {
    fetch('/dect/topology/stats')
        .then(response => response.json())
        .then(data => {
            document.getElementById('totalSystems').textContent = data.total_systems;
            document.getElementById('onlineBaseStations').textContent = data.online_base_stations + '/' + data.total_base_stations;
            document.getElementById('registeredHandsets').textContent = data.registered_handsets + '/' + data.total_handsets;
            document.getElementById('activeCalls').textContent = data.active_calls;
            document.getElementById('avgSignal').textContent = Math.round(data.avg_signal_strength || 0) + '%';
            if (document.getElementById('avgBattery')) document.getElementById('avgBattery').textContent = '-';
        })
        .catch(error => console.error('Error loading stats:', error));
}

function getNodeColor(type, status) {
    switch (type) {
        case 'system':
            return '#3498db';
        case 'base_station':
            return status === 'online' ? '#2ecc71' : '#e74c3c';
        case 'handset':
            return status === 'registered' ? '#9b59b6' : '#f39c12';
        default:
            return '#95a5a6';
    }
}

function getNodeShape(type) {
    switch (type) {
        case 'system':
            return 'diamond';
        case 'base_station':
            return 'square';
        case 'handset':
            return 'dot';
        default:
            return 'dot';
    }
}

function getNodeSize(type) {
    switch (type) {
        case 'system':
            return 30;
        case 'base_station':
            return 25;
        case 'handset':
            return 20;
        default:
            return 20;
    }
}

function handleNodeClick(nodeId) {
    const node = nodes.get(nodeId);
    if (node) {
        let details = `<strong>${node.label}</strong><br>`;
        details += `Type: ${node.data ? Object.keys(node.data).join(', ') : 'N/A'}`;
        
        if (node.data) {
            Object.entries(node.data).forEach(([key, value]) => {
                details += `<br>${key}: ${value}`;
            });
        }
        
        // Show details in a modal or tooltip
        console.log('Node details:', details);
    }
}

function showNodeTooltip(node) {
    // Implementation for showing detailed node information
    console.log('Node tooltip:', node);
}

function changeLayout(layout) {
    const options = {
        layout: {
            hierarchical: {
                enabled: layout === 'hierarchical',
                direction: 'UD',
                sortMethod: 'directed'
            }
        }
    };
    
    if (layout === 'circular') {
        options.layout = {
            improvedLayout: true
        };
    }
    
    network.setOptions(options);
}

function refreshTopology() {
    loadTopologyData();
    loadTopologyStats();
}

function exportTopology() {
    fetch('/dect/topology/export')
        .then(response => response.json())
        .then(data => {
            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'dect-topology-' + new Date().toISOString().split('T')[0] + '.json';
            a.click();
            window.URL.revokeObjectURL(url);
        })
        .catch(error => console.error('Error exporting topology:', error));
}
</script>
@endsection