import streamlit as st
import pandas as pd
import numpy as np

st.set_page_config(page_title="Interactive Streamlit Tutorial", layout="wide")

st.title("Welcome to Streamlit Development Journey 🚀")
st.markdown("*An interactive guide for MBA students - Practice as you learn!*")

with st.sidebar:
    st.header("Navigation Panel")
    page = st.radio(
        "Choose your learning path:",
        ["Text Elements", "Input Widgets", "Layout & Containers", "Data Display", "Interactive Charts"]
    )

if page == "Text Elements":
    st.header("1. Text Elements Playground")
    
    # Learning Section
    st.subheader("📚 Learn")
    with st.expander("See text formatting examples"):
        st.code("""
# Different ways to display text:
st.write('Regular text')
st.markdown('**Bold** and *italic*')
st.title('Main Title')
st.header('Header')
st.subheader('Subheader')
st.code('print("Hello World")')
        """)
    
    # Practice Section
    st.subheader("🔨 Practice")
    st.write("Try these text elements yourself!")
    
    code_input = st.text_area(
        "Type your Streamlit code here:",
        height=100,
        placeholder="Example: st.write('Hello World')"
    )
    
    if st.button("Run Code"):
        try:
            with st.container():
                st.write("Your Output:")
                exec(code_input)
        except Exception as e:
            st.error(f"Error: {str(e)}")

elif page == "Input Widgets":
    st.header("2. Input Widgets Laboratory")
    
    col1, col2 = st.columns(2)
    
    with col1:
        st.subheader("Widget Examples")
        st.write("Try these interactive widgets:")
        
        # Text input
        name = st.text_input("Enter your name:")
        if name:
            st.write(f"Hello, {name}!")
            
        # Number input
        number = st.number_input("Pick a number", 0, 100)
        st.write(f"Your number squared is: {number**2}")
        
        # Slider
        age = st.slider("Select your age", 0, 100, 25)
        st.write(f"You selected: {age} years")
    
    with col2:
        st.subheader("Code Reference")
        st.code("""
# Text input
name = st.text_input("Enter your name:")
if name:
    st.write(f"Hello, {name}!")

# Number input
number = st.number_input("Pick a number", 0, 100)

# Slider
age = st.slider("Select your age", 0, 100, 25)
        """)

elif page == "Layout & Containers":
    st.header("3. Layout Workshop")
    
    st.write("Experiment with different layouts:")
    
    tab1, tab2, tab3 = st.tabs(["Columns", "Expander", "Container"])
    
    with tab1:
        st.write("Create two columns:")
        col1, col2 = st.columns(2)
        with col1:
            st.write("This is column 1")
            st.button("Column 1 Button")
        with col2:
            st.write("This is column 2")
            st.button("Column 2 Button")
            
    with tab2:
        with st.expander("Click to expand"):
            st.write("This content is hidden until expanded!")
            st.slider("Hidden slider", 0, 100)
            
    with tab3:
        with st.container():
            st.write("This is a container")
            st.metric(label="Temperature", value="24 °C", delta="1.2 °C")

elif page == "Data Display":
    st.header("4. Data Display Workshop")
    
    # Create sample data
    df = pd.DataFrame({
        'Name': ['John', 'Emma', 'Alex', 'Sarah'],
        'Age': [28, 24, 32, 27],
        'City': ['New York', 'London', 'Paris', 'Tokyo']
    })
    
    st.subheader("Practice with DataFrames")
    
    # Show data manipulation options
    st.write("Original DataFrame:")
    st.dataframe(df)
    
    # Let users try filtering
    city_filter = st.selectbox("Filter by city:", ['All'] + list(df['City'].unique()))
    if city_filter != 'All':
        filtered_df = df[df['City'] == city_filter]
        st.write("Filtered DataFrame:")
        st.dataframe(filtered_df)

elif page == "Interactive Charts":
    st.header("5. Visualization Lab")
    
    # Generate random data
    chart_data = pd.DataFrame(
        np.random.randn(20, 3),
        columns=['A', 'B', 'C']
    )
    
    # Let users choose chart type
    chart_type = st.selectbox(
        "Select chart type:",
        ["Line Chart", "Bar Chart", "Area Chart"]
    )
    
    if chart_type == "Line Chart":
        st.line_chart(chart_data)
    elif chart_type == "Bar Chart":
        st.bar_chart(chart_data)
    else:
        st.area_chart(chart_data)
    
    st.code("""
# Create charts
st.line_chart(chart_data)
st.bar_chart(chart_data)
st.area_chart(chart_data)
    """)

# Footer
st.markdown("---")
st.markdown("💡 **Pro Tip:** Try modifying the code examples to see how they change the output!")