[{"_1":2,"_146":-5,"_147":-5},"loaderData",{"_3":4,"_10":11},"root",{"_5":-5,"_6":7,"_8":9},"user","appId","cm7twdhs6009l11ml868xhxld","wsEndpoint","https://dev.fun","routes/p.$appId",{"_12":13,"_144":-5,"_136":-7,"_145":17},"appDetail",{"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":27,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_5":45,"_56":57,"_58":59,"_60":42,"_61":62,"_63":59,"_64":42,"_65":42,"_66":67,"_68":59,"_69":59,"_70":17,"_71":17,"_72":19,"_73":74,"_75":76,"_77":78,"_79":80,"_102":-5,"_103":17,"_104":105,"_136":32,"_137":138,"_139":17,"_140":141},"id","79110023cd703aec27c2","isMyApp",false,"projectId","3HfLqhtF5hR5dyBXh6BMtRaTm9qzStvEGuMa8Gx6pump","name","skillsurge","description","Connect with knowledge-hungry peers and share your expertise in this electrifying skills marketplace! SkillSurge matches you with the perfect learning partners based on what you know and what you're dying to learn, all while earning $SURGE tokens that power your learning journey.","brief","Trade skills, earn tokens, and level up your knowledge in this peer-powered learning revolution!","isLive",true,"isPublic","tags",[],"cover","https://cdn.dev.fun/snapshot/79110023cd703aec27c2/78186_051f656c.webp","cdnUrl","https://cdn.dev.fun/app/79110023cd703aec27c2/78186","createdAt",["D",1749479259286],"updatedAt",["D",1749552474103],"lastCommitId",["B","78186"],"tier",1,"credits",-3,{"_14":46,"_47":48,"_49":-5,"_50":48,"_51":52,"_53":-5,"_54":55},"6d1f8bd9-ab3b-41d7-99e7-bf86eda457c6","uniqueId","8ppGxY64YKWhTmn6if9rYsYiGpWUBeiYCRK5dsjRpn4R","username","solanaWallet","displayName","8pp...n4R","bio","avatar","/avatar.svg","commitCount",4,"forkCount",0,"likeCount","runsCount",64,"downvoteCount","upvoteCount","upvoteRate","commentCount",2,"reportCount","visitorCount","isArchived","isRenamed","contractAddress","code","import { useState, useEffect, useCallback } from 'react';\nimport { StateClient } from '@devfunlabs/state-client';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { useNavigate, BrowserRouter, Routes, Route, Link, useLocation, useParams } from 'react-router-dom';\nimport { Bell, Menu, X, LogOut, User, ChevronRight, Search, Award, MessageSquare, Calendar, BookOpen, Zap, Star, PlusCircle, MinusCircle, Clock, Users, Trophy, Gift, Sparkles, AlertTriangle, RefreshCw } from 'lucide-react';\nimport { WalletMultiButton } from \"@solana/wallet-adapter-react-ui\";\nimport { useWallet } from \"@solana/wallet-adapter-react\";\nimport { ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport { PhantomWalletAdapter, SolflareWalletAdapter } from \"@solana/wallet-adapter-wallets\";\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\nconst client = new StateClient({\n baseURL: 'https://state.dev.fun',\n appId: '79110023cd703aec27c2',\n timeout: 10000\n});\nconst safeApiCall = async (apiCall, fallbackValue = null) => {\n try {\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 8000);\n const result = await apiCall();\n clearTimeout(timeoutId);\n return result;\n } catch (error) {\n console.error('API call failed:', error);\n return fallbackValue;\n }\n};\nexport default function App() {\n const [connectionError, setConnectionError] = useState(false);\n const endpoint = 'https://rpc.dev.fun/79110023cd703aec27c2';\n const wallets = [new PhantomWalletAdapter(), new SolflareWalletAdapter()];\n useEffect(() => {\n const checkConnection = async () => {\n try {\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 5000);\n await fetch('https://state.dev.fun/health', {\n signal: controller.signal\n });\n clearTimeout(timeoutId);\n setConnectionError(false);\n } catch (error) {\n console.error('Connection check failed:', error);\n setConnectionError(true);\n }\n };\n checkConnection();\n const interval = setInterval(checkConnection, 30000);\n return () => clearInterval(interval);\n }, []);\n if (connectionError) {\n return

\n \n

Connection Error

We're having trouble connecting to the server. This might be due to network issues or server maintenance.

\n \n

;\n }\n return \n \n \n \n \n \n \n \n ;\n}\nfunction AppContent() {\n const [user, setUser] = useState(null);\n const [showMobileMenu, setShowMobileMenu] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [apiError, setApiError] = useState(null);\n const location = useLocation();\n const navigate = useNavigate();\n const wallet = useWallet();\n const fetchOrCreateUser = useCallback(async () => {\n if (!wallet.connected || !wallet.publicKey) {\n setUser(null);\n return;\n }\n setIsLoading(true);\n setApiError(null);\n try {\n const userId = wallet.publicKey.toString();\n let userData = await safeApiCall(() => client.getEntity('users', userId), null);\n if (!userData) {\n const newUser = {\n id: userId,\n name: `User ${userId.slice(0, 4)}...${userId.slice(-4)}`,\n skills: [],\n interests: [],\n bio: '',\n tokens: 100,\n avatar: '',\n rating: 0,\n sessions: 0,\n createdAt: new Date().toISOString()\n };\n userData = await safeApiCall(() => client.createEntity('users', newUser), newUser);\n }\n setUser(userData);\n } catch (error) {\n console.error('Error fetching/creating user:', error);\n setApiError('Failed to load user data. Please try again.');\n } finally {\n setIsLoading(false);\n }\n }, [wallet.connected, wallet.publicKey]);\n useEffect(() => {\n fetchOrCreateUser();\n }, [fetchOrCreateUser]);\n const handleLogout = () => {\n wallet.disconnect();\n setUser(null);\n };\n const handleRetry = () => {\n setApiError(null);\n fetchOrCreateUser();\n };\n useEffect(() => {\n if (!wallet.connected && !location.pathname.includes('/login')) {\n navigate('/login');\n }\n }, [wallet.connected, location.pathname, navigate]);\n if (apiError && !isLoading) {\n return

\n \n

Oops! Something went wrong

{apiError}

\n \n \n

;\n }\n if (isLoading && !user) {\n return

Loading SkillSurge...

Connecting to your wallet

;\n }\n return

\n {user && <>\n {}\n

\n \n SkillSurge\n \n

\n Discover\n Matches\n Challenges\n Leaderboard\n

\n \n {user?.tokens || 0} $BUIDL\n

\n \n

navigate('/profile')}>\n

\n {user?.avatar ?

: {user?.name?.[0]?.toUpperCase() || 'U'}}\n

\n {user?.name || 'User'}\n

\n \n

\n\n {}\n \n\n {}\n \n {showMobileMenu && \n

\n setShowMobileMenu(false)}>\n \n Discover\n \n setShowMobileMenu(false)}>\n \n Matches\n \n setShowMobileMenu(false)}>\n \n Challenges\n \n setShowMobileMenu(false)}>\n \n Leaderboard\n \n setShowMobileMenu(false)}>\n \n Profile\n \n \n

\n }\n \n }\n\n {}\n

\n \n } />\n } />\n } />\n } />\n } />\n } />\n } />\n } />\n \n

\n\n {}\n {user &&

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

}\n

;\n}\nfunction NavLink({\n to,\n active,\n children\n}) {\n return \n {children}\n ;\n}\nfunction MobileNavLink({\n to,\n onClick,\n children\n}) {\n return \n {children}\n ;\n}\nfunction MobileTabButton({\n to,\n current,\n children\n}) {\n return \n {children}\n ;\n}\nfunction LoginPage() {\n const {\n connected\n } = useWallet();\n const navigate = useNavigate();\n useEffect(() => {\n if (connected) {\n navigate('/');\n }\n }, [connected, navigate]);\n return

\n \n

\n SkillSurge\n

Connect, learn, and earn $BUIDL in the skills marketplace

\n \n

Earn $BUIDL Tokens

Connect your wallet to start earning $BUIDL by sharing your skills and knowledge

\n \n

;\n}\nfunction HomePage() {\n const [users, setUsers] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [searchQuery, setSearchQuery] = useState('');\n const [skillFilter, setSkillFilter] = useState('');\n const [popularSkills, setPopularSkills] = useState([]);\n const navigate = useNavigate();\n useEffect(() => {\n const fetchUsers = async () => {\n setLoading(true);\n setError(null);\n try {\n const allUsers = await safeApiCall(() => client.getEntities('users'), []);\n setUsers(allUsers);\n if (allUsers && allUsers.length > 0) {\n const skills = allUsers.flatMap(user => user.skills || []);\n const skillCount = {};\n skills.forEach(skill => {\n skillCount[skill] = (skillCount[skill] || 0) + 1;\n });\n const sortedSkills = Object.entries(skillCount).sort((a, b) => b[1] - a[1]).slice(0, 8).map(([skill]) => skill);\n setPopularSkills(sortedSkills);\n }\n } catch (error) {\n console.error('Error fetching users:', error);\n setError('Failed to load users. Please try again.');\n } finally {\n setLoading(false);\n }\n };\n fetchUsers();\n }, []);\n const handleRetry = () => {\n setError(null);\n setLoading(true);\n const fetchUsers = async () => {\n try {\n const allUsers = await safeApiCall(() => client.getEntities('users'), []);\n setUsers(allUsers);\n setError(null);\n } catch (error) {\n setError('Failed to load users. Please try again.');\n } finally {\n setLoading(false);\n }\n };\n fetchUsers();\n };\n const filteredUsers = users.filter(user => {\n const currentUser = JSON.parse(localStorage.getItem('skillsurgeUser') || '{}');\n if (user.id === currentUser.id) return false;\n const matchesSearch = user.name?.toLowerCase().includes(searchQuery.toLowerCase()) || user.bio?.toLowerCase().includes(searchQuery.toLowerCase());\n const matchesSkill = !skillFilter || user.skills && user.skills.some(skill => skill.toLowerCase().includes(skillFilter.toLowerCase()));\n return matchesSearch && matchesSkill;\n });\n return

\n \n

Discover Skills

Find people to learn from and teach

\n \n \n

\n \n setSearchQuery(e.target.value)} className=\"w-full bg-black/20 border border-white/10 rounded-xl px-10 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500\" />\n

\n \n \n

\n \n {loading ?

: error ?

\n \n

Connection Error

{error}

\n \n

: <>\n {filteredUsers.length === 0 ?

No users found

Try adjusting your search or filters

\n {filteredUsers.map(user => navigate(`/user/${user.id}`)} />)}\n

}\n }\n

;\n}\nfunction UserCard({\n user,\n onClick\n}) {\n return \n

\n {user.avatar ?

: {user.name?.[0]?.toUpperCase() || 'U'}}\n

\n \n {user.rating || 0}\n

\n \n

{user.name}

{user.bio || 'No bio available'}

\n \n

Skills

\n {user.skills && user.skills.length > 0 ? user.skills.slice(0, 3).map((skill, index) => \n {skill}\n ) : No skills listed}\n {user.skills && user.skills.length > 3 && \n +{user.skills.length - 3}\n }\n

\n \n

Interested In

\n {user.interests && user.interests.length > 0 ? user.interests.slice(0, 3).map((interest, index) => \n {interest}\n ) : No interests listed}\n {user.interests && user.interests.length > 3 && \n +{user.interests.length - 3}\n }\n

\n ;\n}\nfunction ProfilePage({\n user,\n setUser\n}) {\n const [editing, setEditing] = useState(false);\n const [name, setName] = useState(user?.name || '');\n const [bio, setBio] = useState(user?.bio || '');\n const [newSkill, setNewSkill] = useState('');\n const [newInterest, setNewInterest] = useState('');\n const [skills, setSkills] = useState(user?.skills || []);\n const [interests, setInterests] = useState(user?.interests || []);\n const [saving, setSaving] = useState(false);\n const [savedSessions, setSavedSessions] = useState([]);\n const [loading, setLoading] = useState(true);\n const navigate = useNavigate();\n useEffect(() => {\n const fetchUserData = async () => {\n if (!user) return;\n setLoading(true);\n try {\n const sessions = await client.getEntities('sessions', {\n $or: [{\n teacherId: user.id\n }, {\n studentId: user.id\n }]\n });\n setSavedSessions(sessions);\n } catch (error) {\n console.error('Error fetching user data:', error);\n } finally {\n setLoading(false);\n }\n };\n fetchUserData();\n }, [user]);\n const handleSaveProfile = async () => {\n if (!user) return;\n setSaving(true);\n try {\n const updatedUser = {\n ...user,\n name,\n bio,\n skills,\n interests\n };\n await client.updateEntity('users', user.id, updatedUser);\n localStorage.setItem('skillsurgeUser', JSON.stringify(updatedUser));\n setUser(updatedUser);\n setEditing(false);\n } catch (error) {\n console.error('Error saving profile:', error);\n } finally {\n setSaving(false);\n }\n };\n const addSkill = () => {\n if (newSkill.trim() && !skills.includes(newSkill.trim())) {\n setSkills([...skills, newSkill.trim()]);\n setNewSkill('');\n }\n };\n const removeSkill = index => {\n setSkills(skills.filter((_, i) => i !== index));\n };\n const addInterest = () => {\n if (newInterest.trim() && !interests.includes(newInterest.trim())) {\n setInterests([...interests, newInterest.trim()]);\n setNewInterest('');\n }\n };\n const removeInterest = index => {\n setInterests(interests.filter((_, i) => i !== index));\n };\n if (!user) {\n return null;\n }\n return

\n \n

My Profile

\n {!editing && }\n

\n \n

\n {user.avatar ?

: {user.name?.[0]?.toUpperCase() || 'U'}}\n

\n {editing ? setName(e.target.value)} className=\"bg-black/40 border border-white/20 rounded-lg px-4 py-2 text-xl font-bold focus:outline-none focus:ring-2 focus:ring-purple-500 md:mb-3\" /> :

{user.name}

}\n

\n \n

\n {user.tokens}\n $BUIDL\n

\n {user.rating || 0}\n \n

\n Rating\n

\n {user.sessions || 0}\n Sessions\n

\n \n

About

\n {editing ?

setBio(e.target.value)} className=\"w-full bg-black/40 border border-white/20 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 min-h-[100px]\" placeholder=\"Tell us about yourself...\" /> : <p className=\"text-white/80\">{user.bio || 'No bio available'}</p>}\n            </div>\n            \n            <div className=\"mt-6\">\n              <h3 className=\"text-lg font-medium mb-3\">My Skills</h3>\n              {editing ? <>\n                  <div className=\"flex gap-2 mb-3\">\n                    <input type=\"text\" value={newSkill} onChange={e => setNewSkill(e.target.value)} className=\"flex-1 bg-black/40 border border-white/20 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500\" placeholder=\"Add a skill...\" onKeyDown={e => e.key === 'Enter' && addSkill()} />\n                    <button onClick={addSkill} className=\"px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg\">\n                      Add\n                    </button>\n                  </div>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {skills.map((skill, index) => <div key={index} className=\"flex items-center gap-1 px-3 py-1.5 rounded-full bg-purple-800/30 border border-purple-500/30\">\n                        <span>{skill}</span>\n                        <button onClick={() => removeSkill(index)} className=\"text-white/60 hover:text-white\">\n                          <X size={14} />\n                        </button>\n                      </div>)}\n                    {skills.length === 0 && <span className=\"text-white/40\">No skills added yet</span>}\n                  </div>\n                </> : <div className=\"flex flex-wrap gap-2\">\n                  {user.skills && user.skills.length > 0 ? user.skills.map((skill, index) => <span key={index} className=\"px-3 py-1.5 rounded-full bg-purple-800/30 border border-purple-500/30\">\n                        {skill}\n                      </span>) : <span className=\"text-white/40\">No skills listed</span>}\n                </div>}\n            </div>\n            \n            <div className=\"mt-6\">\n              <h3 className=\"text-lg font-medium mb-3\">Interested In Learning</h3>\n              {editing ? <>\n                  <div className=\"flex gap-2 mb-3\">\n                    <input type=\"text\" value={newInterest} onChange={e => setNewInterest(e.target.value)} className=\"flex-1 bg-black/40 border border-white/20 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500\" placeholder=\"Add an interest...\" onKeyDown={e => e.key === 'Enter' && addInterest()} />\n                    <button onClick={addInterest} className=\"px-4 py-2 bg-cyan-600 hover:bg-cyan-700 rounded-lg\">\n                      Add\n                    </button>\n                  </div>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {interests.map((interest, index) => <div key={index} className=\"flex items-center gap-1 px-3 py-1.5 rounded-full bg-cyan-800/30 border border-cyan-500/30\">\n                        <span>{interest}</span>\n                        <button onClick={() => removeInterest(index)} className=\"text-white/60 hover:text-white\">\n                          <X size={14} />\n                        </button>\n                      </div>)}\n                    {interests.length === 0 && <span className=\"text-white/40\">No interests added yet</span>}\n                  </div>\n                </> : <div className=\"flex flex-wrap gap-2\">\n                  {user.interests && user.interests.length > 0 ? user.interests.map((interest, index) => <span key={index} className=\"px-3 py-1.5 rounded-full bg-cyan-800/30 border border-cyan-500/30\">\n                        {interest}\n                      </span>) : <span className=\"text-white/40\">No interests listed</span>}\n                </div>}\n            </div>\n            \n            {editing && <div className=\"mt-8 flex gap-4 justify-end\">\n                <button onClick={() => setEditing(false)} className=\"px-6 py-2.5 bg-white/10 hover:bg-white/20 rounded-lg transition-colors\">\n                  Cancel\n                </button>\n                <button onClick={handleSaveProfile} disabled={saving} className=\"px-6 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 rounded-lg transition-all shadow-lg hover:shadow-purple-500/20\">\n                  {saving ? 'Saving...' : 'Save Profile'}\n                </button>\n              </div>}\n          </div>\n        </div>\n        \n        <div className=\"mb-8\">\n          <h2 className=\"text-2xl font-bold mb-4\">My Sessions</h2>\n          {loading ? <div className=\"flex justify-center py-10\">\n              <div className=\"animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-purple-500\"></div>\n            </div> : <>\n              {savedSessions.length === 0 ? <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 p-6 text-center\">\n                  <h3 className=\"text-xl font-medium mb-2\">No sessions yet</h3>\n                  <p className=\"text-white/60 mb-4\">Connect with other users to start learning and teaching</p>\n                  <button onClick={() => navigate('/')} className=\"px-6 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 rounded-lg transition-all shadow-lg hover:shadow-purple-500/20\">\n                    Discover Users\n                  </button>\n                </div> : <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                  {savedSessions.map(session => <SessionCard key={session.id} session={session} currentUserId={user.id} onClick={() => navigate(`/session/${session.id}`)} />)}\n                </div>}\n            </>}\n        </div>\n      </motion.div>\n    </div>;\n}\nfunction SessionCard({\n  session,\n  currentUserId,\n  onClick\n}) {\n  const [otherUser, setOtherUser] = useState(null);\n  const isTeacher = session.teacherId === currentUserId;\n  useEffect(() => {\n    const fetchOtherUser = async () => {\n      try {\n        const userId = isTeacher ? session.studentId : session.teacherId;\n        const user = await client.getEntity('users', userId);\n        setOtherUser(user);\n      } catch (error) {\n        console.error('Error fetching user:', error);\n      }\n    };\n    fetchOtherUser();\n  }, [session, currentUserId, isTeacher]);\n  if (!otherUser) {\n    return <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 p-4 animate-pulse\">\n        <div className=\"h-5 w-3/4 bg-white/10 rounded mb-3\"></div>\n        <div className=\"h-4 w-1/2 bg-white/10 rounded\"></div>\n      </div>;\n  }\n  const getStatusBadge = () => {\n    switch (session.status) {\n      case 'pending':\n        return <span className=\"px-2 py-1 bg-yellow-500/20 text-yellow-300 rounded-full text-xs\">Pending</span>;\n      case 'confirmed':\n        return <span className=\"px-2 py-1 bg-green-500/20 text-green-300 rounded-full text-xs\">Confirmed</span>;\n      case 'completed':\n        return <span className=\"px-2 py-1 bg-blue-500/20 text-blue-300 rounded-full text-xs\">Completed</span>;\n      case 'cancelled':\n        return <span className=\"px-2 py-1 bg-red-500/20 text-red-300 rounded-full text-xs\">Cancelled</span>;\n      default:\n        return null;\n    }\n  };\n  return <motion.div whileHover={{\n    y: -2\n  }} whileTap={{\n    scale: 0.98\n  }} className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden cursor-pointer hover:border-purple-500/30 transition-all\" onClick={onClick}>\n      <div className=\"p-4\">\n        <div className=\"flex justify-between items-start mb-3\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"w-10 h-10 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex items-center justify-center overflow-hidden\">\n              {otherUser.avatar ? <img src={otherUser.avatar} alt={otherUser.name} className=\"w-full h-full object-cover\" /> : <span className=\"text-lg font-bold\">{otherUser.name?.[0]?.toUpperCase() || 'U'}</span>}\n            </div>\n            <div>\n              <h3 className=\"font-medium\">{otherUser.name}</h3>\n              <div className=\"text-sm text-white/60\">\n                {isTeacher ? 'You are teaching' : 'You are learning'}\n              </div>\n            </div>\n          </div>\n          {getStatusBadge()}\n        </div>\n        \n        <div className=\"mb-3\">\n          <h4 className=\"text-purple-300 font-medium\">{session.skill}</h4>\n          <p className=\"text-sm text-white/70 line-clamp-1\">{session.description}</p>\n        </div>\n        \n        <div className=\"flex justify-between items-center\">\n          <div className=\"flex items-center gap-1 text-sm text-white/60\">\n            <Calendar size={14} />\n            <span>{new Date(session.scheduledAt).toLocaleDateString()}</span>\n          </div>\n          <div className=\"flex items-center gap-1 text-sm text-white/60\">\n            <Clock size={14} />\n            <span>{new Date(session.scheduledAt).toLocaleTimeString([], {\n              hour: '2-digit',\n              minute: '2-digit'\n            })}</span>\n          </div>\n          <div className=\"flex items-center gap-1 text-sm text-yellow-300\">\n            <Zap size={14} />\n            <span>{session.tokens}</span>\n          </div>\n        </div>\n      </div>\n    </motion.div>;\n}\nfunction UserDetailPage({\n  currentUser,\n  setUser\n}) {\n  const [profileUser, setProfileUser] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n  const [skillMatch, setSkillMatch] = useState([]);\n  const [interestMatch, setInterestMatch] = useState([]);\n  const [selectedSkill, setSelectedSkill] = useState('');\n  const [sessionDescription, setSessionDescription] = useState('');\n  const [sessionDate, setSessionDate] = useState('');\n  const [sessionTime, setSessionTime] = useState('');\n  const [sessionTokens, setSessionTokens] = useState(50);\n  const [requestingSession, setRequestingSession] = useState(false);\n  const [sessionRequested, setSessionRequested] = useState(false);\n  const {\n    id\n  } = useParams();\n  const navigate = useNavigate();\n  const fetchUserData = useCallback(async () => {\n    if (!id) return;\n    setLoading(true);\n    setError(null);\n    try {\n      const user = await safeApiCall(() => client.getEntity('users', id), null);\n      if (!user) {\n        setError('User not found or connection error');\n        setLoading(false);\n        return;\n      }\n      setProfileUser(user);\n      if (currentUser && user) {\n        const skillsMatched = (user.skills || []).filter(skill => (currentUser.interests || []).includes(skill));\n        setSkillMatch(skillsMatched);\n        const interestsMatched = (user.interests || []).filter(interest => (currentUser.skills || []).includes(interest));\n        setInterestMatch(interestsMatched);\n        if (skillsMatched.length > 0) {\n          setSelectedSkill(skillsMatched[0]);\n        } else if (user.skills && user.skills.length > 0) {\n          setSelectedSkill(user.skills[0]);\n        }\n      }\n      if (currentUser && id) {\n        try {\n          const sessions = await safeApiCall(() => client.getEntities('sessions', {\n            $and: [{\n              $or: [{\n                teacherId: currentUser.id,\n                studentId: id\n              }, {\n                teacherId: id,\n                studentId: currentUser.id\n              }]\n            }, {\n              status: 'pending'\n            }]\n          }), []);\n          if (sessions && sessions.length > 0) {\n            setSessionRequested(true);\n          }\n        } catch (error) {\n          console.error('Error checking sessions:', error);\n        }\n      }\n    } catch (error) {\n      console.error('Error fetching user:', error);\n      setError('Failed to load user data. Please try again.');\n    } finally {\n      setLoading(false);\n    }\n  }, [id, currentUser]);\n  useEffect(() => {\n    fetchUserData();\n  }, [fetchUserData]);\n  const handleRetry = () => {\n    fetchUserData();\n  };\n  const handleRequestSession = async () => {\n    if (!selectedSkill || !sessionDescription || !sessionDate || !sessionTime || !sessionTokens) {\n      alert('Please fill all session details');\n      return;\n    }\n    setRequestingSession(true);\n    let errorMessage = null;\n    try {\n      const scheduledAt = new Date(`${sessionDate}T${sessionTime}`);\n      if (scheduledAt < new Date()) {\n        alert('Session time must be in the future');\n        setRequestingSession(false);\n        return;\n      }\n      if (currentUser.tokens < sessionTokens) {\n        alert('You do not have enough $BUIDL tokens');\n        setRequestingSession(false);\n        return;\n      }\n      const sessionId = Date.now().toString();\n      const newSession = {\n        id: sessionId,\n        teacherId: profileUser.id,\n        studentId: currentUser.id,\n        skill: selectedSkill,\n        description: sessionDescription,\n        scheduledAt: scheduledAt.toISOString(),\n        tokens: sessionTokens,\n        status: 'pending',\n        createdAt: new Date().toISOString()\n      };\n      const createdSession = await safeApiCall(() => client.createEntity('sessions', newSession), null);\n      if (!createdSession) {\n        errorMessage = 'Failed to create session. Please try again.';\n        return;\n      }\n      const updatedUser = {\n        ...currentUser,\n        tokens: currentUser.tokens - sessionTokens\n      };\n      const updated = await safeApiCall(() => client.updateEntity('users', currentUser.id, updatedUser), null);\n      if (!updated) {\n        errorMessage = 'Failed to update tokens. The session was created but your tokens were not deducted.';\n        return;\n      }\n      localStorage.setItem('skillsurgeUser', JSON.stringify(updatedUser));\n      setUser(updatedUser);\n      setSessionRequested(true);\n      navigate(`/session/${sessionId}`);\n    } catch (error) {\n      console.error('Error requesting session:', error);\n      errorMessage = 'Failed to request session. Please try again.';\n    } finally {\n      setRequestingSession(false);\n      if (errorMessage) {\n        alert(errorMessage);\n      }\n    }\n  };\n  if (loading) {\n    return <div className=\"flex justify-center py-20\">\n        <div className=\"animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500\"></div>\n      </div>;\n  }\n  if (error) {\n    return <div className=\"text-center py-20\">\n        <AlertTriangle size={48} className=\"text-yellow-300 mx-auto mb-4\" />\n        <h2 className=\"text-2xl font-bold mb-2\">Connection Error</h2>\n        <p className=\"text-white/60 mb-4\">{error}</p>\n        <div className=\"flex gap-4 justify-center\">\n          <button onClick={handleRetry} className=\"px-4 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-lg flex items-center gap-2\">\n            <RefreshCw size={16} />\n            <span>Try Again</span>\n          </button>\n          <button onClick={() => navigate('/')} className=\"px-4 py-2 bg-white/10 rounded-lg\">\n            Back to Discover\n          </button>\n        </div>\n      </div>;\n  }\n  if (!profileUser) {\n    return <div className=\"text-center py-20\">\n        <h2 className=\"text-2xl font-bold mb-2\">User not found</h2>\n        <p className=\"text-white/60 mb-4\">The user you're looking for doesn't exist</p>\n        <button onClick={() => navigate('/')} className=\"px-6 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 rounded-lg transition-all shadow-lg hover:shadow-purple-500/20\">\n          Back to Discover\n        </button>\n      </div>;\n  }\n  return <div className=\"pb-20\">\n      <motion.div initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }}>\n        <button onClick={() => navigate(-1)} className=\"flex items-center gap-1 text-white/70 hover:text-white mb-4 transition-colors\">\n          <ChevronRight className=\"rotate-180\" size={16} />\n          <span>Back</span>\n        </button>\n        \n        <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden mb-8\">\n          <div className=\"h-36 bg-gradient-to-r from-indigo-600/30 to-purple-600/30\"></div>\n          <div className=\"px-6 pt-0 pb-6 -mt-16\">\n            <div className=\"flex flex-col md:flex-row justify-between\">\n              <div className=\"flex flex-col md:flex-row items-start md:items-end gap-4\">\n                <div className=\"w-28 h-28 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex items-center justify-center overflow-hidden border-4 border-black/30\">\n                  {profileUser.avatar ? <img src={profileUser.avatar} alt={profileUser.name} className=\"w-full h-full object-cover\" /> : <span className=\"text-4xl font-bold\">{profileUser.name?.[0]?.toUpperCase() || 'U'}</span>}\n                </div>\n                <h2 className=\"text-2xl font-bold md:mb-3\">{profileUser.name}</h2>\n              </div>\n              \n              <div className=\"flex gap-4 mt-6 md:mt-0\">\n                <div className=\"flex flex-col items-center bg-black/40 px-4 py-2 rounded-lg\">\n                  <div className=\"flex items-center gap-1\">\n                    <span className=\"text-2xl font-bold\">{profileUser.rating || 0}</span>\n                    <Star className=\"text-yellow-400\" size={16} fill=\"currentColor\" />\n                  </div>\n                  <span className=\"text-xs text-white/60\">Rating</span>\n                </div>\n                <div className=\"flex flex-col items-center bg-black/40 px-4 py-2 rounded-lg\">\n                  <span className=\"text-2xl font-bold\">{profileUser.sessions || 0}</span>\n                  <span className=\"text-xs text-white/60\">Sessions</span>\n                </div>\n              </div>\n            </div>\n            \n            <div className=\"mt-6\">\n              <h3 className=\"text-lg font-medium mb-2\">About</h3>\n              <p className=\"text-white/80\">{profileUser.bio || 'No bio available'}</p>\n            </div>\n            \n            <div className=\"mt-6\">\n              <h3 className=\"text-lg font-medium mb-3\">Skills</h3>\n              <div className=\"flex flex-wrap gap-2\">\n                {profileUser.skills && profileUser.skills.length > 0 ? profileUser.skills.map((skill, index) => <span key={index} className={`px-3 py-1.5 rounded-full ${skillMatch.includes(skill) ? 'bg-green-800/30 border border-green-500/50 text-green-300' : 'bg-purple-800/30 border border-purple-500/30'}`}>\n                      {skill}\n                      {skillMatch.includes(skill) && ' ✓'}\n                    </span>) : <span className=\"text-white/40\">No skills listed</span>}\n              </div>\n              {skillMatch.length > 0 && <p className=\"text-green-300 text-sm mt-2\">\n                  {skillMatch.length === 1 ? 'This skill matches one of your interests!' : `${skillMatch.length} skills match your interests!`}\n                </p>}\n            </div>\n            \n            <div className=\"mt-6\">\n              <h3 className=\"text-lg font-medium mb-3\">Interested In Learning</h3>\n              <div className=\"flex flex-wrap gap-2\">\n                {profileUser.interests && profileUser.interests.length > 0 ? profileUser.interests.map((interest, index) => <span key={index} className={`px-3 py-1.5 rounded-full ${interestMatch.includes(interest) ? 'bg-green-800/30 border border-green-500/50 text-green-300' : 'bg-cyan-800/30 border border-cyan-500/30'}`}>\n                      {interest}\n                      {interestMatch.includes(interest) && ' ✓'}\n                    </span>) : <span className=\"text-white/40\">No interests listed</span>}\n              </div>\n              {interestMatch.length > 0 && <p className=\"text-green-300 text-sm mt-2\">\n                  {interestMatch.length === 1 ? 'You can teach one of their interests!' : `You can teach ${interestMatch.length} of their interests!`}\n                </p>}\n            </div>\n          </div>\n        </div>\n        \n        <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden\">\n          <div className=\"p-6\">\n            <h2 className=\"text-2xl font-bold mb-4\">Request a Learning Session</h2>\n            \n            {sessionRequested ? <div className=\"text-center py-8\">\n                <div className=\"mb-4\">\n                  <div className=\"w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4\">\n                    <Sparkles className=\"text-green-300\" size={28} />\n                  </div>\n                  <h3 className=\"text-xl font-medium mb-2\">Session Requested!</h3>\n                  <p className=\"text-white/70 mb-6\">Your session request has been sent to {profileUser.name}.</p>\n                  <button onClick={() => navigate('/matches')} className=\"px-6 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 rounded-lg transition-all shadow-lg hover:shadow-purple-500/20\">\n                    View Your Matches\n                  </button>\n                </div>\n              </div> : <div className=\"space-y-6\">\n                <div>\n                  <label className=\"block text-sm font-medium mb-2\">Skill to Learn</label>\n                  <select value={selectedSkill} onChange={e => setSelectedSkill(e.target.value)} className=\"w-full bg-black/40 border border-white/20 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500\" required>\n                    <option value=\"\">Select a skill</option>\n                    {profileUser.skills && profileUser.skills.map((skill, index) => <option key={index} value={skill}>\n                        {skill} {skillMatch.includes(skill) ? '(matches your interest)' : ''}\n                      </option>)}\n                  </select>\n                </div>\n                \n                <div>\n                  <label className=\"block text-sm font-medium mb-2\">Session Description</label>\n                  <textarea value={sessionDescription} onChange={e => setSessionDescription(e.target.value)} className=\"w-full bg-black/40 border border-white/20 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 min-h-[100px]\" placeholder=\"Describe what you want to learn and any specific topics you're interested in...\" required />\n                </div>\n                \n                <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n                  <div>\n                    <label className=\"block text-sm font-medium mb-2\">Date</label>\n                    <input type=\"date\" value={sessionDate} onChange={e => setSessionDate(e.target.value)} className=\"w-full bg-black/40 border border-white/20 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500\" required min={new Date().toISOString().split('T')[0]} />\n                  </div>\n                  <div>\n                    <label className=\"block text-sm font-medium mb-2\">Time</label>\n                    <input type=\"time\" value={sessionTime} onChange={e => setSessionTime(e.target.value)} className=\"w-full bg-black/40 border border-white/20 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500\" required />\n                  </div>\n                </div>\n                \n                <div>\n                  <label className=\"block text-sm font-medium mb-2\">$SURGE Tokens (50-500)</label>\n                  <div className=\"flex items-center\">\n                    <button type=\"button\" onClick={() => setSessionTokens(Math.max(50, sessionTokens - 25))} className=\"px-2 py-2 bg-black/40 border border-white/20 rounded-l-lg\">\n                      <MinusCircle size={20} />\n                    </button>\n                    <input type=\"number\" value={sessionTokens} onChange={e => setSessionTokens(Math.min(500, Math.max(50, parseInt(e.target.value) || 50)))} className=\"flex-1 bg-black/40 border-y border-white/20 px-4 py-3 focus:outline-none focus:ring-0 text-center\" min=\"50\" max=\"500\" required />\n                    <button type=\"button\" onClick={() => setSessionTokens(Math.min(500, sessionTokens + 25))} className=\"px-2 py-2 bg-black/40 border border-white/20 rounded-r-lg\">\n                      <PlusCircle size={20} />\n                    </button>\n                  </div>\n                  <p className=\"text-sm text-white/60 mt-1\">Higher token amounts may increase chances of acceptance</p>\n                  <p className=\"text-sm text-yellow-300 mt-1\">Your balance: {currentUser.tokens} $BUIDL</p>\n                </div>\n                \n                <div className=\"flex justify-end\">\n                  <button onClick={handleRequestSession} disabled={requestingSession || currentUser.tokens < sessionTokens} className={`px-6 py-2.5 rounded-lg transition-all shadow-lg ${currentUser.tokens < sessionTokens ? 'bg-gray-600 cursor-not-allowed' : 'bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 hover:shadow-purple-500/20'}`}>\n                    {requestingSession ? 'Requesting...' : 'Request Session'}\n                  </button>\n                </div>\n                \n                {currentUser.tokens < sessionTokens && <p className=\"text-red-400 text-sm\">You don't have enough tokens for this session.</p>}\n              </div>}\n          </div>\n        </div>\n      </motion.div>\n    </div>;\n}\nfunction SessionPage({\n  user,\n  setUser\n}) {\n  const [session, setSession] = useState(null);\n  const [otherUser, setOtherUser] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [message, setMessage] = useState('');\n  const [messages, setMessages] = useState([]);\n  const {\n    id\n  } = useParams();\n  const navigate = useNavigate();\n  useEffect(() => {\n    const fetchSessionData = async () => {\n      if (!user) return;\n      setLoading(true);\n      try {\n        const sessionData = await client.getEntity('sessions', id);\n        if (!sessionData) {\n          navigate('/matches');\n          return;\n        }\n        if (sessionData.teacherId !== user.id && sessionData.studentId !== user.id) {\n          navigate('/matches');\n          return;\n        }\n        setSession(sessionData);\n        const otherUserId = sessionData.teacherId === user.id ? sessionData.studentId : sessionData.teacherId;\n        const otherUserData = await client.getEntity('users', otherUserId);\n        setOtherUser(otherUserData);\n        const sessionMessages = await client.getEntities('messages', {\n          sessionId: id\n        });\n        setMessages(sessionMessages.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt)));\n      } catch (error) {\n        console.error('Error fetching session data:', error);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchSessionData();\n  }, [id, user, navigate]);\n  const handleSendMessage = async () => {\n    if (!message.trim()) return;\n    try {\n      const newMessage = {\n        id: Date.now().toString(),\n        sessionId: id,\n        senderId: user.id,\n        text: message,\n        createdAt: new Date().toISOString()\n      };\n      await client.createEntity('messages', newMessage);\n      setMessages([...messages, newMessage]);\n      setMessage('');\n    } catch (error) {\n      console.error('Error sending message:', error);\n    }\n  };\n  const handleAcceptSession = async () => {\n    try {\n      const updatedSession = {\n        ...session,\n        status: 'confirmed'\n      };\n      await client.updateEntity('sessions', id, updatedSession);\n      setSession(updatedSession);\n    } catch (error) {\n      console.error('Error accepting session:', error);\n    }\n  };\n  const handleCompleteSession = async () => {\n    try {\n      const updatedSession = {\n        ...session,\n        status: 'completed'\n      };\n      await client.updateEntity('sessions', id, updatedSession);\n      if (session.teacherId === user.id) {\n        const updatedUser = {\n          ...user,\n          tokens: user.tokens + session.tokens,\n          sessions: (user.sessions || 0) + 1\n        };\n        await client.updateEntity('users', user.id, updatedUser);\n        localStorage.setItem('skillsurgeUser', JSON.stringify(updatedUser));\n        setUser(updatedUser);\n      } else {\n        const updatedUser = {\n          ...user,\n          sessions: (user.sessions || 0) + 1\n        };\n        await client.updateEntity('users', user.id, updatedUser);\n        localStorage.setItem('skillsurgeUser', JSON.stringify(updatedUser));\n        setUser(updatedUser);\n        const teacher = await client.getEntity('users', session.teacherId);\n        await client.updateEntity('users', session.teacherId, {\n          ...teacher,\n          tokens: teacher.tokens + session.tokens,\n          sessions: (teacher.sessions || 0) + 1\n        });\n      }\n      setSession(updatedSession);\n    } catch (error) {\n      console.error('Error completing session:', error);\n    }\n  };\n  const handleCancelSession = async () => {\n    try {\n      const updatedSession = {\n        ...session,\n        status: 'cancelled'\n      };\n      await client.updateEntity('sessions', id, updatedSession);\n      if (session.status !== 'completed' && session.studentId === user.id) {\n        const updatedUser = {\n          ...user,\n          tokens: user.tokens + session.tokens\n        };\n        await client.updateEntity('users', user.id, updatedUser);\n        localStorage.setItem('skillsurgeUser', JSON.stringify(updatedUser));\n        setUser(updatedUser);\n      }\n      setSession(updatedSession);\n    } catch (error) {\n      console.error('Error cancelling session:', error);\n    }\n  };\n  if (loading) {\n    return <div className=\"flex justify-center py-20\">\n        <div className=\"animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500\"></div>\n      </div>;\n  }\n  if (!session || !otherUser) {\n    return <div className=\"text-center py-20\">\n        <h2 className=\"text-2xl font-bold mb-2\">Session not found</h2>\n        <p className=\"text-white/60 mb-4\">The session you're looking for doesn't exist</p>\n        <button onClick={() => navigate('/matches')} className=\"px-6 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 rounded-lg transition-all shadow-lg hover:shadow-purple-500/20\">\n          Back to Matches\n        </button>\n      </div>;\n  }\n  const isTeacher = session.teacherId === user.id;\n  const scheduledDate = new Date(session.scheduledAt);\n  const isPast = scheduledDate < new Date();\n  return <div className=\"pb-20\">\n      <motion.div initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }}>\n        <button onClick={() => navigate(-1)} className=\"flex items-center gap-1 text-white/70 hover:text-white mb-4 transition-colors\">\n          <ChevronRight className=\"rotate-180\" size={16} />\n          <span>Back</span>\n        </button>\n        \n        <div className=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n          <div className=\"lg:col-span-2\">\n            <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden mb-6\">\n              <div className=\"p-6\">\n                <div className=\"flex justify-between items-start\">\n                  <h2 className=\"text-2xl font-bold mb-2\">Session Details</h2>\n                  <SessionStatusBadge status={session.status} />\n                </div>\n                \n                <div className=\"flex flex-col md:flex-row justify-between gap-4 mb-6\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex items-center justify-center overflow-hidden\">\n                      {otherUser.avatar ? <img src={otherUser.avatar} alt={otherUser.name} className=\"w-full h-full object-cover\" /> : <span className=\"text-xl font-bold\">{otherUser.name?.[0]?.toUpperCase() || 'U'}</span>}\n                    </div>\n                    <div>\n                      <div className=\"text-sm text-white/60\">\n                        {isTeacher ? 'Student' : 'Teacher'}\n                      </div>\n                      <h3 className=\"font-medium\">{otherUser.name}</h3>\n                    </div>\n                  </div>\n                  \n                  <div>\n                    <div className=\"text-sm text-white/60 mb-1\">Skill</div>\n                    <div className=\"px-3 py-1 rounded-full bg-purple-800/30 border border-purple-500/30 inline-block\">\n                      {session.skill}\n                    </div>\n                  </div>\n                  \n                  <div>\n                    <div className=\"text-sm text-white/60 mb-1\">$SURGE Tokens</div>\n                    <div className=\"flex items-center gap-1 text-yellow-300 font-medium\">\n                      <Zap size={16} />\n                      <span>{session.tokens}</span>\n                    </div>\n                  </div>\n                </div>\n                \n                <div className=\"mb-6\">\n                  <h3 className=\"text-lg font-medium mb-2\">Description</h3>\n                  <p className=\"text-white/80\">{session.description}</p>\n                </div>\n                \n                <div className=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-6\">\n                  <div className=\"bg-black/20 rounded-lg p-3\">\n                    <div className=\"text-sm text-white/60 mb-1\">Date</div>\n                    <div className=\"flex items-center gap-2\">\n                      <Calendar size={16} className=\"text-purple-300\" />\n                      <span>{scheduledDate.toLocaleDateString()}</span>\n                    </div>\n                  </div>\n                  \n                  <div className=\"bg-black/20 rounded-lg p-3\">\n                    <div className=\"text-sm text-white/60 mb-1\">Time</div>\n                    <div className=\"flex items-center gap-2\">\n                      <Clock size={16} className=\"text-purple-300\" />\n                      <span>{scheduledDate.toLocaleTimeString([], {\n                        hour: '2-digit',\n                        minute: '2-digit'\n                      })}</span>\n                    </div>\n                  </div>\n                  \n                  <div className=\"bg-black/20 rounded-lg p-3\">\n                    <div className=\"text-sm text-white/60 mb-1\">Status</div>\n                    <div className=\"flex items-center gap-2\">\n                      {session.status === 'pending' && <Clock size={16} className=\"text-yellow-300\" />}\n                      {session.status === 'confirmed' && <BookOpen size={16} className=\"text-green-300\" />}\n                      {session.status === 'completed' && <Award size={16} className=\"text-blue-300\" />}\n                      {session.status === 'cancelled' && <X size={16} className=\"text-red-300\" />}\n                      <span className=\"capitalize\">{session.status}</span>\n                    </div>\n                  </div>\n                </div>\n                \n                {}\n                {session.status === 'pending' && isTeacher && <div className=\"flex flex-wrap gap-3\">\n                    <button onClick={handleAcceptSession} className=\"px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 rounded-lg transition-all\">\n                      Accept Session\n                    </button>\n                    <button onClick={handleCancelSession} className=\"px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-300 rounded-lg transition-all\">\n                      Decline\n                    </button>\n                  </div>}\n                \n                {session.status === 'confirmed' && <div className=\"flex flex-wrap gap-3\">\n                    <button onClick={handleCompleteSession} className=\"px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 rounded-lg transition-all\">\n                      Mark as Completed\n                    </button>\n                    {!isPast && <button onClick={handleCancelSession} className=\"px-4 py-2 bg-red-500/20 hover:bg-red-500/30 text-red-300 rounded-lg transition-all\">\n                        Cancel Session\n                      </button>}\n                  </div>}\n                \n                {(session.status === 'completed' || session.status === 'cancelled') && <div className=\"text-center py-2\">\n                    <span className=\"text-white/60\">\n                      This session is {session.status === 'completed' ? 'completed' : 'cancelled'}\n                    </span>\n                  </div>}\n              </div>\n            </div>\n            \n            <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden h-[500px] flex flex-col\">\n              <div className=\"p-4 border-b border-white/10\">\n                <h3 className=\"font-medium\">Session Chat</h3>\n              </div>\n              \n              <div className=\"flex-1 overflow-y-auto p-4 space-y-3\">\n                {messages.length === 0 ? <div className=\"h-full flex items-center justify-center text-white/40\">\n                    <p>No messages yet. Start the conversation!</p>\n                  </div> : messages.map(msg => <div key={msg.id} className={`flex ${msg.senderId === user.id ? 'justify-end' : 'justify-start'}`}>\n                      <div className={`max-w-[80%] rounded-xl px-4 py-2 ${msg.senderId === user.id ? 'bg-purple-600/40 rounded-tr-none' : 'bg-black/40 rounded-tl-none'}`}>\n                        <p>{msg.text}</p>\n                        <div className=\"text-xs text-white/50 mt-1\">\n                          {new Date(msg.createdAt).toLocaleTimeString([], {\n                      hour: '2-digit',\n                      minute: '2-digit'\n                    })}\n                        </div>\n                      </div>\n                    </div>)}\n              </div>\n              \n              <div className=\"p-3 border-t border-white/10\">\n                <div className=\"flex gap-2\">\n                  <input type=\"text\" value={message} onChange={e => setMessage(e.target.value)} className=\"flex-1 bg-black/40 border border-white/20 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500\" placeholder=\"Type a message...\" onKeyDown={e => e.key === 'Enter' && handleSendMessage()} disabled={session.status === 'cancelled'} />\n                  <button onClick={handleSendMessage} disabled={session.status === 'cancelled'} className={`px-4 py-2 rounded-lg ${session.status === 'cancelled' ? 'bg-gray-600 cursor-not-allowed' : 'bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700'}`}>\n                    <MessageSquare size={20} />\n                  </button>\n                </div>\n                {session.status === 'cancelled' && <p className=\"text-sm text-red-300 mt-2\">Chat is disabled for cancelled sessions</p>}\n              </div>\n            </div>\n          </div>\n          \n          <div>\n            <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden mb-6\">\n              <div className=\"p-5\">\n                <h3 className=\"font-medium mb-4\">Session Info</h3>\n                \n                <div className=\"space-y-4\">\n                  <div>\n                    <div className=\"text-sm text-white/60 mb-1\">Created</div>\n                    <div className=\"flex items-center gap-2\">\n                      <Clock size={16} className=\"text-purple-300\" />\n                      <span>{new Date(session.createdAt).toLocaleDateString()}</span>\n                    </div>\n                  </div>\n                  \n                  <div>\n                    <div className=\"text-sm text-white/60 mb-1\">Session ID</div>\n                    <div className=\"text-sm bg-black/40 px-3 py-2 rounded overflow-x-auto\">\n                      {session.id}\n                    </div>\n                  </div>\n                  \n                  <div>\n                    <div className=\"text-sm text-white/60 mb-1\">Role</div>\n                    <div className=\"flex items-center gap-2\">\n                      {isTeacher ? <>\n                          <BookOpen size={16} className=\"text-purple-300\" />\n                          <span>Teacher</span>\n                        </> : <>\n                          <User size={16} className=\"text-cyan-300\" />\n                          <span>Student</span>\n                        </>}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            \n            <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden\">\n              <div className=\"p-5\">\n                <h3 className=\"font-medium mb-4\">About {otherUser.name}</h3>\n                \n                <div className=\"mb-4\">\n                  <p className=\"text-white/80 text-sm\">{otherUser.bio || 'No bio available'}</p>\n                </div>\n                \n                <div className=\"mb-4\">\n                  <div className=\"text-sm text-white/60 mb-2\">Skills</div>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {otherUser.skills && otherUser.skills.length > 0 ? otherUser.skills.map((skill, index) => <span key={index} className=\"text-xs px-2 py-1 rounded-full bg-purple-800/30 border border-purple-500/30\">\n                          {skill}\n                        </span>) : <span className=\"text-white/40 text-xs\">No skills listed</span>}\n                  </div>\n                </div>\n                \n                <div>\n                  <div className=\"text-sm text-white/60 mb-2\">Interests</div>\n                  <div className=\"flex flex-wrap gap-2\">\n                    {otherUser.interests && otherUser.interests.length > 0 ? otherUser.interests.map((interest, index) => <span key={index} className=\"text-xs px-2 py-1 rounded-full bg-cyan-800/30 border border-cyan-500/30\">\n                          {interest}\n                        </span>) : <span className=\"text-white/40 text-xs\">No interests listed</span>}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </motion.div>\n    </div>;\n}\nfunction SessionStatusBadge({\n  status\n}) {\n  switch (status) {\n    case 'pending':\n      return <span className=\"px-3 py-1 bg-yellow-500/20 text-yellow-300 rounded-full text-sm\">Pending</span>;\n    case 'confirmed':\n      return <span className=\"px-3 py-1 bg-green-500/20 text-green-300 rounded-full text-sm\">Confirmed</span>;\n    case 'completed':\n      return <span className=\"px-3 py-1 bg-blue-500/20 text-blue-300 rounded-full text-sm\">Completed</span>;\n    case 'cancelled':\n      return <span className=\"px-3 py-1 bg-red-500/20 text-red-300 rounded-full text-sm\">Cancelled</span>;\n    default:\n      return null;\n  }\n}\nfunction MatchesPage({\n  user\n}) {\n  const [sessions, setSessions] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [activeTab, setActiveTab] = useState('pending');\n  const navigate = useNavigate();\n  useEffect(() => {\n    const fetchSessions = async () => {\n      if (!user) return;\n      setLoading(true);\n      try {\n        const userSessions = await client.getEntities('sessions', {\n          $or: [{\n            teacherId: user.id\n          }, {\n            studentId: user.id\n          }]\n        });\n        setSessions(userSessions.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt)));\n      } catch (error) {\n        console.error('Error fetching sessions:', error);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchSessions();\n  }, [user]);\n  const filteredSessions = sessions.filter(session => {\n    if (activeTab === 'all') return true;\n    return session.status === activeTab;\n  });\n  return <div className=\"pb-20\">\n      <motion.div initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }}>\n        <div className=\"mb-6\">\n          <h1 className=\"text-3xl font-bold mb-2\">Your Matches</h1>\n          <p className=\"text-white/70\">Manage your learning sessions</p>\n        </div>\n        \n        <div className=\"flex space-x-1 rounded-xl bg-black/20 backdrop-blur-md p-1 mb-6 overflow-x-auto\">\n          <TabButton active={activeTab === 'all'} onClick={() => setActiveTab('all')}>All</TabButton>\n          <TabButton active={activeTab === 'pending'} onClick={() => setActiveTab('pending')}>\n            Pending\n            <span className=\"ml-1 px-1.5 py-0.5 text-xs bg-yellow-500/20 text-yellow-300 rounded-full\">\n              {sessions.filter(s => s.status === 'pending').length}\n            </span>\n          </TabButton>\n          <TabButton active={activeTab === 'confirmed'} onClick={() => setActiveTab('confirmed')}>\n            Confirmed\n            <span className=\"ml-1 px-1.5 py-0.5 text-xs bg-green-500/20 text-green-300 rounded-full\">\n              {sessions.filter(s => s.status === 'confirmed').length}\n            </span>\n          </TabButton>\n          <TabButton active={activeTab === 'completed'} onClick={() => setActiveTab('completed')}>\n            Completed\n            <span className=\"ml-1 px-1.5 py-0.5 text-xs bg-blue-500/20 text-blue-300 rounded-full\">\n              {sessions.filter(s => s.status === 'completed').length}\n            </span>\n          </TabButton>\n          <TabButton active={activeTab === 'cancelled'} onClick={() => setActiveTab('cancelled')}>\n            Cancelled\n            <span className=\"ml-1 px-1.5 py-0.5 text-xs bg-red-500/20 text-red-300 rounded-full\">\n              {sessions.filter(s => s.status === 'cancelled').length}\n            </span>\n          </TabButton>\n        </div>\n        \n        {loading ? <div className=\"flex justify-center py-20\">\n            <div className=\"animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500\"></div>\n          </div> : <>\n            {filteredSessions.length === 0 ? <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 p-10 text-center\">\n                <h3 className=\"text-xl font-medium mb-2\">No {activeTab !== 'all' ? activeTab : ''} sessions found</h3>\n                <p className=\"text-white/60 mb-6\">\n                  {activeTab === 'pending' && 'You have no pending session requests.'}\n                  {activeTab === 'confirmed' && 'You have no confirmed upcoming sessions.'}\n                  {activeTab === 'completed' && 'You have not completed any sessions yet.'}\n                  {activeTab === 'cancelled' && 'You have no cancelled sessions.'}\n                  {activeTab === 'all' && 'You have not created or received any session requests yet.'}\n                </p>\n                <button onClick={() => navigate('/')} className=\"px-6 py-2.5 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 rounded-lg transition-all shadow-lg hover:shadow-purple-500/20\">\n                  Discover Users\n                </button>\n              </div> : <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                {filteredSessions.map(session => <MatchCard key={session.id} session={session} currentUserId={user.id} onClick={() => navigate(`/session/${session.id}`)} />)}\n              </div>}\n          </>}\n      </motion.div>\n    </div>;\n}\nfunction TabButton({\n  active,\n  onClick,\n  children\n}) {\n  return <button onClick={onClick} className={`py-2 px-4 rounded-lg transition-all whitespace-nowrap ${active ? 'bg-gradient-to-r from-purple-600/90 to-indigo-600/90 text-white shadow-lg' : 'text-white/70 hover:text-white hover:bg-white/10'}`}>\n      {children}\n    </button>;\n}\nfunction MatchCard({\n  session,\n  currentUserId,\n  onClick\n}) {\n  const [otherUser, setOtherUser] = useState(null);\n  const isTeacher = session.teacherId === currentUserId;\n  useEffect(() => {\n    const fetchOtherUser = async () => {\n      try {\n        const userId = isTeacher ? session.studentId : session.teacherId;\n        const user = await client.getEntity('users', userId);\n        setOtherUser(user);\n      } catch (error) {\n        console.error('Error fetching user:', error);\n      }\n    };\n    fetchOtherUser();\n  }, [session, currentUserId, isTeacher]);\n  if (!otherUser) {\n    return <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 p-4 animate-pulse\">\n        <div className=\"h-5 w-3/4 bg-white/10 rounded mb-3\"></div>\n        <div className=\"h-4 w-1/2 bg-white/10 rounded\"></div>\n      </div>;\n  }\n  return <motion.div whileHover={{\n    y: -2\n  }} whileTap={{\n    scale: 0.98\n  }} className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden cursor-pointer hover:border-purple-500/30 transition-all\" onClick={onClick}>\n      <div className=\"p-5\">\n        <div className=\"flex justify-between items-start mb-4\">\n          <div className=\"flex items-center gap-3\">\n            <div className=\"w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex items-center justify-center overflow-hidden\">\n              {otherUser.avatar ? <img src={otherUser.avatar} alt={otherUser.name} className=\"w-full h-full object-cover\" /> : <span className=\"text-xl font-bold\">{otherUser.name?.[0]?.toUpperCase() || 'U'}</span>}\n            </div>\n            <div>\n              <h3 className=\"font-medium\">{otherUser.name}</h3>\n              <div className=\"text-sm text-white/60 flex items-center gap-1\">\n                {isTeacher ? <>\n                    <BookOpen size={14} />\n                    <span>You are teaching</span>\n                  </> : <>\n                    <User size={14} />\n                    <span>You are learning</span>\n                  </>}\n              </div>\n            </div>\n          </div>\n          <SessionStatusBadge status={session.status} />\n        </div>\n        \n        <div className=\"mb-4\">\n          <h4 className=\"text-purple-300 font-medium\">{session.skill}</h4>\n          <p className=\"text-sm text-white/70 line-clamp-2\">{session.description}</p>\n        </div>\n        \n        <div className=\"grid grid-cols-3 gap-2 mb-4\">\n          <div className=\"bg-black/20 rounded-lg p-2\">\n            <div className=\"text-xs text-white/60 mb-1\">Date</div>\n            <div className=\"flex items-center gap-1 text-sm\">\n              <Calendar size={14} className=\"text-purple-300\" />\n              <span>{new Date(session.scheduledAt).toLocaleDateString()}</span>\n            </div>\n          </div>\n          \n          <div className=\"bg-black/20 rounded-lg p-2\">\n            <div className=\"text-xs text-white/60 mb-1\">Time</div>\n            <div className=\"flex items-center gap-1 text-sm\">\n              <Clock size={14} className=\"text-purple-300\" />\n              <span>{new Date(session.scheduledAt).toLocaleTimeString([], {\n                hour: '2-digit',\n                minute: '2-digit'\n              })}</span>\n            </div>\n          </div>\n          \n          <div className=\"bg-black/20 rounded-lg p-2\">\n            <div className=\"text-xs text-white/60 mb-1\">Tokens</div>\n            <div className=\"flex items-center gap-1 text-sm text-yellow-300\">\n              <Zap size={14} />\n              <span>{session.tokens}</span>\n            </div>\n          </div>\n        </div>\n        \n        <div className=\"flex justify-between items-center\">\n          <div className=\"text-xs text-white/50\">\n            Created {new Date(session.createdAt).toLocaleDateString()}\n          </div>\n          <div className=\"flex items-center text-sm text-purple-300\">\n            <span>View Details</span>\n            <ChevronRight size={16} />\n          </div>\n        </div>\n      </div>\n    </motion.div>;\n}\nfunction ChallengesPage({\n  user,\n  setUser\n}) {\n  const [challenges, setChallenges] = useState([{\n    id: 'c1',\n    title: 'First Steps',\n    description: 'Complete your first learning session',\n    reward: 100,\n    isCompleted: false,\n    progress: 0,\n    icon: BookOpen\n  }, {\n    id: 'c2',\n    title: 'Share Your Knowledge',\n    description: 'Teach 3 skills to other users',\n    reward: 150,\n    isCompleted: false,\n    progress: 0,\n    total: 3,\n    icon: Users\n  }, {\n    id: 'c3',\n    title: 'Skill Collector',\n    description: 'Add 5 skills to your profile',\n    reward: 50,\n    isCompleted: false,\n    progress: 0,\n    total: 5,\n    icon: Award\n  }, {\n    id: 'c4',\n    title: 'Perfect Attendance',\n    description: 'Complete 5 learning sessions without cancellation',\n    reward: 200,\n    isCompleted: false,\n    progress: 0,\n    total: 5,\n    icon: Calendar\n  }, {\n    id: 'c5',\n    title: 'BUIDL Community',\n    description: 'Receive a 5-star rating from 3 different users',\n    reward: 250,\n    isCompleted: false,\n    progress: 0,\n    total: 3,\n    icon: Star\n  }]);\n  const [loading, setLoading] = useState(true);\n  useEffect(() => {\n    const fetchChallengeProgress = async () => {\n      if (!user) return;\n      setLoading(true);\n      try {\n        const sessions = await client.getEntities('sessions', {\n          $or: [{\n            teacherId: user.id\n          }, {\n            studentId: user.id\n          }],\n          status: 'completed'\n        });\n        const updatedChallenges = [...challenges];\n        const completedSessions = sessions.length;\n        updatedChallenges[0].progress = Math.min(completedSessions, 1);\n        updatedChallenges[0].isCompleted = completedSessions > 0;\n        const teachingSessions = sessions.filter(s => s.teacherId === user.id);\n        updatedChallenges[1].progress = Math.min(teachingSessions.length, 3);\n        updatedChallenges[1].isCompleted = teachingSessions.length >= 3;\n        const skillsCount = (user.skills || []).length;\n        updatedChallenges[2].progress = Math.min(skillsCount, 5);\n        updatedChallenges[2].isCompleted = skillsCount >= 5;\n        const learningSessionsCompleted = sessions.filter(s => s.studentId === user.id).length;\n        updatedChallenges[3].progress = Math.min(learningSessionsCompleted, 5);\n        updatedChallenges[3].isCompleted = learningSessionsCompleted >= 5;\n        const topRatings = Math.min(Math.floor(teachingSessions.length / 2), 3);\n        updatedChallenges[4].progress = topRatings;\n        updatedChallenges[4].isCompleted = topRatings >= 3;\n        setChallenges(updatedChallenges);\n      } catch (error) {\n        console.error('Error fetching challenge progress:', error);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchChallengeProgress();\n  }, [user]);\n  const handleClaimReward = async challengeId => {\n    const challenge = challenges.find(c => c.id === challengeId);\n    if (!challenge || !challenge.isCompleted) return;\n    try {\n      const updatedUser = {\n        ...user,\n        tokens: user.tokens + challenge.reward\n      };\n      await client.updateEntity('users', user.id, updatedUser);\n      localStorage.setItem('skillsurgeUser', JSON.stringify(updatedUser));\n      setUser(updatedUser);\n      const updatedChallenges = challenges.map(c => c.id === challengeId ? {\n        ...c,\n        isCompleted: false,\n        claimed: true\n      } : c);\n      setChallenges(updatedChallenges);\n      alert(`You've claimed ${challenge.reward} $BUIDL tokens!`);\n    } catch (error) {\n      console.error('Error claiming reward:', error);\n    }\n  };\n  return <div className=\"pb-20\">\n      <motion.div initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }}>\n        <div className=\"mb-6\">\n          <h1 className=\"text-3xl font-bold mb-2\">Skill Challenges</h1>\n          <p className=\"text-white/70\">Complete challenges to earn $SURGE tokens</p>\n        </div>\n        \n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n          <div className=\"bg-gradient-to-r from-purple-900/60 to-indigo-900/60 backdrop-blur-md rounded-xl border border-purple-500/30 p-6\">\n            <h2 className=\"text-xl font-bold mb-1\">Your Balance</h2>\n            <div className=\"flex items-center gap-2 text-3xl text-yellow-300 font-bold mb-2\">\n              <Zap className=\"text-yellow-300\" size={28} />\n              <span>{user?.tokens || 0} $BUIDL</span>\n            </div>\n            <p className=\"text-white/70\">Complete challenges to earn more tokens</p>\n          </div>\n          \n          <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 p-6\">\n            <h2 className=\"text-xl font-bold mb-2\">Challenge Progress</h2>\n            <div className=\"flex items-center justify-between mb-2\">\n              <span className=\"text-white/70\">Completed</span>\n              <span className=\"font-medium\">{challenges.filter(c => c.isCompleted || c.claimed).length} / {challenges.length}</span>\n            </div>\n            <div className=\"w-full bg-black/40 rounded-full h-3 mb-2\">\n              <div className=\"bg-gradient-to-r from-purple-600 to-indigo-600 h-3 rounded-full\" style={{\n              width: `${challenges.filter(c => c.isCompleted || c.claimed).length / challenges.length * 100}%`\n            }}></div>\n            </div>\n            <p className=\"text-white/70 text-sm\">Complete all challenges to unlock bonus $BUIDL rewards</p>\n          </div>\n        </div>\n        \n        {loading ? <div className=\"flex justify-center py-10\">\n            <div className=\"animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-purple-500\"></div>\n          </div> : <div className=\"space-y-4\">\n            {challenges.map(challenge => <ChallengeCard key={challenge.id} challenge={challenge} onClaimReward={() => handleClaimReward(challenge.id)} />)}\n          </div>}\n      </motion.div>\n    </div>;\n}\nfunction ChallengeCard({\n  challenge,\n  onClaimReward\n}) {\n  const Icon = challenge.icon;\n  const progressPercent = challenge.total ? challenge.progress / challenge.total * 100 : challenge.progress * 100;\n  return <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden\">\n      <div className=\"p-5\">\n        <div className=\"flex justify-between\">\n          <div className=\"flex items-start gap-4\">\n            <div className=\"w-12 h-12 rounded-lg bg-gradient-to-r from-purple-600/30 to-indigo-600/30 flex items-center justify-center\">\n              <Icon size={24} className=\"text-purple-300\" />\n            </div>\n            <div>\n              <h3 className=\"font-medium text-lg\">{challenge.title}</h3>\n              <p className=\"text-white/70 mb-3\">{challenge.description}</p>\n              \n              <div className=\"space-y-2\">\n                <div className=\"flex items-center justify-between text-sm\">\n                  <span className=\"text-white/60\">Progress</span>\n                  <span className=\"font-medium\">{challenge.progress} / {challenge.total || 1}</span>\n                </div>\n                <div className=\"w-full bg-black/40 rounded-full h-2\">\n                  <div className=\"bg-gradient-to-r from-purple-600 to-indigo-600 h-2 rounded-full\" style={{\n                  width: `${progressPercent}%`\n                }}></div>\n                </div>\n              </div>\n            </div>\n          </div>\n          \n          <div className=\"flex flex-col items-end\">\n            <div className=\"flex items-center gap-1 text-yellow-300 font-medium mb-2\">\n              <Zap size={16} />\n              <span>{challenge.reward}</span>\n            </div>\n            \n            {challenge.claimed ? <span className=\"px-3 py-1 bg-purple-500/20 text-purple-300 rounded-lg text-sm\">Claimed</span> : challenge.isCompleted ? <button onClick={onClaimReward} className=\"px-3 py-1 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 rounded-lg text-sm transition-all\">\n                Claim Reward\n              </button> : <span className=\"px-3 py-1 bg-white/10 text-white/60 rounded-lg text-sm\">In Progress</span>}\n          </div>\n        </div>\n      </div>\n    </div>;\n}\nfunction LeaderboardPage() {\n  const [users, setUsers] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [activeTab, setActiveTab] = useState('teachers');\n  const navigate = useNavigate();\n  useEffect(() => {\n    const fetchUsers = async () => {\n      setLoading(true);\n      try {\n        const allUsers = await client.getEntities('users');\n        const sortedUsers = allUsers.sort((a, b) => {\n          if (activeTab === 'teachers') {\n            return (b.rating || 0) - (a.rating || 0);\n          } else {\n            return (b.sessions || 0) - (a.sessions || 0);\n          }\n        });\n        setUsers(sortedUsers.slice(0, 20));\n      } catch (error) {\n        console.error('Error fetching users:', error);\n      } finally {\n        setLoading(false);\n      }\n    };\n    fetchUsers();\n  }, [activeTab]);\n  return <div className=\"pb-20\">\n      <motion.div initial={{\n      opacity: 0,\n      y: 20\n    }} animate={{\n      opacity: 1,\n      y: 0\n    }}>\n        <div className=\"mb-6\">\n          <h1 className=\"text-3xl font-bold mb-2\">Leaderboard</h1>\n          <p className=\"text-white/70\">Top performers in the SkillSurge community</p>\n        </div>\n        \n        <div className=\"flex space-x-1 rounded-xl bg-black/20 backdrop-blur-md p-1 mb-6\">\n          <TabButton active={activeTab === 'teachers'} onClick={() => setActiveTab('teachers')}>\n            Top Teachers\n          </TabButton>\n          <TabButton active={activeTab === 'learners'} onClick={() => setActiveTab('learners')}>\n            Top Learners\n          </TabButton>\n        </div>\n        \n        {loading ? <div className=\"flex justify-center py-10\">\n            <div className=\"animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-purple-500\"></div>\n          </div> : <div className=\"bg-black/30 backdrop-blur-md rounded-xl border border-white/10 overflow-hidden\">\n            <div className=\"p-4 md:p-6\">\n              <div className=\"grid grid-cols-12 gap-4 border-b border-white/10 pb-3 mb-4 text-white/60 text-sm\">\n                <div className=\"col-span-1\">#</div>\n                <div className=\"col-span-6 md:col-span-5\">User</div>\n                <div className=\"col-span-3 md:col-span-2 text-center\">\n                  {activeTab === 'teachers' ? 'Rating' : 'Sessions'}\n                </div>\n                <div className=\"hidden md:block md:col-span-3\">\n                  {activeTab === 'teachers' ? 'Top Skills' : 'Learning'}\n                </div>\n                <div className=\"col-span-2 md:col-span-1\"></div>\n              </div>\n              \n              <div className=\"space-y-4\">\n                {users.map((user, index) => <div key={user.id} className={`grid grid-cols-12 gap-4 items-center p-2 rounded-lg ${index < 3 ? 'bg-gradient-to-r from-purple-900/30 to-indigo-900/30' : ''}`}>\n                    <div className=\"col-span-1 font-bold\">\n                      {index === 0 && <div className=\"text-yellow-300\">🏆</div>}\n                      {index === 1 && <div className=\"text-gray-300\">🥈</div>}\n                      {index === 2 && <div className=\"text-amber-600\">🥉</div>}\n                      {index > 2 && index + 1}\n                    </div>\n                    \n                    <div className=\"col-span-6 md:col-span-5 flex items-center gap-3\">\n                      <div className=\"w-10 h-10 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex items-center justify-center overflow-hidden\">\n                        {user.avatar ? <img src={user.avatar} alt={user.name} className=\"w-full h-full object-cover\" /> : <span className=\"text-lg font-bold\">{user.name?.[0]?.toUpperCase() || 'U'}</span>}\n                      </div>\n                      <div>\n                        <h3 className=\"font-medium truncate\">{user.name}</h3>\n                        <p className=\"text-white/60 text-xs truncate\">{user.sessions || 0} sessions</p>\n                      </div>\n                    </div>\n                    \n                    <div className=\"col-span-3 md:col-span-2 text-center\">\n                      {activeTab === 'teachers' ? <div className=\"flex items-center justify-center gap-1\">\n                          <span className=\"font-bold\">{user.rating || 0}</span>\n                          <Star className=\"text-yellow-400\" size={16} fill=\"currentColor\" />\n                        </div> : <span className=\"font-bold\">{user.sessions || 0}</span>}\n                    </div>\n                    \n                    <div className=\"hidden md:block md:col-span-3\">\n                      <div className=\"flex flex-wrap gap-1\">\n                        {activeTab === 'teachers' ? <>\n                            {user.skills && user.skills.length > 0 ? user.skills.slice(0, 2).map((skill, i) => <span key={i} className=\"text-xs px-2 py-0.5 rounded-full bg-purple-800/30 border border-purple-500/30\">\n                                  {skill}\n                                </span>) : <span className=\"text-white/40 text-xs\">No skills</span>}\n                          </> : <>\n                            {user.interests && user.interests.length > 0 ? user.interests.slice(0, 2).map((interest, i) => <span key={i} className=\"text-xs px-2 py-0.5 rounded-full bg-cyan-800/30 border border-cyan-500/30\">\n                                  {interest}\n                                </span>) : <span className=\"text-white/40 text-xs\">No interests</span>}\n                          </>}\n                      </div>\n                    </div>\n                    \n                    <div className=\"col-span-2 md:col-span-1 text-right\">\n                      <button onClick={() => navigate(`/user/${user.id}`)} className=\"text-purple-300 hover:text-purple-200 transition-colors\">\n                        <ChevronRight size={20} />\n                      </button>\n                    </div>\n                  </div>)}\n                \n                {users.length === 0 && <div className=\"text-center py-8\">\n                    <p className=\"text-white/60\">No data available for the leaderboard</p>\n                  </div>}\n              </div>\n            </div>\n          </div>}\n      </motion.div>\n    </div>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"react-router-dom\":\"6.18.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@devfunlabs/state-client\":\"0.8.1\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.35\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.95.3\",\"react-dom\":\"18.2.0\"}}","appFunctions",[],"token",{"_20":81,"_82":81,"_83":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_99":100,"_61":101,"_72":19},"buidl","symbol","image","https://pump.mypinata.cloud/ipfs/QmPR3CamxoBQW892uHDT2EGRxFvksiJyrEg1ajZYVqJhnf?img-width=256&img-dpr=2","website","https://buidl.eco/","twitter","https://x.com/buidldao_","marketcap",1650947.28,"volumeIn24h",152021.71,"price",0.001649,"priceChangeIn24h",-25.06,"devCount",319,"appCount",2177,83722,"upstreamApp","isLordOfDev","analytics",[106,110,112,114,116,118,120,122,124,126,128,130,132,134],{"_107":108,"_109":59},"day","2025-09-24","runCount",{"_107":111,"_109":59},"2025-09-25",{"_107":113,"_109":59},"2025-09-26",{"_107":115,"_109":59},"2025-09-27",{"_107":117,"_109":59},"2025-09-28",{"_107":119,"_109":59},"2025-09-29",{"_107":121,"_109":59},"2025-09-30",{"_107":123,"_109":59},"2025-10-01",{"_107":125,"_109":59},"2025-10-02",{"_107":127,"_109":59},"2025-10-03",{"_107":129,"_109":59},"2025-10-04",{"_107":131,"_109":59},"2025-10-05",{"_107":133,"_109":59},"2025-10-06",{"_107":135,"_109":59},"2025-10-07","snapshot","ogImage","https://cdn.dev.fun/og/image/79110023cd703aec27c2/e1859dbe.webp","isDevbase","project",{"_14":19,"_83":84,"_20":81,"_142":143,"_22":143},"oneliner","buidl n shpi 4 fun haha!","commitDetail","livestream","actionData","errors"]
</article></body></html>