window.onReady = window.onReady || [];
window.onReady.push(function () {

    const container = document.querySelector(
        "header > .container.hidden-sm-down"
    );

    if (!container) return;


    /* =====================================================
       ELEMENTOS ORIGINAIS
       ===================================================== */

    const logo = container.querySelector(".logo");
    const busca = container.querySelector(".searchContainer");
    const user = container.querySelector(".userInfo");
    const cart = container.querySelector(".cartInfo");

    const menu = document.querySelector(".menuBar");


    if (!logo || !busca || !user || !cart || !menu) return;


    /* =====================================================
       CRIA ÁREA DA DIREITA
       ===================================================== */

    let right = container.querySelector(".header-right");

    if (!right) {

        right = document.createElement("div");

        right.className = "header-right";

        /*
         * Move os elementos existentes para dentro
         * da nova área.
         */

        right.appendChild(user);
        right.appendChild(cart);

        container.appendChild(right);

    }


    /* =====================================================
       LOGO CENTRALIZADA
       ===================================================== */

    logo.style.position = "absolute";

    logo.style.left = "50%";
    logo.style.top = "50%";

    logo.style.transform =
        "translate(-50%, -50%)";


    /* =====================================================
       AJUSTE DO HEADER
       ===================================================== */

    function ajustarHeader() {

        const larguraLogo = logo.offsetWidth;

        const larguraDireita = right.offsetWidth;

        const larguraContainer = container.offsetWidth;


        /*
         * Mantém o logo exatamente no centro.
         */

        logo.style.left = "50%";

        logo.style.top = "50%";

        logo.style.transform =
            "translate(-50%, -50%)";


        /*
         * Espaço necessário para o menu.
         */

        menu.style.paddingLeft =
            (larguraLogo / 2 + 40) + "px";

        menu.style.paddingRight =
            (larguraLogo / 2 + 40) + "px";


        /*
         * Garante que a área direita não
         * encoste no logo.
         */

        right.style.maxWidth =
            "calc(50% - " +
            (larguraLogo / 2 + 40) +
            "px)";

    }


    /* =====================================================
       BUSCA
       ===================================================== */

    const input = busca.querySelector("#buscaGlobal");

    if (input) {

        input.placeholder = "Encontre o móvel ideal para seu lar";

    }


    /* =====================================================
       ÍCONE DE FAVORITOS
       ===================================================== */

    let favorite = right.querySelector(".header-favorite");

if (!favorite) {

    favorite = document.createElement("a");

    favorite.className = "header-favorite";

    favorite.href = "https://www.vistato.com.br/minha-conta/lista-produtos";

    favorite.innerHTML = `
        <svg
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
            aria-hidden="true">

            <path
                d="M20.8 8.8
                   c0 5-8.8 10.3-8.8 10.3
                   S3.2 13.8 3.2 8.8
                   A4.6 4.6 0 0 1 12 6.1
                   A4.6 4.6 0 0 1 20.8 8.8Z"
            />

        </svg>
    `;

    right.insertBefore(
        favorite,
        cart
    );

}


    /* =====================================================
       ÍCONE DE USUÁRIO (usa o link já existente em .userInfo)
       ===================================================== */

    if (!right.querySelector(".header-user")) {

        const userIcon = document.createElement("a");
        userIcon.className = "header-user";

        userIcon.innerHTML = `
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <circle cx="12" cy="8" r="3.4" stroke="currentColor" stroke-width="1.6" fill="none" />
                <path d="M5 20c1.5-4 5-6 7-6s5.5 2 7 6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" fill="none" />
            </svg>
        `;

        function atualizarLinkUsuario() {
            const link = user.querySelector("a");
            userIcon.href = link
                ? link.getAttribute("href")
                : "https://www.vistato.com.br/login";
        }

        atualizarLinkUsuario();

        // Quando a sessão carregar (visitante -> logado), o link do
        // .userInfo muda de /login para /minha-conta. Este observer
        // mantém o ícone sempre apontando pro link certo.
        const userObserver = new MutationObserver(atualizarLinkUsuario);
        userObserver.observe(user, { childList: true, subtree: true });

        right.insertBefore(userIcon, favorite);

        // Esconde o texto original visualmente, mas mantém no DOM:
        // o script de sessão (Panorama.get) continua escrevendo nele.
        user.style.display = "none";

    }


    /* =====================================================
       CONTADOR DO CARRINHO
       ===================================================== */

    const cartCount = cart.querySelector(".countItens");

    if (cartCount) {

        function atualizarContador() {

            const valor =
                cartCount.textContent.trim();

            if (
                valor === "00" ||
                valor === "0" ||
                valor === ""
            ) {

                cartCount.style.display = "none";

            } else {

                cartCount.style.display = "flex";

            }

        }

        atualizarContador();


        const observer =
            new MutationObserver(
                atualizarContador
            );

        observer.observe(
            cartCount,
            {
                childList: true,
                characterData: true,
                subtree: true
            }
        );

    }


    /* =====================================================
       INICIALIZA
       ===================================================== */

    ajustarHeader();


    /* =====================================================
       RESPONSIVO
       ===================================================== */

    let resizeTimer;

    window.addEventListener(
        "resize",
        function () {

            clearTimeout(resizeTimer);

            resizeTimer = setTimeout(
                ajustarHeader,
                100
            );

        }
    );

});