import SwiftUI

// --- HELPER STRUCTS & EXTENSIONS ---

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

// Custom Transition for older Xcode versions
extension AnyTransition {
    static var slideAndFade: AnyTransition {
        let insertion = AnyTransition.move(edge: .top).combined(with: .opacity)
        let removal = AnyTransition.move(edge: .top).combined(with: .opacity)
        return .asymmetric(insertion: insertion, removal: removal)
    }
}

// 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)
        }
    }
}


// --- MAIN VIEW ---

struct SideMenuView: View {
    @ObservedObject var viewModel: LoginViewModel
    @EnvironmentObject var themeManager: ThemeManager
    @Environment(\.colorScheme) var colorScheme
    @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)
    ]
    
    private var themeToggleButton: some View {
        Button(action: {
            themeManager.toggleTheme(from: colorScheme)
        }) {
            Image(systemName: iconName)
                .font(.title2)
                .foregroundColor(.primary)
        }
    }

    private var iconName: String {
        let effectiveScheme: ColorScheme
        switch themeManager.theme {
        case .system:
            effectiveScheme = colorScheme
        case .light:
            effectiveScheme = .light
        case .dark:
            effectiveScheme = .dark
        }
        
        return effectiveScheme == .dark ? "sun.max.fill" : "moon.fill"
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            ScrollView(showsIndicators: false) {
                VStack(alignment: .leading, spacing: 0) { // Parent VStack
                    
                    // --- Header ---
                    HStack(alignment: .top) {
                        Button(action: {  }) {
                            Image(systemName: "person.circle.fill")
                                .resizable()
                                .frame(width: 60, height: 60)
                                .foregroundColor(.gray)
                        }
                        Spacer()
                        themeToggleButton
                    }
                    .padding(.horizontal, 20)
                    .padding(.top, topPadding)
                    .padding(.bottom, 10)
                    
                    // --- Header Button ---
                    Button(action: {
                        withAnimation(.spring()) {
                            isAccountListExpanded.toggle()
                        }
                    }) {
                        HStack {
                            VStack(alignment: .leading) {
                                Text("@\(viewModel.username)")
                                    .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 in a clipped container ---
                    VStack {
                        if isAccountListExpanded {
                            VStack(alignment: .leading, spacing: 15) {
                                ForEach(accounts) { account in
                                    HStack {
                                        Button(action: {  }) {
                                            ZStack {
                                                Image(systemName: "person.circle.fill")
                                                    .resizable()
                                                    .frame(width: 32, height: 32) // Smaller icon
                                                    .foregroundColor(.secondary)
                                                
                                                if account.isCurrent {
                                                    Image(systemName: "checkmark.circle.fill")
                                                        .foregroundColor(.blue)
                                                        .background(Circle().fill(Color(UIColor.systemBackground)))
                                                        .font(.body) // Smaller checkmark
                                                        .offset(x: 11, y: 11) // Adjusted offset
                                                }
                                            }
                                            
                                            VStack(alignment: .leading) {
                                                Text(account.username).font(.footnote).bold() // Smaller text
//                                                Text(account.name).font(.footnote).bold() // Smaller text
//                                                Text(account.username).font(.caption2)      // Smaller text
                                            }
                                            .foregroundColor(.primary)
                                        }
                                                                            
                                        Spacer()
                                    }
                                }
                            }
                            .padding(.horizontal, 20)
                            .padding(.vertical, 10)
                            .transition(.slideAndFade)
                        }
                    }
                    .clipped()
                    
                    // 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
            }
            .clipped()

            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))
    }
}

// --- PREVIEW ---

struct SideMenuView_Previews: PreviewProvider {
    static var previews: some View {
        let mockViewModel = LoginViewModel()
        SideMenuView(viewModel: mockViewModel, isPresented: .constant(true))
            .environmentObject(ThemeManager())
    }
}