import os
import time
import requests
import gradio as gr

# 🔑 Load keys from Hugging Face Secrets (Settings → Repository secrets)
HCAPTCHA_SECRET = os.environ.get("HCAPTCHA_SECRET")  # your secret key
HCAPTCHA_SITEKEY = os.environ.get("HCAPTCHA_SITEKEY")  # your site key

# 🚀 Verify function
def verify_hcaptcha(token, username, password):
    if not token:
        return "❌ Captcha not solved."

    url = "https://hcaptcha.com/siteverify"
    data = {
        "secret": HCAPTCHA_SECRET,
        "response": token
    }
    result = requests.post(url, data=data).json()

    if result.get("success"):
        # You can extend this part to check username/password in a real app
        return f"✅ Success! Welcome, {username or 'user'}"
    else:
        return f"❌ Verification failed: {result}"

with gr.Blocks(css="""
body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; }
h2 { text-align:center; color:#333; }
.card {
  background: white; border-radius: 16px; padding: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1); max-width: 400px; margin: auto;
}
button { border-radius: 12px !important; font-weight: bold; }
.loading {
  display:none; text-align:center; margin-top:10px;
}
""") as demo:

    gr.HTML("<h2>🔒 Login Form with hCaptcha</h2>")

    with gr.Column(elem_classes="card"):
        username = gr.Textbox(label="Username")
        password = gr.Textbox(label="Password", type="password")

        # Hidden box for hCaptcha token
        token_box = gr.Textbox(label="hCaptcha Token", visible=False)

        # Inject hCaptcha widget
        gr.HTML(f"""
        <script src="https://hcaptcha.com/1/api.js" async defer></script>
        <div class="h-captcha" data-sitekey="{HCAPTCHA_SITEKEY}" data-callback="setToken"></div>
        <script>
        function setToken(token) {{
            let textbox = document.querySelector('textarea[aria-label="hCaptcha Token"]');
            if (textbox) {{
                textbox.value = token;
                textbox.dispatchEvent(new Event("input", {{ bubbles: true }}));
            }}
        }}
        </script>
        """)

        with gr.Row():
            submit = gr.Button("Login", variant="primary")

        loading = gr.HTML('<div id="loading" class="loading">⏳ Verifying...</div>')
        output = gr.Textbox(label="Result", interactive=False)

        # Functions for loading state
        def show_loading():
            return gr.HTML.update(value='<div id="loading" class="loading" style="display:block;">⏳ Verifying...</div>')

        def hide_loading():
            return gr.HTML.update(value='<div id="loading" class="loading" style="display:none;">⏳ Verifying...</div>')

        # Chain events: show loader → verify → hide loader
        submit.click(fn=show_loading, inputs=None, outputs=loading).then(
            fn=verify_hcaptcha, inputs=[token_box, username, password], outputs=output
        ).then(
            fn=hide_loading, inputs=None, outputs=loading
        )

demo.launch()