{% extends "layout.html" %}

{% block title %}
    Fleet Manager 主页
{% endblock %}

{% block main %}
    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/css/uikit.min.css" />
    <!-- UIkit JS -->
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/uikit@3.9.2/dist/js/uikit-icons.min.js"></script>

    <div class="uk-container uk-container-small">
        <h1 class="uk-heading-medium uk-text-center uk-margin-medium-top">Fleet Manager</h1>

        <!-- 导航部分 -->
        <div class="uk-card uk-card-default uk-card-body uk-margin-medium">
            <h3 class="uk-card-title">导航服务</h3>
            <div class="uk-grid-small uk-child-width-1-2@s uk-text-center" uk-grid>
                <div>
                    <a href="/addr_input" class="uk-button uk-button-primary uk-width-1-1">
                        <span uk-icon="location"></span> 地址输入导航
                    </a>
                </div>
                <div>
                    <a href="/amap_addr_input" class="uk-button uk-button-primary uk-width-1-1">
                        <span uk-icon="location"></span> 高德地图导航
                    </a>
                </div>
                <div>
                    <a href="/tmap_addr_input" class="uk-button uk-button-primary uk-width-1-1">
                        <span uk-icon="location"></span> 腾讯地图导航
                    </a>
                </div>
                <div>
                    <a href="/tools" class="uk-button uk-button-secondary uk-width-1-1">
                        <span uk-icon="settings"></span> 系统设置
                    </a>
                </div>
            </div>
        </div>

        <!-- 视频和日志部分 -->
        <div class="uk-card uk-card-default uk-card-body uk-margin-medium">
            <h3 class="uk-card-title">视频和日志</h3>
            <div class="uk-grid-small uk-child-width-1-2@s uk-text-center" uk-grid>
                <div>
                    <div class="uk-card uk-card-default uk-card-body uk-box-shadow-small">
                        <h4>视频记录</h4>
                        <a href="/footage" class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">
                            <span uk-icon="video-camera"></span> 查看行车记录
                        </a>
                        <a href="/preserved" class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">
                            <span uk-icon="album"></span> 已保存视频
                        </a>
                        <a href="/screenrecords" class="uk-button uk-button-default uk-width-1-1">
                            <span uk-icon="desktop"></span> 屏幕录制
                        </a>
                    </div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body uk-box-shadow-small">
                        <h4>系统日志</h4>
                        <a href="/error_logs" class="uk-button uk-button-default uk-width-1-1 uk-margin-small-bottom">
                            <span uk-icon="warning"></span> 错误日志
                        </a>
                        <a href="/about" class="uk-button uk-button-default uk-width-1-1">
                            <span uk-icon="info"></span> 关于系统
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 系统状态部分 -->
        <div class="uk-card uk-card-default uk-card-body uk-margin-medium">
            <h3 class="uk-card-title">系统状态</h3>
            <div id="system-status" class="uk-grid-small uk-child-width-1-3@s uk-text-center" uk-grid>
                <div>
                    <div class="uk-card uk-card-default uk-card-body uk-box-shadow-small">
                        <h4>导航状态</h4>
                        <div id="nav-status">
                            <span class="uk-label uk-label-warning">待机</span>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body uk-box-shadow-small">
                        <h4>GPS信号</h4>
                        <div id="gps-status">
                            <span class="uk-label uk-label-warning">检测中</span>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="uk-card uk-card-default uk-card-body uk-box-shadow-small">
                        <h4>网络状态</h4>
                        <div id="network-status">
                            <span class="uk-label uk-label-warning">检测中</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 定期更新系统状态
        function updateSystemStatus() {
            fetch('/get_system_status')
                .then(response => response.json())
                .then(data => {
                    // 更新导航状态
                    document.getElementById('nav-status').innerHTML =
                        `<span class="uk-label ${data.nav_status.active ? 'uk-label-success' : 'uk-label-warning'}">
                            ${data.nav_status.state}
                        </span>`;

                    // 更新GPS状态
                    document.getElementById('gps-status').innerHTML =
                        `<span class="uk-label ${data.gps_status.active ? 'uk-label-success' : 'uk-label-warning'}">
                            ${data.gps_status.signal}
                        </span>`;

                    // 更新网络状态
                    document.getElementById('network-status').innerHTML =
                        `<span class="uk-label ${data.network_status.connected ? 'uk-label-success' : 'uk-label-warning'}">
                            ${data.network_status.type}
                        </span>`;
                })
                .catch(error => {
                    console.error('Error:', error);
                    // 发生错误时显示错误状态
                    ['nav-status', 'gps-status', 'network-status'].forEach(id => {
                        document.getElementById(id).innerHTML =
                            `<span class="uk-label uk-label-danger">错误</span>`;
                    });
                });
        }

        // 每5秒更新一次状态
        setInterval(updateSystemStatus, 5000);
        updateSystemStatus(); // 初始更新
    </script>
{% endblock %}