@extends('layout.app')

@push('styles')
    <style>
        .nv-shell {
            --nv-bg: #ffffff;
            --nv-bg-grad: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0));
            --nv-dot: rgba(15,23,42,0.10);
            --nv-panel-bg: rgba(255,255,255,0.92);
            --nv-panel-border: rgba(15,23,42,0.08);
            --nv-text: #1f2937;
            --nv-text-muted: #6b7280;
            --nv-text-faint: #94a3b8;
            --nv-row-name: #111827;
            --nv-pill-bg: rgba(15,23,42,0.05);
            --nv-pill-border: rgba(15,23,42,0.06);
            --nv-side-shadow: 0 10px 30px rgba(15,23,42,0.10);

            position: relative;
            background-color: var(--nv-bg);
            background-image: radial-gradient(var(--nv-dot) 1px, transparent 1px);
            background-size: 22px 22px;
            background-position: 0 0;
            border-radius: 12px;
            overflow: hidden;
            min-height: calc(100vh - 180px);
            color: var(--nv-text);
            transition: background-color 0.2s ease;
        }
        body.dark-theme .nv-shell,
        html.dark-theme .nv-shell {
            --nv-bg: #0b1020;
            --nv-bg-grad: linear-gradient(180deg, rgba(11,16,32,0.85), rgba(11,16,32,0));
            --nv-dot: rgba(148,163,184,0.18);
            --nv-panel-bg: rgba(15,23,42,0.92);
            --nv-panel-border: rgba(255,255,255,0.08);
            --nv-text: #e5e7eb;
            --nv-text-muted: #cbd5e1;
            --nv-text-faint: #94a3b8;
            --nv-row-name: #e5e7eb;
            --nv-pill-bg: rgba(255,255,255,0.06);
            --nv-pill-border: rgba(255,255,255,0.08);
            --nv-side-shadow: 0 10px 30px rgba(0,0,0,0.4);
        }

        .nv-topbar {
            position: absolute;
            top: 0; left: 0; right: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            color: var(--nv-text);
            z-index: 5;
            background: var(--nv-bg-grad);
            pointer-events: none;
        }
        .nv-topbar .nv-brand {
            display: flex; align-items: center; gap: 12px;
            font-size: 14px; font-weight: 600;
            letter-spacing: 0.5px;
        }
        .nv-topbar .nv-brand .nv-logo {
            width: 28px; height: 28px;
            background: linear-gradient(135deg, #6366f1, #06b6d4);
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-weight: 700; font-size: 13px;
            box-shadow: 0 0 12px rgba(99,102,241,0.5);
        }
        .nv-topbar .nv-brand .nv-crumb {
            color: var(--nv-text-faint); font-weight: 500;
        }
        .nv-topbar .nv-actions {
            display: flex; align-items: center; gap: 14px;
            pointer-events: auto;
        }
        .nv-topbar .nv-count {
            color: var(--nv-text-muted); font-size: 13px;
            background: var(--nv-pill-bg);
            padding: 4px 10px; border-radius: 999px;
            border: 1px solid var(--nv-pill-border);
        }
        .nv-topbar .nv-count .dot {
            display: inline-block; width: 6px; height: 6px;
            background: #22c55e; border-radius: 50%;
            margin-right: 6px;
        }
        .nv-topbar .nv-fit {
            color: var(--nv-text-muted); font-size: 13px; cursor: pointer;
            background: transparent; border: none;
            display: flex; align-items: center; gap: 6px;
        }
        .nv-topbar .nv-fit:hover { color: var(--nv-text); }

        #nv-graph {
            width: 100%;
            height: calc(100vh - 180px);
        }

        .nv-legend {
            position: absolute;
            left: 16px; bottom: 16px;
            background: var(--nv-panel-bg);
            border: 1px solid var(--nv-panel-border);
            border-radius: 10px;
            padding: 12px 14px;
            color: var(--nv-text-muted);
            font-size: 12px;
            backdrop-filter: blur(6px);
            min-width: 280px;
            max-width: 320px;
            z-index: 5;
        }
        .nv-legend .nv-legend-title {
            font-size: 11px;
            letter-spacing: 1px;
            color: var(--nv-text-faint);
            margin-bottom: 8px;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
        }
        .nv-legend .nv-legend-title .toggle {
            color: var(--nv-text-faint);
            font-size: 18px;
            line-height: 1;
        }
        .nv-legend.collapsed .nv-legend-body { display: none; }
        .nv-legend.collapsed { min-width: 0; }

        .nv-legend-rows { display: flex; flex-direction: column; gap: 6px; }
        .nv-legend-row {
            display: grid;
            grid-template-columns: 22px 70px 1fr 32px;
            align-items: center;
            gap: 8px;
        }
        .nv-legend-row .name { color: var(--nv-row-name); font-weight: 600; font-size: 12px; }
        .nv-legend-row .desc { color: var(--nv-text-faint); font-size: 11px; }
        .nv-legend-row .count {
            text-align: right;
            font-variant-numeric: tabular-nums;
            color: var(--nv-text-muted);
            background: var(--nv-pill-bg);
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 11px;
        }
        .nv-shape {
            width: 14px; height: 14px;
            display: inline-block;
            box-shadow: 0 0 8px currentColor;
        }
        .nv-shape.box { border-radius: 3px; }
        .nv-shape.dot { border-radius: 50%; }
        .nv-shape.dot.small { width: 8px; height: 8px; }
        .nv-shape.diamond {
            transform: rotate(45deg);
            border-radius: 2px;
        }

        .nv-flow {
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px solid var(--nv-panel-border);
            font-size: 10px;
            color: var(--nv-text-faint);
            line-height: 1.6;
        }
        .nv-flow .nv-flow-title {
            font-size: 10px;
            letter-spacing: 1px;
            color: var(--nv-text-faint);
            margin-bottom: 4px;
            font-weight: 600;
        }
        .nv-flow .chain {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px;
            color: var(--nv-text-muted);
        }
        .nv-flow .chain b { color: var(--nv-text); font-weight: 600; }
        .nv-flow .chain i {
            color: var(--nv-text-faint);
            font-style: normal;
            font-size: 10px;
        }

        .nv-side {
            position: absolute;
            top: 60px; right: 16px;
            width: 320px;
            background: var(--nv-panel-bg);
            border: 1px solid var(--nv-panel-border);
            border-radius: 12px;
            color: var(--nv-text);
            z-index: 5;
            backdrop-filter: blur(8px);
            box-shadow: var(--nv-side-shadow);
        }
        .nv-side-head {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 16px;
            border-bottom: 1px solid var(--nv-panel-border);
        }
        .nv-side-head .nv-side-icon {
            width: 36px; height: 36px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            color: #fff;
        }
        .nv-side-head .nv-pill {
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 6px;
            background: var(--nv-pill-bg);
            color: var(--nv-text-muted);
        }
        .nv-side-head .nv-side-title { font-weight: 600; font-size: 14px; }
        .nv-side-body {
            padding: 14px 16px;
            max-height: 60vh;
            overflow-y: auto;
        }
        .nv-side-body .nv-empty { color: var(--nv-text-muted); font-style: italic; padding: 4px 0; }
        .nv-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
        .nv-rows .k { color: var(--nv-text-faint); font-size: 11px; }
        .nv-rows .v { color: var(--nv-text); font-size: 12px; word-break: break-word; }
    </style>
@endpush

@section('content')
    <div class="nv-shell">
        <div class="nv-topbar">
            <div class="nv-brand">
                <div class="nv-logo">ND</div>
                <span>Network Diagram</span>
            </div>
            <div class="nv-actions">
                <span class="nv-count"><span class="dot"></span>{{ $counts['total'] }} devices</span>
                <button type="button" class="nv-fit" id="nv-fit">
                    <i class="fas fa-expand"></i> Fit All
                </button>
            </div>
        </div>

        <div id="nv-graph"></div>

        <div class="nv-legend" id="nv-legend">
            <div class="nv-legend-title" id="nv-legend-toggle">
                <span>LEGEND &amp; HIERARCHY</span>
                <span class="toggle" id="nv-legend-arrow">&#9662;</span>
            </div>
            <div class="nv-legend-body">
                <div class="nv-legend-rows">
                    <div class="nv-legend-row">
                        <span class="nv-shape box" style="background:#a855f7;color:#a855f7"></span>
                        <span class="name">POP</span>
                        <span class="desc">Point of Presence (site)</span>
                        <span class="count">{{ $counts['pop'] }}</span>
                    </div>
                    <div class="nv-legend-row">
                        <span class="nv-shape box" style="background:#22d3ee;color:#22d3ee"></span>
                        <span class="name">Mikrotik</span>
                        <span class="desc">Router under POP</span>
                        <span class="count">{{ $counts['mikrotik'] }}</span>
                    </div>
                    <div class="nv-legend-row">
                        <span class="nv-shape diamond" style="background:#10b981;color:#10b981"></span>
                        <span class="name">Switch</span>
                        <span class="desc">Optional, between MK &amp; OLT</span>
                        <span class="count">{{ $counts['switch'] }}</span>
                    </div>
                    <div class="nv-legend-row">
                        <span class="nv-shape box" style="background:#3b82f6;color:#3b82f6"></span>
                        <span class="name">OLT</span>
                        <span class="desc">Under MK or Switch</span>
                        <span class="count">{{ $counts['olt'] }}</span>
                    </div>
                    <div class="nv-legend-row">
                        <span class="nv-shape dot" style="background:#ef4444;color:#ef4444"></span>
                        <span class="name">Box</span>
                        <span class="desc">Splitter under OLT</span>
                        <span class="count">{{ $counts['box'] }}</span>
                    </div>
                    <div class="nv-legend-row">
                        <span class="nv-shape dot small" style="background:#f97316;color:#f97316"></span>
                        <span class="name">Customer</span>
                        <span class="desc">Client under Box</span>
                        <span class="count">{{ $counts['client'] }}</span>
                    </div>
                </div>

                <div class="nv-flow">
                    <div class="nv-flow-title">CONNECTION CHAIN</div>
                    <div class="chain">
                        <b style="color:#a855f7">POP</b><i>›</i>
                        <b style="color:#22d3ee">Mikrotik</b><i>›</i>
                        <b style="color:#10b981">[Switch]</b><i>›</i>
                        <b style="color:#3b82f6">OLT</b><i>›</i>
                        <b style="color:#ef4444">Box</b><i>›</i>
                        <b style="color:#f97316">Customer</b>
                    </div>
                    <div style="margin-top:6px;color:#64748b;font-size:10px;">
                        Click any node to see details. Switch layer is optional.
                    </div>
                </div>
            </div>
        </div>

        <div class="nv-side" id="nv-side" style="display:none;">
            <div class="nv-side-head">
                <div class="nv-side-icon" id="nv-side-icon" style="background:#3b82f6;">
                    <i class="fas fa-circle"></i>
                </div>
                <div style="flex:1;">
                    <div class="nv-pill" id="nv-side-pill">DEVICE</div>
                    <div class="nv-side-title" id="nv-side-title">Select a node</div>
                </div>
                <button type="button" class="nv-fit" id="nv-side-close" title="Close"><i class="fas fa-times"></i></button>
            </div>
            <div class="nv-side-body" id="nv-side-body">
                <div class="nv-empty">Click a node to inspect.</div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <link rel="stylesheet" href="https://unpkg.com/vis-network@9.1.9/styles/vis-network.min.css">
    <script src="https://unpkg.com/vis-network@9.1.9/standalone/umd/vis-network.min.js"></script>

    <script>
        (function () {
            const nodesData = @json($nodes);
            const edgesData = @json($edges);
            const infoUrl = "{{ url('admin/diagram-view-info') }}";

            const groupStyles = {
                pop:      { color: '#a855f7', shape: 'box',      glow: '#c084fc' },
                mikrotik: { color: '#22d3ee', shape: 'box',      glow: '#67e8f9' },
                switch:   { color: '#10b981', shape: 'diamond',  glow: '#34d399' },
                olt:      { color: '#3b82f6', shape: 'box',      glow: '#60a5fa' },
                box:      { color: '#ef4444', shape: 'dot',      glow: '#f87171' },
                client:   { color: '#f97316', shape: 'dot',      glow: '#fb923c' },
            };

            const themePalette = {
                light: { label: '#1f2937', edge: 'rgba(100,116,139,0.55)', edgeHi: '#4f46e5' },
                dark:  { label: '#e5e7eb', edge: 'rgba(148,163,184,0.35)', edgeHi: '#6366f1' },
            };

            function isDark() {
                return document.body.classList.contains('dark-theme')
                    || document.documentElement.classList.contains('dark-theme')
                    || localStorage.getItem('darkMode') === 'true';
            }
            function currentPalette() { return themePalette[isDark() ? 'dark' : 'light']; }

            const visNodes = nodesData.map(function (n) {
                const s = groupStyles[n.group] || groupStyles.pop;
                const isSmall = (n.group === 'box' || n.group === 'client');
                const p = currentPalette();

                return {
                    id: n.id,
                    label: isSmall && n.group === 'client' ? '' : n.label,
                    title: n.label,
                    shape: s.shape,
                    size: n.group === 'client' ? 6 : (n.group === 'box' ? 12 : 18),
                    color: {
                        background: s.color,
                        border: s.color,
                        highlight: { background: s.glow, border: s.glow },
                        hover: { background: s.glow, border: s.glow },
                    },
                    font: {
                        color: p.label,
                        size: n.group === 'client' ? 10 : 12,
                        face: 'Nunito Sans, sans-serif',
                        strokeWidth: 0,
                    },
                    borderWidth: 1,
                    shadow: { enabled: true, color: s.color, size: 8, x: 0, y: 0 },
                    level: n.level,
                    customType: n.type,
                    customRid: n.rid,
                };
            });

            const visEdges = edgesData.map(function (e, idx) {
                const p = currentPalette();
                return {
                    id: 'e-' + idx,
                    from: e.from,
                    to: e.to,
                    color: { color: p.edge, highlight: p.edgeHi },
                    dashes: [4, 6],
                    width: 1,
                    smooth: { type: 'cubicBezier', forceDirection: 'horizontal', roundness: 0.45 },
                };
            });

            const container = document.getElementById('nv-graph');
            const data = {
                nodes: new vis.DataSet(visNodes),
                edges: new vis.DataSet(visEdges),
            };
            const options = {
                layout: {
                    hierarchical: {
                        enabled: true,
                        direction: 'LR',
                        sortMethod: 'directed',
                        levelSeparation: 220,
                        nodeSpacing: 28,
                        treeSpacing: 60,
                    },
                },
                physics: { enabled: false },
                interaction: {
                    hover: true,
                    dragNodes: true,
                    zoomView: true,
                    dragView: true,
                    navigationButtons: false,
                    keyboard: false,
                },
                nodes: { borderWidth: 1 },
                edges: { arrows: { to: { enabled: false } } },
            };

            const network = new vis.Network(container, data, options);

            function applyThemeToNetwork() {
                const p = currentPalette();
                const nodeUpdates = data.nodes.get().map(function (n) {
                    return { id: n.id, font: Object.assign({}, n.font, { color: p.label }) };
                });
                data.nodes.update(nodeUpdates);

                const edgeUpdates = data.edges.get().map(function (e) {
                    return { id: e.id, color: { color: p.edge, highlight: p.edgeHi } };
                });
                data.edges.update(edgeUpdates);
            }

            const themeObserver = new MutationObserver(applyThemeToNetwork);
            themeObserver.observe(document.body, { attributes: true, attributeFilter: ['class'] });
            themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });

            network.once('stabilizationIterationsDone', function () {
                network.fit({ animation: { duration: 400, easingFunction: 'easeInOutCubic' } });
            });
            setTimeout(function () {
                network.fit({ animation: { duration: 400, easingFunction: 'easeInOutCubic' } });
            }, 200);

            document.getElementById('nv-fit').addEventListener('click', function () {
                network.fit({ animation: { duration: 400, easingFunction: 'easeInOutCubic' } });
            });
            document.getElementById('nv-side-close').addEventListener('click', function () {
                document.getElementById('nv-side').style.display = 'none';
                network.unselectAll();
            });
            document.getElementById('nv-legend-toggle').addEventListener('click', function () {
                const $legend = document.getElementById('nv-legend');
                const $arrow = document.getElementById('nv-legend-arrow');
                $legend.classList.toggle('collapsed');
                if ($arrow) {
                    $arrow.innerHTML = $legend.classList.contains('collapsed') ? '&#9656;' : '&#9662;';
                }
            });

            const $side = document.getElementById('nv-side');
            const $sideIcon = document.getElementById('nv-side-icon');
            const $sidePill = document.getElementById('nv-side-pill');
            const $sideTitle = document.getElementById('nv-side-title');
            const $sideBody = document.getElementById('nv-side-body');

            network.on('click', function (params) {
                if (!params.nodes || params.nodes.length === 0) {
                    $side.style.display = 'none';
                    return;
                }
                const nodeId = params.nodes[0];
                const node = data.nodes.get(nodeId);
                if (!node) return;

                const type = node.customType;
                const rid = node.customRid;
                const s = groupStyles[type] || groupStyles.pop;

                $side.style.display = 'block';
                $sideIcon.style.background = s.color;
                $sidePill.textContent = type.toUpperCase();
                $sideTitle.textContent = 'Loading...';
                $sideBody.innerHTML = '<div class="nv-empty">Fetching details...</div>';

                $.getJSON(infoUrl + '/' + type + '/' + rid)
                    .done(function (resp) {
                        if (!resp.ok) {
                            $sideTitle.textContent = 'Not found';
                            $sideBody.innerHTML = '<div class="nv-empty">Request failed.</div>';
                            return;
                        }
                        $sideTitle.textContent = resp.data.title;
                        const rows = resp.data.rows || {};
                        const keys = Object.keys(rows);
                        if (keys.length === 0) {
                            $sideBody.innerHTML = '<div class="nv-empty">No information.</div>';
                            return;
                        }
                        let html = '<div class="nv-rows">';
                        keys.forEach(function (k) {
                            html += '<div class="k">' + k + '</div><div class="v">' + (rows[k] === null || rows[k] === undefined || rows[k] === '' ? '-' : rows[k]) + '</div>';
                        });
                        html += '</div>';
                        $sideBody.innerHTML = html;
                    })
                    .fail(function () {
                        $sideTitle.textContent = 'Error';
                        $sideBody.innerHTML = '<div class="nv-empty">Request failed.</div>';
                    });
            });
        })();
    </script>
@endpush