// assets/js/pages/manager/ManagerTabs.js - FIXED

const ItemsTabManager = ({ state, handlers }) => {
  const { showExpired, setShowExpired, items, expiredItems, stats } = state;
  const {
    handleViewDetail,
    handleManualClaimClick,
    handleEditItemClick,
    handleDeleteItem,
  } = handlers;

  return (
    <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-xl border border-slate-700">
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-xl font-semibold text-white">
          {showExpired ? "📦 Barang Expired" : "📦 Daftar Barang Ditemukan"}
        </h2>

        <div className="flex gap-3">
          {/* ✅ TOMBOL BARU */}
          <button
            onClick={() => state.setShowReportFoundModal(true)}
            className="px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white rounded-lg font-semibold hover:from-green-700 hover:to-green-800 transition shadow-lg"
          >
            📝 Lapor Barang Ditemukan (Offline)
          </button>

          <button
            onClick={() => setShowExpired(false)}
            className={`px-4 py-2 rounded-lg font-semibold transition ${
              !showExpired
                ? "bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-lg"
                : "bg-slate-700 text-slate-300 hover:bg-slate-600"
            }`}
          >
            📦 Aktif ({items.length})
          </button>

          <button
            onClick={() => setShowExpired(true)}
            className={`px-4 py-2 rounded-lg font-semibold transition ${
              showExpired
                ? "bg-gradient-to-r from-red-600 to-red-700 text-white shadow-lg"
                : "bg-slate-700 text-slate-300 hover:bg-slate-600"
            }`}
          >
            ⚠️ Expired ({stats.expired})
          </button>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {(showExpired ? expiredItems : items).map((item) => (
          <ItemCard
            key={item.id}
            item={item}
            onViewDetail={handleViewDetail}
            onManualClaim={handleManualClaimClick}
            // ✅ TAMBAHKAN 3 PROPS INI:
            isManager={true} // Agar logika di ItemCard jalan
            onEdit={handleEditItemClick} // Fungsi ketika tombol diklik
            onDelete={handleDeleteItem} // (Opsional) Jika manager boleh hapus
            showActions={true}
          />
        ))}
      </div>

      {(showExpired ? expiredItems : items).length === 0 && (
        <div className="text-center py-12 text-slate-400">
          <div className="text-6xl mb-4">{showExpired ? "⚠️" : "📦"}</div>
          <p>{showExpired ? "Belum ada barang expired" : "Belum ada barang"}</p>
        </div>
      )}
    </div>
  );
};

const ClaimsTabManager = ({ state, handlers }) => {
  const { claims } = state;
  const { handleVerifyClaim, handleReopenCase, handleCancelApproval } =
    handlers;

  return (
    <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-6 shadow-xl border border-slate-700">
      <h2 className="text-xl font-semibold mb-6 text-white">Daftar Klaim</h2>
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {claims.map((claim) => (
          <ClaimCard
            key={claim.id}
            claim={claim}
            onVerify={handleVerifyClaim} // Ini mentrigger modal verify/close
            onReopen={handleReopenCase}
            onCancelApproval={handleCancelApproval} // ✅ Pass props baru
          />
        ))}
      </div>
      {claims.length === 0 && (
        <div className="text-center py-12 text-slate-400">
          <div className="text-6xl mb-4">🤝</div>
          <p>Belum ada klaim</p>
        </div>
      )}
    </div>
  );
};

window.ItemsTabManager = ItemsTabManager;
window.ClaimsTabManager = ClaimsTabManager;