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 FontAwesome untuk ikon surat
import { useNavigation } from "@react-navigation/native";
// import AksesWargaNavigator from "../Navigation/AksesWargaNavigator";

const MasukAdmin = () => {
  const navigation = useNavigation();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);

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

      <View style={{ flex: 1, backgroundColor: "#fff" }}>
        <View
          style={{
            backgroundColor: "#fff",
            paddingVertical: 20,
            paddingHorizontal: 10,
            flexDirection: "row",
            alignItems: "center",
          }}
        >
          {/* Tombol Kembali */}
          <TouchableOpacity
            onPress={() => navigation.navigate("AksesAkun")}
            style={{ width: 45, height: 45, marginRight: 13 }}
          >
            <Ionicons name="arrow-back" size={30} color="#000" />
          </TouchableOpacity>
        </View>

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

      <View style={styles.formContainer}>
        <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"
          />
        </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}
          />
          <TouchableOpacity
            onPress={() => setShowPassword(!showPassword)}
            style={styles.eyeIcon}
          >
            <Ionicons
              name={showPassword ? "eye-off" : "eye"}
              size={24}
              color="gray"
            />
          </TouchableOpacity>
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={() =>
            navigation.navigate("AksesAdminNavigator", {
              screen: "AdminScreen",
            })
          }
        >
          <Text style={styles.buttonText}>Masuk</Text>
        </TouchableOpacity>

        {/* "Daftar Sekarang" Text */}
        <View style={styles.registerContainer}>
          <Text style={styles.registerText}>
            Belum punya akun?{" "}
            <TouchableOpacity onPress={() => navigation.navigate("daftar")}>
              <Text style={styles.registerLink}>Daftar Sekarang</Text>
            </TouchableOpacity>
          </Text>
        </View>

        {/* "Lupa Kata Sandi?" Text */}
        <View style={styles.forgotPasswordContainer}>
          <TouchableOpacity
            onPress={() => navigation.navigate("lupakatasandi")}
          >
            <Text style={styles.forgotPasswordText}>Lupa Kata Sandi?</Text>
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  formContainer: {
    paddingHorizontal: 30,
    marginTop: 20,
    marginBottom: 30,
  },
  label: {
    fontSize: 16,
    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: 20,
  },
  buttonText: {
    textAlign: "center",
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
  registerContainer: {
    marginTop: 15,
    alignItems: "center",
  },
  registerText: {
    fontSize: 16,
    color: "#333",
  },
  registerLink: {
    color: "#2D572C",
    fontWeight: "bold",
  },
  forgotPasswordContainer: {
    marginTop: 15,
    alignItems: "center",
  },
  forgotPasswordText: {
    fontSize: 16,
    color: "#2D572C",
    fontWeight: "bold",
  },
});

export default MasukAdmin;