{% extends "base.html" %}
{% block title %}AI 分析 - AI Agent 项目追踪{% endblock %}

{% block content %}
<h1 class="mb-4">AI 分析</h1>

<!-- Control panel -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row g-3">
            <!-- Scope selector -->
            <div class="col-md-3">
                <label class="form-label">分析范围</label>
                <select class="form-select" id="scopeSelect">
                    <option value="home">全站概览</option>
                    <option value="projects">所有项目</option>
                    <!-- 项目选项由 JS 从 /api/projects 动态填充, 与 DB 保持一致 -->
                </select>
            </div>
            
            <!-- Preset buttons -->
            <div class="col-md-6">
                <label class="form-label">预设分析</label>
                <div class="btn-group w-100" role="group">
                    <button type="button" class="btn btn-outline-primary preset-btn" data-preset="activity">
                        📊 活跃度评估
                    </button>
                    <button type="button" class="btn btn-outline-primary preset-btn" data-preset="evolution">
                        🚀 版本演进
                    </button>
                    <button type="button" class="btn btn-outline-primary preset-btn" data-preset="issues_hot">
                        🔥 Issue 热点
                    </button>
                </div>
            </div>
            
            <!-- Start button -->
            <div class="col-md-3 d-flex align-items-end">
                <button type="button" class="btn btn-success w-100" id="startBtn">
                    开始分析
                </button>
            </div>
        </div>
        
        <!-- Custom question input -->
        <div class="row g-3 mt-2">
            <div class="col-12">
                <label class="form-label">自定义问题 (可选)</label>
                <input type="text" class="form-control" id="questionInput" 
                       placeholder="例如: 这个项目的核心功能是什么? / 最近有什么重要更新?">
            </div>
        </div>
    </div>
</div>

<!-- Output area with tabs -->
<div class="card">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs" id="outputTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="observation-tab" data-bs-toggle="tab" 
                        data-bs-target="#observation" type="button" role="tab">
                    数据观察
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="prompt-tab" data-bs-toggle="tab" 
                        data-bs-target="#prompt" type="button" role="tab">
                    Prompt
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="reasoning-tab" data-bs-toggle="tab" 
                        data-bs-target="#reasoning" type="button" role="tab">
                    LLM 推理
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="conclusion-tab" data-bs-toggle="tab" 
                        data-bs-target="#conclusion" type="button" role="tab">
                    结论
                </button>
            </li>
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content" id="outputTabContent">
            <div class="tab-pane fade show active" id="observation" role="tabpanel">
                <div class="output-content" id="observationContent">
                    <div class="text-muted">等待分析开始...</div>
                </div>
            </div>
            <div class="tab-pane fade" id="prompt" role="tabpanel">
                <div class="output-content" id="promptContent">
                    <div class="text-muted">等待分析开始...</div>
                </div>
            </div>
            <div class="tab-pane fade" id="reasoning" role="tabpanel">
                <div class="output-content" id="reasoningContent">
                    <div class="text-muted">等待分析开始...</div>
                </div>
            </div>
            <div class="tab-pane fade" id="conclusion" role="tabpanel">
                <div class="output-content" id="conclusionContent">
                    <div class="text-muted">等待分析开始...</div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="module">
import { initAnalyzePage } from "{{ url_for('static', filename='js/pages/analyze.js') }}";

initAnalyzePage();
</script>
{% endblock %}