import streamlit as st

class StreamlitTutorial:
    def __init__(self):
        st.set_page_config(page_title="Learn Streamlit", layout="wide")
        self.init_session_state()
        self.setup_styles()

    def init_session_state(self):
        if 'code_input' not in st.session_state:
            st.session_state.code_input = ""
            st.session_state.current_topic = "Basic Text Elements"

    def setup_styles(self):
        st.markdown("""
        <style>
        .code-example { 
            margin-bottom: 1.5rem;
        }
        .live-output {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 1rem;
            margin: 0.5rem 0 1.5rem 0;
        }
        .section-title {
            margin-bottom: 1rem;
            padding: 0.5rem 0;
        }
        .button-container {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
        }
        </style>
        """, unsafe_allow_html=True)

    def get_text_elements(self):
        return [
            ("Title", "st.title('Main Title')"),
            ("Header", "st.header('Header')"),
            ("Subheader", "st.subheader('Subheader')"),
            ("Normal text", "st.write('Normal text')"),
            ("Markdown text", "st.markdown('**Bold** and *italic*')"),
            ("Colored text", "st.markdown(':blue[Blue text]')")
        ]

    def get_input_elements(self):
        return [
            ("Text Input", "name = st.text_input('Enter your name')"),
            ("Number Input", "num = st.number_input('Enter a number', min_value=0, max_value=100)"),
            ("Slider", "value = st.slider('Select value', 0, 100, 50)"),
            ("Selectbox", "option = st.selectbox('Choose option', ['A', 'B', 'C'])"),
            ("Checkbox", "checked = st.checkbox('Enable feature')")
        ]

    def render_text_elements(self, col):
        with col:
            st.markdown("### 📝 Code Examples")
            for title, code in self.get_text_elements():
                with st.container(border=True):
                    st.markdown(f"**{title}**")
                    st.code(code)
                    st.markdown("Live output:")
                    with st.container(border=True):
                        exec(code)

    def render_input_elements(self, col):
        with col:
            st.markdown("### 📝 Code Examples")
            for title, code in self.get_input_elements():
                with st.container(border=True):
                    st.markdown(f"**{title}**")
                    st.code(code)
                    st.markdown("Live output:")
                    with st.container(border=True):
                        exec(code)

    def render_help_section(self, col):
        with col:
            st.markdown("### 📚 Learning Guide")
            
            with st.expander("🎯 Basic Concepts", expanded=True):
                st.markdown("""
                **What are Text Elements?**
                - Basic building blocks for displaying text
                - Range from titles to formatted text
                - Support markdown formatting
                """)
                
            with st.expander("💡 Best Practices"):
                st.markdown("""
                **Writing Tips:**
                1. Use appropriate heading levels
                2. Keep text concise and clear
                3. Use formatting for emphasis
                4. Add visual hierarchy with headers
                
                **Code Structure:**
                ```python
                st.title('Main Title')
                st.header('Section Header')
                st.subheader('Sub-section')
                st.write('Regular text')
                ```
                """)
            
            with st.expander("🔍 Examples & Use Cases"):
                st.markdown("""
                **Common Patterns:**
                
                1. Page Structure
                ```python
                st.title('Dashboard')
                st.header('Sales Data')
                st.subheader('Monthly Trends')
                ```
                
                2. Formatted Text
                ```python
                st.markdown('**Bold** and *italic*')
                st.markdown(':blue[Colored text]')
                ```
                
                3. Mixed Elements
                ```python
                st.title('Report')
                st.write('Regular text')
                st.markdown('- Bullet point')
                ```
                """)
            
            with st.expander("⚠️ Common Mistakes"):
                st.markdown("""
                1. Skipping header levels
                2. Overusing formatting
                3. Inconsistent styling
                4. Missing hierarchy
                
                **How to Avoid:**
                - Plan your page structure
                - Use consistent formatting
                - Test different screen sizes
                - Keep it simple
                """)
            
            with st.expander("🚀 Advanced Tips"):
                st.markdown("""
                **Advanced Formatting:**
                ```python
                # Custom HTML
                st.markdown('''
                    <span style='color:blue'>
                        Custom styled text
                    </span>
                ''', unsafe_allow_html=True)
                
                # Complex Markdown
                st.markdown('''
                    # Title
                    ## Subtitle
                    * Point 1
                        * Subpoint
                    > Quote
                ''')
                ```
                
                **Layout Combinations:**
                ```python
                col1, col2 = st.columns(2)
                with col1:
                    st.header('Column 1')
                with col2:
                    st.header('Column 2')
                ```
                """)

    def render_playground(self, col, snippets):
        with col:
            st.markdown("### 💻 Practice Playground")
            
            # Code input area
            code_input = st.text_area(
                "Try Streamlit commands:",
                value=st.session_state.code_input,
                height=200,
                placeholder="Example:\nst.title('My Title')"
            )

            # Quick Snippets with better alignment
            with st.container(border=True):
                st.markdown("#### 📚 Quick Snippets")
                
                cols = st.columns([4, 1])
                with cols[0]:
                    selected_snippet = st.selectbox(
                        "Choose snippet:",
                        list(snippets.keys()),
                        label_visibility="collapsed"
                    )
                with cols[1]:
                    if st.button("Add", use_container_width=True):
                        new_code = snippets[selected_snippet]
                        if code_input:
                            code_input += f"\n{new_code}"
                        else:
                            code_input = new_code
                        st.session_state.code_input = code_input

            # Control buttons
            col1, col2, col3 = st.columns(3)
            with col1:
                if st.button("▶️ Run", use_container_width=True):
                    st.session_state.code_input = code_input
            with col2:
                if st.button("🔄 Reset", use_container_width=True):
                    st.session_state.code_input = ""
                    code_input = ""
            with col3:
                if st.button("💾 Copy", use_container_width=True):
                    st.code(code_input)

            # Live output
            st.markdown("#### 🎨 Live Output")
            with st.container(border=True):
                if code_input:
                    try:
                        exec(code_input)
                    except Exception as e:
                        st.error(f"Error: {str(e)}")

            # Tips
            with st.expander("💡 Tips & Help"):
                st.markdown(self.get_topic_tips(st.session_state.current_topic))

    def get_topic_tips(self, topic):
        tips = {
            "Basic Text Elements": """
                **Quick Tips:**
                - Use markdown for formatting
                - Try different header levels
                - Combine text elements
                - Use colored text with :color[text]
            """,
            "Input Widgets": """
                **Quick Tips:**
                - Use unique keys for widgets
                - Store widget values in variables
                - Add validation for inputs
                - Combine widgets for complex inputs
            """
        }
        return tips.get(topic, "Tips coming soon!")

    def run(self):
        with st.sidebar:
            st.title("Streamlit Tutorial")
            st.session_state.current_topic = st.radio(
                "Choose a Topic:",
                ["Basic Text Elements", "Input Widgets", "Layouts & Containers", 
                 "Data Display", "Charts & Plots", "Interactive Components"]
            )

        if st.session_state.current_topic == "Basic Text Elements":
            cols = st.columns([1.2, 1, 1])
            self.render_text_elements(cols[0])
            self.render_help_section(cols[1])
            self.render_playground(cols[2], dict(self.get_text_elements()))
            
        elif st.session_state.current_topic == "Input Widgets":
            cols = st.columns([1.2, 1, 1])
            self.render_input_elements(cols[0])
            self.render_help_section(cols[1])
            self.render_playground(cols[2], dict(self.get_input_elements()))

if __name__ == "__main__":
    app = StreamlitTutorial()
    app.run()