{% extends "base.html" %}

{% block title %}工位操作 - Andon 安灯系统{% endblock %}

{% block content %}
<div class="container mt-4">
    {% if station %}
    {# 已登录：显示操作界面 #}
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>📍 {{ station.station_name }}</h2>
                <button class="btn btn-outline-secondary" id="logoutBtn">退出登录</button>
            </div>
        </div>
    </div>

    {# 异常触发按钮区域 #}
    <div class="row mb-5">
        <div class="col-12">
            <h3 class="mb-3">🚨 触发异常</h3>
            <div class="row g-3" id="categoryButtons">
                {% for cat in categories %}
                <div class="col-6 col-md-4 col-lg-2">
                    <button class="btn btn-lg w-100 issue-btn btn-{{ cat.color }}"
                            data-category-id="{{ cat.id }}"
                            data-category-name="{{ cat.name }}">
                        <div class="issue-icon">{{ cat.name }}</div>
                    </button>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    {# 我的异常列表 #}
    <div class="row">
        <div class="col-12">
            <h3 class="mb-3">📋 我的未解决异常</h3>
            {% if my_issues %}
            <div class="list-group" id="myIssuesList">
                {% for issue in my_issues %}
                <div class="list-group-item" data-issue-id="{{ issue.id }}">
                    <div class="d-flex w-100 justify-content-between align-items-start">
                        <div class="flex-grow-1">
                            <h5 class="mb-1">
                                <span class="badge bg-{{ issue.category_color }}">{{ issue.category_name }}</span>
                                <small class="text-muted">已持续 {{ issue.get_duration_minutes() }} 分钟</small>
                            </h5>
                            <p class="mb-1"><strong>触发时间：</strong>{{ issue.start_time.strftime('%Y-%m-%d %H:%M:%S') }}</p>
                        </div>
                    </div>
                    <div class="mt-3 resolve-section">
                        <label class="form-label">处理过程：</label>
                        <textarea class="form-control mb-2" rows="2" placeholder="请填写处理过程...">{{ issue.solution_note or '' }}</textarea>
                        <button class="btn btn-success btn-resolve" data-issue-id="{{ issue.id }}">确认解决</button>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="alert alert-success">
                <strong>✅ 暂无未解决的异常</strong>
            </div>
            {% endif %}
        </div>
    </div>

    {% else %}
    {# 未登录：显示登录表单 #}
    <div class="row justify-content-center mt-5">
        <div class="col-md-6 col-lg-4">
            <div class="card shadow">
                <div class="card-body p-4">
                    <h3 class="text-center mb-4">🏭 工位登录</h3>
                    <form id="loginForm">
                        <div class="mb-3">
                            <label for="stationId" class="form-label">工位 ID</label>
                            <input type="text" class="form-control form-control-lg" id="stationId"
                                   placeholder="请输入工位ID" required>
                        </div>
                        <div class="mb-4">
                            <label for="password" class="form-label">密码</label>
                            <input type="password" class="form-control form-control-lg" id="password"
                                   placeholder="请输入密码" required>
                        </div>
                        <button type="submit" class="btn btn-primary btn-lg w-100">登录</button>
                    </form>
                    <div id="loginAlert" class="alert alert-danger mt-3 d-none"></div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- 成功提示模态框 -->
<div class="modal fade" id="successModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-4">
                <h3 class="text-success mb-3">✅ <span id="successMessage">操作成功</span></h3>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // ========== 登录功能 ==========
    $('#loginForm').on('submit', function(e) {
        e.preventDefault();
        $.post('/login', {
            station_id: $('#stationId').val(),
            password: $('#password').val()
        }, function(response) {
            if (response.success) {
                location.reload();
            } else {
                $('#loginAlert').text(response.message).removeClass('d-none');
            }
        });
    });

    // ========== 登出功能 ==========
    $('#logoutBtn').on('click', function() {
        $.post('/logout', function() {
            location.reload();
        });
    });

    // ========== 触发异常 ==========
    $('.issue-btn').on('click', function() {
        const categoryId = $(this).data('category-id');
        const categoryName = $(this).data('category-name');

        if (!confirm(`确定要触发「${categoryName}」异常吗？`)) {
            return;
        }

        $.ajax({
            url: '/api/trigger',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ category_id: categoryId }),
            success: function(response) {
                if (response.success) {
                    $('#successMessage').text(response.message);
                    $('#successModal').modal('show');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    alert('触发失败：' + response.message);
                }
            },
            error: function() {
                alert('网络错误，请重试');
            }
        });
    });

    // ========== 解决异常 ==========
    $('.btn-resolve').on('click', function() {
        const issueId = $(this).data('issue-id');
        const listItem = $(this).closest('.list-group-item');
        const note = listItem.find('textarea').val();

        if (!confirm('确定要解决这个异常吗？')) {
            return;
        }

        $.ajax({
            url: '/api/resolve/' + issueId,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ solution_note: note }),
            success: function(response) {
                if (response.success) {
                    $('#successMessage').text(response.message);
                    $('#successModal').modal('show');
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                } else {
                    alert('操作失败：' + response.message);
                }
            },
            error: function() {
                alert('网络错误，请重试');
            }
        });
    });
});
</script>
{% endblock %}