import gradio as gr
from openai import OpenAI
import os

# Puter API Konfiguration
PUTER_TOKEN = os.getenv("PUTER_API_KEY")
PUTER_API_BASE = "https://api.puter.com/puterai/openai/v1/"

client = OpenAI(
    api_key=PUTER_TOKEN,
    base_url=PUTER_API_BASE,
)

def respond(message, history, model):
    if history is None:
        history = []
    messages = [{"role": "user", "content": message}]
    try:
        response = client.chat.completions.create(
            model=model,
            messages=messages,
        )
        assistant_reply = response.choices[0].message.content
    except Exception as e:
        assistant_reply = f"**Fehler:** {str(e)}"
    history.append((message, assistant_reply))
    chat_md = "\n\n".join(
        [f"**User:** {u}\n\n**Assistant:** {a}" for u, a in history]
    )
    return chat_md, history, ""

css = """
:root { color-scheme: dark; }
body, .gradio-container { 
    background: #0f1115 !important; 
    color: #e6e6e6 !important; 
    font-family: 'Inter', system-ui, -apple-system, sans-serif; 
}
#title { 
    font-size: 1.8rem; 
    font-weight: 700; 
    margin-bottom: 0.4rem; 
}
#subtitle { 
    color: #b3b3b3; 
    margin-bottom: 1.2rem; 
}
.gr-box, .gr-input, .gr-textbox, .gr-dropdown { 
    background: #151823 !important; 
    border: 1px solid #2a2f3a !important; 
    color: #e6e6e6 !important; 
    border-radius: 12px !important;
}
.gr-button { 
    background: linear-gradient(135deg, #6c5ce7, #00d2ff) !important; 
    color: #fff !important; 
    border-radius: 12px !important; 
    border: none !important; 
    font-weight: 600 !important;
}
.gr-button:hover { 
    filter: brightness(1.08); 
}
#output-markdown { 
    background: #11141b !important; 
    border: 1px solid #2a2f3a !important; 
    border-radius: 16px !important; 
    padding: 16px !important; 
}
"""

with gr.Blocks(css=css) as demo:
    gr.Markdown("# puter.js in Python via OpenAI SDK", elem_id="title")
    state = gr.State([])
    with gr.Row():
        output = gr.Markdown(value="", elem_id="output-markdown")
    with gr.Row():
        model = gr.Dropdown(
            choices=["gpt-4o-mini", "gpt-5.2-codex", "claude-sonnet-4", "gemini-2.5-flash"],
            value="gpt-4o-mini",
            label="Modell auswählen"
        )
    with gr.Row():
        msg = gr.Textbox(
            label="Deine Nachricht",
            placeholder="Schreibe hier...",
            lines=2,
        )
    with gr.Row():
        submit_btn = gr.Button("Senden")
    submit_btn.click(
        fn=respond,
        inputs=[msg, state, model],
        outputs=[output, state, msg]
    )
    msg.submit(
        fn=respond,
        inputs=[msg, state, model],
        outputs=[output, state, msg]
    )

demo.launch()