{{define "zitie"}}
<div id="panel-zitie" class="tool-panel">
    <header class="page-header">
        <h1>汉字字帖生成</h1>
        <p>提供智能缺字处理和古风排版的专业字帖工具。</p>
    </header>
    <div class="tabs-container">
        <div id="tab-teaching" class="tab-btn active" onclick="switchZitieMode('teaching')">教学版 (2x3)</div>
        <div id="tab-step" class="tab-btn" onclick="switchZitieMode('step')">临摹版 (9列)</div>
        <div id="tab-manuscript" class="tab-btn" onclick="switchZitieMode('manuscript')">古风纵写</div>
    </div>
    <div class="card">
        <div style="display: flex; flex-direction: column; gap: 20px;">
            <textarea id="chars" rows="5" placeholder="请输入汉字" style="resize: vertical; min-height: 120px;">天道酬勤 厚德载物</textarea>
            <div style="display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;">
                <div style="flex: 1; min-width: 200px;">
                    <label style="font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 8px; display: block;">纸张大小</label>
                    <select id="paper_size" class="apple-select">
                        <option value="Letter" selected>Letter (8.5x11in)</option>
                        <option value="A4">A4 (210x297mm)</option>
                    </select>
                </div>
                <div id="font-type-container" style="flex: 1; min-width: 200px; display: none;">
                    <label style="font-size: 13px; font-weight: 600; color: #86868b; margin-bottom: 8px; display: block;">书法字体</label>
                    <select id="font_type" class="apple-select">
                        <option value="kaiti">华光楷体 (推荐)</option>
                        <option value="songti">华光书宋</option>
                        <option value="lishu">华光隶变</option>
                        <option value="xingshu">华光行草</option>
                    </select>
                </div>
                <button id="btn-generate-zitie" onclick="generateZitiePDF()">生成 PDF 字帖</button>
            </div>
        </div>
    </div>
    <div id="zitie-preview" style="display:none; width: 100%; height: 850px; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12); background: #fff; border: 1px solid #d2d2d7;">
        <iframe id="pdf-frame" style="width:100%; height:100%; border:none;"></iframe>
    </div>
</div>

<script>
    let currentMode = 'teaching';
    function switchZitieMode(mode) {
        currentMode = mode;
        document.querySelectorAll('#panel-zitie .tab-btn').forEach(b => b.classList.remove('active'));
        document.getElementById(`tab-${mode}`).classList.add('active');
        document.getElementById('font-type-container').style.display = (mode === 'manuscript') ? 'block' : 'none';
    }

    async function generateZitiePDF() {
        const chars = document.getElementById('chars').value;
        const paper_size = document.getElementById('paper_size').value;
        const font_type = document.getElementById('font_type').value;
        if (!chars.trim()) { alert('请输入汉字'); return; }

        const btn = document.getElementById('btn-generate-zitie');
        const originalText = btn.innerText;
        btn.innerText = '生成中...'; btn.disabled = true;

        try {
            const response = await fetch(`/api/zitie/${currentMode}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ chars, paper_size, font_type })
            });
            const blob = await response.blob();
            const url = URL.createObjectURL(blob);
            document.getElementById('zitie-preview').style.display = 'block';
            document.getElementById('pdf-frame').src = url;
        } catch (e) {
            alert('生成失败: ' + e);
        } finally {
            btn.innerText = originalText; btn.disabled = false;
        }
    }
</script>
{{end}}