import streamlit as st
from rag_retriever import initialize_llm, initialize_pinecone, create_query_engine, get_response

# Initialize LLM and Pinecone
initialize_llm()
index = initialize_pinecone()
query_engine = create_query_engine(index)

# Inject custom CSS for aesthetics
st.markdown("""
    <style>
    /* General styling */
    body {
        background-color: white;
        color: black;  /* Black text */
    }
    
    /* Chatbot title styling */
    .title {
        font-size: 48px;
        color: #004d00; /* Dark green */
        text-align: center;
        font-family: 'Arial', sans-serif;
    }
    
    /* Response styling */
    .response {
        font-size: 20px;
        color: black; /* Black text */
        background-color: #f5f5f5; /* Light gray background */
        border-radius: 10px;
        padding: 20px;
        margin: 20px 0;
        font-family: 'Arial', sans-serif;
    }

    /* Button styling */
    button {
        background-color: #004d00;  /* Dark green */
        color: white; /* White text */
        font-size: 18px;
        padding: 10px;
        border-radius: 5px;
        width: 100%;
    }

    /* Text area styling */
    textarea {
        border: 1px solid #004d00; /* Dark green border */
        border-radius: 5px;
        padding: 10px;
        font-size: 16px;
        color: black; /* Black text */
    }
    
    /* Footer styling */
    footer {
        text-align: center;
        font-size: 14px;
        color: #004d00; /* Dark green */
        margin-top: 50px;
    }
    </style>
    """, unsafe_allow_html=True)

# Add the image at the top
image_url = "https://th.bing.com/th/id/OIP.9aA0fOLzb4r7HUPzWKvUiwAAAA?rs=1&pid=ImgDetMain"  # Replace this with your image URL
st.markdown(f"""
    <div style='text-align: center;'>
        <img src="{image_url}" width="300">
    </div>
    """, unsafe_allow_html=True)


# Create a Streamlit app
st.markdown("<div class='title'>KYC Virtual Assistant</div>", unsafe_allow_html=True)
st.markdown("### Ask me anything about our company!")

# Create a text input field for the user to enter their query
query = st.text_area("Your Question:", "", height=100)

# Create a button to trigger the response generation
if st.button("Get Answer"):
    # Get the response from the query engine
    response = get_response(query_engine, query)
    # Display the response
    st.markdown(f"<div class='response'>{response}</div>", unsafe_allow_html=True)

# Add some whitespace to make the app look more spacious
st.write("\n\n")

# Add a footer with some text
st.markdown("<footer>Powered by KYC SUD CONSULTING</footer>", unsafe_allow_html=True)