// ==UserScript==
// @name         DeepSeek 代码块增强
// @namespace    https://docs.scriptcat.org/
// @version      2.1.0
// @description  代码块自动折叠，左侧导航面板，点击导航仅滚动定位并高亮
// @author       ZZW
// @match        https://chat.deepseek.com/*
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // ==================== 全局样式（合并两个脚本的样式） ====================
    GM_addStyle(`
        /* ----- 折叠按钮样式 ----- */
        .ds-fold-btn {
            background: transparent;
            border: none;
            border-radius: 12px;
            font-size: 13px;
            padding: 4px 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            font-family: system-ui, -apple-system, 'Segoe UI', monospace;
            user-select: none;
            display: inline-flex;
            align-items: center;
            gap: 2px;
            margin-left: 0;
            opacity: 0.7;
        }
        .ds-fold-btn:hover {
            background: rgba(128, 128, 128, 0.2);
            opacity: 1;
        }
        .ds-fold-btn .fold-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
        }
        .ds-fold-btn svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        .efa13877 .ds-fold-btn {
            margin-left: 4px;
        }

        /* ----- 导航面板样式 ----- */
        @keyframes code-flash-anim {
            0% { box-shadow: 0 0 0 0 rgba(77, 107, 254, 0); border-color: transparent; }
            20% { box-shadow: 0 0 12px 2px rgba(77, 107, 254, 0.6); border-color: #4d6bfe; }
            100% { box-shadow: 0 0 0 0 rgba(77, 107, 254, 0); border-color: transparent; }
        }
        .ds-code-flash-active {
            animation: code-flash-anim 1.5s ease-out forwards;
            border: 2px solid transparent !important;
        }

        .ds-code-nav-panel {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 200px;
            max-height: 70vh;
            background: rgba(30, 30, 30, 0.85);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 24px rgba(0,0,0,0.3);
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.1);
            z-index: 1000;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transition: opacity 0.3s, transform 0.3s;
        }
        .ds-code-nav-panel:hover {
            background: rgba(30, 30, 30, 0.95);
            box-shadow: 0 4px 30px rgba(0,0,0,0.5);
        }
        .ds-code-nav-header {
            padding: 12px 14px;
            font-weight: 600;
            font-size: 13px;
            color: rgba(255,255,255,0.9);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .ds-code-nav-list {
            flex: 1;
            overflow-y: auto;
            padding: 6px 0;
        }
        .ds-code-nav-list::-webkit-scrollbar {
            width: 3px;
        }
        .ds-code-nav-list::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 3px;
        }
        .ds-code-nav-item {
            padding: 8px 14px;
            cursor: pointer;
            font-size: 12px;
            color: rgba(255,255,255,0.7);
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-left: 3px solid transparent;
        }
        .ds-code-nav-item:hover {
            background: rgba(77, 107, 254, 0.2);
            color: #fff;
            border-left-color: #4d6bfe;
        }
        .ds-code-nav-item-icon {
            font-size: 11px;
            opacity: 0.6;
            font-family: monospace;
        }
    `);

    // ==================== 折叠模块 ====================
    const foldThreshold = 20;       // 自动折叠阈值（行数）
    const processedAttr = 'data-fold-processed';

    // 辅助函数：获取代码行数
    function getLineCount(preEl) {
        const text = preEl.innerText || preEl.textContent || '';
        let lines = text.split('\n');
        if (lines.length > 0 && lines[lines.length - 1] === '') lines.pop();
        return lines.length || 1;
    }

    // 折叠代码块（完全隐藏）
    function collapseBlock(preEl, btn) {
        if (!preEl.dataset.origDisplay) {
            preEl.dataset.origDisplay = window.getComputedStyle(preEl).display;
        }
        preEl.style.display = 'none';
        const iconDiv = btn.querySelector('.fold-icon');
        if (iconDiv) iconDiv.innerHTML = ICON_CHEVRON_UP;
        btn.querySelector('span').textContent = btnTextUnfold;
        btn.setAttribute('aria-label', '展开代码块');
    }

    // 展开代码块（恢复显示）
    function expandBlock(preEl, btn) {
        preEl.style.display = preEl.dataset.origDisplay || '';
        const iconDiv = btn.querySelector('.fold-icon');
        if (iconDiv) iconDiv.innerHTML = ICON_CHEVRON_DOWN;
        btn.querySelector('span').textContent = btnTextFold;
        btn.setAttribute('aria-label', '折叠代码块');
    }

    // 查找按钮容器
    function findButtonContainer(preEl) {
        let parent = preEl.closest('.md-code-block');
        if (!parent) return null;
        let btnGroup = parent.querySelector('.efa13877');
        if (btnGroup) return btnGroup;
        btnGroup = parent.querySelector('[class*="button-group"], [class*="actions"], [class*="buttons"]');
        return btnGroup || null;
    }

    // 创建折叠按钮
    function createFoldButton(preEl) {
        if (!preEl.dataset.origDisplay) {
            preEl.dataset.origDisplay = window.getComputedStyle(preEl).display;
        }

        const shouldAutoFold = getLineCount(preEl) > foldThreshold;
        let isFolded = false;

        if (shouldAutoFold) {
            preEl.style.display = 'none';
            isFolded = true;
        }

        const btn = document.createElement('button');
        btn.className = 'ds-fold-btn';

        const iconDiv = document.createElement('div');
        iconDiv.className = 'fold-icon';
        iconDiv.innerHTML = isFolded ? ICON_CHEVRON_UP : ICON_CHEVRON_DOWN;

        const textSpan = document.createElement('span');
        textSpan.textContent = isFolded ? btnTextUnfold : btnTextFold;

        btn.appendChild(iconDiv);
        btn.appendChild(textSpan);
        btn.setAttribute('aria-label', isFolded ? '展开代码块' : '折叠代码块');

        // 存储按钮到 pre 元素上，供导航模块使用（可选，本版本不自动展开，但保留以备后续）
        preEl._foldBtn = btn;

        btn.addEventListener('click', (e) => {
            e.stopPropagation();
            const currentlyFolded = preEl.style.display === 'none';
            if (currentlyFolded) {
                expandBlock(preEl, btn);
            } else {
                collapseBlock(preEl, btn);
            }
        });
        return btn;
    }

    // 为单个代码块添加按钮
    function addFoldButtonToCodeBlock(preEl) {
        if (preEl.hasAttribute(processedAttr)) return;

        const targetContainer = findButtonContainer(preEl);
        if (targetContainer) {
            if (targetContainer.querySelector('.ds-fold-btn')) {
                preEl.setAttribute(processedAttr, 'true');
                return;
            }
            targetContainer.appendChild(createFoldButton(preEl));
        } else {
            const wrapper = document.createElement('div');
            wrapper.className = 'ds-fold-btn-wrapper';
            wrapper.style.textAlign = 'right';
            wrapper.style.marginBottom = '6px';
            wrapper.appendChild(createFoldButton(preEl));
            preEl.parentNode.insertBefore(wrapper, preEl);
        }
        preEl.setAttribute(processedAttr, 'true');
    }

    // 清理旧的包装器
    function removeOldFoldWrappers() {
        document.querySelectorAll('.ds-fold-btn-wrapper').forEach(w => w.remove());
    }

    // 重置处理标记
    function resetProcessedFlags() {
        document.querySelectorAll(`[${processedAttr}]`).forEach(block => block.removeAttribute(processedAttr));
    }

    // 清理重复按钮
    function cleanDuplicateButtons() {
        document.querySelectorAll('.efa13877').forEach(container => {
            const btns = container.querySelectorAll('.ds-fold-btn');
            if (btns.length > 1) {
                for (let i = 1; i < btns.length; i++) btns[i].remove();
            }
        });
    }

    // 处理所有代码块
    function processAllCodeBlocks() {
        removeOldFoldWrappers();
        resetProcessedFlags();
        cleanDuplicateButtons();

        document.querySelectorAll('pre').forEach(block => {
            if (!block.hasAttribute(processedAttr)) {
                addFoldButtonToCodeBlock(block);
            }
        });
    }

    // 监听动态添加的代码块（折叠模块的 Observer）
    function observeCodeBlocksForFold() {
        const observer = new MutationObserver((mutations) => {
            let needProcess = false;
            for (const mutation of mutations) {
                if (mutation.type === 'childList' && mutation.addedNodes.length) {
                    for (const node of mutation.addedNodes) {
                        if (node.nodeType === Node.ELEMENT_NODE) {
                            if (node.matches && node.matches('pre')) {
                                if (!node.hasAttribute(processedAttr)) {
                                    addFoldButtonToCodeBlock(node);
                                }
                                needProcess = true;
                            }
                            if (node.querySelectorAll) {
                                const innerBlocks = node.querySelectorAll('pre');
                                innerBlocks.forEach(block => {
                                    if (!block.hasAttribute(processedAttr)) {
                                        addFoldButtonToCodeBlock(block);
                                    }
                                });
                                if (innerBlocks.length) needProcess = true;
                            }
                        }
                    }
                }
            }
            if (needProcess) {
                processAllCodeBlocks();
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }

    // ==================== 导航模块（无自动展开） ====================
    const PARENT_SELECTOR = '#root > div > div > div.c3ecdb44 > div._7780f2e > div';
    let navPanel = null;
    let clickPending = false;

    // 获取所有代码块信息（实时）
    const getCodeBlocksInfo = () => {
        const blocks = [];
        document.querySelectorAll('.md-code-block').forEach((block, index) => {
            const langSpan = block.querySelector('span.d813de27, .code-language, [class*="language"]');
            const lang = langSpan ? langSpan.textContent.trim() : 'Code';
            const pre = block.querySelector('pre');
            let firstLine = '';
            if (pre) {
                const text = pre.innerText || pre.textContent;
                firstLine = text.split('\n')[0]?.substring(0, 20) || '';
            }
            blocks.push({
                element: block,
                preElement: pre,  // 保存 pre 引用（仅用于显示信息，不用于自动展开）
                label: `${lang} #${index + 1}`,
                preview: firstLine ? `// ${firstLine}...` : ''
            });
        });
        return blocks;
    };

    // 闪烁高亮（作用于 .md-code-block）
    const triggerFlash = (element) => {
        if (!element) return;
        element.classList.remove('ds-code-flash-active');
        void element.offsetWidth;
        element.classList.add('ds-code-flash-active');
        setTimeout(() => element.classList.remove('ds-code-flash-active'), 1500);
    };

    // 渲染导航列表
    const renderNavList = () => {
        if (!navPanel) return;
        const blocks = getCodeBlocksInfo();
        const listContainer = navPanel.querySelector('.ds-code-nav-list');
        if (blocks.length === 0) {
            navPanel.style.display = 'none';
            return;
        }
        navPanel.style.display = 'flex';
        listContainer.innerHTML = '';

        blocks.forEach((block, idx) => {
            const item = document.createElement('div');
            item.className = 'ds-code-nav-item';
            item.setAttribute('data-code-index', idx);
            item.title = block.preview || block.label;

            const icon = document.createElement('span');
            icon.className = 'ds-code-nav-item-icon';
            icon.textContent = '</>';

            const labelSpan = document.createElement('span');
            labelSpan.textContent = block.label;
            labelSpan.style.overflow = 'hidden';
            labelSpan.style.textOverflow = 'ellipsis';

            item.appendChild(icon);
            item.appendChild(labelSpan);

            item.addEventListener('click', async (e) => {
                e.stopPropagation();
                if (clickPending) return;
                clickPending = true;

                try {
                    // 重新获取最新的块信息（避免索引失效）
                    const currentBlocks = getCodeBlocksInfo();
                    const targetBlock = currentBlocks[parseInt(item.getAttribute('data-code-index'))];
                    if (!targetBlock || !targetBlock.element) {
                        console.warn('代码块不存在，可能已被移除');
                        return;
                    }
                    const { element } = targetBlock;

                    // 滚动到视图中央（即使代码块折叠也能定位到容器）
                    element.scrollIntoView({ behavior: 'smooth', block: 'center' });

                    // 延迟闪烁，确保滚动完成后再高亮
                    setTimeout(() => triggerFlash(element), 300);
                } finally {
                    setTimeout(() => { clickPending = false; }, 500);
                }
            });
            listContainer.appendChild(item);
        });
    };

    // 初始化导航面板
    const initNavPanel = () => {
        if (navPanel) return;
        let parent = document.querySelector(PARENT_SELECTOR);
        if (!parent) return;

        if (getComputedStyle(parent).position === 'static') parent.style.position = 'relative';

        navPanel = document.createElement('div');
        navPanel.className = 'ds-code-nav-panel';
        const header = document.createElement('div');
        header.className = 'ds-code-nav-header';
        header.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> 代码导航`;
        const listContainer = document.createElement('div');
        listContainer.className = 'ds-code-nav-list';
        navPanel.appendChild(header);
        navPanel.appendChild(listContainer);
        parent.appendChild(navPanel);
        renderNavList();
    };

    // 防抖更新导航列表
    let updateTimer = null;
    const debouncedRenderNav = () => {
        if (updateTimer) clearTimeout(updateTimer);
        updateTimer = setTimeout(() => {
            if (navPanel) renderNavList();
            updateTimer = null;
        }, 200);
    };

    // 启动导航模块的观察器（监听 DOM 变化，更新列表）
    const startNavObserver = () => {
        // 等待父容器出现
        const waitForParent = setInterval(() => {
            if (document.querySelector(PARENT_SELECTOR)) {
                initNavPanel();
                clearInterval(waitForParent);
            }
        }, 500);

        // 监听变化，更新导航列表
        const observer = new MutationObserver(debouncedRenderNav);
        setTimeout(() => {
            observer.observe(document.body, { childList: true, subtree: true });
        }, 1000);
    };

    // ==================== 全局初始化 ====================
    function init() {
        // 初始化折叠功能
        processAllCodeBlocks();
        observeCodeBlocksForFold();

        // 初始化导航功能（不包含自动展开）
        startNavObserver();
    }

    // 等待页面加载完成后启动
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }

    // 常量定义（放在最后避免变量提升干扰）
    const btnTextFold = '折叠';
    const btnTextUnfold = '展开';
    const ICON_CHEVRON_DOWN = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="20" height="20" fill="currentColor"><path d="M297.4 470.6C309.9 483.1 330.2 483.1 342.7 470.6L534.7 278.6C547.2 266.1 547.2 245.8 534.7 233.3C522.2 220.8 501.9 220.8 489.4 233.3L320 402.7L150.6 233.4C138.1 220.9 117.8 220.9 105.3 233.4C92.8 245.9 92.8 266.2 105.3 278.7L297.3 470.7z"/></svg>`;
    const ICON_CHEVRON_UP = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="20" height="20" fill="currentColor"><path d="M297.4 169.4C309.9 156.9 330.2 156.9 342.7 169.4L534.7 361.4C547.2 373.9 547.2 394.2 534.7 406.7C522.2 419.2 501.9 419.2 489.4 406.7L320 237.3L150.6 406.6C138.1 419.1 117.8 419.1 105.3 406.6C92.8 394.1 92.8 373.8 105.3 361.3L297.3 169.3z"/></svg>`;
})();