//
//  NetworkConnctedView.swift
//  punchnet
//
//  Created by 安礼成 on 2026/1/16.
//
import SwiftUI

struct NetworkConnctedView: View {
    @Bindable var state: NetworkState
    
    var body: some View {
        Group {
            switch state.showModel {
            case .resource:
                NetworkResourceGroupView(state: self.state)
            case .device:
                NetworkDeviceGroupView(state: self.state)
            }
        }
    }
}

// 显示资源信息
struct NetworkResourceGroupView: View {
    @Bindable var state: NetworkState
    
    var body: some View {
        LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 3), spacing: 8) {
            ForEach(self.state.resources, id: \.id) { resource in
                NetworkResourceView(resource: resource)
            }
        }
    }
}

struct NetworkResourceView: View {
    var resource: NetworkState.Resource
    
    var body: some View {
        VStack {
            HStack {
                Text(resource.status == 1 ? "yes" : "no")
                
                Text(resource.name)
                    .font(.system(size: 14, weight: .regular))
            }
            
            Text(resource.schema)
                .font(.system(size: 14, weight: .regular))
                .padding(.leading, 30)

        }
    }
}

// 显示设备信息
struct NetworkDeviceGroupView: View {
    @Bindable var state: NetworkState
    @State private var selectedId: Int?
    
    var body: some View {
        NavigationSplitView {
            List(self.state.devices, id: \.id, selection: $selectedId) { device in
                NetworkDeviceHeadView(device: device)
            }
            .listStyle(.sidebar)
            .onChange(of: selectedId) {
                self.state.changeSelectedDevice(deviceId: selectedId)
            }
            .onAppear {
                if selectedId == nil {
                    selectedId = self.state.devices.first?.id
                }
            }
        } detail: {
            NetworkDeviceDetailView(device: $state.selectedDevice)
        }
    }
    
}

struct NetworkDeviceHeadView: View {
    var device: NetworkState.Device
    
    var body: some View {
        VStack {
            HStack {
                Text(device.status == 1 ? "yes" : "no")
                
                Text(device.name)
                    .font(.system(size: 14, weight: .regular))
            }
            
            Text(device.ipv4)
                .font(.system(size: 14, weight: .regular))
                .padding(.leading, 30)
        }
    }
}

struct NetworkDeviceDetailView: View {
    @Binding var device: NetworkState.Device?

    var body: some View {
        Group {
            if let device {
                List {
                    Section {
                        HStack {
                            Text("连接状态")
                            
                            Text("\(device.status)")
                            
                            Spacer()
                        }
                        
                        HStack {
                            Text("虚拟IPv4")
                            
                            Text("\(device.ipv4)")
                            Spacer()
                        }
                        
                        HStack {
                            Text("虚拟IPv6")
                            
                            Text("\(device.ipv6)")
                            Spacer()
                        }
                        
                        HStack {
                            Text("操作系统")
                            
                            Text("\(device.system)")
                            Spacer()
                        }
                    }
                    
                    Section("服务列表") {
                        ForEach(device.resources, id: \.id) { resource in
                            HStack {
                                Text("\(resource.name)")
                                Text("\(resource.schema)")
                            }
                        }
                    }
                }
            } else {
                EmptyView()
            }
        }
    }
}