// ==UserScript==
// @name         Qzone Beautification
// @namespace    https://bbs.tampermonkey.net.cn/
// @version      1.4
// @description  综合美化QQ空间样式（顶部栏、侧边栏、容器等），并增强功能（左侧用户卡片、右侧访客统计）
// @author       ZZW
// @match        https://*.qzone.qq.com/*
// @icon         https://qzonestyle.gtimg.cn/qzone/v8/img/Qzone.svg
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // 防止重复加载
    if (window.qqZoneEnhancedLoaded) return;
    window.qqZoneEnhancedLoaded = true;

    // ================== 工具函数 ==================

    /**
     * 等待单个元素出现
     */
    function waitForElement(selector, callback, moduleName) {
        const observer = new MutationObserver((mutations, obs) => {
            const el = document.querySelector(selector);
            if (el) {
                obs.disconnect();
                callback(el);
                console.log(`[${moduleName}] 元素加载完成：${selector}`);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
        setTimeout(() => {
            observer.disconnect();
            console.warn(`[${moduleName}] 10秒超时,元素未加载：${selector}`);
        }, 10000);
    }

    /**
     * 等待多个元素出现，并返回已找到的
     */
    function waitForElements(selectors, callback, moduleName) {
        const elements = {};
        let completed = 0;
        const observer = new MutationObserver((mutations, obs) => {
            selectors.forEach(selector => {
                if (!elements[selector]) {
                    const el = document.querySelector(selector);
                    if (el) {
                        elements[selector] = el;
                        completed++;
                    }
                }
            });
            if (completed === selectors.length) {
                obs.disconnect();
                callback(elements);
                console.log(`[${moduleName}] 所有元素加载完成`);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
        setTimeout(() => {
            observer.disconnect();
            callback(elements);
            console.warn(`[${moduleName}] 10秒超时,返回已找到的元素`);
        }, 10000);
    }

    /**
     * 隐藏指定选择器的元素（包括动态插入）
     */
    function hideElements() {
        const elementsToHide = [
            '#tb_app_li.nav-list',
            '#applist_html.inner',
            '#tb_vip_li',
            '#headContainer > div.head-info',
            'div > div.head-avatar',
            '#QM_Container_100005',
            '#layBackground > div.layout-nav > div > div.head-avatar',
            '#headContainer > div.head-detail',
            '#visitorsDiv',
            '#visitorsDiv > div'
        ];

        // 立即隐藏已存在元素
        elementsToHide.forEach(selector => {
            const el = document.querySelector(selector);
            if (el) el.style.display = 'none';
        });

        // 监听动态加载元素并隐藏
        const observer = new MutationObserver(() => {
            elementsToHide.forEach(selector => {
                const el = document.querySelector(selector);
                if (el && el.style.display !== 'none') {
                    el.style.display = 'none';
                }
            });
        });
        observer.observe(document.body, { childList: true, subtree: true });

        // 3分钟后停止监听
        setTimeout(() => observer.disconnect(), 180000);
    }


    // ================== 样式美化 ==================

    // 添加综合美化CSS样式
    GM_addStyle(`
        /* 隐藏元素 */
        .head-dress { pointer-events: none !important; }

        /* 宽度设置 */
        #QZ_Toolbar_Container > div.top-fix-wrap {
            width: 1100px !important;
        }
        #main_feed_container > div.col-main-sidebar,
        #QM_Container_31,
        #QM_Container_3,
        #leftMenu,
        #leftMenu > div.mod-side-nav.mod-side-nav-userCard,
        #leftMenu > div.mod-side-nav.mod-side-nav-message,
        #leftMenu > div.mod-side-nav.mod-side-nav-recently-used,
        #QM_Container_11 {
            width: 250px !important;
        }
        #main_feed_container > div.col-main-sidebar > div.icenter-right-mod.icenter-right-visitor {
            width: 291.6px !important;
        }
        #main_feed_container {
            width: 970px !important;
        }
        #feed_friend > div.fn-feed-container,
        #feed_friend_list > *,
        #feed_friend_list > li.feed_page_container > ul > * {
            width: 677px !important;
        }
        #pageContent.layout-page.clearfix {
            width: 1300px !important;
        }

        /* 高度设置 */
        #layPositionRoot > div.layout-background,
        #layBackground > div > div.layout-background,
        #layBackground > div.layout-background {
            min-height: 638.4px !important;
        }
        .top-fix-bar,
        body > div.top-fix-bar > div,
        #QZ_Toolbar_Container.top-fix-container,
        #QZ_Toolbar_Container > div.top-fix-wrap {
            height: 50px !important;
        }
        #QZ_Toolbar_Container > div.top-fix-wrap {
            height: 100% !important;
        }
        #QZ_Toolbar_Container > div.top-fix-wrap > ul,
        #QZ_Toolbar_Container > div.top-fix-wrap > div.user-info,
        #QZ_Toolbar_Container > div.top-fix-wrap > div.top-search,
        #tb_music_li.music-container {
            height: auto !important;
        }

        /* 边距与内边距设置 */
        #headContainer.layout-head-inner {
            margin-top: -250px;
        }
        #QZ_Toolbar_Container > div.top-fix-wrap {
            padding: 0 15px !important;
        }
        #QZ_Toolbar_Container > div.top-fix-wrap > ul,
        #QZ_Toolbar_Container > div.top-fix-wrap > div.user-info,
        #QZ_Toolbar_Container > div.top-fix-wrap > div.top-search,
        #tb_music_li.music-container {
            margin: 0 !important;
            padding: 0 !important;
        }
        .top-fix-inner,
        .top-fix-container,
        .top-fix-wrap {
            padding: 0 !important;
        }
        #leftMenu > div.mod-side-nav.mod-side-nav-userCard {
            padding: 20px !important;
        }
        #QM_Container_31, #QM_Container_3 {
            margin-bottom: 20px !important;
            padding: 20px !important;
        }
        #main_feed_container > div.col-main-sidebar > div.icenter-right-mod.icenter-right-visitor {
            padding: 20px !important;
            margin-bottom: 20px !important;
        }
        #main_feed_container {
            gap: 20px !important;
        }
        .col-main-sidebar {
            margin-left: 0 !important;
        }

        /* 布局与定位设置 */
        #layPositionRoot > div.layout-background,
        #layBackground > div.layout-background {
            display: flex;
            flex-direction: column;
        }
        #layPositionRoot > div.layout-background > div.layout-copyright,
        #layBackground > div.layout-background > div.layout-copyright {
            margin-top: auto;
        }
        #QZ_Toolbar_Container > div.top-fix-wrap {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
        }
        #QZ_Toolbar_Container > div.top-fix-wrap > ul,
        #QZ_Toolbar_Container > div.top-fix-wrap > div.user-info,
        #QZ_Toolbar_Container > div.top-fix-wrap > div.top-search,
        #tb_music_li.music-container {
            align-self: center !important;
        }
        #main_feed_container {
            display: flex !important;
        }
        .col-main-feed {
            flex: 1 !important;
        }
        /* 父元素：建立定位上下文 */
        #pageContent {
            position: relative;
        }
        /* 子元素：用 translateX 向左偏移 60px */
        #leftMenu,
        #main_feed_container {
            position: relative;
            transform: translateX(-60px);
        }

        /* 背景颜色设置 */
        .top-fix-bar {
            background-color: #0099FF !important;
        }
        .top-fix-inner,
        .top-fix-container,
        .top-fix-wrap {
            background-color: inherit !important;
        }
        #leftMenu > div.mod-side-nav.mod-side-nav-userCard {
            background: linear-gradient(180deg, #0099FF, #FFFFFF) !important;
        }
        #leftMenu > div.mod-side-nav.mod-side-nav-message {
            background-color: #ffffff !important;
        }
        #QM_Container_31, #QM_Container_3 {
            background-color: #f9f9f9 !important;
        }
        #main_feed_container > div.col-main-sidebar > div.icenter-right-mod.icenter-right-visitor {
            background-color: #ffffff !important;
        }

        /* 边框与阴影设置 */
        #leftMenu > div.mod-side-nav.mod-side-nav-userCard,
        #leftMenu > div.mod-side-nav.mod-side-nav-message,
        #QM_Container_31,
        #QM_Container_3,
        #main_feed_container > div.col-main-sidebar > div.icenter-right-mod.icenter-right-visitor,
        #feed_friend_list > *,
        #feed_friend_list > li.feed_page_container > ul > * {
            border-radius: 12px !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
            border: 1px solid #e0e0e0 !important;
        }

        /* 文字样式设置 - 16px字号 */
        #aIcenter > span,
        #aMainPage > span,
        #aMyFriends > span,
        #aMall > span,
        #QZ_Toolbar_Container > div.top-fix-wrap > div.user-info > a.user-home > span {
            font-size: 16px !important;
            color: #FFFFFF !important;
            font-weight: 500 !important;
        }

        /* 文字样式设置 - 14px字号 */
        #tb_setting_panel > div > a,
        #aHelpCenter,
        #tb_setting_panel > a,
        #securityDefence,
        #tab_menu_friend > div.qz-main > span,
        #tab_menu_care > div.qz-main > span,
        #tab_menu_me > div.qz-main > span,
        #tab_menu_mv > div.qz-main > span,
        #tab_menu_sdc > div.qz-main > span,
        #tab_menu_class > div.qz-main > span,
        #tab_menu_app > div.qz-main > span,
        #tab_menu_fav > div.qz-main > span,
        #QM_3_Title > p > a.title,
        #QM_3_Title > p > a#visitYou,
        #QM_3_info > ul > li > span,
        #QM_3_info > ul > li > a#QM_3_visit_today,
        #QM_3_info > ul > li > a#QM_3_visit_total,
        #today_refuse_visitor > a,
        #today_refuse_visitor > span {
            font-size: 14px !important;
            font-weight: 500 !important;
        }

        /* 当前项文字颜色 */
        #aMainPage.current > span,
        #aMainPage.homepage-link.current > span,
        #aMyFriends.current > span,
        #aMyFriends.homepage-link.current > span,
        #aMall.current > span,
        #aMall.homepage-link.current > span {
            color: #888888 !important;
        }

        /* 图标样式 */
        .ui-icon.icon-icenter,
        .ui-icon.icon-homepage,
        .ui-icon.icon-friend,
        .ui-icon.icon-application,
        .ui-icon.icon-dress-up,
        .ui-icon.icon-logout,
        .ui-icon.icon-search,
        .ui-icon.icon-vip,
        .main-application .icon-blog,
        .main-application .icon-album,
        .main-application .icon-say,
        .drop-down-arrow {
            color: #FFFFFF !important;
            font-size: 18px !important;
        }

        /* 功能模块补充样式 */
        #leftMenu .mod-side-nav-userCard .custom-avatar-modify:hover { text-decoration: none; }
        .icon-vip { display: inline-block; vertical-align: middle; }
        .head-dress { pointer-events: none !important; }
        .icenter-right-visitor .hd h3 .icon-visit { vertical-align: middle; margin-top: -2px; color: #FFC028; }
        .icenter-right-visitor .ft .icon-right {
            width: 12px; height: 12px;
            background: url(//qzonestyle.gtimg.cn/aoi/ui-icon.png) no-repeat -120px -60px;
        }
        .icenter-right-visitor .ft a:hover { text-decoration: underline; color: #3a70e0; }
    `);


    // ================== 功能增强模块 ==================

    /**
     * 模块1：左侧用户信息卡片
     */
    function initUserCard() {
        // 防重复创建
        if (document.querySelector('.mod-side-nav-userCard')) return;

        // 依赖元素选择器
        const dependSelectors = [
            '#leftMenu',
            '#leftMenu > div.mod-side-nav.mod-side-nav-message',
            '#QM_OwnerInfo_Icon',
            '#QM_OwnerInfo_ModifyIcon',
            '#headContainer > div.head-detail > div.head-detail-name > span.user-name.textoverflow',
            '#headContainer > div.head-detail > div.head-detail-name > span.user-vip-info > a.f_user_vip.qz_ichotclick.none'
        ];

        waitForElements(dependSelectors, (elements) => {
            const [
                leftMenu,
                targetNav,
                avatarEl,
                modifyAvatarEl,
                usernameEl,
                vipLinkEl
            ] = Object.values(elements);

            // 必要容器不存在则终止
            if (!leftMenu || document.querySelector('.mod-side-nav-userCard')) return;

            // 提取用户信息
            const userAvatar = avatarEl?.src || 'https://qzonestyle.gtimg.cn/qzone/v8/img/default_avatar.gif';
            const userName = usernameEl?.textContent.trim() || 'QQ空间用户';
            const vipHref = vipLinkEl?.href || 'http://vip.qzone.qq.com?login=qq';

            // 创建用户卡片
            const userCard = document.createElement('div');
            userCard.className = 'mod-side-nav mod-side-nav-userCard';
            userCard.style.cssText = `
                width: 100%; margin: 0 0 12px 0; padding: 30px 12px;
                box-sizing: border-box; border-radius: 4px;
                box-shadow: 0 1px 2px rgba(0,0,0,0.05); z-index: 10;
                width: 250px; height: 250px;
                display: flex;
                flex-direction: column;
                align-items: center;
            `;

            // 卡片内容
            userCard.innerHTML = `
                <div style="position: relative; margin-bottom: 20px; text-align: center;">
                    <a class="custom-avatar-modify" title="更换头像" href="javascript:;" style="display: inline-block; cursor: pointer;">
                        <div class="head-dress" style="pointer-events: none; position: absolute; top: 0; left: 0; width: 100px; height: 100px;"></div>
                        <img src="${userAvatar}" alt="用户头像" style="
                            width: 100px; height: 100px; border-radius: 50%;
                            border: 3px solid #f5f5f5; margin: 0 auto; display: block;
                            transition: border-color 0.2s ease;
                        ">
                    </a>
                </div>
                <div style="text-align: center; margin-bottom: 25px; width: 100%;">
                    <h3 style="
                        font-size: 18px; font-weight: 600; color: #333;
                        margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                        padding: 0 4px;
                    ">${userName}</h3>
                </div>
                <a href="${vipHref}" target="_blank" style="
                    display: block; width: 80%; height: 36px; line-height: 36px;
                    text-align: center; background: #FFC028; color: #fff;
                    font-size: 14px; font-weight: 500; border-radius: 4px;
                    text-decoration: none; transition: background 0.2s ease;
                    margin-top: auto;
                ">
                    <i class="icon-vip" style="margin-right: 4px;"></i>开通黄钻
                </a>
            `;

            // 插入卡片
            if (leftMenu.contains(targetNav)) {
                leftMenu.insertBefore(userCard, targetNav);
            } else {
                leftMenu.prepend(userCard);
            }

            // 绑定头像点击事件
            const customModifyBtn = userCard.querySelector('.custom-avatar-modify');
            if (customModifyBtn && modifyAvatarEl) {
                customModifyBtn.addEventListener('click', () => modifyAvatarEl.click());
                customModifyBtn.addEventListener('mouseenter', () => {
                    const img = customModifyBtn.querySelector('img');
                    if (img) img.style.borderColor = '#FFC028';
                });
                customModifyBtn.addEventListener('mouseleave', () => {
                    const img = customModifyBtn.querySelector('img');
                    if (img) img.style.borderColor = '#f5f5f5';
                });
            }
        }, '用户信息卡片');
    }

    /**
     * 模块2：右侧访客统计
     */
    function initVisitorStats() {
        // 防重复创建
        if (document.querySelector('.icenter-right-visitor')) return;

        // 等待右侧容器
        waitForElement('#main_feed_container > div.col-main-sidebar', (sidebarContainer) => {
            // 数据元素选择器
            const dataSelectors = [
                '#visitorsDiv > div > div > div.today-wrapper > p.visit-today > span',
                '#visitorsDiv > div > div > div.today-wrapper > p.visit-refuse > span',
                '#visitorsDiv > div > div > div.count-wrapper > p > span',
                '#visitorsDiv > div > i',
                '#sidebar-ic-fixed'
            ];

            // 等待数据元素
            waitForElements(dataSelectors, (dataEls) => {
                // 防重复创建
                if (document.querySelector('.icenter-right-visitor')) return;
                
                // 提取数据
                const todayVisitor = dataEls[dataSelectors[0]]?.textContent.trim() || '0';
                const refuseVisitor = dataEls[dataSelectors[1]]?.textContent.trim() || '0';
                const totalVisitor = dataEls[dataSelectors[2]]?.textContent.trim() || '0';
                const visitorIconHtml = dataEls[dataSelectors[3]]?.outerHTML || 
                    '<i class="icon-visit icon-star-0" style="color: #FFC028;"></i>';
                const refEl = dataEls[dataSelectors[4]];

                // 创建统计模块
                const visitorModule = document.createElement('div');
                visitorModule.className = 'icenter-right-mod icenter-right-visitor';
                visitorModule.style.cssText = `
                    width: 100%; margin-bottom: 12px; background: #fff;
                    border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
                    overflow: hidden; box-sizing: border-box;
                `;

                // 模块内容
                visitorModule.innerHTML = `
                    <div class="hd" style="padding: 12px; border-bottom: 1px solid #f5f5f5;">
                        <h3 style="
                            font-size: 16px; font-weight: 600; color: #333;
                            margin: 0; display: flex; align-items: center;
                        ">
                            ${visitorIconHtml}
                            <span style="margin-left: 8px;">访客统计</span>
                        </h3>
                    </div>
                    <div class="bd" style="padding: 12px;">
                        <ul style="list-style: none; margin: 0; padding: 0;">
                            <li style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed #f5f5f5;">
                                <span style="color: #666; font-size: 14px;">今日访客</span>
                                <span style="color: #333; font-size: 14px; font-weight: 500;">${todayVisitor}</span>
                            </li>
                            <li style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px dashed #f5f5f5;">
                                <span style="color: #666; font-size: 14px;">被挡访客</span>
                                <span style="color: #333; font-size: 14px; font-weight: 500;">${refuseVisitor}</span>
                            </li>
                            <li style="display: flex; justify-content: space-between; align-items: center; padding: 8px 0;">
                                <span style="color: #666; font-size: 14px;">访客总量</span>
                                <span style="color: #333; font-size: 14px; font-weight: 500;">${totalVisitor}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="ft" style="padding: 8px 12px; background: #fafafa; border-top: 1px solid #f5f5f5;">
                        <a href="javascript:;" onclick="QZONE.FrontPage.toApp('/friends/visitor/');return false;" 
                        style="color: #4a80f0; font-size: 14px; text-decoration: none;">
                            查看详情 <i class="ui-icon icon-right" style="display: inline-block; margin-left: 4px;"></i>
                        </a>
                    </div>
                `;

                // 插入模块
                if (refEl && sidebarContainer.contains(refEl)) {
                    refEl.nextSibling 
                        ? sidebarContainer.insertBefore(visitorModule, refEl.nextSibling)
                        : sidebarContainer.appendChild(visitorModule);
                } else {
                    sidebarContainer.appendChild(visitorModule);
                }
            });
        });
    }


    // ================== 页面加载与DOM监听 ==================

    // 页面加载完成后处理
    window.addEventListener('load', function() {
        // 重新触发顶部栏样式计算
        const topBar = document.querySelector('.top-fix-bar');
        if (topBar) {
            topBar.style.display = 'none';
            setTimeout(() => {
                topBar.style.display = 'block';
            }, 10);
        }
    });

    // 监听DOM变化，确保动态加载的元素应用样式
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                mutation.addedNodes.forEach(function(node) {
                    if (node.nodeType === 1) { // 元素节点
                        // 可以在这里添加动态元素的样式处理逻辑
                    }
                });
            }
        });
    });
    
    // 开始观察DOM变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });


    // ================== 主执行流程 ==================

    // 隐藏原生干扰元素
    hideElements();
    // 启动增强模块
    initUserCard();
    initVisitorStats();

})();