import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ImageBackground,
  Dimensions,
} from "react-native";
import {
  Ionicons,
  FontAwesome5,
  MaterialCommunityIcons,
} from "@expo/vector-icons";

import Carousel from "react-native-reanimated-carousel";
import { useNavigation } from "@react-navigation/native";
import BottomNav from "../../Navigation/BottomNav";

const { width } = Dimensions.get("window"); // Get the screen width

const Home = () => {
  // const navigate = (route) => navigation.navigate(route);
  const navigation = useNavigation();
  const [activeSlide, setActiveSlide] = useState(0);

  const sliderData = [
    { id: "1", image: require("../../assets/images/poster1.png") },
    { id: "2", image: require("../../assets/images/poster2.png") },
  ];

  const handleNext = () => {
    navigation.navigate(""); // Add the name of the screen to navigate
  };

  return (
    <View style={styles.container}>
      <ImageBackground
        source={require("../../assets/images/bg.png")}
        style={styles.backgroundImage}
      >
        <View style={styles.header}>
          <Text style={styles.date}>05 Mei 2024</Text>
          <Text style={styles.greeting}>
            HI, PENGGUNA ECOMAP{" "}
            <Ionicons name="checkmark-circle" size={18} color="green" />
          </Text>
          <Text style={styles.subtitle}>
            KEBERSIHAN LINGKUNGAN SEKITAR ANDA WAJIB TERJAGA!
          </Text>
        </View>

        <View style={styles.coinRow}>
          <View style={styles.coinInfo}>
            <View style={styles.coinBox}>
              <Text style={styles.coinLabel}>KOIN SAYA</Text>
              <View style={styles.coinValueRow}>
                <Text style={styles.coinText}>0</Text>
                <Image
                  source={require("../../assets/images/koin.png")}
                  style={styles.coinImage}
                />
              </View>
              <Text style={styles.noCoinText}>
                Belum ada koin yang terkumpul
              </Text>
              <TouchableOpacity
                style={styles.historyButton}
                onPress={() => navigation.navigate("RiwayatCoinScreen")} // Ganti dengan nama layar yang sesuai
              >
                <Text style={styles.historyButtonText}>RIWAYAT KOIN</Text>
              </TouchableOpacity>
            </View>
          </View>

          <TouchableOpacity
            style={styles.reportButton}
            onPress={() => navigation.navigate("BerandaPengaduan")}
          >
            <Text style={styles.reportButtonText}>BERANDA PENGADUAN</Text>
          </TouchableOpacity>
        </View>

        <View style={styles.menuContainer}>
          <TouchableOpacity
            style={styles.menuItem}
            onPress={() => navigation.navigate("LokasiTerdekat")}
            // onPress={() =>
            //   navigation.navigate("MainTabs", { screen: "LokasiTerdekat" })
            // } // Buka MainTabs, lalu LokasiTerdekat
          >
            <Ionicons
              name="location"
              size={45}
              color="#2C6B2F"
              style={styles.menuImage}
            />
            <Text style={styles.menuText}>LOKASI TERDEKAT</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.menuItem}
            onPress={() => navigation.navigate("daftarTPS")}
          >
            <Ionicons
              name="bookmarks"
              size={45}
              color="#2C6B2F"
              style={styles.menuImage}
            />

            <Text style={styles.menuText}>DAFTAR TPS DI NGANJUK</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.menuItem}
            onPress={() => navigation.navigate("pengaduansampah")}
          >
            <MaterialCommunityIcons
              name="trash-can"
              size={50}
              color="#2C6B2F"
              style={styles.menuImage}
            />
            {/* <View style={styles.badge}>
              <FontAwesome5
                name="lock"
                size={12}
                color="#fff"
                style={styles.lock}
              />
            </View> */}
            <Text style={styles.menuText}>PENGADUAN SAMPAH</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={styles.menuItem}
            onPress={() => navigation.navigate("misimingguan")}
          >
            <FontAwesome5
              name="gift"
              size={45}
              color="#2C6B2F"
              style={styles.menuImage}
            />
            {/* <View style={styles.badge}>
              <FontAwesome5
                name="lock"
                size={12}
                color="#fff"
                style={styles.lock}
              />
            </View> */}
            <Text style={styles.menuText}>DAPATKAN KOIN</Text>
          </TouchableOpacity>
        </View>

        <View style={{ marginTop: 20 }}>
          <Carousel
            loop
            autoPlay={true}
            autoPlayInterval={3000}
            width={width} // Use screen width here
            height={180}
            data={sliderData}
            scrollAnimationDuration={1000}
            onSnapToItem={(index) => setActiveSlide(index)}
            renderItem={({ item }) => (
              <Image
                source={item.image}
                style={styles.sliderImage}
                resizeMode="cover"
              />
            )}
          />
        </View>
      </ImageBackground>
      <BottomNav />
      {/* <View style={styles.bottomNav}>
        <TouchableOpacity style={styles.navItem}>
          <Ionicons name="home" size={30} color="#2C6B2F" />
          <Text style={styles.navText}>UTAMA</Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={styles.navItem}
          onPress={() => navigation.navigate("EcoMapCoinExchangeScreen")}
        >
          <FontAwesome5 name="exchange-alt" size={24} color="#2C6B2F" />
          <Text style={styles.navText}>TUKAR KOIN</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.navItem}>
          <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}>
          <Ionicons name="person-circle-outline" size={24} color="#2C6B2F" />
          <Text style={styles.navText}>PROFIL</Text>
        </TouchableOpacity>
      </View> */}
    </View>
    // </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#f9f9f9" },
  backgroundImage: {
    flex: 1,
    justifyContent: "center",
    paddingLeft: 10,
    paddingRight: 10,
    paddingTop: 0,
  },
  header: { marginTop: 10, alignItems: "flex-start", paddingBottom: 5 },
  date: { fontSize: 20, color: "#000", paddingLeft: 20, marginTop: 20 },
  greeting: {
    fontSize: 20,
    fontWeight: "bold",
    marginTop: 0,
    color: "#333",
    paddingLeft: 20,
  },
  subtitle: {
    fontSize: 15,
    color: "#27AE60",
    fontWeight: "600",
    paddingLeft: 20,
  },
  coinRow: {
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    paddingHorizontal: 20,
    marginTop: 20,
  },

  coinInfo: { alignItems: "flex-start" },
  coinLabel: {
    fontSize: 18,
    fontWeight: "700",
    color: "#333",
    marginBottom: 0,
    marginLeft: -100,
  },
  coinBox: {
    marginVertical: 10,
    backgroundColor: "#fff",
    paddingHorizontal: 130,
    paddingVertical: 15,
    borderRadius: 20,
    flexDirection: "column",
    alignItems: "flex-start",
    elevation: 1,
    borderWidth: 1,
    borderColor: "#aaa",
    position: "relative",
  },
  coinValueRow: { flexDirection: "row", alignItems: "center", marginTop: 10 },
  coinText: {
    fontSize: 30,
    fontWeight: "bold",
    color: "#333",
    textAlign: "left",
    marginLeft: -100,
  },
  coinImage: { width: 24, height: 24, marginLeft: 6 },

  noCoinText: {
    fontSize: 12,
    color: "#aaa",
    marginTop: 5,
    textAlign: "left",
    marginLeft: -100,
  },
  historyButton: {
    position: "absolute",
    backgroundColor: "#27AE60", // Sesuaikan dengan warna yang diinginkan
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 20,
    top: -6,
    right: 10,
    marginTop: 15, // Spasi antara tombol dan teks
    alignItems: "center",
    justifyContent: "center",
    width: "100%", // Lebar penuh box
    elevation: 1, // Tambahkan sedikit bayangan
  },
  historyButtonText: {
    fontSize: 14,
    fontWeight: "bold",
    color: "#fff",
    textAlign: "center",
  },

  reportButton: {
    backgroundColor: "#DCDCDC",
    paddingVertical: 15, // Adjust padding for a more rectangular shape
    paddingHorizontal: 10, // Increase horizontal padding to make it look like a rectangle
    borderRadius: 20, // Keep the border radius low for a rectangular shape
    alignItems: "center",
    justifyContent: "center",
    borderWidth: 1,
    borderColor: "#999",
    width: "80%", // Take up full width inside the box
    marginTop: 10,
    paddingLeft: 5, // Add some spacing between the content
  },
  reportButtonText: {
    fontSize: 14,
    color: "#000",
    fontWeight: "bold",
    textAlign: "center",
  },
  menuImage: {
    width: 50,
    height: 50,
    marginLeft: 3,
    marginBottom: 5,
    marginTop: 7,
    justifyContent: "center",
  },
  menuContainer: {
    marginTop: 5,
    marginRight: 5,
    marginLeft: 12,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-around",
    paddingRight: 15,
  },
  menuItem: {
    width: "23%",
    alignItems: "center",
    marginVertical: 10,
    padding: 10,
    borderWidth: 1,
    borderColor: "#ddd",
    borderRadius: 25,
    backgroundColor: "#fff",
    elevation: 2,
  },
  menuText: {
    fontSize: 12,
    fontWeight: "500",
    color: "#333",
    marginTop: 8,
    textAlign: "center",
  },
  sliderImage: {
    height: 160,
    borderRadius: 19,
    width: "80%",
    alignSelf: "center",
    marginRight: 25,
  },
  bottomNav: {
    position: "absolute",
    bottom: -10,

    width: "100%",
    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,
  },
  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,
  },
  lock: {
    position: "absolute",
    right: -5,
    top: -5,
    backgroundColor: "#2C6B2F",
    borderRadius: 40,
    paddingHorizontal: 8,
    paddingVertical: 5,
    borderWidth: 1,
  },
  badgeText: { color: "#fff", fontSize: 10, fontWeight: "bold" },
});

export default Home;