@{
    ViewData["Title"] = "LTE WebSocket 客户端管理";
}

<div class="text-center">
    <h1 class="display-4">LTE WebSocket 客户端管理</h1>
    <p>基于 .NET 8 的 LTE WebSocket 客户端实现</p>
</div>

<!-- 消息提示 -->
@if (TempData["Message"] != null)
{
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        @TempData["Message"]
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
}

@if (TempData["Error"] != null)
{
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        @TempData["Error"]
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
}

<!-- 连接统计信息 -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">连接统计信息</h5>
            </div>
            <div class="card-body">
                @if (ViewBag.ConnectionStats != null)
                {
                    var stats = ViewBag.ConnectionStats as LTEMvcApp.Services.ConnectionStatistics;
                    <div class="row">
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="text-primary">@(stats?.TotalClients ?? 0)</h4>
                                <p class="text-muted">总客户端数</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="text-success">@(stats?.ConnectedClients ?? 0)</h4>
                                <p class="text-muted">已连接</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="text-warning">@(stats?.DisconnectedClients ?? 0)</h4>
                                <p class="text-muted">未连接</p>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="text-center">
                                <h4 class="text-info">@(stats?.TotalLogs ?? 0)</h4>
                                <p class="text-muted">总日志数</p>
                            </div>
                        </div>
                    </div>
                }
                else
                {
                    <p class="text-muted">暂无统计信息</p>
                }
            </div>
        </div>
    </div>
</div>

<!-- 客户端管理 -->
<div class="row mb-4">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">客户端管理</h5>
            </div>
            <div class="card-body">
                <!-- 快速操作按钮 -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        <form method="post" style="display: inline;">
                            <button type="submit" asp-action="AddTestClient" class="btn btn-primary me-2">
                                <i class="bi bi-plus-circle"></i> 添加测试客户端
                            </button>
                        </form>
                        <form method="post" style="display: inline;">
                            <button type="submit" asp-action="StartTestClient" class="btn btn-success me-2">
                                <i class="bi bi-play-circle"></i> 启动测试客户端
                            </button>
                        </form>
                        <form method="post" style="display: inline;">
                            <button type="submit" asp-action="StopTestClient" class="btn btn-danger me-2">
                                <i class="bi bi-stop-circle"></i> 停止测试客户端
                            </button>
                        </form>
                        <a href="@Url.Action("WebSocketTest")" class="btn btn-info">
                            <i class="bi bi-gear"></i> WebSocket 测试
                        </a>
                    </div>
                </div>

                <!-- 客户端配置列表 -->
                @if (ViewBag.ClientConfigs != null && ((List<LTEMvcApp.Models.ClientConfig>)ViewBag.ClientConfigs).Count > 0)
                {
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>客户端名称</th>
                                    <th>地址</th>
                                    <th>状态</th>
                                    <th>SSL</th>
                                    <th>启用</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var config in ViewBag.ClientConfigs as List<LTEMvcApp.Models.ClientConfig>)
                                {
                                    var stats = ViewBag.ConnectionStats as LTEMvcApp.Services.ConnectionStatistics;
                                    var clientStates = stats?.ClientStates ?? new Dictionary<string, LTEMvcApp.Models.ClientState>();
                                    var state = clientStates.GetValueOrDefault(config.Name, LTEMvcApp.Models.ClientState.Stop);
                                    <tr>
                                        <td>@config.Name</td>
                                        <td>@(config.Ssl ? "wss://" : "ws://")@config.Address</td>
                                        <td>
                                            <span class="badge @(state == LTEMvcApp.Models.ClientState.Connected ? "bg-success" : 
                                                              state == LTEMvcApp.Models.ClientState.Connecting ? "bg-warning" : 
                                                              state == LTEMvcApp.Models.ClientState.Error ? "bg-danger" : "bg-secondary")">
                                                @state
                                            </span>
                                        </td>
                                        <td>
                                            <i class="bi @(config.Ssl ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-muted")"></i>
                                        </td>
                                        <td>
                                            <i class="bi @(config.Enabled ? "bi-check-circle-fill text-success" : "bi-x-circle-fill text-muted")"></i>
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm" role="group">
                                                <button type="button" class="btn btn-outline-primary" onclick="startClient('@config.Name')">
                                                    <i class="bi bi-play"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-danger" onclick="stopClient('@config.Name')">
                                                    <i class="bi bi-stop"></i>
                                                </button>
                                                <button type="button" class="btn btn-outline-info" onclick="viewLogs('@config.Name')">
                                                    <i class="bi bi-list-ul"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                }
                else
                {
                    <div class="text-center text-muted">
                        <i class="bi bi-info-circle" style="font-size: 2rem;"></i>
                        <p class="mt-2">暂无客户端配置</p>
                        <p>点击"添加测试客户端"按钮来创建第一个客户端配置</p>
                    </div>
                }
            </div>
        </div>
    </div>
</div>

<!-- API 信息 -->
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">API 接口</h5>
            </div>
            <div class="card-body">
                <p>以下API接口可用于程序化控制WebSocket客户端：</p>
                <ul class="list-unstyled">
                    <li><code>GET /api/websocket/clients</code> - 获取所有客户端状态</li>
                    <li><code>GET /api/websocket/configs</code> - 获取所有客户端配置</li>
                    <li><code>POST /api/websocket/configs</code> - 添加客户端配置</li>
                    <li><code>POST /api/websocket/clients/{name}/start</code> - 启动客户端</li>
                    <li><code>POST /api/websocket/clients/{name}/stop</code> - 停止客户端</li>
                    <li><code>GET /api/websocket/clients/{name}/logs</code> - 获取客户端日志</li>
                    <li><code>GET /api/websocket/statistics</code> - 获取连接统计信息</li>
                </ul>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        function startClient(clientName) {
            fetch(`/api/websocket/clients/${encodeURIComponent(clientName)}/start`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message || '操作成功');
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败');
            });
        }

        function stopClient(clientName) {
            fetch(`/api/websocket/clients/${encodeURIComponent(clientName)}/stop`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message || '操作成功');
                location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败');
            });
        }

        function viewLogs(clientName) {
            window.open(`/api/websocket/clients/${encodeURIComponent(clientName)}/logs?limit=100`, '_blank');
        }
    </script>
}