import SwiftUI

// Dummy data for the account list
struct Account: Identifiable {
    let id = UUID()
    let name: String
    let username: String
    let isCurrent: Bool
}

struct SideMenuView: View {
    @Binding var isPresented: Bool
    @State private var isAccountListExpanded = false

    // Adjustable paddings
    private let topPadding: CGFloat = 66
    private let bottomPadding: CGFloat = 34
    
    // Dummy account data
    private let accounts: [Account] = [
        Account(name: "Your Name", username: "@yourusername", isCurrent: true),
        Account(name: "Second Account", username: "@second", isCurrent: false),
        Account(name: "Another One", username: "@another", isCurrent: false),
        Account(name: "Test User", username: "@test", isCurrent: false),
        Account(name: "Creative Profile", username: "@creative", isCurrent: false)
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            ScrollView {
                VStack(alignment: .leading, spacing: 0) { // Parent VStack
                    
                    // --- Header
                    Button(action: {  }) {
                        Image(systemName: "person.circle.fill")
                            .resizable()
                            .frame(width: 60, height: 60)
                            .foregroundColor(.gray)
                            .padding(.horizontal, 20)
                            .padding(.top, topPadding)
                            .padding(.bottom, 10)
                    }
                    
                    // --- Header Button ---
                    Button(action: {
                        withAnimation(.spring()) {
                            isAccountListExpanded.toggle()
                        }
                    }) {
                        HStack {
                            VStack(alignment: .leading) {
                                Text("Your Name")
                                    .font(.title3).bold()
                                Text("@yourusername")
                                    .font(.footnote)
                            }
                            .foregroundColor(.primary)
                            
                            Spacer()
                            
                            Image(systemName: isAccountListExpanded ? "chevron.up" : "chevron.down")
                                .font(.headline)
                                .foregroundColor(.secondary)
                        }
                    }
                    .padding(.horizontal, 20)
                    .padding(.bottom, 10)

                    // --- Collapsible Account List ---
                    if isAccountListExpanded {
                        VStack(alignment: .leading, spacing: 15) {
                            ForEach(accounts) { account in
                                HStack {
                                    Button(action: {  }) {
                                        ZStack {
                                            Image(systemName: "person.circle.fill")
                                                .resizable()
                                                .frame(width: 40, height: 40)
                                                .foregroundColor(.secondary)
                                            
                                            if account.isCurrent {
                                                Image(systemName: "checkmark.circle.fill")
                                                    .foregroundColor(.blue)
                                                    .background(Circle().fill(Color(UIColor.systemBackground)))
                                                    .font(.title3)
                                                    .offset(x: 14, y: 14)
                                            }
                                        }
                                        
                                        VStack(alignment: .leading) {
                                            Text(account.name).font(.subheadline).bold()
                                            Text(account.username).font(.caption)
                                        }
                                        .foregroundColor(.primary)                                    }
                                                                        
                                    Spacer()
                                }
                            }
                        }
                        .padding(.horizontal, 20)
                        .padding(.vertical, 10)
                    }
                    
                    // Menu Items
                    VStack(alignment: .leading, spacing: 20) {
                        // Section 1
                        VStack(alignment: .leading, spacing: 7) {
                            SideMenuButton(icon: "person.2.fill", title: "People You May Like", action: {})
                            SideMenuButton(icon: "star.fill", title: "Fun Fest", action: {})
                            SideMenuButton(icon: "lightbulb.fill", title: "Creator Center", action: {})
                        }

                        Divider()

                        // Section 2
                        VStack(alignment: .leading, spacing: 7) {
                            Text("CATEGORY").font(.caption2).foregroundColor(.secondary)
                            SideMenuButton(icon: "doc.text", title: "Drafts", action: {})
                            SideMenuButton(icon: "bubble.left", title: "My Comments", action: {})
                            SideMenuButton(icon: "clock", title: "History", action: {})
                            SideMenuButton(icon: "arrow.down.circle", title: "My Downloads", action: {})
                        }

                        Divider()

                        // Section 3
                        VStack(alignment: .leading, spacing: 7) {
                            Text("SERVICES").font(.caption2).foregroundColor(.secondary)
                            SideMenuButton(icon: "shippingbox", title: "Orders", action: {})
                            SideMenuButton(icon: "cart", title: "Cart", action: {})
                            SideMenuButton(icon: "wallet.pass", title: "Wallet", action: {})
                        }
                        
                        Divider()
                        
                        // Section 4
                        VStack(alignment: .leading, spacing: 15) {
                            SideMenuButton(icon: "square.grid.2x2", title: "Applets", action: {})
                        }
                    }
                    .padding()
                }
                .frame(maxWidth: .infinity, alignment: .leading) // Align to the left
            }

            Spacer()

            // Footer
            HStack(spacing: 20) {
                Spacer()
                SideMenuFooterButton(icon: "qrcode.viewfinder", title: "Scan", action: {})
                SideMenuFooterButton(icon: "questionmark.circle", title: "Help Center", action: {})
                SideMenuFooterButton(icon: "gear", title: "Settings", action: {})
                Spacer()
            }
            .padding()
            .padding(.bottom, bottomPadding)
        }
        .background(Color(UIColor.systemBackground))
    }
}

// Helper Views for buttons
struct SideMenuButton: View {
    let icon: String
    let title: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            HStack(spacing: 15) {
                Image(systemName: icon)
                    .font(.title3)
                    .frame(width: 30)
                Text(title)
                    .font(.subheadline)
            }
            .foregroundColor(.primary)
            .padding(.vertical, 8)
        }
    }
}

struct SideMenuFooterButton: View {
    let icon: String
    let title: String
    let action: () -> Void

    var body: some View {
        Button(action: action) {
            VStack {
                Image(systemName: icon)
                    .font(.title2)
                Text(title)
                    .font(.caption2)
            }
            .foregroundColor(.primary)
        }
    }
}