// ==UserScript==
// @name         Relative Time Tooltip (Auto-Update to seconds)
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Relative time shown as an auto-updated hover popup
// @match        *://8chan.moe/*
// @grant        GM_addStyle
// ==/UserScript==

(function () {
    'use strict';

    // Inject tooltip CSS
    GM_addStyle(`
        .relativeTime {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            background-color: #333;
            color: #fff;
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 4px;
            white-space: nowrap;
            z-index: 999;
            transition: opacity 0.2s ease;
            margin-top: -30px;
            margin-left: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            pointer-events: none;
        }

        .labelCreated {
            position: relative;
            cursor: pointer;
        }

        .labelCreated:hover + .relativeTime {
            visibility: visible;
            opacity: 1;
        }
    `);

    function parseDate(dateString) {
        const match = dateString.match(/(\d{2})\/(\d{2})\/(\d{4}).*?(\d{2}):(\d{2}):(\d{2})/);
        if (!match) return null;
        const [_, month, day, year, hour, minute, second] = match;
        return new Date(`${year}-${month}-${day}T${hour}:${minute}:${second}`);
    }

    function getRelativeTimeString(date) {
    const now = new Date();
    const diffMs = now - date;
    const seconds = Math.floor(diffMs / 1000);
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    const remainingHours = hours % 24;

    if (seconds < 5) return 'just now';
    if (seconds < 60) return `${seconds} second${seconds !== 1 ? 's' : ''} ago`;
    if (minutes < 60) return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
    if (hours < 24) return `${hours} hour${hours !== 1 ? 's' : ''} ago`;

    // Show "X days Y hours ago"
    return `${days} day${days !== 1 ? 's' : ''}` +
           (remainingHours > 0 ? ` ${remainingHours} hour${remainingHours !== 1 ? 's' : ''}` : '') +
           ' ago';
    }


    function updateRelativeTimes() {
        document.querySelectorAll('.labelCreated').forEach(label => {
            const timeText = label.textContent.trim();
            const postDate = parseDate(timeText);
            if (!postDate) return;

            let relativeEl = label.nextElementSibling;
            if (!relativeEl || !relativeEl.classList.contains('relativeTime')) {
                relativeEl = document.createElement('span');
                relativeEl.className = 'relativeTime';
                label.after(relativeEl);
            }

            relativeEl.textContent = getRelativeTimeString(postDate);
        });
    }

    // Initial run and recurring every second for precision
    updateRelativeTimes();
    setInterval(updateRelativeTimes, 1000);

    // Handle dynamically loaded posts
    const observer = new MutationObserver(updateRelativeTimes);
    observer.observe(document.body, { childList: true, subtree: true });
})();