function MainComponent() { const [isDarkMode, setIsDarkMode] = React.useState(true); const [isAuthenticated, setIsAuthenticated] = React.useState(false); const [user, setUser] = React.useState(null); const [error, setError] = React.useState(null); React.useEffect(()=>{ // Load theme preference from localStorage const savedTheme = localStorage.getItem("theme"); if (savedTheme === "light") { setIsDarkMode(false); } // Check for token in URL hash after Spotify redirect const hash = window.location.hash; if (hash) { const params = new URLSearchParams(hash.substring(1)); const token = params.get("access_token"); if (token) { console.log("Received token from Spotify"); localStorage.setItem("spotify_token", token); setIsAuthenticated(true); window.location.hash = ""; // Clear the hash // Immediately validate token and fetch user profile fetch("https://api.spotify.com/v1/me", { headers: { Authorization: `Bearer ${token}` } }).then((response)=>{ if (!response.ok) throw new Error("Token validation failed"); return response.json(); }).then((data)=>{ console.log("Successfully fetched user profile"); setUser(data); }).catch((error)=>{ console.error("Error validating new token:", error); localStorage.removeItem("spotify_token"); setIsAuthenticated(false); setUser(null); setError("Failed to validate Spotify session. Please try again."); }); } } else { // Check for existing token const storedToken = localStorage.getItem("spotify_token"); if (storedToken) { console.log("Found stored token, validating..."); fetch("https://api.spotify.com/v1/me", { headers: { Authorization: `Bearer ${storedToken}` } }).then((response)=>{ if (!response.ok) throw new Error("Token validation failed"); return response.json(); }).then((data)=>{ console.log("Successfully validated stored token"); setUser(data); setIsAuthenticated(true); }).catch((error)=>{ console.error("Error validating stored token:", error); localStorage.removeItem("spotify_token"); setIsAuthenticated(false); setUser(null); setError("Session expired. Please sign in again."); }); } } }, []); const toggleTheme = ()=>{ const newTheme = !isDarkMode; setIsDarkMode(newTheme); localStorage.setItem("theme", newTheme ? "dark" : "light"); }; const handleLogout = ()=>{ // Clear all auth-related data localStorage.removeItem("spotify_token"); setIsAuthenticated(false); setUser(null); // Redirect to home and force a page refresh to clear any cached states window.location.href = "/"; }; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${isDarkMode ? "bg-gray-900 text-white" : "bg-gray-50 text-gray-900"}`, __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, !isAuthenticated ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleTheme, className: `p-2 rounded-lg ${isDarkMode ? "bg-gray-800 text-yellow-400 hover:bg-gray-700" : "bg-gray-200 text-gray-800 hover:bg-gray-300"} transition-colors`, "aria-label": isDarkMode ? "Switch to light mode" : "Switch to dark mode", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isDarkMode ? "fa-sun" : "fa-moon"}`, __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: `${isDarkMode ? "bg-red-900/50 border-red-500 text-red-200" : "bg-red-100 border-red-300 text-red-800"} border rounded-lg p-4 mb-6 max-w-md w-full`, __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }), error)), /*#__PURE__*/ React.createElement("img", { src: isDarkMode ? "https://ucarecdn.com/6f297d77-5888-42f4-a551-ba1d107517b7/-/format/auto/" : "https://ucarecdn.com/1e84d683-e934-4041-aa72-4469324ec252/-/format/auto/", alt: "theLINEUP Logo", className: "w-32 h-32 mb-6", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, "theLINEUP"), /*#__PURE__*/ React.createElement("p", { className: `${isDarkMode ? "text-gray-400" : "text-gray-600"} max-w-md mx-auto mb-8 text-center`, __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "Your ultimate festival companion - analyze lineups, create playlists, and discover your music taste"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 137, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `https://accounts.spotify.com/authorize?client_id=0df52714426f4f1c9392baabd81a7499&response_type=token&redirect_uri=${encodeURIComponent("https://thelineupapp.online")}&scope=${encodeURIComponent("user-top-read user-read-recently-played playlist-modify-public playlist-modify-private user-read-private user-read-email playlist-read-private playlist-read-collaborative")}&show_dialog=true`, className: "bg-[#1DB954] hover:bg-[#1ed760] text-white font-bold py-4 px-8 rounded-full flex items-center transition-colors", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-spotify mr-2", __source: { fileName: "", lineNumber: 146, columnNumber: 15 }, __self: this }), "Connect with Spotify"), /*#__PURE__*/ React.createElement("a", { href: "/about", className: `block text-center ${isDarkMode ? "text-gray-400 hover:text-white" : "text-gray-600 hover:text-gray-900"} transition-colors`, __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, "Learn more about theLINEUP"))) : /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${isDarkMode ? "bg-gray-900 text-white" : "bg-gray-50 text-gray-900"}`, __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${isDarkMode ? "bg-gray-900 border-gray-800" : "bg-white border-gray-200"} border-b p-4`, __source: { fileName: "", lineNumber: 167, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center space-x-4 hover:opacity-80 transition-opacity", __source: { fileName: "", lineNumber: 171, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: isDarkMode ? "https://ucarecdn.com/6f297d77-5888-42f4-a551-ba1d107517b7/-/format/auto/" : "https://ucarecdn.com/1e84d683-e934-4041-aa72-4469324ec252/-/format/auto/", alt: "theLINEUP Logo", className: "w-8 h-8", __source: { fileName: "", lineNumber: 175, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 184, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 185, columnNumber: 19 }, __self: this }, "theLINEUP"), user && /*#__PURE__*/ React.createElement("p", { className: isDarkMode ? "text-gray-400" : "text-gray-600", __source: { fileName: "", lineNumber: 187, columnNumber: 21 }, __self: this }, "Welcome, ", user.display_name))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleTheme, className: `p-2 rounded-lg ${isDarkMode ? "bg-gray-800 text-yellow-400 hover:bg-gray-700" : "bg-gray-200 text-gray-800 hover:bg-gray-300"} transition-colors`, "aria-label": isDarkMode ? "Switch to light mode" : "Switch to dark mode", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isDarkMode ? "fa-sun" : "fa-moon"}`, __source: { fileName: "", lineNumber: 207, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "/about", className: `${isDarkMode ? "text-gray-400 hover:text-white" : "text-gray-600 hover:text-gray-900"} transition-colors`, __source: { fileName: "", lineNumber: 209, columnNumber: 17 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("button", { onClick: handleLogout, className: `${isDarkMode ? "bg-gray-800 hover:bg-gray-700" : "bg-gray-200 hover:bg-gray-300"} text-current px-4 py-2 rounded-lg transition-colors text-sm`, __source: { fileName: "", lineNumber: 219, columnNumber: 17 }, __self: this }, "Sign Out")))), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto p-4 sm:p-6 lg:p-8", __source: { fileName: "", lineNumber: 234, columnNumber: 11 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: `${isDarkMode ? "bg-red-900/50 border-red-500 text-red-200" : "bg-red-100 border-red-300 text-red-800"} border rounded-lg p-4 mb-6`, __source: { fileName: "", lineNumber: 236, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 239, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-exclamation-circle mr-2", __source: { fileName: "", lineNumber: 240, columnNumber: 19 }, __self: this }), error)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 246, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/top-50-artists-tracker", className: `${isDarkMode ? "bg-gray-900 hover:bg-gray-800" : "bg-white hover:bg-gray-50 shadow-sm"} rounded-xl p-6 transition-colors group`, __source: { fileName: "", lineNumber: 248, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 252, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-music text-3xl text-[#1DB954] mr-4", __source: { fileName: "", lineNumber: 253, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 254, columnNumber: 19 }, __self: this }, "Your Top Artists")), /*#__PURE__*/ React.createElement("p", { className: isDarkMode ? "text-gray-400" : "text-gray-600", __source: { fileName: "", lineNumber: 256, columnNumber: 17 }, __self: this }, "View your top 50 most listened to artists on Spotify"), /*#__PURE__*/ React.createElement("span", { className: "text-[#1DB954] group-hover:translate-x-2 transition-transform inline-flex items-center mt-4", __source: { fileName: "", lineNumber: 259, columnNumber: 17 }, __self: this }, "View Artists", /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right ml-2", __source: { fileName: "", lineNumber: 261, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("a", { href: "/lineup-analyzer", className: `${isDarkMode ? "bg-gray-900 hover:bg-gray-800" : "bg-white hover:bg-gray-50 shadow-sm"} rounded-xl p-6 transition-colors group`, __source: { fileName: "", lineNumber: 266, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 270, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera text-3xl text-purple-500 mr-4", __source: { fileName: "", lineNumber: 271, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 272, columnNumber: 19 }, __self: this }, "Analyze Festival Lineup")), /*#__PURE__*/ React.createElement("p", { className: isDarkMode ? "text-gray-400" : "text-gray-600", __source: { fileName: "", lineNumber: 276, columnNumber: 17 }, __self: this }, "Upload a festival lineup image to see which artists you know"), /*#__PURE__*/ React.createElement("span", { className: "text-purple-500 group-hover:translate-x-2 transition-transform inline-flex items-center mt-4", __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }, "Analyze Lineup", /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right ml-2", __source: { fileName: "", lineNumber: 281, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: `md:col-span-2 ${isDarkMode ? "bg-gray-900" : "bg-white shadow-sm"} rounded-xl p-6`, __source: { fileName: "", lineNumber: 286, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 289, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-list text-3xl text-[#1DB954] mr-4", __source: { fileName: "", lineNumber: 290, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 291, columnNumber: 19 }, __self: this }, "Festival Playlist Generator")), /*#__PURE__*/ React.createElement("p", { className: isDarkMode ? "text-gray-400" : "text-gray-600", __source: { fileName: "", lineNumber: 295, columnNumber: 17 }, __self: this }, "Upload a festival lineup image and get a Spotify playlist with the top 5 tracks from each artist"), /*#__PURE__*/ React.createElement("a", { href: "/spotify-landing", className: "inline-flex items-center bg-[#1DB954] hover:bg-[#1ed760] text-white font-bold py-3 px-6 rounded-lg transition-colors mt-4", __source: { fileName: "", lineNumber: 299, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mr-2", __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }), "Create Festival Playlist")), /*#__PURE__*/ React.createElement("a", { href: "/packing-list", className: `md:col-span-2 ${isDarkMode ? "bg-gray-900 hover:bg-gray-800" : "bg-white hover:bg-gray-50 shadow-sm"} rounded-xl p-6 transition-colors group`, __source: { fileName: "", lineNumber: 309, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 313, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-suitcase text-3xl text-orange-500 mr-4", __source: { fileName: "", lineNumber: 314, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 315, columnNumber: 19 }, __self: this }, "Festival Packing List")), /*#__PURE__*/ React.createElement("p", { className: isDarkMode ? "text-gray-400" : "text-gray-600", __source: { fileName: "", lineNumber: 317, columnNumber: 17 }, __self: this }, "Never forget essential items with our smart packing checklist for different festival types"), /*#__PURE__*/ React.createElement("span", { className: "text-orange-500 group-hover:translate-x-2 transition-transform inline-flex items-center mt-4", __source: { fileName: "", lineNumber: 321, columnNumber: 17 }, __self: this }, "Open Packing List", /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right ml-2", __source: { fileName: "", lineNumber: 323, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("a", { href: "/set-time-planner", className: `md:col-span-2 ${isDarkMode ? "bg-gray-900 hover:bg-gray-800" : "bg-white hover:bg-gray-50 shadow-sm"} rounded-xl p-6 transition-colors group`, __source: { fileName: "", lineNumber: 328, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 332, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-3xl text-blue-500 mr-4", __source: { fileName: "", lineNumber: 333, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 334, columnNumber: 19 }, __self: this }, "Set Time Planner")), /*#__PURE__*/ React.createElement("p", { className: isDarkMode ? "text-gray-400" : "text-gray-600", __source: { fileName: "", lineNumber: 336, columnNumber: 17 }, __self: this }, "Get festival set times and create your personalized schedule"), /*#__PURE__*/ React.createElement("span", { className: "text-blue-500 group-hover:translate-x-2 transition-transform inline-flex items-center mt-4", __source: { fileName: "", lineNumber: 339, columnNumber: 17 }, __self: this }, "Plan Your Schedule", /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right ml-2", __source: { fileName: "", lineNumber: 341, columnNumber: 19 }, __self: this }))))))); }