import gradio as gr
from huggingface_hub import InferenceClient
import os

# 1. Verbindung zur KI
hf_token = os.getenv("HF_TOKEN")
client = InferenceClient("Qwen/Qwen2.5-7B-Instruct", token=hf_token)

SYSTEM_PROMPT = "Du bist CocoAi von CocoEntertainment. Du bist loyal, schlau und nutzt Katzen-Emojis 🐱. Antworte immer auf Deutsch."

def chat_fn(message, history):
    # In Gradio 6 ist die History standardmäßig eine Liste von Dictionaries
    api_messages = [{"role": "system", "content": SYSTEM_PROMPT}]
    
    for msg_obj in history:
        api_messages.append(msg_obj)
    
    api_messages.append({"role": "user", "content": str(message)})
    
    # Neue Nachricht zur History für die Anzeige hinzufügen
    history.append({"role": "user", "content": message})
    
    response = ""
    try:
        for msg in client.chat_completion(api_messages, max_tokens=1000, stream=True, temperature=0.7):
            if msg.choices and msg.choices[0].delta.content:
                token = msg.choices[0].delta.content
                response += token
                # Wir geben die aktualisierte Liste zurück
                yield history + [{"role": "assistant", "content": response}]
    except Exception as e:
        yield history + [{"role": "assistant", "content": f"Fehler: {str(e)}"}]

# 2. Design & Styling (CSS)
custom_css = """
.gradio-container { background-color: #f0f4ff !important; font-family: 'Arial', sans-serif !important; }
.message { border-radius: 15px !important; box-shadow: 0px 4px 15px rgba(0,0,0,0.05) !important; }
#input-box { background-color: #ffffff !important; border-radius: 30px !important; border: 2px solid #3b82f6 !important; }
.primary-btn { border-radius: 30px !important; background-color: #3b82f6 !important; color: white !important; font-weight: bold !important; border: none !important; }
footer { display: none !important; }
"""

# 3. GUI Aufbau (Gradio 6 Style)
# 'theme' und 'css' wurden hier entfernt laut deiner Fehlermeldung
with gr.Blocks(title="CocoAi Smooth") as demo:
    with gr.Column():
        gr.Markdown("<h1 style='text-align: center; color: #1e40af;'>🐱 CocoAi</h1>")
        gr.Markdown("<p style='text-align: center; color: #1f2937;'>Intelligent • Loyal • CocoEntertainment</p>")

    # 'type="messages"' entfernt, da Gradio 6 dies nun intern anders oder als Standard handhabt
    chatbot = gr.Chatbot(
        elem_id="chat-box", 
        show_label=False,
        height=450
    )
    
    with gr.Row():
        msg = gr.Textbox(
            show_label=False,
            placeholder="Frag CocoAi etwas...",
            container=True,
            elem_id="input-box",
            scale=7
        )
        btn = gr.Button("Senden", variant="primary", elem_classes="primary-btn", scale=1)
    
    # Events
    submit_event = msg.submit(chat_fn, [msg, chatbot], [chatbot])
    submit_event.then(lambda: "", None, [msg])
    
    btn.click(chat_fn, [msg, chatbot], [chatbot]).then(lambda: "", None, [msg])

if __name__ == "__main__":
    # WICHTIG: In Gradio 6 müssen theme und css hier in launch()
    demo.launch(
        theme=gr.themes.Soft(),
        css=custom_css
    )