Blame for static/script.js

/**
 * StatusPilot Ultra Pro v5
 * Logic & Infrastructure Interface
 */

let appData = {
    status: [],
    config: null,
    summary: null
};

let charts = {};
let currentLocationFilter = 'All';
let isAuthPromptShowing = false;

// Global Axios Interceptor for 401s
axios.interceptors.response.use(
    response => response,
    error => {
        if (error.response && error.response.status === 401) {
            console.warn("Session expired or unauthorized. Showing prompt.");
            if (!isAuthPromptShowing) {
                showAuthOverlay();
            }
        }
        return Promise.reject(error);
    }
);

function showAuthOverlay() {
    // Only show if not already visible
    if (isAuthPromptShowing) return;
    
    isAuthPromptShowing = true;
    const overlay = document.getElementById('master-auth-overlay');
    if (overlay) {
        overlay.style.display = 'flex';
        overlay.style.zIndex = "999999"; // Ensure it's on top
    }
    
    const mainApp = document.getElementById('main-app');
    if (mainApp) {
        mainApp.style.filter = 'blur(20px)';
        mainApp.style.opacity = '0.3';
        mainApp.style.pointerEvents = 'none';
    }
}

// Configuration
const REFRESH_INTERVAL = 30000;
const ACCENT_COLOR = '#10b981';
const PRIMARY_COLOR = '#3b82f6';

// --- Initialization ---

async function init() {
    updateClock();
    setInterval(updateClock, 1000);

    const authStatus = await checkAuthStatus();
    if (authStatus.required && !authStatus.authenticated) {
        document.getElementById('master-auth-overlay').style.display = 'flex';
        return;
    }

    unlockDashboard();
    
    const license = await checkLicense();
    if (!license.licensed) {
        document.getElementById('license-overlay').style.display = 'flex';
        return;
    }

    await loadData();
    setInterval(loadData, REFRESH_INTERVAL);
}

async function loadData() {
    try {
        await Promise.all([
            loadConfig(),
            loadSummary(),
            loadStatus()
        ]);
    } catch (err) {
        console.error("Critical Sync Error:", err);
    }
}

// --- Auth & Security ---

async function checkAuthStatus() {
    try {
        const res = await axios.get('/api/auth/status');
        return res.data;
    } catch (err) { return { required: true, authenticated: false }; }
}

async function unlockDashboard() {
    isAuthPromptShowing = false;
    document.getElementById('master-auth-overlay').style.display = 'none';
    const mainApp = document.getElementById('main-app');
    mainApp.style.filter = 'none';
    mainApp.style.opacity = '1';
    mainApp.style.pointerEvents = 'auto';
}

document.getElementById('master-login-btn').onclick = async () => {
    const keyInput = document.getElementById('master-key-input');
    const key = keyInput.value.trim();
    const btn = document.getElementById('master-login-btn');
    const err = document.getElementById('master-error');

    if (!key) return;

    btn.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i> SYNCING...';
    btn.disabled = true;
    err.style.display = 'none';

    try {
        const res = await axios.post('/api/auth/login', { key });
        if (res.data.success) {
            console.log("Login successful, verifying session...");
            // CRITICAL: Wait a moment for the cookie to settle
            setTimeout(async () => {
                const status = await checkAuthStatus();
                if (status.authenticated) {
                    btn.textContent = 'SYNC SUCCESSFUL';
                    unlockDashboard();
                    await init(); // Re-run init to load data
                } else {
                    throw new Error("Session verification failed after login.");
                }
            }, 500);
        } else {
            err.textContent = "Invalid Master Access Key";
            err.style.display = 'block';
            btn.textContent = 'Unlock Data Center';
            btn.disabled = false;
        }
    } catch (e) {
        console.error(e);
        err.textContent = "Security Node Offline or Cookie Blocked";
        err.style.display = 'block';
        btn.textContent = 'Unlock Data Center';
        btn.disabled = false;
    }
};

async function checkLicense() {
    try {
        const res = await axios.get('/api/license/status');
        return res.data;
    } catch (err) { return { licensed: false }; }
}

document.getElementById('activate-btn').onclick = async () => {
    const email = document.getElementById('lic-email').value;
    const key = document.getElementById('lic-key').value;
    try {
        const res = await axios.post('/api/license/activate', { email, key: key.trim().toUpperCase() });
        if (res.data.success) init();
        else {
            const err = document.getElementById('lic-error');
            err.textContent = res.data.message;
            err.style.display = 'block';
        }
    } catch (e) { console.error(e); }
};

// --- Data Fetching ---

async function loadConfig() {
    const res = await axios.get('/api/config');
    appData.config = res.data;
    
    // Fill selects
    const locFilter = document.getElementById('location-filter');
    const toolSelect = document.getElementById('test-tool-select');
    
    const locations = new Set(['All', 'Global']);
    appData.config.services_to_monitor.forEach(s => {
        if(s.location) locations.add(s.location);
    });

    const prevLoc = locFilter.value;
    locFilter.innerHTML = '';
    locations.forEach(loc => {
        const opt = document.createElement('option');
        opt.value = loc; opt.textContent = loc === 'All' ? 'GLOBAL NETWORK' : loc.toUpperCase();
        locFilter.appendChild(opt);
    });
    if(prevLoc) locFilter.value = prevLoc;

    toolSelect.innerHTML = '';
    appData.config.services_to_monitor.forEach(s => {
        const opt = document.createElement('option');
        opt.value = s.name; opt.textContent = s.name;
        toolSelect.appendChild(opt);
    });

    // Populate Management List
    renderManagementList();

    // Settings fields
    document.getElementById('check-interval').value = appData.config.check_interval;
    document.getElementById('alert-mode').value = appData.config.alert_mode || 'SMTP';
    document.getElementById('smtp-user').value = appData.config.smtp_sender || '';
}

function renderManagementList() {
    const list = document.getElementById('manage-svc-list');
    if (!list) return;
    list.innerHTML = '';
    
    appData.config.services_to_monitor.forEach((s, index) => {
        const item = document.createElement('div');
        item.className = 'manage-item';
        item.innerHTML = `
            <div style="display:flex; flex-direction:column;">
                <b style="font-size:0.9rem;">${s.name}</b>
                <span style="font-size:0.7rem; color:var(--text-muted);">${s.url}</span>
            </div>
            <button class="btn-delete" onclick="deleteService(${index}, '${s.name}')">
                <i class="fas fa-trash-alt"></i> REMOVE
            </button>
        `;
        list.appendChild(item);
    });
}

async function deleteService(index, name) {
    if (!confirm(`🚨 DECOMMISSION NODE: Are you sure you want to remove ${name} from active monitoring?`)) return;
    
    try {
        // Switching to POST for decommissioning to avoid DELETE method blocks in cloud proxies
        const res = await axios.post('/api/config/delete', { name });
        if (res.data.status === 'success') {
            console.log(`Node ${name} successfully decommissioned.`);
            await loadConfig();
            await loadStatus();
        } else {
            throw new Error(res.data.message || "Unknown server error");
        }
    } catch (e) { 
        console.error(e);
        const msg = e.response?.data?.message || e.message;
        alert(`OPERATIONAL ERROR: ${msg}\n\nPlease ensure you are logged in and the node still exists.`); 
    }
}

async function loadSummary() {
    const res = await axios.get('/api/summary');
    const s = res.data;
    animateValue('stat-monitors', s.total_monitors);
    animateValue('stat-uptime', s.uptime_pct, '%');
    animateValue('stat-incidents', s.incidents);
    animateValue('stat-latency', s.avg_latency, 'ms');
}

async function loadStatus() {
    const res = await axios.get('/api/status');
    appData.status = res.data;
    renderStatusGrid();
    renderGlobalMatrix();
}

// --- UI Rendering ---

function renderStatusGrid() {
    const grid = document.getElementById('status-grid');
    grid.innerHTML = '';

    const filtered = appData.status.filter(s => currentLocationFilter === 'All' || s.location === currentLocationFilter);

    if (filtered.length === 0) {
        grid.innerHTML = '<div style="text-align:center; padding:3rem; color:var(--text-muted);">No services matching filter.</div>';
        return;
    }

    filtered.forEach(s => {
        const row = document.createElement('div');
        row.className = 'status-row';
        row.onclick = () => openDetails(s.name);

        let timelineHTML = '<div class="uptime-timeline">';
        const history = [...Array(30 - s.timeline.length).fill(null), ...s.timeline];
        history.forEach(state => {
            const cls = state === null ? 'none' : (state ? 'up' : 'down');
            timelineHTML += `<div class="timeline-bar ${cls}"></div>`;
        });
        timelineHTML += '</div>';

        row.innerHTML = `
            <div class="svc-info">
                <h3>${s.name}</h3>
                <span>${s.url}</span>
            </div>
            <div><span class="location-badge">${s.location}</span></div>
            ${timelineHTML}
            <div class="status-text ${s.is_up ? 'up' : 'down'}">${s.is_up ? 'Operational' : 'Major Outage'}</div>
            <div class="latency">${s.latency}ms</div>
        `;
        grid.appendChild(row);
    });
}

function renderGlobalMatrix() {
    const ctx = document.getElementById('globalLatencyMatrix');
    if (!ctx) return;

    const labels = appData.status.map(s => s.name);
    const data = appData.status.map(s => s.latency);

    if (charts.globalMatrix) charts.globalMatrix.destroy();

    charts.globalMatrix = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Latency (ms)',
                data: data,
                backgroundColor: data.map(v => v > 500 ? 'rgba(239, 68, 68, 0.4)' : 'rgba(59, 130, 246, 0.4)'),
                borderColor: data.map(v => v > 500 ? '#ef4444' : '#3b82f6'),
                borderWidth: 1,
                borderRadius: 8
            }]
        },
        options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#94a3b8' } },
                y: { grid: { display: false }, ticks: { color: '#fff', font: { weight: '600' } } }
            }
        }
    });
}

// --- Analytics Modal ---

async function openDetails(name) {
    document.getElementById('modal-title').textContent = name;
    document.getElementById('matrix-modal').style.display = 'block';

    try {
        const res = await axios.get(`/api/history/${encodeURIComponent(name)}`);
        const history = res.data;
        renderMatrixCharts(history);
        renderIncidentLog(history);
    } catch (e) { console.error(e); }
}

function renderMatrixCharts(data) {
    const labels = data.map(d => new Date(d.timestamp).toLocaleTimeString());
    const latencies = data.map(d => d.latency);
    const uptimes = data.map(d => d.is_up ? 100 : 0);

    if (charts.detLat) charts.detLat.destroy();
    if (charts.detUp) charts.detUp.destroy();
    if (charts.detErr) charts.detErr.destroy();

    const chartOps = {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: { 
            x: { grid: { display: false }, ticks: { display: false } },
            y: { grid: { color: 'rgba(255,255,255,0.05)' }, ticks: { color: '#94a3b8' } } 
        }
    };

    charts.detLat = new Chart(document.getElementById('latencyChart'), {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                data: latencies,
                borderColor: PRIMARY_COLOR,
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                fill: true,
                tension: 0.4,
                pointRadius: 0
            }]
        },
        options: chartOps
    });

    charts.detUp = new Chart(document.getElementById('uptimeChart'), {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                data: uptimes,
                borderColor: ACCENT_COLOR,
                backgroundColor: 'rgba(16, 185, 129, 0.1)',
                fill: true,
                stepped: true,
                pointRadius: 0
            }]
        },
        options: { ...chartOps, scales: { ...chartOps.scales, y: { ...chartOps.scales.y, max: 100, min: 0 } } }
    });

    charts.detErr = new Chart(document.getElementById('errorChart'), {
        type: 'doughnut',
        data: {
            labels: ['Success', 'Failure'],
            datasets: [{
                data: [data.filter(d => d.is_up).length, data.filter(d => !d.is_up).length],
                backgroundColor: [ACCENT_COLOR, '#ef4444'],
                borderWidth: 0
            }]
        },
        options: { cutout: '70%', plugins: { legend: { position: 'bottom', labels: { color: '#94a3b8' } } } }
    });
}

function renderIncidentLog(data) {
    const log = document.getElementById('incident-log');
    log.innerHTML = '';
    const fails = data.filter(d => !d.is_up).reverse();
    
    if (fails.length === 0) {
        log.innerHTML = '<p style="color: var(--accent); font-weight: 600;">System is healthy. No recent incidents.</p>';
        return;
    }

    fails.forEach(f => {
        const item = document.createElement('div');
        item.style.padding = '10px 0';
        item.style.borderBottom = '1px solid var(--border)';
        item.innerHTML = `<span style="color:#ef4444; font-weight:700;">DOWN</span> <span style="margin-left:10px;">${new Date(f.timestamp).toLocaleString()}</span>`;
        log.appendChild(item);
    });
}

// --- Helpers & Utilities ---

function animateValue(id, value, suffix = '') {
    const el = document.getElementById(id);
    const start = parseInt(el.textContent) || 0;
    const duration = 1000;
    const startTime = performance.now();

    function update(now) {
        const elapsed = now - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const current = start + (value - start) * progress;
        
        if (suffix === '%') el.textContent = current.toFixed(1) + suffix;
        else if (suffix === 'ms') el.textContent = Math.round(current) + suffix;
        else el.textContent = Math.round(current);

        if (progress < 1) requestAnimationFrame(update);
    }
    requestAnimationFrame(update);
}

function updateClock() {
    const el = document.getElementById('live-clock');
    const now = new Date();
    el.textContent = now.toLocaleTimeString() + ' | ' + now.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
}

function showToast(msg, type = 'success') {
    // Simple alert for now, can be upgraded to toast
    console.log(`[${type.toUpperCase()}] ${msg}`);
}

// --- Event Handlers ---

document.querySelectorAll('.nav-item').forEach(item => {
    item.onclick = (e) => {
        e.preventDefault();
        document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
        item.classList.add('active');
        
        const target = item.id.replace('nav-', 'section-');
        document.querySelectorAll('.content-section').forEach(s => s.style.display = 'none');
        document.getElementById(target).style.display = 'block';
    };
});

document.getElementById('location-filter').onchange = (e) => {
    currentLocationFilter = e.target.value;
    renderStatusGrid();
};

document.querySelector('.close-modal').onclick = () => {
    document.getElementById('matrix-modal').style.display = 'none';
};

document.getElementById('purge-stale-btn').onclick = async () => {
    if (!confirm("🚨 WARNING: This will permanently delete history for services no longer in your config. Proceed?")) return;
    
    try {
        const res = await axios.post('/api/admin/purge_stale');
        alert(`Cleanup complete! Purged ${res.data.purged_records} records.`);
        loadData();
    } catch (e) { alert("Failed to purge stale data."); }
};

document.getElementById('save-settings-btn').onclick = async () => {
    const config = { ...appData.config };
    config.check_interval = parseInt(document.getElementById('check-interval').value);
    config.alert_mode = document.getElementById('alert-mode').value;
    config.smtp_sender = document.getElementById('smtp-user').value;
    config.smtp_password = document.getElementById('smtp-pass').value;

    try {
        await axios.post('/api/config', config);
        alert("Configuration updated successfully!");
        loadData();
    } catch (e) { alert("Failed to save configuration."); }
};

document.getElementById('add-svc-btn').onclick = async () => {
    const name = document.getElementById('new-svc-name').value.trim();
    const url = document.getElementById('new-svc-url').value.trim();
    const loc = document.getElementById('new-svc-loc').value.trim() || 'Global';
    const type = document.getElementById('new-svc-type').value;

    if (!name || !url) return alert("Service Name and Resource URL are required.");

    const config = { ...appData.config };
    
    const newService = {
        name, 
        url, 
        location: loc, 
        type: type
    };

    // Add specific fields based on type
    if (type === 'http_code') newService.expected_code = 200;
    if (type === 'json_status') {
        newService.key_to_check = 'status';
        newService.expected_value = 'up';
    }

    config.services_to_monitor.push(newService);

    try {
        await axios.post('/api/config', config);
        alert(`Node Activated: ${name}`);
        document.getElementById('new-svc-name').value = '';
        document.getElementById('new-svc-url').value = '';
        loadConfig();
        loadStatus();
    } catch (e) { alert("Failed to provision new service node."); }
};

document.getElementById('run-test-btn').onclick = async () => {
    const tool = document.getElementById('test-tool-select').value;
    const location = document.getElementById('test-location-select').value;
    const results = document.getElementById('test-results');

    results.innerHTML = '<div style="text-align:center; padding:2rem;"><i class="fas fa-circle-notch fa-spin"></i> Pinging remote node...</div>';

    try {
        const res = await axios.post('/api/test', { tool, location });
        const d = res.data;
        results.innerHTML = `
            <div class="glass-panel" style="border-color: ${d.is_up ? 'var(--accent)' : 'var(--danger)'}">
                <h3 style="color: ${d.is_up ? 'var(--accent)' : 'var(--danger)'}">${d.is_up ? 'TRACEROUTE SUCCESSFUL' : 'NODE UNREACHABLE'}</h3>
                <div style="margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                    <div><b>Latency:</b> ${d.latency}ms</div>
                    <div><b>Location:</b> ${d.location}</div>
                    <div style="grid-column: 1/-1;"><b>Response:</b> ${d.message}</div>
                </div>
            </div>
        `;
    } catch (e) { results.innerHTML = '<div class="glass-panel" style="color:var(--danger)">Diagnostic timeout. Node might be offline.</div>'; }
};

document.getElementById('download-excel-btn').onclick = () => {
    window.location.href = '/api/report/excel';
};

// Start
init();