import SwiftUI

/// 设置页面视图
struct SettingsView: View {
    // MARK: - 属性
    
    /// 环境变量 - 用于dismiss视图
    @Environment(\.dismiss) private var dismiss
    
    /// 状态 - 控制视图显示/隐藏
    @Binding var isPresented: Bool
    
    // MARK: - 动画配置
    
    /// 动画配置
    private let animation = Animation.spring(
        response: 0.6,        // 响应时间
        dampingFraction: 0.9,  // 阻尼系数
        blendDuration: 0.8     // 混合时间
    )
    
    // MARK: - 主体视图
    
    var body: some View {
        VStack(spacing: 0) {
            // 自定义导航栏
            HStack {
                // 返回按钮
                Button(action: {
                    withAnimation(animation) {
                        isPresented = false
                    }
                }) {
                    HStack(spacing: 4) {
                        Image(systemName: "chevron.left")
                            .font(.system(size: 16, weight: .medium))
                            .foregroundColor(.blue)
                    }
                }
                
                Spacer()
                
                // 标题
                Text("Setting")
                    .font(.headline)
                
                Spacer()
                
                // 用于平衡布局的透明视图
                Color.clear
                    .frame(width: 44, height: 44)
            }
            .padding(.horizontal,16)
            .padding(.vertical, 8)
            
            // 设置项列表
            List {
                
                // 账号与安全
                settingRow(
                    icon: "person.crop.circle",
                    title: "Account & Security",
                    action: {}
                )
                
                // 权限管理
                settingRow(
                    icon: "lock.shield",
                    title: "Permission Management",
                    action: {}
                )
                
                // 支持与服务
                settingRow(
                    icon: "questionmark.circle",
                    title: "Support & Service",
                    action: {}
                )
                
                // 关于我们
                settingRow(
                    icon: "info.circle",
                    title: "About Us",
                    action: {}
                )
            }
            // 设置列表样式为普通样式（无分组效果）
            .listStyle(PlainListStyle())
            // 隐藏所有行的分割线
            .listRowSeparator(.hidden)
            // 移除列表行的内边距
            .listRowInsets(EdgeInsets())
            .background(Color(.systemGroupedBackground))
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
        // 设置水平尺寸类别为常规宽度（regular），用于支持分屏和不同设备尺寸的布局
        .environment(\.horizontalSizeClass, .regular)
    }
    
    // MARK: - 私有方法
    
    /// 配置TableView外观
    private func configureTableView() {
        // 移除列表底部分隔线
        UITableView.appearance().tableFooterView = UIView()
        // 移除列表顶部分隔线
        UITableView.appearance().tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: CGFloat.leastNonzeroMagnitude))
        // 移除分隔线缩进
        UITableView.appearance().separatorInset = .zero
        // 移除列表顶部额外间距
        UITableView.appearance().contentInset = .zero
    }
    
    /// 创建设置项行视图
    /// - Parameters:
    ///   - icon: 图标名称
    ///   - title: 标题
    ///   - action: 点击动作
    /// - Returns: 返回设置项行视图
    private func settingRow(icon: String, title: String, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            HStack {
                // 左侧图标
                Image(systemName: icon)
                    .font(.system(size: 24))
                    .foregroundColor(.gray)
                    .frame(width: 40)
                
                // 标题
                Text(title)
                    .foregroundColor(.primary)
                
                Spacer()
                
                // 右侧箭头
                Image(systemName: "chevron.right")
                    .font(.system(size: 14))
                    .foregroundColor(.gray)
            }
            .padding(.vertical, 6)  // 减少垂直内边距
            .padding(.horizontal, 12)
            .background(Color(.systemGroupedBackground))
        }
        .buttonStyle(PlainButtonStyle())
        .listRowBackground(Color(.systemGroupedBackground))
        .listRowSeparator(.hidden)
    }
}

// MARK: - 预览
#Preview {
    NavigationView {
        SettingsView(isPresented: .constant(true))
    }
}