IC-Coder-Plugin/src/views/expiredModal.ts

/**
 * 试用期过期弹窗
 * 功能：在聊天面板内显示过期提醒模态窗口
 * 依赖：无
 * 使用场景：试用用户过期时在聊天面板内显示
 */

/**
 * 获取过期弹窗的 HTML 内容
 */
export function getExpiredModalContent(logoUri?: string): string {
  return `
    <!-- 过期弹窗 -->
    <div id="expiredModal" class="expired-modal" style="display: none;">
      <div class="expired-modal-overlay"></div>
      <div class="expired-modal-content">
        ${logoUri ? `<img src="${logoUri}" class="expired-logo-corner" alt="IC Coder" />` : ""}

        <div class="expired-modal-header">
          <div class="expired-icon">⏰</div>
          <h2>您的试用期已到期</h2>
          <p class="expired-modal-subtitle">感谢您使用 IC Coder！您的 15 天试用期已结束。</p>
        </div>

        <div class="expired-modal-body">
          <p class="expired-message">如需继续使用，请联系我们获取正式版本。</p>

          <button id="expiredContactBtn" class="expired-btn expired-btn-primary">
            <span>联系我们</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M6 3L11 8L6 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>
      </div>
    </div>
  `;
}

/**
 * 获取过期弹窗的 CSS 样式
 */
export function getExpiredModalStyles(): string {
  return `
    /* 过期弹窗样式 */
    .expired-modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      font-family: var(--vscode-font-family, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif);
    }

    .expired-modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(5px);
      animation: fadeIn 0.3s ease-out;
    }

    .expired-modal-content {
      position: relative;
      background: var(--vscode-editor-background);
      border: 1px solid var(--vscode-widget-border);
      border-radius: 12px;
      width: 100%;
      max-width: 450px;
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
      animation: modalSlideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
      overflow: hidden;
    }

    .expired-logo-corner {
      position: absolute;
      top: 16px;
      left: 24px;
      height: 40px;
      width: auto;
      opacity: 0.9;
      z-index: 10;
    }

    .expired-modal-header {
      padding: 60px 32px 20px;
      text-align: center;
    }

    .expired-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }

    .expired-modal-header h2 {
      margin: 0 0 12px;
      font-size: 24px;
      font-weight: 600;
      color: var(--vscode-errorForeground);
    }

    .expired-modal-subtitle {
      margin: 0;
      font-size: 14px;
      color: var(--vscode-descriptionForeground);
      line-height: 1.5;
    }

    .expired-modal-body {
      padding: 0 32px 32px;
      text-align: center;
    }

    .expired-message {
      font-size: 14px;
      color: var(--vscode-descriptionForeground);
      margin: 20px 0;
      line-height: 1.6;
    }

    .expired-btn {
      width: 100%;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 600;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--vscode-button-background);
      color: var(--vscode-button-foreground);
      transition: all 0.2s;
      margin-top: 24px;
    }

    .expired-btn:hover {
      background: var(--vscode-button-hoverBackground);
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .expired-btn:active {
      transform: translateY(0);
    }
  `;
}

/**
 * 获取过期弹窗的 JavaScript 逻辑
 */
export function getExpiredModalScript(): string {
  return `
    // 过期弹窗逻辑
    (function() {
      const modal = document.getElementById('expiredModal');
      const contactBtn = document.getElementById('expiredContactBtn');
      const overlay = modal?.querySelector('.expired-modal-overlay');

      // 显示过期弹窗
      window.showExpiredModal = function() {
        if (modal) {
          modal.style.display = 'flex';
        }
      };

      // 隐藏过期弹窗
      window.hideExpiredModal = function() {
        if (modal) {
          modal.style.display = 'none';
        }
      };

      // 点击"联系我们"按钮
      if (contactBtn) {
        contactBtn.addEventListener('click', function() {
          // 可以打开联系页面
          // window.open('https://iccoder.com/contact', '_blank');
          hideExpiredModal();
        });
      }

      // 点击遮罩层关闭弹窗
      if (overlay) {
        overlay.addEventListener('click', function() {
          hideExpiredModal();
        });
      }

      // 阻止点击弹窗内容时关闭
      const content = modal?.querySelector('.expired-modal-content');
      if (content) {
        content.addEventListener('click', function(e) {
          e.stopPropagation();
        });
      }

      // 监听来自后端的消息
      window.addEventListener('message', function(event) {
        const message = event.data;
        if (message.command === 'showExpiredModal') {
          showExpiredModal();
        }
      });
    })();
  `;
}