import SwiftUI

struct LoginView: View {
    @State private var name = ""
    @State private var ageSelection = 0
    @State private var countrySelection = "United States"
    @State private var ageIsEligible = false
    @State private var nameIsEligible = false
    
    let ageOptions = Array(0...100)
    let countryOptions = ["Mexico", "United States", "Canada", "Other"]
    let Maroon = Color(red: 0.48, green: 0.08, blue: 0.08)
    
    var body: some View {
        NavigationStack {
            ZStack {
                Image("Cloth")
                    .resizable()
                    .scaledToFill()
                
                VStack {
                    Spacer()
                    
                    Text("\n")
                    
                    Text("Please login")
                        .font(.system(.title2, design: .rounded)).bold()
                        .foregroundColor(.white)
                        .padding()
                    
                    Spacer()
                    
                    Text("Enter your name:")
                        .font(.headline)
                    TextField("Name", text: $name)
                        .padding()
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(width: 250)
                    .onChange(of: name) {
                        nameIsEligible = name != ""
                    }
                    
                    Text("Enter your age:")
                        .font(.headline)
                    Picker("Select your age", selection: $ageSelection) {
                        ForEach(ageOptions, id: \.self) { age in
                            Text("\(age)").tag(age)
                        }
                    }
                    .pickerStyle(MenuPickerStyle())
                    .padding()
                    .onChange(of: ageSelection) {
                        ageIsEligible = ageSelection >= 18
                    }
                    
                    Text("Enter your country of residence:")
                        .font(.headline)
                    Picker("Select your country", selection: $countrySelection) {
                        ForEach(countryOptions, id: \.self) { country in
                            Text(country).tag(country)
                        }
                    }
                    .pickerStyle(MenuPickerStyle())
                    .padding()
                    
                    Spacer()
                    
                    if ageIsEligible && nameIsEligible {
                        NavigationLink(destination: GameMenuView(username: $name)) {
                            Text("Login")
                                .font(.system(.title, design: .rounded)).bold()
                                .foregroundColor(Maroon)
                                .padding()
                                .background(Color.orange)
                                .cornerRadius(25)
                        }
                    } else {
                        Text("Login")
                            .font(.system(.title, design: .rounded)).bold()
                            .foregroundColor(Maroon)
                            .padding()
                            .background(Color.brown)
                            .cornerRadius(25)
                    }
                    
                    Text("\n")
                    
                    Spacer()
                }
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}

#Preview {
    LoginView()
}
