//
//  SettingsDeviceView.swift
//  punchnet
//
//  Created by 安礼成 on 2026/1/19.
//

import SwiftUI

struct SettingsDeviceView: View {
    @Environment(AppContext.self) var appContext: AppContext

    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(alignment: .leading, spacing: 28) {
                
                // MARK: - 设备概览标题
                HStack(spacing: 16) {
                    Image(systemName: "laptopcomputer")
                        .font(.system(size: 36))
                        .foregroundStyle(.blue.gradient)
                        .frame(width: 60, height: 60)
                        .background(Color.blue.opacity(0.1))
                        .cornerRadius(12)
                    
                    VStack(alignment: .leading, spacing: 4) {
                        if let networkContext = self.appContext.networkContext {
                            Text(networkContext.hostname)
                                .font(.title3.bold())
                        } else {
                            Text("未知")
                                .font(.title3.bold())
                        }
                        
                        Text(SystemConfig.systemInfo)
                            .font(.subheadline)
                            .foregroundColor(.secondary)
                    }
                }
                .padding(.horizontal, 4)
                
                // MARK: - 详细参数卡片
                VStack(alignment: .leading, spacing: 0) {
                    // 设备名称行
                    DevicePropertyRow(title: "设备名称", value: self.appContext.networkContext?.hostname ?? "未知") {
                        Button {
                            // 修改逻辑
                        } label: {
                            Text("修改")
                                .font(.subheadline.bold())
                                .padding(.horizontal, 12)
                                .padding(.vertical, 4)
                                .background(Capsule().fill(Color.blue.opacity(0.1)))
                                .foregroundColor(.blue)
                        }
                        .buttonStyle(.plain)
                    }
                    
                    Divider().padding(.leading, 16)
                    
                    // IPv4 行
                    DevicePropertyRow(title: "虚拟 IPv4", value: self.appContext.networkContext?.ip ?? "0.0.0.0") {
                        Image(systemName: "info.circle")
                            .foregroundColor(.secondary)
                    }
                    
                    Divider().padding(.leading, 16)
                    
//                    // IPv6 行
//                    DevicePropertyRow(title: "虚拟 IPv6", value: "fe80::ab:ef:1") {
//                        Text("已加密")
//                            .font(.caption2.bold())
//                            .padding(.horizontal, 6)
//                            .padding(.vertical, 2)
//                            .background(Color.green.opacity(0.1))
//                            .foregroundColor(.green)
//                            .cornerRadius(4)
//                    }
                }
                .background(Color.primary.opacity(0.03))
                .cornerRadius(12)
                .overlay(RoundedRectangle(cornerRadius: 12).stroke(Color.primary.opacity(0.05), lineWidth: 1))
                
                // MARK: - 底部说明
                Text("此设备在虚拟网络中是唯一的，修改名称不会影响连接标识。")
                    .font(.caption)
                    .foregroundColor(.secondary)
                    .padding(.horizontal, 4)
                
                Spacer()
            }
            .padding(32)
            .frame(maxWidth: 600, alignment: .leading)
        }
    }
}

// MARK: - 子组件：设备属性行
struct DevicePropertyRow<Content: View>: View {
    let title: String
    let value: String
    let trailingContent: () -> Content
    
    init(title: String, value: String, @ViewBuilder trailingContent: @escaping () -> Content) {
        self.title = title
        self.value = value
        self.trailingContent = trailingContent
    }
    
    var body: some View {
        HStack {
            Text(title)
                .foregroundColor(.secondary)
                .frame(width: 100, alignment: .leading)
            
            Text(value)
                .fontWeight(.medium)
                .font(.system(.body, design: .monospaced)) // 使用等宽字体显示 IP 更专业
            
            Spacer()
            
            trailingContent()
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 14)
    }
}