import gradio as gr
from agent import handle_user_query

quick_quizzes = [
    "What is Soroban in Stellar?",
    "List top Stellar wallets.",
    "Explain the Horizon API in simple terms.",
    "Show me key Stellar docs.",
    "Fetch content from https://stellar.org",
]

with gr.Blocks(
    theme=gr.themes.Default(
        primary_hue="blue",   # Stellar-like deep blue
        secondary_hue="orange"  # Orange accent (send buttons etc.)
    )
) as demo:
    gr.Markdown("""
<div style='text-align: center;'>
    <h1 style='font-size: 2em; color: #1a3c8b;'>✨ Stellar Knowledge Agent</h1>
    <p style='font-size: 1em; color: #444;'>Ask about Stellar, Soroban, wallets, Horizon — your Web3 companion!</p>
</div>
""")

    chatbot = gr.Chatbot(
        label="💬 Stellar Assistant",
        bubble_full_width=False,
        height=400,
        elem_classes="chatbot-style"
    )

    msg = gr.Textbox(
        placeholder="Type your Stellar question here & hit Enter...",
        show_label=False
    )

    with gr.Row():
        for quiz in quick_quizzes:
            gr.Button(
                quiz,
                elem_classes="quiz-btn"
            ).click(
                lambda q=quiz: ([(q, handle_user_query(q))], ""),
                outputs=[chatbot, msg]
            )

    send_btn = gr.Button("🚀 Send", elem_classes="send-btn")

    def respond(history, user_message):
        answer = handle_user_query(user_message)
        history.append((user_message, answer))
        return history, ""

    # Press Enter or click Send
    msg.submit(respond, inputs=[chatbot, msg], outputs=[chatbot, msg])
    send_btn.click(respond, inputs=[chatbot, msg], outputs=[chatbot, msg])

    # Custom CSS to make it prettier
    demo.css = """
    .chatbot-style { 
        border: 2px solid #1a3c8b; 
        border-radius: 12px;
    }
    .send-btn {
        background: #f97316 !important;   /* Orange */
        color: white !important;
        border-radius: 8px;
        font-weight: bold;
    }
    .quiz-btn {
        background: #1a3c8b !important;   /* Deep Stellar blue */
        color: white !important;
        margin: 2px;
        border-radius: 6px;
        font-size: 0.9em;
    }
    """

demo.launch()