import gradio as gr
import time

# 개구리 점프 GIF (상단 UI + 로딩 애니메이션)
FROG_GIF = "https://media.giphy.com/media/ICOgUNjpvO0PC/giphy.gif"
gr.Image("frog_jump.gif", show_label=False)

# ----------------------------------------------------
# 1) LLM 엔진 선택 처리
# ----------------------------------------------------
def switch_engine(engine_name):
    # 개구리가 점프하는 효과를 주기 위한 출력
    frog_html = f"""
    <div style='text-align:center;'>
        <img src="{FROG_GIF}" width="130"><br>
        <p>🐸 개구리가 {engine_name} 엔진으로 점프 중... gegulgegul...</p>
    </div>
    """
    return frog_html

# ----------------------------------------------------
# 2) 챗 기능
# ----------------------------------------------------
def chat(engine, history, message):
    # 메시지 보낼 때 개구리 점프 애니메이션 출력
    loading_html = f"""
    <div style='text-align:center;'>
        <img src="{FROG_GIF}" width="120">
        <p>🐸 개구리가 생각 중... gegulgegul...</p>
    </div>
    """
    yield history + [(message, loading_html)]

    # === LLM 연결은 나중에 키 넣으면 변경 가능 ===
    # 임시로 반응만 출력
    time.sleep(0.8)
    response = f"{engine} 엔진 응답: {message} (임시 Mock 응답)"

    yield history + [(message, response)]

# ----------------------------------------------------
# 3) 최상단 개구리 헤더 HTML
# ----------------------------------------------------
header_html = f"""
<div style='text-align:center; margin-bottom:20px;'>
    <img src="{FROG_GIF}" width="150"><br>
    <h1>🐸 Upscale Frog — Multi-LLM RAG Engine</h1>
    <p>gegulgegul v1.0 — Full Frog Edition</p>
</div>
"""

# ----------------------------------------------------
# 4) Gradio UI
# ----------------------------------------------------
def ui():

    with gr.Blocks(css=".gradio-container {background-color: #101010;}") as demo:

        # 상단 개구리 헤더
        gr.HTML(header_html)

        # LLM 선택 박스
        engine_choice = gr.Dropdown(
            ["GPT-4o-mini", "Gemini-Pro", "Grok-Mixtral"],
            label="LLM 엔진 선택"
        )

        # 엔진 바꿀 때 개구리 점프 출력
        engine_output = gr.HTML()
        engine_choice.change(fn=switch_engine, inputs=engine_choice, outputs=engine_output)

        chat_history = gr.Chatbot()
        message_box = gr.Textbox(label="메시지 입력")

        # 전송 버튼
        send_btn = gr.Button("Send")

        send_btn.click(
            fn=chat,
            inputs=[engine_choice, chat_history, message_box],
            outputs=chat_history
        )

    return demo

demo = ui()
demo.launch()