@extends('layout.app')

@section('content')
<div id="noc-app">
    <canvas id="particle-canvas"></canvas>

    {{-- ═══ HEADER ═══ --}}
    <div class="noc-header">
        <div class="noc-header-inner">
            <div class="noc-device-info">
                <div class="noc-icon-hex">
                    <i class="fa-solid fa-bolt"></i>
                </div>
                <div>
                    <h1 class="noc-title">Mikrotik Analysis</h1>
                    <div class="noc-chips">
                        <span class="noc-chip"><i class="fa-solid fa-server"></i> {{ $nas->shortname }}</span>
                        <span class="noc-chip"><i class="fa-solid fa-network-wired"></i> {{ $nas->nasname }}</span>
                        <span class="noc-chip" id="noc-timer"><i class="fa-regular fa-clock"></i> 0.0s</span>
                    </div>
                </div>
            </div>
            <div class="noc-header-actions">
                <span id="noc-global-status" class="noc-badge noc-badge-scanning">
                    <span class="noc-pulse"></span> Initializing
                </span>
                <button id="btn-rerun" class="noc-btn-primary" onclick="startAnalysis()" disabled>
                    <i class="fa-solid fa-arrows-rotate"></i> Re-run
                </button>
                <a href="{{ route('mikrotiks.index') }}" class="noc-btn-ghost">
                    <i class="fa-solid fa-arrow-left"></i> Back
                </a>
            </div>
        </div>
    </div>

    {{-- ═══ PHASE TIMELINE ═══ --}}
    <div class="phase-bar">
        <div class="phase-step active" id="phase-init">
            <div class="phase-node"><i class="fa-solid fa-power-off"></i></div>
            <span>Initialize</span>
        </div>
        <div class="phase-connector" id="conn-1"></div>
        <div class="phase-step" id="phase-conn">
            <div class="phase-node"><i class="fa-solid fa-plug"></i></div>
            <span>Connection</span>
        </div>
        <div class="phase-connector" id="conn-2"></div>
        <div class="phase-step" id="phase-api">
            <div class="phase-node"><i class="fa-solid fa-key"></i></div>
            <span>API Tests</span>
        </div>
        <div class="phase-connector" id="conn-3"></div>
        <div class="phase-step" id="phase-net">
            <div class="phase-node"><i class="fa-solid fa-satellite-dish"></i></div>
            <span>Network</span>
        </div>
        <div class="phase-connector" id="conn-4"></div>
        <div class="phase-step" id="phase-done">
            <div class="phase-node"><i class="fa-solid fa-flag-checkered"></i></div>
            <span>Complete</span>
        </div>
    </div>

    {{-- ═══ MAIN GRID: TERMINAL + CONNECTION ═══ --}}
    <div class="noc-main-grid">
        {{-- Live Terminal --}}
        <div class="noc-terminal-card">
            <div class="noc-terminal-titlebar">
                <div class="noc-terminal-dots">
                    <span class="dot-r"></span><span class="dot-y"></span><span class="dot-g"></span>
                </div>
                <span class="noc-terminal-label">LIVE ANALYSIS CONSOLE</span>
                <span class="noc-terminal-badge" id="term-line-count">0 lines</span>
            </div>
            <div class="noc-terminal-body" id="terminal-body">
                <div id="terminal-output"></div>
                <div class="noc-cursor" id="terminal-cursor">█</div>
            </div>
        </div>

        {{-- Connection Test Results --}}
        <div class="noc-conn-card">
            <div class="noc-conn-header">
                <i class="fa-solid fa-vial"></i>
                <span>Connection & API Tests</span>
                <span class="noc-conn-counter" id="conn-counter">0 / 0</span>
            </div>
            <div class="noc-conn-body" id="conn-results">
                <div class="noc-conn-placeholder">
                    <div class="noc-radar">
                        <div class="noc-radar-sweep"></div>
                    </div>
                    <p>Waiting for connection tests...</p>
                </div>
            </div>
        </div>
    </div>

    {{-- ═══ QUALITY SCORE ═══ --}}
    <div class="noc-quality-panel" id="card-quality">
        <div class="noc-quality-inner">
            <div class="noc-gauge-wrap">
                <svg class="noc-gauge-svg" viewBox="0 0 200 120" id="quality-gauge-svg">
                    <defs>
                        <linearGradient id="gaugeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
                            <stop offset="0%" style="stop-color:#ef4444"/>
                            <stop offset="25%" style="stop-color:#f59e0b"/>
                            <stop offset="50%" style="stop-color:#eab308"/>
                            <stop offset="75%" style="stop-color:#22c55e"/>
                            <stop offset="100%" style="stop-color:#06b6d4"/>
                        </linearGradient>
                    </defs>
                    <path d="M 20 100 A 80 80 0 0 1 180 100" fill="none" stroke="#1e293b" stroke-width="12" stroke-linecap="round"/>
                    <path d="M 20 100 A 80 80 0 0 1 180 100" fill="none" stroke="url(#gaugeGrad)" stroke-width="12" stroke-linecap="round"
                          stroke-dasharray="251.2" stroke-dashoffset="251.2" id="gauge-arc"/>
                    <text x="100" y="85" text-anchor="middle" class="noc-gauge-score" id="gauge-score">--</text>
                    <text x="100" y="108" text-anchor="middle" class="noc-gauge-label" id="gauge-label">SCANNING</text>
                </svg>
            </div>
            <div class="noc-quality-factors">
                <div class="noc-factor"><div class="noc-factor-label">Latency</div><div class="noc-factor-value" id="qf-latency">--</div></div>
                <div class="noc-factor"><div class="noc-factor-label">Packet Loss</div><div class="noc-factor-value" id="qf-loss">--</div></div>
                <div class="noc-factor"><div class="noc-factor-label">Jitter</div><div class="noc-factor-value" id="qf-jitter">--</div></div>
            </div>
        </div>
    </div>

    {{-- ═══ DIAGNOSTIC GRID ═══ --}}
    <div class="noc-diag-grid">
        @foreach([
            ['key'=>'ping','icon'=>'fa-signal','color'=>'#22d3ee','bg'=>'rgba(6,182,212,0.15)','title'=>'ICMP Ping Analysis','desc'=>'10-packet ping with latency distribution','loading'=>'Sending ICMP packets...'],
            ['key'=>'traceroute','icon'=>'fa-route','color'=>'#a78bfa','bg'=>'rgba(139,92,246,0.15)','title'=>'Traceroute','desc'=>'Network path with hop-by-hop latency','loading'=>'Tracing route to '.$nas->nasname.'...'],
            ['key'=>'ports','icon'=>'fa-ethernet','color'=>'#facc15','bg'=>'rgba(234,179,8,0.15)','title'=>'Port Scanner','desc'=>'Service availability on key ports','loading'=>'Scanning ports...'],
            ['key'=>'dns','icon'=>'fa-globe','color'=>'#4ade80','bg'=>'rgba(34,197,94,0.15)','title'=>'DNS Resolution','desc'=>'Forward & reverse DNS lookup','loading'=>'Resolving DNS records...'],
            ['key'=>'mtu','icon'=>'fa-maximize','color'=>'#fb923c','bg'=>'rgba(251,146,60,0.15)','title'=>'MTU Discovery','desc'=>'Maximum transmission unit path test','loading'=>'Binary search for max MTU...'],
            ['key'=>'routeros','icon'=>'fa-microchip','color'=>'#f472b6','bg'=>'rgba(236,72,153,0.15)','title'=>'RouterOS System Health','desc'=>'Device identity, resources & uptime','loading'=>'Connecting to RouterOS API...'],
        ] as $card)
        <div class="noc-dcard" id="card-{{ $card['key'] }}">
            <div class="noc-dcard-head">
                <div class="noc-dcard-icon" style="background:{{ $card['bg'] }};color:{{ $card['color'] }};"><i class="fa-solid {{ $card['icon'] }}"></i></div>
                <div><div class="noc-dcard-title">{{ $card['title'] }}</div><div class="noc-dcard-desc">{{ $card['desc'] }}</div></div>
                <span class="noc-dcard-status noc-dcard-scanning" id="status-{{ $card['key'] }}"><span class="noc-pulse-sm"></span></span>
            </div>
            <div class="noc-dcard-body">
                <div class="noc-dcard-loading" id="loading-{{ $card['key'] }}"><div class="noc-scan-line"></div><span>{{ $card['loading'] }}</span></div>
                <div class="noc-dcard-result d-none" id="result-{{ $card['key'] }}">
                    @if($card['key'] === 'ping')
                    <div class="noc-ping-stats">
                        <div class="noc-stat"><span class="noc-stat-num" id="ping-avg">--</span><span class="noc-stat-lbl">Avg (ms)</span></div>
                        <div class="noc-stat"><span class="noc-stat-num" id="ping-min">--</span><span class="noc-stat-lbl">Min (ms)</span></div>
                        <div class="noc-stat"><span class="noc-stat-num" id="ping-max">--</span><span class="noc-stat-lbl">Max (ms)</span></div>
                        <div class="noc-stat"><span class="noc-stat-num" id="ping-loss">--</span><span class="noc-stat-lbl">Loss %</span></div>
                        <div class="noc-stat"><span class="noc-stat-num" id="ping-jitter">--</span><span class="noc-stat-lbl">Jitter (ms)</span></div>
                    </div>
                    <div class="noc-sparkline-wrap"><canvas id="ping-chart" height="80"></canvas></div>
                    <div class="noc-ping-bars" id="ping-bars"></div>
                    @elseif($card['key'] === 'traceroute')
                    <div class="noc-trace-wrap"><table class="noc-trace-table"><thead><tr><th>Hop</th><th>Host</th><th>IP</th><th>RTT 1</th><th>RTT 2</th><th>RTT 3</th></tr></thead><tbody id="trace-body"></tbody></table></div>
                    <div class="noc-trace-footer" id="trace-footer"></div>
                    @else
                    <div id="{{ $card['key'] }}-results"></div>
                    @endif
                </div>
            </div>
        </div>
        @endforeach
    </div>

    {{-- ═══ SUMMARY REPORT ═══ --}}
    <div class="noc-summary d-none" id="summary-panel">
        <div class="noc-summary-head">
            <i class="fa-solid fa-clipboard-check"></i>
            <span>Analysis Report</span>
        </div>
        <div class="noc-summary-body" id="summary-body"></div>
    </div>
</div>

<style>
:root {
    --noc-bg: #060a14;
    --noc-surface: #0c1220;
    --noc-surface2: #111827;
    --noc-border: #1e3a5f;
    --noc-border2: #2d4a6f;
    --noc-text: #e2e8f0;
    --noc-text2: #94a3b8;
    --noc-text3: #475569;
    --noc-cyan: #22d3ee;
    --noc-purple: #a78bfa;
    --noc-green: #4ade80;
    --noc-red: #f87171;
    --noc-yellow: #facc15;
    --noc-orange: #fb923c;
    --noc-pink: #f472b6;
    --noc-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
.content-wrapper { background: var(--noc-bg) !important; }
#noc-app { position: relative; font-family: 'Nunito Sans', -apple-system, sans-serif; max-width: 1440px; margin: 0 auto; padding: 16px; }
#particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.5; }
#noc-app > *:not(#particle-canvas) { position: relative; z-index: 1; }

/* ═══ HEADER ═══ */
.noc-header { background: linear-gradient(135deg, #0a1628 0%, #111d35 100%); border: 1px solid var(--noc-border); border-radius: 16px; padding: 18px 24px; margin-bottom: 16px; position: relative; overflow: hidden; }
.noc-header::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: linear-gradient(90deg, transparent, var(--noc-cyan), var(--noc-purple), transparent); animation: headerGlow 3s ease-in-out infinite; }
@keyframes headerGlow { 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
.noc-header-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.noc-device-info { display:flex; align-items:center; gap:14px; }
.noc-icon-hex { width:50px; height:50px; border-radius:14px; background: linear-gradient(135deg, #0e7490, #6d28d9); display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; box-shadow: 0 0 25px rgba(109,40,217,0.3); animation: iconFloat 4s ease-in-out infinite; }
@keyframes iconFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.noc-title { color:var(--noc-text); font-size:1.4rem; font-weight:800; margin:0; letter-spacing:-0.02em; }
.noc-chips { display:flex; gap:6px; margin-top:5px; flex-wrap:wrap; }
.noc-chip { background:rgba(30,58,95,0.6); color:var(--noc-text2); font-size:0.73rem; padding:3px 9px; border-radius:6px; border:1px solid var(--noc-border); font-family:var(--noc-mono); }
.noc-chip i { margin-right:3px; font-size:0.65rem; }
.noc-header-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.noc-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:20px; font-size:0.78rem; font-weight:700; letter-spacing:0.04em; }
.noc-badge-scanning { background:rgba(234,179,8,0.12); color:var(--noc-yellow); border:1px solid rgba(234,179,8,0.25); }
.noc-badge-complete { background:rgba(34,197,94,0.12); color:var(--noc-green); border:1px solid rgba(34,197,94,0.25); }
.noc-badge-error { background:rgba(239,68,68,0.12); color:var(--noc-red); border:1px solid rgba(239,68,68,0.25); }
.noc-pulse { width:7px; height:7px; border-radius:50%; background:var(--noc-yellow); animation: nocPulse 1.4s ease-in-out infinite; }
@keyframes nocPulse { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(1.5); } }
.noc-pulse-sm { width:6px; height:6px; border-radius:50%; background:var(--noc-yellow); animation: nocPulse 1.4s ease-in-out infinite; display:inline-block; }
.noc-btn-primary { background:linear-gradient(135deg,#0e7490,#6d28d9); color:#fff; border:none; padding:7px 16px; border-radius:10px; font-size:0.82rem; font-weight:700; cursor:pointer; transition:all .25s; display:inline-flex; align-items:center; gap:5px; }
.noc-btn-primary:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 4px 18px rgba(109,40,217,0.35); }
.noc-btn-primary:disabled { opacity:.45; cursor:not-allowed; }
.noc-btn-primary i.spin { animation: nocSpin 1s linear infinite; }
@keyframes nocSpin { to { transform:rotate(360deg); } }
.noc-btn-ghost { background:rgba(30,58,95,0.4); color:var(--noc-text2); border:1px solid var(--noc-border); padding:7px 16px; border-radius:10px; font-size:0.82rem; font-weight:600; cursor:pointer; transition:all .2s; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.noc-btn-ghost:hover { color:var(--noc-text); border-color:var(--noc-border2); text-decoration:none; }

/* ═══ PHASE TIMELINE ═══ */
.phase-bar { display:flex; align-items:center; justify-content:center; gap:0; padding:14px 10px; margin-bottom:16px; background:linear-gradient(135deg,#0a1628,#111d35); border:1px solid var(--noc-border); border-radius:14px; overflow-x:auto; }
.phase-step { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:70px; opacity:.35; transition:all .5s; }
.phase-step.active { opacity:1; }
.phase-step.done { opacity:.8; }
.phase-step.done .phase-node { background:var(--noc-green); color:#000; box-shadow:0 0 15px rgba(74,222,128,0.3); }
.phase-step.active .phase-node { background:var(--noc-cyan); color:#000; box-shadow:0 0 15px rgba(34,211,238,0.4); animation: phaseGlow 1.5s ease-in-out infinite; }
@keyframes phaseGlow { 0%,100%{ box-shadow:0 0 10px rgba(34,211,238,0.3); } 50%{ box-shadow:0 0 25px rgba(34,211,238,0.6); } }
.phase-step.fail .phase-node { background:var(--noc-red); color:#fff; box-shadow:0 0 15px rgba(248,113,113,0.3); }
.phase-node { width:36px; height:36px; border-radius:50%; background:var(--noc-surface2); border:2px solid var(--noc-border); display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--noc-text3); transition:all .5s; }
.phase-step span { color:var(--noc-text3); font-size:0.68rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; }
.phase-step.active span, .phase-step.done span { color:var(--noc-text2); }
.phase-connector { width:50px; height:3px; background:var(--noc-surface2); border-radius:2px; position:relative; overflow:hidden; flex-shrink:0; }
.phase-connector.filled::after { content:''; position:absolute; top:0; left:0; height:100%; width:100%; background:linear-gradient(90deg,var(--noc-cyan),var(--noc-purple)); animation: connFill .6s ease-out forwards; }
@keyframes connFill { from { width:0; } to { width:100%; } }

/* ═══ MAIN GRID ═══ */
.noc-main-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media(max-width:992px){ .noc-main-grid { grid-template-columns:1fr; } }

/* ═══ TERMINAL ═══ */
.noc-terminal-card { background:var(--noc-surface); border:1px solid var(--noc-border); border-radius:14px; overflow:hidden; min-height:340px; display:flex; flex-direction:column; }
.noc-terminal-titlebar { display:flex; align-items:center; gap:10px; padding:10px 16px; background:linear-gradient(90deg,#0c1628,#131f36); border-bottom:1px solid var(--noc-border); }
.noc-terminal-dots { display:flex; gap:5px; }
.dot-r,.dot-y,.dot-g { width:10px; height:10px; border-radius:50%; }
.dot-r { background:#ef4444; }
.dot-y { background:#f59e0b; }
.dot-g { background:#22c55e; }
.noc-terminal-label { color:var(--noc-text2); font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; flex:1; }
.noc-terminal-badge { color:var(--noc-text3); font-size:0.65rem; font-family:var(--noc-mono); }
.noc-terminal-body { flex:1; padding:14px; overflow-y:auto; max-height:380px; background: radial-gradient(ellipse at top, rgba(34,211,238,0.02), transparent 70%); font-family:var(--noc-mono); font-size:0.78rem; line-height:1.6; }
.noc-terminal-body::-webkit-scrollbar { width:4px; }
.noc-terminal-body::-webkit-scrollbar-track { background:var(--noc-surface); }
.noc-terminal-body::-webkit-scrollbar-thumb { background:#334155; border-radius:2px; }
.term-line { opacity:0; animation: termSlide .3s ease-out forwards; }
@keyframes termSlide { from { opacity:0; transform:translateX(-8px); } to { opacity:1; transform:translateX(0); } }
.term-system { color:var(--noc-cyan); }
.term-success { color:var(--noc-green); }
.term-warning { color:var(--noc-yellow); }
.term-danger { color:var(--noc-red); }
.term-info { color:var(--noc-text3); }
.term-dim { color:var(--noc-text3); font-size:0.7rem; }
.term-prefix { color:var(--noc-purple); margin-right:6px; }
.noc-cursor { display:inline; color:var(--noc-cyan); animation: cursorBlink 1s step-end infinite; }
@keyframes cursorBlink { 0%,100%{ opacity:1; } 50%{ opacity:0; } }

/* ═══ CONNECTION TEST PANEL ═══ */
.noc-conn-card { background:var(--noc-surface); border:1px solid var(--noc-border); border-radius:14px; overflow:hidden; min-height:340px; display:flex; flex-direction:column; }
.noc-conn-header { display:flex; align-items:center; gap:8px; padding:12px 18px; background:linear-gradient(90deg,#0c1628,#131f36); border-bottom:1px solid var(--noc-border); color:var(--noc-text); font-size:0.88rem; font-weight:700; }
.noc-conn-header i { color:var(--noc-purple); }
.noc-conn-counter { margin-left:auto; font-family:var(--noc-mono); font-size:0.75rem; color:var(--noc-text3); }
.noc-conn-body { flex:1; padding:14px; overflow-y:auto; max-height:380px; }
.noc-conn-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:200px; gap:16px; color:var(--noc-text3); font-size:0.82rem; }

/* Radar animation */
.noc-radar { width:80px; height:80px; border-radius:50%; border:2px solid var(--noc-border); position:relative; overflow:hidden; }
.noc-radar::before { content:''; position:absolute; top:50%; left:50%; width:1px; height:50%; background:var(--noc-cyan); transform-origin:bottom center; }
.noc-radar-sweep { position:absolute; top:0; left:0; width:100%; height:100%; background:conic-gradient(from 0deg, transparent 0deg, rgba(34,211,238,0.15) 60deg, transparent 60deg); animation: radarSweep 2s linear infinite; border-radius:50%; }
@keyframes radarSweep { to { transform:rotate(360deg); } }

/* Connection step items */
.noc-step { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid rgba(30,58,95,0.3); opacity:0; animation: stepReveal .5s ease-out forwards; position:relative; }
@keyframes stepReveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.noc-step:last-child { border-bottom:none; }
.noc-step-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.noc-step-icon.s-ok { background:rgba(34,197,94,0.15); color:var(--noc-green); }
.noc-step-icon.s-fail { background:rgba(239,68,68,0.12); color:var(--noc-red); }
.noc-step-icon.s-warn { background:rgba(234,179,8,0.12); color:var(--noc-yellow); }
.noc-step-content { flex:1; min-width:0; }
.noc-step-label { color:var(--noc-text); font-size:0.82rem; font-weight:700; }
.noc-step-msg { color:var(--noc-text2); font-size:0.74rem; margin-top:2px; }
.noc-step-meta { display:flex; gap:8px; margin-top:3px; }
.noc-step-time { font-family:var(--noc-mono); font-size:0.65rem; color:var(--noc-text3); }

/* ═══ QUALITY PANEL ═══ */
.noc-quality-panel { background:linear-gradient(135deg,#0a1628,#151c33); border:1px solid var(--noc-border); border-radius:16px; padding:22px 28px; margin-bottom:16px; position:relative; overflow:hidden; }
.noc-quality-panel::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--noc-cyan),transparent); }
.noc-quality-inner { display:flex; align-items:center; justify-content:center; gap:45px; flex-wrap:wrap; }
.noc-gauge-wrap { width:200px; height:120px; }
.noc-gauge-svg { width:100%; height:100%; }
.noc-gauge-score { fill:var(--noc-text); font-size:32px; font-weight:800; font-family:var(--noc-mono); }
.noc-gauge-label { fill:var(--noc-text3); font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; }
.noc-quality-factors { display:flex; gap:28px; }
.noc-factor { text-align:center; }
.noc-factor-label { color:var(--noc-text3); font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; margin-bottom:3px; }
.noc-factor-value { font-family:var(--noc-mono); font-size:0.9rem; font-weight:700; padding:4px 12px; border-radius:8px; background:rgba(30,58,95,0.4); border:1px solid var(--noc-border); color:var(--noc-text); }

/* ═══ DIAGNOSTIC GRID ═══ */
.noc-diag-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:16px; }
@media(max-width:992px){ .noc-diag-grid { grid-template-columns:1fr; } }
.noc-dcard { background:linear-gradient(135deg,#0a1628,#111d35); border:1px solid var(--noc-border); border-radius:14px; overflow:hidden; transition:all .35s; position:relative; }
.noc-dcard::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--noc-border),transparent); transition:background .5s; }
.noc-dcard.card-success::before { background:linear-gradient(90deg,transparent,var(--noc-green),transparent); }
.noc-dcard.card-error::before { background:linear-gradient(90deg,transparent,var(--noc-red),transparent); }
.noc-dcard:hover { border-color:var(--noc-border2); transform:translateY(-2px); box-shadow:0 8px 30px rgba(10,20,40,0.5); }
.noc-dcard-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid rgba(30,58,95,0.4); }
.noc-dcard-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.noc-dcard-title { color:var(--noc-text); font-size:0.88rem; font-weight:700; }
.noc-dcard-desc { color:var(--noc-text3); font-size:0.7rem; margin-top:1px; }
.noc-dcard-status { margin-left:auto; }
.noc-dcard-scanning .noc-pulse-sm { background:var(--noc-yellow); }
.noc-dcard-ok .noc-pulse-sm { background:var(--noc-green); animation:none; }
.noc-dcard-fail .noc-pulse-sm { background:var(--noc-red); animation:none; }
.noc-dcard-body { padding:16px 18px; min-height:110px; }
.noc-dcard-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:90px; color:var(--noc-text3); font-size:0.8rem; }
.noc-scan-line { width:100%; height:2px; background:linear-gradient(90deg,transparent,var(--noc-cyan),transparent); border-radius:2px; animation: scanPulse 2s ease-in-out infinite; }
@keyframes scanPulse { 0%{ opacity:.2; transform:scaleX(.3); } 50%{ opacity:1; transform:scaleX(1); } 100%{ opacity:.2; transform:scaleX(.3); } }
.noc-dcard-result { animation: cardFadeIn .5s ease-out; }
@keyframes cardFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* Ping */
.noc-ping-stats { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.noc-stat { flex:1; min-width:65px; text-align:center; background:rgba(30,58,95,0.3); border:1px solid var(--noc-border); border-radius:10px; padding:9px 5px; }
.noc-stat-num { display:block; font-family:var(--noc-mono); font-size:1.1rem; font-weight:800; color:var(--noc-cyan); }
.noc-stat-lbl { display:block; color:var(--noc-text3); font-size:0.62rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-top:2px; }
.noc-sparkline-wrap { margin-bottom:8px; background:rgba(30,58,95,0.15); border-radius:8px; padding:7px; }
.noc-ping-bars { display:flex; gap:3px; align-items:flex-end; height:28px; }
.noc-ping-bar { flex:1; border-radius:3px 3px 0 0; transition:height .4s; min-width:5px; position:relative; }
.noc-ping-bar:hover::after { content:attr(data-ms); position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); background:#1e293b; color:var(--noc-text); padding:2px 5px; border-radius:4px; font-size:0.6rem; white-space:nowrap; border:1px solid #334155; z-index:5; }

/* Traceroute */
.noc-trace-wrap { max-height:280px; overflow-y:auto; border-radius:8px; }
.noc-trace-wrap::-webkit-scrollbar { width:4px; }
.noc-trace-wrap::-webkit-scrollbar-track { background:var(--noc-surface); }
.noc-trace-wrap::-webkit-scrollbar-thumb { background:#334155; border-radius:2px; }
.noc-trace-table { width:100%; border-collapse:collapse; font-size:0.78rem; }
.noc-trace-table thead th { background:rgba(30,58,95,0.4); color:var(--noc-text2); font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:7px 9px; text-align:left; position:sticky; top:0; z-index:1; }
.noc-trace-table tbody tr { border-bottom:1px solid rgba(30,58,95,0.25); transition:background .2s; }
.noc-trace-table tbody tr:hover { background:rgba(30,58,95,0.25); }
.noc-trace-table td { padding:6px 9px; color:var(--noc-text2); font-family:var(--noc-mono); font-size:0.75rem; }
.noc-trace-table .hop-num { color:var(--noc-text3); font-weight:700; text-align:center; width:35px; }
.noc-trace-table .hop-ip { color:var(--noc-cyan); }
.noc-trace-table .hop-host { color:var(--noc-text2); max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.noc-trace-table .hop-rtt { color:var(--noc-purple); text-align:right; }
.noc-trace-table .hop-timeout { color:var(--noc-text3); }
.noc-trace-table .hop-target { background:rgba(34,211,238,0.05); }
.noc-trace-footer { margin-top:8px; font-size:0.75rem; display:flex; align-items:center; gap:5px; }

/* Port rows */
.noc-port-row { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-radius:8px; margin-bottom:5px; background:rgba(30,58,95,0.18); border:1px solid rgba(30,58,95,0.35); transition:all .2s; }
.noc-port-row:hover { background:rgba(30,58,95,0.3); }
.noc-port-info { display:flex; align-items:center; gap:8px; }
.noc-port-num { font-family:var(--noc-mono); font-size:0.82rem; font-weight:700; color:var(--noc-text); min-width:45px; }
.noc-port-name { color:var(--noc-text2); font-size:0.77rem; }
.noc-port-badge { padding:2px 9px; border-radius:6px; font-size:0.7rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.noc-port-open { background:rgba(34,197,94,0.12); color:var(--noc-green); border:1px solid rgba(34,197,94,0.25); }
.noc-port-closed { background:rgba(239,68,68,0.08); color:var(--noc-red); border:1px solid rgba(239,68,68,0.18); }
.noc-port-ms { font-family:var(--noc-mono); font-size:0.7rem; color:var(--noc-text3); margin-left:6px; }

/* DNS */
.noc-dns-row { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; margin-bottom:5px; background:rgba(30,58,95,0.18); border:1px solid rgba(30,58,95,0.35); }
.noc-dns-type { font-size:0.68rem; font-weight:700; color:var(--noc-green); text-transform:uppercase; letter-spacing:0.06em; min-width:65px; }
.noc-dns-val { font-family:var(--noc-mono); font-size:0.8rem; color:var(--noc-text); flex:1; }
.noc-dns-ms { font-family:var(--noc-mono); font-size:0.7rem; color:var(--noc-text3); }

/* MTU */
.noc-mtu-display { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; padding:14px; }
.noc-mtu-value { font-family:var(--noc-mono); font-size:2.3rem; font-weight:800; }
.noc-mtu-label { color:var(--noc-text3); font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; }
.noc-mtu-bar { width:100%; height:7px; background:#1e293b; border-radius:4px; overflow:hidden; margin-top:8px; }
.noc-mtu-fill { height:100%; border-radius:4px; transition:width 1s ease-out; }

/* RouterOS */
.noc-ros-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
@media(max-width:576px){ .noc-ros-grid { grid-template-columns:1fr; } }
.noc-ros-item { background:rgba(30,58,95,0.2); border:1px solid rgba(30,58,95,0.35); border-radius:10px; padding:10px 12px; }
.noc-ros-label { color:var(--noc-text3); font-size:0.65rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px; }
.noc-ros-value { color:var(--noc-text); font-family:var(--noc-mono); font-size:0.85rem; font-weight:700; }
.noc-ros-bar-wrap { margin-top:5px; }
.noc-ros-bar-bg { width:100%; height:5px; background:#1e293b; border-radius:3px; overflow:hidden; }
.noc-ros-bar-fill { height:100%; border-radius:3px; transition:width 1s ease-out; }
.noc-ros-bar-lbl { display:flex; justify-content:space-between; margin-top:2px; font-size:0.6rem; color:var(--noc-text3); }
.noc-ros-error { text-align:center; padding:18px; color:var(--noc-red); }
.noc-ros-error i { font-size:1.4rem; display:block; margin-bottom:7px; }

/* ═══ SUMMARY ═══ */
.noc-summary { background:linear-gradient(135deg,#0a1628,#111d35); border:1px solid var(--noc-border); border-radius:14px; overflow:hidden; margin-bottom:20px; animation: cardFadeIn .6s ease-out; }
.noc-summary-head { display:flex; align-items:center; gap:8px; padding:14px 20px; background:linear-gradient(90deg,#0c1628,#131f36); border-bottom:1px solid var(--noc-border); color:var(--noc-text); font-size:0.92rem; font-weight:700; }
.noc-summary-head i { color:var(--noc-cyan); }
.noc-summary-body { padding:18px 20px; }
.noc-summary-verdict { display:flex; align-items:center; gap:14px; margin-bottom:16px; padding:14px 18px; border-radius:12px; }
.noc-summary-verdict-icon { font-size:1.8rem; }
.noc-summary-verdict-text { font-size:0.92rem; font-weight:700; }
.noc-summary-verdict-sub { font-size:0.78rem; color:var(--noc-text2); margin-top:2px; }
.noc-summary-findings { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }
.noc-finding { padding:10px 14px; border-radius:10px; background:rgba(30,58,95,0.2); border:1px solid rgba(30,58,95,0.35); font-size:0.78rem; }
.noc-finding i { margin-right:5px; }
.noc-finding.f-ok { color:var(--noc-green); border-color:rgba(34,197,94,0.2); }
.noc-finding.f-warn { color:var(--noc-yellow); border-color:rgba(234,179,8,0.2); }
.noc-finding.f-fail { color:var(--noc-red); border-color:rgba(239,68,68,0.2); }

/* color helpers */
.color-excellent { color:var(--noc-cyan) !important; }
.color-good { color:var(--noc-green) !important; }
.color-fair { color:var(--noc-yellow) !important; }
.color-poor { color:var(--noc-orange) !important; }
.color-critical { color:var(--noc-red) !important; }
</style>
@endsection

@push('js')
<script>
const CONN_TEST_URL = "{{ route('mikrotik.run-connection-test', $nas->id) }}";
const DIAG_URL = "{{ route('mikrotik.run-network-diagnostic', $nas->id) }}";
const NAS_IP = "{{ $nas->nasname }}";

let timerInterval = null;
let timerStart = 0;
let lineCount = 0;
let connTestData = null;
let diagData = null;

/* ════════ PARTICLES ════════ */
(function initParticles() {
    const c = document.getElementById('particle-canvas');
    if (!c) return;
    const ctx = c.getContext('2d');
    let w, h, dots = [];
    function resize() { w = c.width = window.innerWidth; h = c.height = window.innerHeight; }
    resize();
    window.addEventListener('resize', resize);
    for (let i = 0; i < 60; i++) {
        dots.push({ x: Math.random()*w, y: Math.random()*h, vx: (Math.random()-.5)*.3, vy: (Math.random()-.5)*.3, r: Math.random()*1.5+.5 });
    }
    function draw() {
        ctx.clearRect(0,0,w,h);
        dots.forEach(d => {
            d.x += d.vx; d.y += d.vy;
            if (d.x < 0 || d.x > w) d.vx *= -1;
            if (d.y < 0 || d.y > h) d.vy *= -1;
            ctx.beginPath(); ctx.arc(d.x, d.y, d.r, 0, Math.PI*2);
            ctx.fillStyle = 'rgba(34,211,238,0.25)'; ctx.fill();
        });
        for (let i = 0; i < dots.length; i++) {
            for (let j = i+1; j < dots.length; j++) {
                const dx = dots[i].x - dots[j].x, dy = dots[i].y - dots[j].y;
                const dist = Math.sqrt(dx*dx + dy*dy);
                if (dist < 120) {
                    ctx.beginPath(); ctx.moveTo(dots[i].x, dots[i].y); ctx.lineTo(dots[j].x, dots[j].y);
                    ctx.strokeStyle = 'rgba(34,211,238,' + (0.08*(1-dist/120)) + ')'; ctx.stroke();
                }
            }
        }
        requestAnimationFrame(draw);
    }
    draw();
})();

/* ════════ TERMINAL ════════ */
function termLog(text, cls) {
    cls = cls || 'term-info';
    const out = document.getElementById('terminal-output');
    const line = document.createElement('div');
    line.className = 'term-line ' + cls;
    line.innerHTML = '<span class="term-prefix">›</span>' + text;
    out.appendChild(line);
    lineCount++;
    document.getElementById('term-line-count').textContent = lineCount + ' lines';
    const body = document.getElementById('terminal-body');
    body.scrollTop = body.scrollHeight;
}

function termLogDelayed(messages, delay, callback) {
    let i = 0;
    function next() {
        if (i >= messages.length) { if (callback) callback(); return; }
        const m = messages[i++];
        termLog(m.text, m.cls);
        setTimeout(next, delay);
    }
    next();
}

/* ════════ PHASES ════════ */
function setPhase(id, state) {
    const el = document.getElementById(id);
    if (!el) return;
    el.classList.remove('active','done','fail');
    if (state) el.classList.add(state);
}
function fillConnector(id) {
    const el = document.getElementById(id);
    if (el) el.classList.add('filled');
}

/* ════════ TIMER ════════ */
function startTimer() {
    timerStart = Date.now();
    timerInterval = setInterval(() => {
        const s = ((Date.now() - timerStart) / 1000).toFixed(1);
        document.getElementById('noc-timer').innerHTML = '<i class="fa-regular fa-clock"></i> ' + s + 's';
    }, 100);
}
function stopTimer() { clearInterval(timerInterval); }

/* ════════ ANALYSIS FLOW ════════ */
function startAnalysis() {
    const btn = document.getElementById('btn-rerun');
    btn.disabled = true;
    btn.querySelector('i').classList.add('spin');
    lineCount = 0;

    const gs = document.getElementById('noc-global-status');
    gs.className = 'noc-badge noc-badge-scanning';
    gs.innerHTML = '<span class="noc-pulse"></span> Scanning';

    document.getElementById('terminal-output').innerHTML = '';
    document.getElementById('conn-results').innerHTML = '<div class="noc-conn-placeholder"><div class="noc-radar"><div class="noc-radar-sweep"></div></div><p>Running connection tests...</p></div>';
    document.getElementById('conn-counter').textContent = '0 / 0';
    document.getElementById('summary-panel').classList.add('d-none');

    ['ping','traceroute','ports','dns','mtu','routeros'].forEach(s => {
        document.getElementById('loading-' + s).classList.remove('d-none');
        document.getElementById('loading-' + s).innerHTML = '<div class="noc-scan-line"></div><span>Waiting...</span>';
        document.getElementById('result-' + s).classList.add('d-none');
        const st = document.getElementById('status-' + s);
        st.className = 'noc-dcard-status noc-dcard-scanning';
        st.innerHTML = '<span class="noc-pulse-sm"></span>';
        const card = document.getElementById('card-' + s);
        card.className = 'noc-dcard';
    });

    resetQuality();

    ['phase-init','phase-conn','phase-api','phase-net','phase-done'].forEach(p => setPhase(p, null));
    ['conn-1','conn-2','conn-3','conn-4'].forEach(c => { const el=document.getElementById(c); if(el) el.classList.remove('filled'); });
    setPhase('phase-init', 'active');

    startTimer();
    connTestData = null;
    diagData = null;

    termLog('═══ Mikrotik Analysis v2.0 ═══', 'term-system');
    termLog('Target: <strong>' + NAS_IP + '</strong>', 'term-system');
    termLog('Timestamp: ' + new Date().toLocaleString(), 'term-dim');
    termLog('', 'term-info');

    setTimeout(() => {
        termLog('Starting connection test suite...', 'term-system');
        setPhase('phase-init', 'done');
        fillConnector('conn-1');
        setPhase('phase-conn', 'active');

        $.ajax({ url: CONN_TEST_URL, method: 'GET', dataType: 'json', timeout: 120000,
            success: function(data) { connTestData = data; processConnectionResults(data); },
            error: function() {
                termLog('Connection test request failed!', 'term-danger');
                setPhase('phase-conn', 'fail');
                checkAllDone();
            }
        });

        termLog('Starting network diagnostics (parallel)...', 'term-system');

        $.ajax({ url: DIAG_URL, method: 'GET', dataType: 'json', timeout: 120000,
            success: function(data) { diagData = data; processDiagnosticResults(data); },
            error: function() {
                termLog('Network diagnostics request failed!', 'term-danger');
                setPhase('phase-net', 'fail');
                ['ping','traceroute','ports','dns','mtu','routeros'].forEach(s => {
                    document.getElementById('loading-' + s).innerHTML = '<div style="color:var(--noc-red);"><i class="fa-solid fa-triangle-exclamation"></i> Failed</div>';
                });
                checkAllDone();
            }
        });
    }, 600);
}

function processConnectionResults(data) {
    const wrap = document.getElementById('conn-results');
    wrap.innerHTML = '';
    const steps = data.steps || [];
    let done = 0;
    const total = steps.length;
    document.getElementById('conn-counter').textContent = '0 / ' + total;

    const statusIcons = { success: 'fa-check', danger: 'fa-xmark', warning: 'fa-exclamation' };
    const statusClass = { success: 's-ok', danger: 's-fail', warning: 's-warn' };
    const termClass = { success: 'term-success', danger: 'term-danger', warning: 'term-warning' };

    let connPhaseSet = false;
    let apiPhaseSet = false;

    function revealStep(idx) {
        if (idx >= steps.length) {
            fillConnector('conn-3');
            if (data.aborted) { setPhase('phase-api', 'fail'); } else { setPhase('phase-api', 'done'); }
            checkAllDone();
            return;
        }
        try {
            const step = steps[idx];
            done++;
            document.getElementById('conn-counter').textContent = done + ' / ' + total;

            if (!connPhaseSet && (step.id === 'host_ping' || step.id === 'port_check')) {
                // still in connection phase
            }
            if (!apiPhaseSet && step.id !== 'host_ping' && step.id !== 'port_check') {
                setPhase('phase-conn', 'done');
                fillConnector('conn-2');
                setPhase('phase-api', 'active');
                apiPhaseSet = true;
            }

            const el = document.createElement('div');
            el.className = 'noc-step';
            el.style.animationDelay = '0s';
            el.innerHTML =
                '<div class="noc-step-icon ' + (statusClass[step.status]||'s-ok') + '"><i class="fa-solid ' + (statusIcons[step.status]||'fa-check') + '"></i></div>' +
                '<div class="noc-step-content">' +
                    '<div class="noc-step-label">' + step.label + '</div>' +
                    '<div class="noc-step-msg">' + step.message + '</div>' +
                    '<div class="noc-step-meta"><span class="noc-step-time"><i class="fa-regular fa-clock"></i> ' + (step.duration_ms||0) + 'ms</span></div>' +
                '</div>';
            wrap.appendChild(el);
            wrap.scrollTop = wrap.scrollHeight;

            const icon = step.status === 'success' ? '✓' : step.status === 'warning' ? '⚠' : '✗';
            termLog(icon + ' <strong>' + step.label + '</strong>: ' + step.message + ' <span class="term-dim">(' + (step.duration_ms||0) + 'ms)</span>', termClass[step.status] || 'term-info');
        } catch(e) {
            console.error('Connection step render error at index ' + idx, e);
            termLog('Error rendering step ' + idx, 'term-danger');
        }
        setTimeout(() => revealStep(idx + 1), 180);
    }

    termLog('', 'term-info');
    termLog('─── Connection Test Results ───', 'term-system');
    setTimeout(() => revealStep(0), 200);
}

function processDiagnosticResults(data) {
    setPhase('phase-net', 'active');
    if (!document.getElementById('phase-api').classList.contains('done') && !document.getElementById('phase-api').classList.contains('fail')) {
        // API phase not done yet, diagnostics arrived first
    }
    fillConnector('conn-3');

    termLog('', 'term-info');
    termLog('─── Network Diagnostic Results ───', 'term-system');

    const sections = [
        { key:'ping', fn: renderPing, label:'ICMP Ping' },
        { key:'traceroute', fn: renderTraceroute, label:'Traceroute' },
        { key:'ports', fn: renderPorts, label:'Port Scan' },
        { key:'dns', fn: renderDns, label:'DNS Resolution' },
        { key:'mtu', fn: renderMtu, label:'MTU Discovery' },
        { key:'routeros', fn: renderRouterOs, label:'RouterOS Health' },
    ];

    let i = 0;
    function revealNext() {
        if (i >= sections.length) {
            try { if (data.quality) renderQuality(data.quality); } catch(e) { console.error('Quality render error', e); }
            setPhase('phase-net', 'done');
            fillConnector('conn-4');
            checkAllDone();
            return;
        }
        const sec = sections[i++];
        termLog('Processing: <strong>' + sec.label + '</strong>...', 'term-system');
        try {
            if (data[sec.key]) {
                sec.fn(data[sec.key]);
            } else {
                document.getElementById('loading-' + sec.key).innerHTML = '<div style="color:var(--noc-red);">No data received</div>';
                showDiagResult(sec.key, 'fail');
            }
        } catch(e) {
            console.error('Render error for ' + sec.key, e);
            termLog('  Error rendering ' + sec.label, 'term-danger');
            document.getElementById('loading-' + sec.key).classList.add('d-none');
            document.getElementById('result-' + sec.key).classList.remove('d-none');
            document.getElementById('result-' + sec.key).innerHTML = '<div style="color:var(--noc-red);text-align:center;padding:12px;"><i class="fa-solid fa-triangle-exclamation"></i> Render error</div>';
            showDiagResult(sec.key, 'fail');
        }
        setTimeout(revealNext, 250);
    }
    setTimeout(revealNext, 300);
}

function checkAllDone() {
    if (connTestData !== null && diagData !== null) {
        setTimeout(finalize, 400);
    } else if (connTestData !== null && document.getElementById('phase-net').classList.contains('fail')) {
        setTimeout(finalize, 400);
    } else if (diagData !== null && (document.getElementById('phase-conn').classList.contains('fail') || document.getElementById('phase-api').classList.contains('fail'))) {
        setTimeout(finalize, 400);
    }
}

function finalize() {
    stopTimer();
    setPhase('phase-done', 'done');

    const gs = document.getElementById('noc-global-status');
    const hasErrors = (connTestData && connTestData.aborted) ||
        (connTestData && connTestData.steps && connTestData.steps.some(s => s.status === 'danger')) ||
        (!diagData);

    if (hasErrors) {
        gs.className = 'noc-badge noc-badge-error';
        gs.innerHTML = '<span class="noc-pulse" style="background:var(--noc-red);animation:none;"></span> Issues Found';
    } else {
        gs.className = 'noc-badge noc-badge-complete';
        gs.innerHTML = '<span class="noc-pulse" style="background:var(--noc-green);animation:none;"></span> Complete';
    }

    termLog('', 'term-info');
    termLog('═══ Analysis Complete ═══', 'term-system');
    const elapsed = ((Date.now() - timerStart) / 1000).toFixed(1);
    termLog('Total time: ' + elapsed + 's', 'term-dim');

    const btn = document.getElementById('btn-rerun');
    btn.disabled = false;
    btn.querySelector('i').classList.remove('spin');

    generateSummary();
}

/* ════════ DIAGNOSTIC RENDERERS ════════ */
function showDiagResult(section, status) {
    document.getElementById('loading-' + section).classList.add('d-none');
    document.getElementById('result-' + section).classList.remove('d-none');
    const st = document.getElementById('status-' + section);
    const card = document.getElementById('card-' + section);
    if (status === 'ok') {
        st.className = 'noc-dcard-status noc-dcard-ok'; st.innerHTML = '<span class="noc-pulse-sm" style="background:var(--noc-green);"></span>';
        card.classList.add('card-success');
    } else {
        st.className = 'noc-dcard-status noc-dcard-fail'; st.innerHTML = '<span class="noc-pulse-sm" style="background:var(--noc-red);"></span>';
        card.classList.add('card-error');
    }
}

function renderPing(d) {
    const ok = d.packets_received > 0;
    document.getElementById('ping-avg').textContent = d.rtt_avg;
    document.getElementById('ping-min').textContent = d.rtt_min;
    document.getElementById('ping-max').textContent = d.rtt_max;
    document.getElementById('ping-loss').textContent = d.loss_percent;
    document.getElementById('ping-jitter').textContent = d.rtt_stddev;

    const avgEl = document.getElementById('ping-avg');
    avgEl.style.color = d.rtt_avg <= 30 ? 'var(--noc-green)' : d.rtt_avg <= 100 ? 'var(--noc-yellow)' : 'var(--noc-red)';
    const lossEl = document.getElementById('ping-loss');
    lossEl.style.color = d.loss_percent == 0 ? 'var(--noc-green)' : d.loss_percent <= 5 ? 'var(--noc-yellow)' : 'var(--noc-red)';

    termLog('  Ping: avg=' + d.rtt_avg + 'ms, loss=' + d.loss_percent + '%', ok ? 'term-success' : 'term-danger');
    showDiagResult('ping', ok ? 'ok' : 'fail');

    if (d.replies && d.replies.length > 0) {
        setTimeout(() => { drawPingChart(d.replies); renderPingBars(d.replies, d.rtt_max); }, 60);
    }
}

function drawPingChart(replies) {
    const canvas = document.getElementById('ping-chart');
    if (!canvas) return;
    const parent = canvas.parentElement;
    const w = Math.max(parent.clientWidth - 14, 200), h = 80;
    canvas.width = w; canvas.height = h;
    canvas.style.display = 'block'; canvas.style.background = 'transparent';
    const ctx = canvas.getContext('2d');
    const times = replies.map(r => r.time);
    const rawMin = Math.min(...times), rawMax = Math.max(...times);
    const pad = Math.max((rawMax-rawMin)*.3, rawMax*.1, .5);
    const lo = rawMin-pad, hi = rawMax+pad, range = hi-lo||1;
    const step = w/(times.length-1||1);
    const calcY = t => h-10-((t-lo)/range)*(h-20);

    ctx.beginPath(); ctx.moveTo(0,h);
    times.forEach((t,i) => ctx.lineTo(i*step, calcY(t)));
    ctx.lineTo(w,h); ctx.closePath();
    const grad = ctx.createLinearGradient(0,0,0,h);
    grad.addColorStop(0,'rgba(34,211,238,0.25)'); grad.addColorStop(1,'rgba(34,211,238,0.02)');
    ctx.fillStyle = grad; ctx.fill();

    ctx.beginPath();
    times.forEach((t,i) => { const x=i*step; if(i===0) ctx.moveTo(x,calcY(t)); else ctx.lineTo(x,calcY(t)); });
    ctx.strokeStyle='var(--noc-cyan)'; ctx.lineWidth=2.5; ctx.lineJoin='round'; ctx.lineCap='round'; ctx.stroke();

    times.forEach((t,i) => {
        const x=i*step, y=calcY(t);
        ctx.beginPath(); ctx.arc(x,y,4,0,Math.PI*2); ctx.fillStyle='#22d3ee'; ctx.fill();
        ctx.beginPath(); ctx.arc(x,y,2,0,Math.PI*2); ctx.fillStyle='#0a1628'; ctx.fill();
    });
}

function renderPingBars(replies, maxRtt) {
    const wrap = document.getElementById('ping-bars');
    wrap.innerHTML = '';
    const max = maxRtt || 1;
    replies.forEach(r => {
        const pct = Math.max((r.time/max)*100, 5);
        let color = 'var(--noc-green)';
        if (r.time > 100) color = 'var(--noc-red)';
        else if (r.time > 50) color = 'var(--noc-yellow)';
        else if (r.time > 20) color = 'var(--noc-cyan)';
        const bar = document.createElement('div');
        bar.className = 'noc-ping-bar'; bar.style.height = pct+'%'; bar.style.background = color;
        bar.setAttribute('data-ms', r.time+'ms');
        wrap.appendChild(bar);
    });
}

function renderTraceroute(d) {
    const body = document.getElementById('trace-body');
    body.innerHTML = '';
    d.hops.forEach(hop => {
        const isTarget = hop.ip === NAS_IP;
        const tr = document.createElement('tr');
        if (isTarget) tr.className = 'hop-target';
        const rttHtml = probes => {
            if (!probes || !probes.length) return '<td class="hop-timeout">*</td><td class="hop-timeout">*</td><td class="hop-timeout">*</td>';
            let h = '';
            for (let i=0;i<3;i++) { h += probes[i] !== undefined ? '<td class="hop-rtt">'+probes[i].toFixed(1)+' ms</td>' : '<td class="hop-timeout">*</td>'; }
            return h;
        };
        tr.innerHTML = '<td class="hop-num">'+hop.hop+'</td><td class="hop-host">'+(hop.hostname!==hop.ip?hop.hostname:'--')+'</td><td class="hop-ip">'+hop.ip+'</td>'+rttHtml(hop.probes);
        body.appendChild(tr);
    });
    const footer = document.getElementById('trace-footer');
    footer.innerHTML = d.target_reached
        ? '<span style="color:var(--noc-green);"><i class="fa-solid fa-check-circle"></i> Target reached in '+d.hops.length+' hops</span>'
        : '<span style="color:var(--noc-orange);"><i class="fa-solid fa-exclamation-circle"></i> Target may not have been reached ('+d.hops.length+' hops)</span>';
    termLog('  Traceroute: ' + d.hops.length + ' hops, target ' + (d.target_reached ? 'reached' : 'not reached'), d.target_reached ? 'term-success' : 'term-warning');
    showDiagResult('traceroute', d.target_reached ? 'ok' : 'fail');
}

function renderPorts(ports) {
    const wrap = document.getElementById('ports-results');
    wrap.innerHTML = '';
    let anyOpen = false;
    ports.forEach(p => {
        if (p.status === 'open') anyOpen = true;
        const row = document.createElement('div');
        row.className = 'noc-port-row';
        row.innerHTML = '<div class="noc-port-info"><span class="noc-port-num">:'+p.port+'</span><span class="noc-port-name">'+p.name+'</span></div><div><span class="noc-port-badge '+(p.status==='open'?'noc-port-open':'noc-port-closed')+'">'+(p.status==='open'?'<i class="fa-solid fa-lock-open"></i> Open':'<i class="fa-solid fa-lock"></i> Closed')+'</span>'+(p.response_ms?'<span class="noc-port-ms">'+p.response_ms+'ms</span>':'')+'</div>';
        wrap.appendChild(row);
    });
    const openCount = ports.filter(p=>p.status==='open').length;
    termLog('  Ports: ' + openCount + '/' + ports.length + ' open', anyOpen ? 'term-success' : 'term-warning');
    showDiagResult('ports', anyOpen ? 'ok' : 'fail');
}

function renderDns(d) {
    const wrap = document.getElementById('dns-results');
    wrap.innerHTML = '';
    const addRow = (type,value,ms) => {
        const row = document.createElement('div'); row.className = 'noc-dns-row';
        row.innerHTML = '<span class="noc-dns-type">'+type+'</span><span class="noc-dns-val">'+(value||'N/A')+'</span>'+(ms!==null?'<span class="noc-dns-ms">'+ms+'ms</span>':'');
        wrap.appendChild(row);
    };
    addRow('Host', d.host, null);
    if (!d.is_ip) addRow('Forward (A)', d.forward_ip, d.forward_ms);
    addRow('Reverse (PTR)', d.reverse_hostname || 'No PTR record', d.reverse_ms);
    if (d.dns_records && d.dns_records.length > 0) d.dns_records.forEach(r => addRow(r.type, r.value+' (TTL: '+r.ttl+')', null));
    if (d.is_ip) { const n=document.createElement('div'); n.style.cssText='margin-top:7px;font-size:0.72rem;color:var(--noc-text3);padding:0 12px;'; n.textContent='Host is an IP address — forward DNS lookup not applicable.'; wrap.appendChild(n); }
    if (d.ip_owner) {
        const os=document.createElement('div'); os.style.cssText='margin-top:10px;padding:12px;background:rgba(34,211,238,0.05);border:1px solid rgba(34,211,238,0.12);border-radius:10px;';
        let oh='<div style="font-size:0.7rem;font-weight:700;color:var(--noc-cyan);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;"><i class="fa-solid fa-building"></i> IP Owner</div>';
        [{l:'Organization',v:d.ip_owner.org_name},{l:'Network Name',v:d.ip_owner.net_name},{l:'Country',v:d.ip_owner.country},{l:'Range',v:d.ip_owner.network_range},{l:'Description',v:d.ip_owner.description}].forEach(f=>{
            if(f.v) oh+='<div style="display:flex;align-items:center;gap:7px;padding:3px 0;border-bottom:1px solid rgba(30,58,95,0.25);"><span style="font-size:0.68rem;font-weight:600;color:var(--noc-text3);min-width:90px;">'+f.l+'</span><span style="font-family:var(--noc-mono);font-size:0.78rem;color:var(--noc-text);font-weight:600;">'+f.v+'</span></div>';
        });
        os.innerHTML=oh; wrap.appendChild(os);
    }
    termLog('  DNS: ' + (d.host || NAS_IP) + ' resolved', 'term-success');
    showDiagResult('dns', 'ok');
}

function renderMtu(d) {
    const wrap = document.getElementById('mtu-results');
    const pct = Math.min((d.max_mtu/1500)*100, 100);
    let colorClass='color-good', barColor='#4ade80', statusText='Good';
    if (d.status==='optimal') { colorClass='color-excellent'; barColor='#22d3ee'; statusText='Optimal — No fragmentation'; }
    else if (d.status==='ok') { colorClass='color-good'; barColor='#4ade80'; statusText='Good — Minor overhead'; }
    else if (d.status==='degraded') { colorClass='color-fair'; barColor='#facc15'; statusText='Degraded — Possible tunnel overhead'; }
    else { colorClass='color-critical'; barColor='#f87171'; statusText='Poor — Significant fragmentation risk'; }
    wrap.innerHTML = '<div class="noc-mtu-display"><div class="noc-mtu-value '+colorClass+'">'+d.max_mtu+'</div><div class="noc-mtu-label">Max MTU (bytes)</div><div style="font-size:0.75rem;color:var(--noc-text2);margin-top:3px;">'+statusText+'</div><div class="noc-mtu-bar"><div class="noc-mtu-fill" style="width:'+pct+'%;background:'+barColor+';"></div></div><div style="display:flex;justify-content:space-between;width:100%;font-size:0.62rem;color:var(--noc-text3);margin-top:2px;"><span>500</span><span>1000</span><span>1500</span></div></div>';
    termLog('  MTU: ' + d.max_mtu + ' bytes (' + d.status + ')', d.status!=='poor' ? 'term-success' : 'term-warning');
    showDiagResult('mtu', d.status!=='poor' ? 'ok' : 'fail');
}

function renderRouterOs(d) {
    const wrap = document.getElementById('routeros-results');
    if (!d.connected) {
        wrap.innerHTML = '<div class="noc-ros-error"><i class="fa-solid fa-plug-circle-xmark"></i><div>Could not connect to RouterOS API</div><div style="font-size:0.72rem;color:var(--noc-text2);margin-top:3px;">'+(d.error||'Connection failed')+'</div></div>';
        termLog('  RouterOS: Connection failed', 'term-danger');
        showDiagResult('routeros', 'fail');
        return;
    }
    const fmtB = b => { if(!b) return '0 B'; const mb=b/(1024*1024); return mb>=1024?(mb/1024).toFixed(1)+' GB':mb.toFixed(0)+' MB'; };
    const cpuC = d.cpu_load<=50?'var(--noc-green)':d.cpu_load<=80?'var(--noc-yellow)':'var(--noc-red)';
    const memC = d.memory_used_percent<=60?'var(--noc-green)':d.memory_used_percent<=85?'var(--noc-yellow)':'var(--noc-red)';
    const hddC = d.hdd_used_percent<=70?'var(--noc-green)':d.hdd_used_percent<=90?'var(--noc-yellow)':'var(--noc-red)';
    wrap.innerHTML =
        '<div class="noc-ros-grid">' +
        '<div class="noc-ros-item"><div class="noc-ros-label">Identity</div><div class="noc-ros-value" style="color:var(--noc-cyan);">'+d.identity+'</div></div>' +
        '<div class="noc-ros-item"><div class="noc-ros-label">RouterOS</div><div class="noc-ros-value">'+d.version+'</div></div>' +
        '<div class="noc-ros-item"><div class="noc-ros-label">Uptime</div><div class="noc-ros-value" style="color:var(--noc-purple);">'+d.uptime+'</div></div>' +
        '<div class="noc-ros-item"><div class="noc-ros-label">Board</div><div class="noc-ros-value">'+d.board+'</div></div>' +
        '<div class="noc-ros-item"><div class="noc-ros-label">Arch</div><div class="noc-ros-value">'+d.architecture+'</div></div>' +
        '<div class="noc-ros-item"><div class="noc-ros-label">CPU Cores</div><div class="noc-ros-value">'+d.cpu_count+'</div></div>' +
        '<div class="noc-ros-item" style="grid-column:span 2;"><div class="noc-ros-label">CPU Load</div><div class="noc-ros-value" style="color:'+cpuC+';">'+d.cpu_load+'%</div><div class="noc-ros-bar-wrap"><div class="noc-ros-bar-bg"><div class="noc-ros-bar-fill" style="width:'+d.cpu_load+'%;background:'+cpuC+';"></div></div></div></div>' +
        '<div class="noc-ros-item"><div class="noc-ros-label">Memory</div><div class="noc-ros-value" style="color:'+memC+';">'+d.memory_used_percent+'%</div><div class="noc-ros-bar-wrap"><div class="noc-ros-bar-bg"><div class="noc-ros-bar-fill" style="width:'+d.memory_used_percent+'%;background:'+memC+';"></div></div><div class="noc-ros-bar-lbl"><span>'+fmtB(d.memory_free)+' free</span><span>'+fmtB(d.memory_total)+' total</span></div></div></div>' +
        '<div class="noc-ros-item"><div class="noc-ros-label">Storage</div><div class="noc-ros-value" style="color:'+hddC+';">'+d.hdd_used_percent+'%</div><div class="noc-ros-bar-wrap"><div class="noc-ros-bar-bg"><div class="noc-ros-bar-fill" style="width:'+d.hdd_used_percent+'%;background:'+hddC+';"></div></div><div class="noc-ros-bar-lbl"><span>'+fmtB(d.hdd_free)+' free</span><span>'+fmtB(d.hdd_total)+' total</span></div></div></div>' +
        '</div>';
    termLog('  RouterOS: ' + d.identity + ' v' + d.version + ', CPU ' + d.cpu_load + '%', 'term-success');
    showDiagResult('routeros', 'ok');
}

/* ════════ QUALITY GAUGE ════════ */
function resetQuality() {
    document.getElementById('gauge-arc').style.strokeDashoffset = '251.2';
    document.getElementById('gauge-arc').style.transition = 'none';
    document.getElementById('gauge-score').textContent = '--';
    document.getElementById('gauge-label').textContent = 'SCANNING';
    document.getElementById('gauge-label').setAttribute('fill', 'var(--noc-text3)');
    ['qf-latency','qf-loss','qf-jitter'].forEach(id => { const e=document.getElementById(id); e.textContent='--'; e.className='noc-factor-value'; });
}

function renderQuality(d) {
    const arc = document.getElementById('gauge-arc');
    arc.style.transition = 'stroke-dashoffset 1.5s ease-out';
    arc.style.strokeDashoffset = 251.2 - (251.2 * d.score / 100);
    document.getElementById('gauge-score').textContent = d.score;
    document.getElementById('gauge-label').textContent = d.rating.toUpperCase();
    const rc = { 'Excellent':'#22d3ee','Good':'#4ade80','Fair':'#facc15','Poor':'#fb923c','Critical':'#f87171' };
    document.getElementById('gauge-label').setAttribute('fill', rc[d.rating]||'#64748b');
    const fm = { perfect:{t:'Perfect',c:'color-excellent'}, good:{t:'Good',c:'color-good'}, fair:{t:'Fair',c:'color-fair'}, poor:{t:'Poor',c:'color-critical'}, 'N/A':{t:'N/A',c:'color-critical'}, total_loss:{t:'Total Loss',c:'color-critical'} };
    ['latency','loss','jitter'].forEach(f => {
        const el=document.getElementById('qf-'+f);
        const info=fm[d.factors[f]]||{t:d.factors[f],c:''};
        el.textContent=info.t; el.className='noc-factor-value '+info.c;
    });
    termLog('  Quality Score: ' + d.score + '/100 (' + d.rating + ')', d.score >= 70 ? 'term-success' : d.score >= 40 ? 'term-warning' : 'term-danger');
}

/* ════════ SUMMARY GENERATION ════════ */
function generateSummary() {
    const panel = document.getElementById('summary-panel');
    const body = document.getElementById('summary-body');
    panel.classList.remove('d-none');

    const findings = [];
    let totalOk = 0, totalFail = 0, totalWarn = 0;

    if (connTestData && connTestData.steps) {
        connTestData.steps.forEach(s => {
            if (s.status === 'success') totalOk++;
            else if (s.status === 'danger') { totalFail++; findings.push({ cls:'f-fail', icon:'fa-xmark', text: s.label + ': ' + s.message }); }
            else { totalWarn++; findings.push({ cls:'f-warn', icon:'fa-exclamation', text: s.label + ': ' + s.message }); }
        });
    }
    if (connTestData && connTestData.aborted) {
        findings.push({ cls:'f-fail', icon:'fa-ban', text: 'Connection test aborted: ' + (connTestData.abort_reason||'Unknown') });
    }

    if (diagData) {
        if (diagData.ping) {
            if (diagData.ping.loss_percent > 5) findings.push({ cls:'f-fail', icon:'fa-xmark', text: 'High packet loss: ' + diagData.ping.loss_percent + '%' });
            else if (diagData.ping.rtt_avg > 100) findings.push({ cls:'f-warn', icon:'fa-exclamation', text: 'High latency: ' + diagData.ping.rtt_avg + 'ms avg' });
            else findings.push({ cls:'f-ok', icon:'fa-check', text: 'Ping healthy: ' + diagData.ping.rtt_avg + 'ms avg, ' + diagData.ping.loss_percent + '% loss' });
        }
        if (diagData.traceroute) {
            findings.push(diagData.traceroute.target_reached
                ? { cls:'f-ok', icon:'fa-check', text: 'Route verified: ' + diagData.traceroute.hops.length + ' hops' }
                : { cls:'f-warn', icon:'fa-exclamation', text: 'Route incomplete: target may not be reached' });
        }
        if (diagData.mtu && diagData.mtu.status === 'poor') findings.push({ cls:'f-fail', icon:'fa-xmark', text: 'MTU degraded: ' + diagData.mtu.max_mtu + ' bytes' });
        if (diagData.routeros) {
            if (diagData.routeros.connected) {
                if (diagData.routeros.cpu_load > 80) findings.push({ cls:'f-warn', icon:'fa-exclamation', text: 'High CPU load: ' + diagData.routeros.cpu_load + '%' });
                if (diagData.routeros.memory_used_percent > 85) findings.push({ cls:'f-warn', icon:'fa-exclamation', text: 'High memory usage: ' + diagData.routeros.memory_used_percent + '%' });
                if (diagData.routeros.cpu_load <= 80 && diagData.routeros.memory_used_percent <= 85) findings.push({ cls:'f-ok', icon:'fa-check', text: 'RouterOS healthy: CPU ' + diagData.routeros.cpu_load + '%, MEM ' + diagData.routeros.memory_used_percent + '%' });
            } else {
                findings.push({ cls:'f-fail', icon:'fa-xmark', text: 'RouterOS API connection failed' });
            }
        }
    }

    const total = totalOk + totalFail + totalWarn;
    let verdictCls, verdictIcon, verdictText, verdictSub;
    if (totalFail === 0 && totalWarn === 0) {
        verdictCls = 'background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.2);';
        verdictIcon = '<i class="fa-solid fa-shield-check" style="color:var(--noc-green);"></i>';
        verdictText = 'All Systems Operational';
        verdictSub = totalOk + '/' + total + ' connection tests passed. No issues detected.';
    } else if (totalFail > 0) {
        verdictCls = 'background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.18);';
        verdictIcon = '<i class="fa-solid fa-triangle-exclamation" style="color:var(--noc-red);"></i>';
        verdictText = 'Critical Issues Detected';
        verdictSub = totalFail + ' failure(s) and ' + totalWarn + ' warning(s) found. Review findings below.';
    } else {
        verdictCls = 'background:rgba(234,179,8,0.08);border:1px solid rgba(234,179,8,0.18);';
        verdictIcon = '<i class="fa-solid fa-circle-exclamation" style="color:var(--noc-yellow);"></i>';
        verdictText = 'Minor Issues Detected';
        verdictSub = totalWarn + ' warning(s) found. System is mostly functional.';
    }

    body.innerHTML =
        '<div class="noc-summary-verdict" style="' + verdictCls + '">' +
            '<div class="noc-summary-verdict-icon">' + verdictIcon + '</div>' +
            '<div><div class="noc-summary-verdict-text" style="color:var(--noc-text);">' + verdictText + '</div><div class="noc-summary-verdict-sub">' + verdictSub + '</div></div>' +
        '</div>' +
        '<div class="noc-summary-findings">' +
            findings.map(f => '<div class="noc-finding ' + f.cls + '"><i class="fa-solid ' + f.icon + '"></i> ' + f.text + '</div>').join('') +
        '</div>';
}

/* ════════ BOOT ════════ */
$(document).ready(function() { startAnalysis(); });
</script>
@endpush