import streamlit as st
import pandas as pd

st.set_page_config(
    page_title="HomePage",
    page_icon="🚀",
    layout="wide"
)

# Global CSS for consistent styling across all pages
st.markdown("""
    <style>
    body, .stApp {
        color: #4F4F4F; /* Replace with your desired font color */
        background-color: #FFFFFF;
    }
    h1, h2, h3, h4, h5, h6 {
        color: #BB3385;
    }
    p {
        color: #4F4F4F;
    }
    ul li {
        color: #4F4F4F;
    }
    </style>
""", unsafe_allow_html=True)

st.markdown(
    """
    <style>
    .stApp {
        background-image: url("https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/DALL%C2%B7E%202024-12-03%2023.34.47%20-%20A%20simple%20and%20elegant%20background%20image%20for%20an%20AI-themed%20web%20application.%20The%20background%20should%20feature%20a%20soft%20gradient%20transitioning%20from%20white%20to%20ligh.webp");
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Ensure session state for navigation
if "current_page" not in st.session_state:
    st.session_state.current_page = "main"

# Navigation function
def navigate_to(page_name):
    st.session_state.current_page = page_name

# Main Page
if st.session_state.current_page == "main":
    # Page Title
    st.markdown("""
        <div style="text-align: left; margin-top: 20px;">
            <h2 style="color: #BB3385;">What is Data?📊✨</h2>
        </div>
    """, unsafe_allow_html=True)

    # Introduction Text
    st.write("""
    **Data** is the measurements that are collected as a source of Information.
    It refers raw facts, figures, and observations that can be collected, stored, and processed. 
    It has no meaning on its own until it is organized or analyzed to derive useful information.""")

    # Types of Data Section
    st.markdown("""
        <div style="text-align: left; margin-top: 20px;">
            <h2 style="color: #2a52be;">Types of Data</h2>
        </div>
    """, unsafe_allow_html=True)

    # Radio Button for Data Type Selection
    data_type = st.radio(
        "Select the type of Data:",
        ("Structured Data", "Unstructured Data", "Semi-Structured Data")
    )

    if data_type == "Structured Data":
        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h3 style="color: #e25822;">What is Structured Data?</h3>
            </div>
        """, unsafe_allow_html=True)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Definition:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        **Structured data** refers to information that is organized and formatted in a predefined manner, making it easy to store, retrieve, and analyze.
        It is typically stored in tabular formats like rows and columns, where each field contains a specific type of information.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Characteristics:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        - Follows a fixed schema.
        - Can be easily searched using query languages like SQL.
        - Suitable for quantitative analysis.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Examples:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        A database of students with fields like ID, name, age, and gender:
        """)

        student_data = {
            "Id": [100, 101, 102, 103],
            "Name": ["Lakshmi Harika", "Varshitha", "Hari Chandan", "Shamitha"],
            "Age": [22, 23, 22, 23],
            "Gender": ["Female", "Female", "Male", "Female"]
        }
        df = pd.DataFrame(student_data)
        st.markdown(df.style.set_table_styles(
            [{'selector': 'thead th', 'props': 'font-weight: bold;'}]
        ).hide(axis="index").to_html(), unsafe_allow_html=True)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Data Formats in Structured Data:</h4>
            </div>
        """, unsafe_allow_html=True)

        st.write("Click to explore Structured Data Formats:")
        if st.button("Explore Excel"):
            navigate_to("explore_excel")

    elif data_type == "Unstructured Data":
        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h3 style="color: #e25822;">What is Unstructured Data?</h3>
            </div>
        """, unsafe_allow_html=True)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Definition:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        **Unstructured data** refers to information that does not follow a predefined format or structure.
        It is typically raw data that lacks a clear, organized schema, making it harder to store and analyze using traditional tools.
        Examples include multimedia files (images, videos, audio), emails, and social media posts.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Characteristics:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        - Does not follow a specific schema or structure.
        - Cannot be stored in traditional tabular formats like rows and columns.
        - Requires advanced tools like machine learning or natural language processing (NLP) for analysis.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Examples:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        - **Images**: Photos, screenshots, or scanned documents.
        - **Audio**: Podcasts, voice recordings, or music files.
        - **Videos**: Recorded lectures, surveillance footage, or YouTube videos.
        - **Text**: Emails, social media posts, and blog articles.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Data Formats in UnStructured Data:</h4>
            </div>
        """, unsafe_allow_html=True)

        st.write("Click to explore Unstructured Data Formats:")
        if st.button("Explore Images & Videos"):
            navigate_to("explore_images_video")
        if st.button("Explore Audio"):
            navigate_to("explore_audio")
        if st.button("Explore Text"):
            navigate_to("explore_text")

    elif data_type == "Semi-Structured Data":
        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h3 style="color: #e25822;">What is Semi-Structured Data?</h3>
            </div>
        """, unsafe_allow_html=True)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Definition:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        **Semi-Structured data** refers to information that does not follow a strict tabular format but contains tags or markers to separate data elements.
        This type of data is more flexible than structured data but still organized enough to allow for easier analysis than unstructured data.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Characteristics:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        - Contains markers or tags (e.g., XML, JSON keys) to provide structure.
        - More flexible than structured data, allowing for varying schemas.
        - Easier to process than unstructured data.
        - Can store hierarchical relationships.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Examples:</h4>
            </div>
        """, unsafe_allow_html=True)
        st.write("""
        Examples of semi-structured data include:
        - **CSV**: Comma-separated values in plain-text files.
        - **JSON**: A lightweight data-interchange format used in web applications.
        - **XML**: Extensible Markup Language for structured document encoding.
        - **HTML**: Markup language for web pages.
        """)

        st.markdown("""
            <div style="text-align: left; margin-top: 20px;">
                <h4 style="color: #5b2c6f;">Data Formats in Semi-Structured Data:</h4>
            </div>
        """, unsafe_allow_html=True)

        st.write("Click to explore Semi-Structured Data Formats:")
        if st.button("Explore CSV"):
            navigate_to("explore_csv")
        if st.button("Explore JSON"):
            navigate_to("explore_json")
        if st.button("Explore XML"):
            navigate_to("explore_xml")
        if st.button("Explore HTML"):
            navigate_to("explore_html")

# Pages for Each Format
elif st.session_state.current_page == "explore_excel":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring Excel</h3>
    """, unsafe_allow_html=True)
    st.write("""
    Excel is a structured data format used to store and analyze data in tabular form. It supports features like formulas, charts, and pivot tables.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_images_video":
    st.markdown("""
        <h1 style="color: #BB3385;">Introduction to Images📸🖼️</h1>
    """, unsafe_allow_html=True)
    st.markdown("""
        <div style="text-align: left; margin-top: 20px;">
            <h2 style="color: #BB3385;">What is an Image?📊✨</h2>
        </div>
    """, unsafe_allow_html=True)
    if st.button("Go Back"):
        navigate_to("main")


elif st.session_state.current_page == "explore_audio":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring Audio</h3>
    """, unsafe_allow_html=True)
    st.write("""
    Audio formats include MP3 and WAV for storing sound.
    """)
    if st.button("Go Back"):
        navigate_to("main")


elif st.session_state.current_page == "explore_text":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring Text</h3>
    """, unsafe_allow_html=True)
    st.write("""
    Text includes unstructured data like emails or plain-text files.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_csv":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring CSV</h3>
    """, unsafe_allow_html=True)
    st.write("""
    CSV is a simple text-based format where data fields are separated by commas.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_json":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring JSON</h3>
    """, unsafe_allow_html=True)
    st.write("""
    JSON is a semi-structured format used for APIs and data exchange.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_xml":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring XML</h3>
    """, unsafe_allow_html=True)
    st.write("""
    XML uses tags to structure semi-structured data.
    """)
    if st.button("Go Back"):
        navigate_to("main")

elif st.session_state.current_page == "explore_html":
    st.markdown("""
        <h3 style="color: #e25822;">Exploring HTML</h3>
    """, unsafe_allow_html=True)
    st.write("""
    HTML structures web pages using elements like <div> and <p>.
    """)
    if st.button("Go Back"):
        navigate_to("main")