<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hypha</title>
    <!-- External Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.24.7/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/marked@2.1.3/lib/marked.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
    <script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
    <!-- Favicon and Icons -->
    <link rel="apple-touch-icon" sizes="180x180" href="./static/img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./static/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./static/img/favicon-16x16.png">
    <!-- Stylesheets -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.3.0/github-markdown-light.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap">
    <!-- Meta Tags -->
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <style>
        /* Navbar should occupy the full width of the page */
        .navbar {
            width: 100%;
            left: 0;
            top: 0;
            position: fixed;
            z-index: 1000;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            right: 0;
            top: 100%; /* This ensures the dropdown starts directly below the icon */
            background-color: #1f2937; /* Darker gray background */
            min-width: 200px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            z-index: 1;
            margin-top: 0; /* Remove any additional margin to prevent gaps */
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-content a {
            color: white;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown-content a:hover {
            background-color: #4b5563; /* Darker shade of gray */
        }
    </style>
</head>

<body class="bg-black text-white font-poppins">
    <div id="app"></div>

    <!-- Render the App component -->
    <script type="text/babel" data-presets="env,react" data-env-targets="defaults, safari >= 12">
        const Navbar = ({ isLoggedIn, user, onLogin, onLogout, onAboutClick }) => {
            return (
                <nav className="navbar flex justify-between items-center p-4 bg-gray-900 shadow-lg">
                    <div className="flex items-center space-x-4">
                        <img src="/static/img/hypha-logo-black.svg" className="h-10 invert" alt="Hypha Logo" />
                    </div>
                    <div className="flex space-x-6">
                        <a href="https://desktop.aicell.io" className="hover:text-gray-400 transition duration-300">Desktop</a>
                        <a href="#" className="hover:text-gray-400 transition duration-300">Marketplace</a>
                        <a href="https://docs.amun.ai/" target="_blank" className="hover:text-gray-400 transition duration-300">Documentation</a>
                        <a href="#" className="hover:text-gray-400 transition duration-300" onClick={onAboutClick}>About</a>
                        {isLoggedIn ? (
                            <div className="dropdown">
                                <button className="hover:text-gray-400 transition duration-300">
                                    <img src={user.picture} alt={user.name} className="inline-block h-10 w-10 rounded-full" />
                                </button>
                                <div className="dropdown-content">
                                    <a href="/public/apps/hypha-login">My Profile</a>
                                    <a href={"./ws-user-" + user.sub}>My Workspace</a>
                                    <a href="#" onClick={onLogout}>Logout</a>
                                </div>
                            </div>
                        ) : (
                            <button onClick={onLogin} className="bg-blue-600 hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-full transition duration-300">
                                Login
                            </button>
                        )}
                    </div>
                </nav>
            );
        };

        const AboutModal = ({ isOpen, onClose, version }) => {
            if (!isOpen) return null;

            return (
                <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 z-50">
                    <div className="bg-gray-900 p-6 rounded-lg shadow-lg text-center">
                        <h2 className="text-2xl font-bold mb-4">About Hypha</h2>
                        <p className="text-gray-400">Version: {version}</p>
                        <p className="text-gray-400">Hypha is a collaborative workspace for data management and AI-powered data analysis.</p>
                        <button
                            className="mt-6 bg-gray-700 px-4 py-2 rounded hover:bg-gray-600 transition duration-300"
                            onClick={onClose}
                        >
                            Close
                        </button>
                    </div>
                </div>
            );
        };

        const FeatureBlock = ({ title, description, icon }) => {
            return (
                <div className="flex flex-col items-center p-6 bg-gray-800 rounded-lg shadow-lg mb-6">
                    <i className={`${icon} fa-3x text-white mb-4`}></i>
                    <div className="text-center">
                        <h3 className="text-xl font-bold">{title}</h3>
                        <p className="text-gray-400">{description}</p>
                    </div>
                </div>
            );
        };

        const Footer = () => {
            return (
                <footer className="bg-gray-900 text-gray-400 py-6 mt-16">
                    <div className="container mx-auto text-center">
                        <p>Hypha is an open-source platform released under the MIT license.</p>
                        <p>
                            Visit our <a href="https://github.com/amun-ai/hypha" target="_blank" className="text-gray-300 hover:text-white">GitHub repository</a> for more information.
                        </p>
                    </div>
                </footer>
            );
        };

        const parseJwt = token => {
            const base64Url = token.split('.')[1];
            const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
            const jsonPayload = decodeURIComponent(atob(base64).split('').map(c => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)).join(''));
            return JSON.parse(jsonPayload);
        };

        const App = () => {
            const [config, setConfig] = React.useState(null);
            const [isModalOpen, setIsModalOpen] = React.useState(false);
            const [isLoggedIn, setIsLoggedIn] = React.useState(false);
            const [user, setUser] = React.useState(null);
            const [loginError, setLoginError] = React.useState(null);

            React.useEffect(() => {
                const fetchConfig = async () => {
                    try {
                        const response = await fetch('./assets/config.json');
                        const configData = await response.json();
                        setConfig(configData);
                        const auth0 = new window.auth0.Auth0Client({
                            domain: configData.auth0_domain,
                            clientId: configData.auth0_client_id,
                            authorizationParams: {
                                audience: configData.auth0_audience,
                            },
                            cacheLocation: 'localstorage',
                            useRefreshTokens: true,
                            useRefreshTokensFallback: true,
                        });

                        const checkAuth = async () => {
                            try {
                                const isAuthenticated = await auth0.isAuthenticated();
                                if (isAuthenticated) {
                                    const userProfile = await auth0.getUser();
                                    setUser(userProfile);
                                    setIsLoggedIn(true);
                                }
                            } catch (e) {
                                console.error(e);
                            }
                        };

                        window.auth0Client = auth0; // Store the Auth0 client in the global window object
                        checkAuth();
                    } catch (error) {
                        console.error('Error fetching config:', error);
                    }
                };

                fetchConfig();
            }, []);

            React.useEffect(() => {
                if(isLoggedIn){
                    window.auth0Client.getTokenSilently({ audience: config.auth0_audience }).then(accessToken => {
                        const decodedToken = parseJwt(accessToken);
                        const exp = decodedToken.exp;
                        const maxAge = exp - Math.floor(Date.now() / 1000);
                        document.cookie = `access_token=${accessToken}; path=/; max-age=${maxAge}; samesite=lax`;
                        document.cookie = `hypha_version=${config.hypha_version}; path=/; max-age=${maxAge}; samesite=lax`;
                    });
                }
            }, [isLoggedIn, user]);

            const onLogin = async () => {
                // Clear any previous errors
                setLoginError(null);
                
                try {
                    // Manually open the popup window
                    const popupWindow = window.open('', '_blank', 'width=500,height=600');
                    if (popupWindow) {
                        try {
                            // Pass the opened popup window to the Auth0 loginWithPopup method
                            await window.auth0Client.loginWithPopup({ audience: config.auth0_audience }, { popup: popupWindow });
                            popupWindow.close(); // Close the popup window after login
                            const userProfile = await window.auth0Client.getUser();
                            setUser(userProfile);
                            setIsLoggedIn(true);
                        } catch (e) {
                            console.error('Login with popup failed', e);
                            // Convert error to string and show in UI
                            let errorMessage = String(e);
                            if (e.message) {
                                errorMessage = e.message;
                            } else if (e.error_description) {
                                errorMessage = e.error_description;
                            }
                            
                            // Enhance email verification error message
                            if (errorMessage.toLowerCase().includes('verify your email') || 
                                errorMessage.toLowerCase().includes('email verification') ||
                                errorMessage.toLowerCase().includes('email not verified')) {
                                errorMessage = "Please check your email and follow the instructions to verify your email address before proceeding with the login. If you don't see the verification email, check your spam folder or try signing up again.";
                            }
                            
                            setLoginError(errorMessage);
                            if (!popupWindow.closed) {
                                popupWindow.close(); // Ensure the popup window is closed in case of failure
                            }
                        }
                    } else {
                        console.error('Unable to open popup window for login');
                        setLoginError('Unable to open popup window for login. Please allow popups for this site.');
                    }
                } catch (e) {
                    console.error(e);
                    setLoginError("Failed to open login window. Please allow pop-ups for this site.");
                }
            };

            const clearLoginState = async () => {
                // Clear cookies
                document.cookie = 'access_token=; path=/; max-age=0; samesite=lax';
                document.cookie = 'hypha_version=; path=/; max-age=0; samesite=lax';
                
                // Clear Auth0 local storage cache
                try {
                    await window.auth0Client.logout({ logoutParams: { returnTo: window.location.href }, localOnly: true });
                } catch (e) {
                    console.log("Error clearing Auth0 local storage:", e);
                }
                
                // Clear React state
                setIsLoggedIn(false);
                setUser(null);
            };

            const onLogout = async () => {
                document.cookie = 'access_token=; path=/; max-age=0; samesite=lax';
                document.cookie = 'hypha_version=; path=/; max-age=0; samesite=lax';
                await window.auth0Client.logout({
                    logoutParams: { returnTo: window.location.origin }
                });
                setIsLoggedIn(false);
                setUser(null);
            };

            const onAboutClick = () => {
                setIsModalOpen(true);
            };

            if (!config) {
                return <div>Loading...</div>; // Show a loading state while fetching config
            }

            return (
                <div>
                    <Navbar isLoggedIn={isLoggedIn} user={user} onLogin={onLogin} onLogout={onLogout} onAboutClick={onAboutClick} />
                    <div className="container mx-auto mt-16 pt-20 text-center">
                        <h1 className="text-4xl font-bold">Welcome to Hypha</h1>
                        <p className="text-xl text-gray-400 mt-4">A collaborative workspace for data analysis</p>
                        {loginError && (
                            <div className="mt-4 max-w-lg mx-auto">
                                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                                    <span className="block sm:inline">{loginError}</span>
                                    <div className="mt-3 flex justify-between items-center">
                                        <button 
                                            onClick={clearLoginState}
                                            className="bg-red-600 hover:bg-red-700 text-white font-bold py-1 px-3 rounded text-sm"
                                        >
                                            Clear Login Info
                                        </button>
                                        <button 
                                            className="text-red-500 hover:text-red-700 font-bold text-lg"
                                            onClick={() => setLoginError(null)}
                                        >
                                            &times;
                                        </button>
                                    </div>
                                </div>
                            </div>
                        )}
                    </div>
                    <div className="m-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <FeatureBlock
                            title="Real-time Collaboration"
                            description="Collaborate with your team in real-time using Hypha's seamless integration."
                            icon="fas fa-users"
                        />
                        <FeatureBlock
                            title="AI Model Serving"
                            description="Serve and manage AI models at scale with Hypha's powerful infrastructure."
                            icon="fas fa-robot"
                        />
                        <FeatureBlock
                            title="Data Management"
                            description="Manage large-scale data with ease using Hypha's intuitive platform."
                            icon="fas fa-database"
                        />
                    </div>
                    <div className="flex justify-center mt-12">
                        <a href="https://docs.amun.ai/#/getting-started" target="_blank">
                            <button className="bg-blue-600 hover:bg-blue-500 text-white font-bold py-3 px-6 rounded-full transition duration-300">
                                Get Started
                            </button>
                        </a>
                    </div>
                    <AboutModal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} version={config.hypha_version} />
                    <Footer />
                </div>
            );
        };

        ReactDOM.render(<App />, document.getElementById('app'));
    </script>
</body>

</html>
