import streamlit as st
import pandas as pd
import altair as alt

st.set_page_config(layout="centered")

# Load data
url = "https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/building_inventory.csv"
df = pd.read_csv(url)
df.columns = df.columns.str.strip()

st.title("Building Inventory Visualization")

# Dataset preview
st.markdown("### Dataset Preview")
st.dataframe(df.head())

# ---- Visualization 1 ----
st.subheader("Visualization 1: Average Square Footage by County")
chart1 = alt.Chart(df).mark_bar().encode(
    x=alt.X('County:O', sort='-y'),
    y=alt.Y('mean(Square Footage):Q'),
    tooltip=['County', 'mean(Square Footage):Q']
).properties(width=600, height=400)

st.altair_chart(chart1, use_container_width=True)

# Write-up for Plot 2 
st.markdown("#### Write-up for Visualization 1")
st.markdown(
    """
    <div style='text-align: justify'>
    This bar chart shows the average square footage of buildings in each county. I chose a bar mark because it 
    clearly shows comparisons across counties. I used ordinal encoding on the x-axis for county names and a quantitative 
scale on the y-axis to represent average square footage. Tooltips help provide exact values on hover. If I had more time, 
I would group counties by region or use color to cluster similar square footage ranges for better visual grouping.
    </div>
    """,
    unsafe_allow_html=True
)


# ---- Visualization 2 ----
st.subheader("Visualization 2: Number of Buildings by Usage")
usage_count = df['Usage Description'].value_counts().reset_index()
usage_count.columns = ['Usage', 'Count']

chart2 = alt.Chart(usage_count.head(10)).mark_bar().encode(
    x=alt.X('Usage:O', sort='-y'),
    y=alt.Y('Count:Q'),
    color='Usage:N',
    tooltip=['Usage', 'Count']
).properties(width=600, height=400)

st.altair_chart(chart2, use_container_width=True)

# Write-up for Plot 2 
st.markdown("#### Write-up for Visualization 2")
st.markdown(
    """
    <div style='text-align: justify'>
    The second chart is an interactive line graph showing how the average square footage of the top five building usage 
types changed over time, grouped into 5-year intervals. The color scheme separates each usage type, and a dropdown lets 
users highlight one at a time. The size of the line increases for the selected category to make it stand out. I used symlog 
scaling for better visibility of trends. If I had more time, I’d improve tooltip details to include total building count and perhaps allow filtering by county.
    </div>
    """,
    unsafe_allow_html=True
)