{% extends "base.html" %}

{% block title %}系统配置 - Andon 安灯系统{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2 class="mb-4">⚙️ 系统配置</h2>

    {% if show_login %}
    {# 管理员登录表单 #}
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body p-4">
                    <h4 class="mb-3">管理员登录</h4>
                    <p class="text-muted">默认密码：admin123</p>
                    <form id="configLoginForm">
                        <div class="mb-3">
                            <label class="form-label">密码</label>
                            <input type="password" class="form-control" id="configPassword"
                                   placeholder="请输入管理员密码" required>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">登录</button>
                    </form>
                    <div id="loginAlert" class="alert alert-danger mt-3 d-none"></div>
                </div>
            </div>
        </div>
    </div>

    {% else %}
    {# 配置管理界面 #}
    <div class="row mb-3">
        <div class="col-12">
            <button class="btn btn-outline-secondary" id="logoutBtn">退出登录</button>
        </div>
    </div>

    <!-- 标签页 -->
    <ul class="nav nav-tabs mb-4" id="configTabs">
        <li class="nav-item">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#stationsTab">工位管理</button>
        </li>
        <li class="nav-item">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#categoriesTab">异常类型管理</button>
        </li>
    </ul>

    <div class="tab-content">
        <!-- 工位管理 -->
        <div class="tab-pane fade show active" id="stationsTab">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">工位列表</h5>
                    <button class="btn btn-primary" id="addStationBtn">➕ 添加工位</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>工位ID</th>
                                    <th>工位名称</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="stationsTableBody">
                                {% for station in stations %}
                                <tr data-id="{{ station.id }}">
                                    <td>{{ station.station_id }}</td>
                                    <td>{{ station.station_name }}</td>
                                    <td>
                                        {% if station.is_active %}
                                        <span class="badge bg-success">启用</span>
                                        {% else %}
                                        <span class="badge bg-secondary">禁用</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary edit-station">编辑</button>
                                        <button class="btn btn-sm btn-outline-danger delete-station">删除</button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 异常类型管理 -->
        <div class="tab-pane fade" id="categoriesTab">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">异常类型列表</h5>
                    <button class="btn btn-primary" id="addCategoryBtn">➕ 添加类型</button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                                <tr>
                                    <th>类型名称</th>
                                    <th>颜色</th>
                                    <th>显示顺序</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="categoriesTableBody">
                                {% for cat in categories %}
                                <tr data-id="{{ cat.id }}">
                                    <td>{{ cat.name }}</td>
                                    <td><span class="badge bg-{{ cat.color }}">{{ cat.color }}</span></td>
                                    <td>{{ cat.display_order }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary edit-category">编辑</button>
                                        <button class="btn btn-sm btn-outline-danger delete-category">删除</button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>

<!-- 工位编辑模态框 -->
<div class="modal fade" id="stationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="stationModalTitle">添加工位</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="stationForm">
                    <input type="hidden" id="stationId">
                    <div class="mb-3">
                        <label class="form-label">工位ID <small class="text-muted">(用于登录)</small></label>
                        <input type="text" class="form-control" id="stationCode" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">工位名称</label>
                        <input type="text" class="form-control" id="stationName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">密码 <small class="text-muted">(留空则不修改)</small></label>
                        <input type="password" class="form-control" id="stationPassword">
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="stationActive" checked>
                            <label class="form-check-label">启用</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveStationBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 异常类型编辑模态框 -->
<div class="modal fade" id="categoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="categoryModalTitle">添加异常类型</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="categoryForm">
                    <input type="hidden" id="categoryId">
                    <div class="mb-3">
                        <label class="form-label">类型名称</label>
                        <input type="text" class="form-control" id="categoryName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">颜色</label>
                        <select class="form-select" id="categoryColor" required>
                            <option value="danger">红色 (danger)</option>
                            <option value="primary">蓝色 (primary)</option>
                            <option value="warning">黄色 (warning)</option>
                            <option value="success">绿色 (success)</option>
                            <option value="info">青色 (info)</option>
                            <option value="secondary">灰色 (secondary)</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">显示顺序</label>
                        <input type="number" class="form-control" id="categoryOrder" value="0" min="0">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="saveCategoryBtn">保存</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// ========== 管理员登录 ==========
$('#configLoginForm').on('submit', function(e) {
    e.preventDefault();
    $.post('/config/login', { password: $('#configPassword').val() }, function(response) {
        if (response.success) {
            location.reload();
        } else {
            $('#loginAlert').text(response.message).removeClass('d-none');
        }
    });
});

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

// ========== 工位管理 ==========
let stationModal;

$('#addStationBtn').on('click', function() {
    $('#stationModalTitle').text('添加工位');
    $('#stationForm')[0].reset();
    $('#stationId').val('');
    stationModal = new bootstrap.Modal(document.getElementById('stationModal'));
    stationModal.show();
});

$('.edit-station').on('click', function() {
    const row = $(this).closest('tr');
    $('#stationModalTitle').text('编辑工位');
    $('#stationId').val(row.data('id'));
    $('#stationCode').val(row.find('td:eq(0)').text());
    $('#stationName').val(row.find('td:eq(1)').text());
    $('#stationActive').prop('checked', row.find('td:eq(2)').text().includes('启用'));
    $('#stationPassword').val('');
    stationModal = new bootstrap.Modal(document.getElementById('stationModal'));
    stationModal.show();
});

$('#saveStationBtn').on('click', function() {
    const data = {
        id: $('#stationId').val() || null,
        station_id: $('#stationCode').val(),
        station_name: $('#stationName').val(),
        password: $('#stationPassword').val(),
        is_active: $('#stationActive').is(':checked')
    };

    $.ajax({
        url: '/api/config/stations',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(response) {
            if (response.success) {
                alert(response.message);
                location.reload();
            } else {
                alert('保存失败：' + response.message);
            }
        }
    });
});

$('.delete-station').on('click', function() {
    if (!confirm('确定要删除这个工位吗？')) return;
    const id = $(this).closest('tr').data('id');

    $.ajax({
        url: '/api/config/stations/' + id,
        method: 'DELETE',
        success: function(response) {
            if (response.success) {
                alert(response.message);
                location.reload();
            } else {
                alert('删除失败：' + response.message);
            }
        }
    });
});

// ========== 异常类型管理 ==========
let categoryModal;

$('#addCategoryBtn').on('click', function() {
    $('#categoryModalTitle').text('添加异常类型');
    $('#categoryForm')[0].reset();
    $('#categoryId').val('');
    categoryModal = new bootstrap.Modal(document.getElementById('categoryModal'));
    categoryModal.show();
});

$('.edit-category').on('click', function() {
    const row = $(this).closest('tr');
    $('#categoryModalTitle').text('编辑异常类型');
    $('#categoryId').val(row.data('id'));
    $('#categoryName').val(row.find('td:eq(0)').text());
    $('#categoryOrder').val(row.find('td:eq(2)').text());
    categoryModal = new bootstrap.Modal(document.getElementById('categoryModal'));
    categoryModal.show();
});

$('#saveCategoryBtn').on('click', function() {
    const data = {
        id: $('#categoryId').val() || null,
        name: $('#categoryName').val(),
        color: $('#categoryColor').val(),
        display_order: parseInt($('#categoryOrder').val()) || 0
    };

    $.ajax({
        url: '/api/config/categories',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(response) {
            if (response.success) {
                alert(response.message);
                location.reload();
            } else {
                alert('保存失败：' + response.message);
            }
        }
    });
});

$('.delete-category').on('click', function() {
    if (!confirm('确定要删除这个异常类型吗？')) return;
    const id = $(this).closest('tr').data('id');

    $.ajax({
        url: '/api/config/categories/' + id,
        method: 'DELETE',
        success: function(response) {
            if (response.success) {
                alert(response.message);
                location.reload();
            } else {
                alert('删除失败：' + response.message);
            }
        }
    });
});
</script>
{% endblock %}