// ==UserScript==
// @name         Bilibili哔哩哔哩B站主页极简
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  只有5kb,只保留导航和B站首页的前6个（可自行更改）动态卡片，每个视频卡片调整宽度即可调整大小，简单实用。
// @author       极简实用
// @match        https://www.bilibili.com/
// @match        https://www.bilibili.com/?*
// @grant        none
// @license      AGPL
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // 动态添加CSS
    const styleTag = `
        .header-history-video {
            display: flex;
            padding: 10px 20px;
            transition: background-color .3s;
        }

        .header-dynamic-list-item {
            padding: 12px 20px;
            display: flex;
            flex-direction: column;
            cursor: pointer;
            transition: .3s;
        }

        .header-dynamic-container {
            display: flex;
            flex-direction: row;
         }

        .dynamic-name-line {
            display: inline-block;
            font-size: 13px;
            color: var(--text2);
        }

        .header-dynamic-avatar {
            position: relative;
            display: block;
            width: 38px;
            height: 38px;
            border: 2px solid var(--graph_bg_thick);
            border-radius: 50%;
        }

        .header-history-video__image .v-img {
            position: relative;
            flex-shrink: 0;
            margin-right: 10px;
            width: 128px;
            height: 72px;
            border-radius: 4px;
        }

        .red-num--dynamic {
            z-index: 1;
            position: absolute;
            top: -6px;
            left: 25px;
            padding: 0 4px;
            min-width: 15px;
            border-radius: 10px;
            background-color: #fa5a57;
            color: #fff;
            font-size: 12px;
            line-height: 15px;
        }

        .header-dynamic-list-item:hover {
            background-color: var(--graph_bg_thick);
        }


        #simplified-container {
            display: flex;
            flex-direction: column;
            align-items: center;  /* 水平居中 */
            justify-content: center;  /* 垂直居中 */
            padding: 20px;
            min-height: 100vh;  /* 最小高度为视窗高度 */
        }

        #simplified-container > div {
            display: flex;
            flex-wrap: wrap;  /* 允许换行 */
            justify-content: center;
            align-items: center;
            gap: 10px;  /* 控制间距 */
        }

        #simplified-container .v-popover-wrap {
            height: 30px;
            display: flex;
            margin-right: 5px;
            position: relative;
            z-index: 1000;
        }

        #simplified-container .feed-card {
            width: 380px; /* 调整宽度可更改视频大小 */
            margin: 10px;
        }

        /* 增加样式，使 v-popover-wrap 和 nav-search-input 在同一行 */
        #simplified-container .header-search {
            display: flex;
            align-items: center; /* 垂直居中对齐 */
            gap: 10px;  /* 间距 */
        }

        #simplified-container .nav-search-input {
            height: 30px;
            width: 200px;
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    `;
    const styleElement = document.createElement('style');
    styleElement.innerHTML = styleTag;
    document.head.appendChild(styleElement);

    // 选择器，用于定位要保留的元素
    const popoverWrapSelector = '.v-popover-wrap';  // 导航栏中的下拉菜单
    const feedCardSelector = '.feed-card';          // 推荐视频卡片
    const searchInputSelector = '.nav-search-input'; // 搜索框

    // 创建一个容器来放置保留的元素
    function createContainer() {
        const container = document.createElement('div');
        container.id = 'simplified-container';
        document.body.appendChild(container);
        return container;
    }

    // 将需要保留的元素移动到容器中
    function moveElementsToContainer(container) {
        // 创建一个搜索栏和下拉菜单的容器
        const headerRow = document.createElement('div');
        headerRow.className = 'header-search';

        // 移动 v-popover-wrap 和 nav-search-input 到搜索栏容器
        const popoverWraps = document.querySelectorAll(popoverWrapSelector);
        popoverWraps.forEach(popoverWrap => {
            headerRow.appendChild(popoverWrap);
        });

        const searchInput = document.querySelector(searchInputSelector);
        if (searchInput) {
            headerRow.appendChild(searchInput);
        }

        // 创建一个容器用于推荐视频卡片
        const feedRow = document.createElement('div');

        // 移动前6个推荐视频卡片到第二行
        const feedCards = document.querySelectorAll(feedCardSelector);
        for (let i = 0; i < Math.min(6, feedCards.length); i++) {
            feedRow.appendChild(feedCards[i]);
        }

        // 将搜索栏容器和推荐视频卡片容器添加到主容器中
        container.appendChild(headerRow);
        container.appendChild(feedRow);
    }

    // 删除特定元素
    function removeSpecificElements() {
        // 删除导航栏中的特定元素（如头像）
        const elementsToRemove = document.querySelectorAll('.header-avatar-wrap');
        elementsToRemove.forEach(element => {
            if (element.parentNode) {
                element.parentNode.removeChild(element);
            }
        });
    }

    // 删除除保留元素外的所有其他元素
    function cleanPage() {
        // 创建容器
        const container = createContainer();

        // 移动需要保留的元素到容器中
        moveElementsToContainer(container);

        // 删除特定元素
        removeSpecificElements();

        // 删除其他所有元素
        document.body.querySelectorAll('*').forEach(node => {
            if (node !== container && !container.contains(node) && node.parentNode) {
                node.parentNode.removeChild(node);
            }
        });
    }

    // 使用MutationObserver确保在页面元素加载完毕后执行
    function observeDOM(callback) {
        const observer = new MutationObserver((mutations) => {
            const popoverWraps = document.querySelectorAll(popoverWrapSelector);
            if (popoverWraps.length >= 8 && document.querySelector(feedCardSelector)) {
                observer.disconnect(); // 停止观察
                callback();
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    // 开始观察DOM并执行清理操作
    observeDOM(() => {
        cleanPage();
    });

})();