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 BottomNav from "../../Navigation/BottomNav";

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

  const currentDate = new Date();
  const formattedDate = `${currentDate.toLocaleDateString()} ${currentDate.toLocaleTimeString()}`;

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

        {/* Notification 1: New Report */}
        <View style={styles.notification}>
          <MaterialIcons name="notifications" size={24} color="#ff9f00" />
          <View style={styles.notificationText}>
            <Text style={styles.notificationTitle}>Ada laporan baru!</Text>
            <Text style={styles.notificationDescription}>
              Tim kami sedang meninjau pengaduan sampah terbaru. Terima kasih
              atas partisipasi Anda!
            </Text>
            <Text style={styles.notificationDate}>{formattedDate}</Text>
          </View>
        </View>

        {/* Notification 2: 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}>
              Sekarang Anda bisa menemukan lebih banyak lokasi pembuangan sampah
              terdekat di EcoMap.
            </Text>
            <Text style={styles.notificationDate}>{formattedDate}</Text>
          </View>
        </View>

        {/* Notification 3: Duplicate Example */}
        <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}>
              Sekarang Anda bisa menemukan lebih banyak lokasi pembuangan sampah
              terdekat di EcoMap.
            </Text>
            <Text style={styles.notificationDate}>{formattedDate}</Text>
          </View>
        </View>

        {/* Notification 4: Another Example */}
        <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}>
              Sekarang Anda bisa menemukan lebih banyak lokasi pembuangan sampah
              terdekat di EcoMap.
            </Text>
            <Text style={styles.notificationDate}>{formattedDate}</Text>
          </View>
        </View>
      </ScrollView>
      {/* Bottom Navigation */}
      <View
        style={{
          position: "absolute",
          bottom: 0,
          left: 0, // kasih sedikit ruang kiri supaya agak geser ke kanan
          right: 0, // beri ruang kanan biar tidak penuh
          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,
        }}
      >
        <BottomNav />
      </View>{" "}
      {/* Pastikan tag View ditutup dengan benar */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, // Flex untuk menutupi seluruh layar
    backgroundColor: "#f9f9f9",
    paddingHorizontal: 20,
    paddingTop: 20,
  },
  scrollContainer: {
    flex: 1, // Agar ScrollView mengisi ruang yang tersisa
  },
  backButtonContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 20,
  },
  backButton: {
    flexDirection: "row",
    alignItems: "center",
  },
  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,
  },
});

export default NotifikasiScreen;