import streamlit as st

from utils.db import init_db, list_districts

st.set_page_config(page_title="نتائج الانتخابات", page_icon=":material/how_to_vote:", layout="wide")

# Arabic UI needs right-to-left layout, which Streamlit does not provide natively.
st.markdown(
    """
    <style>
    html, body, [class*="css"] { direction: rtl; }
    [data-testid="stSidebar"] { direction: rtl; }

    [data-testid="stAppViewContainer"] h1,
    [data-testid="stAppViewContainer"] h2,
    [data-testid="stAppViewContainer"] h3,
    [data-testid="stAppViewContainer"] h4,
    [data-testid="stAppViewContainer"] h5,
    [data-testid="stAppViewContainer"] h6,
    [data-testid="stAppViewContainer"] p,
    [data-testid="stAppViewContainer"] label,
    [data-testid="stAppViewContainer"] span,
    [data-testid="stMarkdownContainer"],
    [data-testid="stCaptionContainer"],
    [data-testid="stSidebar"] h1,
    [data-testid="stSidebar"] h2,
    [data-testid="stSidebar"] h3,
    [data-testid="stSidebar"] p,
    [data-testid="stSidebar"] label,
    [data-testid="stSidebar"] span {
        text-align: right;
    }

    .stMetric { direction: rtl; }
    [data-testid="stMetricLabel"] { justify-content: flex-end; }
    [data-testid="stMetricValue"] { direction: ltr; text-align: right; }
    div[data-testid="stDataFrame"] { direction: ltr; }

    /* Widget labels sit above their input; keep them hugging the right edge. */
    [data-testid="stWidgetLabel"] { text-align: right; width: 100%; }
    [data-testid="stWidgetLabel"] > label { justify-content: flex-end; width: 100%; }

    /* The sidebar's drag-to-resize handle is positioned with an LTR-only
       inline offset (`right: -6px`) that the forced RTL layout above breaks,
       stranding it as a stray vertical line mid-page. Resizing isn't needed
       here, so disable the handle outright. */
    div[style*="cursor: col-resize"] { display: none !important; }
    </style>
    """,
    unsafe_allow_html=True,
)

init_db()

if "district_id" not in st.session_state:
    districts = list_districts()
    st.session_state.district_id = districts[0]["id"] if districts else None

# Field staff use the app's root URL and only ever see the entry form. The
# admin dashboard lives at its own address (/admin) — visited directly or via
# the discreet sidebar link below — so it never shows up for data-entry users.
page = st.navigation(
    [
        st.Page("app_pages/entry.py", title="إدخال النتائج", icon=":material/edit_note:", default=True),
        st.Page("app_pages/admin.py", title="لوحة الإدارة", icon=":material/admin_panel_settings:", url_path="admin", visibility="hidden"),
    ],
    position="hidden",
)

with st.sidebar:
    st.markdown("### :material/how_to_vote: نظام نتائج الانتخابات")
    st.caption("دائرتا القنيطرة والغرب")
    districts = list_districts()
    if districts:
        options = {d["id"]: d["name"] for d in districts}
        selected = st.selectbox(
            "الدائرة الانتخابية",
            options=list(options.keys()),
            format_func=lambda i: options[i],
            index=list(options.keys()).index(st.session_state.district_id)
            if st.session_state.district_id in options
            else 0,
        )
        st.session_state.district_id = selected

    st.page_link("app_pages/admin.py", label="لوحة الإدارة", icon=":material/admin_panel_settings:")

    st.space("large")
    st.caption(":material/verified: صُمم خصيصًا لعمليات مسك النتائج")

page.run()
