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

const NotifikasiAdminScreen = () => {
  const navigation = useNavigation();
  // Get current date and time
  const currentDate = new Date();
  const formattedDate = `${currentDate.toLocaleDateString()} ${currentDate.toLocaleTimeString()}`;

  return (
    <View style={styles.container}>
      <ScrollView style={styles.scrollContainer}>
        {/* Header */}
        <View>
          <Text style={styles.title}>NOTIFIKASI ADMIN</Text>
        </View>

        {/* Notification 1: New User Report */}
        <View style={styles.notification}>
          <MaterialIcons name="report-problem" size={24} color="#e74c3c" />
          <View style={styles.notificationText}>
            <Text style={styles.notificationTitle}>Laporan pengguna baru!</Text>
            <Text style={styles.notificationDescription}>
              Pengguna baru melaporkan masalah terkait sistem. Harap tinjau
              segera.
            </Text>
            <Text style={styles.notificationDate}>{formattedDate}</Text>
          </View>
        </View>

        {/* Notification 2: Task Assigned to You */}
        <View style={styles.notification}>
          <Ionicons name="clipboard" size={24} color="#3498db" />
          <View style={styles.notificationText}>
            <Text style={styles.notificationTitle}>
              Tugas baru telah ditugaskan!
            </Text>
            <Text style={styles.notificationDescription}>
              Anda telah ditugaskan untuk meninjau laporan terbaru yang masuk.
              Silakan cek sekarang.
            </Text>
            <Text style={styles.notificationDate}>{formattedDate}</Text>
          </View>
        </View>

        {/* Notification 3: System Maintenance Update */}
        <View style={styles.notification}>
          <Ionicons name="construct" size={24} color="#f39c12" />
          <View style={styles.notificationText}>
            <Text style={styles.notificationTitle}>
              Pembaruan sistem sedang berjalan.
            </Text>
            <Text style={styles.notificationDescription}>
              Pembaruan sistem akan memengaruhi akses beberapa fitur. Harap
              bersabar.
            </Text>
            <Text style={styles.notificationDate}>{formattedDate}</Text>
          </View>
        </View>

        {/* Notification 4: New Trash Pickup Location */}
        <View style={styles.notification}>
          <Ionicons name="location-sharp" size={24} color="#27ae60" />
          <View style={styles.notificationText}>
            <Text style={styles.notificationTitle}>
              TPS baru telah ditambahkan!
            </Text>
            <Text style={styles.notificationDescription}>
              Lokasi pembuangan sampah terbaru sudah tersedia di sistem. Cek
              peta untuk detailnya.
            </Text>
            <Text style={styles.notificationDate}>{formattedDate}</Text>
          </View>
        </View>
      </ScrollView>

      {/* Bottom Navigation */}
      <View style={styles.bottomNavigationContainer}>
        <BottomTabAdmin />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, // Flex untuk menutupi seluruh layar
    backgroundColor: "#f9f9f9",
    paddingHorizontal: 20,
    paddingTop: 10,
  },
  scrollContainer: {
    flex: 1, // Agar ScrollView mengisi ruang yang tersisa
    paddingBottom: 80, // Menambahkan ruang untuk bottom navigation
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
    marginLeft: 10,
    marginBottom: 20,
    marginTop: 40,
  },
  notification: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    padding: 15,
    marginBottom: 15,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#ddd",
  },
  notificationText: {
    marginLeft: 15,
    flex: 1,
  },
  notificationTitle: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#333",
  },
  notificationDescription: {
    fontSize: 14,
    color: "#555",
  },
  notificationDate: {
    fontSize: 12,
    color: "#888", // Lighter color for date
    marginTop: 5,
  },
  bottomNavigationContainer: {
    position: "absolute",
    bottom: 0,
    left: 0, // Memberikan ruang kiri sedikit
    right: 0, // Memberikan ruang kanan sedikit
    height: 60,
    flexDirection: "row",
    justifyContent: "space-around",
    backgroundColor: "#fff",
    paddingVertical: 8,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    shadowColor: "#000",
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 6,
    elevation: 5,
  },
});

export default NotifikasiAdminScreen;