<?php
/**
 * 礼物模块
 */
?>
<style>
    .gift-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;
        max-height: 80vh;
        display: flex;
        flex-direction: column;
    }
    
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    .gift-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    
    .gift-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-color);
    }
    
    .gift-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);
    }
    
    .gift-content {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
    }
    
    .gift-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    
    .gift-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        cursor: pointer;
        padding: 12px 8px;
        border-radius: 12px;
        transition: background 0.2s;
    }
    
    .gift-item:hover {
        background: rgba(0,0,0,0.05);
    }
    
    .gift-item.selected {
        background: rgba(var(--primary-color-rgb), 0.1);
    }
    
    .gift-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    }
    
    .gift-item:nth-child(2) .gift-icon { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }
    .gift-item:nth-child(3) .gift-icon { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
    .gift-item:nth-child(4) .gift-icon { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }
    .gift-item:nth-child(5) .gift-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    .gift-item:nth-child(6) .gift-icon { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    .gift-item:nth-child(7) .gift-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    .gift-item:nth-child(8) .gift-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
    
    .gift-name {
        font-size: 12px;
        color: var(--text-color);
        text-align: center;
    }
    
    .gift-price {
        font-size: 11px;
        color: #ff5722;
        font-weight: 500;
    }
    
    .gift-footer {
        padding: 16px;
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
    }
    
    .gift-selected-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }
    
    .gift-selected-name {
        font-size: 14px;
        color: var(--text-color);
    }
    
    .gift-selected-price {
        font-size: 16px;
        color: #ff5722;
        font-weight: 600;
    }
    
    .gift-action-btn {
        width: 100%;
        height: 48px;
        background: var(--primary-color);
        color: #fff;
        border: none;
        border-radius: 24px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
    }
    
    .gift-action-btn:hover {
        opacity: 0.9;
    }
</style>

<script>
    // 礼物列表
    const gifts = [
        { id: 1, name: '爱心', icon: 'mdi:heart', price: 1 },
        { id: 2, name: '玫瑰', icon: 'mdi:flower-2', price: 5 },
        { id: 3, name: '蛋糕', icon: 'mdi:cake', price: 10 },
        { id: 4, name: '香槟', icon: 'mdi:glass-champagne', price: 20 },
        { id: 5, name: '钻石', icon: 'mdi:diamond', price: 50 },
        { id: 6, name: '皇冠', icon: 'mdi:crown', price: 100 },
        { id: 7, name: '星星', icon: 'mdi:star', price: 10 },
        { id: 8, name: '火箭', icon: 'mdi:rocket', price: 200 }
    ];
    
    let selectedGift = null;
    
    /**
     * 显示礼物面板
     */
    function showGiftPanel() {
        closeActionPanel();
        selectedGift = null;
        
        const overlay = document.createElement('div');
        overlay.className = 'panel-overlay show';
        overlay.id = 'giftOverlay';
        overlay.onclick = closeGiftPanel;
        document.body.appendChild(overlay);
        
        const panel = document.createElement('div');
        panel.className = 'gift-panel';
        panel.id = 'giftPanel';
        
        panel.innerHTML = `
            <div class="gift-header">
                <span class="gift-title">送礼物</span>
                <div class="gift-close" onclick="closeGiftPanel()">×</div>
            </div>
            <div class="gift-content">
                <div class="gift-grid" id="giftGrid"></div>
            </div>
            <div class="gift-footer">
                <div class="gift-selected-info">
                    <span class="gift-selected-name" id="selectedGiftName">未选择礼物</span>
                    <span class="gift-selected-price" id="selectedGiftPrice">¥0</span>
                </div>
                <button class="gift-action-btn" id="sendGiftBtn" onclick="sendGift()" disabled>
                    发送礼物
                </button>
            </div>
        `;
        
        document.body.appendChild(panel);
        
        // 渲染礼物列表
        renderGiftGrid();
        
        // 加载 iconify
        loadIconify();
    }
    
    /**
     * 渲染礼物网格
     */
    function renderGiftGrid() {
        const container = document.getElementById('giftGrid');
        if (!container) return;
        
        gifts.forEach(gift => {
            const item = document.createElement('div');
            item.className = 'gift-item';
            item.onclick = () => selectGift(gift);
            item.innerHTML = `
                <div class="gift-icon">
                    <span class="iconify" data-icon="${gift.icon}" style="font-size:28px;color:#fff;"></span>
                </div>
                <span class="gift-name">${gift.name}</span>
                <span class="gift-price">¥${gift.price}</span>
            `;
            container.appendChild(item);
        });
    }
    
    /**
     * 选择礼物
     */
    function selectGift(gift) {
        selectedGift = gift;
        
        // 更新选中状态
        document.querySelectorAll('.gift-item').forEach(el => el.classList.remove('selected'));
        event.currentTarget.classList.add('selected');
        
        // 更新底部信息
        document.getElementById('selectedGiftName').textContent = `已选择：${gift.name}`;
        document.getElementById('selectedGiftPrice').textContent = `¥${gift.price}`;
        document.getElementById('sendGiftBtn').disabled = false;
    }
    
    /**
     * 发送礼物
     */
    function sendGift() {
        if (!selectedGift) return;
        
        closeGiftPanel();
        
        fetch('<?php echo $this->url('mobileApi/sendMessage'); ?>', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                user_id: partnerId,
                content: `<div class="gift-message">
                    <span class="iconify" data-icon="${selectedGift.icon}"></span>
                    <span class="gift-name">${selectedGift.name}</span>
                </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, #ff9a9e 0%, #fecfef 100%);padding:12px 16px;color:#fff;">
                            <div style="display:flex;align-items:center;gap:8px;">
                                <span class="iconify" data-icon="${selectedGift.icon}" style="font-size:24px;"></span>
                                <span style="font-weight:500;">${selectedGift.name}</span>
                            </div>
                        </div>
                        <div class="message-time">刚刚</div>
                    </div>
                `;
                container.appendChild(item);
                scrollToBottom();
                showToast(`${selectedGift.name} 已送出`);
            } else {
                showToast(data.message || '发送失败');
            }
        })
        .catch(() => {
            showToast('发送失败');
        });
    }
    
    /**
     * 关闭礼物面板
     */
    function closeGiftPanel() {
        const overlay = document.getElementById('giftOverlay');
        const panel = document.getElementById('giftPanel');
        
        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>