from dotenv import load_dotenv
from streamlit_extras.stylable_container import stylable_container
from app.ui.til_feedback import feedback_main
from app.ui.course_learn_suggest_expectations import course_suggester_main
import math
import streamlit as st
import subprocess
import streamlit_router as sr

load_dotenv()

subprocess.run(["playwright", "install", "chromium"])

st.set_page_config(page_title='Growthy AI Workflows', page_icon='📰',layout="wide")

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

def common_sidebar():
    st.sidebar.markdown("# Sidebar Navigation")
    st.sidebar.markdown("---")
    st.sidebar.markdown("### Pages")
    st.sidebar.button("Home", on_click=lambda: router.redirect(*router.build("show_main_page")))
    st.sidebar.button("TIL Feedback", on_click=lambda: router.redirect(*router.build("feedback_main_wrapper")))
    st.sidebar.button("Course Suggester", on_click=lambda: router.redirect(*router.build("course_builder_main_wrapper")))



def show_main_page():
    page_bg_img = '''
        <style>
        [data-testid="stAppViewContainer"]{
            background-image:url("https://www.shutterstock.com/image-vector/abstract-technology-communication-concept-vector-600nw-1914443275.jpg");
            background-size:cover;
        }
        [data-testid="stHeader"]{
            background: rgba(0,0,0,0);
        }
        [data-testid="stToolbar"]{
            right: 2rem;
        }
        [data-testid="column"] {
                text-align: center;
                                }

        </style>
        '''
    st.markdown(page_bg_img, unsafe_allow_html=True)

    css = load_css("app/ui/main.css")

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

    st.markdown('<div class="main-title">Welcome to Growthy AI Workflows!</div>', unsafe_allow_html=True)
    st.markdown("---")

    card_info = [
    {"title": "TIL Feedback", "description": "Provide your valuable feedback.", "key": "feedback_main_wrapper", "image": "📝"},
    {"title": "Course Builder", "description": "Get suggestions for building courses", "key": "course_builder_main_wrapper", "image": "📚"},

]

    num_cols = 3
    num_rows = math.ceil(len(card_info) / num_cols)

    col1, col2, col3 = st.columns([1,8,1])

    with col2:
        for row in range(num_rows):
            cols = st.columns(num_cols,gap="large")
            for col in range(num_cols):
                index = row * num_cols + col
                if index < len(card_info):
                    card = card_info[index]
                    with cols[col]:
                        with st.container(height=280,border=False):
                            with stylable_container(
                                key="inside_container_with_border",

                                css_styles="""
                                        {
                                            background-color: #e9eaec;
                                            border-radius: 10px;
                                            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
                                            # padding:10px;
                                            display: flex;
                                            flex-direction: row;
                                            flex-wrap: wrap;
                                            align-items: center;
                                            justify-content: center;
                                            border: 1px solid #C0C0C0;
                                            text-align: center;
                                            margin-bottom: 10px;
                                        }  """,
                                ):
                                    st.markdown(
                                        f"""
                                        <div style="
                                            font-size: 4rem;
                                            margin-bottom: 10px;
                                        ">
                                            {card['image']}
                                        </div>
                                        """, unsafe_allow_html=True
                                    )
                                    st.markdown(
                                        f"""
                                        <div style=" display: flex; flex-wrap:wrap; flex-direction: column; text-align: center; justify-content: center; align-items: center">
                                            <span style="font-weight:900; font-size: 24px;"> {card["title"]}</span>
                                            <p class="styled-description">{card["description"]}</p>
                                        </div>
                                        """, unsafe_allow_html=True
                                    )
                                    if st.button("Explore", key=card["key"]):
                                            router.redirect(*router.build(f"{card['key']}"))

                                    st.markdown(
                                    """
                                    <style>
                                    # [data-testid="stImage"] img {
                                    #     padding:10px;
                                    #     height: 100px;
                                    #     width: 100px;
                                    #     border-radius: 50%;
                                    #     border: 2px solid white;

                                    #  }

                                    [data-testid="column"] div[data-testid="column"]{
                                            margin: 10px;
                                        }
                                    </style>
                                    """, unsafe_allow_html=True
                                            )


def feedback_main_wrapper():
    common_sidebar()
    feedback_main()

def course_builder_main_wrapper():
    common_sidebar()
    course_suggester_main()



router = sr.StreamlitRouter()

router.register(show_main_page, '/')
router.register(feedback_main_wrapper, '/feedback', methods=['GET'])
router.register(course_builder_main_wrapper, '/course_builder')


router.serve()