{% extends "base.html" %}
{% block content %}

<div class="max-w-4xl mx-auto">
    <a href="/skills/" class="text-blue-600 hover:underline text-sm mb-4 inline-block">&larr; 返回首页</a>

    <h1 class="text-3xl font-bold text-gray-800 mb-2">{{ info.title }}</h1>

    {% if skill_name.startswith("lab-") and info.intro %}
    <div class="bg-green-50 border border-green-200 rounded-xl p-4 mb-6 text-sm text-green-800">
        {{ info.intro }}
    </div>
    {% endif %}

    <!-- 功能介绍 + 预期输出 -->
    <div class="space-y-2 mb-6">
        <details class="bg-white border border-gray-200 rounded-xl overflow-hidden">
            <summary class="px-4 py-3 cursor-pointer font-medium text-gray-700 hover:bg-gray-50 transition flex items-center gap-2">
                <span class="text-blue-500">📖</span> 功能介绍
            </summary>
            <div class="px-4 py-3 text-sm text-gray-600 border-t border-gray-100">
                {% if info.intro %}{{ info.intro }}{% endif %}
            </div>
        </details>
        <details class="bg-white border border-gray-200 rounded-xl overflow-hidden">
            <summary class="px-4 py-3 cursor-pointer font-medium text-gray-700 hover:bg-gray-50 transition flex items-center gap-2">
                <span class="text-blue-500">📋</span> 预期输出格式与内容
            </summary>
            <div class="px-4 py-3 text-sm text-gray-600 border-t border-gray-100">
                {% if info.output_desc %}{{ info.output_desc|replace('\n', '<br>')|safe }}{% else %}
                <p>生成中文分析报告，包含：总览、详细分析、排行榜、建议等。</p>
                {% endif %}
            </div>
        </details>
    </div>

    <!-- 输入表单 -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-8">
        <label class="block font-medium text-gray-700 mb-2">{{ info.prompt_label }}</label>
        <input id="user-input" type="text"
               class="w-full border rounded-lg px-4 py-3 text-gray-700 focus:ring-2 focus:ring-blue-300 focus:border-blue-400 outline-none"
               placeholder="{{ info.prompt_placeholder }}">
        <p id="hint-text" class="text-sm text-gray-400 mt-2"></p>
        <button onclick="runSkill()" id="run-btn"
                class="mt-4 bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-3 rounded-lg transition disabled:opacity-50">
            🚀 开始分析
        </button>
    </div>

    <!-- 进度 -->
    <div id="progress" class="hidden mb-6">
        <div class="bg-white rounded-xl shadow-sm p-6">
            <div class="flex items-center gap-3 mb-4">
                <div class="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full"></div>
                <span class="text-gray-600 font-medium">AI 正在分析中...</span>
            </div>
            <div id="log" class="text-sm text-gray-500 space-y-1 font-mono max-h-48 overflow-y-auto"></div>
        </div>
    </div>

    <!-- 报告输出 -->
    <div id="report" class="hidden">
        <div class="bg-white rounded-xl shadow-sm p-6 overflow-auto">
            <div id="report-content" class="markdown-body"></div>
        </div>
        <div class="mt-4 flex gap-3">
            <button onclick="downloadTxt()" class="text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-lg transition font-medium">
                📥 下载 TXT
            </button>
        </div>
    </div>

    <!-- 错误 -->
    <div id="error" class="hidden bg-red-50 border border-red-200 rounded-xl p-6 text-red-700"></div>
</div>

<script>
const skillName = "{{ skill_name }}";
const hints = {
    "research-tracker": "例如：微服务框架、AI Agent、DevOps 流水线、大模型、数据可视化",
    "contributor-insight": "例如：ci4s/ci4sManagement-cloud, jiangtx/gitlink-cli",
    "issue-triage": "例如：Gitlink/gitlink-cli, ci4s/ci4sManagement-cloud",
    "ci-health": "例如：jiangtx/gitlink-cli, Gitlink/gitlink-cli",
    "lab-hotspot": "例如：大模型、AI Agent、微服务、DevOps、数据可视化",
    "lab-insight": "例如：ci4s/ci4sManagement-cloud, Gitlink/gitlink-cli",
    "lab-compliance": "例如：ci4s/ci4sManagement-cloud, Gitlink/gitlink-cli",
    "lab-match": "例如：ci4s/ci4sManagement-cloud, Gitlink/gitlink-cli",
    "lab-track": "例如：ci4s/ci4sManagement-cloud, Gitlink/gitlink-cli",
};
document.getElementById('hint-text').textContent = '💡 ' + (hints[skillName] || '');

function runSkill() {
    const input = document.getElementById('user-input').value.trim();
    if (!input) { alert('请输入参数'); return; }

    document.getElementById('progress').classList.remove('hidden');
    document.getElementById('report').classList.add('hidden');
    document.getElementById('error').classList.add('hidden');
    document.getElementById('run-btn').disabled = true;
    document.getElementById('log').innerHTML = '<div>⏳ 提交中...</div>';

    fetch('/api/run', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: `skill=${encodeURIComponent(skillName)}&input=${encodeURIComponent(input)}`
    })
    .then(r => r.json())
    .then(data => {
        if (data.error) {
            document.getElementById('error').classList.remove('hidden');
            document.getElementById('error').textContent = '❌ ' + data.error;
            return;
        }

        document.getElementById('log').innerHTML = '<div class="text-green-600">✅ 分析完成</div>';

        // Render Markdown
        const reportDiv = document.getElementById('report-content');
        reportDiv.innerHTML = marked.parse(data.report || '');
        document.getElementById('report').classList.remove('hidden');

        // Render Mermaid diagrams (find code.language-mermaid)
        document.querySelectorAll('code.language-mermaid').forEach((code) => {
            const pre = code.parentElement;
            const div = document.createElement('div');
            div.className = 'mermaid';
            div.textContent = code.textContent;
            pre.parentElement.replaceChild(div, pre);
        });
        if (typeof mermaid !== 'undefined') {
            mermaid.run({ nodes: document.querySelectorAll('.mermaid') });
        }
    })
    .catch(err => {
        document.getElementById('error').classList.remove('hidden');
        document.getElementById('error').textContent = '❌ 请求失败: ' + err.message;
    })
    .finally(() => {
        document.getElementById('progress').classList.add('hidden');
        document.getElementById('run-btn').disabled = false;
    });
}

function downloadTxt() {
    const text = document.getElementById('report-content').textContent;
    const blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'report-' + new Date().toISOString().slice(0,10) + '.txt';
    a.click();
    URL.revokeObjectURL(a.href);
}
</script>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<script>mermaid.initialize({ startOnLoad: false, theme: 'default' });</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.1/github-markdown.min.css">
<style>
    #report-content.markdown-body { padding: 0; }
    #report-content.markdown-body table { display: table; width: 100%; }
    #report-content.markdown-body pre { background: #f6f8fa; border-radius: 6px; position: relative; }
    #report-content.markdown-body code { font-size: 13px; }
    #report-content.markdown-body img { max-width: 100%; }
    /* Mermaid SVG should be visible */
    #report-content.markdown-body .mermaid svg { max-width: 100%; height: auto; }
</style>
{% endblock %}