const EditLostItemModal = ({ state, handlers }) => {
  const {
    selectedLostItemToEdit,
    showEditLostItemModal,
    setShowEditLostItemModal,
    categories,
    loading,
  } = state;
  const { handleUpdateLostItem } = handlers;

  // ✅ DEBUG: Log data saat modal dibuka
  React.useEffect(() => {
    if (selectedLostItemToEdit) {
      console.log("📋 Selected Lost Item Data:", selectedLostItemToEdit);
      console.log("🏷️ Category ID:", selectedLostItemToEdit.category_id);
      console.log("📦 Available Categories:", categories);
    }
  }, [selectedLostItemToEdit, categories]);

  if (!showEditLostItemModal || !selectedLostItemToEdit) return null;

  return (
    <Modal
      isOpen={showEditLostItemModal}
      onClose={() => setShowEditLostItemModal(false)}
      title="✏️ Edit Laporan Barang Hilang"
      size="large"
    >
      <form onSubmit={handleUpdateLostItem} className="space-y-6">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              Nama Barang <span className="text-red-500">*</span>
            </label>
            <input
              type="text"
              name="name"
              defaultValue={selectedLostItemToEdit.name}
              required
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Contoh: HP Samsung"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              Kategori <span className="text-red-500">*</span>
            </label>
            {/* ✅ PERBAIKAN: Gunakan category_id, bukan category */}
            <select
              name="category_id"
              defaultValue={selectedLostItemToEdit.category_id || ""}
              required
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
              onChange={(e) => {
                console.log("🔄 Category changed to:", e.target.value);
              }}
            >
              <option value="">Pilih Kategori</option>
              {categories &&
                categories.map((cat) => (
                  <option key={cat.id} value={cat.id}>
                    {cat.name}
                  </option>
                ))}
            </select>
            {/* ✅ DEBUGGING: Tampilkan nilai saat ini */}
            <small className="text-slate-400 text-xs mt-1 block">
              Current: {selectedLostItemToEdit.category} (ID:{" "}
              {selectedLostItemToEdit.category_id})
            </small>
          </div>

          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              Warna
            </label>
            <input
              type="text"
              name="color"
              defaultValue={selectedLostItemToEdit.color || ""}
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Contoh: Hitam, Biru"
            />
          </div>

          <div>
            <label className="block text-slate-300 mb-2 font-semibold">
              Tanggal Hilang <span className="text-red-500">*</span>
            </label>
            <input
              type="date"
              name="date_lost"
              defaultValue={selectedLostItemToEdit.date_lost?.split("T")[0]}
              required
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            />
          </div>

          <div className="col-span-2">
            <label className="block text-slate-300 mb-2 font-semibold">
              Lokasi Hilang
            </label>
            <input
              type="text"
              name="location"
              defaultValue={selectedLostItemToEdit.location || ""}
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Contoh: Perpustakaan Lantai 2"
            />
          </div>

          <div className="col-span-2">
            <label className="block text-slate-300 mb-2 font-semibold">
              Deskripsi <span className="text-red-500">*</span>
            </label>
            <textarea
              name="description"
              defaultValue={selectedLostItemToEdit.description}
              required
              rows="4"
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Jelaskan ciri-ciri barang yang hilang..."
            />
          </div>

          <div className="col-span-2">
            <label className="block text-slate-300 mb-2 font-semibold">
              Status <span className="text-red-500">*</span>
            </label>
            <select
              name="status"
              defaultValue={selectedLostItemToEdit.status}
              required
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white focus:border-blue-500 focus:outline-none"
            >
              <option value="active">Active</option>
              <option value="pending_verification">Pending Verification</option>
              <option value="claimed">Claimed</option>
              <option value="completed">Completed</option>
              <option value="closed">Closed</option>
            </select>
          </div>

          <div className="col-span-2">
            <label className="block text-slate-300 mb-2 font-semibold">
              Alasan Update
            </label>
            <textarea
              name="reason"
              rows="2"
              className="w-full px-4 py-2 bg-slate-700 border-2 border-slate-600 rounded-xl text-white placeholder-slate-400 focus:border-blue-500 focus:outline-none"
              placeholder="Alasan melakukan update (opsional)"
            />
          </div>
        </div>

        <div className="flex gap-3 justify-end pt-4 border-t border-slate-700">
          <button
            type="button"
            onClick={() => setShowEditLostItemModal(false)}
            className="px-6 py-2 bg-slate-700 text-white rounded-lg hover:bg-slate-600 transition"
            disabled={loading}
          >
            Batal
          </button>
          <button
            type="submit"
            className="px-6 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg hover:from-blue-700 hover:to-blue-800 transition shadow-lg disabled:opacity-50"
            disabled={loading}
          >
            {loading ? "Memproses..." : "💾 Simpan"}
          </button>
        </div>
      </form>
    </Modal>
  );
};