<?php
/**
 * 红包模块
 */
?>
<style>
    .redpacket-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--card-color);
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
        z-index: 100;
        overflow: hidden;
        animation: slideUp 0.3s ease;
    }
    
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    .redpacket-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    
    .redpacket-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color);
    }
    
    .redpacket-close {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--background-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 20px;
        color: var(--text-secondary-color);
    }
    
    .redpacket-content {
        padding: 24px;
    }
    
    .redpacket-icon {
        text-align: center;
        margin-bottom: 24px;
    }
    
    .redpacket-icon span {
        font-size: 64px;
    }
    
    .redpacket-amount-container {
        text-align: center;
        margin-bottom: 24px;
    }
    
    .redpacket-amount-label {
        font-size: 14px;
        color: var(--text-secondary-color);
        margin-bottom: 8px;
    }
    
    .redpacket-amount-input {
        width: 200px;
        height: 60px;
        text-align: center;
        font-size: 36px;
        font-weight: 600;
        color: #d32f2f;
        border: none;
        outline: none;
        background: transparent;
    }
    
    .redpacket-amount-input::placeholder {
        color: #ddd;
    }
    
    .redpacket-amount-unit {
        font-size: 24px;
        color: #d32f2f;
        font-weight: 500;
    }
    
    .redpacket-note-container {
        margin-bottom: 24px;
    }
    
    .redpacket-note-label {
        font-size: 14px;
        color: var(--text-secondary-color);
        margin-bottom: 8px;
    }
    
    .redpacket-note-input {
        width: 100%;
        height: 44px;
        padding: 0 16px;
        background: var(--background-color);
        border: none;
        border-radius: 8px;
        font-size: 15px;
        outline: none;
    }
    
    .redpacket-tips {
        font-size: 12px;
        color: #ff9800;
        margin-bottom: 24px;
        text-align: center;
    }
    
    .redpacket-action-btn {
        width: 100%;
        height: 48px;
        background: linear-gradient(135deg, #d32f2f 0%, #ff5252 100%);
        color: #fff;
        border: none;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
    
    .redpacket-action-btn:hover {
        opacity: 0.9;
    }
    
    .redpacket-action-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
    }
</style>

<script>
    /**
     * 显示红包面板
     */
    function showRedPacketPanel() {
        closeActionPanel();
        
        const overlay = document.createElement('div');
        overlay.className = 'panel-overlay show';
        overlay.id = 'redPacketOverlay';
        overlay.onclick = closeRedPacketPanel;
        document.body.appendChild(overlay);
        
        const panel = document.createElement('div');
        panel.className = 'redpacket-panel';
        panel.id = 'redPacketPanel';
        
        panel.innerHTML = `
            <div class="redpacket-header">
                <span class="redpacket-title">发红包</span>
                <div class="redpacket-close" onclick="closeRedPacketPanel()">×</div>
            </div>
            <div class="redpacket-content">
                <div class="redpacket-icon">
                    <span class="iconify" data-icon="mdi:gift" style="color:#d32f2f;"></span>
                </div>
                <div class="redpacket-amount-container">
                    <div class="redpacket-amount-label">金额</div>
                    <div style="display:flex;align-items:center;justify-content:center;">
                        <span style="font-size:24px;color:#d32f2f;">¥</span>
                        <input type="number" class="redpacket-amount-input" id="redPacketAmount" placeholder="0.00" min="0.01" step="0.01">
                        <span class="redpacket-amount-unit">元</span>
                    </div>
                </div>
                <div class="redpacket-note-container">
                    <div class="redpacket-note-label">祝福语（可选）</div>
                    <input type="text" class="redpacket-note-input" id="redPacketNote" placeholder="恭喜发财，大吉大利">
                </div>
                <div class="redpacket-tips">红包金额需大于0元</div>
                <button class="redpacket-action-btn" id="sendRedPacketBtn" onclick="sendRedPacket()" disabled>
                    塞钱进红包
                </button>
            </div>
        `;
        
        document.body.appendChild(panel);
        
        // 监听金额输入
        const amountInput = document.getElementById('redPacketAmount');
        amountInput.addEventListener('input', function() {
            const btn = document.getElementById('sendRedPacketBtn');
            btn.disabled = parseFloat(this.value) <= 0;
        });
        
        // 自动聚焦
        setTimeout(() => amountInput.focus(), 300);
        
        // 加载 iconify
        loadIconify();
    }
    
    /**
     * 发送红包
     */
    function sendRedPacket() {
        const amount = parseFloat(document.getElementById('redPacketAmount').value);
        const note = document.getElementById('redPacketNote').value || '恭喜发财，大吉大利';
        
        if (amount <= 0) {
            showToast('请输入有效金额');
            return;
        }
        
        closeRedPacketPanel();
        
        fetch('<?php echo $this->url('mobileApi/sendMessage'); ?>', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                user_id: partnerId,
                content: `<div class="redpacket-message">
                    <div class="redpacket-cover">
                        <span class="iconify" data-icon="mdi:gift"></span>
                        <div class="redpacket-amount">¥${amount.toFixed(2)}</div>
                        <div class="redpacket-note">${note}</div>
                    </div>
                </div>`
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.code === 0) {
                const container = document.getElementById('messagesContainer');
                const item = document.createElement('div');
                item.className = 'message-item me';
                item.innerHTML = `
                    <div class="message-content">
                        <div class="message-bubble" style="background:linear-gradient(135deg, #d32f2f 0%, #ff5252 100%);padding:16px;">
                            <div style="text-align:center;color:#fff;">
                                <span class="iconify" data-icon="mdi:gift" style="font-size:32px;margin-bottom:8px;display:block;"></span>
                                <div style="font-size:24px;font-weight:600;margin-bottom:4px;">¥${amount.toFixed(2)}</div>
                                <div style="font-size:12px;opacity:0.9;">${note}</div>
                            </div>
                        </div>
                        <div class="message-time">刚刚</div>
                    </div>
                `;
                container.appendChild(item);
                scrollToBottom();
                showToast('红包发送成功');
            } else {
                showToast(data.message || '发送失败');
            }
        })
        .catch(() => {
            showToast('发送失败');
        });
    }
    
    /**
     * 关闭红包面板
     */
    function closeRedPacketPanel() {
        const overlay = document.getElementById('redPacketOverlay');
        const panel = document.getElementById('redPacketPanel');
        
        if (panel) {
            panel.style.transform = 'translateY(100%)';
            panel.style.transition = 'transform 0.3s';
            setTimeout(() => panel.remove(), 300);
        }
        
        if (overlay) {
            overlay.classList.remove('show');
            setTimeout(() => overlay.remove(), 300);
        }
    }
    
    function loadIconify() {
        if (!window.iconifyLoaded) {
            const script = document.createElement('script');
            script.src = 'https://code.iconify.design/1/1.0.7/iconify.min.js';
            document.head.appendChild(script);
            window.iconifyLoaded = true;
        }
    }
</script>