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

const AksesAkun = ({ navigation }) => {
  const [role, setRole] = useState(null);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [showPassword, setShowPassword] = useState(false);
  const [errorMessage, setErrorMessage] = useState("");

  const handleLogin = () => {
    if (!role) {
      setErrorMessage("Pilih dulu role Anda (Admin atau Warga)");
      return;
    }
    if (!email || !password) {
      setErrorMessage("Masukkan email dan kata sandi dengan benar");
      return;
    }

    if (
      role === "admin" &&
      email === "admin@gmail.com" &&
      password === "1234"
    ) {
      setErrorMessage("");
      navigation.navigate("AksesAdminNavigator", { screen: "AdminScreen" });
    } else if (
      role === "warga" &&
      email === "warga@gmail.com" &&
      password === "1234"
    ) {
      setErrorMessage("");
      navigation.navigate("AksesWargaNavigator", { screen: "Home" });
    } else {
      setErrorMessage("Email atau kata sandi salah");
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.backButton}
        onPress={() => navigation.navigate("Onboarding")}
      >
        <Ionicons name="arrow-back" size={30} color="#000" />
      </TouchableOpacity>
      <Image
        style={styles.image}
        source={require("../assets/images/sampah.png")}
        resizeMode="contain"
      />

      <Text style={styles.welcomeText}>Selamat Datang kembali,</Text>
      <Text style={styles.ecoMapperText}>EcoMapper !</Text>

      <Text style={styles.label}>Pilih Akses</Text>
      <View style={styles.buttonContainer}>
        <TouchableOpacity
          style={[
            styles.roleButton,
            role === "admin" && styles.roleButtonSelected,
          ]}
          onPress={() => setRole("admin")}
        >
          <Ionicons
            name="person"
            size={24}
            color={role === "admin" ? "#fff" : "#000"}
          />
          <Text
            style={[
              styles.roleButtonText,
              role === "admin" && styles.roleButtonTextSelected,
            ]}
          >
            ADMIN
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.roleButton,
            role === "warga" && styles.roleButtonSelected,
          ]}
          onPress={() => setRole("warga")}
        >
          <Ionicons
            name="people"
            size={24}
            color={role === "warga" ? "#fff" : "#000"}
          />
          <Text
            style={[
              styles.roleButtonText,
              role === "warga" && styles.roleButtonTextSelected,
            ]}
          >
            WARGA
          </Text>
        </TouchableOpacity>
      </View>

      <Text style={styles.label}>Email</Text>
      <View style={styles.inputContainer}>
        <Ionicons name="mail" size={24} color="gray" style={styles.icon} />
        <TextInput
          style={styles.input}
          placeholder="Masukkan email"
          value={email}
          onChangeText={setEmail}
          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}
          placeholder="Masukkan kata sandi"
          secureTextEntry={!showPassword}
          value={password}
          onChangeText={setPassword}
          autoCapitalize="none"
        />
        <TouchableOpacity
          style={styles.eyeIcon}
          onPress={() => setShowPassword(!showPassword)}
        >
          <Ionicons
            name={showPassword ? "eye-off" : "eye"}
            size={24}
            color="gray"
          />
        </TouchableOpacity>
      </View>

      {errorMessage ? (
        <Text style={styles.errorText}>{errorMessage}</Text>
      ) : null}

      <TouchableOpacity style={styles.loginButton} onPress={handleLogin}>
        <Text style={styles.loginButtonText}>Masuk</Text>
      </TouchableOpacity>

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

      {/* "Lupa Kata Sandi?" Text */}
      <View style={styles.forgotPasswordContainer}>
        <TouchableOpacity
          onPress={() =>
            navigation.navigate("AksesWargaNavigator", { screen: "lupasandi" })
          }
        >
          <Text style={styles.forgotPasswordText}>Lupa Kata Sandi?</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default AksesAkun;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 20,
    alignItems: "center",
    justifyContent: "center",
  },
  backButton: {
    position: "absolute",
    top: 60, // sesuaikan dengan tinggi status bar dan padding
    left: 20,
    zIndex: 10,
    padding: 6,
    borderRadius: 6,
    backgroundColor: "#fff", // warna soft supaya tombol terlihat
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
  },
  image: {
    width: 300,
    height: 200,
    marginBottom: 20,
  },
  welcomeText: {
    fontSize: 28,
    fontWeight: "bold",
    textAlign: "center",
  },
  ecoMapperText: {
    fontSize: 34,
    fontWeight: "bold",
    color: "#000",
    marginBottom: 30,
    textAlign: "center",
  },
  label: {
    fontSize: 18,
    alignSelf: "flex-start",
    marginLeft: 10,
    marginBottom: 10,
    fontWeight: "600",
  },
  buttonContainer: {
    flexDirection: "row",
    marginBottom: 30,
    justifyContent: "center",
    gap: 15,
  },
  roleButton: {
    flexDirection: "row",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#000",
    borderRadius: 12,
    paddingVertical: 15,
    paddingHorizontal: 25,
    marginHorizontal: 5,
    backgroundColor: "#fff",
  },
  roleButtonSelected: {
    backgroundColor: "#2D572C",
    borderColor: "#2D572C",
  },
  roleButtonText: {
    fontSize: 20,
    fontWeight: "bold",
    marginLeft: 8,
    color: "#000",
  },
  roleButtonTextSelected: {
    color: "#fff",
  },
  inputContainer: {
    flexDirection: "row",
    alignItems: "center",
    borderColor: "#ddd",
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 20,
    paddingLeft: 10,
    height: 50,
    width: "100%",
  },
  input: {
    flex: 1,
    fontSize: 16,
  },
  passwordContainer: {
    flexDirection: "row",
    alignItems: "center",
    borderColor: "#ddd",
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 40,
    paddingLeft: 10,
    height: 50,
    width: "100%",
  },
  passwordInput: {
    flex: 1,
    fontSize: 16,
  },
  icon: {
    marginRight: 10,
  },
  eyeIcon: {
    paddingHorizontal: 10,
  },
  loginButton: {
    backgroundColor: "#2D572C",
    paddingVertical: 15,
    paddingHorizontal: 160,
    borderRadius: 8,
    marginBottom: 15,
  },
  loginButtonText: {
    color: "#fff",
    textAlign: "center",
    fontWeight: "bold",
    fontSize: 20,
  },
  registerContainer: {
    marginTop: 10,
  },
  registerText: {
    fontSize: 16,
    color: "#333",
  },
  registerLink: {
    color: "#2D572C",
    fontWeight: "bold",
  },
  forgotPasswordContainer: {
    marginTop: 10,
  },
  forgotPasswordText: {
    color: "#2D572C",
    fontWeight: "bold",
    textAlign: "center",
    fontSize: 16,
  },
  errorText: {
    color: "red",
    fontSize: 15,
    marginBottom: 10,
  },
});