// ==========================================
// UPDATE MyClaimsTab.js untuk pass currentUserId
// ==========================================

const MyClaimsTab = ({ state, handlers }) => {
  const { myLostItems, myClaims, loading, user } = state; // ⭐ Ambil user dari state

  const lostItemsWithClaims = myLostItems.filter(
    (item) =>
      item.direct_claim_id &&
      item.direct_claim_status &&
      item.status !== "completed" &&
      item.direct_claim_status !== "completed"
  );

  const regularClaims = myClaims || [];

  const getStatusBadge = (status) => {
    const badges = {
      active: { color: "bg-blue-500", text: "🔍 Masih Hilang", emoji: "😢" },
      claimed: {
        color: "bg-yellow-500",
        text: "⏳ Menunggu Persetujuan Anda",
        emoji: "🤔",
      },
      found: { color: "bg-green-500", text: "✅ Ditemukan", emoji: "🎉" },
      completed: {
        color: "bg-purple-500",
        text: "✅ Selesai - Barang Diterima",
        emoji: "🎉",
      },
      pending: {
        color: "bg-yellow-500",
        text: "⏳ Menunggu Verifikasi",
        emoji: "⏳",
      },
      approved: { color: "bg-green-500", text: "✅ Disetujui", emoji: "✅" },
      rejected: { color: "bg-red-500", text: "❌ Ditolak", emoji: "❌" },
      waiting_owner: {
        color: "bg-orange-500",
        text: "⏳ Menunggu Anda",
        emoji: "👤",
      },
      verified: {
        color: "bg-green-600",
        text: "✅ Terverifikasi",
        emoji: "✅",
      },
    };
    return (
      badges[status] || {
        color: "bg-gray-500",
        text: status,
        emoji: "❓",
      }
    );
  };

  if (loading) {
    return (
      <div className="text-center py-12 text-slate-400">
        <div className="animate-spin text-4xl mb-4">⏳</div>
        <p>Memuat data klaim...</p>
      </div>
    );
  }

  return (
    <div className="space-y-8">
      {lostItemsWithClaims.length > 0 && (
        <div className="bg-slate-800/50 backdrop-blur-sm rounded-2xl border border-slate-700 p-6">
          <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-3">
            <span className="text-3xl">😢</span>
            Barang Hilang Saya
            <span className="bg-orange-500/20 text-orange-400 text-sm px-3 py-1 rounded-full border border-orange-500/30">
              {lostItemsWithClaims.length} item dengan klaim pending
            </span>
          </h3>
          <p className="text-slate-400 mb-6">
            Ada yang menemukan barang Anda! Silakan approve atau reject klaim
            mereka.
          </p>
          <div className="space-y-4">
            {lostItemsWithClaims.map((lostItem) => {
              const statusBadge = getStatusBadge(
                lostItem.direct_claim_status || lostItem.status
              );
              const isWaitingOwner =
                lostItem.direct_claim_status === "waiting_owner";
              const isVerified =
                lostItem.direct_claim_status === "verified" ||
                lostItem.status === "found";

              return (
                <div
                  key={lostItem.id}
                  className={`bg-slate-900/80 rounded-xl border ${
                    isWaitingOwner
                      ? "border-orange-500/50 shadow-lg shadow-orange-500/20"
                      : "border-slate-700"
                  } p-6 hover:shadow-xl transition-all`}
                >
                  <div className="flex justify-between items-start mb-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-3 mb-2">
                        <h4 className="text-xl font-bold text-white">
                          {lostItem.name}
                        </h4>
                        <span
                          className={`${statusBadge.color} text-white text-xs px-3 py-1 rounded-full font-medium`}
                        >
                          {statusBadge.emoji} {statusBadge.text}
                        </span>
                      </div>
                      <div className="space-y-1 text-sm text-slate-400">
                        <p>
                          <span className="font-medium">📦 Kategori:</span>{" "}
                          {lostItem.category}
                        </p>
                        {lostItem.color && (
                          <p>
                            <span className="font-medium">🎨 Warna:</span>{" "}
                            {lostItem.color}
                          </p>
                        )}
                        <p>
                          <span className="font-medium">📍 Lokasi Hilang:</span>{" "}
                          {lostItem.location}
                        </p>
                        <p>
                          <span className="font-medium">
                            📅 Tanggal Hilang:
                          </span>{" "}
                          {new Date(lostItem.date_lost).toLocaleDateString(
                            "id-ID"
                          )}
                        </p>
                        <p className="mt-2">
                          <span className="font-medium">📝 Deskripsi:</span>{" "}
                          {lostItem.description}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* ⭐ Display claim card with proper context */}
                  {lostItem.direct_claim && (
                    <div className="mt-4">
                      <ClaimCard
                        claim={{
                          ...lostItem.direct_claim,
                          lost_item_user_id: lostItem.user_id, // ⭐ Pass owner ID
                        }}
                        currentUserId={user?.id} // ⭐ Pass current user ID
                        onUserRespond={handlers.handleUserRespondClaim}
                      />
                    </div>
                  )}

                  {/* Fallback untuk direct claim tanpa detail */}
                  {!lostItem.direct_claim && isWaitingOwner && (
                    <div className="bg-orange-900/30 border border-orange-500/30 rounded-lg p-4 mt-4">
                      <p className="text-orange-300 font-semibold mb-3 flex items-center gap-2">
                        <span className="text-2xl">🔔</span>
                        Ada yang mengaku menemukan barang ini!
                      </p>
                      <p className="text-sm text-slate-300 mb-4">
                        Seseorang telah mengajukan klaim untuk barang ini.
                        Silakan putuskan apakah ini benar barang Anda.
                      </p>
                      <div className="flex gap-3">
                        <button
                          onClick={() =>
                            handlers.handleUserRespondClaim(
                              lostItem.direct_claim_id,
                              "approve"
                            )
                          }
                          className="flex-1 bg-gradient-to-r from-green-600 to-green-700 text-white px-4 py-3 rounded-lg font-semibold hover:from-green-700 hover:to-green-800 transition shadow-lg shadow-green-500/30"
                        >
                          ✅ Approve (Ini barang saya!)
                        </button>
                        <button
                          onClick={() =>
                            handlers.handleUserRespondClaim(
                              lostItem.direct_claim_id,
                              "reject"
                            )
                          }
                          className="flex-1 bg-gradient-to-r from-red-600 to-red-700 text-white px-4 py-3 rounded-lg font-semibold hover:from-red-700 hover:to-red-800 transition shadow-lg shadow-red-500/30"
                        >
                          ❌ Reject (Bukan barang saya)
                        </button>
                      </div>
                    </div>
                  )}

                  {isVerified && (
                    <div className="bg-green-900/30 border border-green-500/30 rounded-lg p-4 mt-4">
                      <p className="text-green-300 font-semibold mb-3 flex items-center gap-2">
                        <span className="text-2xl">✅</span>
                        Klaim Disetujui!
                      </p>
                      <p className="text-sm text-slate-300 mb-4">
                        Anda telah menyetujui bahwa penemu menemukan barang
                        Anda. Koordinasikan pengambilan barang, lalu konfirmasi
                        setelah menerima barang.
                      </p>
                      <button
                        onClick={() =>
                          handlers.handleUserCompleteCase(
                            lostItem.direct_claim_id
                          )
                        }
                        className="w-full bg-gradient-to-r from-purple-600 to-purple-700 text-white px-4 py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-purple-800 transition shadow-lg shadow-purple-500/30"
                      >
                        🎉 Konfirmasi: Saya Sudah Terima Barang
                      </button>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      )}

      {regularClaims.length > 0 && (
        <div className="bg-slate-800/50 backdrop-blur-sm rounded-2xl border border-slate-700 p-6">
          <h3 className="text-2xl font-bold text-white mb-4 flex items-center gap-3">
            <span className="text-3xl">🤝</span>
            Klaim Barang yang Saya Ajukan
            <span className="bg-blue-500/20 text-blue-400 text-sm px-3 py-1 rounded-full border border-blue-500/30">
              {regularClaims.length} klaim
            </span>
          </h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {regularClaims.map((claim) => (
              <ClaimCard
                key={claim.id}
                claim={{
                  ...claim,
                  user_id: claim.user_id, // Penemu
                  lost_item_user_id: claim.lost_item?.user_id, // Pemilik
                }}
                currentUserId={user?.id} // ⭐ Pass current user ID
              />
            ))}
          </div>
        </div>
      )}

      {lostItemsWithClaims.length === 0 && regularClaims.length === 0 && (
        <div className="text-center py-16 bg-slate-800/30 rounded-2xl border border-slate-700">
          <div className="text-6xl mb-4">🔭</div>
          <h3 className="text-xl font-bold text-white mb-2">Belum Ada Klaim</h3>
          <p className="text-slate-400">
            Anda belum memiliki klaim atau barang hilang dengan klaim pending.
          </p>
        </div>
      )}
    </div>
  );
};

window.MyClaimsTab = MyClaimsTab;