import gradio as gr

def greet_user(profile: gr.OAuthProfile | None):
    if profile is None:
        return "You are not logged in yet.\n\nPlease use the **Sign In** button above."
    return (
        f"Welcome, User!\n\nYou have successfully logged in"
    )



with gr.Blocks() as demo:
    gr.Markdown("## Hugging Face OAuth Login Demo", elem_id="title")

    with gr.Row():
        login_btn = gr.LoginButton()
        logout_html = gr.HTML(
            """
            <button id='logoutBtn' style="display:none;padding:8px 16px;background:#e74c3c;color:#fff;border:none;border-radius:6px;cursor:pointer;">
              Log Out
            </button>
            <script>
            const token = localStorage.getItem("hf_oauth_access_token");
            if (token) {
                document.getElementById("logoutBtn").style.display = "inline-block";
            }
            document.getElementById("logoutBtn").onclick = () => {
                localStorage.removeItem("hf_oauth_access_token");
                location.reload();
            };
            </script>
            """
        )

    output = gr.Markdown("Checking login status...")

    demo.load(fn=greet_user, inputs=None, outputs=output)

demo.launch()