import React, { useState } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  TouchableOpacity,
  Linking,
} from "react-native";
import { Ionicons } from "@expo/vector-icons"; // Import Ionicons untuk ikon panah

export default function DetailPengirimanAdmin({ route, navigation }) {
  const { item } = route.params; // Mendapatkan data item dari navigation params
  const [status, setStatus] = useState(item.status); // Menentukan status awal sesuai item

  // Fungsi untuk menangani perubahan status
  const handleUpdateStatus = (newStatus) => {
    setStatus(newStatus); // Mengubah status pengiriman
  };

  // Timeline status pengiriman
  const statusTimeline = {
    diproses: {
      title: "Diproses",
      time: "23 Januari 2025, 15:12 WIB",
    },
    dikirim: {
      title: "Dikirim",
      time: "24 Januari 2025, 10:00 WIB",
    },
    diterima: {
      title: "Diterima",
      time: "25 Januari 2025, 13:00 WIB",
    },
    selesai: {
      title: "Selesai",
      time: "26 Januari 2025, 17:00 WIB",
    },
  };

  // Fungsi untuk menghubungi penerima via WhatsApp
  const handleContactRecipient = () => {
    const phoneNumber = "628123456789"; // Ganti dengan nomor penerima yang terdaftar
    const message = "Halo, ada update tentang pengiriman barang Anda."; // Pesan default yang ingin dikirim

    const url = `whatsapp://send?phone=${phoneNumber}&text=${encodeURIComponent(
      message
    )}`;

    // Mengecek apakah WhatsApp dapat dibuka
    Linking.openURL(url).catch((err) => {
      console.error("Error opening WhatsApp:", err);
    });
  };

  const currentItem = {
    ...item,
    statusDetails:
      status === "diproses"
        ? "Barang sedang diproses oleh tim Dinas Lingkungan Hidup."
        : status === "dikirim"
        ? "Barang telah dikirimkan kepada penerima."
        : status === "diterima"
        ? "Barang telah diterima oleh penerima."
        : "Pengiriman selesai.",
    estimatedDate:
      status === "diterima"
        ? "Pengiriman selesai, tidak ada tanggal estimasi lebih lanjut."
        : "Diperkirakan tiba pada 30 Januari 2025.",
  };

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

      {/* Hubungi Penerima Button */}
      <TouchableOpacity
        style={styles.contactButton}
        onPress={handleContactRecipient}
      >
        <Text style={styles.contactText}>Hubungi Penerima</Text>
      </TouchableOpacity>

      {/* Image */}
      <Image source={currentItem.imageUri} style={styles.image} />

      {/* Product Details */}
      <View style={styles.productInfo}>
        <Text style={styles.productName}>{currentItem.name}</Text>
        <Text style={styles.productPoints}>{currentItem.points}</Text>
      </View>

      {/* Foto Profil Penerima */}
      <View style={styles.recipientInfo}></View>

      {/* Informasi Profil Penerima */}
      <View style={styles.profileInfo}>
        <Text style={styles.profileText}>
          Alamat: Jl. Sudirman No.5, Bandung
        </Text>
        <Text style={styles.profileText}>Email: siti@example.com</Text>
        <Text style={styles.profileText}>No. Telepon: 082123456789</Text>
      </View>

      {/* Status Progress */}
      <View style={styles.statusContainer}>
        <Text style={styles.statusTitle}>Proses Pengiriman</Text>
        <View style={styles.statusTimeline}>
          {Object.keys(statusTimeline).map((step, index) => (
            <View
              key={index}
              style={status === step ? styles.activeStep : styles.step}
            >
              <Text style={styles.stepText}>{statusTimeline[step].title}</Text>
              <Text style={styles.time}>{statusTimeline[step].time}</Text>
            </View>
          ))}
        </View>
      </View>

      {/* Status Detail */}
      <View style={styles.statusDetail}>
        <Text style={styles.statusDetails}>{currentItem.statusDetails}</Text>
      </View>

      {/* Estimated Delivery */}
      <View style={styles.estimatedDelivery}>
        <Text style={styles.estimatedText}>{currentItem.estimatedDate}</Text>
      </View>

      {/* Shipping Information */}
      <View style={styles.shippingInfo}>
        <Text style={styles.shippingDetails}>
          {currentItem.shippingAddress}
        </Text>
        <Text style={styles.shippingTitle}>Jasa Pengiriman</Text>
        <Text style={styles.shippingDetails}>JNE</Text>
        <Text style={styles.shippingTitle}>No Resi</Text>
        <Text style={styles.shippingDetails}>5679032190775</Text>
      </View>

      {/* Buttons to update the status */}
      {status === "diproses" && (
        <TouchableOpacity
          style={styles.button}
          onPress={() => handleUpdateStatus("dikirim")}
        >
          <Text style={styles.buttonText}>UPDATE STATUS: DIKIRIM</Text>
        </TouchableOpacity>
      )}

      {status === "diterima" && (
        <TouchableOpacity
          style={styles.button}
          onPress={() => handleUpdateStatus("selesai")}
        >
          <Text style={styles.buttonText}>UPDATE STATUS: SELESAI</Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: "#fff",
  },
  header: {
    marginTop: 40,
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 30,
  },
  backButton: {
    marginRight: 10,
  },
  title: {
    fontSize: 22,
    fontWeight: "bold",
    color: "#333",
  },
  contactButton: {
    backgroundColor: "#4CAF50",
    padding: 10,
    borderRadius: 5,
    marginBottom: 20,
    alignItems: "center",
    borderRadius: 20,
    marginLeft: 120,
    marginRight: 120,
  },
  contactText: {
    color: "#fff",
    fontSize: 14,
  },
  image: {
    width: 100,
    height: 100,
    alignSelf: "center",
    marginBottom: 16,
  },
  productInfo: {
    alignItems: "center",
    marginBottom: 16,
  },
  productName: {
    fontSize: 18,
    fontWeight: "bold",
    alignItems: "flex-start",
  },
  productPoints: {
    fontSize: 14,
    color: "#777",
  },
  recipientInfo: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 16,
    justifyContent: "center",
  },
  recipientImage: {
    width: 50,
    height: 50,
    borderRadius: 25,
    marginRight: 10,
  },
  recipientName: {
    fontSize: 16,
    fontWeight: "bold",
  },
  profileInfo: {
    marginBottom: 10,
    justifyContent: "flex-start",
  },
  profileText: {
    fontSize: 14,
    color: "#777",
    alignItems: "center",
    alignContent: "center",
    justifyContent: "center",
  },
  statusContainer: {
    marginBottom: 16,
  },
  statusTitle: {
    fontSize: 16,
    fontWeight: "bold",
    marginBottom: 8,
  },
  statusTimeline: {
    flexDirection: "column",
    alignItems: "flex-start",
  },
  step: {
    marginBottom: 12,
  },
  activeStep: {
    marginBottom: 12,
    borderLeftWidth: 4,
    borderColor: "#4CAF50",
    paddingLeft: 12,
  },
  stepText: {
    fontSize: 14,
    fontWeight: "bold",
  },
  time: {
    fontSize: 12,
    color: "#777",
  },
  statusDetail: {
    marginBottom: 16,
  },
  statusDetails: {
    fontSize: 14,
    color: "#777",
  },
  estimatedDelivery: {
    marginBottom: 16,
    alignItems: "center",
  },
  estimatedText: {
    fontSize: 14,
    fontStyle: "italic",
  },
  shippingInfo: {
    marginBottom: 10,
  },
  shippingTitle: {
    fontSize: 14,
    fontWeight: "bold",
  },
  shippingDetails: {
    fontSize: 14,
    marginBottom: 8,
  },
  button: {
    marginTop: 20,
    backgroundColor: "#2f4f2f",
    padding: 15,
    borderRadius: 10,
    alignItems: "center",
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
});