/* 选中弹出按钮样式 */
#selection-popup {
    position: fixed;
    display: none;
    background: rgba(30, 30, 30, 0.9);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    z-index: 2147483647; /* 堆叠层级拉满 */
    transform: translate(-50%, -100%);
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: opacity 0.2s, transform 0.2s;
    font-weight: 500;
    line-height: 1.4;
    user-select: none;
    -webkit-user-select: none;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    will-change: transform, opacity; /* 性能优化关键 */
    animation: popIn 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

/* 弹出动画 */
@keyframes popIn {
    0% { transform: translate(-50%, -80%) scale(0.9); opacity: 0; }
    100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}

/* 小三角箭头 */
#selection-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    border-color: rgba(30, 30, 30, 0.9) transparent transparent transparent;
}

/* 悬停效果 */
#selection-popup:hover {
    transform: translate(-50%, -110%) scale(1.05);
    background: #000;
    box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

/* 暗黑模式适配 */
[data-theme="dark"] #selection-popup {
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

[data-theme="dark"] #selection-popup::after {
    border-color: rgba(255, 255, 255, 0.95) transparent transparent transparent;
}

[data-theme="dark"] #selection-popup:hover {
    background: #fff;
}

document.addEventListener('DOMContentLoaded', function() {
    initSelectionPopup();
});

let selectionPopup = null;
let selectionTimeout;

function initSelectionPopup() {
    // 避免重复创建
    if (document.getElementById('selection-popup')) return;

    // 动态创建按钮
    selectionPopup = document.createElement('div');
    selectionPopup.id = 'selection-popup';
    // 这里用了 RemixIcon，你可以换成你自己的图标库
    selectionPopup.innerHTML = '<i class="ri-chat-quote-line"></i> <span>引用评论</span>';
    document.body.appendChild(selectionPopup);

    // 防止在按钮上点击时触发选区清除
    selectionPopup.addEventListener('mousedown', function(e) {
        e.preventDefault();
        e.stopPropagation();
    });

    // 点击按钮的逻辑
    selectionPopup.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        let selection = window.getSelection().toString();
        if (selection) {
            // 简单的文本清理
            selection = selection.split('\n')
                .map(line => line.trim())
                .filter(line => line !== '')
                .join('\n');
                
            // 限制长度，防止太长刷屏
            if (selection.length > 500) {
                 selection = selection.substring(0, 500) + '...';
            }

            scrollToCommentsAndQuote(selection);
            hideSelectionPopup();
            window.getSelection().removeAllRanges(); // 清除选区
        }
    });

    // 监听全局选择事件
    document.addEventListener('mouseup', handleSelectionChange);
    document.addEventListener('keyup', handleSelectionChange);
    
    // 页面滚动时隐藏
    document.addEventListener('scroll', hideSelectionPopup, { passive: true });
}

function hideSelectionPopup() {
    if (selectionPopup) {
        selectionPopup.style.display = 'none';
    }
}

function handleSelectionChange(e) {
    // 防抖处理，别频繁触发
    clearTimeout(selectionTimeout);
    selectionTimeout = setTimeout(() => {
        const selection = window.getSelection();
        const text = selection.toString().trim();
        // 记得改成你文章容器的类名，我这里是 .post-content
        const content = document.querySelector('.post-content'); 
        
        if (!selectionPopup || !content) return;

        // 没选中文字就隐藏
        if (!text || selection.rangeCount === 0) {
            hideSelectionPopup();
            return;
        }

        const range = selection.getRangeAt(0);
        
        // 确保选中的是文章里的内容，别把侧边栏也选进去了
        if (!content.contains(range.commonAncestorContainer)) {
            hideSelectionPopup();
            return;
        }

        // 使用 requestAnimationFrame 优化 UI 更新
        requestAnimationFrame(() => {
            selectionPopup.style.display = 'flex'; 

            // 定位逻辑：鼠标抬起时跟随鼠标，键盘选择时跟随选区
            if (e && e.type === 'mouseup') {
                // 直接用鼠标坐标，比 getBoundingClientRect 性能好多了
                selectionPopup.style.top = `${e.clientY - 40}px`; 
                selectionPopup.style.left = `${e.clientX}px`;
            } else {
                // 键盘操作没办法，只能计算矩形了
                const rect = range.getBoundingClientRect();
                if (rect.width === 0 || rect.height === 0) {
                    hideSelectionPopup();
                    return;
                }
                selectionPopup.style.top = `${rect.top}px`; 
                selectionPopup.style.left = `${rect.left + rect.width / 2}px`;
            }
        });
    }, 150);
}

// 跳转评论区并填充内容
function scrollToCommentsAndQuote(text) {
    const comments = document.getElementById('Comments'); // 评论区 ID
    if (comments) {
        comments.scrollIntoView({ behavior: 'smooth' });
        
        // 等滚动完了再填内容
        setTimeout(() => {
             const textarea = document.querySelector('.atk-textarea'); // Artalk 输入框 class
             if (textarea) {
                 const quote = `> ${text}\n\n`;
                 textarea.value = quote;
                 textarea.focus();
                 
                 // 触发 input 事件，适配 Vue/React 框架的数据绑定
                textarea.dispatchEvent(new Event('input', { bubbles: true }));
                textarea.dispatchEvent(new Event('change', { bubbles: true }));
            }
       }, 500);
   }
}