import gradio as gr
import requests
import json
import os

# API kimlik bilgileri
API_KEY = os.environ.get("API_KEY")
API_URL = os.environ.get("API_URL")

# Logo path'ini burada belirtin
LOGO_PATH = "osstart-desen.png"  # Logo dosya yolunu buraya yazın

def chat_with_dify(message):
    if not message.strip():
        return "Lütfen bir mesaj girin."

    headers = {
        "Authorization": f"Bearer {API_KEY}",
        "Content-Type": "application/json"
    }
    
    payload = {
        "inputs": {},
        "query": message,
        "response_mode": "blocking",
        "conversation_id": None,
        "user": "gradio-user"
    }
    
    try:
        response = requests.post(API_URL, headers=headers, json=payload)
        
        if response.status_code != 200:
            print(f"API Yanıt Kodu: {response.status_code}")
            print(f"API Yanıt İçeriği: {response.text}")
            return f"API hatası: {response.status_code} - {response.text}"
        
        result = response.json()
        return result.get("answer", "Yanıt alınamadı.")
        
    except requests.exceptions.RequestException as e:
        print(f"İstek hatası: {e}")
        return f"API hatası: {str(e)}"
    except json.JSONDecodeError as e:
        print(f"JSON ayrıştırma hatası: {e}")
        return "Yanıt ayrıştırılamadı."

css = """
:root {
    --background-color: #ffffff;  /* Siyah arka plan */
    --secondary-bg: #ffffff;      /* Siyah ikincil arka plan */
    --text-color: #000000;        /* Beyaz metin */
    --primary-color: #3498db;     /* Mavi vurgu rengi */
    --border-color: #333333;      /* Daha koyu gri kenarlar */
    --hover-color: #222222;       /* Koyu gri hover rengi */
}

body {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

.container {
    max-width: 1200px !important;
    width: 90% !important;
    margin: auto !important;
    padding: 20px !important;
    background-color: var(--background-color) !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

.title {
    text-align: center !important;
    margin-bottom: 10px !important;
    font-size: 2.5em !important;
    color: var(--text-color) !important;
}

.chatbot {
    width: 100% !important;
    height: 600px !important;
    margin-bottom: 20px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    min-width: 800px !important;
}

.input-row {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-bottom: 10px !important;
}

.message-input {
    flex-grow: 1 !important;
}

.message-input textarea {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--border-color) !important;
}

.send-button {
    background-color: var(--primary-color) !important;
    color: var(--text-color) !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.send-button:hover {
    background-color: #2980b9 !important;
    transform: translateY(-1px) !important;
}

.message {
    background-color: var(--background-color) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    margin: 4px 0 !important;
    padding: 8px !important;
    border-radius: 4px !important;
}

/* Gradio specifikasyon stilleri */
.dark {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

.dark input, .dark textarea {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.dark label {
    color: var(--text-color) !important;
}

/* Tüm Gradio bileşenlerinin arka planını siyah yap */
.gradio-container {
    background-color: var(--background-color) !important;
}

.contain {
    background-color: var(--background-color) !important;
}

.wrap {
    background-color: var(--background-color) !important;
}

/* Chatbot mesajlarının stilini ayarla */
.message-wrap {
    background-color: var(--background-color) !important;
}

.message-wrap .user-message {
    background-color: #222 !important;
    color: var(--text-color) !important;
}

.message-wrap .bot-message {
    background-color: #333 !important;
    color: var(--text-color) !important;
}
"""

with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="blue", neutral_hue="gray", text_size="lg")) as demo:
    with gr.Column(elem_classes="container"):
        # Logo ve başlık
        gr.Image(value=LOGO_PATH, show_label=False, container=False, width=150, height=150)
        gr.Markdown("# Eco19 AI Asistan", elem_classes="title")
        
        chatbot = gr.Chatbot(
            elem_classes="chatbot",
            height=500,
            show_label=False
        )
        
        with gr.Row(elem_classes="input-row"):
            # Mesaj giriş alanı
            with gr.Column(scale=8, elem_classes="message-input"):
                msg = gr.Textbox(
                    label="Mesajınız",
                    placeholder="Bir mesaj yazın...",
                    show_label=False
                )
            
            # Gönder butonu
            with gr.Column(scale=1):
                send = gr.Button("➤", elem_classes="send-button")
    
    def respond(message, chat_history):
        if not message.strip():
            return message, chat_history
            
        bot_message = chat_with_dify(message)
        chat_history.append((message, bot_message))
        return "", chat_history
    
    send.click(
        respond,
        inputs=[msg, chatbot],
        outputs=[msg, chatbot]
    )
    
    msg.submit(
        respond,
        inputs=[msg, chatbot],
        outputs=[msg, chatbot]
    )

if __name__ == "__main__":
    demo.launch(debug=True, share=True)