<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kharma_Radar - Over-Watch Dashboard</title>

    <!-- Lucide Icons -->
    <script src="https://cdn.jsdelivr.net/npm/lucide@latest/lucide.js"></script>

    <!-- Leaflet Configuration -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

        :root {
            --bg-deep: #020617;
            --bg-panel: rgba(15, 23, 42, 0.8);
            --border: rgba(51, 65, 85, 0.4);
            --accent: #10b981;
            --accent-glow: rgba(16, 185, 129, 0.3);
            --text-main: #e2e8f0;
            --text-dim: #94a3b8;
            --danger: #ef4444;
            --danger-glow: rgba(239, 68, 68, 0.4);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'JetBrains Mono', monospace;
            background-color: var(--bg-deep);
            color: var(--text-main);
            min-height: screen;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            padding: 1.5rem;
            gap: 1.5rem;
        }

        /* Glassmorphism Classes */
        .glass-panel {
            background: var(--bg-panel);
            backdrop-filter: blur(12px);
            border: 1px solid var(--border);
            border-radius: 0.75rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 2rem;
        }

        .brand h1 {
            font-size: 1.5rem;
            letter-spacing: 0.2em;
            font-weight: 700;
        }

        .brand h1 span {
            color: var(--accent);
        }

        .stats-grid {
            display: flex;
            gap: 2.5rem;
        }

        .stat-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.25rem;
        }

        .stat-label {
            font-size: 0.65rem;
            letter-spacing: 0.1em;
            color: var(--text-dim);
            text-transform: uppercase;
        }

        .stat-value {
            font-weight: 700;
            font-size: 1rem;
        }

        main {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        /* Radar Table Section */
        .dashboard-container {
            display: flex;
            flex-direction: column;
            min-height: 500px;
        }

        .panel-header {
            padding: 1rem 1.5rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(30, 41, 59, 0.3);
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 0.75rem;
        }

        .panel-title {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.8rem;
            letter-spacing: 0.1em;
            color: var(--text-main);
            font-weight: 700;
        }

        .search-box {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            padding: 0.5rem 1rem;
            color: white;
            font-family: inherit;
            font-size: 0.8rem;
            width: 250px;
        }

        .search-box:focus {
            outline: none;
            border-color: var(--accent);
        }

        .table-scroll {
            flex: 1;
            overflow: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.85rem;
        }

        thead {
            position: sticky;
            top: 0;
            background: #0f172a;
            z-index: 10;
        }

        th {
            padding: 1rem 1.5rem;
            color: var(--text-dim);
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.7rem;
            letter-spacing: 0.05em;
        }

        td {
            padding: 0.85rem 1.5rem;
            border-bottom: 1px solid rgba(51, 65, 85, 0.2);
        }

        .row-hover:hover {
            background: rgba(16, 185, 129, 0.05);
        }

        .threat-row {
            background: rgba(239, 68, 68, 0.05);
            border-left: 3px solid var(--danger);
        }

        .threat-row:hover {
            background: rgba(239, 68, 68, 0.1);
        }

        /* Marker & Badges */
        .status-badge {
            padding: 0.25rem 0.65rem;
            border-radius: 0.25rem;
            font-size: 0.7rem;
            font-weight: 700;
            background: #1e293b;
            border: 1px solid var(--border);
        }

        .status-malware {
            color: var(--danger);
            border-color: rgba(239, 68, 68, 0.3);
            background: rgba(239, 68, 68, 0.1);
            animation: pulse-red 2s infinite;
        }

        .kill-btn {
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 0.375rem;
            padding: 0.4rem;
            cursor: pointer;
            color: var(--text-dim);
            transition: all 0.2s;
        }

        .kill-btn:hover {
            color: var(--danger);
            border-color: var(--danger);
            background: rgba(239, 68, 68, 0.1);
        }

        /* Map Section */
        .map-section {
            height: 400px;
            overflow: hidden;
        }

        #radar-map {
            width: 100%;
            height: 100%;
            background: var(--bg-deep);
        }

        /* Leaflet Dark Theme */
        .leaflet-container {
            background: var(--bg-deep) !important;
        }

        .leaflet-layer,
        .leaflet-control-zoom-in,
        .leaflet-control-zoom-out,
        .leaflet-control-attribution {
            filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
        }

        /* Animations */
        @keyframes pulse-red {
            0% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
        }

        .blink {
            animation: blinker 1.5s linear infinite;
        }

        @keyframes blinker {
            50% {
                opacity: 0.1;
            }
        }

        footer {
            text-align: center;
            font-size: 0.65rem;
            color: var(--text-dim);
            padding: 1rem;
        }

        @media (max-width: 1024px) {
            .stats-grid {
                display: none;
            }
        }
    </style>
</head>

<body>

    <header class="glass-panel">
        <div class="brand">
            <h1 class="flex items-center gap-3">
                KHARMA<span>_RADAR</span>
            </h1>
            <div style="font-size: 0.6rem; color: var(--text-dim); margin-top: 2px;">V5.1.2 ENTERPRISE ENDPOINT
                PROTECTION</div>
        </div>

        <div class="stats-grid">
            <div class="stat-item">
                <span class="stat-label">System Status</span>
                <span class="stat-value" style="color: var(--accent); display: flex; align-items: center; gap: 8px;">
                    <div
                        style="width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent);">
                    </div>
                    ONLINE
                </span>
            </div>
            <div class="stat-item">
                <span class="stat-label">Active Sockets</span>
                <span id="conn-count" class="stat-value">0</span>
            </div>
            <div class="stat-item">
                <span class="stat-label">VT Engine</span>
                <span id="vt-status" class="stat-value" style="color: var(--text-dim);">INIT...</span>
            </div>
        </div>
    </header>

    <main>
        <!-- Table Area -->
        <section class="glass-panel dashboard-container">
            <div class="panel-header">
                <div class="panel-title">
                    <i data-lucide="shield-check" style="color: var(--accent); width: 1.25rem;"></i>
                    LIVE PROCESS RADAR
                </div>
                <input type="text" id="filter-input" placeholder="Search processes, IPs, or locations..."
                    class="search-box">
            </div>

            <div class="table-scroll">
                <table>
                    <thead>
                        <tr>
                            <th>Process</th>
                            <th>PID</th>
                            <th>Remote Target</th>
                            <th>Geo-Location</th>
                            <th style="text-align: center;">VT Scan</th>
                            <th>Security Status</th>
                            <th style="text-align: right;">Action</th>
                        </tr>
                    </thead>
                    <tbody id="radar-body">
                        <!-- Polled Data -->
                    </tbody>
                </table>
            </div>
        </section>

        <!-- Map Area -->
        <section class="glass-panel map-section">
            <div class="panel-header">
                <div class="panel-title">
                    <i data-lucide="globe" style="color: var(--accent); width: 1.25rem;"></i>
                    GLOBAL THREAT TELEMETRY
                </div>
            </div>
            <div id="radar-map"></div>
        </section>
    </main>

    <footer>
        KHARMA RADAR v5.1.2 &copy; 2026 INTERNAL ENDPOINT MONITOR. ALL SENSORS ACTIVE.
    </footer>

    <script>
        // Init Icons
        lucide.createIcons();

        const radarBody = document.getElementById('radar-body');
        const connCountElement = document.getElementById('conn-count');
        const filterInput = document.getElementById('filter-input');
        const vtStatusElement = document.getElementById('vt-status');

        let allConnections = [];
        let map;
        let mapMarkers = [];

        // Map Setup
        function initMap() {
            map = L.map('radar-map', {
                zoomControl: false,
                attributionControl: false
            }).setView([20, 0], 2);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
        }

        // Fetch API
        async function updateRadar() {
            try {
                const response = await fetch('/api/radar');
                const json = await response.json();
                if (json.status === 'success') {
                    allConnections = json.data;
                    renderUI();
                }
            } catch (e) {
                console.error("API Leak Error:", e);
            }
        }

        function renderUI() {
            const filter = filterInput.value.toLowerCase();
            let html = "";
            let counter = 0;
            let vtActive = false;

            // Clear Markers
            mapMarkers.forEach(m => map.removeLayer(m));
            mapMarkers = [];

            allConnections.forEach(conn => {
                const searchStr = `${conn.process_name} ${conn.remote_address} ${conn.location}`.toLowerCase();
                if (filter && !searchStr.includes(filter)) return;

                counter++;
                const isThreat = conn.is_malware;
                const rowClass = isThreat ? "threat-row" : "row-hover";

                let vtHtml = '<span style="color: var(--text-dim);">-</span>';
                if (conn.vt_total > 0) {
                    vtActive = true;
                    if (conn.vt_malicious > 0) {
                        vtHtml = `<span style="color: var(--danger); font-weight: bold;" class="blink">${conn.vt_malicious}/${conn.vt_total}</span>`;
                    } else {
                        vtHtml = `<span style="color: var(--accent);">${conn.vt_total} Checks Path</span>`;
                    }
                }

                const statusLabel = isThreat ? "THREAT DETECTED" : conn.status;
                const statusClass = isThreat ? "status-malware" : "";

                html += `
                    <tr class="${rowClass}">
                        <td style="font-weight: 700; color: ${isThreat ? 'var(--danger)' : 'var(--accent)'}">${conn.process_name}</td>
                        <td style="color: var(--text-dim); font-size: 0.75rem;">${conn.pid}</td>
                        <td style="font-family: monospace;">${conn.remote_address}</td>
                        <td style="color: var(--text-dim); font-size: 0.75rem;">${conn.location}</td>
                        <td style="text-align: center;">${vtHtml}</td>
                        <td><span class="status-badge ${statusClass}">${statusLabel}</span></td>
                        <td style="text-align: right;">
                            <button class="kill-btn" onclick="killPID(${conn.pid})">
                                <i data-lucide="zap" style="width: 14px; height: 14px;"></i>
                            </button>
                        </td>
                    </tr>
                `;

                // Add to Map
                if (conn.lat && conn.lon) {
                    const color = isThreat ? '#ef4444' : '#10b981';
                    const marker = L.circleMarker([conn.lat, conn.lon], {
                        radius: isThreat ? 8 : 5,
                        fillColor: color,
                        color: "#000",
                        weight: 1,
                        opacity: 1,
                        fillOpacity: 0.8
                    }).addTo(map);

                    if (isThreat) marker.bindPopup(`<b style="color: red;">MALWARE: ${conn.process_name}</b>`);
                    mapMarkers.push(marker);
                }
            });

            radarBody.innerHTML = html || '<tr><td colspan="7" style="text-align:center; padding: 3rem; color: var(--text-dim);">No active external connections detected. Monitoring sensors idle...</td></tr>';
            connCountElement.innerText = counter;
            vtStatusElement.innerText = vtActive ? "LINKED" : "STANDBY";
            vtStatusElement.style.color = vtActive ? "var(--accent)" : "var(--text-dim)";

            lucide.createIcons();
        }

        async function killPID(pid) {
            if (!confirm("COMMAND CONFIRMATION: Terminate and isolate process " + pid + "?")) return;
            const res = await fetch(`/api/kill/${pid}`, { method: 'DELETE' });
            const data = await res.json();
            alert(data.message);
            updateRadar();
        }

        filterInput.addEventListener('input', renderUI);
        initMap();
        updateRadar();
        setInterval(updateRadar, 2000);
    </script>
</body>

</html>