---
interface Props {
	path: string;
}

import { commentConfig } from "@/config";

const config = {
	el: "#twikoo",
	path: Astro.props.path,
	envId: commentConfig.twikoo?.envId,
	lang: commentConfig.twikoo?.lang || "zh-CN",
	region: commentConfig.twikoo?.region,
	visitor: true, // 启用访问统计
};
---

<!-- 简化了配置部分的代码，实际上可以把配置文件统一写入fuwari的配置文件统一读取 -->
<div id="twikoo"></div>
<script define:vars={{ config }}>
  function loadTwikoo() {
    console.log('loadTwikoo function called');
    // 不输出包含敏感信息的配置
    const script = document.createElement("script");
    script.src =
      "https://registry.npmmirror.com/twikoo/1.6.44/files/dist/twikoo.min.js";
    script.defer = true;
    script.onload = () => {
      console.log('Twikoo script loaded, initializing...');
      // 不输出包含敏感信息的配置
    
      // 尝试多种环境ID格式// 在现有的脚本中添加以下修复代码

// 修复表情包定位和点击问题
function fixTwikooEmoji() {
  // 等待 Twikoo 完全加载
  const checkExist = setInterval(function() {
    const buttons = document.querySelectorAll('#twikoo .tk-emoji-btn');
    if (buttons && buttons.length) {
      clearInterval(checkExist);

      // 注入样式（id 防重复）
      if (!document.getElementById('twikoo-emoji-fix-style')) {
        const style = document.createElement('style');
        style.id = 'twikoo-emoji-fix-style';
        style.textContent = `
          #twikoo .tk-emoji-popover {
            position: fixed !important;
            z-index: 99999 !important;
            transform: none !important;
            display: none !important;
            will-change: transform, top, left;
          }

          #twikoo .tk-emoji-popover.tk-emoji-popover-show {
            display: block !important;
          }

          /* 避免父容器溢出剪裁 */
          #twikoo {
            overflow: visible !important;
          }
        `;
        document.head.appendChild(style);
      }

      // 用于重定位的辅助函数
      const positionPopover = (btn, popover) => {
        if (!btn || !popover) return;
        const rect = btn.getBoundingClientRect();
        const left = Math.max(8, rect.left);
        const top = rect.bottom + 6; // 与按钮下方稍微留隙
        popover.style.left = left + 'px';
        popover.style.top = top + 'px';
      };

      // 处理每个按钮，确保点击时定位到视口
      buttons.forEach((btn) => {
        // 去重，避免重复绑定
        if (btn.__twikooEmojiBound) return;
        btn.__twikooEmojiBound = true;

        btn.addEventListener('click', function(e) {
          e.stopPropagation();
          const popover = document.querySelector('#twikoo .tk-emoji-popover');
          if (!popover) return;

          // 切换显示
          const shown = popover.classList.toggle('tk-emoji-popover-show');
          if (shown) {
            positionPopover(btn, popover);
          }
        });
      });

      // 点击空白区域关闭
      document.addEventListener('click', function(e) {
        if (!e.target.closest('#twikoo .tk-emoji-btn') && !e.target.closest('#twikoo .tk-emoji-popover')) {
          const popover = document.querySelector('#twikoo .tk-emoji-popover');
          if (popover) popover.classList.remove('tk-emoji-popover-show');
        }
      });

      // 在滚动或调整大小时重定位当前打开的 popover
      const repositionIfShown = () => {
        const popover = document.querySelector('#twikoo .tk-emoji-popover');
        if (!popover || !popover.classList.contains('tk-emoji-popover-show')) return;
        // 找到与之对应的按钮（靠近左上角的按钮）
        const buttons = Array.from(document.querySelectorAll('#twikoo .tk-emoji-btn'));
        let closest = null;
        let minDist = Infinity;
        const popRect = popover.getBoundingClientRect();
        buttons.forEach((b) => {
          const r = b.getBoundingClientRect();
          const dx = r.left - popRect.left;
          const dy = r.top - popRect.top;
          const d = Math.hypot(dx, dy);
          if (d < minDist) { minDist = d; closest = b; }
        });
        if (closest) positionPopover(closest, popover);
      };

      window.addEventListener('resize', repositionIfShown);
      window.addEventListener('scroll', repositionIfShown, { passive: true });
    }
  }, 100);
}

// 在 DOM 加载完成后调用修复函数
window.addEventListener('DOMContentLoaded', function() {
  setTimeout(fixTwikooEmoji, 2000); // 给 Twikoo 更多时间初始化
});

// 在 Twikoo 初始化完成后再执行一次
document.addEventListener("loadComment", () => {
  setTimeout(fixTwikooEmoji, 1000);
}, { once: true });
      const originalEnvId = config.envId;
      const envIdWithoutProtocol = originalEnvId ? originalEnvId.replace(/^https?:\/\//, '') : '';
    
      // 尝试使用原始URL
      try {
        twikoo.init({
          ...config,
          envId: originalEnvId
        });
      } catch (error) {
        // 尝试使用不带协议的URL
        try {
          twikoo.init({
            ...config,
            envId: envIdWithoutProtocol
          });
        } catch (error) {
          // 最后尝试使用一个简单的字符串
          try {
            // 从原始envId中提取域名部分作为简单ID
            const simpleEnvId = originalEnvId ? 
              originalEnvId.replace(/^https?:\/\//, '').split('.')[0] : 
              'twikoo-env';
            
            twikoo.init({
              ...config,
              envId: simpleEnvId
            });
          } catch (error) {
            // 初始化失败，静默处理
          }
        }
      }
    
      // 全面改进的移动端点击处理
      // 存储触摸开始的信息
      let touchStartInfo = {
        target: null,
        x: 0,
        y: 0,
        time: 0,
        isScrolling: false
      };
      
      // 添加触摸移动事件处理
      const handleTouchMove = function(e) {
        if (!touchStartInfo.target) return;
        
        // 计算移动距离
        const touchMoveX = e.touches[0].clientX;
        const touchMoveY = e.touches[0].clientY;
        const moveDistance = Math.sqrt(
          Math.pow(touchMoveX - touchStartInfo.x, 2) + 
          Math.pow(touchMoveY - touchStartInfo.y, 2)
        );
        
        // 如果移动距离超过阈值，标记为滑动操作
        if (moveDistance > 10) {
          touchStartInfo.isScrolling = true;
        }
      };
      
      const preventDefaultForTwikoo = function(e) {
        const target = e.target.closest('#twikoo button, #twikoo a');
        if (target) {
          // 特别处理href="#"的链接，这些链接会导致页面跳转到顶部
          if (target.tagName === 'A' && 
              (target.getAttribute('href') === '#' || 
               target.getAttribute('href') === '' || 
               target.getAttribute('href') === 'javascript:void(0)' ||
               target.getAttribute('href') === 'javascript:;')) {
            // 替换href属性，防止导航到页面顶部
            if (target.getAttribute('original-href') === null) {
              target.setAttribute('original-href', target.getAttribute('href'));
            }
            target.setAttribute('href', 'javascript:void(0);');
          }
          
          // 处理触摸开始事件
          if (e.type === 'touchstart') {
            // 记录触摸开始的目标元素和位置
            touchStartInfo.target = target;
            touchStartInfo.x = e.touches[0].clientX;
            touchStartInfo.y = e.touches[0].clientY;
            touchStartInfo.time = Date.now();
            touchStartInfo.isScrolling = false;
            
            // 只对空链接阻止默认行为，允许按钮正常工作
            if (target.tagName === 'A' && 
                (target.getAttribute('href') === '#' || 
                 target.getAttribute('href') === '' || 
                 target.getAttribute('href') === 'javascript:void(0)' ||
                 target.getAttribute('href') === 'javascript:;')) {
              e.preventDefault();
            }
          }
          
          // 处理触摸结束事件
          if (e.type === 'touchend') {
            // 如果被标记为滑动操作，不触发点击
            if (touchStartInfo.isScrolling) {
              // 重置触摸信息
              touchStartInfo = {
                target: null,
                x: 0,
                y: 0,
                time: 0,
                isScrolling: false
              };
              return;
            }
            
            // 计算触摸的移动距离和时间
            const touchEndX = e.changedTouches[0].clientX;
            const touchEndY = e.changedTouches[0].clientY;
            const touchEndTime = Date.now();
            
            const moveDistance = Math.sqrt(
              Math.pow(touchEndX - touchStartInfo.x, 2) + 
              Math.pow(touchEndY - touchStartInfo.y, 2)
            );
            const touchDuration = touchEndTime - touchStartInfo.time;
            
            // 检查触摸结束时的元素是否与开始时相同
            const isSameTarget = touchStartInfo.target === target;
            
            // 设置阈值：移动距离小于10px且触摸时间小于300ms视为点击
            const isValidTap = moveDistance < 10 && touchDuration < 300;
            
            // 只有当触摸结束时的元素与开始时相同，且移动距离小于阈值时，才触发点击
            if (isSameTarget && isValidTap) {
              // 只对空链接阻止默认行为，允许按钮正常工作
              if (target.tagName === 'A' && 
                  (target.getAttribute('href') === '#' || 
                   target.getAttribute('href') === '' || 
                   target.getAttribute('href') === 'javascript:void(0)' ||
                   target.getAttribute('href') === 'javascript:;')) {
                e.preventDefault();
                
                // 如果链接有onclick处理函数，手动触发它
                if (typeof target.onclick === 'function') {
                  target.onclick.call(target);
                }
              }
              // 不再阻止按钮的默认行为
            }
            
            // 重置触摸信息
            touchStartInfo = {
              target: null,
              x: 0,
              y: 0,
              time: 0,
              isScrolling: false
            };
          }
        }
      };
      
      // 添加事件监听器
      document.addEventListener('touchstart', preventDefaultForTwikoo, {passive: false, capture: true});
      document.addEventListener('touchmove', handleTouchMove, {passive: true, capture: true});
      document.addEventListener('touchend', preventDefaultForTwikoo, {passive: false, capture: true});
      document.addEventListener('click', function(e) {
        const target = e.target.closest('#twikoo a[href="#"]');
        if (target) {
          e.preventDefault();
          e.stopPropagation();
        }
      }, {capture: true});
    
      // 在Twikoo初始化完成后添加事件处理
      setTimeout(() => {
        setupCommentEventHandlers();
      }, 1000); // 给Twikoo一些时间来渲染评论区
    };
    script.onerror = (error) => {
      // Twikoo 脚本加载失败，静默处理
    };
    document.body.appendChild(script);
  }
  
  // 监听加载评论事件
  document.addEventListener("loadComment", () => {
    loadTwikoo();
  }, { once: true });
  
  // 页面加载完成后自动加载Twikoo（作为备用方案）
  window.addEventListener('DOMContentLoaded', () => {
    console.log('DOMContentLoaded event triggered');
    // 检查是否已经加载过Twikoo
    if (!document.querySelector('script[src*="twikoo.min.js"]')) {
      console.log('Twikoo not loaded yet, loading now...');
      loadTwikoo();
    }
  });
  
  console.log('Twikoo component initialized');
  
  // 设置评论区事件处理函数
  function setupCommentEventHandlers() {
    console.log('Setting up comment event handlers');
    
    // 移除之前可能存在的事件监听器
    document.removeEventListener('click', handleCommentClick);
    
    // 添加新的事件监听器
    document.addEventListener('click', handleCommentClick);
    
    // 使用MutationObserver监听DOM变化
    const observer = new MutationObserver((mutations) => {
      // 当DOM变化时，确保所有新添加的按钮都被正确处理
      console.log('DOM mutations detected in comment area');
    });
    
    // 开始观察评论区的DOM变化
    const twikooElement = document.getElementById('twikoo');
    if (twikooElement) {
      observer.observe(twikooElement, { 
        childList: true, 
        subtree: true,
        attributes: true,
        attributeFilter: ['href', 'onclick']
      });
      console.log('MutationObserver started for #twikoo element');
    }
    
    // 直接修改所有评论区内的链接和按钮
    fixAllCommentButtons();
  }
  
  // 处理评论区内的点击事件
  function handleCommentClick(event) {
    // 检查点击事件是否发生在评论区内
    const twikooElement = event.target.closest('#twikoo');
    if (!twikooElement) return;
    
    // 检查点击的元素是否是按钮或链接
    const clickedElement = event.target.closest('button, a');
    if (!clickedElement) return;
    
    // 获取原始点击事件的目标元素
    const originalTarget = event.target;
    
    // 检查是否是评论提交按钮或其他特殊按钮
    const isSubmitButton = clickedElement.classList.contains('tk-submit') || 
                          clickedElement.classList.contains('el-button--primary') ||
                          clickedElement.getAttribute('type') === 'submit';
    
    // 检查是否是有效的外部链接
    const href = clickedElement.getAttribute('href');
    const isExternalLink = href && href.startsWith('http') && !href.includes('#');
    
    // 只阻止空链接的默认行为，允许其他按钮正常工作
    if (clickedElement.tagName === 'A' && 
        (href === '#' || href === '' || href === 'javascript:void(0)' || href === 'javascript:;')) {
      event.preventDefault();
      console.log('Prevented default action for empty link in comment area');
      
      // 如果元素有onclick属性或事件监听器，手动触发点击逻辑但不导航
      if (typeof clickedElement.onclick === 'function') {
        console.log('Element has onclick handler, executing custom logic without navigation');
        clickedElement.onclick.call(clickedElement);
      }
    }
  }
  
  // 修复所有评论区内的按钮
  function fixAllCommentButtons() {
    console.log('Fixing all comment buttons');
    const twikooElement = document.getElementById('twikoo');
    if (!twikooElement) return;
    
    // 只修复空链接，避免干扰其他正常链接
    const links = twikooElement.querySelectorAll('a');
    links.forEach(link => {
      const href = link.getAttribute('href');
      if (href === '#' || href === '' || href === 'javascript:void(0)') {
        // 替换href属性，防止导航到页面顶部
        link.setAttribute('href', 'javascript:void(0);');
        link.addEventListener('click', (e) => {
          e.preventDefault();
          console.log('Prevented navigation for empty link');
          
          // 如果链接有onclick处理函数，手动触发它
          if (typeof link.onclick === 'function') {
            link.onclick.call(link);
          }
        });
      }
    });
    
    // 不再阻止按钮的默认行为，让它们正常工作
    
    console.log('Fixed all comment buttons');
  }
  
  // 初始的事件监听器设置 - 只处理空链接
  document.addEventListener('click', function(event) {
    // 检查点击事件是否发生在评论区内
    if (event.target.closest('#twikoo')) {
      // 检查点击的元素是否是链接
      const clickedElement = event.target.closest('a');
      if (clickedElement) {
        // 如果是链接且href为#或javascript:void(0)等，阻止默认行为
        if (clickedElement.getAttribute('href') === '#' || 
            clickedElement.getAttribute('href') === 'javascript:void(0)' ||
            clickedElement.getAttribute('href') === '') {
          event.preventDefault();
          console.log('Prevented default action for empty link in comment area');
          
          // 如果链接有onclick处理函数，手动触发它
          if (typeof clickedElement.onclick === 'function') {
            clickedElement.onclick.call(clickedElement);
          }
        }
      }
      
      // 不再阻止按钮的默认行为，让它们正常工作
    }
  });
</script>