function MainComponent() { const handleSearch = async ()=>{ try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchQuery + " site:youtube.com")}`); if (!response.ok) throw new Error("Search failed"); const data = await response.json(); const youtubeResults = data.items.filter((item)=>item.link.includes("youtube.com/watch")).map((item)=>{ const url = new URL(item.link); const videoId = url.searchParams.get("v"); return { videoId, title: item.title, thumbnail: `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`, channelTitle: item.snippet?.split("-").pop()?.trim() || "YouTube Channel", duration: "4:20", views: Math.floor(Math.random() * 1000000) + "K views", timestamp: "2 days ago" }; }); setSearchResults(youtubeResults); } catch (error) { console.error(error); setError("Search failed. Please try again."); } }; const VideoCard = ({ result, onClick })=>/*#__PURE__*/ React.createElement("div", { onClick: onClick, className: "cursor-pointer group", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-video relative rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: result.thumbnail, alt: result.title, className: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-200", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-2 right-2 bg-black/80 px-2 py-1 text-xs rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, result.duration)), /*#__PURE__*/ React.createElement("div", { className: "mt-3 flex", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-9 h-9 rounded-full bg-[#222222] flex-shrink-0", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium line-clamp-2 text-sm group-hover:text-blue-400", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, result.channelTitle), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, result.views), /*#__PURE__*/ React.createElement("span", { className: "mx-1", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, result.timestamp))))); const [searchQuery, setSearchQuery] = useState(""); const [videoId, setVideoId] = useState(""); const [sidebarCollapsed, setSidebarCollapsed] = useState(false); const [searchResults, setSearchResults] = useState([]); const [currentCategory, setCurrentCategory] = useState("all"); const [playlist, setPlaylist] = useState([]); const [history, setHistory] = useState([]); const [error, setError] = useState(null); const categories = [ { id: "all", icon: "home", label: "Home" }, { id: "trending", icon: "fire", label: "Trending" }, { id: "subscriptions", icon: "play", label: "Watch Later" }, { id: "library", icon: "folder", label: "Library" }, { id: "history", icon: "history", label: "History" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0A0A0A] text-gray-200 font-inter", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `fixed top-0 left-0 h-full bg-[#141414] border-r border-[#222222] transition-all duration-300 z-50 ${sidebarCollapsed ? "w-20" : "w-64"}`, __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-[#222222] flex items-center", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSidebarCollapsed(!sidebarCollapsed), className: "p-2 hover:bg-[#1A1A1A] rounded-full", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-xl", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this })), !sidebarCollapsed && /*#__PURE__*/ React.createElement("h1", { className: "ml-3 font-bold text-xl bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "UTILITY NEXUS")), /*#__PURE__*/ React.createElement("div", { className: "py-4", __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, onClick: ()=>setCurrentCategory(category.id), className: `w-full flex items-center p-3 hover:bg-[#1A1A1A] transition-colors ${currentCategory === category.id ? "bg-[#1A1A1A]" : ""} ${sidebarCollapsed ? "justify-center" : "px-6"}`, __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${category.icon} text-xl`, __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }), !sidebarCollapsed && /*#__PURE__*/ React.createElement("span", { className: "ml-3", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, category.label))))), /*#__PURE__*/ React.createElement("div", { className: `transition-all duration-300 ${sidebarCollapsed ? "ml-20" : "ml-64"}`, __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "sticky top-0 bg-[#0A0A0A] z-40 border-b border-[#222222]", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 max-w-2xl mx-4", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 125, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search videos...", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSearch(), className: "w-full bg-[#1A1A1A] rounded-full px-6 py-3 border border-[#222222] focus:border-blue-500 focus:outline-none pr-12", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 hover:text-blue-400", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-xl", __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, videoId ? /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2", __source: { fileName: "", lineNumber: 148, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "aspect-video bg-black rounded-xl overflow-hidden", __source: { fileName: "", lineNumber: 149, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { src: `https://www.youtube.com/embed/${videoId}?autoplay=1`, className: "w-full h-full", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 150, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 bg-[#141414] rounded-xl p-4 border border-[#222222]", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 159, columnNumber: 19 }, __self: this }, searchResults.find((r)=>r.videoId === videoId)?.title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-4 pb-4 border-b border-[#222222]", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-[#222222]", __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-3", __source: { fileName: "", lineNumber: 164, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 165, columnNumber: 23 }, __self: this }, searchResults.find((r)=>r.videoId === videoId)?.channelTitle), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 171, columnNumber: 23 }, __self: this }, searchResults.find((r)=>r.videoId === videoId)?.views)), /*#__PURE__*/ React.createElement("button", { className: "ml-auto bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-full text-sm font-medium", __source: { fileName: "", lineNumber: 178, columnNumber: 21 }, __self: this }, "Subscribe")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-4", __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 183, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-2 hover:text-blue-400", __source: { fileName: "", lineNumber: 184, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-thumbs-up", __source: { fileName: "", lineNumber: 185, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 186, columnNumber: 25 }, __self: this }, "Like")), /*#__PURE__*/ React.createElement("button", { className: "flex items-center space-x-2 hover:text-blue-400", __source: { fileName: "", lineNumber: 188, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-share", __source: { fileName: "", lineNumber: 189, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 190, columnNumber: 25 }, __self: this }, "Share")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setPlaylist([ ...playlist, videoId ]); }, className: "flex items-center space-x-2 hover:text-blue-400", __source: { fileName: "", lineNumber: 192, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 198, columnNumber: 25 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 199, columnNumber: 25 }, __self: this }, "Save")))))), /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-1 space-y-4", __source: { fileName: "", lineNumber: 206, columnNumber: 15 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>{ setVideoId(result.videoId); setHistory([ ...history, result ]); }, className: "flex space-x-4 cursor-pointer hover:bg-[#1A1A1A] p-2 rounded-xl transition-colors group", __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-40 aspect-video relative rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 216, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: result.thumbnail, alt: result.title, className: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-200", __source: { fileName: "", lineNumber: 217, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-1 right-1 bg-black/80 px-2 py-1 text-xs rounded", __source: { fileName: "", lineNumber: 222, columnNumber: 23 }, __self: this }, result.duration)), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 226, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-medium line-clamp-2 text-sm group-hover:text-blue-400", __source: { fileName: "", lineNumber: 227, columnNumber: 23 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 230, columnNumber: 23 }, __self: this }, result.channelTitle), /*#__PURE__*/ React.createElement("div", { className: "flex items-center text-xs text-gray-400 mt-1", __source: { fileName: "", lineNumber: 233, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 234, columnNumber: 25 }, __self: this }, result.views), /*#__PURE__*/ React.createElement("span", { className: "mx-1", __source: { fileName: "", lineNumber: 235, columnNumber: 25 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 236, columnNumber: 25 }, __self: this }, result.timestamp))))))) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 244, columnNumber: 13 }, __self: this }, currentCategory === "history" ? history.map((result, index)=>/*#__PURE__*/ React.createElement(VideoCard, { key: index, result: result, onClick: ()=>{ setVideoId(result.videoId); setHistory([ ...history, result ]); }, __source: { fileName: "", lineNumber: 247, columnNumber: 21 }, __self: this })) : currentCategory === "subscriptions" ? playlist.map((videoId, index)=>/*#__PURE__*/ React.createElement(VideoCard, { key: index, result: searchResults.find((r)=>r.videoId === videoId) || { videoId, title: "Saved Video", thumbnail: `https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`, channelTitle: "YouTube Channel", duration: "4:20" }, onClick: ()=>setVideoId(videoId), __source: { fileName: "", lineNumber: 258, columnNumber: 23 }, __self: this })) : searchResults.map((result, index)=>/*#__PURE__*/ React.createElement(VideoCard, { key: index, result: result, onClick: ()=>{ setVideoId(result.videoId); setHistory([ ...history, result ]); }, __source: { fileName: "", lineNumber: 273, columnNumber: 23 }, __self: this }))))), error && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-4 right-4 bg-red-900/20 border border-red-800/30 text-red-400 p-4 rounded-lg", __source: { fileName: "", lineNumber: 288, columnNumber: 9 }, __self: this }, error)); }