import SwiftUI

/// 设置面板：未连接时显示，用于查看本机设备 ID、配置信令服务器与连接目标。
struct SetupPanelView: View {
    @ObservedObject var viewModel: ControllerViewModel

    var body: some View {
        NavigationView {
            Form {
                Section("本机信息") {
                    HStack {
                        Text("本机设备 ID")
                        Spacer()
                        Text(viewModel.myDeviceId)
                            .font(.system(.body, design: .monospaced))
                            .foregroundColor(.secondary)
                            .textSelection(.enabled)
                    }
                }

                Section("连接设置") {
                    TextField("信令服务器地址 (wss://...)", text: $viewModel.serverUrl)
                        .keyboardType(.URL)
                        .autocapitalization(.none)
                        .disableAutocorrection(true)
                    TextField("目标设备 ID", text: $viewModel.targetDeviceId)
                        .autocapitalization(.allCharacters)
                        .disableAutocorrection(true)
                }

                Section {
                    Button {
                        viewModel.requestConnect()
                    } label: {
                        HStack {
                            Spacer()
                            if viewModel.isConnecting {
                                ProgressView()
                                    .padding(.trailing, 8)
                            }
                            Text(viewModel.isConnecting ? "连接中..." : "连接")
                                .font(.system(size: 15, weight: .semibold))
                            Spacer()
                        }
                    }
                    .disabled(viewModel.isConnecting)

                    if viewModel.isConnecting {
                        Button(role: .destructive) {
                            viewModel.disconnect()
                        } label: {
                            HStack {
                                Spacer()
                                Text("取消")
                                Spacer()
                            }
                        }
                    }
                } footer: {
                    Text(viewModel.statusText)
                }
            }
            .navigationTitle("WebRTC 控制端")
        }
        .navigationViewStyle(.stack)
    }
}