{{define "content"}}

<!-- 注入各个工具面板 -->
{{template "zitie" .}}
{{template "learn_number" .}}

<!-- 欢迎面板 -->
<div id="panel-welcome" class="tool-panel">
    <header class="page-header">
        <h1>欢迎使用个人工具箱</h1>
        <p>这是您的私人效率基地。请从侧边栏或下方列表选择一个功能开始。</p>
    </header>

    <div style="margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px;">
        <div class="card" style="cursor:pointer; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'" onclick="navigateTo('/zitie')">
            <h3 style="margin-top:0;">🖋️ 汉字字帖生成</h3>
            <p style="color: #86868b; line-height: 1.5;">支持多种书法字体的 2x3 教学方格、步进分解和古风竖排信纸。</p>
            <div style="color: var(--apple-blue); font-weight: 600; margin-top: 16px;">立即开始 →</div>
        </div>
        <div class="card" style="cursor:pointer; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-5px)'" onmouseout="this.style.transform='translateY(0)'" onclick="navigateTo('/learn-number')">
            <h3 style="margin-top:0;">🔢 幼儿数学助手</h3>
            <p style="color: #86868b; line-height: 1.5;">数图形、基础算术等趣味练习。培养孩子的数感与逻辑。</p>
            <div style="color: var(--apple-blue); font-weight: 600; margin-top: 16px;">立即开始 →</div>
        </div>
    </div>
</div>

<script>
    // --- Zitie Tool Logic ---
    let currentZitieMode = 'teaching';
    function switchZitieTab(mode) {
        currentZitieMode = mode;
        document.querySelectorAll('#panel-zitie .tab-btn').forEach(btn => btn.classList.remove('active'));
        document.getElementById(`tab-${mode}`).classList.add('active');
        document.getElementById('font-select-group').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;
        const btn = document.querySelector('#panel-zitie button');
        btn.innerText = '绘图中...'; btn.disabled = true;
        try {
            const response = await fetch(`/api/zitie/${currentZitieMode}`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ chars, paper_size, font_type })
            });
            if (response.ok) {
                const blob = await response.blob();
                document.getElementById('zitie-preview').style.display = 'block';
                document.getElementById('zitie-frame').src = URL.createObjectURL(blob);
            }
        } catch (e) { alert('错误'); } finally { btn.innerText = '生成字帖预览'; btn.disabled = false; }
    }

    // --- Math Tool Logic ---
    async function generateMathPDF() {
        const total_count = parseInt(document.getElementById('total_count').value);
        const icon_types = parseInt(document.getElementById('icon_types').value);
        const paper_size = document.getElementById('math_paper_size').value;
        const btn = document.querySelector('#panel-learn-number button');
        btn.innerText = '生成中...'; btn.disabled = true;
        try {
            const response = await fetch('/api/learn-number/counting', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ total_count, icon_types, paper_size })
            });
            if (response.ok) {
                const blob = await response.blob();
                document.getElementById('math-preview').style.display = 'block';
                document.getElementById('math-frame').src = URL.createObjectURL(blob);
                if(window.innerWidth < 768) document.getElementById('math-preview').scrollIntoView({behavior: 'smooth'});
            }
        } catch (e) { alert('错误'); } finally { btn.innerText = '生成数学练习帖'; btn.disabled = false; }
    }
</script>
{{end}}