import SwiftUI

struct SettingsView: View {
    @Environment(\.dismiss) private var dismiss
    @State private var isAppeared = false
    @Binding var isPresented: Bool
    
    // Animation configuration
    private let animation = Animation.spring(
        response: 0.8,
        dampingFraction: 0.6,
        blendDuration: 0.8
    )
    
    var body: some View {
        VStack(spacing: 0) {
            // Custom navigation bar
            HStack {
                Button(action: {
                    withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                        isPresented = false
                    }
                }) {
                    HStack(spacing: 4) {
                        Image(systemName: "chevron.left")
                            .font(.system(size: 17, weight: .semibold))
                        Text("Back")
                    }
                    .foregroundColor(.blue)
                    .padding()
                }
                Spacer()
                Text("Settings")
                    .font(.headline)
                    .padding()
                Spacer()
                // Invisible view to balance the layout
                Color.clear
                    .frame(width: 44, height: 44)
            }
            .background(Color(.systemBackground))
            
            // Settings content
            List(0..<1) { _ in
            // This empty section ensures proper spacing
            Section {
                EmptyView()
            } header: {
                EmptyView()
            }
            // Add an invisible section header to remove extra top padding
            Section(header: EmptyView()) {
                EmptyView()
            }
            // Account & Security
            HStack {
                Color.clear
                    .frame(width: 12, height: 24)
                    .background(Color(.systemBackground))
                Image(systemName: "person.crop.circle")
                    .font(.system(size: 24))
                    .foregroundColor(.gray)
                Text("Account & Security")
                Spacer()
                Image(systemName: "chevron.right")
                    .foregroundColor(.gray)
                Color.clear
                    .frame(width: 12, height: 24)
                    .background(Color(.systemBackground))
            }
            .listRowBackground(Color(.systemBackground))

            // Permission Management
            HStack {
                Color.clear
                    .frame(width: 12, height: 24)
                    .background(Color(.systemBackground))
                Image(systemName: "lock.shield")
                    .font(.system(size: 24))
                    .foregroundColor(.gray)
                Text("Permission Management")
                Spacer()
                Image(systemName: "chevron.right")
                    .foregroundColor(.gray)
                Color.clear
                    .frame(width: 12, height: 24)
                    .background(Color(.systemBackground))
            }
            .listRowBackground(Color(.systemBackground))

            // Support & Service
            HStack {
                Color.clear
                    .frame(width: 12, height: 24)
                    .background(Color(.systemBackground))
                Image(systemName: "questionmark.circle")
                    .font(.system(size: 24))
                    .foregroundColor(.gray)
                Text("Support & Service")
                Spacer()
                Image(systemName: "chevron.right")
                    .foregroundColor(.gray)
                Color.clear
                    .frame(width: 12, height: 24)
                    .background(Color(.systemBackground))
            }
            .listRowBackground(Color(.systemBackground))

            // About Us
            HStack {
                Color.clear
                    .frame(width: 12, height: 24)
                    .background(Color(.systemBackground))
                Image(systemName: "info.circle")
                    .font(.system(size: 24))
                    .foregroundColor(.gray)
                Text("About Us")
                Spacer()
                Image(systemName: "chevron.right")
                    .foregroundColor(.gray)
                Color.clear
                    .frame(width: 12, height: 24)
                    .background(Color(.systemBackground))
            }
            .listRowBackground(Color(.systemBackground))
        }
        .listStyle(GroupedListStyle())
        .navigationTitle("Setting")
        .navigationBarTitleDisplayMode(.inline)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGray6))
        .environment(\.horizontalSizeClass, .regular)
        .environment(\.defaultMinListRowHeight, 50)
        .listRowInsets(EdgeInsets())
        .onAppear {
            // Remove extra separators below the list
            UITableView.appearance().tableFooterView = UIView()
            // Remove separator inset
            UITableView.appearance().separatorInset = .zero
            // Remove extra space at the top of the table view
            UITableView.appearance().contentInset = .zero
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button(action: {
                    withAnimation(.spring(response: 0.5, dampingFraction: 0.8)) {
                        isAppeared = false
                    }
                    // Delay the dismiss to allow the animation to complete
                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
                        isPresented = false
                    }
                }) {
                    HStack(spacing: 4) {
                        Image(systemName: "chevron.left")
                            .font(.system(size: 16, weight: .medium))
                            .foregroundColor(.blue)
                        Text("Back")
                            .font(.system(size: 17, weight: .regular))
                            .foregroundColor(.blue)
                    }
                }
            }
        }
        .animation(animation, value: isAppeared)
    }
    
}
}

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

// MARK: - Subviews
struct AccountSecurityView: View {
    var body: some View {
        Text("Account & Security")
    }
}

struct PermissionManagementView: View {
    var body: some View {
        Text("Permission Management")
    }
}

struct SupportServiceView: View {
    var body: some View {
        Text("Support & Service")
    }
}

struct AboutUsView: View {
    var body: some View {
        Text("About Us")
    }
}