import gradio as gr

CSS = """
body {
    background: #f7f7f8;
    margin: 0;
    font-family: Arial;
}

.gradio-container {
    max-width: 820px;
    margin: auto;
}

.header {
    position: sticky;
    top: 0;
    background: white;
    padding: 12px;
    border-bottom: 1px solid #ddd;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    z-index: 10;
}

.chatbot {
    height: 520px;
    overflow-y: auto;
    padding: 10px;
}

textarea {
    border-radius: 20px !important;
    padding: 10px !important;
}

button {
    border-radius: 12px !important;
}

.input-area {
    position: sticky;
    bottom: 0;
    background: white;
    padding: 10px;
    border-top: 1px solid #ddd;
}

.plus-btn {
    background: #eee !important;
}

.send-btn {
    background: #10a37f !important;
    color: white !important;
}

footer {display:none;}
"""

def build_ui(login_fn, send_fn):
    with gr.Blocks(css=CSS) as app:

        email = gr.State("")
        name = gr.State("")
        plan = gr.State("")
        relation = gr.State("")

        # ===== HEADER =====
        gr.HTML("<div class='header'>🤖 BDAi By Azad</div>")

        # ===== LOGIN =====
        with gr.Row():
            email_input = gr.Textbox(
                placeholder="Gmail দিয়ে লগইন করুন...",
                show_label=False,
                scale=4
            )
            login_btn = gr.Button("Login", scale=1)

        status = gr.Textbox(label="Status", interactive=False)

        # ===== CHAT =====
        chatbot = gr.Chatbot(elem_classes="chatbot")

        # ===== INPUT =====
        with gr.Row(elem_classes="input-area"):
            plus = gr.Button("＋", elem_classes="plus-btn", scale=1)
            msg = gr.Textbox(
                placeholder="মেসেজ লিখুন...",
                show_label=False,
                scale=8
            )
            send = gr.Button("➤", elem_classes="send-btn", scale=1)

        # ===== LOGIN ACTION =====
        login_btn.click(
            login_fn,
            inputs=email_input,
            outputs=[email, name, plan, relation, status]
        )

        # ===== SEND =====
        send.click(
            send_fn,
            inputs=[email, name, plan, relation, msg, chatbot],
            outputs=[chatbot, msg, status]
        )

        msg.submit(
            send_fn,
            inputs=[email, name, plan, relation, msg, chatbot],
            outputs=[chatbot, msg, status]
        )

    return app