{% extends "base.html" %}

{% block title %}Skill提示词库 - AI创作工作台{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- 页面标题 -->
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold">💡 Skill提示词库</h1>
        <button onclick="openAddSkillModal()" class="btn-primary px-4 py-2 rounded-lg">
            + 新增Skill
        </button>
    </div>
    
    <!-- 筛选栏 -->
    <div class="card p-4">
        <div class="flex flex-wrap gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">分类</label>
                <select id="category-filter" onchange="loadSkills()" class="border border-gray-300 rounded-lg px-3 py-2">
                    <option value="">全部分类</option>
                    <option value="ecommerce">电商</option>
                    <option value="comic_drama">漫剧</option>
                    <option value="ai_workshop">自媒体</option>
                    <option value="general">通用</option>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">搜索</label>
                <input type="text" id="search-input" placeholder="搜索Skill名称或标签" 
                       onkeyup="debounce(loadSkills, 300)" 
                       class="border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <div class="flex items-end">
                <button onclick="exportSkills()" class="btn-secondary px-4 py-2 rounded-lg">
                    导出全部
                </button>
            </div>
        </div>
    </div>
    
    <!-- Skill列表 -->
    <div id="skills-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- 动态加载 -->
    </div>
</div>

<!-- 新增/编辑Skill弹窗 -->
<div id="skill-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white rounded-xl p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <h2 id="modal-title" class="text-2xl font-semibold mb-4">新增Skill</h2>
        <form id="skill-form" class="space-y-4">
            <input type="hidden" id="skill-id">
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Skill名称 *</label>
                <input type="text" id="skill-name" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">分类 *</label>
                <select id="skill-category" required class="w-full border border-gray-300 rounded-lg px-3 py-2">
                    <option value="ecommerce">电商</option>
                    <option value="comic_drama">漫剧</option>
                    <option value="ai_workshop">自媒体</option>
                    <option value="general">通用</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">提示词内容 *</label>
                <textarea id="skill-content" rows="8" required 
                          class="w-full border border-gray-300 rounded-lg px-3 py-2 font-mono text-sm"
                          placeholder="使用Jinja2语法，如：{{ variable_name }}"></textarea>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">使用说明</label>
                <textarea id="skill-description" rows="2" 
                          class="w-full border border-gray-300 rounded-lg px-3 py-2"></textarea>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">标签（逗号分隔）</label>
                <input type="text" id="skill-tags" placeholder="如：文案,商品,营销" 
                       class="w-full border border-gray-300 rounded-lg px-3 py-2">
            </div>
            
            <div class="flex justify-end space-x-2 pt-4">
                <button type="button" onclick="closeSkillModal()" class="btn-secondary px-4 py-2 rounded-lg">
                    取消
                </button>
                <button type="submit" class="btn-primary px-4 py-2 rounded-lg">
                    保存
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 测试渲染弹窗 -->
<div id="test-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white rounded-xl p-6 w-full max-w-3xl max-h-[90vh] overflow-y-auto">
        <h2 class="text-2xl font-semibold mb-4">测试渲染</h2>
        <div class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">模板内容</label>
                <div id="test-template-content" class="prompt-output text-sm"></div>
            </div>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">变量（JSON格式）</label>
                <textarea id="test-variables" rows="4" 
                          class="w-full border border-gray-300 rounded-lg px-3 py-2 font-mono text-sm"
                          placeholder='{"variable_name": "value"}'></textarea>
            </div>
            
            <button onclick="testRender()" class="btn-primary px-4 py-2 rounded-lg">
                渲染测试
            </button>
            
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">渲染结果</label>
                <div id="test-result" class="prompt-output text-sm min-h-[200px]"></div>
                <button onclick="copyTestResult()" class="mt-2 text-blue-500 text-sm">
                    复制结果
                </button>
            </div>
            
            <div class="flex justify-end">
                <button onclick="closeTestModal()" class="btn-secondary px-4 py-2 rounded-lg">
                    关闭
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="/static/js/skill_library.js"></script>
{% endblock %}