import streamlit as st
import pandas as pd
import json

st.set_page_config(layout='wide')

# Load furniture categories and attributes from a JSON file
def load_furniture_data():
    with open('./config/furniture_taxonomy.json', 'r') as file:
        data = json.load(file)
    return data

def load_images():
    with open('./config/images.json', 'r') as file:
        images_data = json.load(file)
    return images_data

def load_videos():
    with open('./config/videos.json', 'r') as file:
        videos_data = json.load(file)
    return videos_data




# Custom CSS to style the buttons
st.markdown("""
<style>
.streamlit-button { background-color: #0052CC; color: white; }
</style>
""", unsafe_allow_html=True)

# Function to filter images based on selected options and category
def filter_images(images_data, selected_options, category):
    matched_images = []
    for image_name, image_info in images_data.items():
        if image_info['category'] == category:
            if all(image_info['attributes'][attribute] in options 
                   for attribute, options in selected_options.items()):
                matched_images.append(image_name)
    return matched_images


    
# Function to display the main page
def main_page(furniture_data):
    st.title("Social Media - What's Trending")
    # Dictionary to store selected options for each attribute
    selected_options = {}

    # Dropdown for selecting furniture category
    categories = list(furniture_data['Furniture'].keys())
    brands = ['Arhaus', 'Crate&Barrel', 'Williams Sonoma', 'Pottery Barn', 'West Elm', 'Z Gallerie']
    
    col1, col2, col3 = st.columns(3)

    with col1:
        category = st.selectbox('Select Category', ['Apparel', 'Furnitures', 'Beauty'])

    with col2:
        brand = st.selectbox('Select Brand', brands)

    with col3:
        selected_category = st.selectbox('Select Category', categories)
    

    # Load attributes based on the selected category
    attributes = furniture_data['Furniture'][selected_category]['attributes']
    columns = st.columns(len(attributes))
        
    # Create a multi-select widget for each attribute with a unique key
    for i, (attribute, options) in enumerate(attributes.items()):
        with columns[i]:
            key = f"{selected_category}_{attribute}"  # Unique key combining category and attribute
            selected_options[attribute] = st.multiselect(f'Choose {attribute}', options, key=key)

    if st.button('Show Trends'):
        # Assuming images_data is loaded from your JSON file
        images_data = load_images()  # Make sure this function is defined and loads your images data
        videos_data = load_videos()
        filtered_images = filter_images(images_data, selected_options, selected_category)
        print(selected_options)
        print(selected_category)
        print(category)
        #filtered_images = ['arhaus_video_5_frame_268.png',
 #'arhaus_video_5_frame_237.png',
 #'arhaus_video_5_frame_269.png']
    
        if filtered_images:
            for image_name in filtered_images:
                source_video = images_data[image_name].get("source_video")
                col1, col2, col3 = st.columns([1, 1, 3])
                with col1:
                    st.image('./images/'+image_name, width=150)  
                with col2: 
                    if source_video and source_video in videos_data:
                        video_url = videos_data[source_video]["url"]
                        #st.video(video_url)
                        video_html = """
                        <video width="320" height="240" controls>
                            <source src="""+ video_url + """ type="video/mp4">
                        </video>
                        """
                        st.markdown(video_html, unsafe_allow_html=True)
                with col3:    
                      # Custom CSS to style the table
                    table_css = """
                    <style>
                        .stDataFrame { 
                            width: 100%; 
                            max-height: 300px; 
                            overflow-y: auto; 
                        }
                        table.dataframe {
                            border-collapse: collapse;
                        }
                        table.dataframe th, table.dataframe td { 
                            border: 1px solid #ddd;
                            padding: 8px;
                            text-align: left;
                        }
                        table.dataframe th {
                            background-color: #f2f2f2;
                        }
                    </style>
                    """
                    if source_video and source_video in videos_data:
                        with st.expander(f"Show Metadata"):
                            video_metadata = videos_data[source_video]
                            # Convert the metadata dictionary to a DataFrame
                            metadata_df = pd.DataFrame(video_metadata.items(), columns=['Attribute', 'Value'])
        
                            # Display the DataFrame as a table
                            st.table(metadata_df)
                        
        else:
            st.write("Not Trending")


# Main app logic
furniture_data = load_furniture_data()

if 'page' not in st.session_state:
    st.session_state.page = 'main'
    
if st.session_state.page == 'main':
    main_page(furniture_data)