import streamlit as st
import random

# Markdown data for insights
markdown_data = {
    "python": """
    ### Python - Top 10 Code Tips 🐍
    
    1. **Use virtual environments**: Keep dependencies isolated with `venv` or `conda`. 🛠️
    2. **Utilize type hints**: Use Python's typing system for better code clarity and maintainability. 🖋️
    3. **Leverage list comprehensions**: Write cleaner, more efficient loops. 🌀
    4. **Avoid mutable default arguments**: Use `None` instead of mutable objects as function defaults. 🚫
    5. **Use generators for large data**: Save memory with generator expressions and `yield`. 💡
    6. **Understand the difference between `==` and `is`**: Use `is` for identity checks, `==` for equality. 🔍
    7. **Use `enumerate()`**: Replace traditional `for` loops when needing indices. 🧮
    8. **Try `dataclasses`**: Simplify class creation with Python’s `dataclass` decorator. 🏗️
    9. **Use `f-strings`**: Format strings efficiently using `f"{value}"`. ✨
    10. **Write unit tests**: Test your functions with `unittest` or `pytest`. ✅
    """,
    
    "streamlit": """
    ### Streamlit - Top 10 Code Tips 🎛️
    
    1. **Use `st.cache_data` for caching**: Cache expensive operations to speed up your app. ⚡
    2. **Utilize the session state**: Store data between reruns with `st.session_state`. 🔄
    3. **Leverage components**: Integrate React components with `streamlit-component-template`. 🧩
    4. **Write custom widgets**: Expand functionality by creating custom Streamlit widgets. 🛠️
    5. **Use layout options**: Design better apps with `st.columns` and `st.expander`. 📐
    6. **Use interactive sliders**: Create smooth user interactions with `st.slider()`. 🎚️
    7. **Handle forms properly**: Use `st.form()` for input forms to optimize reactivity. 📄
    8. **Progress feedback**: Show progress with `st.progress()` and `st.spinner()`. 🔄
    9. **Embed HTML**: Enhance apps with `st.markdown()` using HTML inside markdown. 🌐
    10. **Deploy easily**: Use `streamlit.io` for one-click deployment. 🚀
    """,

    "typescript": """
    ### TypeScript - Top 10 Code Tips 💻
    
    1. **Use type annotations**: Always annotate variables and function return types. 📝
    2. **Prefer interfaces over types**: Interfaces can be extended more easily than types. 💪
    3. **Use union and intersection types**: Combine types in flexible ways with `|` and `&`. 🛠️
    4. **Utilize generics**: Write reusable functions and components with generics. 🔄
    5. **Avoid `any`**: Avoid using `any` type unless absolutely necessary. 🚫
    6. **Leverage optional chaining**: Safely access deeply nested properties. ❓
    7. **Use `readonly` for immutability**: Enforce immutability with `readonly`. 🔒
    8. **Utilize `never` type**: Use `never` for unreachable code paths and exhaustive checks. 🚧
    9. **Understand narrowing**: Use control flow analysis to narrow down types. 🧮
    10. **Enable strict mode**: Always turn on strict mode for better type safety. 🛡️
    """,

    "react_native": """
    ### React Native - Top 10 Code Tips 📱
    
    1. **Use `StyleSheet`**: Organize and optimize styles with `StyleSheet.create`. 🎨
    2. **Avoid inline styles**: Use stylesheets for reusability and performance. 🖌️
    3. **Leverage Flexbox**: Design responsive layouts with Flexbox. 📐
    4. **Handle platform-specific code**: Use `Platform` module for OS-specific logic. 🛠️
    5. **Optimize images**: Use `Image` and `ImageBackground` components efficiently. 🖼️
    6. **Utilize hooks**: Use hooks like `useEffect` and `useState` for state management. 🌀
    7. **Use third-party libraries**: Incorporate libraries like `react-navigation` and `redux`. 📚
    8. **Optimize for performance**: Avoid unnecessary re-renders using `React.memo` and `useCallback`. 🏎️
    9. **Handle gestures properly**: Use `react-native-gesture-handler` for gesture-based navigation. 📲
    10. **Utilize TypeScript**: Combine React Native with TypeScript for safer code. 💻
    """,
    
    "libraries": """
    ### Top 10 Python Libraries for SVG, TypeScript, and React Components 🛠️
    
    1. **lxml**: Efficiently parse and manipulate XML, including SVG. 📄
    2. **svgwrite**: Easily create and modify SVG files in Python. 🖼️
    3. **CairosVG**: Convert SVG files to various formats like PNG. 🔄
    4. **pydantic**: Handle data validation and complex typing in TypeScript code generation. ✅
    5. **datamodel-code-generator**: Automatically generate TypeScript code from Python data models. 💻
    6. **PyV8**: Run JavaScript code from within Python, useful for generating dynamic assets. 🧑‍💻
    7. **transcrypt**: Compile Python code to JavaScript for use with TypeScript projects. 🔄
    8. **reactpy**: Build interactive UIs using Python for web and mobile (React-like). 📲
    9. **react-native-svg**: Handle SVG assets in React Native applications. 📐
    10. **streamlit-component-template**: Create custom React components inside Streamlit apps. 🎛️
    """
}

# Set up the sidebar
st.sidebar.title("Insights on Technologies 🛠️")
sections = ["Python Tips", "Streamlit Tips", "TypeScript Tips", "React Native Tips", "Python Libraries"]
selected_section = st.sidebar.selectbox("Choose a Section:", sections)

# Main content display
if selected_section == "Python Tips":
    st.markdown(markdown_data["python"])
elif selected_section == "Streamlit Tips":
    st.markdown(markdown_data["streamlit"])
elif selected_section == "TypeScript Tips":
    st.markdown(markdown_data["typescript"])
elif selected_section == "React Native Tips":
    st.markdown(markdown_data["react_native"])
elif selected_section == "Python Libraries":
    st.markdown(markdown_data["libraries"])

# Tabs for interactive code examples
st.subheader("Interactive Code Examples 💻")
tabs = st.tabs(["Python", "Streamlit", "TypeScript", "React Native"])

# Example Python code generation
with tabs[0]:
    st.markdown("""
    **Example: Python Generating TypeScript** 🎨
    
    ```python
    def generate_typescript_button():
        return '''
        import React from 'react';
        import { Button } from 'react-native';
        
        interface ButtonProps {
            title: string;
            onPress: () => void;
        }
        
        const CustomButton: React.FC<ButtonProps> = ({ title, onPress }) => (
            <Button title={title} onPress={onPress} />
        );
        
        export default CustomButton;
        '''
    ```
    """)
    st.button("Generate TypeScript Code 🖋️")

# Streamlit Example
with tabs[1]:
    st.markdown("""
    **Example: Custom Streamlit Widget** 🎛️
    
    ```python
    import streamlit as st
    
    def custom_button(label):
        st.write(f"Button: {label}")
        if st.button(label):
            st.write(f"Button {label} was clicked!")
    
    custom_button("Click Me")
    ```
    """)
    st.button("Generate Streamlit Code 💻")

# TypeScript Example
with tabs[2]:
    st.markdown("""
    **Example: TypeScript Component in React Native** 📱
    
    ```typescript
    import React from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    
    const HelloWorld = () => (
      <View style={styles.container}>
        <Text style={styles.text}>Hello, World!</Text>
      </View>
    );
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      },
      text: {
        fontSize: 24,
        color: 'blue',
      },
    });
    
    export default HelloWorld;
    ```
    """)
    st.button("Generate React Native Code 📲")

# React Native Example
with tabs[3]:
    st.markdown("""
    **Example: React Native with TypeScript** 💻
    
    ```typescript
    import React from 'react';
    import { Text, View, Button } from 'react-native';
    
    interface AppProps {
      title: string;
    }
    
    const App: React.FC<AppProps> = ({ title }) => (
      <View>
        <Text>{title}</Text>
        <Button title="Click Me" onPress={() => alert('Button Pressed!')} />
      </View>
    );
    
    export default App;
    ```
    """)
    st.button("Generate Full React Native App 📲")

# Footer
st.sidebar.info("🎉 Enjoy exploring Python, Streamlit, TypeScript, and React Native!")