{% extends "base.html" %}

{% block title %}Wiki 管理{% endblock %}

{% block head %}
<!-- 引入相关CSS和JS -->
<link href="{{ url_for('static', filename='libs/quill/quill.snow.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='libs/highlight/highlight.min.js') }}"></script>
<script src="{{ url_for('static', filename='libs/highlight/languages/javascript.min.js') }}"></script>
<script src="{{ url_for('static', filename='libs/highlight/languages/python.min.js') }}"></script>
<script src="{{ url_for('static', filename='libs/highlight/languages/bash.min.js') }}"></script>
<script src="{{ url_for('static', filename='libs/highlight/languages/xml.min.js') }}"></script>
<script src="{{ url_for('static', filename='libs/quill/quill.min.js') }}"></script>
{% endblock %}

{% block content %}
{% include 'admin_nav.html' %}
<div class="admin-wiki-container">
    <h1 class="page-title">添加 Wiki 条目</h1>

    <div class="add-entry-section">
        <h2>添加新条目</h2>
        <form id="addEntryForm" class="entry-form" enctype="multipart/form-data">
            <div class="wiki-editor-container">
                <div class="wiki-editor-sidebar">
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="text" id="title" name="title" required>
                    </div>
                    <div class="form-group">
                        <label for="version">版本</label>
                        <input type="text" id="version" name="version" required>
                    </div>
                    <div class="form-group">
                        <label>条目类型</label>
                        <select id="wiki-type" class="form-control" required>
                            <option value="">选择条目类型</option>
                            <!-- 动态加载的选项将在这里生成 -->
                        </select>
                        <div id="selected-category-display" class="mt-2 text-muted"></div>
                    </div>
                </div>
                <div class="wiki-editor-main">
                    <div class="form-group">
                        <label for="content">内容</label>
                        <div id="content-editor" class="editor"></div>
                        <input type="hidden" id="content" name="content">
                    </div>
                </div>
            </div>
            
            <button type="submit" class="btn-primary">添加条目</button>
            <!-- 隐藏的分类字段 -->
            <input type="hidden" id="first-level" name="first_level">
            <input type="hidden" id="second-level" name="second_level">
            <input type="hidden" id="third-level" name="third_level">
        </form>
    </div>
</div>

<style>
/* 新增样式 */
.wiki-editor-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.wiki-editor-sidebar {
    width: 250px;
    background: #f9fafb;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.wiki-editor-main {
    flex-grow: 1;
}

.wiki-editor-sidebar .form-group {
    margin-bottom: 15px;
}

.wiki-editor-sidebar .form-group label {
    margin-bottom: 6px;
}

.wiki-editor-sidebar .form-group input,
.wiki-editor-sidebar .form-group select {
    width: 100%;
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
}

/* 暗色模式适配 */
[data-theme="dark"] .wiki-editor-sidebar {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .wiki-editor-sidebar .form-group input,
[data-theme="dark"] .wiki-editor-sidebar .form-group select {
    background: #111827;
    border-color: #374151;
    color: #f9fafb;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .wiki-editor-container {
        flex-direction: column;
    }

    .wiki-editor-sidebar {
        width: 100%;
    }
}

/* 容器布局 */
.admin-wiki-container {
    margin-left: 250px;
    padding: 20px;
    min-height: 100vh;
    background: #f8f9fa;
}

@media (max-width: 768px) {
    .admin-wiki-container {
        margin-left: 0;
        padding: 15px;
    }
}

/* 二级导航栏样式 */
.wiki-header {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin: -20px -20px 20px -20px;
    padding: 15px 20px;
    z-index: 100;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.admin-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    background: linear-gradient(120deg, #3b82f6, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wiki-nav {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: #666;
    text-decoration: none;
    font-weight: 500;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.nav-item:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.nav-item.active {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.nav-item i {
    font-size: 16px;
}

/* 编辑器样式 */
.editor {
    height: 400px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 4px;
}

.ql-toolbar.ql-snow {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ql-container.ql-snow {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* 表单样式 */
.add-entry-section {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.add-entry-section h2 {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: #333;
}

.entry-form {
    margin: 0 auto;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input[type="text"],
.form-group input[type="file"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.admin-title {
    margin: 0;
    font-size: 24px;
    color: #333;
}

.wiki-actions {
    display: flex;
    gap: 15px;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #007AFF;
    color: #fff;
}

.btn-secondary {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #ddd;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-secondary:hover {
    background: #e9ecef;
}

/* 暗色模式适配 */
[data-theme="dark"] .wiki-header {
    background: rgba(26, 26, 26, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .wiki-nav {
    border-bottom-color: #333;
}

[data-theme="dark"] .nav-item {
    color: #999;
}

[data-theme="dark"] .nav-item:hover {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .nav-item.active {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.15);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .wiki-header {
        position: static;
        margin: -15px -15px 15px -15px;
        padding: 15px;
    }

    .header-content {
        gap: 10px;
    }

    .admin-title {
        font-size: 20px;
    }

    .wiki-nav {
        gap: 10px;
    }

    .nav-item {
        padding: 6px 12px;
        font-size: 14px;
    }
}

.page-title {
    margin: 0 0 30px 0;
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.entry-count {
    font-size: 14px;
    color: #666;
    font-weight: normal;
}

[data-theme="dark"] .page-title {
    color: #fff;
}

[data-theme="dark"] .entry-count {
    color: #999;
}

.image-upload-container {
    margin-top: 10px;
}

.image-upload-area {
    border: 2px dashed #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.image-upload-area:hover {
    border-color: #3b82f6;
    background: #f8fafc;
}

.image-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-placeholder {
    color: #6b7280;
}

.upload-placeholder i {
    font-size: 32px;
    margin-bottom: 10px;
    color: #9ca3af;
}

.upload-placeholder p {
    margin: 5px 0;
    font-size: 16px;
}

.upload-hint {
    font-size: 14px;
    color: #9ca3af;
}

.image-preview-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.preview-remove:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

/* 暗色模式适配 */
[data-theme="dark"] .image-upload-area {
    border-color: #374151;
}

[data-theme="dark"] .image-upload-area:hover {
    border-color: #3b82f6;
    background: #1f2937;
}

[data-theme="dark"] .preview-item {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .upload-placeholder {
    color: #9ca3af;
}

[data-theme="dark"] .upload-placeholder i {
    color: #6b7280;
}

.custom-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 1000;
    max-width: 400px;
    width: 90%;
    text-align: center;
}

.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    display: none;
}

.custom-modal-content {
    margin-bottom: 20px;
}

.custom-modal-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

[data-theme="dark"] .custom-modal {
    background: #2c2c2c;
    color: white;
}
</style>

<div id="customModalOverlay" class="custom-modal-overlay">
    <div class="custom-modal">
        <div id="customModalContent" class="custom-modal-content"></div>
        <div class="custom-modal-actions">
            <button id="customModalConfirm" class="btn-primary">确定</button>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    console.log('=== 页面加载完成，开始初始化分类选择 ===');

    // 获取关键元素
    const wikiTypeSelect = document.getElementById('wiki-type');
    const selectedCategoryDisplay = document.getElementById('selected-category-display');
    const firstLevelInput = document.getElementById('first-level');
    const secondLevelInput = document.getElementById('second-level');
    const thirdLevelInput = document.getElementById('third-level');

    // 详细的元素存在性检查
    console.log('元素检查:', {
        wikiTypeSelect: !!wikiTypeSelect,
        selectedCategoryDisplay: !!selectedCategoryDisplay,
        firstLevelInput: !!firstLevelInput,
        secondLevelInput: !!secondLevelInput,
        thirdLevelInput: !!thirdLevelInput
    });

    // 如果任何关键元素缺失，立即退出
    if (!wikiTypeSelect || !selectedCategoryDisplay || 
        !firstLevelInput || !secondLevelInput || !thirdLevelInput) {
        console.error('未找到必要的页面元素，分类加载终止');
        return;
    }

    // 分类加载函数
    async function loadWikiCategories() {
        try {
            const response = await fetch('/admin/wiki/categories', {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            if (!response.ok) {
                console.error('获取分类失败:', response.statusText);
                return;
            }

            const categories = await response.json();
            console.log('获取到的分类数据:', categories);

            // 按一级分类分组
            const groupedCategories = {};
            categories.forEach(category => {
                const { first_level, second_level, third_level } = category;
                
                if (!groupedCategories[first_level]) {
                    groupedCategories[first_level] = {};
                }
                
                if (!groupedCategories[first_level][second_level]) {
                    groupedCategories[first_level][second_level] = [];
                }
                
                groupedCategories[first_level][second_level].push(third_level);
            });

            const wikiTypeSelect = document.getElementById('wiki-type');
            wikiTypeSelect.innerHTML = ''; // 清空现有选项

            // 动态生成分类选项
            Object.entries(groupedCategories).forEach(([firstLevel, secondLevels]) => {
                const firstLevelOptgroup = document.createElement('optgroup');
                firstLevelOptgroup.label = firstLevel;

                Object.entries(secondLevels).forEach(([secondLevel, thirdLevels]) => {
                    thirdLevels.forEach(thirdLevel => {
                        const option = document.createElement('option');
                        option.value = `${firstLevel} - ${secondLevel} - ${thirdLevel}`;
                        option.textContent = `${firstLevel} - ${secondLevel} - ${thirdLevel}`;
                        firstLevelOptgroup.appendChild(option);
                    });
                });

                wikiTypeSelect.appendChild(firstLevelOptgroup);
            });

            console.log('分类数据处理完成');
        } catch (error) {
            console.error('加载分类时发生错误:', error);
        }
    }

    // 处理分类选择的函数
    function handleCategorySelection() {
        console.log('handleCategorySelection 被调用');
        
        // 确保选择了有效选项
        if (wikiTypeSelect.selectedIndex < 0) {
            console.warn('未选择有效选项');
            
            selectedCategoryDisplay.textContent = '请选择分类';
            
            // 清空隐藏字段
            firstLevelInput.value = '';
            secondLevelInput.value = '';
            thirdLevelInput.value = '';
            
            selectedCategoryDisplay.style.color = '#6b7280';
            return;
        }
        
        const selectedOption = wikiTypeSelect.options[wikiTypeSelect.selectedIndex];
        console.log('选中的选项:', selectedOption);

        // 安全地解析选择的分类
        try {
            // 直接使用 value 属性，不再假设使用下划线分隔
            const categoryParts = selectedOption.value.split(' - ');
            
            // 检查分类是否完整
            if (categoryParts.length !== 3) {
                throw new Error('分类格式不正确');
            }
            
            const [firstLevel, secondLevel, thirdLevel] = categoryParts;
            console.log('解析后的分类:', { firstLevel, secondLevel, thirdLevel });
            
            // 验证分类不为空
            if (!firstLevel || !secondLevel || !thirdLevel) {
                throw new Error('分类不能为空');
            }
            
            // 更新隐藏字段
            firstLevelInput.value = firstLevel;
            secondLevelInput.value = secondLevel;
            thirdLevelInput.value = thirdLevel;
            
            // 更新显示的分类信息
            const displayText = `${firstLevel} - ${secondLevel} - ${thirdLevel}`;
            selectedCategoryDisplay.textContent = displayText;
            
            // 样式增强
            selectedCategoryDisplay.style.color = '#3b82f6';
            selectedCategoryDisplay.style.fontWeight = '600';
            selectedCategoryDisplay.style.fontSize = '0.875rem';
            
        } catch (error) {
            console.error('分类选择错误:', error);
            
            // 重置显示
            selectedCategoryDisplay.textContent = '分类选择错误';
            selectedCategoryDisplay.style.color = '#dc3545';
            
            // 清空隐藏字段
            firstLevelInput.value = '';
            secondLevelInput.value = '';
            thirdLevelInput.value = '';
        }
    }

    // 添加 change 事件监听器
    wikiTypeSelect.addEventListener('change', handleCategorySelection);
    
    // 调用分类加载函数
    loadWikiCategories();

    // 额外的调试函数
    function debugCategoryLoading() {
        console.log('=== 分类加载调试 ===');
        fetch('/admin/wiki/categories', {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => {
            console.log('完整响应对象:', response);
            console.log('响应状态:', response.status);
            console.log('响应状态文本:', response.statusText);
            
            // 记录所有响应头
            console.log('响应头:');
            for (let [key, value] of response.headers.entries()) {
                console.log(`${key}: ${value}`);
            }
            
            return response.json();
        })
        .then(data => {
            console.log('=== 分类数据详细信息 ===');
            console.log('是否成功:', data.success);
            console.log('分类总数:', data.total_count);
            console.log('分类详情:', data.categories);
        })
        .catch(error => {
            console.error('分类加载调试失败:', error);
        });
    }

    // 立即执行调试
    debugCategoryLoading();
});

// 在页面加载时，默认选择第一个选项
document.addEventListener('DOMContentLoaded', function() {
    const wikiTypeSelect = document.getElementById('wiki-type');
    if (wikiTypeSelect && wikiTypeSelect.options.length > 0) {
        // 选择第一个 option
        wikiTypeSelect.selectedIndex = 0;
        // 触发 change 事件以更新分类显示
        wikiTypeSelect.dispatchEvent(new Event('change'));
    }
});

// 自定义弹窗函数
function showCustomModal(options) {
    const overlay = document.getElementById('customModalOverlay');
    const content = document.getElementById('customModalContent');
    const confirmBtn = document.getElementById('customModalConfirm');
    
    // 设置内容
    content.innerHTML = `
        <h3>${options.title || '提示'}</h3>
        <p>${options.text || ''}</p>
    `;
    
    // 设置样式
    content.parentElement.style.backgroundColor = options.type === 'success' ? '#e6f3e6' : '#f8d7da';
    confirmBtn.style.backgroundColor = options.type === 'success' ? '#28a745' : '#dc3545';
    
    // 显示弹窗
    overlay.style.display = 'block';
    
    // 确认按钮事件
    const handleConfirm = () => {
        overlay.style.display = 'none';
        confirmBtn.removeEventListener('click', handleConfirm);
        
        // 执行关闭回调
        if (options.didClose) {
            options.didClose();
        }
    };
    
    confirmBtn.addEventListener('click', handleConfirm);
}

document.addEventListener('DOMContentLoaded', function() {
    // Quill 工具栏配置
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'script': 'sub'}, { 'script': 'super' }],
        [{ 'indent': '-1'}, { 'indent': '+1' }],
        [{ 'direction': 'rtl' }],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'font': [] }],
        [{ 'align': [] }],
        ['clean'],
        ['link', 'image', 'video']
    ];

    // 确保编辑器容器存在
    const editorContainer = document.getElementById('content-editor');
    const hiddenContentInput = document.getElementById('content');

    if (!editorContainer || !hiddenContentInput) {
        console.error('富文本编辑器的必要元素未找到');
        return;
    }

    // 初始化 Quill 编辑器
    const editor = new Quill('#content-editor', {
        modules: {
            toolbar: {
                container: toolbarOptions,
                handlers: {
                    // 自定义链接处理
                    link: function(value) {
                        if (value) {
                            const range = this.quill.getSelection();
                            if (range) {
                                let url = prompt('请输入链接URL:');
                                if (url) {
                                    if (!/^https?:\/\//i.test(url)) {
                                        url = 'http://' + url;
                                    }
                                    this.quill.format('link', url);
                                }
                            }
                        } else {
                            this.quill.format('link', false);
                        }
                    }
                }
            },
            syntax: {
                highlight: (text) => hljs.highlightAuto(text).value
            }
        },
        theme: 'snow'
    });

    // 同步编辑器内容到隐藏输入框
    editor.on('text-change', function() {
        // 将编辑器内容转换为 JSON 格式
        const content = editor.getContents();
        hiddenContentInput.value = JSON.stringify(content);
    });

    // 调试：检查编辑器是否正确初始化
    console.log('Quill 编辑器初始化:', {
        editor: !!editor,
        container: editorContainer,
        hiddenInput: hiddenContentInput
    });

    // 可选：如果需要预填充内容
    try {
        // 尝试从隐藏输入框读取初始内容
        const initialContent = hiddenContentInput.value;
        if (initialContent) {
            const parsedContent = JSON.parse(initialContent);
            editor.setContents(parsedContent);
        }
    } catch (error) {
        console.warn('初始内容解析失败:', error);
    }
});

document.addEventListener('DOMContentLoaded', function() {
    // 表单提交处理
    const addEntryForm = document.getElementById('addEntryForm');
    
    if (!addEntryForm) {
        console.error('未找到表单元素 #addEntryForm');
        return;
    }

    addEntryForm.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        // 获取表单元素
        const titleInput = document.getElementById('title');
        const versionInput = document.getElementById('version');
        const contentInput = document.getElementById('content');
        const firstLevelInput = document.getElementById('first-level');
        const secondLevelInput = document.getElementById('second-level');
        const thirdLevelInput = document.getElementById('third-level');

        // 验证表单数据
        if (!titleInput || !versionInput || !contentInput || 
            !firstLevelInput || !secondLevelInput || !thirdLevelInput) {
            console.error('表单元素缺失');
            showCustomModal({
                title: '错误',
                text: '表单元素未正确加载，请刷新页面',
                type: 'error'
            });
            return;
        }

        // 获取表单数据
        const formData = {
            title: titleInput.value.trim(),
            version: versionInput.value.trim(),
            content: contentInput.value,
            first_level: firstLevelInput.value,
            second_level: secondLevelInput.value,
            third_level: thirdLevelInput.value
        };

        // 数据验证
        const validationErrors = [];
        if (!formData.title) validationErrors.push('标题不能为空');
        if (!formData.version) validationErrors.push('版本不能为空');
        if (!formData.content) validationErrors.push('内容不能为空');
        if (!formData.first_level || !formData.second_level || !formData.third_level) {
            validationErrors.push('请选择完整的分类');
        }

        if (validationErrors.length > 0) {
            showCustomModal({
                title: '表单验证错误',
                text: validationErrors.join('<br>'),
                type: 'error'
            });
            return;
        }

        try {
            const response = await fetch('/admin/wiki/add', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(formData)
            });

            const result = await response.json();

            if (result.success) {
                showCustomModal({
                    title: '成功',
                    text: 'Wiki 条目添加成功',
                    type: 'success',
                    didClose: () => {
                        // 可选：重置表单或跳转
                        addEntryForm.reset();
                        window.location.href = '/admin/wiki';
                    }
                });
            } else {
                showCustomModal({
                    title: '错误',
                    text: result.error || '添加 Wiki 条目失败',
                    type: 'error'
                });
            }
        } catch (error) {
            console.error('提交表单时发生错误:', error);
            showCustomModal({
                title: '网络错误',
                text: '无法提交表单，请检查网络连接',
                type: 'error'
            });
        }
    });
});
</script>
{% endblock %}