@{
    ViewData["Title"] = "主页";
    var clients = ViewBag.Clients as List<dynamic>;
}

<style>
    .client-table {
        margin-bottom: 0;
    }
    
    .client-table th {
        background-color: #f8f9fa;
        border-top: none;
        font-weight: 600;
        color: #495057;
    }
    
    .client-table td {
        vertical-align: middle;
    }
    
    .project-actions {
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    
    .project-actions .btn {
        margin: 0;
        white-space: nowrap;
    }
    
    .badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    
    /* 页面容器 */
    .card-body {
        max-height: calc(100vh - 280px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .table-responsive {
        border-radius: 0.5rem;
        overflow: hidden;
    }
    
    /* 自定义滚动条样式 */
    .card-body::-webkit-scrollbar {
        width: 6px;
    }
    
    .card-body::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .card-body::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    .card-body::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }
    
    .card-title {
        margin-bottom: 0;
        color: #495057;
    }
    
    .card-title i {
        margin-right: 0.5rem;
    }
    
    /* 响应式调整 */
    @@media (max-width: 768px) {
        .card-body {
            max-height: calc(100vh - 240px);
        }
    }
    
    @@media (max-width: 576px) {
        .card-body {
            max-height: calc(100vh - 220px);
        }
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-server"></i>客户端管理
                    </h3>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped projects client-table">
                            <thead>
                                <tr>
                                    <th style="width: 20%">客户端名称</th>
                                    <th style="width: 25%">地址</th>
                                    <th style="width: 10%">状态</th>
                                    <th style="width: 8%" class="text-center">SSL</th>
                                    <th style="width: 8%" class="text-center">启用</th>
                                    <th style="width: 29%" class="text-center">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if (clients != null)
                                {
                                    foreach (var client in clients)
                                    {
                                        var config = client.Config as LTEMvcApp.Models.ClientConfig;
                                        var state = (LTEMvcApp.Models.ClientState)client.State;

                                        <tr>
                                            <td>@client.Config.Name</td>
                                            <td>@client.Config.Address</td>
                                            <td>
                                                @if (state == LTEMvcApp.Models.ClientState.Connected)
                                                {
                                                    <span class="badge badge-success">已连接</span>
                                                }
                                                else if (state == LTEMvcApp.Models.ClientState.Connecting)
                                                {
                                                    <span class="badge badge-warning">连接中</span>
                                                }
                                                else if (state == LTEMvcApp.Models.ClientState.Error)
                                                {
                                                    <span class="badge badge-danger">错误</span>
                                                }
                                                else
                                                {
                                                    <span class="badge badge-secondary">已停止</span>
                                                }
                                            </td>
                                            <td class="text-center">
                                                @if (config.Ssl)
                                                {
                                                    <i class="fas fa-check-circle text-success"></i>
                                                }
                                                else
                                                {
                                                    <i class="fas fa-times-circle text-muted"></i>
                                                }
                                            </td>
                                            <td class="text-center">
                                                @if (config.Enabled)
                                                {
                                                    <i class="fas fa-check-circle text-success"></i>
                                                }
                                                else
                                                {
                                                    <i class="fas fa-times-circle text-muted"></i>
                                                }
                                            </td>
                                            <td class="project-actions text-right">
                                                <a class="btn btn-primary btn-sm @(state == LTEMvcApp.Models.ClientState.Connected ? "disabled" : "")" href="#" onclick="startTestClient('@config.Address')">
                                                    <i class="fas fa-play"></i>
                                                    启动
                                                </a>
                                                <a class="btn btn-danger btn-sm @(state != LTEMvcApp.Models.ClientState.Connected ? "disabled" : "")" href="#" onclick="stopTestClient('@config.Address')">
                                                    <i class="fas fa-stop"></i>
                                                    停止
                                                </a>
                                                <a class="btn btn-info btn-sm" href="@Url.Action("ClientMessages", "Home", new { clientName = config.Name })">
                                                    <i class="fas fa-list"></i>
                                                    消息
                                                </a>
                                                <a href="@Url.Action("TestClientConfig", "Home")" class="btn btn-sm btn-warning">
                                                    <i class="fas fa-cog"></i>
                                                    配置
                                                </a>
                                            </td>
                                        </tr>
                                    }
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        function startTestClient(address) {
            $.post('/api/testconfig/start', { address: address })
                .done(function() {
                    alert('启动请求已发送！页面将在2秒后刷新。');
                    setTimeout(() => location.reload(), 2000);
                })
                .fail(function(xhr) {
                    alert('启动失败：' + xhr.responseText);
                });
        }

        function stopTestClient(address) {
            $.post('/api/testconfig/stop', { address: address })
                .done(function() {
                    alert('停止请求已发送！页面将在2秒后刷新。');
                    setTimeout(() => location.reload(), 2000);
                })
                .fail(function(xhr) {
                    alert('停止失败：' + xhr.responseText);
                });
        }
    </script>
}