{% extends 'base/base.html' %}
{% load static %}

{% block title %}Network Topology Canvas{% endblock %}

{% block content-title %}
<h1>
    <i class="mdi mdi-lan-connect"></i>
    Network Topology Canvas
</h1>
{% endblock %}

{% block content %}
<div class="row mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">
                    <i class="mdi mdi-chart-line"></i>
                    Network Overview
                </h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="info-tile tile-primary">
                            <div class="tile-heading">Devices</div>
                            <div class="tile-body">
                                <span class="tile-value">{{ device_count|default:"0" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-tile tile-success">
                            <div class="tile-heading">Connections</div>
                            <div class="tile-body">
                                <span class="tile-value">{{ cable_count|default:"0" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-tile tile-info">
                            <div class="tile-heading">Sites</div>
                            <div class="tile-body">
                                <span class="tile-value">{{ site_count|default:"0" }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="info-tile tile-warning">
                            <div class="tile-heading">Device Types</div>
                            <div class="tile-body">
                                <span class="tile-value">{{ device_type_count|default:"0" }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mb-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title">
                    <i class="mdi mdi-tune"></i>
                    Visualization Controls
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="layoutSelect" class="form-label">Layout Algorithm</label>
                            <select id="layoutSelect" class="form-select">
                                <option value="force">Force-Directed</option>
                                <option value="hierarchy">Hierarchical</option>
                                <option value="circular">Circular</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="deviceFilter" class="form-label">Device Type Filter</label>
                            <select id="deviceFilter" class="form-select">
                                <option value="all">All Device Types</option>
                                <option value="router">Routers</option>
                                <option value="switch">Switches</option>
                                <option value="firewall">Firewalls</option>
                                <option value="server">Servers</option>
                                <option value="wireless">Wireless</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">View Controls</label>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="zoomIn">
                                <i class="mdi mdi-magnify-plus"></i> Zoom In
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="zoomOut">
                                <i class="mdi mdi-magnify-minus"></i> Zoom Out
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="resetView">
                                <i class="mdi mdi-restore"></i> Reset
                            </button>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="exportSVG">
                                <i class="mdi mdi-export"></i> Export
                            </button>
                            <button type="button" class="btn btn-outline-success btn-sm" id="refreshData">
                                <i class="mdi mdi-refresh"></i> Refresh
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title">
                    <i class="mdi mdi-graph"></i>
                    Network Topology Visualization
                </h5>
                <span class="badge badge-primary">
                    {{ device_count|default:"0" }} devices
                </span>
            </div>
            <div class="card-body p-0">
                <div id="topology-container" style="width: 100%; height: 700px; position: relative; background: #f8f9fa;">
                    <!-- Loading overlay -->
                    <div id="loading-overlay" class="d-flex justify-content-center align-items-center h-100" 
                         style="position: absolute; top: 0; left: 0; width: 100%; background: rgba(248, 249, 250, 0.9); z-index: 1000;">
                        <div class="text-center">
                            <div class="spinner-border text-primary" role="status">
                                <span class="sr-only">Loading...</span>
                            </div>
                            <p class="mt-2 text-muted">Loading network topology...</p>
                        </div>
                    </div>
                    
                    <!-- SVG container -->
                    <svg id="network-svg" width="100%" height="700">
                        <defs>
                            <marker id="arrowhead" markerWidth="10" markerHeight="7" 
                                    refX="9" refY="3.5" orient="auto">
                                <polygon points="0 0, 10 3.5, 0 7" fill="#666" />
                            </marker>
                            
                            <linearGradient id="deviceGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
                                <stop offset="100%" style="stop-color:#f8f9fa;stop-opacity:1" />
                            </linearGradient>
                        </defs>
                    </svg>
                    
                    <!-- Legend -->
                    <div id="legend" class="position-absolute bg-white border rounded shadow-sm" 
                         style="top: 15px; right: 15px; padding: 15px; max-width: 200px;">
                        <h6 class="mb-2">
                            <i class="mdi mdi-format-list-bulleted"></i>
                            Device Types
                        </h6>
                        <div id="legend-items"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Tooltip -->
<div id="device-tooltip" class="position-absolute bg-dark text-white rounded shadow" 
     style="display: none; pointer-events: none; z-index: 2000; font-size: 12px; max-width: 300px; padding: 8px;">
</div>
{% endblock %}

{% block javascript %}
<!-- Load D3.js from CDN to avoid missing static file issues -->
<script src="https://d3js.org/d3.v7.min.js" 
        onerror="console.error('Failed to load D3.js from CDN'); document.getElementById('loading-overlay').innerHTML = '<div class=\'text-center\'><h5 class=\'text-danger\'>Error</h5><p>Failed to load D3.js visualization library. Please check your internet connection.</p></div>';">
</script>

<script type="text/javascript">
// Error handling for missing D3
if (typeof d3 === 'undefined') {
    console.error('D3.js not loaded - falling back to error message');
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('loading-overlay').innerHTML = `
            <div class="text-center">
                <h5 class="text-danger">Visualization Error</h5>
                <p>D3.js library failed to load. Please check your internet connection.</p>
                <button class="btn btn-primary" onclick="location.reload()">
                    <i class="mdi mdi-refresh"></i> Retry
                </button>
            </div>
        `;
    });
} else {
    console.log('🚀 Network Canvas - NetBox Integration Loading...');

    // Global variables
    let simulation, svg, container, zoom, tooltip;
    let nodes = [], links = [];
    let width, height;

    // Device type configurations matching NetBox color scheme
    const deviceConfig = {
        'router': { 
            color: '#dc3545', 
            icon: '🔀',
            shape: 'rect'
        },
        'switch': { 
            color: '#007bff', 
            icon: '🔗',
            shape: 'rect'
        },
        'firewall': { 
            color: '#fd7e14', 
            icon: '🛡️',
            shape: 'rect'
        },
        'server': { 
            color: '#28a745', 
            icon: '💻',
            shape: 'rect'
        },
        'wireless': { 
            color: '#6f42c1', 
            icon: '📡',
            shape: 'circle'
        },
        'default': { 
            color: '#6c757d', 
            icon: '❓',
            shape: 'circle'
        }
    };

    document.addEventListener('DOMContentLoaded', function() {
        console.log('✅ DOM loaded - Initializing NetBox Network Canvas');
        
        // Initialize the visualization
        initializeVisualization();
        
        // Load and process data
        loadNetworkData();
        
        // Setup event listeners
        setupEventListeners();
    });

    function initializeVisualization() {
        // Get container dimensions
        const container = document.getElementById('topology-container');
        width = container.clientWidth;
        height = container.clientHeight;
        
        // Setup SVG
        svg = d3.select('#network-svg')
            .attr('width', width)
            .attr('height', height);
        
        // Setup zoom behavior
        zoom = d3.zoom()
            .scaleExtent([0.1, 4])
            .on('zoom', function(event) {
                svg.select('#main-group').attr('transform', event.transform);
            });
        
        svg.call(zoom);
        
        // Create main group for zooming/panning
        svg.append('g').attr('id', 'main-group');
        
        // Setup tooltip
        tooltip = d3.select('#device-tooltip');
        
        console.log('✅ Visualization initialized');
    }

    function loadNetworkData() {
        console.log('📡 Loading network topology data...');
        
        try {
            // Get data from Django template
            const rawData = '{{ topology_data_json|escapejs }}';
            
            if (!rawData || rawData === 'null' || rawData === '') {
                throw new Error('No topology data available');
            }
            
            const data = JSON.parse(rawData);
            console.log('📊 Parsed topology data:', data);
            
            // Process the data
            processNetworkData(data);
            
            // Hide loading overlay
            document.getElementById('loading-overlay').style.display = 'none';
            
            // Create the visualization
            createNetworkVisualization();
            
        } catch (error) {
            console.error('❌ Error loading network data:', error);
            showError('Failed to load network topology data: ' + error.message);
        }
    }

    function processNetworkData(data) {
        // Process nodes (devices)
        nodes = data.devices.map(device => ({
            id: device.id,
            name: device.name,
            type: getDeviceType(device),
            role: device.role,
            site: device.site,
            status: device.status,
            manufacturer: device.manufacturer,
            model: device.model,
            primary_ip: device.primary_ip,
            x: Math.random() * (width - 100) + 50,
            y: Math.random() * (height - 100) + 50
        }));
        
        // Process links (connections)
        links = data.connections.map(conn => ({
            source: conn.device_a,
            target: conn.device_b,
            type: conn.type || 'cable',
            status: conn.status || 'connected'
        }));
        
        console.log(`✅ Processed ${nodes.length} devices and ${links.length} connections`);
    }

    function getDeviceType(device) {
        const name = device.name.toLowerCase();
        const role = (device.role || '').toLowerCase();
        
        if (name.includes('ap') || name.includes('wireless') || role.includes('access')) return 'wireless';
        if (name.includes('rtr') || name.includes('router') || role.includes('router')) return 'router';
        if (name.includes('sw') || name.includes('switch') || role.includes('switch')) return 'switch';
        if (name.includes('fw') || name.includes('firewall') || role.includes('firewall')) return 'firewall';
        if (name.includes('srv') || name.includes('server') || role.includes('server')) return 'server';
        
        return 'default';
    }

    function createNetworkVisualization() {
        console.log('🎨 Creating network visualization...');
        
        const mainGroup = svg.select('#main-group');
        
        // Create force simulation
        simulation = d3.forceSimulation(nodes)
            .force('link', d3.forceLink(links).id(d => d.id).distance(120))
            .force('charge', d3.forceManyBody().strength(-400))
            .force('center', d3.forceCenter(width / 2, height / 2))
            .force('collision', d3.forceCollide().radius(35));
        
        // Create links
        const link = mainGroup.selectAll('.link')
            .data(links)
            .enter().append('line')
            .attr('class', 'link')
            .attr('stroke', '#999')
            .attr('stroke-opacity', 0.6)
            .attr('stroke-width', 2)
            .attr('marker-end', 'url(#arrowhead)');
        
        // Create device nodes
        const node = mainGroup.selectAll('.node')
            .data(nodes)
            .enter().append('g')
            .attr('class', 'node')
            .style('cursor', 'pointer')
            .call(d3.drag()
                .on('start', dragstarted)
                .on('drag', dragged)
                .on('end', dragended));
        
        // Add device shapes
        node.append('rect')
            .attr('width', 50)
            .attr('height', 35)
            .attr('x', -25)
            .attr('y', -17.5)
            .attr('rx', 8)
            .attr('fill', d => deviceConfig[d.type]?.color || deviceConfig.default.color)
            .attr('stroke', '#fff')
            .attr('stroke-width', 3)
            .style('filter', 'drop-shadow(3px 3px 6px rgba(0,0,0,0.2))')
            .style('transition', 'all 0.2s');
        
        // Add device icons
        node.append('text')
            .attr('text-anchor', 'middle')
            .attr('dy', 5)
            .style('font-size', '16px')
            .style('fill', '#fff')
            .style('pointer-events', 'none')
            .text(d => deviceConfig[d.type]?.icon || deviceConfig.default.icon);
        
        // Add device labels
        node.append('text')
            .attr('dy', 35)
            .attr('text-anchor', 'middle')
            .style('font-size', '11px')
            .style('font-weight', '600')
            .style('fill', '#333')
            .style('pointer-events', 'none')
            .text(d => d.name);
        
        // Add hover effects
        node
            .on('mouseover', function(event, d) {
                // Highlight node
                d3.select(this).select('rect')
                    .attr('stroke-width', 4)
                    .attr('stroke', '#ffc107')
                    .style('filter', 'drop-shadow(4px 4px 8px rgba(0,0,0,0.3))');
                
                // Show tooltip
                tooltip
                    .style('display', 'block')
                    .style('left', (event.pageX + 10) + 'px')
                    .style('top', (event.pageY - 10) + 'px')
                    .html(`
                        <strong>${d.name}</strong><br>
                        <small>Type: ${d.type}</small><br>
                        <small>Role: ${d.role || 'N/A'}</small><br>
                        <small>Site: ${d.site || 'N/A'}</small><br>
                        <small>Status: ${d.status || 'N/A'}</small><br>
                        <small>Model: ${d.manufacturer} ${d.model}</small><br>
                        <small>IP: ${d.primary_ip || 'N/A'}</small>
                    `);
            })
            .on('mouseout', function(event, d) {
                // Remove highlight
                d3.select(this).select('rect')
                    .attr('stroke-width', 3)
                    .attr('stroke', '#fff')
                    .style('filter', 'drop-shadow(3px 3px 6px rgba(0,0,0,0.2))');
                
                // Hide tooltip
                tooltip.style('display', 'none');
            })
            .on('click', function(event, d) {
                console.log('Device clicked:', d);
                // Could open NetBox device detail page
                // window.open(`/dcim/devices/${d.id}/`, '_blank');
            });
        
        // Update positions on simulation tick
        simulation.on('tick', () => {
            link
                .attr('x1', d => d.source.x)
                .attr('y1', d => d.source.y)
                .attr('x2', d => d.target.x)
                .attr('y2', d => d.target.y);
            
            node.attr('transform', d => `translate(${d.x},${d.y})`);
        });
        
        // Create legend
        createLegend();
        
        console.log('✅ Network visualization created successfully');
    }

    function createLegend() {
        const legendContainer = d3.select('#legend-items');
        
        const usedTypes = [...new Set(nodes.map(d => d.type))];
        
        usedTypes.forEach(type => {
            const config = deviceConfig[type] || deviceConfig.default;
            const item = legendContainer.append('div')
                .style('margin-bottom', '8px')
                .style('display', 'flex')
                .style('align-items', 'center');
            
            item.append('div')
                .style('width', '16px')
                .style('height', '16px')
                .style('background-color', config.color)
                .style('margin-right', '8px')
                .style('border-radius', '3px')
                .style('border', '1px solid #fff');
            
            item.append('span')
                .style('font-size', '12px')
                .style('font-weight', '500')
                .text(type.charAt(0).toUpperCase() + type.slice(1));
        });
    }

    function setupEventListeners() {
        // Layout selector
        document.getElementById('layoutSelect').addEventListener('change', function() {
            changeLayout(this.value);
        });
        
        // Device filter
        document.getElementById('deviceFilter').addEventListener('change', function() {
            filterDevices(this.value);
        });
        
        // Zoom controls
        document.getElementById('zoomIn').addEventListener('click', () => {
            svg.transition().duration(300).call(zoom.scaleBy, 1.5);
        });
        
        document.getElementById('zoomOut').addEventListener('click', () => {
            svg.transition().duration(300).call(zoom.scaleBy, 1 / 1.5);
        });
        
        document.getElementById('resetView').addEventListener('click', () => {
            svg.transition().duration(500).call(zoom.transform, d3.zoomIdentity);
        });
        
        // Export and refresh
        document.getElementById('exportSVG').addEventListener('click', exportSVG);
        document.getElementById('refreshData').addEventListener('click', () => {
            location.reload();
        });
    }

    function changeLayout(layoutType) {
        console.log('🔄 Changing layout to:', layoutType);
        if (layoutType === 'circular') {
            // Arrange nodes in a circle
            const radius = Math.min(width, height) / 3;
            const centerX = width / 2;
            const centerY = height / 2;
            
            nodes.forEach((node, i) => {
                const angle = (i / nodes.length) * 2 * Math.PI;
                node.fx = centerX + radius * Math.cos(angle);
                node.fy = centerY + radius * Math.sin(angle);
            });
            
            simulation.alpha(0.3).restart();
        } else {
            // Reset to force-directed
            nodes.forEach(node => {
                node.fx = null;
                node.fy = null;
            });
            simulation.alpha(0.3).restart();
        }
    }

    function filterDevices(deviceType) {
        console.log('🔍 Filtering devices by type:', deviceType);
        
        svg.selectAll('.node')
            .style('opacity', d => deviceType === 'all' || d.type === deviceType ? 1 : 0.2)
            .style('pointer-events', d => deviceType === 'all' || d.type === deviceType ? 'all' : 'none');
    }

    function exportSVG() {
        console.log('💾 Exporting SVG...');
        const svgData = new XMLSerializer().serializeToString(document.getElementById('network-svg'));
        const svgBlob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
        const svgUrl = URL.createObjectURL(svgBlob);
        
        const downloadLink = document.createElement('a');
        downloadLink.href = svgUrl;
        downloadLink.download = 'network-topology.svg';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
    }

    function showError(message) {
        document.getElementById('loading-overlay').innerHTML = `
            <div class="text-center">
                <i class="mdi mdi-alert-circle text-danger" style="font-size: 48px;"></i>
                <h5 class="text-danger mt-2">Error</h5>
                <p class="text-muted">${message}</p>
                <button class="btn btn-primary" onclick="location.reload()">
                    <i class="mdi mdi-refresh"></i> Retry
                </button>
            </div>
        `;
    }

    // Drag functions for D3
    function dragstarted(event, d) {
        if (!event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(event, d) {
        d.fx = event.x;
        d.fy = event.y;
    }

    function dragended(event, d) {
        if (!event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }

    console.log('✅ NetBox Network Canvas - Professional Integration Complete');
}
</script>
{% endblock %}