/**
 * TalkingQ Platform - Prompt Management Page
 */

registerPage('prompt-manage', function(container) {
  const prompts = [
    { id: 'prompt-001', name: '故事机器人 主提示词 v2.3', agent: '小Q故事机器人', version: 'v2.3', status: 'active', score: 8.2, sessions: 38420, lastUpdate: '2026-05-10' },
    { id: 'prompt-002', name: '故事机器人 AB测试变体', agent: '小Q故事机器人', version: 'v2.3-b', status: 'ab-testing', score: 8.5, sessions: 2100, lastUpdate: '2026-05-08' },
    { id: 'prompt-003', name: '英语助手 v1.2', agent: '英语学习助手', version: 'v1.2', status: 'active', score: 7.8, sessions: 12300, lastUpdate: '2026-04-28' },
    { id: 'prompt-004', name: '科学探索 Beta', agent: '科学百科探索者', version: 'v0.8', status: 'draft', score: null, sessions: 0, lastUpdate: '2026-05-12' },
  ];

  container.innerHTML = `
    <div class="page-header">
      <div class="page-title">提示词管理</div>
      <div class="page-desc">管理应用系统提示词版本，支持 A/B 测试和版本回滚</div>
    </div>

    <div class="filter-bar">
      <div class="search-input">
        <i data-lucide="search"></i>
        <input type="text" placeholder="搜索提示词名称...">
      </div>
      <select class="filter-select">
        <option>全部应用</option>
        <option>小Q故事机器人</option>
        <option>英语学习助手</option>
      </select>
      <select class="filter-select">
        <option>全部状态</option>
        <option>上线中</option>
        <option>AB测试</option>
        <option>草稿</option>
      </select>
      <button class="btn btn-primary" id="newPromptBtn">
        <i data-lucide="plus"></i> 新建提示词
      </button>
    </div>

    <div class="card" style="padding:0;overflow:hidden">
      <div class="table-wrapper">
        <table>
          <thead>
            <tr><th>提示词名称</th><th>关联应用</th><th>版本</th><th>状态</th><th>平均评分</th><th>覆盖对话数</th><th>最后更新</th><th>操作</th></tr>
          </thead>
          <tbody>
            ${prompts.map(p => `
              <tr>
                <td>
                  <div style="font-weight:600;font-size:13.5px">${p.name}</div>
                  <div style="font-size:11px;color:var(--text-muted)">${p.id}</div>
                </td>
                <td style="font-size:13px">${p.agent}</td>
                <td><span class="badge badge-default">${p.version}</span></td>
                <td><span class="badge ${p.status === 'active' ? 'badge-success' : p.status === 'ab-testing' ? 'badge-info' : 'badge-default'}">
                  ${p.status === 'active' ? '上线中' : p.status === 'ab-testing' ? 'AB测试中' : '草稿'}
                </span></td>
                <td>
                  ${p.score ? `<span style="font-weight:700;color:${p.score >= 8 ? 'var(--primary)' : 'var(--warning)'}">${p.score}</span>/10` : '--'}
                </td>
                <td>${p.sessions > 0 ? p.sessions.toLocaleString() : '--'}</td>
                <td style="font-size:12px;color:var(--text-muted)">${p.lastUpdate}</td>
                <td>
                  <div style="display:flex;gap:4px">
                    <button class="btn btn-ghost btn-sm" data-tooltip="编辑提示词" onclick="Toast.info('打开提示词编辑器')"><i data-lucide="edit-2"></i></button>
                    <button class="btn btn-ghost btn-sm" data-tooltip="版本记录" onclick="Toast.info('查看版本记录')"><i data-lucide="git-branch"></i></button>
                    ${p.status === 'draft' ? `<button class="btn btn-primary btn-sm" onclick="Toast.success('提示词已发布上线')">发布</button>` : ''}
                    ${p.status === 'active' ? `<button class="btn btn-outline btn-sm" onclick="Toast.info('启动 AB 测试配置')">AB测试</button>` : ''}
                  </div>
                </td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      </div>
    </div>

    <div class="api-note" style="margin-top:16px">
      <i data-lucide="info"></i>
      <span>提示词接口：<code>GET /api/v1/prompts</code> · <code>POST /api/v1/prompts/{id}/publish</code> · <code>POST /api/v1/prompts/ab-test</code></span>
    </div>
  `;

  lucide.createIcons({ elements: [container] });

  container.querySelector('#newPromptBtn')?.addEventListener('click', () => {
    createModal({
      title: '新建提示词',
      content: `
        <div class="form-group">
          <label class="form-label">提示词名称<span class="required">*</span></label>
          <input type="text" class="form-control" id="newPromptName" placeholder="例：故事机器人 主提示词 v2.4">
        </div>
        <div class="form-group">
          <label class="form-label">关联应用</label>
          <select class="form-control">
            <option>小Q故事机器人</option>
            <option>英语学习助手</option>
            <option>科学百科探索者</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">提示词内容<span class="required">*</span></label>
          <textarea class="form-control" id="newPromptContent" style="height:600px;font-family:monospace;font-size:12px" placeholder="系统提示词内容..."></textarea>
        </div>`,
      onConfirm: async () => {
        const name = document.getElementById('newPromptName')?.value.trim();
        const content = document.getElementById('newPromptContent')?.value.trim();
        if (!name || !content) {
          Toast.warning('请填写提示词名称和内容');
          return false;
        }
        await API.prompts.create({ name, content });
        Toast.success('提示词已创建（草稿状态）');
      },
      confirmText: '创建',
    });
  });
});