// ==UserScript==
// @name         Avatar Preview - bottom left (last message avatar, auto-update, ignore persona)
// @namespace    http://tampermonkey.net/
// @version      2.0
// @description  Always shows the avatar from the LAST chat message (ignores persona), updates instantly
// @match        http://localhost:3000/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let preview = null;
    let lastSrc = null;

    // Pega o avatar da última mensagem no chat
    function getLastMessageAvatar() {
        // pega todas as mensagens
        let messages = document.querySelectorAll('li[id^="message-"]');
        if (messages.length === 0) return null;

        // última mensagem
        let lastMsg = messages[messages.length - 1];

        // procura avatar dentro dela
        let avatarImg = lastMsg.querySelector('img[data-scope="avatar"][data-part="image"][data-state="visible"]');
        if (!avatarImg) return null;

        // ignora se for persona
        if (avatarImg.src.includes("/personas/")) return null;

        return avatarImg;
    }

    function updateAvatar() {
        let avatarImg = getLastMessageAvatar();
        if (!avatarImg) return;

        if (!preview) {
            preview = document.createElement("img");
            preview.id = "tm-avatar-preview";
            Object.assign(preview.style, {
                position: "fixed",
                bottom: "10px",
                left: "10px",
                width: "470px",
                height: "auto",
                border: "none",
                borderRadius: "15px",
                zIndex: "99999",
                background: "transparent",
                padding: "0",
                boxShadow: "none",
                display: "none" // inicia minimizado
            });
            document.body.appendChild(preview);
            createButtons(preview);
        }

        // Atualiza instantaneamente se mudou
        if (avatarImg.src && avatarImg.src !== lastSrc) {
            lastSrc = avatarImg.src;
            preview.src = lastSrc;
        }
    }

    function createButtons(preview) {
        if (document.getElementById("tm-avatar-buttons")) return;

        const btnContainer = document.createElement("div");
        btnContainer.id = "tm-avatar-buttons";
        Object.assign(btnContainer.style, {
            position: "fixed",
            bottom: "10px",
            left: "10px",
            zIndex: "99999",
            display: "flex",
            gap: "5px"
        });

        const btnShow = document.createElement("button");
        btnShow.textContent = "Show";
        Object.assign(btnShow.style, {
            padding: "5px 10px",
            cursor: "pointer"
        });
        btnShow.addEventListener("click", () => {
            preview.style.display = "block";
        });

        const btnHide = document.createElement("button");
        btnHide.textContent = "Hide";
        Object.assign(btnHide.style, {
            padding: "5px 10px",
            cursor: "pointer"
        });
        btnHide.addEventListener("click", () => {
            preview.style.display = "none";
        });

        btnContainer.appendChild(btnShow);
        btnContainer.appendChild(btnHide);
        document.body.appendChild(btnContainer);
    }

    // Atualiza ao carregar a página
    window.addEventListener('load', updateAvatar);

    // Observa mudanças no DOM (novas mensagens, mudanças de imagem, etc.)
    const observer = new MutationObserver(() => {
        updateAvatar();
    });
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ["src", "data-state"]
    });

})();