<nav-bar title="英语字母描红" />

<view class="lt-page">
    <view class="lt-main">
        <view class="lt-preview-wrap">
            <view class="lt-preview-card">
                <text class="lt-preview-kicker">打印预览</text>
                <view id="canvasWrapper" class="lt-canvas-wrap">
                    <canvas
                        type="2d"
                        id="canvasContent"
                        class="lt-canvas"
                        style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
                </view>
            </view>
        </view>

        <view class="lt-params">
            <view class="lt-params-head">
                <text class="lt-params-emoji">⚙️</text>
                <text class="lt-params-title">参数设置</text>
            </view>

            <view class="param-block">
                <text class="lt-field-label">练习类型</text>
                <view class="lt-mode-seg">
                    <view
                        wx:for="{{modeOptions}}"
                        wx:key="id"
                        class="lt-mode-item {{worksheetId === item.id ? 'lt-mode-item--active' : ''}}"
                        data-id="{{item.id}}"
                        bindtap="onSelectMode">
                        <text class="lt-mode-item__text">{{item.label}}</text>
                    </view>
                </view>
            </view>

            <view wx:if="{{showLetterPicker}}" class="param-block">
                <text class="lt-field-label">选择字母</text>
                <view class="lt-letter-grid">
                    <view
                        wx:for="{{letterGrid}}"
                        wx:key="*this"
                        class="lt-letter-cell {{selectedLetter === item ? 'lt-letter-cell--active' : ''}}"
                        data-letter="{{item}}"
                        bind:tap="onSelectLetter">
                        <text class="lt-letter-text">{{item}}</text>
                    </view>
                </view>
            </view>

            <view wx:if="{{showCaseToggle}}" class="param-block">
                <text class="lt-field-label">大小写</text>
                <view class="lt-chip-row">
                    <view
                        class="lt-chip {{!letterCaseLower ? 'lt-chip--active' : ''}}"
                        bind:tap="onSelectCaseUpper">
                        大写 A–Z
                    </view>
                    <view
                        class="lt-chip {{letterCaseLower ? 'lt-chip--active' : ''}}"
                        bind:tap="onSelectCaseLower">
                        小写 a–z
                    </view>
                </view>
            </view>
        </view>

        <button
            wx:if="{{showNextLetter}}"
            hover-class="none"
            class="lt-shuffle-btn"
            bindtap="onNextLetter">
            🔄 换一批
        </button>

        <draw-ad type="mathDraw"></draw-ad>
        <view class="lt-spacer-bottom"></view>
    </view>
</view>

<view class="lt-bottom-bar">
    <button class="lt-bottom-share" hover-class="none" open-type="share">
        <text class="lt-bottom-icon">↗</text>
        分享
    </button>
    <button
        class="lt-bottom-save"
        hover-class="none"
        disabled="{{!hasContent}}"
        bindtap="exportToPrint">
        <text class="lt-bottom-icon">⬇</text>
        保存到相册
    </button>
</view>

<share-guide-popup
    show="{{showShareDialog}}"
    bind:onClose="onCloseShareDialog"
    bind:onShareSuccess="onShareSuccess" />
