{% extends "base.html" %}

{% block title %}展厅灯光控制{% endblock %}

{% block extra_styles %}
    @media (max-width: 768px) {
        .ha-ceiling-labels {
            flex-wrap: wrap;
            justify-content: space-between;
            row-gap: 6px;
            font-size: 11px;
        }
    }
{% endblock %}

{% block content %}
    <div class="module-header">
        <h2>💡 展厅灯光控制 (HA)</h2>
    </div>
    
    <div class="sub-section">
        
        <!-- 1. 玄关顶灯 -->
        <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('entrance_lights', 'turn_on')">打开</button>
                     <button class="btn" style="flex: 1; background-color: #34495e; color: white;" onclick="controlHALight('entrance_lights', 'turn_off')">关闭</button>
                </div>
            </div>
        </div>

        <!-- 2. 玄关射灯 -->
        <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_spotlight', 'turn_on')">打开</button>
                     <button class="btn" style="flex: 1; background-color: #34495e; color: white;" onclick="controlHALight('exhibition_spotlight', 'turn_off')">关闭</button>
                </div>
            </div>
        </div>

        <!-- 3. 展厅顶灯 -->
        <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: 10px; align-items: center;">
                    <span style="font-weight: bold; min-width: 30px;" id="ceilingLightLevelVal">0</span>
                    <input type="range" id="ceilingLightLevel" min="0" max="3" value="0" step="1" 
                           style="flex: 1; height: 30px;"
                           onchange="controlHALightLevel(this.value)"
                           oninput="document.getElementById('ceilingLightLevelVal').textContent = this.value">
                </div>
                <div class="ha-ceiling-labels" style="display: flex; justify-content: space-between; font-size: 12px; color: #666; margin-top: 5px; padding: 0 5px;">
                    <span>0 (全关)</span>
                    <span>1 (单灯)</span>
                    <span>2 (双灯)</span>
                    <span>3 (全开)</span>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block scripts %}
<script>
    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);
        }
    }

    async function controlHALightLevel(level) {
        try {
            showLoading(true);
            const response = await fetch('/api/ha/exhibition_ceiling_lights/set_level', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ level: parseInt(level) })
            });
            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 %}