(function(){
window.tampilkanSocialProof = function(data, position = "bottom") {
    if (!Array.isArray(data) || data.length === 0) {
        return;
    }

    let index = 0;
    const box = document.createElement("div");
    const getIsDarkMode = () => {
        const rootTheme = (document.documentElement.getAttribute("data-theme") || "").toLowerCase();
        if (rootTheme === "dark") return true;
        if (rootTheme === "light") return false;
        return window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
    };

    const applyThemeStyles = () => {
        const isDark = getIsDarkMode();
        box.style.background = isDark ? "rgba(15, 23, 28, 0.96)" : "#ffffff";
        box.style.border = isDark ? "1px solid #2b3a42" : "1px solid #dddddd";
        box.style.boxShadow = isDark ? "0 8px 24px rgba(0,0,0,0.45)" : "0 2px 8px rgba(0,0,0,0.2)";
        box.style.color = isDark ? "#e8f1ee" : "#263238";
    };

    box.style.position = "fixed";
    box.style[`${position}`] = "40px";
    box.style.left = "20px";
    box.style.padding = "10px";
    box.style.borderRadius = "8px";
    box.style.fontFamily = "Poppins, Arial, sans-serif";
    box.style.fontSize = "14px";
    box.style.zIndex = "9999";
    box.style.display = "flex";
    box.style.alignItems = "center";
    box.style.maxWidth = "280px";
    box.style.minWidth = "220px";
    box.style.lineHeight = "1.35";
    box.style.transition = "opacity 0.5s ease";
    box.style.pointerEvents = "none";
    box.style.wordBreak = "break-word";
    applyThemeStyles();
    document.body.appendChild(box);

    function tampilkanBerikutnya() {
        if (index >= data.length) index = 0;
        const item = data[index++];
        const waktu = formatTimeAgo(item.timestamp);
        const isDark = getIsDarkMode();
        const timeColor = isDark ? "#9bb0b3" : "#6b7280";
        applyThemeStyles();

        box.innerHTML = `
            <img src="${item.foto}" alt="produk" style="width: 60px; height: 60px; border-radius: 6px; object-fit: cover; margin-right: 5px;">
            <div style="color: inherit;">
                ${item.text}<br>
                <small style="color:${timeColor}">${waktu}</small>
            </div>
        `;

        box.style.opacity = "1";
        setTimeout(() => box.style.opacity = "0", 6000);
        setTimeout(tampilkanBerikutnya, 8000);
    }

    function maskNama(nama) {
        return nama.length > 3 ? nama.substring(0, 3) + '****' : nama;
    }

    function formatTimeAgo(timestamp) {
        const now = Math.floor(Date.now() / 1000);
        const diff = now - timestamp;

        if (diff < 60) return "baru saja";
        if (diff < 3600) return `${Math.floor(diff / 60)} menit lalu`;
        if (diff < 86400) return `${Math.floor(diff / 3600)} jam lalu`;
        return `${Math.floor(diff / 86400)} hari lalu`;
    }

    tampilkanBerikutnya();

    if (window.MutationObserver) {
        const observer = new MutationObserver(() => applyThemeStyles());
        observer.observe(document.documentElement, {
            attributes: true,
            attributeFilter: ["data-theme"],
        });
    }
};

window.tampilkanSocialProof([], 'bottom');
})();