import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  ScrollView,
  Linking,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";

const tpsData = [
  {
    nama: "TPS SENGKUT",
    kecamatan: "BERBEK",
    alamat: "Desa Werungotok, Kec. Nganjuk",
    jenis: "Depo Kecil",
    luas: "1,5 x 1,5",
    volume: "3.375 m3",
    latitude: -7.6141,
    longitude: 111.5177,
  },
  {
    nama: "TPS NGRONGGOT",
    kecamatan: "BERBEK",
    alamat: "Desa Werungotok, Kec. Nganjuk",
    jenis: "Depo Kecil",
    luas: "1,5 x 1,5",
    volume: "3.375 m3",
  },

  {
    nama: "TPS 3R MASTRIP",
    kecamatan: "NGANJUK",
    alamat: "Desa Mangundikaran, Kec. Nganjuk",
    jenis: "TPS 3R",
    luas: "2 x 2",
    volume: "5 m3",
    latitude: -6.6,
    longitude: 106.8,
  },
  {
    nama: "TPS 3R KARTOHARJO",
    kecamatan: "NGANJUK",
    alamat: "Desa Kartoharjo, Kec. Nganjuk",
    jenis: "TPS 3R",
    luas: "2 x 2",
    volume: "5 m3",
    latitude: -7.25,
    longitude: 112.75,
  },
  {
    nama: "TPS 3R KSM GANUNGKIDUL",
    kecamatan: "NGANJUK",
    alamat: "Desa Ganungkidul, Kec. Nganjuk",
    jenis: "TPS 3R KSM",
    luas: "3 x 3",
    volume: "7.5 m3",
    latitude: -6.175,
    longitude: 106.8272,
  },
  {
    nama: "TPS 3R KSM PAYAMAN",
    kecamatan: "NGANJUK",
    alamat: "Desa Payaman, Kec. Nganjuk",
    jenis: "TPS 3R KSM",
    luas: "3 x 3",
    volume: "7.5 m3",
    latitude: -6.175,
    longitude: 106.8272,
  },
  {
    nama: "TPS 3R KSM JATIREJO",
    kecamatan: "NGANJUK",
    alamat: "Desa Jatirejo, Kec. Nganjuk",
    jenis: "TPS 3R KSM",
    luas: "3 x 3",
    volume: "7.5 m3",
    latitude: -6.175,
    longitude: 106.8272,
  },
];

const DaftarTPS = () => {
  const navigation = useNavigation();
  const [search, setSearch] = useState("");
  const [activeCategory, setActiveCategory] = useState("TPS");

  const filteredTPS = tpsData.filter(
    (tps) =>
      tps.nama.toLowerCase().includes(search.toLowerCase()) &&
      (activeCategory === "TPS" || tps.jenis === activeCategory)
  );

  const openInMaps = (latitude, longitude) => {
    const url = `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`;
    Linking.openURL(url);
  };

  const handleEdit = (tps) => {
    console.log("Edit TPS: ", tps); // Implement the edit functionality here
    // You can navigate to another screen for editing if needed
  };

  const handleDelete = (id) => {
    console.log("Delete TPS with ID: ", id); // Implement the delete functionality here
    // Handle the deletion logic, e.g., updating state or making an API call
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.navigate("Home")}
        >
          <Ionicons name="arrow-back" size={28} color="#000" />
        </TouchableOpacity>
        <Text style={styles.title}>DAFTAR TPS DI NGANJUK</Text>
      </View>

      {/* Button for categories */}
      <View style={styles.categoryButtonsContainer}>
        <TouchableOpacity
          style={[
            styles.categoryButton,
            activeCategory === "TPS" && styles.activeButton,
          ]}
          onPress={() => setActiveCategory("TPS")}
        >
          <Text
            style={[
              styles.buttonTexts,
              activeCategory === "TPS" && styles.activeButtonText,
            ]}
          >
            TPS
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.categoryButton,
            activeCategory === "TPS 3R" && styles.activeButton,
          ]}
          onPress={() => setActiveCategory("TPS 3R")}
        >
          <Text
            style={[
              styles.buttonTexts,
              activeCategory === "TPS 3R" && styles.activeButtonText,
            ]}
          >
            TPS 3R
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[
            styles.categoryButton,
            activeCategory === "TPS 3R KSM" && styles.activeButton,
          ]}
          onPress={() => setActiveCategory("TPS 3R KSM")}
        >
          <Text
            style={[
              styles.buttonTexts,
              activeCategory === "TPS 3R KSM" && styles.activeButtonText,
            ]}
          >
            TPS 3R KSM
          </Text>
        </TouchableOpacity>
      </View>

      <View style={styles.searchContainer}>
        <TextInput
          placeholder="Cari Lokasi"
          style={styles.input}
          value={search}
          onChangeText={setSearch}
        />
        <TouchableOpacity style={styles.searchButton}>
          <Ionicons name="search" size={20} />
        </TouchableOpacity>
      </View>

      <ScrollView>
        {filteredTPS.map((tps, index) => (
          <View key={index} style={styles.card}>
            <View style={styles.cardHeader}>
              <View style={{ flex: 1 }}>
                <Text style={styles.label}>LUAS TPS</Text>
                <Text style={styles.value}>{tps.luas}</Text>
              </View>
              <View style={{ flex: 2 }}>
                <Text style={styles.tpsName}>{tps.nama}</Text>
                <Text style={styles.kecamatan}>KECAMATAN {tps.kecamatan}</Text>
              </View>
              <View style={{ flex: 1, alignItems: "flex-end" }}>
                <Text style={styles.labelSmall}>VOLUME MAKSIMAL</Text>
                <Text style={styles.volume}>{tps.volume}</Text>
              </View>
            </View>

            <View style={styles.cardContent}>
              <View style={styles.infoRow}>
                <Ionicons name="location-outline" size={16} />
                <Text style={styles.infoText}>Alamat</Text>
                <TouchableOpacity
                  style={styles.lokasiButton}
                  onPress={() => openInMaps(tps.latitude, tps.longitude)}
                >
                  <Text style={{ fontWeight: "bold" }}>LOKASI</Text>
                </TouchableOpacity>
              </View>
              <Text style={styles.subInfo}>{tps.alamat}</Text>

              <View style={[styles.infoRow, { marginTop: 8 }]}>
                <Ionicons name="trash-outline" size={16} />
                <Text style={styles.infoText}>Jenis</Text>
              </View>
              <Text style={styles.subInfo}>{tps.jenis}</Text>
            </View>

            {/* Edit and Delete Buttons */}
            <View style={styles.actionButtons}>
              <TouchableOpacity
                style={styles.editButton}
                onPress={() => handleEdit(tps)} // Pass the tps object here
              >
                <Text style={styles.buttonText}>Edit</Text>
              </TouchableOpacity>
              <TouchableOpacity
                style={styles.deleteButton}
                onPress={() => handleDelete(tps.id)} // You can pass the id if available
              >
                <Text style={styles.buttonText}>Hapus</Text>
              </TouchableOpacity>
            </View>
          </View>
        ))}
      </ScrollView>

      {/* Tambah TPS Button */}
      <TouchableOpacity
        style={styles.tambahButton}
        onPress={() => navigation.navigate("TambahTPS")}
      >
        <Text style={styles.tambahButtonText}>TAMBAH TPS</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 16,
    marginBottom: 0,
    marginTop: -40,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: 10,
    marginTop: 70,
  },
  backButton: { marginBottom: 10 },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#000",
    textAlign: "left",
    marginBottom: 12,
    marginLeft: 20,
    marginRight: 230,
  },
  categoryButtonsContainer: {
    flexDirection: "row",
    marginBottom: 15,
  },
  categoryButton: {
    flex: 1,
    paddingVertical: 10,
    marginRight: 8,
    borderRadius: 15,
    backgroundColor: "white",
    borderWidth: 1,
    borderColor: "#2D572C",
    alignItems: "center",
    justifyContent: "center",
  },
  activeButton: {
    backgroundColor: "#2D572C",
  },
  buttonText: {
    color: "#2D572C",
    fontWeight: "bold",
  },
  actionButtons: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 10,
    marginTop: 12,
  },
  editButton: {
    backgroundColor: "#4CAF50",
    paddingVertical: 8,
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  deleteButton: {
    backgroundColor: "#F44336",
    paddingVertical: 8,
    paddingHorizontal: 20,
    borderRadius: 8,
  },
  buttonText: {
    color: "#fff",
    fontWeight: "bold",
  },
  buttonTexts: {
    color: "#000",
    fontWeight: "bold",
  },
  tambahButton: {
    backgroundColor: "#f0F0F0",
    paddingVertical: 12,
    borderRadius: 25,
    alignItems: "center",
    justifyContent: "center",
    marginTop: 20,
    marginHorizontal: 50,
    borderWidth: 0.5,
  },
  tambahButtonText: {
    color: "#000",
    fontSize: 18,
    fontWeight: "bold",
  },
  activeButtonText: {
    color: "white", // Change text color to white when the button is active
  },
  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 10,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#999",
    borderRadius: 10,
    padding: 10,
    marginBottom: 10,
  },
  searchButton: {
    backgroundColor: "#E0E0E0",
    padding: 10,
    marginLeft: 8,
    borderRadius: 8,
  },
  card: {
    borderRadius: 12,
    marginBottom: 20,
    borderColor: "#000",
    borderWidth: 1,
    overflow: "hidden",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 5,
    backgroundColor: "#fff",
    elevation: 3,
  },
  cardHeader: {
    backgroundColor: "#2D572C",
    padding: 10,
    flexDirection: "row",
    alignItems: "center",
  },
  label: { color: "white", fontSize: 11 },
  value: { color: "white", fontWeight: "bold" },
  tpsName: {
    color: "white",
    fontSize: 16,
    fontWeight: "bold",
    justifyContent: "center",
    marginLeft: 40,
  },
  kecamatan: { color: "white", fontSize: 12, marginLeft: 40 },
  labelSmall: { fontSize: 10, color: "white", textAlign: "right" },
  volume: { fontSize: 14, color: "white", fontWeight: "bold" },
  cardContent: { padding: 12 },
  infoRow: { flexDirection: "row", alignItems: "center", gap: 4 },
  infoText: { fontWeight: "bold", marginLeft: 8 },
  subInfo: { marginLeft: 30, fontSize: 13 },
  lokasiButton: {
    backgroundColor: "#F0F0F0",
    paddingVertical: 8,
    paddingHorizontal: 14,
    borderRadius: 8,
    shadowColor: "#000",
    shadowOpacity: 0.1,
    elevation: 2,
    marginLeft: 220,
    borderWidth: 1,
  },
});

export default DaftarTPS;