/**
 * 获取通用设置组件的 HTML 内容
 */
export function getGeneralSettingsComponentContent(): string {
  return `
    <div class="general-settings">
      <h3 class="settings-section-title">通用设置</h3>

      <div class="settings-section">
        <div class="settings-item">
          <div class="settings-item-header">
            <label class="settings-item-label">主题</label>
            <span class="settings-item-description">选择界面主题</span>
          </div>
          <select class="settings-select" id="themeSelect">
            <option value="auto">跟随系统</option>
            <option value="light">浅色</option>
            <option value="dark">深色</option>
          </select>
        </div>

        <div class="settings-item">
          <div class="settings-item-header">
            <label class="settings-item-label">语言</label>
            <span class="settings-item-description">选择界面语言</span>
          </div>
          <select class="settings-select" id="languageSelect">
            <option value="zh-CN">简体中文</option>
            <option value="en-US">English</option>
          </select>
        </div>

        <div class="settings-item">
          <div class="settings-item-header">
            <label class="settings-item-label">自动保存</label>
            <span class="settings-item-description">自动保存会话历史</span>
          </div>
          <label class="settings-switch">
            <input type="checkbox" id="autoSaveCheckbox" checked>
            <span class="settings-switch-slider"></span>
          </label>
        </div>

        <div class="settings-item">
          <div class="settings-item-header">
            <label class="settings-item-label">显示时间戳</label>
            <span class="settings-item-description">在消息中显示时间戳</span>
          </div>
          <label class="settings-switch">
            <input type="checkbox" id="showTimestampCheckbox">
            <span class="settings-switch-slider"></span>
          </label>
        </div>
      </div>

      <div class="settings-section">
        <h4 class="settings-subsection-title">编辑器设置</h4>

        <div class="settings-item">
          <div class="settings-item-header">
            <label class="settings-item-label">字体大小</label>
            <span class="settings-item-description">设置编辑器字体大小</span>
          </div>
          <input type="number" class="settings-input" id="fontSizeInput" value="14" min="10" max="24">
        </div>

        <div class="settings-item">
          <div class="settings-item-header">
            <label class="settings-item-label">代码高亮</label>
            <span class="settings-item-description">启用代码语法高亮</span>
          </div>
          <label class="settings-switch">
            <input type="checkbox" id="syntaxHighlightCheckbox" checked>
            <span class="settings-switch-slider"></span>
          </label>
        </div>
      </div>

      <div class="settings-actions">
        <button class="settings-button settings-button-primary" onclick="saveGeneralSettings()">
          保存设置
        </button>
        <button class="settings-button settings-button-secondary" onclick="resetGeneralSettings()">
          重置为默认
        </button>
      </div>
    </div>
  `;
}

/**
 * 获取通用设置组件的 CSS 样式
 */
export function getGeneralSettingsComponentStyles(): string {
  return `
    .general-settings {
      max-width: 600px;
    }

    .settings-section-title {
      margin: 0 0 20px 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--vscode-foreground);
    }

    .settings-section {
      margin-bottom: 32px;
    }

    .settings-subsection-title {
      margin: 0 0 16px 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--vscode-foreground);
      opacity: 0.9;
    }

    .settings-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--vscode-panel-border);
    }

    .settings-item:last-child {
      border-bottom: none;
    }

    .settings-item-header {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .settings-item-label {
      font-size: 14px;
      font-weight: 500;
      color: var(--vscode-foreground);
    }

    .settings-item-description {
      font-size: 12px;
      color: var(--vscode-descriptionForeground);
    }

    .settings-select {
      padding: 6px 12px;
      background: var(--vscode-input-background);
      color: var(--vscode-input-foreground);
      border: 1px solid var(--vscode-input-border);
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
      outline: none;
    }

    .settings-select:focus {
      border-color: var(--vscode-focusBorder);
    }

    .settings-input {
      width: 80px;
      padding: 6px 12px;
      background: var(--vscode-input-background);
      color: var(--vscode-input-foreground);
      border: 1px solid var(--vscode-input-border);
      border-radius: 4px;
      font-size: 13px;
      outline: none;
    }

    .settings-input:focus {
      border-color: var(--vscode-focusBorder);
    }

    .settings-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      cursor: pointer;
    }

    .settings-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .settings-switch-slider {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--vscode-input-background);
      border: 1px solid var(--vscode-input-border);
      border-radius: 24px;
      transition: all 0.3s ease;
    }

    .settings-switch-slider:before {
      content: "";
      position: absolute;
      height: 16px;
      width: 16px;
      left: 3px;
      bottom: 3px;
      background: var(--vscode-foreground);
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .settings-switch input:checked + .settings-switch-slider {
      background: var(--vscode-button-background);
      border-color: var(--vscode-button-background);
    }

    .settings-switch input:checked + .settings-switch-slider:before {
      transform: translateX(20px);
      background: var(--vscode-button-foreground);
    }

    .settings-actions {
      display: flex;
      gap: 12px;
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px solid var(--vscode-panel-border);
    }

    .settings-button {
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .settings-button-primary {
      background: var(--vscode-button-background);
      color: var(--vscode-button-foreground);
    }

    .settings-button-primary:hover {
      background: var(--vscode-button-hoverBackground);
    }

    .settings-button-secondary {
      background: var(--vscode-button-secondaryBackground);
      color: var(--vscode-button-secondaryForeground);
    }

    .settings-button-secondary:hover {
      background: var(--vscode-button-secondaryHoverBackground);
    }
  `;
}

/**
 * 获取通用设置组件的 JavaScript 脚本
 */
export function getGeneralSettingsComponentScript(): string {
  return `
    // 保存通用设置
    function saveGeneralSettings() {
      const settings = {
        theme: document.getElementById('themeSelect').value,
        language: document.getElementById('languageSelect').value,
        autoSave: document.getElementById('autoSaveCheckbox').checked,
        showTimestamp: document.getElementById('showTimestampCheckbox').checked,
        fontSize: document.getElementById('fontSizeInput').value,
        syntaxHighlight: document.getElementById('syntaxHighlightCheckbox').checked,
      };

      // 发送消息到扩展
      vscode.postMessage({
        command: 'saveGeneralSettings',
        settings: settings
      });

      // 显示保存成功提示
      console.log('通用设置已保存', settings);
    }

    // 重置通用设置
    function resetGeneralSettings() {
      document.getElementById('themeSelect').value = 'auto';
      document.getElementById('languageSelect').value = 'zh-CN';
      document.getElementById('autoSaveCheckbox').checked = true;
      document.getElementById('showTimestampCheckbox').checked = false;
      document.getElementById('fontSizeInput').value = '14';
      document.getElementById('syntaxHighlightCheckbox').checked = true;

      console.log('通用设置已重置为默认值');
    }

    // 加载通用设置
    function loadGeneralSettings(settings) {
      if (!settings) return;

      if (settings.theme) {
        document.getElementById('themeSelect').value = settings.theme;
      }
      if (settings.language) {
        document.getElementById('languageSelect').value = settings.language;
      }
      if (settings.autoSave !== undefined) {
        document.getElementById('autoSaveCheckbox').checked = settings.autoSave;
      }
      if (settings.showTimestamp !== undefined) {
        document.getElementById('showTimestampCheckbox').checked = settings.showTimestamp;
      }
      if (settings.fontSize) {
        document.getElementById('fontSizeInput').value = settings.fontSize;
      }
      if (settings.syntaxHighlight !== undefined) {
        document.getElementById('syntaxHighlightCheckbox').checked = settings.syntaxHighlight;
      }
    }
  `;
}