import SwiftUI

struct UserInfo: View {
    @Environment(\.dismiss) private var dismiss
    
    // Sample user data - replace with your actual data model
    @State private var userName = "MeMo"
    @State private var userEmail = "memo@example.com"
    @State private var notificationsEnabled = true
    @State private var darkModeEnabled = false
    @State private var showLogoutAlert = false
    @State private var avatarImage: UIImage?  // Add this line
    
    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 20) {
                Text("Choose a photo as your avatar, and we'll generate a video mystery box for you.")
                    .font(Typography.font(for: .small))
                    .foregroundColor(.black)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.vertical, 10)
                    .background(
                        LinearGradient(
                            gradient: Gradient(colors: [
                                Color(red: 1.0, green: 0.97, blue: 0.87),
                                .white,
                                Color(red: 1.0, green: 0.97, blue: 0.84)
                            ]),
                            startPoint: .topLeading,
                            endPoint: .bottomTrailing
                        )
                    )
            }
            .padding(.vertical, 10)
            Spacer()
            VStack(spacing: 20) {
                // Title
                Text("Add Your Avatar")
                    .font(Typography.font(for: .title))
                    .frame(maxWidth: .infinity, alignment: .center)
                
                // Avatar
                ZStack {
                    // Show either the SVG or the uploaded image
                    if let avatarImage = avatarImage {
                        Image(uiImage: avatarImage)
                            .resizable()
                            .scaledToFill()
                            .frame(width: 200, height: 200)
                            .clipShape(Circle())
                    } else {
                        SVGImage(svgName: "Avatar")
                            .frame(width: 200, height: 200)
                    }
                    
                    // Make sure the AvatarUploader is on top and covers the entire area
                    AvatarUploader(selectedImage: $avatarImage, size: 200)
                        .contentShape(Rectangle()) // This makes the entire area tappable
                }
                .frame(width: 200, height: 200)
                .padding(.vertical, 20)
                
                // Buttons
                Button(action: {
                    // Action for first button
                }) {
                    Text("Upload from Gallery")
                        .frame(maxWidth: .infinity)
                        .padding()
                        .foregroundColor(.black)  
                        .background(
                            RoundedRectangle(cornerRadius: 25)
                                .fill(Color(red: 1.0, green: 0.973, blue: 0.871))
                        )   
                }
                
                Button(action: {
                    // Action for second button
                }) {
                    Text("Take a Photo")
                        .frame(maxWidth: .infinity)
                        .padding()
                        .foregroundColor(.black)
                        .background(
                            RoundedRectangle(cornerRadius: 25)
                                .fill(Color(red: 1.0, green: 0.973, blue: 0.871))
                        )
                }
            }
            .padding()
            .background(Color(.white))
            .cornerRadius(20)
            Spacer()
            Button(action: {
                // Action for next button
            }) {
                Text("Next")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .foregroundColor(.black)
                .background(
                    RoundedRectangle(cornerRadius: 25)
                        .fill(Color(red: 1.0, green: 0.714, blue: 0.271))
                )
            }
        }
        .padding()
        .navigationTitle("Complete Your Profile")
        .navigationBarTitleDisplayMode(.inline)
        .background(Color(red: 0.98, green: 0.98, blue: 0.98)) // #FAFAFA
        .toolbar {
            ToolbarItem(placement: .navigationBarLeading) {
                Button(action: {
                    dismiss()
                }) {
                    Image(systemName: "chevron.left")
                        .foregroundColor(.blue)
                }
            }
        }
    }
}

// MARK: - Settings Row View
struct SettingsRow: View {
    let icon: String
    let title: String
    let color: Color
    
    var body: some View {
        HStack {
            Image(systemName: icon)
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 20, height: 20)
                .padding(6)
                .background(color.opacity(0.1))
                .foregroundColor(color)
                .cornerRadius(6)
            
            Text(title)
                .padding(.leading, 5)
        }
        .padding(.vertical, 4)
    }
}

// MARK: - Preview
struct UserInfo_Previews: PreviewProvider {
    static var previews: some View {
        UserInfo()
    }
}