// ==UserScript==
// @name         bgm相关回复跳转
// @version      0.3
// @description  在web自动识别贴贴过的帖子，提供跳转。
// @match        https://bgm.tv/ep/*
// @match        https://bangumi.tv/ep/*
// @match        https://chii.in/ep/*
// @grant        none
// @license      MIT
// @namespace    bgm_jump_related_post
// @downloadURL none
// ==/UserScript==


// 几个todo，目前自己没这个需求，暂时简化。如果有人需要可以说一声：
// - [ ] 除了贴贴也支持回复的跳转
// - [ ] 暂时只支持番剧吐槽页面，主要是觉得别的页面也没必要。
// - [ ] 暂时只处理每层回复的一楼，这个主要是暂时懒得做先简化一下。也就是不支持比如说第二楼的所有回复贴贴。

(function () {
    'use strict';

    const selfUserId = $('.avatar').attr('href').split('/').pop();
    // 先完成遍历处理第一层的逻辑
    const replyList = $('#comment_list>div');  // 得到所有首层回复
    let relatedPostIds = [];  // 筛选最终跟当前用户相关的id

    // replyList.slice(0, 2).each(function () {  // 调试场景只看前三个帖子
    replyList.each(function () {  // 逐个过滤
        if (checkReplyElementRelated(selfUserId, $(this))) {
            relatedPostIds.push($(this).attr('id'));
        }
    });

    // console.log(relatedPostIds);
    const component = createJumpComponent(relatedPostIds);
    const columnEPB = $('#columnEpB')
    columnEPB.append(component);
})();

// 检查当前回复元素的「贴贴」里边是否包含当前用户id
function checkReplyElementRelated(userId, element) {
    // 先在这个元素内继续选择 `a.item.selected`
    // const likesGridItem = element.find('a.item.selected');
    const innerDiv = element.children().eq(2)

    // 这个元素里的 title 包含所有 贴贴元素的 HTML 文本，每个 `<a>` 就是一种类型的贴贴
    const likesGridItemAs = innerDiv.find('.reply_content').children().eq(1).children();
    if (likesGridItemAs.length === 0) {
        return false;
    }

    let found = false;
    likesGridItemAs.each(function () {
        const title = $(this).attr('title');
        if (checkUserIdInTitle(userId, title)) {
            found = true;
            return false;  // break loop
            // ! 这里才是坑，里边有个回调函数，return true 会直接返回到这个回调函数，而不是外层的函数
        }
    });

    return found;
}

function checkUserIdInTitle(userId, title) {
    const regex = /\/user\/(\w+)/g;
    let match;
    while ((match = regex.exec(title)) !== null) {
        if (match[1] === userId) {
            return true;
        }
    }
    return false;
}

function createJumpComponent(postIds) {
    // Basic CSS for styling the component
    const styles = `
        <style>
            :root {
                --jump-bg-color: #f9f9f9;
                --jump-border-color: #ccc;
                --jump-text-color: #333;
                --jump-link-color: #3498db;
                --jump-link-hover-color: #1abc9c;
                --jump-link-active-color: #e74c3c;
                --jump-shadow-color: rgba(0, 0, 0, 0.1);
            }
            
            @media (prefers-color-scheme: dark) {
                :root {
                    --jump-bg-color: #2c2c2c;
                    --jump-border-color: #444;
                    --jump-text-color: #eee;
                    --jump-link-color: #5dade2;
                    --jump-link-hover-color: #48c9b0;
                    --jump-link-active-color: #ec7063;
                    --jump-shadow-color: rgba(0, 0, 0, 0.3);
                }
            }
            
            .jump-component {
                position: fixed;
                top: 30%;
                right: 40px;
                width: 20%;
                padding: 10px;
                border: 1px solid var(--jump-border-color);
                border-radius: 8px;
                background-color: var(--jump-bg-color);
                box-shadow: 0 4px 8px var(--jump-shadow-color);
                color: var(--jump-text-color);
                transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
            }
            .jump-component ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .jump-component li {
                margin: 5px 0;
                display: flex;
                align-items: center;
            }
            .jump-component li::before {
                content: "•";
                color: var(--jump-link-color);
                font-weight: bold;
                display: inline-block;
                width: 1em;
                margin-right: 0.5em;
                transition: color 0.3s ease;
            }
            .jump-component a {
                color: var(--jump-link-color);
                text-decoration: none;
                font-weight: 500;
                transition: color 0.3s ease, transform 0.3s ease;
                flex-grow: 1;
            }
            .jump-component a:hover {
                color: var(--jump-link-hover-color);
                transform: translateX(5px);
            }
            .jump-component a:active {
                color: var(--jump-link-active-color);
            }
        </style>
    `;

    // HTML for the component
    const linksHtml = postIds.map(link => `<li><a href="#${link}" target="_self">${link}</a></li>`).join('');
    const componentHtml = `
    <div class="jump-component">
        <p>贴贴过的回复跳转</p>
        <ul>
            ${linksHtml}
        </ul>
    </div>
    `;
    return styles + componentHtml;
}