// import React, { useState } from "react";
// import {
//   View,
//   Text,
//   TextInput,
//   TouchableOpacity,
//   StyleSheet,
//   ScrollView,
//   StatusBar,
//   Image,
// } from "react-native";
// import { Ionicons, FontAwesome } from "@expo/vector-icons";
// import { useNavigation } from "@react-navigation/native";

// const Masuk = () => {
//   const navigation = useNavigation();
//   const [role, setRole] = useState(null); // null, "warga", atau "admin"
//   const [email, setEmail] = useState("");
//   const [password, setPassword] = useState("");
//   const [showPassword, setShowPassword] = useState(false);

//   // Fungsi handle login sesuai role
//   const handleLogin = () => {
//     if (role === "warga") {
//       navigation.navigate("AksesWargaNavigator", { screen: "Home" });
//     } else if (role === "admin") {
//       navigation.navigate("AdminHome");
//     }
//   };

//   return (
//     <ScrollView style={{ flex: 1, backgroundColor: "#fff" }}>
//       <StatusBar backgroundColor={"#fff"} barStyle={"dark-content"} />

//       <View style={{ flex: 1, backgroundColor: "#fff", padding: 20 }}>
//         <TouchableOpacity
//           onPress={() => navigation.navigate("AksesAkun")}
//           style={{ width: 45, height: 45, marginBottom: 10 }}
//         >
//           <Ionicons name="arrow-back" size={30} color="#000" />
//         </TouchableOpacity>

//         <View style={{ alignItems: "center", marginBottom: 20 }}>
//           <Image
//             source={require("../assets/images/sampah.png")}
//             style={{ width: 250, height: 300 }}
//           />
//           <Text
//             style={{
//               color: "#000",
//               fontWeight: "bold",
//               fontSize: 40,
//               textAlign: "center",
//             }}
//           >
//             Selamat Datang Ecomapper!
//           </Text>
//         </View>

//         {/* Form login muncul kalau role sudah dipilih */}
//         {role && (
//           <View style={styles.formContainer}>
//             <Text style={[styles.label, { textTransform: "capitalize" }]}>
//               Masuk sebagai {role}
//             </Text>

//             <Text style={styles.label}>Email</Text>
//             <View style={styles.inputContainer}>
//               <Ionicons
//                 name="mail"
//                 size={24}
//                 color="gray"
//                 style={styles.icon}
//               />
//               <TextInput
//                 style={styles.input}
//                 value={email}
//                 onChangeText={setEmail}
//                 placeholder="Masukkan email"
//                 keyboardType="email-address"
//                 autoCapitalize="none"
//               />
//             </View>

//             <Text style={styles.label}>Kata Sandi</Text>
//             <View style={styles.passwordContainer}>
//               <FontAwesome
//                 name="lock"
//                 size={24}
//                 color="gray"
//                 style={styles.icon}
//               />
//               <TextInput
//                 style={styles.passwordInput}
//                 value={password}
//                 onChangeText={setPassword}
//                 placeholder="Masukkan Kata Sandi"
//                 secureTextEntry={!showPassword}
//                 autoCapitalize="none"
//               />
//               <TouchableOpacity
//                 onPress={() => setShowPassword(!showPassword)}
//                 style={styles.eyeIcon}
//               >
//                 <Ionicons
//                   name={showPassword ? "eye-off" : "eye"}
//                   size={24}
//                   color="gray"
//                 />
//               </TouchableOpacity>
//             </View>

//             <TouchableOpacity style={styles.button} onPress={handleLogin}>
//               <Text style={styles.buttonText}>Masuk</Text>
//             </TouchableOpacity>

//             {/* Tombol kembali untuk pilih ulang role */}
//             <TouchableOpacity
//               onPress={() => setRole(null)}
//               style={{ marginTop: 15, alignItems: "center" }}
//             >
//               <Text style={{ color: "#2D572C", fontWeight: "bold" }}>
//                 Pilih ulang peran
//               </Text>
//             </TouchableOpacity>
//           </View>
//         )}
//       </View>
//     </ScrollView>
//   );
// };

// const styles = StyleSheet.create({
//   formContainer: {
//     marginTop: 20,
//   },
//   label: {
//     fontSize: 18,
//     marginBottom: 10,
//     color: "#333",
//   },
//   inputContainer: {
//     flexDirection: "row",
//     alignItems: "center",
//     borderColor: "#ddd",
//     borderWidth: 1,
//     borderRadius: 5,
//     marginBottom: 20,
//   },
//   input: {
//     flex: 1,
//     height: 45,
//     paddingLeft: 10,
//   },
//   icon: {
//     paddingLeft: 10,
//   },
//   passwordContainer: {
//     flexDirection: "row",
//     alignItems: "center",
//     borderColor: "#ddd",
//     height: 45,
//     borderWidth: 1,
//     borderRadius: 5,
//     marginBottom: 20,
//   },
//   passwordInput: {
//     flex: 1,
//     height: 45,
//     paddingLeft: 10,
//   },
//   eyeIcon: {
//     paddingRight: 10,
//   },
//   button: {
//     backgroundColor: "#2D572C",
//     paddingVertical: 15,
//     borderRadius: 5,
//     marginTop: 10,
//   },
//   buttonText: {
//     textAlign: "center",
//     color: "#fff",
//     fontSize: 16,
//     fontWeight: "bold",
//   },
// });

// export default Masuk;