function formatCountdown(remainingMs) {
    if (remainingMs <= 0) {
        return "due now";
    }
    const totalSeconds = Math.floor(remainingMs / 1000);
    const hours = Math.floor(totalSeconds / 3600);
    const minutes = Math.floor((totalSeconds % 3600) / 60);
    const seconds = totalSeconds % 60;
    const pad = (n) => String(n).padStart(2, "0");
    if (hours > 0) {
        return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
    }
    return `${pad(minutes)}:${pad(seconds)}`;
}

function startSyncCountdown(el) {
    const target = new Date(el.dataset.utc);
    if (Number.isNaN(target.getTime())) {
        return;
    }
    el.title = `${target.toLocaleString(undefined, { dateStyle: "medium", timeStyle: "short" })} · ${el.dataset.utc} UTC`;

    let intervalId = null;
    const tick = () => {
        const remaining = target.getTime() - Date.now();
        el.textContent = formatCountdown(remaining);
        if (remaining <= 0 && intervalId !== null) {
            clearInterval(intervalId);
        }
    };
    tick();
    if (target.getTime() - Date.now() > 0) {
        intervalId = setInterval(tick, 1000);
    }
}

document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("time.next-sync[data-utc]").forEach(startSyncCountdown);
});