import streamlit as st
from rag import answer_question

# Set page config
st.set_page_config(
    page_title="Cory Booker's Marathon Speech", page_icon="🇺🇸", layout="wide"
)

# Custom CSS
st.markdown(
    """
    <style>
    /* Force light mode */
    [data-testid="stAppViewContainer"] {
        background-color: #f8f9fa;
    }
    [data-testid="stSidebar"] {
        background-color: #f8f9fa;
    }
    .stApp {
        background-color: #f8f9fa;
        color: #000000;
    }
    .main {
        background-color: #f8f9fa;
    }
    .stButton>button {
        background-color: #1a237e;
        color: white;
        border-radius: 5px;
        padding: 10px 20px;
        border: none;
        font-weight: bold;
    }
    .stButton>button:hover {
        background-color: #0d47a1;
    }
    .stTextArea>div>div>textarea {
        border-radius: 5px;
        border: 2px solid #e0e0e0;
    }
    .highlight-text {
        background-color: #fff3cd;
        padding: 2px 5px;
        border-radius: 3px;
        font-weight: bold;
        color: #000000;
    }
    .answer-text {
        color: #000000;
        font-size: 16px;
        line-height: 1.6;
    }
    .section-title {
        color: #000000;
        font-weight: bold;
    }
    .section-text {
        color: #000000;
    }
    /* Override any dark mode styles */
    .stMarkdown {
        color: #000000;
    }
    .stTextInput>div>div>input {
        background-color: #ffffff;
        color: #000000;
    }
    </style>
""",
    unsafe_allow_html=True,
)

# Header with American flag emoji
st.title("🇺🇸 Cory Booker's Historic Speech")


st.markdown(
    """
    <div style='background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px;'>
        <h3 class="section-title">Source Material</h3>
        <p class="section-text">The transcript is derived from videos in this playlist: 
        <a href='https://www.youtube.com/playlist?list=PLeifkaZBt4JtdT8DZ7aftJ0lU0Q6Hfnvz' target='_blank'>YouTube Playlist</a></p>
    </div>
""",
    unsafe_allow_html=True,
)
# Search section
st.markdown(
    """
    <div style='background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px;'>
        <h2 class="section-title">Explore the Speech</h2>
        <p class="section-text">Ask questions about Senator Booker's historic <span class="highlight-text">25-hour speech</span> below:</p>
    </div>
""",
    unsafe_allow_html=True,
)

text = st.text_area(
    "Your Question",
    height=150,
    placeholder="What would you like to know about Senator Booker's speech?",
)

if st.button("Search", key="search_button"):
    with st.spinner("Searching through the historic transcript..."):
        response = answer_question(text)
        st.markdown(
            """
            <div style='background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-top: 20px;'>
                <h3 class="section-title">Answer:</h3>
                <p class="answer-text">{}</p>
            </div>
        """.format(
                response
            ),
            unsafe_allow_html=True,
        )

        # Add disclaimer about LLM hallucinations
        st.markdown(
            """
            <div style='background-color: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px; border: 1px solid #ffeeba;'>
                <p style='color: #856404; margin: 0;'>Please verify important facts and consult primary sources when possible.</p>
            </div>
        """,
            unsafe_allow_html=True,
        )

# Footer
st.markdown(
    """
    <div style='text-align: center; margin-top: 40px;'>
        <p class="section-text">🇺🇸 Celebrating American Democracy and the Power of Speech 🇺🇸</p>
        <p class="section-text" style='font-size:   14px;'>Made with ❤️ by <a href="https://nkasmanoff.github.io/" target="_blank">Noah K</a></p>
    </div>
""",
    unsafe_allow_html=True,
)