@{
    ViewData["Title"] = "网络配置管理";
    var ip = Context.Request.Query["ip"].ToString();
    var port = Context.Request.Query["port"].ToString();
}

<div class="container mt-4">
    <h2>网络配置管理 <span class="text-info">@ip:@port</span></h2>
    <div class="row mb-3">
        <div class="col-md-4">
            <button class="btn btn-success" onclick="showAddConfigModal()">
                <i class="fas fa-plus"></i> 添加网络配置
            </button>
        </div>
    </div>
    <div id="configTableContainer">
        <!-- 配置表格将由JS动态填充 -->
    </div>
</div>

<!-- 添加配置模态框 -->
<div class="modal fade" id="addConfigModal" tabindex="-1" role="dialog" aria-labelledby="addConfigModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addConfigModalLabel">添加网络配置</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="addConfigForm">
          <div class="form-group">
            <label>Key</label>
            <input type="text" class="form-control" name="configKey" required />
          </div>
          <div class="form-group">
            <label>RagConfig</label>
            <input type="text" class="form-control" name="ragConfig" />
          </div>
          <div class="form-group">
            <label>APN</label>
            <input type="text" class="form-control" name="apn" />
          </div>
          <div class="form-group">
            <label>Band(逗号分隔)</label>
            <input type="text" class="form-control" name="band" />
          </div>
          <div class="form-group">
            <label>Comment</label>
            <input type="text" class="form-control" name="comment" />
          </div>
          <!-- coreOrImsConfigs 可扩展为复杂表单，这里先省略 -->
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="submitAddConfig()">添加</button>
      </div>
    </div>
  </div>
</div>

@section Scripts {
<script>
const ip = '@ip';
const port = '@port';

$(function() {
    loadNetworkConfigs();
});

function loadNetworkConfigs() {
    if (!ip || !port) {
        $('#configTableContainer').html('<div class="alert alert-info">未指定Agent</div>');
        return;
    }
    $.ajax({
        url: '/api/ipgroup/network-config',
        type: 'GET',
        data: { ip, port },
        success: function(res) {
            if (res.isSuccess && res.data) {
                renderConfigTable(res.data);
            } else {
                $('#configTableContainer').html('<div class="alert alert-warning">加载失败</div>');
            }
        },
        error: function() {
            $('#configTableContainer').html('<div class="alert alert-danger">加载失败</div>');
        }
    });
}

function renderConfigTable(data) {
    let html = `<table class="table table-bordered"><thead><tr>
        <th>Key</th><th>APN</th><th>Band</th><th>Comment</th><th>操作</th>
    </tr></thead><tbody>`;
    if (data.length === 0) {
        html += '<tr><td colspan="5" class="text-center">暂无数据</td></tr>';
    } else {
        data.forEach(item => {
            html += `<tr>
                <td>${item.configKey}</td>
                <td>${item.apn || ''}</td>
                <td>${item.band ? item.band.join(',') : ''}</td>
                <td>${item.comment || ''}</td>
                <td><button class="btn btn-danger btn-sm" onclick="deleteConfig('${item.configKey}')"><i class='fas fa-trash'></i> 删除</button></td>
            </tr>`;
        });
    }
    html += '</tbody></table>';
    $('#configTableContainer').html(html);
}

function showAddConfigModal() {
    $('#addConfigForm')[0].reset();
    $('#addConfigModal').modal('show');
}

function submitAddConfig() {
    const form = $('#addConfigForm');
    const data = {
        configKey: form.find('[name="configKey"]').val(),
        ragConfig: form.find('[name="ragConfig"]').val(),
        apn: form.find('[name="apn"]').val(),
        band: form.find('[name="band"]').val().split(',').map(x => x.trim()).filter(x => x),
        comment: form.find('[name="comment"]').val(),
        coreOrImsConfigs: [] // 可扩展
    };
    $.ajax({
        url: `/api/ipgroup/network-config?ip=${ip}&port=${port}`,
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function(res) {
            $('#addConfigModal').modal('hide');
            loadNetworkConfigs();
        },
        error: function() {
            alert('添加失败');
        }
    });
}

function deleteConfig(configKey) {
    if (!confirm('确定要删除该配置吗？')) return;
    $.ajax({
        url: `/api/ipgroup/network-config/${encodeURIComponent(configKey)}?ip=${ip}&port=${port}`,
        type: 'DELETE',
        success: function() {
            loadNetworkConfigs();
        },
        error: function() {
            alert('删除失败');
        }
    });
}
</script>
}