import streamlit as st
import requests
from bs4 import BeautifulSoup

# Page Configuration
st.set_page_config(
    page_title="What is Streamlit?",
    page_icon="🚀",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Custom CSS for better styling
st.markdown("""
<style>
    .stApp {
        max-width: 1200px;
        margin: 0 auto;
    }
    .definition-box {
        background-color: #f0f2f6;
        border-left: 5px solid #3898ec;
        padding: 20px;
        border-radius: 5px;
        margin: 20px 0;
    }
    .code-block {
        background-color: #282c34;
        color: #abb2bf;
        padding: 15px;
        border-radius: 5px;
        font-family: 'Courier New', monospace;
    }
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
        cursor: help;
    }
</style>
""", unsafe_allow_html=True)

# Header Section
st.title("🚀 What is Streamlit?")
st.markdown("An interactive, web-based framework for building data science applications and machine learning prototypes.")

# Footer
st.markdown("---")
st.markdown("Built with anycoder | [Link](https://huggingface.co/spaces/akhaliq/anycoder)")

# Main Content
col1, col2 = st.columns([2, 1])

with col1:
    st.header("📖 Definition")
    
    definition_box = st.container()
    with definition_box:
        st.markdown("""
        <div class='definition-box'>
        <p><strong>Streamlit</strong> is an open-source Python library that lets you create beautiful, custom web apps for machine learning and data science projects in minutes.</p>
        <br>
        <p>Instead of writing HTML, CSS, and JavaScript, you write simple Python scripts. Streamlit automatically handles the frontend, allowing you to focus on the logic and algorithms.</p>
        </div>
        """, unsafe_allow_html=True)
    
    st.subheader("Key Features")
    features = [
        "✅ <strong>Rapid Development:</strong> Build apps in minutes, not weeks.",
        "✅ <strong>No Frontend Knowledge Required:</strong> Pure Python.",
        "✅ <strong>Real-time Interactivity:</strong> Widgets, sliders, and plots update instantly.",
        "✅ <strong>Open Source:</strong> Free to use and contribute to.",
        "✅ <strong>Community Support:</strong> Large community of users and developers."
    ]
    for feature in features:
        st.markdown(feature, unsafe_allow_html=True)

with col2:
    st.header("💻 How it Works")
    
    st.info("""
    1. **Script Execution**: Streamlit reads your Python script from top to bottom.
    2. **Widget Creation**: It automatically converts inputs into interactive UI elements.
    3. **State Management**: It tracks the state of the app and re-runs the script when data changes.
    4. **UI Rendering**: It generates HTML, CSS, and JavaScript for the browser.
    """)
    
    st.header("🎯 Use Cases")
    use_cases = [
        "Data Exploration",
        "Machine Learning Prototypes",
        "Dashboards & Reports",
        "Explainable AI (XAI)",
        "Automated Workflows"
    ]
    
    for uc in use_cases:
        st.markdown(f"- {uc}")

st.markdown("---")

# Interactive Demo Section
st.header("🎯 Try It Yourself: The Hello World of Streamlit")

st.markdown("""
Below is a simple code snippet that creates an interactive counter. 
In Streamlit, you don't need to write complex HTML forms—just use the `st.write()` and `st.button()` functions.
""")

code_example = """
import streamlit as st

st.title("Hello Streamlit!")

# Create a button
if st.button("Click Me"):
    st.write("Button clicked! 🎉")
    st.write(f"Count: {st.session_state.get('count', 0) + 1}")
"""

st.markdown("### Example Code")
st.code(code_example, language="python")

st.markdown("### Live Demo")
st.info("Copy the code above into a Python file and run it with `streamlit run filename.py` to see it in action!")

# Additional Resources
st.markdown("---")
st.header("📚 Additional Resources")

st.markdown("""
### Official Documentation
- [Streamlit Docs](https://docs.streamlit.io/) - Comprehensive guides and API reference.
- [Streamlit Gallery](https://streamlit.io/gallery) - See what others have built.

### Getting Started
- **Installation**: `pip install streamlit`
- **Running an App**: `streamlit run your_app.py`
- **Command Line**: `streamlit run your_app.py --server.port 8080`
""")

# Footer
st.markdown("---")
st.markdown("Built with anycoder | [Link](https://huggingface.co/spaces/akhaliq/anycoder)")