import SwiftUI

struct UserInfo: View {
    @Environment(\.dismiss) private var dismiss
    
    // Sample user data - replace with your actual data model
    @State private var userName = ""
    @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?
    @State private var showUsername: Bool = false
    
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                ReturnButton {
                    print("返回")
                }
                Spacer()
                Text("Complete Your Profile")
                    .font(Typography.font(for: .title2, family: .quicksandBold))
                    .foregroundColor(.themeTextMessageMain)
                Spacer()
            }
            .padding()
            HStack(spacing: 20) {
                Text("Choose a photo as your avatar, and we'll generate a video mystery box for you.")
                    .font(Typography.font(for: .caption))
                    .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(10)
            Spacer()
            VStack(spacing: 20) {
                // Title
                Text(showUsername ? "Add Your Avatar" : "What‘s Your Name？")
                    .font(Typography.font(for: .body, family: .quicksandBold))
                    .frame(maxWidth: .infinity, alignment: .center)
                
                // Avatar
                ZStack {
                    AvatarPicker(
                        selectedImage: $avatarImage,
                        showUsername: $showUsername
                    )
                }
                .padding(.top, 20)
                
                if !showUsername {
                    Button(action: {
                        // Action for second button
                    }) {
                        Text("Take a Photo")
                            .font(Typography.font(for: .subtitle, family: .inter))
                            .fontWeight(.regular)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .foregroundColor(.black)
                            .background(
                                RoundedRectangle(cornerRadius: 16)
                                    .fill(Color.themePrimaryLight)
                            )
                    }
                }

                if showUsername {
                    TextField("Username", text: $userName)
                        .font(Typography.font(for: .subtitle, family: .inter))
                        .multilineTextAlignment(.center)
                        .frame(maxWidth: .infinity)
                        .padding()
                        .foregroundColor(.black)  
                        .background(
                            RoundedRectangle(cornerRadius: 16)
                                .fill(Color.themePrimaryLight)
                        )   
                }
            }
            .padding()
            .background(Color(.white))
            .cornerRadius(20)
            Spacer()
            Button(action: {
                showUsername = true
            }) {
                Text("Continue")
                    .font(Typography.font(for: .body))
                    .fontWeight(.bold)
                    .frame(maxWidth: .infinity)
                    .padding(16)  
                    .foregroundColor(.black)
                .background(
                    RoundedRectangle(cornerRadius: 25)
                        .fill(Color.themePrimary)
                )
            }
            .padding()
        }
        .padding()
        .navigationBarTitleDisplayMode(.inline)
        .background(Color(red: 0.98, green: 0.98, blue: 0.98)) // #FAFAFA
    }
}

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