import streamlit as st

from cref import navigation

SWITCHER_STYLE = """<style>
.benchmarks {position: relative; width: fit-content; font-weight: 700}
.benchmarks summary {display: flex; align-items: center; gap: 0.6rem; padding: 0.1rem 0.6rem 0.1rem 0.3rem;
  margin-left: -0.3rem; border-radius: 0.5rem; font-size: 1.4rem; color: #31333f; cursor: pointer; list-style: none}
.benchmarks summary::-webkit-details-marker {display: none}
.benchmarks summary::after {content: ""; width: 0.45rem; height: 0.45rem; border: solid #6093c4;
  border-width: 0 2.5px 2.5px 0; transform: translateY(-25%) rotate(45deg)}
.benchmarks[open] summary::after {transform: translateY(25%) rotate(-135deg)}
.benchmarks summary:hover, .benchmarks[open] summary {background: #f0f2f6}
.benchmarks div {position: absolute; z-index: 1000; top: calc(100% + 0.3rem); left: -0.3rem; min-width: 10rem;
  padding: 0.3rem; background: #fff; border: 1px solid #e3e6ea; border-radius: 0.6rem;
  box-shadow: 0 6px 20px rgb(0 0 0 / 8%)}
.benchmarks a {display: block; padding: 0.4rem 0.6rem; border-radius: 0.4rem; font-size: 1rem; color: #31333f;
  text-decoration: none}
.benchmarks a:hover {background: #f0f2f6}
.benchmarks a[aria-current="page"] {color: #6093c4}
</style>"""

BENCHMARKS = [("fev-bench", "/"), ("CREF", "/cref")]


# Plain links, so a switch loads the other benchmark afresh instead of keeping fev's sidebar.
def switcher(current: str) -> str:
    links = "".join(
        f'<a href="{href}" aria-current="{"page" if name == current else "false"}">{name}</a>'
        for name, href in BENCHMARKS
    )
    return f'{SWITCHER_STYLE}<details class="benchmarks"><summary>{current}</summary><div>{links}</div></details>'


def run(fev: list[st.Page]) -> None:
    cref = navigation.pages()
    page = st.navigation(fev + cref, position="hidden")
    # huggingface.co/spaces/autogluon/fev-bench?benchmark=cref: Hugging Face passes only the
    # query string into the app, so this opens CREF on the first load.
    if not st.session_state.get("routed"):
        st.session_state["routed"] = True
        if st.query_params.get("benchmark") == "cref" and page not in cref:
            st.switch_page(cref[0])
    if page in cref:
        navigation.page_config()
        with st.container(horizontal=True, vertical_alignment="center", gap="large"):
            st.html(switcher("CREF"), width="content")
            for link in cref:
                st.page_link(link)
    else:
        with st.sidebar:
            st.html(switcher("fev-bench"))
            for link in fev:
                st.page_link(link)
    page.run()