frontend/src/AssistantGuide.tsx

import React from 'react';
import './AssistantGuide.css';

const AssistantGuide: React.FC = () => {
  return (
    <div className="assistant-guide">
      <div className="guide-container">
        <header className="guide-header">
          <h1>OpenAI Assistant 設定指南</h1>
          <p>本指南說明如何在 OpenAI API 平台建立 Assistant 並連結到 AI 批改平台。</p>
        </header>

        <div className="guide-content">
          <section className="guide-section">
            <h2>步驟一：登入 OpenAI Platform</h2>
            <ol>
              <li>前往 <a href="https://platform.openai.com/" target="_blank" rel="noopener noreferrer">OpenAI Platform</a></li>
              <li>使用您的 OpenAI 帳號登入</li>
              <li>確保您的帳號有足夠的 API 額度</li>
            </ol>
          </section>

          <section className="guide-section">
            <h2>步驟二：建立新的 Assistant</h2>
            <ol>
              <li>在左側導覽列點擊 <strong>"Assistants"</strong></li>
              <li>點擊 <strong>"Create Assistant"</strong> 按鈕</li>
              <li>填入以下設定：</li>
            </ol>

            <div className="subsection">
              <h3>基本設定</h3>
              <ul>
                <li><strong>Name</strong>: <code>小學作文批改助手</code> (或您偏好的名稱)</li>
                <li><strong>Instructions</strong>: 複製以下指令文字：</li>
              </ul>

              <div className="code-block">
                <pre><code>{`你是一位專業的中文作文批改老師。請根據提供的評分標準，對學生的作文進行詳細批改。

重要指示：
1. 必須以 JSON 格式回應
2. 使用精簡的語言，避免冗長的說明  
3. 專注於具體、可操作的建議
4. 評分要公正且具建設性

評分標準：
- 80分以上：優秀（🟢）
- 60-79分：中等（🟡）
- 60分以下：待改進（🔴）

回應格式必須是有效的 JSON：
{
  "overall_score": 85,
  "emoji": "🟢",
  "scores": {
    "structure": {"score": 80, "description": "文章結構清晰"},
    "content": {"score": 85, "description": "內容豐富有趣"},
    "language": {"score": 90, "description": "語言生動流暢"},
    "creativity": {"score": 85, "description": "想像力豐富"}
  },
  "suggestions": [
    {
      "type": "improvement",
      "original": "原始文字",
      "corrected": "修改後文字", 
      "reason": "修改原因"
    }
  ]
}`}</code></pre>
              </div>
            </div>

            <div className="subsection">
              <h3>進階設定</h3>
              <ul>
                <li><strong>Model</strong>: 選擇 <code>gpt-4</code> 或 <code>gpt-4-turbo</code> (建議)</li>
                <li><strong>Tools</strong>: 啟用以下工具：
                  <ul>
                    <li>✅ <strong>Code Interpreter</strong> (如需要)</li>
                    <li>✅ <strong>File Search</strong> (建議啟用)</li>
                  </ul>
                </li>
                <li><strong>Files</strong>: 可上傳相關的批改範例或指導文件 (可選)</li>
              </ul>
            </div>

            <div className="subsection">
              <h3>響應格式</h3>
              <ul>
                <li><strong>Response format</strong>: 選擇 <strong>JSON object</strong></li>
                <li>這確保 Assistant 回應格式符合平台要求</li>
              </ul>
            </div>
          </section>

          <section className="guide-section">
            <h2>步驟三：儲存並取得 Assistant ID</h2>
            <ol>
              <li>點擊 <strong>"Save"</strong> 儲存 Assistant</li>
              <li>建立完成後，在 Assistant 頁面複製 <strong>Assistant ID</strong>
                <ul>
                  <li>格式類似：<code>asst_xxxxxxxxxxxxxxxxxxxxxxxxx</code></li>
                </ul>
              </li>
              <li>將此 ID 記錄下來，後續步驟需要使用</li>
            </ol>
          </section>

          <section className="guide-section">
            <h2>步驟四：取得 API Key</h2>
            <ol>
              <li>在左側導覽列點擊 <strong>"API Keys"</strong></li>
              <li>點擊 <strong>"Create new secret key"</strong></li>
              <li>輸入名稱（如：<code>AI-Grading-Platform</code>）</li>
              <li>複製生成的 API Key
                <ul>
                  <li>格式：<code>sk-proj-...</code></li>
                </ul>
              </li>
              <li><strong className="warning">重要</strong>：API Key 只會顯示一次，請妥善保存</li>
            </ol>
          </section>

          <section className="guide-section">
            <h2>步驟五：設定平台環境變數</h2>
            
            <div className="subsection">
              <h3>本地開發環境</h3>
              <p>在專案根目錄建立 <code>.env.local</code> 檔案：</p>
              <div className="code-block">
                <pre><code>{`# OpenAI 設定
OPENAI_API_KEY=sk-proj-your-api-key-here

# 其他設定（可選）
ENVIRONMENT=development
LOG_LEVEL=INFO`}</code></pre>
              </div>
            </div>

            <div className="subsection">
              <h3>Hugging Face Spaces 部署</h3>
              <ol>
                <li>進入 HF Spaces 設定頁面</li>
                <li>在 <strong>"Repository secrets"</strong> 區域新增：
                  <ul>
                    <li>Key: <code>OPENAI_API_KEY</code></li>
                    <li>Value: 您的 OpenAI API Key</li>
                  </ul>
                </li>
                <li>儲存並重啟 Space</li>
              </ol>
            </div>
          </section>

          <section className="guide-section">
            <h2>步驟六：更新 Agent 設定</h2>
            <p>修改 <code>backend/app/config/agents.yaml</code> 檔案：</p>
            <div className="code-block">
              <pre><code>{`agents:
  primary_grading:
    name: "小學作文批改"
    assistant_id: "asst_your_assistant_id_here"  # 替換為您的 Assistant ID
    language: "zh"
    description: "專業的中文作文批改助手"
    
  english_grading:
    name: "English Essay Grading" 
    assistant_id: "asst_another_assistant_id"  # 如需要英文批改
    language: "en"
    description: "Professional English essay grading assistant"`}</code></pre>
            </div>
          </section>

          <section className="guide-section">
            <h2>步驟七：測試連線</h2>
            <ol>
              <li>啟動本地開發環境：
                <div className="code-block">
                  <pre><code>{`# 後端
cd backend && python -m uvicorn main:app --reload --port 8001

# 前端  
cd frontend && npm run dev -- --port 5174`}</code></pre>
                </div>
              </li>
              <li>前往 <code>http://localhost:5174</code></li>
              <li>選擇批改模式並輸入測試文章</li>
              <li>確認 AI 回應格式正確</li>
            </ol>
          </section>

          <section className="guide-section">
            <h2>疑難排解</h2>
            
            <div className="subsection">
              <h3>常見問題</h3>
              <div className="qa-item">
                <h4>Q: Assistant 回應不是 JSON 格式</h4>
                <p>A: 檢查 Instructions 是否正確設定，確保包含 JSON 格式要求</p>
              </div>
              
              <div className="qa-item">
                <h4>Q: API 呼叫失敗 (400 錯誤)</h4>
                <p>A: 確認 API Key 正確且有足夠額度，檢查 Assistant ID 是否正確</p>
              </div>
              
              <div className="qa-item">
                <h4>Q: 批改結果不理想</h4>
                <p>A: 調整 Instructions 中的批改標準和要求，或更換更強大的模型</p>
              </div>
              
              <div className="qa-item">
                <h4>Q: 回應速度太慢</h4>
                <p>A: 考慮使用 <code>gpt-4-turbo</code> 或調整 Assistant 設定</p>
              </div>
            </div>

            <div className="subsection">
              <h3>聯絡支援</h3>
              <p>如需進一步協助，請：</p>
              <ol>
                <li>檢查 <a href="https://platform.openai.com/docs" target="_blank" rel="noopener noreferrer">OpenAI API 文件</a></li>
                <li>查看 <a href="https://platform.openai.com/docs/assistants" target="_blank" rel="noopener noreferrer">Assistants API 指南</a></li>
                <li>聯絡技術支援團隊</li>
              </ol>
            </div>
          </section>
        </div>

        <footer className="guide-footer">
          <p><em>最後更新：2025年9月</em></p>
        </footer>
      </div>
    </div>
  );
};

export default AssistantGuide;