<view class="wrapper">
    <!-- STATE: LOADING_RULES -->
    <view wx:if="{{ app_state == 'loading_rules' }}" class="loading-spinner">
        <view class="spinner"></view>
        <text>加载相机规则...</text>
    </view>

    <!-- STATE: LOADING_QRTOOL -->
    <view wx:if="{{ app_state == 'loading_qrtool' }}" class="loading-spinner">
        <view class="spinner"></view>
        <text>初始化QR工具...</text>
    </view>

    <!-- CAMERA STATES: INIT_CAMERA, QR_DETECTING, CHECK_AUTO_TORCH, or FINAL_SCANNING -->
    <block wx:if="{{ app_state == 'init_camera' || app_state == 'qr_detecting' || app_state == 'check_auto_torch' || app_state == 'final_scanning' }}">

        <!-- QR targeting arcs overlay (only show during scanning states) -->
        <view wx:if="{{ app_state == 'qr_detecting' || app_state == 'check_auto_torch' || app_state == 'final_scanning' }}" class="qrarc {{ qrarc_class }}">
            <image class="topleft arc" src="./assets/arc.png"></image>
            <image class="topright arc" src="./assets/arc.png"></image>
            <image class="bottomleft arc" src="./assets/arc.png"></image>
            <image class="bottomright arc" src="./assets/arc.png"></image>
        </view>

        <!-- QR markers overlay (only show during scanning states) -->
        <view wx:if="{{ app_state == 'qr_detecting' || app_state == 'check_auto_torch' || app_state == 'final_scanning' }}" class="qrmarkers {{ qrmarkers_class }}">
            <image class="square" src="./assets/qrmarkers.png"></image>
        </view>

        <!-- On-screen display for hints (all camera states) -->
        <view class="osd">
            <view class="upper" bindtap="debug_tap">
                {{ hint_text }}
            </view>
        </view>

        <!-- Single WeChat native camera for all camera states -->
        <camera class="camera"
                flash="{{ camera_flash }}"
                frame-size="large"
                resolution="high"
                bindinitdone="onCameraReady"
                binderror="onCameraError">
        </camera>
    </block>

    <!-- STATE: WEBVIEW_SCANNING -->
    <block wx:if="{{ app_state == 'webview_scanning' }}">
        <!-- Web-view camera (no overlays) -->
        <web-view src="{{ emblem_camera_url }}" 
                  bindmessage="on_webview_message">
        </web-view>
    </block>
    
    <!-- Debug overlay (available in all states) -->
    <view class="debug" wx:if="{{ enable_debug }}">
        <view class="debug-top-row">
            <view class="debug-image-box">
                <image src="{{ debug_image_data_url }}"></image>
                <view class="debug-label">Debug Frame</view>
            </view>
            <view class="debug-info-panel">
                <view class="debug-items">
            <!-- Application State -->
            <view class="debug-item">
                <text class="debug-label">state:</text>
                <text class="debug-value">{{ app_state }}</text>
            </view>
            
            <!-- System Info -->
            <view class="debug-item">
                <text class="debug-label">model:</text>
                <text class="debug-value">{{ phone_model }}</text>
            </view>
            <view class="debug-item">
                <text class="debug-label">zoom:</text>
                <text class="debug-value-number">{{ zoom }}/{{ max_zoom }}</text>
            </view>
            <view class="debug-item">
                <text class="debug-label">sensitivity:</text>
                <text class="debug-value">{{ camera_sensitivity }}</text>
            </view>
            <view class="debug-item debug-flag-box" wx:if="{{ no_web_view }}">
                <text class="debug-flag">no_web_view</text>
            </view>
            
            <!-- Frame Statistics -->
            <view class="debug-item">
                <text class="debug-label">frames:</text>
                <text class="debug-value-number">{{ frames_processed }}</text>
                <text class="debug-value">/</text>
                <text class="debug-value-number">{{ frames_processed + frames_skipped }}</text>
            </view>
            <view class="debug-item">
                <text class="debug-label">ok:</text>
                <text class="debug-value">{{ ok_frames }}</text>
                <text class="debug-value">/3</text>
            </view>
            <view class="debug-item">
                <text class="debug-label">avg:</text>
                <text class="debug-value-number">{{ avg_processing_time_ms }}ms</text>
            </view>
            
            <!-- QR Detection Results -->
            <view class="debug-item" wx:if="{{ debug_last_result }}">
                <text class="debug-label">qr:</text>
                <text class="debug-value">{{ debug_last_result.qrcode || 'none' }}</text>
            </view>
            <view class="debug-item" wx:if="{{ debug_last_result }}">
                <text class="debug-label">ok:</text>
                <text class="debug-value">{{ debug_last_result.ok ? 'yes' : 'no' }}</text>
            </view>
            <view class="debug-item" wx:if="{{ debug_last_result && debug_last_result.err }}">
                <text class="debug-label">err:</text>
                <text class="debug-value">{{ debug_last_result.err }}</text>
            </view>
            
            <!-- Legacy Result -->
            <view class="debug-item" wx:if="{{ result }}">
                <text class="debug-label">result:</text>
                <text class="debug-value">{{ result }}</text>
            </view>
                </view>
            </view>
        </view>
        <view class="debug-messages">
            <text wx:for="{{ debug_msgs }}" class="debug-msg">{{ item }}</text>
        </view>
    </view>
    
    <!-- Bottom action controls (for camera init and QR detection/scanning) -->
    <view wx:if="{{ app_state == 'init_camera' || app_state == 'qr_detecting' || app_state == 'check_auto_torch' || app_state == 'final_scanning' }}" class="bottomfixed">
        <view class="actions">
            <view class="half {{ show_tip ? 'brighter' : '' }}" bindtap="show_scanguide">
                <view class="icon">
                    <image src="./assets/play-button.png"></image>
                </view>
                <view class="text">
                    扫描指南
                </view>
            </view>
            <view class="half {{ camera_flash == 'torch' ? 'brighter' : '' }}" bindtap="toggle_torch">
                <view class="icon">
                    <image src="./assets/flash-button.png"></image>
                </view>
                <view class="text">
                    开启补光
                </view>
            </view>
        </view>
    </view>
</view>

<!-- Tooltip -->
<view wx:if="{{ show_tip && show_modal == '' }}" class="tooltip">
    <view class="tooltip-content">
        <text>将QR码置于框内进行扫描</text>
    </view>
</view>

<!-- Service Modal -->
<view wx:if="{{ show_modal == 'service' }}" class="modal">
    <view class="modal-content">
        <text>服务联系信息</text>
        <button bindtap="close_modal">关闭</button>
    </view>
</view>

<!-- Verification Spinner - shows during backend submission -->
<view wx:if="{{ show_modal == 'verifying' }}" class="verification-container">
    <view class="verification-spinner {{ verifying_stage == 0 ? 'spin-and-shrink' : 'spin-only' }}">
        <image class="square" src="./assets/spinner.png"></image>
    </view>
    <view class="verification-loading">
        Loading
    </view>
</view>

<!-- Scan Guide -->
<view wx:if="{{ show_modal == 'scanguide' }}" class="scanguide-mask">
    <view class="scanguide-container">
        <view class="scanguide-header">
            <view class="scanguide-title-text">
                扫描指南
            </view>
            <view class="scanguide-subtitle">
                按以下步骤完成扫描
            </view>
        </view>
        <view class="scanguide-content">
            <view class="scanguide-title">
                <view class="scanguide-text1">
                    移近一点
                </view>
                <view class="scanguide-text2">
                    等待对焦
                </view>
                <view class="scanguide-text3">
                    对齐定位点
                </view>
                <view class="scanguide-text4">
                    采集完成
                </view>
            </view>
            <view class="scanguide-scan">
                <image class="scanguide-markers-glow" src="./assets/scan-guide-qrmarkers-glow.png"></image>
                <image class="scanguide-markers" src="./assets/scan-guide-qrmarkers.png"></image>
                <image class="scanguide-qr" src="./assets/scan-guide-qr.png"></image>
            </view>
        </view>
        <view class="scanguide-actions">
            <view class="scanguide-buttons">
                <view class="scanguide-left-half">
                    <button bindtap="show_service">人工客服</button>
                </view>
                <view class="scanguide-right-half">
                    <button bindtap="close_modal">
                        <image class="scanguide-return" src="./assets/return.png" />
                        采集
                    </button>
                </view>
            </view>
        </view>
    </view>
</view>