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
    @State private var name: String = ""
    
    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 section
                VStack {
                    Text("your name")
                        .font(.headline)
                        .padding(.bottom, 10)
                    
                    // Avatar image or placeholder
                    Circle()
                        .fill(Color.gray.opacity(0.3))
                        .frame(width: 100, height: 100)
                        .overlay(
                            Image(systemName: "person.fill")
                                .resizable()
                                .scaledToFit()
                                .foregroundColor(.white)
                                .padding(30)
                        )
                }
                .padding(.top, 30)
                
                // Name input field
                TextField("Enter your name", text: $name)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                    .padding(.horizontal, 40)
                    .padding(.top, 20)
                
                Spacer()
                
                // Next/Open button
                Button(action: {
                    // Action for open button
                }) {
                    Text("Open")
                        .frame(maxWidth: .infinity)
                        .padding()
                        .foregroundColor(.black)
                        .background(
                            RoundedRectangle(cornerRadius: 25)
                                .fill(Color(red: 1.0, green: 0.714, blue: 0.271))
                        )
                }
                .padding(.bottom, 30)
                .padding(.horizontal, 20)
            }
            .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()
    }
}