{% extends 'base.html' %}

{% block css %}
<style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: {{ setting.global_bg_color }};
        font-family: Arial, sans-serif;
    }
    
    #background-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    
    #background-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #background-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    #qr-code {
        position: fixed;
        {% if setting.qr_code_position == 'top-left' %}
            top: {{ setting.qr_code_margin_top }}px;
            left: {{ setting.qr_code_margin_left }}px;
        {% elif setting.qr_code_position == 'top-right' %}
            top: {{ setting.qr_code_margin_top }}px;
            right: {{ setting.qr_code_margin_right }}px;
        {% elif setting.qr_code_position == 'bottom-left' %}
            bottom: {{ setting.qr_code_margin_bottom }}px;
            left: {{ setting.qr_code_margin_left }}px;
        {% elif setting.qr_code_position == 'bottom-right' %}
            bottom: {{ setting.qr_code_margin_bottom }}px;
            right: {{ setting.qr_code_margin_right }}px;
        {% elif setting.qr_code_position == 'center' %}
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        {% endif %}
        width: 150px;
        height: 150px;
        z-index: 100;
    }
    
    #qr-code img {
        width: 100%;
        height: 100%;
        border: 2px solid white;
        border-radius: 10px;
    }
    
    #danmu-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 50;
    }
    
    .danmu-item {
        position: absolute;
        white-space: nowrap;
        padding: 12px 18px;
        border-radius: 25px;
        font-size: 20px;
        font-weight: bold;
        color: {{ setting.danmu_font_color }};
        background-color: rgba({{ setting.danmu_bg_color|slice:'1:3'|add:','|add:setting.danmu_bg_color|slice:'3:5'|add:','|add:setting.danmu_bg_color|slice:'5:7'|add:','|add:'0.8' }});
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        animation: danmu-scroll 8s linear infinite;
        backdrop-filter: blur(2px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .danmu-item img {
        max-height: 100px;
        max-width: 200px;
        vertical-align: middle;
        border-radius: 5px;
    }
    
    @keyframes danmu-scroll {
        from { transform: translateX(100vw); }
        to { transform: translateX(-100%); }
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
        #qr-code {
            width: 100px;
            height: 100px;
        }
        
        .danmu-item {
            font-size: 16px;
            padding: 10px 15px;
            border-radius: 20px;
        }
    }
</style>
{% endblock %}

{% block content %}
    <div id="background-container">
        {% if setting.background_video %}
            <video id="background-video" autoplay loop muted playsinline>
                <source src="{{ setting.background_video.url }}" type="video/mp4">
            </video>
        {% elif setting.background_image %}
            <img id="background-image" src="{{ setting.background_image.url }}" alt="背景图片">
        {% endif %}
    </div>
    
    <div id="qr-code">
        {% if setting.qr_code_image %}
            <img src="{{ setting.qr_code_image.url }}" alt="二维码">
        {% else %}
            <!-- 默认二维码 -->
            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ request.build_absolute_uri }}{% url 'submit' %}" alt="默认二维码">
        {% endif %}
    </div>
    
    <div id="danmu-container">
        <!-- 初始弹幕 -->
        {% for danmu in danmus %}
            <div class="danmu-item">
                {{ danmu.name }}: {{ danmu.content }}
                {% if danmu.image %}
                    <img src="{{ danmu.image.url }}" alt="图片">
                {% endif %}
            </div>
        {% endfor %}
    </div>
{% endblock %}

{% block js %}
<script>
    $(document).ready(function() {
        // 获取弹幕容器
        const danmuContainer = $('#danmu-container');
        const containerHeight = danmuContainer.height();
        const containerWidth = danmuContainer.width();
        
        // 弹幕高度（包含padding和margin）
        const DANMU_HEIGHT = 60;
        
        // 上次获取弹幕的时间
        let lastTime = new Date().toISOString();
        
        // 获取所有当前弹幕的位置信息
        function getCurrentDanmuPositions() {
            const positions = [];
            const danmus = danmuContainer.find('.danmu-item');
            danmus.each(function() {
                const $danmu = $(this);
                const top = parseInt($danmu.css('top')) || 0;
                positions.push({
                    top: top,
                    bottom: top + DANMU_HEIGHT
                });
            });
            return positions;
        }
        
        // 检查位置是否与现有弹幕重叠
        function isPositionOverlapping(newTop) {
            const positions = getCurrentDanmuPositions();
            const newBottom = newTop + DANMU_HEIGHT;
            
            for (const pos of positions) {
                // 检查是否有重叠
                if (!(newBottom <= pos.top || newTop >= pos.bottom)) {
                    return true; // 重叠
                }
            }
            return false; // 不重叠
        }
        
        // 生成随机且不重叠的位置
        function getRandomNonOverlappingTop() {
            let attempts = 0;
            const maxAttempts = 20;
            let newTop;
            
            do {
                // 生成随机位置，考虑边距和弹幕高度
                newTop = Math.floor(Math.random() * (containerHeight - DANMU_HEIGHT - 20)) + 10;
                attempts++;
            } while (isPositionOverlapping(newTop) && attempts < maxAttempts);
            
            // 如果尝试多次仍失败，返回一个安全位置
            if (attempts >= maxAttempts) {
                newTop = Math.floor(Math.random() * (containerHeight - DANMU_HEIGHT - 20)) + 10;
            }
            
            return newTop;
        }
        
        // 添加新弹幕
        function addDanmu(danmu) {
            // 获取随机且不重叠的位置
            const topPosition = getRandomNonOverlappingTop();
            
            const danmuItem = $('<div>', {
                class: 'danmu-item',
                style: `top: ${topPosition}px;`,
                text: `${danmu.name}: ${danmu.content}`
            });
            
            if (danmu.image) {
                const img = $('<img>', {
                    src: danmu.image,
                    alt: '图片',
                    onload: function() {
                        // 图片加载完成后重新计算宽度
                        danmuItem.css('animation', 'danmu-scroll 8s linear infinite');
                    }
                });
                danmuItem.append(' ').append(img);
            }
            
            danmuContainer.append(danmuItem);
            
            // 8秒后移除弹幕
            setTimeout(() => {
                danmuItem.remove();
            }, 8000);
        }
        
        // 定时获取新弹幕
        setInterval(() => {
            $.ajax({
                url: '{% url 'api_danmu' %}',
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    const newDanmus = data.danmus.filter(danmu => new Date(danmu.created_at) > new Date(lastTime));
                    
                    if (newDanmus.length > 0) {
                        newDanmus.forEach(danmu => {
                            addDanmu(danmu);
                        });
                        
                        // 更新最后时间
                        lastTime = new Date().toISOString();
                    }
                }
            });
        }, 2000); // 每2秒获取一次
        
        // 初始弹幕位置处理
        function initDanmuPositions() {
            const danmus = danmuContainer.find('.danmu-item');
            danmus.each(function() {
                const topPosition = getRandomNonOverlappingTop();
                $(this).css('top', topPosition + 'px');
            });
        }
        
        // 初始化弹幕位置
        initDanmuPositions();
    });
    </script>
{% endblock %}