import streamlit as st
from PIL import Image

# Streamlit interface with improved aesthetics
st.set_page_config(page_title="Chatbot Interface", page_icon="🤖")

# Define function to handle user input and display chatbot response
def chatbot_response(user_input):
    response = qa.run(user_input)
    return response

# Custom CSS for dark mode and centering
st.markdown(
    """
    <style>
    body {
        background-color: #1e1e1e;
        color: #ffffff;
    }
    .stButton button {
        background-color: #4CAF50;
        color: white;
    }
    .stTextInput input {
        background-color: #333333;
        color: white;
    }
    .center-text {
        text-align: center;
    }
    .input-container {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }
    .input-container img {
        margin-right: 10px;
    }
    .input-container input {
        flex-grow: 1;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Create columns for logos
col1, col2, col3 = st.columns([2, 3, 2])

with col1:
    st.image("Design 3_22.png", width=150, use_column_width=True)  # Adjust image path and size as needed

with col3:
    st.image("Altereo logo 2023 original - eau et territoires durables.png", width=150, use_column_width=True)  # Adjust image path and size as needed

# Centered title and slogan
st.markdown('<h3 class="center-text">🤖 ALTER-IA BOT,</h3>', unsafe_allow_html=True)
st.markdown('<h7 class="center-text">Votre Réponse à Chaque Défi Méthodologique 📈</h4>', unsafe_allow_html=True)

# Input and button for user interaction
user_input = st.text_input("You:", "", placeholder="Type your question here...")

# Output field with icon
if st.button:
    if user_input.strip() != "":
        bot_response = chatbot_response(user_input)
        st.markdown(
            f"""
            <div class="input-container">
                <img src="{bot_icon}" alt="Bot Icon" width="30">
                <textarea style="flex-grow: 1; background-color: #333333; color: white; padding: 10px; border: none; border-radius: 5px;" rows="5">{bot_response}</textarea>
            </div>
            """,
            unsafe_allow_html=True
        )
    else:
        st.warning("⚠️ Please enter a message.")

# Motivational quote at the bottom
st.markdown("---")
st.markdown("*La collaboration est la clé du succès. Chaque question trouve sa réponse, chaque défi devient une opportunité.*")

# Display icons and text input/output
user_icon = "vector-users-icon.jpg"  # Replace with your user icon path
bot_icon = "robot-chatbot-icon-sign-free-vector.jpg"  # Replace with your bot icon path

# Input field with icon
st.markdown(
    f"""
    <div class="input-container">
        <img src="{user_icon}" alt="User Icon" width="30">
        <input type="text" placeholder="Type your question here..." style="flex-grow: 1; background-color: #333333; color: white; padding: 10px; border: none; border-radius: 5px;">
    </div>
    """,
    unsafe_allow_html=True
)