import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  ImageBackground,
  Dimensions,
  Image,
  ScrollView,
} from "react-native";
import {
  Ionicons,
  FontAwesome5,
  MaterialCommunityIcons,
} from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import BottomTabAdmin from "../../Navigation/BottomTabAdmin";
import { LineChart } from "react-native-chart-kit";

const { width, height } = Dimensions.get("window");

const AdminScreen = () => {
  const navigation = useNavigation();
  const [activeSlide, setActiveSlide] = useState(0);

  const data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May"], // Label untuk bulan
    datasets: [
      {
        data: [5000000, 7000000, 4000000, 8000000, 6000000], // Data donasi per bulan
        strokeWidth: 1, // Lebar garis
      },
    ],
  };

  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}
      >
        {/* <Text style={styles.date}>05 Mei 2025</Text> */}
        {/* Profile Section */}

        <ScrollView contentContainerStyle={styles.scrollContainer}>
          <View style={styles.profileContainer}>
            <Image
              source={{
                uri: "https://shanibacreative.com/wp-content/uploads/2022/10/SCI-0801220002_7-1280x1920.jpeg",
              }} // Replace with your image URL
              style={styles.profileImage}
            />

            <Text style={styles.greetingnama}>
              Halooo Dina {"\n"}
              <Text style={styles.subtitle}>
                Kebersihan Lingkungan Wajib Terjaga!
              </Text>
            </Text>
            <Text style={styles.subtitle}></Text>
            {/* <Text style={styles.greetingnama}>
              Dinas Lingkungan Hidup{" "}
              <Ionicons name="checkmark-circle" size={18} color="green" />
            </Text> */}
          </View>
          {/* <View style={styles.header}> */}

          <Text style={styles.subtitle}></Text>
          <View style={styles.coinRow}>
            <View style={styles.coinInfo}>
              <View style={styles.coinBox}>
                <Text style={styles.coinLabel}>JUMLAH DONASI</Text>
                <View style={styles.coinValueRow}>
                  <Text style={styles.coinText}>Rp. 5.870.000</Text>
                </View>
                <Text style={styles.noCoinText}>Donasi dalam satu tahun</Text>
                <TouchableOpacity
                  style={styles.historyButton}
                  onPress={() => navigation.navigate("RiwayatDonasiAdmin")}
                >
                  <Text style={styles.historyButtonText}>RIWAYAT DONASI</Text>
                </TouchableOpacity>
              </View>
            </View>
            <View style={styles.coinInfo}>
              <View style={styles.coinBox}>
                <Text style={styles.coinLabel}>PENGELUARAN</Text>
                <View style={styles.coinValueRow}>
                  <Text style={styles.coinText}>Rp. 3.270.000</Text>
                </View>
                <Text style={styles.noCoinText}>
                  Pengeluaran dalam satu bulan
                </Text>
                <TouchableOpacity
                  style={styles.historyButton}
                  onPress={() => navigation.navigate("RiwayatDonasiAdmin")}
                >
                  <Text style={styles.historyButtonText}>
                    RIWAYAT PENGELUARAN
                  </Text>
                </TouchableOpacity>
              </View>
            </View>

            <View style={styles.statsContainer}>
              <View style={styles.statBox}>
                <Text style={styles.statLabel}>Pengaduan</Text>
                <Text style={styles.statValue}>102</Text>
              </View>

              <View style={styles.statBox}>
                <Text style={styles.statLabel}>TPS di Nganjuk</Text>
                <Text style={styles.statValue}>52</Text>
              </View>
            </View>
          </View>
          <TouchableOpacity
            style={styles.reportButton}
            onPress={() => navigation.navigate("BerandaPengaduanAdmin")}
          >
            <Text style={styles.reportButtonText}>BERANDA PENGADUAN</Text>
          </TouchableOpacity>
          <View style={styles.menuContainer}>
            <TouchableOpacity
              style={styles.menuItem}
              onPress={() => navigation.navigate("DaftarTPSAdmin")}
            >
              <Ionicons
                name="bookmarks"
                size={40}
                color="#2C6B2F"
                style={styles.menuImage}
              />
              <Text style={styles.menuText}>TPS di Nganjuk</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.menuItem}
              onPress={() => navigation.navigate("Laporan")}
            >
              <MaterialCommunityIcons
                name="file-document"
                size={50}
                color="#2C6B2F"
                style={styles.menuImage}
              />
              <Text style={styles.menuText}>Laporan</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.menuItem}
              onPress={() => navigation.navigate("PosterEdukasiScreen")}
            >
              <FontAwesome5
                name="chalkboard-teacher"
                size={38}
                color="#2C6B2F"
                style={styles.menuImage}
              />
              <Text style={styles.menuText}>Poster Edukasi</Text>
            </TouchableOpacity>

            <TouchableOpacity
              style={styles.menuItem}
              onPress={() => navigation.navigate("PengaduanSampahScreenAdmin")}
            >
              <FontAwesome5
                name="exclamation-triangle"
                size={40}
                color="#2C6B2F"
                style={styles.menuImage}
              />
              <Text style={styles.menuText}>Pengaduan Sampah</Text>
            </TouchableOpacity>
          </View>

          <View style={styles.chartContainer}>
            <Text style={styles.chartTitle}>Grafik Donasi Bulanan</Text>
            <LineChart
              data={data}
              width={width - 40} // Mengatur lebar grafik
              height={220} // Mengatur tinggi grafik
              chartConfig={{
                backgroundColor: "#000",
                backgroundGradientFrom: "#2C6B2F",
                backgroundGradientTo: "#000",
                decimalPlaces: 0, // Tidak ada angka desimal pada grafik
                color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                labelColor: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                style: {
                  borderRadius: 16,
                  marginBottom: 40,
                },
              }}
              style={styles.chartStyle}
            />
            <Text style={styles.chartTitlebawah}>Grafik Donasi Bulanan</Text>
          </View>
        </ScrollView>
      </ImageBackground>
      <BottomTabAdmin />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#2C6B2F", paddingTop: 20 },
  scrollContainer: {
    flexGrow: 1, // This ensures the ScrollView can expand to take up the remaining space
    paddingHorizontal: 10,
    backgroundColor: "#fff",
    justifyContent: "flex-start",
    // alignItems: "center",
    borderBottomLeftRadius: 30,
    borderTopStartRadius: 50,
    borderBottomRightRadius: 30,
    borderTopRightRadius: 50,
    paddingBottom: 10,
    marginTop: 170,
    marginBottom: 150,
    borderWidth: 1,
    borderColor: "#cdcdcd", // Reduce this padding for better scrolling
  },
  chartContainer: {
    paddingHorizontal: 20,
    marginVertical: 20,
    marginBottom: 20, // Reduced to avoid pushing the content down
  },
  profileContainer: {
    flexDirection: "row",
    alignItems: "flex-start",
    marginBottom: 20,
    paddingHorizontal: 20,
  },
  profileImage: {
    width: 50,
    height: 50,
    borderRadius: 50,
    marginRight: 10,
    marginTop: 30,
  },
  chartTitle: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 10,
  },
  chartTitlebawah: {
    fontSize: 18,
    fontWeight: "bold",
    marginBottom: 10,
  },
  chartStyle: {
    borderRadius: 16,
    marginBottom: 200,
  },
  header: {
    flex: 1,
    justifyContent: "flex-start",
    alignItems: "center",
    paddingHorizontal: 20,
    backgroundColor: "#fff",
    borderBottomLeftRadius: 30,
    borderTopStartRadius: 50,
    borderBottomRightRadius: 30,
    borderTopRightRadius: 50,
    paddingBottom: 50,
    marginBottom: 50,
    marginTop: 10,
  },
  date: {
    fontSize: 18,
    color: "#fff",
    paddingHorizontal: 20,
    marginBottom: 5,
    alignItems: "center",
  },
  greeting: {
    fontSize: 22,
    fontWeight: "bold",
    marginTop: 20,
    color: "#000",
    paddingHorizontal: 90,
    // alignItems: "center",
    // justifyContent: "center",
  },
  greetingnama: {
    fontSize: 22,
    fontWeight: "bold",
    marginTop: 30,
    marginLeft: -10,
    color: "#000",
    paddingHorizontal: 20,
    flexDirection: "column",
  },
  subtitle: {
    fontSize: 15,
    color: "#000",
    fontWeight: "500",
    paddingHorizontal: 70,
    marginBottom: -30,
    marginTop: 5,
    marginLeft: 20,
    // justifyContent: "center",
  },
  coinRow: {
    flexDirection: "column",
    justifyContent: "flex-start",
    alignItems: "center",
    paddingHorizontal: 20,
    marginTop: 0,
  },

  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",
    marginLeft: -5,
  },
  coinValueRow: { flexDirection: "row", alignItems: "center", marginTop: 0 },
  coinText: {
    fontSize: 30,
    fontWeight: "bold",
    color: "#333",
    textAlign: "left",
    marginLeft: -100,
    marginBottom: 10,
  },
  noCoinText: {
    fontSize: 12,
    color: "#aaa",
    marginTop: 0,
    marginBottom: -5,
    textAlign: "left",
    marginLeft: -100,
  },
  statsContainer: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginVertical: 0,
    alignContent: "space-between",
    padding: 0,
  },
  statBox: {
    backgroundColor: "#fff",
    padding: 15,
    borderRadius: 15,
    width: "30%",
    alignItems: "center",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 8,
    borderWidth: 0.5,
    justifyContent: "space-between",
    marginRight: 12,
    marginTop: 10,
  },
  statLabel: {
    fontSize: 12,
    justifyContent: "center",
    color: "black",
    alignItems: "center",
    fontWeight: "600",
  },
  statValue: {
    fontSize: 25,
    fontWeight: "bold",
    color: "#000",
  },
  historyButton: {
    position: "absolute",
    backgroundColor: "#2C6B2F",
    borderColor: "#000",
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderRadius: 20,
    top: -6,
    right: 10,
    marginTop: 20,
    alignItems: "center",
    justifyContent: "center",
    width: "110%",
    elevation: 1,
  },
  historyButtonText: {
    fontSize: 12,
    fontWeight: "bold",
    color: "#fff",
    textAlign: "center",
  },

  reportButton: {
    backgroundColor: "#fff",
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 20,
    // alignItems: "center",
    justifyContent: "center",
    borderWidth: 0.5,
    borderColor: "#000",
    width: "80%",
    marginTop: 15,
    paddingLeft: 5,
    padding: 15,
    elevation: 2,
    marginLeft: 40,
  },
  reportButtonText: {
    fontSize: 16,
    color: "#000",
    fontWeight: "bold",
    textAlign: "center",
    padding: 5,
  },
  menuImage: {
    width: 50,
    height: 50,
    marginLeft: 3,
    marginBottom: 5,
    marginTop: 10,
    justifyContent: "center",
  },
  menuContainer: {
    marginTop: 5,
    marginRight: 5,
    marginLeft: 12,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-evenly",
    paddingRight: 15,
  },
  menuItem: {
    width: "20%",

    alignItems: "center",
    marginVertical: 5,
    padding: 10,
    borderWidth: 0,
    borderColor: "#fff",
    borderRadius: 25,
    backgroundColor: "#fff",
    elevation: 2,
  },
  menuText: {
    fontSize: 12,
    fontWeight: "500",
    color: "#333",
    marginTop: 0,
    textAlign: "center",
  },
});

export default AdminScreen;