/**
 * 更多选项组件
 * 包含用户手册和用户反馈入口
 */

/**
 * 获取更多选项组件的 HTML 内容
 */
export function getMoreOptionsComponentContent(): string {
  return `
    <div class="more-options-wrapper">
      <!-- 更多选项下拉面板 -->
      <div class="more-options-dropdown" id="moreOptionsDropdown">
        <div class="more-options-content">
          <div class="more-options-header">
            <span class="more-options-title">更多选项</span>
          </div>

          <div class="more-options-body">
            <div class="more-option-item" id="userManualOption">
              <div class="option-icon">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z" fill="currentColor"/>
                </svg>
              </div>
              <div class="option-text">
                <div class="option-label">用户手册</div>
                <div class="option-desc">查看使用文档和帮助</div>
              </div>
            </div>

            <div class="more-option-item" id="userFeedbackOption">
              <div class="option-icon">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z" fill="currentColor"/>
                </svg>
              </div>
              <div class="option-text">
                <div class="option-label">用户反馈</div>
                <div class="option-desc">提交问题和建议</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 用户反馈二维码弹窗 -->
      <div class="feedback-qrcode-modal" id="feedbackQRCodeModal">
        <div class="feedback-qrcode-overlay" onclick="closeFeedbackQRCode()"></div>
        <div class="feedback-qrcode-content">
          <div class="feedback-qrcode-header">
            <span class="feedback-qrcode-title">用户反馈</span>
            <button class="feedback-qrcode-close" onclick="closeFeedbackQRCode()">
              <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="currentColor"/>
              </svg>
            </button>
          </div>
          <div class="feedback-qrcode-body">
            <img class="feedback-qrcode-image" id="feedbackQRCodeImage" alt="微信二维码" />
            <p class="feedback-qrcode-text">扫描二维码添加微信反馈</p>
          </div>
        </div>
      </div>
    </div>
  `;
}

/**
 * 获取更多选项组件的 CSS 样式
 */
export function getMoreOptionsComponentStyles(): string {
  return `
    .more-options-wrapper {
      position: relative;
    }

    /* 更多选项下拉面板 */
    .more-options-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 10000;
      min-width: 200px;
    }

    .more-options-dropdown.active {
      display: block;
      animation: dropdownSlideIn 0.15s ease-out;
    }

    @keyframes dropdownSlideIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .more-options-content {
      background: var(--vscode-dropdown-background);
      border: 1px solid var(--vscode-dropdown-border);
      border-radius: 6px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
      overflow: hidden;
    }

    .more-options-header {
      display: none;
    }

    .more-options-body {
      padding: 4px;
    }

    .more-option-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      cursor: pointer;
      transition: background 0.15s ease;
      border-radius: 4px;
    }

    .more-option-item:hover {
      background: var(--vscode-list-hoverBackground);
    }

    .more-option-item:active {
      background: var(--vscode-list-activeSelectionBackground);
    }

    .option-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.8;
    }

    .option-icon svg {
      width: 16px;
      height: 16px;
      color: var(--vscode-foreground);
    }

    .option-text {
      flex: 1;
    }

    .option-label {
      font-size: 13px;
      color: var(--vscode-foreground);
    }

    .option-desc {
      display: none;
    }

    /* 用户反馈二维码弹窗 */
    .feedback-qrcode-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 20000;
      align-items: center;
      justify-content: center;
    }

    .feedback-qrcode-modal.active {
      display: flex;
      animation: fadeIn 0.2s ease-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    .feedback-qrcode-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      cursor: pointer;
    }

    .feedback-qrcode-content {
      position: relative;
      background: var(--vscode-editor-background);
      border: 1px solid var(--vscode-widget-border);
      border-radius: 8px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
      max-width: 400px;
      width: 90%;
      animation: slideUp 0.2s ease-out;
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .feedback-qrcode-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid var(--vscode-widget-border);
    }

    .feedback-qrcode-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--vscode-foreground);
    }

    .feedback-qrcode-close {
      width: 28px;
      height: 28px;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
    }

    .feedback-qrcode-close:hover {
      background: var(--vscode-toolbar-hoverBackground);
    }

    .feedback-qrcode-close svg {
      width: 16px;
      height: 16px;
      color: var(--vscode-foreground);
    }

    .feedback-qrcode-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .feedback-qrcode-image {
      width: 200px;
      height: 200px;
      border: 1px solid var(--vscode-widget-border);
      border-radius: 8px;
    }

    .feedback-qrcode-text {
      margin: 0;
      font-size: 13px;
      color: var(--vscode-descriptionForeground);
      text-align: center;
    }
  `;
}

/**
 * 获取更多选项组件的 JavaScript 脚本
 */
export function getMoreOptionsComponentScript(): string {
  return `
    // 切换更多选项下拉面板
    function toggleMoreOptionsDropdown() {
      const dropdown = document.getElementById('moreOptionsDropdown');
      const moreButton = document.querySelector('.more-button');

      if (dropdown) {
        const isActive = dropdown.classList.contains('active');
        if (isActive) {
          dropdown.classList.remove('active');
          if (moreButton) {
            moreButton.classList.remove('active');
          }
        } else {
          dropdown.classList.add('active');
          if (moreButton) {
            moreButton.classList.add('active');
          }
        }
      }
    }

    // 关闭更多选项下拉面板
    function closeMoreOptionsDropdown() {
      const dropdown = document.getElementById('moreOptionsDropdown');
      const moreButton = document.querySelector('.more-button');

      if (dropdown) {
        dropdown.classList.remove('active');
      }
      if (moreButton) {
        moreButton.classList.remove('active');
      }
    }

    // 打开用户手册
    function openUserManual() {
      console.log('打开用户手册');
      vscode.postMessage({ command: 'openUserManual' });
      closeMoreOptionsDropdown();
    }

    // 打开用户反馈
    function openUserFeedback() {
      console.log('打开用户反馈');
      vscode.postMessage({ command: 'openUserFeedback' });
      closeMoreOptionsDropdown();
    }

    // 显示用户反馈二维码弹窗
    function showFeedbackQRCode() {
      const modal = document.getElementById('feedbackQRCodeModal');
      if (modal) {
        modal.classList.add('active');
      }
    }

    // 关闭用户反馈二维码弹窗
    function closeFeedbackQRCode() {
      const modal = document.getElementById('feedbackQRCodeModal');
      if (modal) {
        modal.classList.remove('active');
      }
    }

    // 绑定更多选项事件
    document.addEventListener('DOMContentLoaded', () => {
      // 绑定用户手册选项
      const userManualOption = document.getElementById('userManualOption');
      if (userManualOption) {
        userManualOption.addEventListener('click', openUserManual);
      }

      // 绑定用户反馈选项
      const userFeedbackOption = document.getElementById('userFeedbackOption');
      if (userFeedbackOption) {
        userFeedbackOption.addEventListener('click', openUserFeedback);
      }

      // 点击页面其他地方关闭下拉面板
      document.addEventListener('click', (e) => {
        const dropdown = document.getElementById('moreOptionsDropdown');
        const moreButton = document.querySelector('.more-button');
        const moreContainer = document.querySelector('.more-container');

        if (dropdown && dropdown.classList.contains('active')) {
          // 如果点击的不是更多按钮和下拉面板内容，则关闭
          if (!moreContainer?.contains(e.target)) {
            closeMoreOptionsDropdown();
          }
        }
      });

      // 阻止下拉面板内容点击事件冒泡
      const dropdownContent = document.querySelector('.more-options-content');
      if (dropdownContent) {
        dropdownContent.addEventListener('click', (e) => {
          e.stopPropagation();
        });
      }
    });
  `;
}