import streamlit as st
from dotenv import load_dotenv
from streamlit_extras.stylable_container import stylable_container
from PIL import Image
from ui.article_recommendation import main as article_recommendor_main
from ui.research_paper import main as research_article_suggester_main
from ui.til_feedback import main as feedback_main

load_dotenv()


st.set_page_config(page_title='Multi-Page App', page_icon='📰', layout='wide')

def load_css(file_name):
    with open(file_name) as f:
        return f.read()

def main():

    if 'page' not in st.session_state:
        st.session_state.page = "main"

    if st.session_state.page == "main":
        show_main_page()
    elif st.session_state.page == "article_recommendor":
        article_recommendor_main()
    elif st.session_state.page == "research_article_suggester":
        research_article_suggester_main()
    elif st.session_state.page == "feedback":
        feedback_main()

def show_main_page():

    css = load_css("ui/main.css")
    st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)

    st.markdown('<div class="main-title">Welcome to the Multi-Page App!</div>', unsafe_allow_html=True)
    st.markdown("---")
    st.markdown('<div class="sub-header">Navigate to Specific Pages:</div>', unsafe_allow_html=True)

    card_info = [
        {"title": "Article Recommendor", "description": "Discover articles tailored to your interests.", "key": "article_recommendor"},
        {"title": "Recent Article Suggester", "description": "Get suggestions for recent research articles.", "key": "research_article_suggester"},
        {"title": "Feedback", "description": "Provide your valuable feedback.", "key": "feedback"},
    ]

    num_cols = 3
    num_rows = (len(card_info) + num_cols - 1) // num_cols

    with stylable_container(
        key="container_with_border",
        css_styles="""
            {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            """,
    ):
        for row in range(num_rows):
            cols = st.columns(num_cols)
            for col in range(num_cols):
                index = row * num_cols + col
                if index < len(card_info):
                    card = card_info[index]
                    with cols[col]:
                        with stylable_container(
                            key="inside_container_with_border",
                            css_styles="""
                                {
                                    height: 500px;
                                    background-color: #f8f9fa;
                                    border-radius: 10px;
                                    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    flex-wrap: wrap;
                                    padding:10px;
                                """,
                        ):
                            st.markdown(
                                f'''
                                <div class="card">
                                    <h2>{card["title"]}</h2>
                                    <p>{card["description"]}</p>
                                </div>
                                ''', unsafe_allow_html=True)
                            if st.button(f"Go to {card['title']}", key=card["key"]):
                                st.session_state.page = card["key"]

if __name__ == '__main__':
    main()