---
export interface Props {
  content: string;
}

const { content } = Astro.props;

// 如果没有内容，不渲染组件
if (!content || content.trim() === '') {
  return null;
}
---

{content && (
  <div class="ai-summary">
    <div class="ai-title">
      <div class="ai-title-left">
        <i>🤖</i>
        <span class="ai-title-text">AI 摘要</span>
      </div>
      <div class="ai-tag">fishcpy AI</div>
    </div>
    <div class="ai-explanation" data-content={content}></div>
  </div>
)}

<script>
  // 检查当前页面路径是否包含 "posts"
  function isPostsPage() {
    return window.location.pathname.includes('/posts/');
  }

  // 全局函数，用于初始化AI打字效果
  function initAITyping() {
    // 只在包含 "posts" 的页面才执行AI总结功能
    if (!isPostsPage()) {
      return;
    }

    // 查找所有AI摘要容器
    const aiSummaryContainers = document.querySelectorAll('.ai-summary');
    
    aiSummaryContainers.forEach(container => {
      const textElement = container.querySelector('.ai-explanation');
      
      if (!textElement) {
        return;
      }

      // 检查是否已经初始化过
      if (textElement.hasAttribute('data-initialized')) {
        return;
      }

      const content = textElement.getAttribute('data-content');
      if (!content) {
        return;
      }

      // 标记为已初始化
      textElement.setAttribute('data-initialized', 'true');
      
      // 清空文本内容，准备打字效果
      textElement.textContent = '';
      textElement.classList.remove('typing-complete');
      
      let index = 0;
      const typeSpeed = 30; // 打字速度（毫秒）
      
      function typeWriter() {
        if (index < content.length) {
          textElement.textContent += content.charAt(index);
          index++;
          setTimeout(typeWriter, typeSpeed);
        } else {
          // 打字完成后隐藏光标（通过CSS控制）
          textElement.classList.add('typing-complete');
        }
      }
      
      // 延迟开始打字效果
      setTimeout(typeWriter, 800);
    });
  }

  // 页面加载完成时初始化
  function handlePageLoad() {
    setTimeout(initAITyping, 100);
  }

  // 监听页面导航事件（适用于Astro的客户端路由）
  function setupNavigationListeners() {
    // DOMContentLoaded事件
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', handlePageLoad);
    } else {
      handlePageLoad();
    }

    // 监听Astro的页面导航事件
    document.addEventListener('astro:page-load', handlePageLoad);
    
    // 监听浏览器的popstate事件（后退/前进按钮）
    window.addEventListener('popstate', handlePageLoad);
    
    // 监听pushstate和replacestate事件
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;
    
    history.pushState = function() {
      originalPushState.apply(history, arguments);
      setTimeout(handlePageLoad, 100);
    };
    
    history.replaceState = function() {
      originalReplaceState.apply(history, arguments);
      setTimeout(handlePageLoad, 100);
    };
  }

  // 立即设置监听器
  setupNavigationListeners();
</script>

/* =================== */
/* 📘 AI 摘要模块样式 */
/* =================== */

.ai-summary {
    background: var(--card-bg);
    border: 1px solid var(--line-divider);
    border-radius: 12px;
    padding: 8px 8px 12px 8px;
    line-height: 1.3;
    flex-direction: column;
    margin-bottom: 16px;
    display: flex;
    gap: 5px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.ai-summary:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.ai-summary .ai-explanation {
    z-index: 10;
    padding: 8px 12px;
    font-size: 15px;
    line-height: 1.4;
    @apply text-90;
    text-align: justify;
}

/* ✅ 打字机光标动画 */
.ai-summary .ai-explanation::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 2px;
    margin-left: 2px;
    @apply bg-black/90 dark:bg-white/90;
    vertical-align: bottom;
    animation: blink-underline 1s ease-in-out infinite;
    transition: all 0.3s;
    position: relative;
    bottom: 3px;
}

/* 打字完成后隐藏光标 */
.ai-summary .ai-explanation.typing-complete::after {
    display: none;
}

.ai-summary .ai-title {
    z-index: 10;
    font-size: 14px;
    display: flex;
    border-radius: 8px;
    align-items: center;
    position: relative;
    padding: 0 12px;
    cursor: default;
    user-select: none;
}

.ai-summary .ai-title .ai-title-left {
    display: flex;
    align-items: center;
    color: var(--primary);
}

.ai-summary .ai-title .ai-title-left i {
    margin-right: 3px;
    display: flex;
    color: var(--primary);
    border-radius: 20px;
    justify-content: center;
    align-items: center;
}

.ai-summary .ai-title .ai-title-left .ai-title-text {
    font-weight: 500;
}

.ai-summary .ai-title .ai-tag {
    color: var(--btn-content);
    font-weight: 300;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

/* ✅ 打字机光标闪烁动画 */
@keyframes blink-underline {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}