/**
 * 欢迎引导面板
 * 功能：插件试用用户首次登录显示使用教程
 * 依赖：vscode
 * 使用场景：试用用户首次登录时显示
 */

import * as vscode from 'vscode';

export class WelcomePanel {
  public static currentPanel: WelcomePanel | undefined;
  private readonly _panel: vscode.WebviewPanel;
  private _disposables: vscode.Disposable[] = [];

  private constructor(panel: vscode.WebviewPanel) {
    this._panel = panel;
    this._panel.webview.html = this.getHtmlContent();

    // 监听来自 webview 的消息
    this._panel.webview.onDidReceiveMessage(
      (message) => {
        if (message.command === 'close') {
          this._panel.dispose();
        }
      },
      null,
      this._disposables
    );

    // 监听关闭事件
    this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
  }

  public static render(context: vscode.ExtensionContext) {
    // 避免重复显示
    if (WelcomePanel.currentPanel) {
      WelcomePanel.currentPanel._panel.reveal(vscode.ViewColumn.One);
      return;
    }

    const panel = vscode.window.createWebviewPanel(
      'icCoderWelcome',
      '欢迎使用 IC Coder',
      vscode.ViewColumn.One,
      {
        enableScripts: true,
        retainContextWhenHidden: true
      }
    );

    WelcomePanel.currentPanel = new WelcomePanel(panel);
  }

  private getHtmlContent(): string {
    return `
      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>欢迎使用 IC Coder</title>
        <style>
          body {
            padding: 40px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            line-height: 1.6;
            color: var(--vscode-foreground);
            background-color: var(--vscode-editor-background);
          }
          h1 {
            color: var(--vscode-textLink-foreground);
            margin-bottom: 20px;
          }
          .welcome-message {
            font-size: 16px;
            margin-bottom: 30px;
            color: var(--vscode-descriptionForeground);
          }
          .step {
            margin: 20px 0;
            padding: 20px;
            background: var(--vscode-editor-inactiveSelectionBackground);
            border-radius: 8px;
            border-left: 4px solid var(--vscode-textLink-foreground);
          }
          .step h3 {
            margin-top: 0;
            color: var(--vscode-textLink-foreground);
          }
          .step p {
            margin: 10px 0;
          }
          .button {
            padding: 12px 24px;
            background: var(--vscode-button-background);
            color: var(--vscode-button-foreground);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-top: 20px;
          }
          .button:hover {
            background: var(--vscode-button-hoverBackground);
          }
        </style>
      </head>
      <body>
        <h1>🎉 欢迎使用 IC Coder！</h1>
        <p class="welcome-message">
          您已成功激活 15 天试用期，让我们开始探索 IC Coder 的强大功能吧！
        </p>

        <div class="step">
          <h3>📝 步骤 1：打开聊天面板</h3>
          <p>点击侧边栏的 IC Coder 图标，或使用命令面板搜索 "IC Coder: Open Chat"</p>
        </div>

        <div class="step">
          <h3>💬 步骤 2：输入您的需求</h3>
          <p>描述您想要生成的 Verilog 代码或需要帮助的问题，AI 将为您提供专业的解决方案</p>
        </div>

        <div class="step">
          <h3>🔬 步骤 3：运行仿真</h3>
          <p>使用 "生成 VCD" 命令运行 iverilog 仿真，并通过波形查看器查看仿真结果</p>
        </div>

        <button class="button" onclick="closePanel()">开始使用</button>

        <script>
          const vscode = acquireVsCodeApi();

          function closePanel() {
            vscode.postMessage({ command: 'close' });
          }
        </script>
      </body>
      </html>
    `;
  }

  public dispose() {
    WelcomePanel.currentPanel = undefined;
    this._panel.dispose();
    while (this._disposables.length) {
      const disposable = this._disposables.pop();
      if (disposable) {
        disposable.dispose();
      }
    }
  }
}
