const conversationElement = document.getElementById('chat_box');
const conversationStatsElement = document.createElement('div');
conversationStatsElement.id = 'token-summary';
conversationStatsElement.style.cssText = `position: fixed; bottom: 20px; right: 20px; color: #333; font-family: monospace; font-size: 13px; z-index: 10000; line-height: 1.6;`;
document.body.appendChild(conversationStatsElement);

let updateTimeout;
let observer;

function updateSummary() {
    const messages = document.querySelectorAll('[data-author="assistant"]');
    let conversationTokens = 0;
    let conversationCost = 0;
    let conversationSpeed = 0;

    // Temporarily disconnect observer to avoid observing our own changes
    if (observer) {
        observer.disconnect();
    }

    messages.forEach((message) => {
        const infoList = message.querySelector('.message-info');

        if (!infoList) {
            return;
        }

        const speedElement = infoList.querySelector('li:nth-child(3) .value');
        const tokensElement = infoList.querySelector('li:nth-child(4) .value');
        const costElement = infoList.querySelector('li:nth-child(5) .value');

        if (!tokensElement || !costElement || !speedElement) {
            return;
        }

        const tokens = parseInt(tokensElement.textContent.replace(/,/g, '')) || 0;
        const cost = parseFloat(costElement.textContent.split('/')[0].trim()) || 0;
        const speedText = speedElement.textContent.trim();
        const speed = `${speedText} tok/s`;
        const speedValue = parseFloat(speedText) || 0;

        conversationTokens += tokens;
        conversationCost += cost;
        conversationSpeed += speedValue;

        let messageStatsElement = message.querySelector('.inline-stats');

        if (!messageStatsElement) {
            messageStatsElement = document.createElement('div');
            messageStatsElement.className = 'inline-stats';
            messageStatsElement.style.cssText = `font-size: 12px; color: #666; font-family: monospace; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e0e0e0;`;
            message.appendChild(messageStatsElement);
        }

        messageStatsElement.textContent = `${tokens.toLocaleString()} tok | $${cost.toFixed(4)} | ${speed}`;
    });

    const conversationSpeedAvgFormatted = messages.length > 0 ? (conversationSpeed / messages.length).toFixed(2) : '0.00';
    const conversationCostFormatted = `$${conversationCost.toFixed(4)}`;

    conversationStatsElement.innerText = `${conversationTokens.toLocaleString()} tok | ${conversationCostFormatted} | ${conversationSpeedAvgFormatted} tok/s`;

    // Reconnect observer
    if (conversationElement && observer) {
        observer.observe(conversationElement, {
            childList: true,
            subtree: true
        });
    }
}

function debouncedUpdate() {
    clearTimeout(updateTimeout);
    updateTimeout = setTimeout(updateSummary, 300);
}

observer = new MutationObserver(debouncedUpdate);
observer.observe(conversationElement, {
    childList: true,
    subtree: true
});

updateSummary();