import gradio as gr
from langchain_core.messages import HumanMessage
import src.passage_finder as pf
import src.srf_bot as sb
import src.generic_bot as gb
import prompts.system_prompts as sp
import os

# Initialize chatbot
generic_chatbot = gb.GenericChatbot()

# Chatbot functions
def respond_genericchatbot(query, history):
    formatted_query = [HumanMessage(content=query)]
    # Invoke the graph with properly formatted input
    result = generic_chatbot.graph.invoke({"messages": formatted_query}, generic_chatbot.config)
    # Get the passages from the graph and append to history if documents exist
    state = generic_chatbot.graph.get_state(config=generic_chatbot.config).values
    documents = state.get("documents")
    passages = ''
    if documents and len(documents) > 0:
        for d in documents:
            passages += f'<b>{d.metadata["publication_name"]} - {d.metadata["chapter_name"]}</b>\n{d.page_content}\n\n'
        history.append((f'Passages: {query}', passages))
    # Extract the assistant's response and append to history
    response = result["messages"][-1].content
    history.append((query, response))
    return history

# Define the CSS
css = """
body { background-color: #f0f0f0; }
.gradio-container { background-color: #ffffff; }
.gr-button { background-color: #333333; color: white; font-size: 18px; padding: 10px; }
.gr-textbox textarea { font-size: 18px; color: black; }
.gr-dropdown { font-size: 18px; color: black; }
.source-box { background-color: white; padding: 10px; border-radius: 8px; margin-top: 20px; color: black; border: 1px solid #D0D0D0; }

/* Dark mode and responsive styles */
@media (prefers-color-scheme: dark) {
    .gradio-container { background-color: #1e1e1e; color: white; }
    h1, h2, p { color: white; }
    .gr-textbox textarea { background-color: #333333; color: white; }
    .gr-button { background-color: #555555; color: white; }
    .gr-dropdown { background-color: #333333; color: white; }
    .source-box { background-color: #333333; color: white; border: 1px solid #555555; }
}

@media (max-width: 600px) {
    .gr-row { flex-direction: column !important; }
    .gr-column { width: 100% !important; }
}
"""

with gr.Blocks(css=css) as demo:
    gr.Markdown("# Generic Chatbot")
    
    chatbot_output = gr.Chatbot(height=600)
    user_input = gr.Textbox(placeholder="Type your question here...", label="Your Question")
    submit_button = gr.Button("Submit")
    
    gr.Markdown("""
    <div class="source-box">
        <strong>Available sources:</strong>
        <ul>
            <li>Journey to Self-Realization</li>
            <li>The Second Coming of Christ</li>
            <li>Autobiography of a Yogi</li>
        </ul>
    </div>
    """)
    
    submit_button.click(
        fn=respond_genericchatbot,
        inputs=[user_input, chatbot_output],
        outputs=[chatbot_output]
    )

# Access the secrets
username = os.getenv("USERNAME")
password = os.getenv("PASSWORD")

# Launch the interface
demo.launch(share=True, auth=(username, password), debug=True)