{% extends "base.html" %}

{% block title %}车间看板 - Andon 安灯系统{% endblock %}

{% block head %}
<style>
    body {
        background: #000;
        color: #fff;
    }
    .dashboard-container {
        padding: 20px;
    }
    .issue-card {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
        border: 3px solid #444;
        border-radius: 15px;
        padding: 25px;
        margin-bottom: 20px;
        min-height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .issue-card.has-issues {
        border-color: var(--category-color, #dc3545);
        animation: pulse 2s infinite;
    }
    @keyframes pulse {
        0%, 100% { box-shadow: 0 0 20px var(--category-color, #dc3545); }
        50% { box-shadow: 0 0 40px var(--category-color, #dc3545); }
    }
    .issue-station {
        font-size: 3.5rem;
        font-weight: bold;
        margin-bottom: 15px;
    }
    .issue-category {
        font-size: 2.5rem;
        padding: 10px 30px;
        border-radius: 10px;
        display: inline-block;
        margin-bottom: 15px;
    }
    .issue-duration {
        font-size: 2rem;
        color: #ffcc00;
    }
    .issue-time {
        font-size: 1.2rem;
        color: #aaa;
        margin-top: 10px;
    }
    .no-issues {
        text-align: center;
        padding: 100px 20px;
        font-size: 3rem;
        color: #28a745;
    }
    .sound-control {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 1000;
    }
    .navbar {
        background: #1a1a1a !important;
    }
    .nav-link {
        color: #fff !important;
        font-size: 1.2rem;
    }
    .navbar-brand {
        color: #fff !important;
        font-size: 1.5rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <!-- 音频文件 -->
    <audio id="alertSound" preload="auto">
        <source src="{{ url_for('static', filename='quality.mp3') }}" type="audio/mpeg">
    </audio>

    <!-- 声音控制按钮 -->
    <div class="sound-control">
        <button class="btn btn-warning btn-lg" id="soundToggle">
            🔔 启动声音
        </button>
    </div>

    <!-- 异常列表 -->
    <div id="issuesContainer" class="row">
        <div class="col-12">
            <div class="no-issues">
                ✅ 暂无异常
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let soundEnabled = false;
let previousIssueIds = [];
const POLL_INTERVAL = 3000;  // 3秒轮询

// 声音控制
$('#soundToggle').on('click', function() {
    soundEnabled = !soundEnabled;
    const audio = $('#alertSound')[0];

    if (soundEnabled) {
        $(this).removeClass('btn-warning').addClass('btn-success').text('🔔 声音已开启');
        // 尝试播放一次以获取用户交互
        audio.play().catch(() => {});
        // 立即轮询一次
        pollIssues();
    } else {
        $(this).removeClass('btn-success').addClass('btn-warning').text('🔔 启动声音');
    }
});

// 计算持续时间
function formatDuration(startTime) {
    const start = new Date(startTime);
    const now = new Date();
    const diff = Math.floor((now - start) / 1000 / 60);  // 分钟
    const hours = Math.floor(diff / 60);
    const minutes = diff % 60;

    if (hours > 0) {
        return `已持续 ${hours} 小时 ${minutes} 分钟`;
    }
    return `已持续 ${minutes} 分钟`;
}

// 颜色映射
const colorMap = {
    'danger': '#dc3545',
    'primary': '#0d6efd',
    'warning': '#ffc107',
    'success': '#198754',
    'info': '#0dcaf0',
    'secondary': '#6c757d'
};

// 渲染异常列表
function renderIssues(issues) {
    const container = $('#issuesContainer');

    if (issues.length === 0) {
        container.html(`
            <div class="col-12">
                <div class="no-issues">
                    ✅ 暂无异常
                </div>
            </div>
        `);
        return;
    }

    let html = '';
    issues.forEach(issue => {
        const color = colorMap[issue.category_color] || '#dc3545';
        html += `
            <div class="col-md-6 col-lg-4">
                <div class="issue-card has-issues" style="--category-color: ${color}">
                    <div class="issue-station">${issue.station_name}</div>
                    <div class="issue-category bg-${issue.category_color}">${issue.category_name}</div>
                    <div class="issue-duration">⏱ ${formatDuration(issue.start_time)}</div>
                    <div class="issue-time">触发时间：${new Date(issue.start_time).toLocaleString('zh-CN')}</div>
                </div>
            </div>
        `;
    });

    container.html(html);
}

// 轮询异常
function pollIssues() {
    $.get('/api/active_issues', function(response) {
        if (response.success) {
            const issues = response.issues;
            const currentIds = issues.map(i => i.id);

            // 检查是否有新异常
            if (soundEnabled && previousIssueIds.length > 0) {
                const newIds = currentIds.filter(id => !previousIssueIds.includes(id));
                if (newIds.length > 0) {
                    // 有新异常，播放声音
                    $('#alertSound')[0].play().catch(() => {});
                }
            }

            previousIssueIds = currentIds;
            renderIssues(issues);
        }
    });
}

// 启动轮询
$(document).ready(function() {
    // 初始加载
    pollIssues();
    // 定时轮询
    setInterval(pollIssues, POLL_INTERVAL);
});
</script>
{% endblock %}