import streamlit as st

# Custom styles
st.markdown(
    """
    <style>
        .stApp {
            background-color: #f0f8ff;
        }
        .title {
            text-align: center;
            color: black;
            font-size: 36px;
            font-family: 'Arial', sans-serif;
            font-weight: bold;
        }
        .header {
            font-size: 28px;
            font-family: 'Arial', sans-serif;
            color: black;
            font-style: italic;
            font-weight: bold;
        }
        .content {
            font-size: 16px;
            font-family: 'Arial', sans-serif;
            color: blue;
            font-style: italic;
        }
        .button-row {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
        }
    </style>
    """,
    unsafe_allow_html=True,
)

# Title
st.markdown("<div class='title'>General Algorithm</div><br>", unsafe_allow_html=True)
st.markdown("<div class='content'>At the time of training, the machine requires two things: Data & Algorithm.</div>", unsafe_allow_html=True)

# Basic Steps
st.markdown("<div class='header'>Basic Steps</div><br>", unsafe_allow_html=True)
st.markdown("<div class='content'>1. While guiding the machine, the main guidance comes from how we preprocess our data and choose the algorithm.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>2. If we preprocess the data incorrectly and choose the wrong algorithm, it leads to bad model performance.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>3. Inside the algorithm, there will be steps that the machine must follow while learning.</div>", unsafe_allow_html=True)

# Based on the Algorithm
st.markdown("<div class='header'>Based on the Algorithm</div><br>", unsafe_allow_html=True)
st.markdown("<div class='content'>1. Identify whether the algorithm is Supervised, Unsupervised, Semi-supervised, or Reinforcement Learning.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>2. If we choose Supervised Learning, we must decide between Classification or Regression based on the problem and data.</div>", unsafe_allow_html=True)

# Preprocessing Steps
st.markdown("<div class='header'>Basic Steps Before Training</div><br>", unsafe_allow_html=True)
st.markdown("<div class='content'>1. When working with preprocessed tabular data, identify the feature variables and class variables.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'><b>Example:</b> Iris Dataset</div>", unsafe_allow_html=True)
st.markdown("<div class='content'><b>Feature Variables:</b> Sepal Length, Sepal Width, Petal Length, Petal Width</div>", unsafe_allow_html=True)
st.markdown("<div class='content'><b>Class Variable:</b> Species</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>2. Divide the entire data into feature variables and class variables.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>3. Now split the data into Training Set (DTrain) and Test Set (DTest).</div>", unsafe_allow_html=True)

# Conditions for splitting
st.markdown("<div class='header'>Conditions</div><br>", unsafe_allow_html=True)
st.markdown("<div class='content'>1. Majority of the data should be in DTrain.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>2. Minority of the data should be in DTest.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>3. Common splits are 80:20, 70:30, or 60:40.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>4. No single data point should be in both DTrain and DTest.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>5. The split should be random, without replacement.</div>", unsafe_allow_html=True)
st.markdown("<div class='content'>6. Each data point should have an equal probability of selection.</div>", unsafe_allow_html=True)

# Navigation Buttons
st.markdown("<br><br>", unsafe_allow_html=True)
col1, col2, col3 = st.columns(3)

with col1:
    if st.button("KNN Algorithm"):
        st.switch_page("pages/KNN Algorithm.py")

with col2:
    if st.button("Decision Tree"):
        st.switch_page("pages/Decision Tree.py")

with col3:
    if st.button("Ensemble Techniques"):
        st.switch_page("pages/Ensemble Techniques.py")