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
    
    // 添加一个状态来跟踪键盘是否显示
    @State private var isKeyboardVisible = false
    
    var body: some View {
        ZStack {
            // 背景色
            Color.themeTextWhiteSecondary
                .edgesIgnoringSafeArea(.all)
            
            VStack(spacing: 0) {
                // 固定的顶部导航栏
                HStack {
                    Button(action: {
                        dismiss()
                    }) {
                        Image(systemName: "chevron.left")
                            .font(.system(size: 17, weight: .semibold))
                            .foregroundColor(.themeTextMessageMain)
                    }
                    .padding(.leading, 16)
                    
                    Spacer() 
                    
                    Text("Complete Your Profile")
                        .font(Typography.font(for: .title2, family: .quicksandBold))
                        .foregroundColor(.themeTextMessageMain)
                    
                    Spacer() 
                    
                    // 添加一个透明的占位视图来平衡布局
                    Color.clear
                        .frame(width: 24, height: 24)
                        .padding(.trailing, 16)
                }
                .padding(.vertical, 12)
                .background(Color.themeTextWhiteSecondary)
                .zIndex(1) // 确保导航栏在最上层
                
                // 可滚动的内容区域
                ScrollView {
                    VStack(spacing: 0) {
                        // 单行文本（键盘显示时）
                        if isKeyboardVisible {
                            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)
                                    .lineLimit(1)
                                    .padding(6)
                                    .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)
                            .transition(AnyTransition.opacity.combined(with: .move(edge: .top)))
                            .animation(.easeInOut(duration: 0.4), value: isKeyboardVisible)
                        } 
                        // 两行文本（键盘隐藏时）
                        else {
                            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)
                                    .lineLimit(2)
                                    .padding(6)
                                    .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)
                            .transition(AnyTransition.opacity.combined(with: .move(edge: .top)))
                            .animation(.easeInOut(duration: 0.25), value: isKeyboardVisible)
                        }
                        
                        if !isKeyboardVisible { 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,
                                    isKeyboardVisible: $isKeyboardVisible
                                )
                            }
                            .padding(.top, isKeyboardVisible ? 0 : 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)
                        .padding(.horizontal)
                        
                        if !isKeyboardVisible { 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(.bottom, isKeyboardVisible ? 20 : 40)
                    }
                }
                .background(Color.themeTextWhiteSecondary)
            }
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
            
            // 键盘出现时的半透明覆盖层
            if isKeyboardVisible {
                Color.black.opacity(0.001)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
                    }
            }
        }
        .onAppear {
            NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { _ in
                isKeyboardVisible = true
            }
            
            NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { _ in
                isKeyboardVisible = false
            }
        }
        .onDisappear {
            NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
            NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillHideNotification, object: nil)
        }
    }
}

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