const LostItemsTab = () => {
  // State untuk modal
  const [showOptionModal, setShowOptionModal] = React.useState(false);
  const [showFormModal, setShowFormModal] = React.useState(false);
  const [selectedLostItem, setSelectedLostItem] = React.useState(null);
  const [selectedMethod, setSelectedMethod] = React.useState(null); // 'direct' or 'manager'

  // 1. Handler saat tombol "Saya Menemukan" ditekan
  const handleSayaMenemukanClick = (lostItem) => {
    setSelectedLostItem(lostItem);
    setShowOptionModal(true); // Tampilkan Modal Opsi
  };

  // 2. Handler saat Opsi dipilih di Modal
  const handleOptionSelect = (method) => {
    // method akan bernilai "direct" atau "manager"
    console.log("Metode dipilih:", method);

    // 1. Simpan metode pilihan user
    setSelectedMethod(method);

    // 2. Tutup modal opsi
    setShowOptionModal(false);

    // 3. Langsung buka modal Form Pengisian Data (Form Penemu)
    // Form ini akan sama untuk kedua opsi, tapi cara handling submit-nya nanti beda
    setShowFormModal(true);
  };

  // 3. Handler Submit Form Barang Ditemukan
  const handleFormSubmit = async (formData) => {
    try {
      // Siapkan payload data
      const payload = {
        ...formData, // Data dari form (foto, lokasi, dll)
        lost_item_id: selectedLostItem.id, // ID barang hilang yang diklaim

        // LOGIKA KUNCI:
        // Jika "direct", set flag is_direct_to_owner = true.
        // Backend harus membaca flag ini untuk bypass status manager verification.
        is_direct_to_owner: selectedMethod === "direct",
      };

      console.log("Submitting payload:", payload);

      // Kirim ke endpoint (Pastikan backend Anda menangani field is_direct_to_owner)
      await ApiUtils.post("/api/items/found-linked", payload);

      // Berikan feedback yang sesuai ke user
      if (selectedMethod === "direct") {
        alert("Berhasil! Laporan dikirim LANGSUNG ke pemilik untuk approval.");
      } else {
        alert("Berhasil! Laporan dikirim ke MANAGER untuk verifikasi.");
      }

      // Reset dan tutup modal
      setShowFormModal(false);
      // Refresh data list jika perlu
      // loadLostItems();
    } catch (error) {
      console.error("Error submitting found report:", error);
      alert("Gagal mengirim laporan: " + error.message);
    }
  };

  return (
    <div>
      {/* List Barang Hilang */}
      {lostItems.map((item) => (
        <div key={item.id} className="card">
          <h3>{item.name}</h3>
          <button
            onClick={() => handleSayaMenemukanClick(item)}
            className="bg-blue-600 text-white px-4 py-2 rounded"
          >
            ✋ Saya Menemukan
          </button>
        </div>
      ))}

      {/* Modal Pilihan Opsi */}
      <FoundOptionModal
        isOpen={showFoundOptionModal}
        onClose={() => setShowFoundOptionModal(false)}
        onSelectOption={handleSelectFoundOption}
      />

      <ReportFoundModal
        isOpen={state.showReportFoundModal}
        onClose={() => state.setShowReportFoundModal(false)}
        onSubmit={handlers.submitReportFound} // Gunakan handler yang baru
        // Opsional: Kirim data barang hilang untuk pre-fill deskripsi otomatis
        linkedLostItem={selectedLostItemForFound}
      />

      {/* Modal Form Pengisian (Gunakan komponen CreateItemModal yang sudah ada tapi dimodifikasi prop onSubmitnya) */}
      <CreateFoundItemModal
        isOpen={showFormModal}
        onClose={() => setShowFormModal(false)}
        onSubmit={handleFormSubmit}
        targetItemName={selectedLostItem?.name}
      />
    </div>
  );
};