import React from "react";
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  StyleSheet,
  Alert,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import BottomTabAdmin from "../../Navigation/BottomTabAdmin";

const ProfilAdminScreen = () => {
  const navigation = useNavigation();

  const userProfile = {
    name: "Johan Okta Pangestu",
    email: "okta@gmail.com",
    phone: "08123456789",
    address: "Jl. Raya No. 123, Nganjuk",
    joinDate: "January 15, 2023",
  };

  const handleLogout = () => {
    Alert.alert(
      "Konfirmasi Keluar",
      "Apakah Anda yakin ingin keluar dari aplikasi?",
      [
        {
          text: "Tidak",
          onPress: () => console.log("Logout cancelled"),
          style: "cancel",
        },
        {
          text: "Yakin",
          onPress: () => {
            console.log("User logged out");
            navigation.navigate("AksesAkun"); // Navigasi ke halaman masuk admin
          },
        },
      ],
      { cancelable: false }
    );
  };

  return (
    <View style={styles.container}>
      {/* Profile Section */}
      <View style={styles.profileSection}>
        <Image
          source={{
            uri: "https://i.ytimg.com/vi/b1XXKeq5ccQ/oar2.jpg?sqp=-oaymwEkCJUDENAFSFqQAgHyq4qpAxMIARUAAAAAJQAAyEI9AICiQ3gB&rs=AOn4CLBxYjkvH5GuWS8_SYMNsg5aIGYIRA",
          }}
          style={styles.profileImage}
        />
        <View style={styles.profileTextContainer}>
          <TouchableOpacity
            style={styles.editButton}
            onPress={() => navigation.navigate("EditProfilScreen")}
          >
            <Text style={styles.editButtonText}>Edit Profil</Text>
          </TouchableOpacity>
          <Text style={styles.greetingText}>Hi, {userProfile.name}</Text>
          <Text style={styles.envMessageText}>
            Keberihan lingkungan sekitar anda wajib terjaga
          </Text>
          <View style={styles.dinasBox}>
            <Text style={styles.dinasText}>DINAS LINGKUNGAN HIDUP</Text>
          </View>
        </View>
      </View>

      {/* Profile Information Section */}
      <View style={styles.infoSection}>
        <Text style={styles.infoLabel}>Nama:</Text>
        <Text style={styles.infoText}>{userProfile.name}</Text>

        <Text style={styles.infoLabel}>Email:</Text>
        <Text style={styles.infoText}>{userProfile.email}</Text>

        <Text style={styles.infoLabel}>No. HP:</Text>
        <Text style={styles.infoText}>{userProfile.phone}</Text>

        <Text style={styles.infoLabel}>Alamat:</Text>
        <Text style={styles.infoText}>{userProfile.address}</Text>

        <Text style={styles.infoLabel}>Tanggal Bergabung:</Text>
        <Text style={styles.infoText}>{userProfile.joinDate}</Text>
      </View>

      {/* Logout Button */}
      <TouchableOpacity style={styles.logoutButton} onPress={handleLogout}>
        <Text style={styles.logoutButtonText}>KELUAR AKUN</Text>
      </TouchableOpacity>

      {/* Bottom Navigation */}
      <View style={styles.bottomNav}>
        <TouchableOpacity
          style={styles.navItem}
          onPress={() => navigation.navigate("AksesAkun")}
        >
          <Ionicons name="home" size={30} color="#2C6B2F" />
          <Text style={styles.navText}>UTAMA</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.navItem}
          onPress={() => navigation.navigate("NotifikasiAdminScreen")}
        >
          <View style={styles.notifIconContainer}>
            <Ionicons name="notifications-outline" size={24} color="#2C6B2F" />
            <View style={styles.badge}>
              <Text style={styles.badgeText}>1</Text>
            </View>
          </View>
          <Text style={styles.navText}>NOTIFIKASI</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.navItem}
          onPress={() => navigation.navigate("ProfilAdminScreen")}
        >
          <Ionicons name="person-circle-outline" size={24} color="#2C6B2F" />
          <Text style={styles.navText}>PROFIL</Text>
        </TouchableOpacity>
      </View>
      <BottomTabAdmin />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
  },
  profileSection: {
    alignItems: "center",
    padding: 20,
    backgroundColor: "#fff",
    borderBottomWidth: 1,
    borderBottomColor: "#ddd",
    marginTop: 30,
  },
  profileImage: {
    width: 150,
    height: 150,
    borderRadius: 75,
    marginBottom: 20,
  },
  profileTextContainer: {
    alignItems: "center",
    justifyContent: "center",
  },
  greetingText: {
    fontSize: 30,
    fontWeight: "bold",
    color: "#333",
  },
  envMessageText: {
    fontSize: 14,
    color: "#555",
    marginVertical: 5,
  },
  dinasBox: {
    backgroundColor: "#ddd",
    paddingVertical: 3,
    paddingHorizontal: 12,
    marginTop: 1,
    borderRadius: 8,
    borderColor: "#000",
    alignItems: "center",
    borderWidth: 0.5,
  },
  dinasText: {
    fontSize: 12,
    fontWeight: "bold",
    color: "#333",
  },
  editButton: {
    backgroundColor: "#fff",
    paddingVertical: 5,
    borderRadius: 8,
    alignItems: "center",
    marginTop: 10,
    paddingHorizontal: 30,
    marginBottom: 5,
    borderWidth: 1,
    borderColor: "#000",
  },
  editButtonText: {
    fontSize: 16,
    color: "#000",
    fontWeight: "bold",
  },
  infoSection: {
    paddingHorizontal: 20,
    marginBottom: 20,
  },
  infoLabel: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#555",
    marginTop: 10,
  },
  infoText: {
    fontSize: 16,
    color: "#777",
    marginBottom: 15,
  },
  logoutButton: {
    backgroundColor: "#fff",
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: "center",
    marginHorizontal: 20,
    marginBottom: 20,
    borderWidth: 0.5,
    elevation: 1,
  },
  logoutButtonText: {
    fontSize: 16,
    color: "#000",
    fontWeight: "bold",
  },
  bottomNav: {
    position: "absolute",
    bottom: 0,
    width: "100%",
    flexDirection: "row",
    justifyContent: "space-evenly",
    backgroundColor: "#fff",
    paddingVertical: 8,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 5,
  },
  navItem: {
    alignItems: "center",
    padding: 6,
    borderRadius: 10,
    paddingHorizontal: 12,
    paddingVertical: 5,
    marginHorizontal: 5,
  },
  navText: { color: "#2C6B2F", fontSize: 12, marginTop: 5 },
  notifIconContainer: { position: "relative" },
  badge: {
    position: "absolute",
    right: -5,
    top: -5,
    backgroundColor: "#E74C3C",
    borderRadius: 10,
    paddingHorizontal: 6,
    paddingVertical: 2,
  },
  badgeText: { color: "#fff", fontSize: 10, fontWeight: "bold" },
});

export default ProfilAdminScreen;