function MainComponent() { const [sports, setSports] = useState([]); const [selectedSport, setSelectedSport] = useState(""); const [coaches, setCoaches] = useState([]); const [loading, setLoading] = useState(true); const [loadingMore, setLoadingMore] = useState(false); const [error, setError] = useState(null); const [searchName, setSearchName] = useState(""); const [priceRange, setPriceRange] = useState({ min: "", max: "" }); const [offset, setOffset] = useState(0); const [hasMore, setHasMore] = useState(true); const [priceError, setPriceError] = useState(""); const limit = 9; const debouncedSearch = useCallback((value)=>{ const handler = setTimeout(()=>setSearchName(value), 500); return ()=>clearTimeout(handler); }, []); useEffect(()=>{ const fetchSports = async ()=>{ try { const response = await fetch("/api/sports/list", { method: "POST" }); if (!response.ok) { throw new Error("Failed to fetch sports"); } const data = await response.json(); setSports(data || []); } catch (err) { console.error(err); setError("Failed to load sports"); setSports([]); } }; fetchSports(); }, []); const fetchCoaches = async (currentOffset = 0)=>{ if (currentOffset === 0) { setLoading(true); } else { setLoadingMore(true); } setError(null); try { const response = await fetch("/api/coaches/list", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: { ...selectedSport && { sport: selectedSport }, ...searchName && { name: searchName }, ...priceRange.min && { minPrice: parseFloat(priceRange.min) }, ...priceRange.max && { maxPrice: parseFloat(priceRange.max) }, offset: currentOffset, limit } }) }); const data = await response.json(); if (!response.ok) { throw new Error(data.message || "Failed to fetch coaches"); } if (!Array.isArray(data.coaches)) { throw new Error("Invalid response format from server"); } setCoaches((prev)=>{ const updatedCoaches = currentOffset === 0 ? data.coaches : [ ...prev, ...data.coaches ]; return updatedCoaches; }); setHasMore(data.coaches.length === limit); } catch (err) { console.error("Error fetching coaches:", err); setError("Could not load the coach list. Please try again later."); if (currentOffset === 0) { setCoaches([]); } } finally{ if (currentOffset === 0) { setLoading(false); } else { setLoadingMore(false); } } }; useEffect(()=>{ if (priceRange.min && priceRange.max && Number(priceRange.min) > Number(priceRange.max)) { setPriceError("Minimum price cannot be greater than maximum price"); } else { setPriceError(""); setOffset(0); fetchCoaches(); } }, [ selectedSport, searchName, priceRange.min, priceRange.max ]); const loadMore = ()=>{ const newOffset = offset + limit; setOffset(newOffset); fetchCoaches(newOffset); }; const handleClearFilters = ()=>{ setSelectedSport(""); setSearchName(""); setPriceRange({ min: "", max: "" }); }; const CoachSkeleton = ()=>/*#__PURE__*/ React.createElement("div", { className: "bg-white dark:bg-[#2C5354] rounded-lg shadow-sm overflow-hidden animate-pulse", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-w-16 aspect-h-12 bg-gray-200 dark:bg-gray-700", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-3/4 mb-4", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-4", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-20", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-6 bg-gray-200 dark:bg-gray-700 rounded w-20", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-2 mb-4", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "h-20 bg-gray-200 dark:bg-gray-700 rounded mb-6", __source: { fileName: "", lineNumber: 126, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded w-32", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this })))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 dark:bg-[#2C5354]", __source: { fileName: "", lineNumber: 135, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12", __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-bold font-inter text-gray-900 dark:text-white mb-4", __source: { fileName: "", lineNumber: 138, columnNumber: 11 }, __self: this }, "FitConnect"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, "Filter by sport and connect with experienced coaches")), /*#__PURE__*/ React.createElement("div", { className: "mb-8 space-y-4 bg-white dark:bg-[#2C5354] p-6 rounded-lg shadow-sm", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, "Sport"), /*#__PURE__*/ React.createElement("select", { value: selectedSport, onChange: (e)=>setSelectedSport(e.target.value), className: "w-full px-4 py-2 rounded-lg border border-[#4A8B8C] dark:border-[#7FFFD4] bg-white dark:bg-[#2C5354] text-gray-900 dark:text-white focus:ring-2 focus:ring-[#7FFFD4] focus:border-transparent", name: "sport", __source: { fileName: "", lineNumber: 151, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, "All Sports"), sports.map((sport)=>/*#__PURE__*/ React.createElement("option", { key: sport.id, value: sport.name, __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, sport.name)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }, "Search by Name"), /*#__PURE__*/ React.createElement("input", { type: "text", onChange: (e)=>debouncedSearch(e.target.value), className: "w-full px-4 py-2 rounded-lg border border-[#4A8B8C] dark:border-[#7FFFD4] bg-white dark:bg-[#2C5354] text-gray-900 dark:text-white focus:ring-2 focus:ring-[#7FFFD4] focus:border-transparent", placeholder: "Enter coach name", name: "search", __source: { fileName: "", lineNumber: 169, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, "Price Range (KES/hour)"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 181, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", value: priceRange.min, onChange: (e)=>{ const value = e.target.value; if (value === "" || Number(value) >= 0) { setPriceRange((prev)=>({ ...prev, min: value })); } }, min: "0", className: "w-full px-4 py-2 rounded-lg border border-[#4A8B8C] dark:border-[#7FFFD4] bg-white dark:bg-[#2C5354] text-gray-900 dark:text-white focus:ring-2 focus:ring-[#7FFFD4] focus:border-transparent", placeholder: "Min", name: "min-price", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, "-"), /*#__PURE__*/ React.createElement("input", { type: "number", value: priceRange.max, onChange: (e)=>{ const value = e.target.value; if (value === "" || Number(value) >= 0) { setPriceRange((prev)=>({ ...prev, max: value })); } }, min: "0", className: "w-full px-4 py-2 rounded-lg border border-[#4A8B8C] dark:border-[#7FFFD4] bg-white dark:bg-[#2C5354] text-gray-900 dark:text-white focus:ring-2 focus:ring-[#7FFFD4] focus:border-transparent", placeholder: "Max", name: "max-price", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleClearFilters, className: "px-6 py-2 text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white font-inter", __source: { fileName: "", lineNumber: 215, columnNumber: 13 }, __self: this }, "Clear All Filters"))), error && /*#__PURE__*/ React.createElement("div", { className: "text-center text-red-500 mb-8 font-inter", __source: { fileName: "", lineNumber: 225, columnNumber: 11 }, __self: this }, error), loading && coaches.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 231, columnNumber: 11 }, __self: this }, [ ...Array.from({ length: 6 }) ].map((_, i)=>/*#__PURE__*/ React.createElement(CoachSkeleton, { key: i, __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }))) : coaches.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-600 dark:text-gray-300 font-inter h-64 flex items-center justify-center", __source: { fileName: "", lineNumber: 237, columnNumber: 11 }, __self: this }, "No coaches found") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 242, columnNumber: 13 }, __self: this }, coaches.map((coach)=>/*#__PURE__*/ React.createElement("div", { key: coach.id, className: "bg-white dark:bg-[#2C5354] rounded-lg shadow-sm overflow-hidden", __source: { fileName: "", lineNumber: 244, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-w-16 aspect-h-12", __source: { fileName: "", lineNumber: 248, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: coach.profile_image_url || "/default-avatar.jpg", alt: `${coach.name}'s profile picture showing them in a professional setting`, className: "w-full h-full object-cover", onError: (e)=>{ e.target.src = "/default-avatar.jpg"; }, __source: { fileName: "", lineNumber: 249, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 258, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-inter text-gray-900 dark:text-white mb-2", __source: { fileName: "", lineNumber: 259, columnNumber: 21 }, __self: this }, coach.name), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-4", __source: { fileName: "", lineNumber: 262, columnNumber: 21 }, __self: this }, Array.isArray(coach.sports) && coach.sports.map((sport, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "px-3 py-1 bg-[#7FFFD4] text-[#4A8B8C] rounded-full text-sm font-inter", __source: { fileName: "", lineNumber: 265, columnNumber: 27 }, __self: this }, sport))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 space-y-2", __source: { fileName: "", lineNumber: 273, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 274, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock mr-2", __source: { fileName: "", lineNumber: 275, columnNumber: 25 }, __self: this }), coach.years_experience, " years of experience"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter", __source: { fileName: "", lineNumber: 278, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dollar-sign mr-2", __source: { fileName: "", lineNumber: 279, columnNumber: 25 }, __self: this }), "KES ", coach.hourly_rate.toLocaleString(), "/hour")), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 dark:text-gray-300 font-inter mb-6 line-clamp-3", __source: { fileName: "", lineNumber: 283, columnNumber: 21 }, __self: this }, coach.bio), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 286, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/create-booking/${coach.id}`, onClick: (e)=>{ console.log("Navigating to:", `/create-booking/${coach.id}`); }, className: "inline-block bg-[#7FFFD4] text-[#4A8B8C] rounded-lg px-6 py-2 font-inter hover:bg-[#4A8B8C] hover:text-[#7FFFD4] transition-colors", __source: { fileName: "", lineNumber: 287, columnNumber: 23 }, __self: this }, "Book Now")))))), hasMore && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-8", __source: { fileName: "", lineNumber: 305, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: loadMore, disabled: loadingMore, className: "bg-[#7FFFD4] text-[#4A8B8C] rounded-lg px-6 py-2 font-inter hover:bg-[#4A8B8C] hover:text-[#7FFFD4] transition-colors disabled:opacity-50", __source: { fileName: "", lineNumber: 306, columnNumber: 17 }, __self: this }, loadingMore ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 312, columnNumber: 21 }, __self: this }) : null, loadingMore ? "Loading..." : "Load More"))), priceError && /*#__PURE__*/ React.createElement("div", { className: "text-center text-red-500 mt-4 font-inter", __source: { fileName: "", lineNumber: 321, columnNumber: 11 }, __self: this }, priceError))); }