import streamlit as st
from crew.research_article_suggester import RecentArticleSuggester
from streamlit_extras.capture import stdout

def main():
    st.set_page_config(page_title='Recent Article Suggester', page_icon='📰', layout='wide')

    st.markdown(
        """
        <style>
        .main {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
        }
        .centered {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .title {
            font-family: 'Helvetica', sans-serif;
            font-weight: bold;
            font-size: 36px;
            color: #1f77b4;
        }
        .description {
            font-family: 'Helvetica', sans-serif;
            font-size: 18px;
            color: #333333;
            margin-top: 10px;
        }
        .subheader {
            font-family: 'Helvetica', sans-serif;
            font-weight: bold;
            font-size: 24px;
            color: #ff7f0e;
            margin-top: 20px;
        }
        .element {
            background-color: #ffffff;
            padding: 1rem;
            border-radius: 8px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 1rem;
        }
        .element h3 {
            font-size: 24px;
            color: #1f77b4;
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            padding :10px;

        }
        .element ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .element li {
            font-size: 16px;
            color: #333333;
            margin-bottom: 0.5rem;
        }
        .element li b {
            font-size: 22px;
        }

        </style>
        """,
        unsafe_allow_html=True
    )

    st.markdown("<div class='container'>", unsafe_allow_html=True)

    st.markdown(
        """
        <div class="centered">
            <p class="title">Recent Article Suggester</p>
            <p class="description">Discover recent articles based on your topic of interest using advanced AI.</p>
        </div>
        """,
        unsafe_allow_html=True
    )

    st.sidebar.markdown("<p class='sidebar-header'>Search for the papers you are interested in:</p>", unsafe_allow_html=True)
    topic = st.sidebar.text_input('Enter a topic:', 'GenAI', key='topic_input', help='Enter a topic of interest')

    if st.sidebar.button('Get Suggestions'):

        with st.status(
            "🤖 **Agents at work...**", state="running", expanded=True
        ) as status:
            with st.container(height=500, border=False):
                log_container = st.empty()
                with stdout(log_container.code, terminator=""):
                    suggester = RecentArticleSuggester()
                    inputs = {"topic": topic}
                    results = suggester.kickoff(inputs=inputs)
            status.update(
                label="✅ Articles are Ready for Reading!",
                state="complete",
                expanded=False,
            )

        st.subheader("", anchor=False, divider="rainbow")

        if results is None:
            st.markdown('No articles found.', unsafe_allow_html=True)
        else:

            st.markdown('<p class="subheader">Results:</p>', unsafe_allow_html=True)

            for element in results:
                st.markdown(
                    f"""
                    <div class="element">
                        <h3><a href="{element['url']}" target="_blank">{element['title']}</a></h3>
                        <ul>
                            {"".join(f"<li style='font-size: 20px;'><b>{key.capitalize()}:</b> {value}</li>" for key, value in element.items() if key != "title")}
                        </ul>
                    </div>
                    """,
                    unsafe_allow_html=True
                )

if __name__ == "__main__":
    main()