{% extends "base.html" %}

{% block title %}知识库 - AI创作工作台{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- 页面标题 + Tab切换 -->
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold">📚 知识库</h1>
        <div class="flex gap-2">
            <button onclick="switchKBTab('local')" id="kb-tab-local" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium">
                本地知识库
            </button>
            <button onclick="switchKBTab('feishu')" id="kb-tab-feishu" class="px-4 py-2 rounded-lg bg-gray-200 text-gray-700 text-sm font-medium">
                飞书知识库
            </button>
            <button onclick="openCreateKBModal()" class="btn-primary px-4 py-2 rounded-lg" id="btn-create-kb">
                + 新建知识库
            </button>
        </div>
    </div>

    <!-- ========== 本地知识库面板 ========== -->
    <div id="local-kb-panel">
        <!-- 知识库列表 -->
        <div id="kb-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- 动态加载 -->
        </div>
    </div>

    <!-- ========== 飞书知识库面板 ========== -->
    <div id="feishu-kb-panel" class="hidden">
        <!-- 连接状态 / 快捷操作 -->
        <div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <span class="text-2xl">📚</span>
                    <div>
                        <div class="font-medium text-gray-900">飞书知识库</div>
                        <div class="text-xs text-gray-500" id="feishu-connection-status">正在连接...</div>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <button onclick="loadFeishuSpaces()" class="px-3 py-1.5 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 text-sm font-medium">
                        选择其他知识库
                    </button>
                    <button onclick="toggleFeishuUrlInput()" class="px-3 py-1.5 rounded-lg bg-blue-50 text-blue-600 hover:bg-blue-100 text-sm font-medium">
                        + 手动输入URL
                    </button>
                </div>
            </div>

            <!-- 折叠的URL输入区 -->
            <div id="feishu-url-collapse" class="hidden mt-3 pt-3 border-t border-gray-200">
                <label class="block text-xs font-medium text-gray-500 mb-2">
                    手动输入飞书知识库或文档 URL
                </label>
                <div class="flex items-center space-x-2">
                    <input type="text" id="feishu-wiki-url" placeholder="https://xxx.feishu.cn/wiki/xxx" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    <button onclick="resolveFeishuUrl()" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 text-sm font-medium">
                        解析
                    </button>
                </div>
                <div id="feishu-resolve-result" class="text-xs mt-2 hidden"></div>
            </div>
        </div>

        <!-- 空间列表 -->
        <div id="feishu-spaces-section" class="hidden mb-6">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-lg font-semibold">选择飞书知识库</h2>
                <button onclick="feishuBackToMain()" class="text-sm text-blue-600 hover:underline">← 返回</button>
            </div>
            <div id="feishu-spaces-list" class="space-y-2">
                <!-- 动态加载 -->
            </div>
        </div>

        <!-- 节点列表 -->
        <div id="feishu-nodes-section" class="hidden">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <button onclick="feishuBackToMain()" class="text-sm text-blue-600 hover:underline">← 返回</button>
                    <span class="text-gray-300">|</span>
                    <span id="feishu-breadcrumb" class="text-sm text-gray-600"></span>
                </div>
                <button onclick="openFeishuCreateModal()" class="px-3 py-1.5 rounded-lg bg-green-600 text-white text-sm font-medium">
                    + 新建文档
                </button>
            </div>
            <div id="feishu-nodes-list" class="space-y-1">
                <!-- 动态加载 -->
            </div>
        </div>

        <!-- 文档查看/编辑 -->
        <div id="feishu-doc-section" class="hidden">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <button onclick="feishuBackToNodes()" id="feishu-back-to-nodes-btn" class="text-sm text-blue-600 hover:underline">← 返回节点列表</button>
                    <button onclick="feishuBackToMain()" class="text-sm text-blue-600 hover:underline">← 返回</button>
                    <span class="text-gray-300">|</span>
                    <span id="feishu-doc-title" class="text-sm font-medium text-gray-700"></span>
                </div>
                <div class="flex gap-2">
                    <button onclick="toggleFeishuEdit()" id="feishu-edit-btn" class="px-3 py-1.5 rounded-lg bg-blue-600 text-white text-sm font-medium">
                        编辑
                    </button>
                    <button onclick="saveFeishuDoc()" id="feishu-save-btn" class="hidden px-3 py-1.5 rounded-lg bg-green-600 text-white text-sm font-medium">
                        保存
                    </button>
                    <button onclick="importFeishuToLocal()" id="feishu-import-local-btn" class="px-3 py-1.5 rounded-lg bg-gray-100 text-gray-700 text-sm font-medium">
                        导入到本地
                    </button>
                </div>
            </div>
            <!-- 查看模式 -->
            <div id="feishu-doc-view" class="bg-white border border-gray-200 rounded-lg p-6 min-h-[300px] whitespace-pre-wrap text-sm text-gray-800">
            </div>
            <!-- 编辑模式 -->
            <textarea id="feishu-doc-edit" class="hidden w-full bg-white border border-gray-200 rounded-lg p-4 min-h-[300px] text-sm font-mono text-gray-800 focus:outline-none focus:border-blue-500" placeholder="输入文档内容..."></textarea>
        </div>
    </div>
</div>

<!-- 新建知识库弹窗 -->
<div id="create-kb-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-md">
        <h2 class="text-2xl font-semibold mb-4">新建知识库</h2>
        <form id="create-kb-form" class="space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">知识库名称 *</label>
                <input type="text" id="kb-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>
                <textarea id="kb-description" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2"></textarea>
            </div>
            <div class="flex justify-end space-x-2 pt-4">
                <button type="button" onclick="closeCreateKBModal()" 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="kb-detail-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-4xl max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-center mb-4">
            <h2 id="kb-detail-title" class="text-2xl font-semibold"></h2>
            <button onclick="closeKBDetailModal()" class="text-gray-500 hover:text-gray-700">
                ✕
            </button>
        </div>
        
        <!-- Tab切换 -->
        <div class="border-b border-gray-200 mb-4">
            <nav class="-mb-px flex space-x-8">
                <button onclick="switchTab('documents')" id="tab-documents" class="tab-button border-blue-500 text-blue-600 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm">
                    文档列表
                </button>
                <button onclick="switchTab('search')" id="tab-search" class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm">
                    语义检索
                </button>
            </nav>
        </div>
        
        <!-- 文档列表Tab -->
        <div id="documents-panel">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-2">上传文档</label>
                <div class="flex items-center space-x-2">
                    <input type="file" id="upload-file" accept=".pdf,.md,.txt" class="flex-1 border border-gray-300 rounded-lg px-3 py-2">
                    <button onclick="uploadDocument()" class="btn-primary px-4 py-2 rounded-lg">
                        上传
                    </button>
                </div>
                <p class="text-xs text-gray-500 mt-1">支持 PDF、Markdown、TXT 格式</p>

                <!-- 飞书文档导入 -->
                <div class="mt-4 pt-3 border-t border-gray-200">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        📚 从飞书文档导入
                        <span class="text-xs text-gray-400 ml-1">(需先在系统设置配置飞书 App ID/Secret)</span>
                    </label>
                    <div class="flex items-center space-x-2">
                        <input type="text" id="feishu-url" placeholder="粘贴飞书文档 URL (https://xxx.feishu.cn/docx/xxx 或 /wiki/xxx)" class="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm">
                        <button onclick="importFeishuDoc()" class="px-4 py-2 rounded-lg bg-blue-600 text-white hover:bg-blue-700 text-sm font-medium">
                            导入
                        </button>
                        <button onclick="testFeishuDoc()" class="px-3 py-2 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 text-sm font-medium" title="仅测试拉取，不入库">
                            测试
                        </button>
                    </div>
                    <div id="feishu-import-result" class="text-xs mt-2 hidden"></div>
                </div>
            </div>
            
            <div id="documents-list" class="space-y-2">
                <!-- 动态加载 -->
            </div>
        </div>
        
        <!-- 语义检索Tab -->
        <div id="search-panel" class="hidden">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">查询文本</label>
                <textarea id="search-query" rows="3" class="w-full border border-gray-300 rounded-lg px-3 py-2" placeholder="输入要检索的内容"></textarea>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">返回数量</label>
                <input type="number" id="search-top-k" value="3" min="1" max="10" class="border border-gray-300 rounded-lg px-3 py-2">
            </div>
            <button onclick="performSearch()" class="btn-primary px-4 py-2 rounded-lg mb-4">
                开始检索
            </button>
            
            <div id="search-results" class="space-y-3">
                <!-- 动态加载 -->
            </div>
        </div>
    </div>
</div>

<!-- 飞书新建文档弹窗 -->
<div id="feishu-create-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">
        <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>
                <input type="text" id="feishu-new-title" required class="w-full border border-gray-300 rounded-lg px-3 py-2" placeholder="输入文档标题">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">文档内容</label>
                <textarea id="feishu-new-content" rows="10" class="w-full border border-gray-300 rounded-lg px-3 py-2 font-mono text-sm" placeholder="输入文档内容（支持 Markdown 格式：# 标题、## 二级标题、- 列表项）"></textarea>
            </div>
            <div class="flex justify-end space-x-2 pt-4">
                <button type="button" onclick="closeFeishuCreateModal()" class="btn-secondary px-4 py-2 rounded-lg">取消</button>
                <button type="button" onclick="createFeishuDoc()" class="btn-primary px-4 py-2 rounded-lg">创建</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

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