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

const StatusPengirimanAdmin = () => {
  const navigation = useNavigation();
  const [selectedButton, setSelectedButton] = useState("diproses"); // Default to 'diproses'
  const [selectedStatus, setSelectedStatus] = useState("diproses"); // Default to 'diproses'

  // Data barang
  const items = [
    {
      id: 1,
      name: "Tas Kertas",
      time: "10 April 2025 - 14:30",
      status: "diproses",
      imageUri: require("../../../assets/images/tas2.png"),
    },
    {
      id: 2,
      name: "Botol",
      time: "11 April 2025 - 15:00",
      status: "dikirim",
      imageUri: require("../../../assets/images/botol1.png"),
    },
    {
      id: 3,
      name: "Botol Anak",
      time: "12 April 2025 - 16:30",
      status: "diterima",
      imageUri: require("../../../assets/images/botol2.png"),
    },
  ];

  // Effect untuk men-set status saat pertama kali halaman dibuka
  useEffect(() => {
    setSelectedButton("diproses");
    setSelectedStatus("diproses");
  }, []);

  const handleButtonClick = (status) => {
    setSelectedStatus(status);
    setSelectedButton(status);
  };

  // Filter items berdasarkan selected status
  const filteredItems = items.filter((item) => item.status === selectedStatus);

  return (
    <View style={styles.container}>
      {/* Header */}
      <View style={styles.header}>
        <TouchableOpacity
          style={styles.backButton}
          onPress={() => navigation.goBack()}
        >
          <Ionicons name="arrow-back" size={24} color="#333" />
        </TouchableOpacity>
        <Text style={styles.title}>STATUS PENGIRIMAN</Text>
      </View>

      {/* Status Buttons */}
      <View style={styles.buttonRow}>
        <TouchableOpacity
          style={[
            styles.statusButton,
            selectedButton === "diproses" && styles.selectedButton,
          ]}
          onPress={() => handleButtonClick("diproses")}
        >
          <Ionicons
            name="sync"
            size={20}
            color={selectedButton === "diproses" ? "#fff" : "#000"}
          />
          <Text
            style={[
              styles.buttonText,
              selectedButton === "diproses" && { color: "#fff" },
            ]}
          >
            Diproses
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.statusButton,
            selectedButton === "dikirim" && styles.selectedButton,
          ]}
          onPress={() => handleButtonClick("dikirim")}
        >
          <Ionicons
            name="paper-plane"
            size={20}
            color={selectedButton === "dikirim" ? "#fff" : "#000"}
          />
          <Text
            style={[
              styles.buttonText,
              selectedButton === "dikirim" && { color: "#fff" },
            ]}
          >
            Dikirim
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.statusButton,
            selectedButton === "diterima" && styles.selectedButton,
          ]}
          onPress={() => handleButtonClick("diterima")}
        >
          <Ionicons
            name="checkmark"
            size={20}
            color={selectedButton === "diterima" ? "#fff" : "#000"}
          />
          <Text
            style={[
              styles.buttonText,
              selectedButton === "diterima" && { color: "#fff" },
            ]}
          >
            Diterima
          </Text>
        </TouchableOpacity>
      </View>

      {/* Filtered List of Items Based on Selected Status */}
      <ScrollView style={styles.itemList}>
        {filteredItems.length > 0 ? (
          filteredItems.map((item) => (
            <View key={item.id} style={styles.itemRow}>
              <Image source={item.imageUri} style={styles.itemImage} />
              <View style={styles.itemDetails}>
                <Text style={styles.itemName}>{item.name}</Text>
                <Text style={styles.itemTime}>{item.time}</Text>
              </View>
              <View style={styles.itemActions}>
                <View style={styles.coinButton}>
                  <Text style={styles.coinButtonText}>500 Koin</Text>
                </View>
                <TouchableOpacity
                  style={styles.detailButton}
                  onPress={() =>
                    navigation.navigate("DetailPengiriman", { item: item })
                  }
                >
                  <Text style={styles.detailButtonText}>Lihat Detail</Text>
                </TouchableOpacity>
              </View>
            </View>
          ))
        ) : (
          <Text style={styles.noItemsText}>
            Tidak ada barang dalam status ini.
          </Text>
        )}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#f9f9f9",
    padding: 20,
  },
  header: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 30,
  },
  backButton: {
    marginRight: 10,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  buttonRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginBottom: 5,
  },
  statusButton: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    borderWidth: 1,
    borderColor: "#333",
    paddingVertical: 10,
    paddingHorizontal: 15,
    borderRadius: 20,
    width: "30%",
    justifyContent: "center",
  },
  selectedButton: {
    backgroundColor: "#2D572C", // Green color for selected button
  },
  buttonText: {
    marginLeft: 5,
    fontSize: 14,
    color: "#000",
  },
  itemList: {
    marginTop: 20,
  },
  itemRow: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#fff",
    padding: 15,
    marginBottom: 15,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#ddd",
  },
  itemImage: {
    width: 60,
    height: 60,
    backgroundColor: "#fff",
    borderRadius: 5,
  },
  itemDetails: {
    flex: 1,
    marginLeft: 10,
  },
  itemName: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#333",
  },
  itemTime: {
    fontSize: 12,
    color: "#555",
    marginTop: 5,
  },
  itemActions: {
    alignItems: "flex-end",
    justifyContent: "center",
  },
  coinButton: {
    backgroundColor: "#2D572C",
    paddingVertical: 8,
    paddingHorizontal: 15,
    borderRadius: 5,
    marginBottom: 5,
  },
  coinButtonText: {
    fontSize: 12,
    color: "#fff",
  },
  detailButton: {
    backgroundColor: "#ddd",
    paddingVertical: 8,
    paddingHorizontal: 15,
    borderRadius: 25,
  },
  detailButtonText: {
    fontSize: 12,
    color: "#333",
  },
  noItemsText: {
    fontSize: 14,
    color: "#888",
    textAlign: "center",
    marginTop: 20,
  },
});

export default StatusPengirimanAdmin;