import SwiftUI
import ComposableArchitecture

struct ConfigView: View {
    let store: StoreOf<ConfigFeature>
    
    var body: some View {
        WithPerceptionTracking {
            NavigationView {
                VStack(spacing: 20) {
                    // 标题
                    Text("API 配置测试")
                        .font(.largeTitle)
                        .fontWeight(.bold)
                        .padding(.top)
                    
                    // 状态显示
                    Group {
                        if store.isLoading {
                            VStack {
                                ProgressView()
                                    .scaleEffect(1.5)
                                Text("正在加载配置...")
                                    .font(.headline)
                                    .foregroundColor(.secondary)
                                    .padding(.top, 8)
                            }
                            .frame(height: 100)
                        } else if let errorMessage = store.errorMessage {
                            VStack {
                                Image(systemName: "exclamationmark.triangle.fill")
                                    .font(.system(size: 40))
                                    .foregroundColor(.red)
                                
                                Text("错误")
                                    .font(.headline)
                                    .fontWeight(.semibold)
                                
                                Text(errorMessage)
                                    .font(.body)
                                    .foregroundColor(.secondary)
                                    .multilineTextAlignment(.center)
                                    .padding(.horizontal)
                                
                                Button("清除错误") {
                                    store.send(.clearError)
                                }
                                .buttonStyle(.borderedProminent)
                                .padding(.top)
                            }
                            .frame(maxHeight: .infinity)
                        } else if let configData = store.configData {
                            // 配置数据显示
                            ScrollView {
                                VStack(alignment: .leading, spacing: 16) {
                                    
                                    if let version = configData.version {
                                        InfoRow(title: "版本", value: version)
                                    }
                                    
                                    if let features = configData.features, !features.isEmpty {
                                        VStack(alignment: .leading, spacing: 8) {
                                            Text("功能列表")
                                                .font(.headline)
                                                .fontWeight(.semibold)
                                            
                                            ForEach(features, id: \.self) { feature in
                                                HStack {
                                                    Circle()
                                                        .fill(Color.green)
                                                        .frame(width: 6, height: 6)
                                                    Text(feature)
                                                        .font(.body)
                                                }
                                            }
                                        }
                                        .padding()
                                        .background(Color(.systemGray6))
                                        .cornerRadius(12)
                                    }
                                    
                                    if let settings = configData.settings {
                                        VStack(alignment: .leading, spacing: 8) {
                                            Text("设置")
                                                .font(.headline)
                                                .fontWeight(.semibold)
                                            
                                            if let enableDebug = settings.enableDebug {
                                                InfoRow(title: "调试模式", value: enableDebug ? "启用" : "禁用")
                                            }
                                            
                                            if let apiTimeout = settings.apiTimeout {
                                                InfoRow(title: "API 超时", value: "\(apiTimeout)秒")
                                            }
                                            
                                            if let maxRetries = settings.maxRetries {
                                                InfoRow(title: "最大重试次数", value: "\(maxRetries)")
                                            }
                                        }
                                        .padding()
                                        .background(Color(.systemGray6))
                                        .cornerRadius(12)
                                    }
                                    
                                    if let lastUpdated = store.lastUpdated {
                                        Text("最后更新: \(lastUpdated, style: .time)")
                                            .font(.caption)
                                            .foregroundColor(.secondary)
                                            .frame(maxWidth: .infinity, alignment: .center)
                                    }
                                }
                                .padding()
                            }
                        } else {
                            VStack {
                                Image(systemName: "gear")
                                    .font(.system(size: 40))
                                    .foregroundColor(.secondary)
                                
                                Text("点击下方按钮加载配置")
                                    .font(.headline)
                                    .foregroundColor(.secondary)
                            }
                            .frame(maxHeight: .infinity)
                        }
                    }
                    
                    Spacer()
                    
                    // 操作按钮
                    VStack(spacing: 12) {
                        Button(action: {
                            store.send(.loadConfig)
                        }) {
                            HStack {
                                if store.isLoading {
                                    ProgressView()
                                        .progressViewStyle(CircularProgressViewStyle(tint: .white))
                                        .scaleEffect(0.8)
                                } else {
                                    Image(systemName: "arrow.clockwise")
                                }
                                Text(store.isLoading ? "加载中..." : "加载配置")
                            }
                        }
                        .buttonStyle(.borderedProminent)
                        .disabled(store.isLoading)
                        .frame(maxWidth: .infinity)
                        .frame(height: 50)
                        
                        Text("使用新的 TCA API 组件")
                            .font(.caption)
                            .foregroundColor(.secondary)
                    }
                    
                }
            }
            .navigationBarHidden(true)
        }
    }
}

// MARK: - Helper Views
struct InfoRow: View {
    let title: String
    let value: String
    
    var body: some View {
        HStack {
            Text(title)
                .font(.body)
                .fontWeight(.medium)
            
            Spacer()
            
            Text(value)
                .font(.body)
                .foregroundColor(.secondary)
        }
    }
}

// MARK: - Preview
#Preview {
    ConfigView(
        store: Store(initialState: ConfigFeature.State()) {
            ConfigFeature()
        }
    )
}