{% extends "base.html" %}

{% block title %}展品灯座控制{% endblock %}

{% block extra_styles %}
    @media (max-width: 768px) {
        .led-effect-actions {
            flex-direction: column !important;
            align-items: stretch !important;
            width: 100%;
        }

        .led-effect-actions .btn {
            width: 100%;
        }
    }
{% endblock %}

{% block content %}
    <div class="module-header">
        <h2>💡 展品灯座控制</h2>
    </div>

    <div class="sub-section">
        <!-- HA 设备控制 -->
        <h3 style="margin-bottom: 20px; color: #2c3e50; border-bottom: 2px solid #eee; padding-bottom: 10px;">其他灯座控制</h3>
        
        <!-- 展厅桌面的灯座总开关 -->
        <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #eee; margin-bottom: 15px;">
            <h4 style="margin-bottom: 15px; color: #555;">展厅桌面的灯座总开关</h4>
            <div class="control-row">
                <div class="control-group" style="display: flex; gap: 15px;">
                     <button class="btn btn-secondary" style="flex: 1;" onclick="controlHALight('exhibition_desktop_switch', 'turn_on')">打开</button>
                     <button class="btn" style="flex: 1; background-color: #34495e; color: white;" onclick="controlHALight('exhibition_desktop_switch', 'turn_off')">关闭</button>
                </div>
            </div>
        </div>

        <!-- 展厅桌面3D风扇投影 -->
        <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #eee; margin-bottom: 15px;">
            <h4 style="margin-bottom: 15px; color: #555;">展厅桌面3D风扇投影</h4>
            <div class="control-row">
                <div class="control-group" style="display: flex; gap: 15px;">
                     <button class="btn btn-secondary" style="flex: 1;" onclick="controlHALight('exhibition_3d_fan', 'turn_on')">打开</button>
                     <button class="btn" style="flex: 1; background-color: #34495e; color: white;" onclick="controlHALight('exhibition_3d_fan', 'turn_off')">关闭</button>
                </div>
            </div>
        </div>

        <!-- 展台桌子灯带 -->
        <div style="background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #eee; margin-bottom: 15px;">
            <h4 style="margin-bottom: 15px; color: #555;">展台桌子灯带</h4>
            <div class="control-row">
                <div class="control-group" style="display: flex; gap: 15px;">
                     <button class="btn btn-secondary" style="flex: 1;" onclick="controlHALight('exhibition_stand_light_strip', 'turn_on')">打开</button>
                     <button class="btn" style="flex: 1; background-color: #34495e; color: white;" onclick="controlHALight('exhibition_stand_light_strip', 'turn_off')">关闭</button>
                </div>
            </div>
        </div>

        <h3 style="margin-top: 30px; margin-bottom: 20px; color: #2c3e50; border-bottom: 2px solid #eee; padding-bottom: 10px;">展品灯带特效控制</h3>
        <div class="control-row">
            <div class="control-group">
                <label for="exhibitId">选择展品</label>
                <select id="exhibitId">
                    {% if led_segments %}
                        {% for segment in led_segments %}
                            <option value="{{ segment.id }}">{{ segment.name }} (ID: {{ segment.id }})</option>
                        {% endfor %}
                    {% else %}
                        <option value="0">未找到配置 (默认ID: 0)</option>
                    {% endif %}
                </select>
            </div>
            <div class="control-group led-effect-actions" style="flex: 2; display: flex; align-items: flex-end; gap: 10px;">
                <button class="btn btn-primary" onclick="startEffect()">启动灯效</button>
                <button class="btn btn-secondary" onclick="stopEffect()">停止灯效</button>
                <button class="btn btn-warning" onclick="getStatus()">刷新状态</button>
            </div>
        </div>

        <div class="status-display" id="ledStatusDisplay">
            <div id="statusContent">点击"刷新状态"查看当前LED状态</div>
        </div>

        <div style="margin-top: 20px; padding: 15px; background: #e3f2fd; border-radius: 8px; border-left: 4px solid #2196f3; color: #0d47a1;">
            <p><strong>📖 灯效说明：</strong> 指定展品将显示白色呼吸灯效，其他展品保持静止。10秒后，所有展品将随机播放波浪、闪烁或呼吸效果。</p>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    let currentStatus = null;

    document.addEventListener('DOMContentLoaded', function() {
        getStatus();
    });

    async function getStatus() {
        try {
            const response = await fetch('/api/led/status');
            const result = await response.json();
            
            if (result.success) {
                currentStatus = result.data;
                document.getElementById('statusContent').innerHTML = `
                    <p><strong>运行状态:</strong> ${currentStatus.is_running ? '运行中' : '已停止'}</p>
                    <p><strong>信息:</strong> ${currentStatus.message}</p>
                `;
            } else {
                document.getElementById('statusContent').innerHTML = `<span style="color:red">获取失败: ${result.message}</span>`;
            }
        } catch (error) {
            console.error(error);
            document.getElementById('statusContent').innerHTML = `<span style="color:red">网络错误</span>`;
        }
    }

    async function startEffect() {
        const exhibitId = parseInt(document.getElementById('exhibitId').value);
        if (isNaN(exhibitId) || exhibitId < 0) {
            showMessage('请输入有效的展品ID', 'error');
            return;
        }
        try {
            showLoading(true);
            const response = await fetch('/api/led/start', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ exhibit_id: exhibitId })
            });
            const result = await response.json();
            if (result.success) {
                showMessage(result.message);
                getStatus();
            } else {
                showMessage(result.message, 'error');
            }
        } catch (error) {
            showMessage('网络错误: ' + error.message, 'error');
        } finally {
            showLoading(false);
        }
    }

    async function stopEffect() {
        try {
            showLoading(true);
            const response = await fetch('/api/led/stop', { method: 'POST', headers: { 'Content-Type': 'application/json' } });
            const result = await response.json();
            if (result.success) {
                showMessage(result.message);
                getStatus();
            } else {
                showMessage(result.message, 'error');
            }
        } catch (error) {
            showMessage('网络错误: ' + error.message, 'error');
        } finally {
            showLoading(false);
        }
    }

    async function controlHALight(device, action) {
        let url = '';
        if (device === 'all') {
            url = `/api/ha/${action}_all`;
        } else {
            url = `/api/ha/${device}/${action}`;
        }
        
        try {
            showLoading(true);
            const response = await fetch(url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' }
            });
            const result = await response.json();
            if (result.success) {
                showMessage(result.message);
            } else {
                showMessage(result.message, 'error');
            }
        } catch (error) {
            showMessage('网络错误: ' + error.message, 'error');
        } finally {
            showLoading(false);
        }
    }
</script>
{% endblock %}