<!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);

            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`;
                    });
                }
            }, [isLoggedIn, user]);

            const onLogin = async () => {
                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);
                            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');
                        alert('It seesm popup window is blocked by the browser. Please allow popups for the login');
                    }
                } catch (e) {
                    alert("Failed to open login window. Please allow pop-ups for this site.");
                    console.error(e);
                }
            };

            const onLogout = async () => {
                document.cookie = 'access_token=; 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>
                    </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>
