import streamlit as st
import pandas as pd
import pickle
import json
from utils import create_new_features, normalize, bucketize, init_new_pred

st.set_page_config(layout="wide")

# Load model and files
with open('./trained_model.pkl', 'rb') as file:
    model = pickle.load(file)
with open("./min_dict.json", "r") as f:
    min_dict = json.load(f)
with open("./max_dict.json", "r") as f:
    max_dict = json.load(f)
with open("./cities_geo.json", "r") as f:
    cities_geo = json.load(f)

# Custom CSS to adjust the slider width
st.markdown("""
    <style>
    .slider-container {
        max-width: 400px;  /* Adjust the width to your preference */
        margin-bottom: 20px;
    }
    </style>
    """, unsafe_allow_html=True)

# Create two columns: one for the city and one for the map
col1, col2 = st.columns([1, 2])  # Adjust the width ratios as needed

with col1:
    st.subheader('Features')
    
    with st.container(height=800, border=False):
        city = st.selectbox('City', list(cities_geo.keys()))  # Display city dropdown in the first column
        waterfront = st.checkbox('Waterfront', value=False)
        
        st.markdown('<div class="slider-container">', unsafe_allow_html=True)
        bedrooms = st.slider('Bedrooms', min_value=min_dict['bedrooms'], max_value=max_dict['bedrooms'], value=3)
        bathrooms = st.slider('Bathrooms', min_value=min_dict['bathrooms'], max_value=max_dict['bathrooms'], value=2)
        sqft_living = st.slider('Square Feet (Living)', min_value=min_dict['sqft_living'], max_value=max_dict['sqft_living'], value=1000)
        sqft_lot = st.slider('Square Feet (Lot)', min_value=min_dict['sqft_lot'], max_value=max_dict['sqft_lot'], value=2000)
        floors = st.slider('Floors', min_value=min_dict['floors'], max_value=max_dict['floors'], value=1)
        view = st.slider('View', min_value=min_dict['view'], max_value=max_dict['view'], value=0)
        condition = st.slider('Condition', min_value=min_dict['condition'], max_value=min_dict['condition'], value=3)
        sqft_above = st.slider('Square Feet (Above)', min_value=min_dict['sqft_above'], max_value=max_dict['sqft_above'], value=1000)
        sqft_basement = st.slider('Square Feet (Basement)', min_value=min_dict['sqft_basement'], max_value=max_dict['sqft_basement'], value=0)
        yr_built = st.slider('Year Built', min_value=min_dict['yr_built'], max_value=max_dict['yr_built'], value=2000)
        yr_renovated = st.slider('Year Renovated', min_value=min_dict['yr_renovated'], max_value=min_dict['yr_renovated'], value=2010)
        st.markdown('</div>', unsafe_allow_html=True)

    st.markdown('</div>', unsafe_allow_html=True)
    
    new_pred = init_new_pred()
    new_pred['bedrooms'] = bedrooms
    new_pred['bathrooms'] = bathrooms
    new_pred['sqft_living'] = sqft_living
    new_pred['sqft_lot'] = sqft_lot
    new_pred['floors'] = floors
    new_pred['waterfront'] = int(waterfront)
    new_pred['view'] = view
    new_pred['condition'] = condition
    new_pred['sqft_above'] = sqft_above
    new_pred['sqft_basement'] = sqft_basement
    new_pred['yr_built'] = yr_built
    new_pred['yr_renovated'] = yr_renovated
    new_pred[f'city_{city}'] = 1

    # Process the prediction
    new_pred = pd.DataFrame([new_pred])
    new_pred = create_new_features(new_pred)
    new_pred = bucketize(new_pred)
    new_pred = normalize(new_pred)

    # Predict the price
    predicted_price = model.predict(new_pred)

with col2:
    # Placeholder for displaying the predicted price at the top
    price_placeholder = st.empty()
    price_placeholder.markdown(
        f"<h1 style='font-size: 24px;'>Predicted Price: ${predicted_price[0][0]:,.2f}</h1>",
        unsafe_allow_html=True)
    map_data = pd.DataFrame(cities_geo[city])
    st.map(map_data, zoom=11)