mc-webui/app/static/js/path-analyzer.js

// Path Analyzer panel
// - bulk channel messages across all channels (GET /api/path-analyzer/messages)
// - stage 2: days selector + flat message table
// - later stages: path detail rows, filters, per-repeater stats, map view

// ================================================================
// UI settings + toast (same behavior as repeaters.js)
// ================================================================

const PA_UI_SETTINGS_DEFAULTS = {
    toast_timeout_sec: 2,
    toast_no_autoclose: false,
    toast_position: 'top-left'
};

const PA_TOAST_POSITION_CLASSES = {
    'top-left':     ['top-0', 'start-0'],
    'top-right':    ['top-0', 'end-0'],
    'bottom-left':  ['bottom-0', 'start-0'],
    'bottom-right': ['bottom-0', 'end-0'],
    'center':       ['top-50', 'start-50', 'translate-middle']
};
const PA_ALL_POSITION_CLASSES = ['top-0', 'top-50', 'start-0', 'start-50', 'bottom-0', 'end-0', 'translate-middle'];

window.uiSettingsCache = window.uiSettingsCache || { ...PA_UI_SETTINGS_DEFAULTS };

function applyToastPosition(position) {
    const classes = PA_TOAST_POSITION_CLASSES[position] || PA_TOAST_POSITION_CLASSES['top-left'];
    document.querySelectorAll('[data-toast-container]').forEach(el => {
        PA_ALL_POSITION_CLASSES.forEach(c => el.classList.remove(c));
        classes.forEach(c => el.classList.add(c));
    });
}

async function loadUiSettings() {
    try {
        const resp = await fetch('/api/ui/settings');
        if (resp.ok) {
            const data = await resp.json();
            window.uiSettingsCache = { ...PA_UI_SETTINGS_DEFAULTS, ...data };
            applyToastPosition(window.uiSettingsCache.toast_position);
        }
    } catch (e) {
        console.error('Failed to load UI settings:', e);
    }
}

function showNotification(message, type = 'info') {
    const toastEl = document.getElementById('notificationToast');
    if (!toastEl) return;

    const toastBody = toastEl.querySelector('.toast-body');
    if (toastBody) {
        toastBody.textContent = message;
    }

    const toastHeader = toastEl.querySelector('.toast-header');
    if (toastHeader) {
        toastHeader.className = 'toast-header';
        if (type === 'success') {
            toastHeader.classList.add('bg-success', 'text-white');
        } else if (type === 'danger') {
            toastHeader.classList.add('bg-danger', 'text-white');
        } else if (type === 'warning') {
            toastHeader.classList.add('bg-warning');
        }
    }

    const cfg = window.uiSettingsCache || {};
    const noAutoclose = !!cfg.toast_no_autoclose;
    const timeoutSec = parseFloat(cfg.toast_timeout_sec);
    const delay = isFinite(timeoutSec) && timeoutSec > 0 ? Math.round(timeoutSec * 1000) : 2000;

    const toast = new bootstrap.Toast(toastEl, {
        autohide: !noAutoclose,
        delay: delay
    });
    toast.show();
}

// ================================================================
// Data loading + table rendering
// ================================================================

let paMessages = [];
let paFilters = { hops: 'any', token: '', sender: '' };
let paCurrentView = 'messages';   // 'messages' | 'stats'
let paContacts = [];              // /api/contacts/cached?format=full
let paStatsSort = { key: 'relayed', dir: -1 };

async function paLoadContacts() {
    try {
        const resp = await fetch('/api/contacts/cached?format=full');
        if (resp.ok) {
            const data = await resp.json();
            if (data.success) paContacts = data.contacts || [];
        }
    } catch (e) {
        console.error('Failed to load contacts:', e);
    }
}

// Match a repeater hash token against contacts by public key prefix.
// 1-byte hashes can collide - callers must handle multiple candidates.
function paMatchContacts(token) {
    const prefix = token.toLowerCase();
    return paContacts.filter(c => (c.public_key || '').toLowerCase().startsWith(prefix));
}

// Split an echo's path hex into per-hop tokens using that echo's own
// hash_size (same logic as showPathsPopup in app.js; trailing partial kept)
function paDecodeEcho(echo) {
    const chunkLen = (echo.hash_size || 1) * 2;
    const tokens = [];
    const hex = echo.path || '';
    for (let i = 0; i < hex.length; i += chunkLen) {
        tokens.push(hex.substring(i, i + chunkLen).toUpperCase());
    }
    return { ...echo, tokens: tokens, hops: tokens.length };
}

function paMessageMatchesFilters(msg) {
    if (paFilters.hops !== 'any') {
        const want = paFilters.hops;
        const ok = msg.echoView.some(e =>
            want === '4+' ? e.hops >= 4 : e.hops === parseInt(want, 10));
        if (!ok) return false;
    }
    if (paFilters.token) {
        const t = paFilters.token;
        const ok = msg.echoView.some(e => e.tokens.some(tok => tok.startsWith(t)));
        if (!ok) return false;
    }
    if (paFilters.sender) {
        if (!(msg.sender || '').toLowerCase().includes(paFilters.sender)) return false;
    }
    return true;
}

function paFiltersActive() {
    return paFilters.hops !== 'any' || paFilters.token !== '' || paFilters.sender !== '';
}

function paFormatTime(msg) {
    if (!msg.timestamp) return '—';
    const d = new Date(msg.timestamp * 1000);
    const pad = n => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ` +
           `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
}

function paCopyText(text, label) {
    navigator.clipboard.writeText(text).then(
        () => showNotification(`${label} copied to clipboard`, 'success'),
        () => showNotification(`Failed to copy ${label}`, 'danger')
    );
}

function paBuildEchoLine(echo) {
    const line = document.createElement('div');
    line.className = 'pa-echo-line';
    line.title = 'Click to copy route';

    const dirBadge = document.createElement('span');
    dirBadge.className = 'badge ' + (echo.direction === 'outgoing' ? 'text-bg-primary' : 'text-bg-secondary');
    dirBadge.textContent = echo.direction === 'outgoing' ? 'out' : 'in';
    line.appendChild(dirBadge);

    if (echo.hops === 0) {
        const direct = document.createElement('span');
        direct.className = 'pa-direct';
        direct.textContent = 'Direct (flood, 0 hops)';
        line.appendChild(direct);
    } else {
        echo.tokens.forEach((tok, i) => {
            if (i > 0) {
                const arrow = document.createElement('i');
                arrow.className = 'bi bi-arrow-right pa-chip-arrow';
                line.appendChild(arrow);
            }
            const chip = document.createElement('span');
            chip.className = 'pa-chip';
            chip.textContent = tok;
            chip.title = `Copy repeater hash ${tok}`;
            chip.addEventListener('click', (e) => {
                e.stopPropagation();
                paCopyText(tok, 'Repeater hash');
            });
            line.appendChild(chip);
        });
    }

    const meta = document.createElement('span');
    meta.className = 'pa-echo-meta ms-1';
    const snr = (echo.snr === null || echo.snr === undefined) ? '?' : `${Number(echo.snr).toFixed(1)} dB`;
    meta.textContent = `SNR: ${snr} | ${echo.received_at || ''}`;
    line.appendChild(meta);

    line.addEventListener('click', () => {
        paCopyText(echo.tokens.join(','), 'Route');
    });
    return line;
}

function paRenderTable() {
    const body = document.getElementById('paTableBody');
    body.innerHTML = '';

    const filtered = paMessages.filter(paMessageMatchesFilters);

    for (const msg of filtered) {
        const tr = document.createElement('tr');
        tr.className = 'pa-msg-row' + (msg.echoView.length === 0 ? ' pa-no-echoes' : '');

        const tdCaret = document.createElement('td');
        tdCaret.innerHTML = '<i class="bi bi-chevron-right pa-caret"></i>';
        tr.appendChild(tdCaret);

        const tdTime = document.createElement('td');
        tdTime.className = 'pa-time';
        tdTime.textContent = paFormatTime(msg);
        tr.appendChild(tdTime);

        const tdChannel = document.createElement('td');
        tdChannel.textContent = msg.channel_name || `#${msg.channel_idx}`;
        tr.appendChild(tdChannel);

        const tdSender = document.createElement('td');
        tdSender.textContent = msg.is_own ? `${msg.sender || 'Me'} (own)` : (msg.sender || '—');
        tr.appendChild(tdSender);

        const tdContent = document.createElement('td');
        const preview = document.createElement('div');
        preview.className = 'pa-content-preview';
        preview.textContent = msg.content || '';
        preview.title = msg.content || '';
        tdContent.appendChild(preview);
        tr.appendChild(tdContent);

        const tdHash = document.createElement('td');
        if (msg.packet_hash) {
            const span = document.createElement('span');
            span.className = 'pa-hash';
            span.textContent = msg.packet_hash;
            span.title = 'Click to copy';
            span.addEventListener('click', (e) => {
                e.stopPropagation();
                paCopyText(msg.packet_hash, 'Packet hash');
            });
            tdHash.appendChild(span);
        } else {
            tdHash.innerHTML = '<span class="text-muted small">no path data</span>';
        }
        tr.appendChild(tdHash);

        const tdHops = document.createElement('td');
        tdHops.className = 'text-end';
        tdHops.textContent = (msg.hop_count === null || msg.hop_count === undefined) ? '—' : msg.hop_count;
        tr.appendChild(tdHops);

        const tdEchoes = document.createElement('td');
        tdEchoes.className = 'text-end';
        tdEchoes.textContent = msg.echoView.length;
        tr.appendChild(tdEchoes);

        body.appendChild(tr);

        if (msg.echoView.length > 0) {
            const detailTr = document.createElement('tr');
            detailTr.className = 'd-none';
            const detailTd = document.createElement('td');
            detailTd.className = 'pa-echo-cell';
            detailTd.colSpan = 8;
            for (const echo of msg.echoView) {
                detailTd.appendChild(paBuildEchoLine(echo));
            }
            detailTr.appendChild(detailTd);
            body.appendChild(detailTr);

            tr.addEventListener('click', () => {
                tr.classList.toggle('pa-open');
                detailTr.classList.toggle('d-none');
            });
        }
    }

    const counter = document.getElementById('paCounter');
    counter.textContent = paFiltersActive()
        ? `${filtered.length} of ${paMessages.length} messages`
        : `${paMessages.length} message${paMessages.length === 1 ? '' : 's'}`;

    // Empty state when filters exclude everything
    if (paMessages.length > 0) {
        if (filtered.length === 0) {
            document.getElementById('paEmptyText').textContent = 'No messages match the current filters.';
            paSetView('empty');
        } else {
            paSetView('table');
        }
    }
}

function paSetView(state) {
    document.getElementById('paLoading').classList.toggle('d-none', state !== 'loading');
    document.getElementById('paEmpty').classList.toggle('d-none', state !== 'empty');
    document.getElementById('paTableWrap').classList.toggle('d-none', state !== 'table');
    document.getElementById('paStatsWrap').classList.toggle('d-none', state !== 'stats');
}

// ================================================================
// Per-repeater statistics
// ================================================================

function paComputeStats(filtered) {
    const stats = new Map();  // exact token -> aggregate
    for (const msg of filtered) {
        for (const e of msg.echoView) {
            e.tokens.forEach((tok, i) => {
                let s = stats.get(tok);
                if (!s) {
                    s = { token: tok, relayed: 0, msgIds: new Set(), lastHop: 0, snrSum: 0, snrCount: 0 };
                    stats.set(tok, s);
                }
                s.relayed++;
                s.msgIds.add(msg.id);
                if (i === e.tokens.length - 1) {
                    // SNR is measured at our receiver - attribute it to the
                    // final hop only, never to intermediate hops
                    s.lastHop++;
                    if (e.snr !== null && e.snr !== undefined) {
                        s.snrSum += Number(e.snr);
                        s.snrCount++;
                    }
                }
            });
        }
    }
    return [...stats.values()].map(s => ({
        token: s.token,
        relayed: s.relayed,
        messages: s.msgIds.size,
        lastHop: s.lastHop,
        avgSnr: s.snrCount > 0 ? s.snrSum / s.snrCount : null,
    }));
}

function paRenderStats() {
    const body = document.getElementById('paStatsBody');
    body.innerHTML = '';

    const filtered = paMessages.filter(paMessageMatchesFilters);
    const rows = paComputeStats(filtered);

    const { key, dir } = paStatsSort;
    rows.sort((a, b) => {
        const av = a[key], bv = b[key];
        if (av === null && bv === null) return 0;
        if (av === null) return 1;   // nulls (never last hop) always last
        if (bv === null) return -1;
        return (av < bv ? -1 : av > bv ? 1 : 0) * dir;
    });

    // Show sort direction on the active header
    document.querySelectorAll('.pa-sortable').forEach(th => {
        th.textContent = th.textContent.replace(/ [▲▼]$/, '')
            + (th.dataset.sort === key ? (dir === -1 ? ' ▼' : ' ▲') : '');
    });

    for (const s of rows) {
        const tr = document.createElement('tr');
        tr.className = 'pa-stats-row';
        tr.title = `Filter messages by ${s.token}`;

        const tdToken = document.createElement('td');
        tdToken.innerHTML = `<span class="pa-hash">${s.token}</span>`;
        tr.appendChild(tdToken);

        const tdContact = document.createElement('td');
        const candidates = paMatchContacts(s.token);
        if (candidates.length === 1) {
            tdContact.textContent = candidates[0].name || '—';
        } else if (candidates.length > 1) {
            tdContact.innerHTML = `<span class="pa-ambiguous" title="${candidates.map(c => c.name).join(', ')}">ambiguous (${candidates.length})</span>`;
        } else {
            tdContact.textContent = '—';
        }
        tr.appendChild(tdContact);

        for (const val of [s.relayed, s.messages, s.lastHop]) {
            const td = document.createElement('td');
            td.className = 'text-end';
            td.textContent = val;
            tr.appendChild(td);
        }

        const tdSnr = document.createElement('td');
        tdSnr.className = 'text-end';
        tdSnr.textContent = s.avgSnr === null ? '—' : `${s.avgSnr.toFixed(1)} dB`;
        tr.appendChild(tdSnr);

        // Click -> apply this token as the filter and jump to the message list
        tr.addEventListener('click', () => {
            document.getElementById('paTokenFilter').value = s.token;
            paSwitchView('messages');
        });

        body.appendChild(tr);
    }

    const counter = document.getElementById('paCounter');
    counter.textContent = paFiltersActive()
        ? `${rows.length} repeaters (${filtered.length} of ${paMessages.length} messages)`
        : `${rows.length} repeaters (${paMessages.length} messages)`;

    if (rows.length === 0) {
        document.getElementById('paEmptyText').textContent =
            filtered.length === 0 ? 'No messages match the current filters.'
                                  : 'No routed echoes in the current selection.';
        paSetView('empty');
    } else {
        paSetView('stats');
    }
}

function paRender() {
    if (paCurrentView === 'stats') {
        paRenderStats();
    } else {
        paRenderTable();
    }
}

function paSwitchView(view) {
    paCurrentView = view;
    const msgBtn = document.getElementById('paViewMessagesBtn');
    const statsBtn = document.getElementById('paViewStatsBtn');
    msgBtn.className = 'btn ' + (view === 'messages' ? 'btn-primary' : 'btn-outline-primary');
    statsBtn.className = 'btn ' + (view === 'stats' ? 'btn-primary' : 'btn-outline-primary');
    paApplyFilters();
}

async function paLoadMessages() {
    const days = document.getElementById('paDaysSelect').value;
    paSetView('loading');
    document.getElementById('paCounter').textContent = '';

    try {
        const resp = await fetch(`/api/path-analyzer/messages?days=${encodeURIComponent(days)}`);
        const data = await resp.json();
        if (!resp.ok || !data.success) {
            throw new Error(data.error || `HTTP ${resp.status}`);
        }
        // Newest first for the analysis table (API returns ascending)
        paMessages = (data.messages || []).slice().reverse();
        paMessages.forEach(msg => {
            msg.echoView = (msg.echoes || []).map(paDecodeEcho);
        });
    } catch (e) {
        console.error('Failed to load messages:', e);
        showNotification(`Failed to load messages: ${e.message}`, 'danger');
        paMessages = [];
    }

    if (paMessages.length === 0) {
        document.getElementById('paEmptyText').textContent = 'No messages in the selected time range.';
        paSetView('empty');
    } else {
        paRender();
    }
}

// ================================================================
// Filters
// ================================================================

function paReadFilters() {
    paFilters.hops = document.getElementById('paHopsFilter').value;
    // Normalize token input to hex characters only (matches chip display casing)
    paFilters.token = document.getElementById('paTokenFilter').value
        .replace(/[^0-9a-fA-F]/g, '').toUpperCase();
    paFilters.sender = document.getElementById('paSenderFilter').value.trim().toLowerCase();
    document.getElementById('paClearFiltersBtn').classList.toggle('d-none', !paFiltersActive());
}

function paApplyFilters() {
    paReadFilters();
    if (paMessages.length > 0) {
        paRender();
    }
}

function paClearFilters() {
    document.getElementById('paHopsFilter').value = 'any';
    document.getElementById('paTokenFilter').value = '';
    document.getElementById('paSenderFilter').value = '';
    paApplyFilters();
}

// ================================================================
// Init
// ================================================================

document.addEventListener('DOMContentLoaded', () => {
    loadUiSettings();
    document.getElementById('paDaysSelect').addEventListener('change', paLoadMessages);
    document.getElementById('paRefreshBtn').addEventListener('click', paLoadMessages);

    let filterDebounce = null;
    const debouncedApply = () => {
        clearTimeout(filterDebounce);
        filterDebounce = setTimeout(paApplyFilters, 150);
    };
    document.getElementById('paHopsFilter').addEventListener('change', paApplyFilters);
    document.getElementById('paTokenFilter').addEventListener('input', debouncedApply);
    document.getElementById('paSenderFilter').addEventListener('input', debouncedApply);
    document.getElementById('paClearFiltersBtn').addEventListener('click', paClearFilters);

    document.getElementById('paViewMessagesBtn').addEventListener('click', () => paSwitchView('messages'));
    document.getElementById('paViewStatsBtn').addEventListener('click', () => paSwitchView('stats'));
    document.querySelectorAll('.pa-sortable').forEach(th => {
        th.addEventListener('click', () => {
            const k = th.dataset.sort;
            if (paStatsSort.key === k) {
                paStatsSort.dir = -paStatsSort.dir;
            } else {
                paStatsSort = { key: k, dir: -1 };
            }
            paRenderStats();
        });
    });

    paLoadContacts();
    paLoadMessages();
});