import streamlit as st
import pandas as pd
import requests
import plotly.express as px

st.set_page_config(
    page_title="Female Financial Inclusion",
    layout="wide"
)

URL = "https://data360api.worldbank.org/data360/data?DATABASE_ID=WB_WDI&INDICATOR=WB_WDI_FX_OWN_TOTL_FE_ZS&skip=0"


@st.cache_data(ttl=86400)
def load_data():

    response = requests.get(URL)

    data = response.json()

    df = pd.DataFrame(data["value"])

    df["OBS_VALUE"] = pd.to_numeric(
        df["OBS_VALUE"],
        errors="coerce"
    )

    df["TIME_PERIOD"] = pd.to_numeric(
        df["TIME_PERIOD"],
        errors="coerce"
    )

    return df


df = load_data()

st.title("🌍 Female Financial Account Ownership Dashboard")

st.caption(
    "Source: World Bank Data360 API | Auto Updated"
)

# Sidebar
country_list = sorted(df["REF_AREA"].dropna().unique())

selected_country = st.sidebar.selectbox(
    "Country Code",
    country_list
)

country_df = df[
    df["REF_AREA"] == selected_country
]

# KPI
latest_year = country_df["TIME_PERIOD"].max()

latest_value = country_df[
    country_df["TIME_PERIOD"] == latest_year
]["OBS_VALUE"].iloc[0]

col1, col2 = st.columns(2)

with col1:
    st.metric(
        "Country",
        selected_country
    )

with col2:
    st.metric(
        f"Latest Value ({latest_year})",
        f"{latest_value:.2f}%"
    )

# Trend Chart

fig = px.line(
    country_df.sort_values("TIME_PERIOD"),
    x="TIME_PERIOD",
    y="OBS_VALUE",
    markers=True,
    title="Female Account Ownership Over Time"
)

st.plotly_chart(
    fig,
    use_container_width=True
)

# Latest Ranking

latest_df = df[
    df["TIME_PERIOD"] == df["TIME_PERIOD"].max()
]

latest_df = latest_df.sort_values(
    "OBS_VALUE",
    ascending=False
)

fig_rank = px.bar(
    latest_df.head(20),
    x="REF_AREA",
    y="OBS_VALUE",
    title="Top 20 Countries"
)

st.plotly_chart(
    fig_rank,
    use_container_width=True
)

st.dataframe(df)