const PublicLostItemsTab = ({ state, handlers }) => {
  const { publicLostItems, user } = state;

  const getStatusDisplay = (lostItem) => {
    const statusMap = {
      active: { label: "Aktif", color: "bg-green-600 text-white" },
      claimed: { label: "Sedang Diklaim", color: "bg-yellow-600 text-white" },
      resolved: { label: "Selesai", color: "bg-blue-600 text-white" },
    };
    return (
      statusMap[lostItem.status] || {
        label: lostItem.status,
        color: "bg-gray-600 text-white",
      }
    );
  };

  const shouldShowFoundButton = (lostItem) => {
    return lostItem.user_id !== user.id && lostItem.status === "active";
  };

  const shouldShowClaimedInfo = (lostItem) => {
    return lostItem.status === "claimed" || lostItem.status === "resolved";
  };

  return (
    <div className="bg-slate-800 rounded-xl p-6 border border-slate-700">
      <h3 className="text-2xl font-bold text-white mb-4">
        😢 Barang Hilang (Dari Pengguna Lain)
      </h3>
      <p className="text-slate-400 mb-6">
        Jika Anda menemukan barang yang cocok, klik "Saya Menemukan!" untuk
        memberitahu pemiliknya
      </p>

      {publicLostItems.length === 0 ? (
        <div className="text-center py-12 text-slate-400">
          <p className="text-6xl mb-4">🔭</p>
          <p className="text-xl">Tidak ada barang hilang saat ini</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {publicLostItems.map((lostItem) => {
            const statusDisplay = getStatusDisplay(lostItem);
            const showFoundButton = shouldShowFoundButton(lostItem);
            const showClaimedInfo = shouldShowClaimedInfo(lostItem);

            return (
              <div
                key={lostItem.id}
                className={`bg-slate-900/50 rounded-lg p-5 border transition ${
                  lostItem.status === "resolved"
                    ? "border-blue-500/50 opacity-75"
                    : "border-slate-700 hover:border-blue-500"
                }`}
              >
                <div className="flex justify-between items-start mb-3">
                  <div>
                    <h4 className="font-bold text-white text-lg">
                      {lostItem.name}
                    </h4>
                    <p className="text-sm text-slate-400">
                      {lostItem.category}
                    </p>
                  </div>
                  <span
                    className={`text-xs px-2 py-1 rounded-full ${statusDisplay.color}`}
                  >
                    {statusDisplay.label}
                  </span>
                </div>

                <div className="space-y-2 mb-4 text-sm text-slate-300">
                  <p>
                    <strong>📍 Lokasi:</strong>{" "}
                    {lostItem.location || "Tidak disebutkan"}
                  </p>
                  <p>
                    <strong>🎨 Warna:</strong>{" "}
                    {lostItem.color || "Tidak disebutkan"}
                  </p>
                  <p>
                    <strong>📅 Tanggal Hilang:</strong>{" "}
                    {new Date(lostItem.date_lost).toLocaleDateString("id-ID")}
                  </p>
                  <p>
                    <strong>📝 Deskripsi:</strong> {lostItem.description}
                  </p>
                </div>

                {/* PERBAIKAN: Ubah dari handleOpenDirectClaimModal ke handleOpenFoundOption */}
                {showFoundButton && (
                  <button
                    onClick={() => handlers.handleOpenFoundOption(lostItem)}
                    className="w-full bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white px-4 py-3 rounded-lg font-semibold transition shadow-lg"
                  >
                    🎉 Saya Menemukan Barang Ini!
                  </button>
                )}

                {lostItem.status === "claimed" && (
                  <div className="bg-yellow-900/30 border border-yellow-700/50 rounded-lg p-3 text-center">
                    <p className="text-yellow-400 text-sm">
                      ⏳ Sedang menunggu konfirmasi pemilik
                    </p>
                  </div>
                )}

                {lostItem.status === "resolved" && (
                  <div className="bg-blue-900/30 border border-blue-700/50 rounded-lg p-3 text-center">
                    <p className="text-blue-400 text-sm font-semibold">
                      ✅ Barang sudah dikembalikan ke pemilik
                    </p>
                  </div>
                )}

                {lostItem.user_id === user.id && (
                  <div className="bg-purple-900/30 border border-purple-700/50 rounded-lg p-3 text-center">
                    <p className="text-purple-400 text-sm">
                      📋 Ini laporan kehilangan Anda
                    </p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};