{% extends "layout.html" %}
{% block title %}内容撰写助手{% endblock %}
{% block content %}
<div class="page-header">
    <h4 class="mb-1"><i class="bi bi-pencil-square me-2"></i>内容撰写助手</h4>
    <small class="text-muted">常用文书模板 — 选择模板 → 填写字段 → 一键生成</small>
</div>

<div class="row g-3">
    <!-- 左侧：模板选择 -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">模板库</div>
            <div class="card-body p-0">
                <div class="p-2">
                    <input id="scenarioInput" class="form-control form-control-sm" placeholder="搜索场景，如：周报 / 邮件 / 会议纪要">
                </div>
                <div id="categoryList" class="list-group list-group-flush" style="max-height:600px;overflow-y:auto;"></div>
            </div>
        </div>
    </div>

    <!-- 中间：字段填写 -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span id="tplName">选择模板</span>
                <span class="badge bg-secondary" id="tplCount"></span>
            </div>
            <div class="card-body" id="fieldsArea" style="max-height:700px;overflow-y:auto;">
                <div class="text-center text-muted py-5">
                    <i class="bi bi-file-earmark-text fs-1"></i>
                    <p class="mt-2 mb-0">从左侧选择模板</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧：预览 -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span>预览</span>
                <div>
                    <button class="btn btn-sm btn-outline-secondary" onclick="copyContent()"><i class="bi bi-clipboard"></i> 复制</button>
                    <button class="btn btn-sm btn-outline-primary" onclick="downloadContent()"><i class="bi bi-download"></i> 下载</button>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="alert alert-warning m-2 py-1 small" id="todoAlert" style="display:none;">
                    <i class="bi bi-exclamation-triangle me-1"></i>还有 <span id="todoCount">0</span> 个字段未填
                </div>
                <pre id="previewArea" class="m-0 p-3" style="white-space:pre-wrap;font-family:'Microsoft YaHei',sans-serif;min-height:500px;max-height:700px;overflow-y:auto;background:#f8f9fa;">从左侧选择模板开始…</pre>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
let allTemplates = [];
let currentTpl = null;
let formValues = {};

async function loadTemplates() {
    allTemplates = await apiCall("/api/content-writer/templates");
    renderCategories();
}

function renderCategories(filter) {
    const grouped = {};
    allTemplates.forEach(t => {
        const matchName = !filter || t.name.toLowerCase().includes(filter.toLowerCase());
        const matchDesc = !filter || (t.description || "").toLowerCase().includes(filter.toLowerCase());
        const matchCat = !filter || t.category.includes(filter);
        if (!matchName && !matchDesc && !matchCat) return;
        if (!grouped[t.category]) grouped[t.category] = [];
        grouped[t.category].push(t);
    });
    const html = Object.entries(grouped).map(([cat, items]) =>
        `<div class="list-group-item bg-light"><strong class="small text-muted">${cat}</strong></div>` +
        items.map(t => `<button class="list-group-item list-group-item-action" onclick="selectTpl('${t.id}')"><div>${t.name}</div><small class="text-muted">${t.description || ""}</small></button>`).join("")
    ).join("");
    document.getElementById("categoryList").innerHTML = html || '<div class="list-group-item text-muted small">无匹配模板</div>';
}

document.getElementById("scenarioInput").addEventListener("input", e => renderCategories(e.target.value));

function selectTpl(id) {
    currentTpl = allTemplates.find(t => t.id === id);
    formValues = {};
    if (!currentTpl) return;
    document.getElementById("tplName").textContent = currentTpl.category + " · " + currentTpl.name;
    document.getElementById("tplCount").textContent = currentTpl.placeholders.length + " 个字段";
    renderFields();
    renderPreview();
}

function renderFields() {
    if (!currentTpl) return;
    const html = currentTpl.placeholders.map(([key, label, hint]) => `
        <div class="mb-2">
            <label class="form-label small fw-bold">${label}</label>
            <textarea class="form-control form-control-sm" data-key="${key}" rows="${hint && hint.length > 30 ? 2 : 1}" placeholder="${hint || ""}" oninput="onFieldChange('${key}', this.value)"></textarea>
        </div>
    `).join("");
    document.getElementById("fieldsArea").innerHTML = html;
}

function onFieldChange(key, val) {
    formValues[key] = val;
    renderPreview();
}

async function renderPreview() {
    if (!currentTpl) return;
    const r = await apiCall("/api/content-writer/render", "POST", {template_id: currentTpl.id, values: formValues});
    document.getElementById("previewArea").textContent = r.content || r.error || "";
    if (r.todo_count > 0) {
        document.getElementById("todoAlert").style.display = "block";
        document.getElementById("todoCount").textContent = r.todo_count;
    } else {
        document.getElementById("todoAlert").style.display = "none";
    }
}

function copyContent() {
    const text = document.getElementById("previewArea").textContent;
    navigator.clipboard.writeText(text).then(() => showToast("已复制到剪贴板"));
}

function downloadContent() {
    const text = document.getElementById("previewArea").textContent;
    const blob = new Blob([text], {type: "text/plain;charset=utf-8"});
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.download = (currentTpl ? currentTpl.name : "content") + ".txt";
    a.click();
}

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