import streamlit as st
from grammarcorrector import GrammarCorrector
import errant
import spacy
import re
import string
import json
import streamlit.components.v1 as components
import random
import requests
import subprocess
import os
import math
from streamlit_lottie import st_lottie
import plotly.express as px
from sqlalchemy.ext.mutable import MutableList, MutableDict
from collections import defaultdict
from sqlalchemy.exc import OperationalError
import pandas as pd 
from collections import defaultdict
import time  
import datetime
# Removed MySQL-specific imports:
# import mysql.connector
# from mysql.connector import Error
from sqlalchemy import create_engine, Column, Integer, String, Boolean, ForeignKey, JSON, Time, DateTime
from sqlalchemy.orm import sessionmaker, declarative_base

# Set page configuration at the top
st.set_page_config(page_title="GrammarTool", page_icon="✏️")

@st.cache_resource
def get_spacy_nlp():
    try:
        return spacy.load("en_core_web_sm")
    except OSError:
        # Download the model if it's not available
        subprocess.run(["python", "-m", "spacy", "download", "en_core_web_sm"])
        return spacy.load("en_core_web_sm")

@st.cache_resource
def get_errant_annotator():
    return errant.load('en')

@st.cache_resource
def get_grammar_corrector():
    return GrammarCorrector(device="cpu")

annotator = get_errant_annotator()
grammar = get_grammar_corrector()
nlp = get_spacy_nlp()

# Load the error codes mapping
file_path = os.path.join(os.path.dirname(__file__), 'data/error_code.json')
with open(file_path, 'r') as f:
    error_code_data = json.load(f)

@st.cache_data
def load_tasks():
    file_path = os.path.join(os.path.dirname(__file__), 'data/tasks.json')

    if not os.path.exists(file_path):
        st.error(f"Tasks file not found: {file_path}")
        return {}

    with open(file_path, 'r', encoding='utf-8') as f:
        try:
            tasks_dict = json.load(f)
            if not tasks_dict:
                st.error("Tasks file is empty or incorrectly formatted!")
            return tasks_dict
        except json.JSONDecodeError:
            st.error("Error loading tasks.json! Check if the JSON is valid.")
            return {}

@st.cache_data
def load_rules():
    file_path = os.path.join(os.path.dirname(__file__), 'data/rules.json')
    with open(file_path, 'r', encoding='utf-8') as f:
        rules_dict = json.load(f)
    return rules_dict

# Create a dictionary mapping error_code to full_error_name and explanation
error_code_mapping = {
    item['error_code']: {
        'full_error_name': item['full_error_name'],
        'explanation': item['explanation'],
        'css_structure': item['css_structure']
    } for item in error_code_data
}

def load_questions(tutorial_num_list):
    """Load the JSON and filter tasks by tutorial_num_list (a list of tutorial IDs)."""
    script_dir = os.path.dirname(os.path.abspath(__file__))
    file_path = os.path.join(script_dir, 'data/practice.json')
    with open(file_path, 'r') as file:
        tasks = json.load(file)
    filtered = [task for task in tasks if any(tnum in task["Tutorial number"] for tnum in tutorial_num_list)]
    return filtered

def get_questions_for_tutorial(tasks, num_questions=8):
    """
    Selects a random subset of questions from the loaded tasks.
    """
    questions = tasks.get("Questions", [])
    if not questions:
        st.warning("No questions available for this tutorial.")
        return []
    if len(questions) < num_questions:
        st.info(f"Only {len(questions)} questions available for this tutorial.")
        return questions
    else:
        return random.sample(questions, num_questions)

# --- SQLite Connection Setup ---

# Instead of connecting to a remote MySQL database, we create a local SQLite database.
# The database file (grammar_tool_db.sqlite) will be created in your working directory.
engine = create_engine("sqlite:///grammar_tool_db.sqlite", connect_args={"check_same_thread": False})

# Create the session
Session = sessionmaker(bind=engine)
session = Session()

Base = declarative_base()

class Student(Base):
    __tablename__ = 'students'
    
    id = Column(Integer, primary_key=True, autoincrement=True)
    username = Column(String(100), unique=True, nullable=False)
    email = Column(String(100), unique=True, nullable=False)
    password = Column(String(255), nullable=False)
    participate = Column(Boolean, nullable=False)
    age = Column(Integer)
    country = Column(String(100))
    language = Column(String(45))
    main_goal = Column(String(45))
    field = Column(String(1000))
    preferences = Column(String(100))
    proficiency = Column(String(45))
    tasks_to_do = Column(JSON) 
    adapt_logs = Column(JSON) 
    mode_1 = Column(String(45))
    mode_2 = Column(String(45))
    mode_3 = Column(String(45))
    
class SelfAssessment(Base):
    __tablename__ = 'self_assessment'
    student_id = Column(Integer, ForeignKey('students.id'), primary_key=True)
    skill = Column(String(255), primary_key=True)
    score = Column(Integer, nullable=False)

class TasksDone(Base):
    __tablename__ = "tasks_done"
    
    id = Column(Integer, primary_key=True, autoincrement=True)
    student_id = Column(Integer, ForeignKey("students.id"))
    task_id = Column(String(50))
    date = Column(DateTime, nullable=True)
    time = Column(Time, nullable=True)
    errors = Column(JSON, nullable=True)
    complexity = Column(JSON, nullable=True)
    fluency = Column(JSON, nullable=True)
    processed_errors = Column(JSON, nullable=True)
    full_text = Column(JSON, nullable=True) 

class Errors(Base):
    __tablename__ = "errors"
    
    id = Column(Integer, primary_key=True, autoincrement=True)
    student_id = Column(Integer, ForeignKey("students.id"), nullable=False)
    gram_err = Column(MutableDict.as_mutable(JSON), nullable=True)
    spell_err = Column(MutableList.as_mutable(JSON), nullable=True)
    to_do = Column(MutableList.as_mutable(JSON), nullable=True)
    done = Column(MutableDict.as_mutable(JSON), nullable=True)

# Create all tables (this will create the SQLite database file if it doesn't exist)
Base.metadata.create_all(engine)

def update_student_mode(student_id, mode_number):
    """
    Update mode_1/mode_2/mode_3 column to 'yes' for the given student.
    """
    student = session.query(Student).filter_by(id=student_id).first()
    if not student:
        st.error("User not found in the database.")
        return

    if mode_number == 1:
        student.mode_1 = "yes"
    elif mode_number == 2:
        student.mode_2 = "yes"
    elif mode_number == 3:
        student.mode_3 = "yes"

    session.commit()

def navigate_to_mode():
    st.session_state.page = 'mode_page'

def navigate_to_personal_info():
    st.session_state.page ='personal_info'

def navigate_to_proficiency():
    st.session_state.page = 'proficiency'

def navigate_to_self_assessment():
    st.session_state.page = 'self_assessment'

def navigate_to_dashboard():
    st.session_state.page ='user_dashboard'

def navigate_to_mode_1():
    st.session_state.page ='mode_1_page'

def navigate_to_spelling():
    st.session_state.page ='spelling_practice'

def mode_page():
    st.title("Choose the Mode")
    mode_options = {
        "Adaptive test": 3,  # Mode 3
        "Mode 1": 1,         # Mode 1
        "Mode 2 (personalized)": 2  # Mode 2
    }
    selected_mode = st.radio(
        label="Please select a mode:",
        options=list(mode_options.keys()),
        index=0,
        key="selected_mode"
    )
    if st.button("Next"):
        mode_number = mode_options.get(selected_mode, None)
        user_info = st.session_state.get("user_info")
        if not user_info or not hasattr(user_info, "id"):
            st.error("No logged-in user found. Please log in first.")
            return
        try:
            update_student_mode(user_info.id, mode_number)
        except Exception as e:
            st.error(f"Failed to update mode in DB: {e}")
            return
        if mode_number == 3:
            navigate_to_proficiency()
            st.rerun()
        elif mode_number == 1:
            navigate_to_mode_1()
            st.rerun()
        elif mode_number == 2:
            if not is_personal_info_complete(user_info):
                st.warning("Redirecting you to Personal Info page...")
                navigate_to_personal_info()  
                st.rerun()
            if not is_self_assessment_complete(user_info.id):
                st.warning("Redirecting you to Self-Assessment page...")
                navigate_to_self_assessment()
                st.rerun()
            if not is_proficiency_complete(user_info):
                st.warning("Redirecting you to Proficiency Test page...")
                navigate_to_proficiency()
                st.rerun()
            st.success("All steps completed. Redirecting you to the personalized dashboard...")
            navigate_to_dashboard()
            st.rerun()
        st.rerun()

def preprocess_error_types(session):
    tasks = session.query(TasksDone).all()
    for task in tasks:
        errors = task.errors
        if not errors or not errors.get("error_types"):
            continue
        processed = []
        for e in errors["error_types"]:
            if isinstance(e, str):
                processed.append({"error_type": e})
            elif isinstance(e, dict):
                processed.append(e)
        task.processed_errors = processed
    session.commit()

def update_errors_table_with_processed(session):
    MAX_RETRIES = 3
    RETRY_DELAY = 2  # seconds
    retries = 0
    while retries < MAX_RETRIES:
        try:
            with session.no_autoflush:
                tasks = session.query(TasksDone).filter(TasksDone.processed_errors.isnot(None)).all()
                if not tasks:
                    return
                tasks_by_student = defaultdict(list)
                for task in tasks:
                    tasks_by_student[task.student_id].append(task)
                for student_id, task_list in tasks_by_student.items():
                    errors_obj = session.query(Errors).filter_by(student_id=student_id).one_or_none()
                    if not errors_obj:
                        errors_obj = Errors(student_id=student_id, gram_err={}, spell_err=[], to_do=[])
                        session.add(errors_obj)
                        session.flush()
                    for task in task_list:
                        for e in task.processed_errors:
                            etype = e.get("error_type")
                            if not etype or etype == "OTHER":
                                continue
                            if etype == "SPELL":
                                corr_str = e.get("corrected_string")
                                if corr_str and corr_str not in errors_obj.spell_err:
                                    errors_obj.spell_err.append(corr_str)
                            else:
                                if not errors_obj.gram_err:
                                    errors_obj.gram_err = {}
                                errors_obj.gram_err[etype] = errors_obj.gram_err.get(etype, 0) + 1
                    if errors_obj.gram_err:
                        max_count = max(errors_obj.gram_err.values())
                        errors_obj.to_do = [k for k, v in errors_obj.gram_err.items() if v == max_count]
                    else:
                        errors_obj.to_do = []
                session.commit()
                return
        except OperationalError as e:
            session.rollback()
            retries += 1
            if retries < MAX_RETRIES:
                time.sleep(RETRY_DELAY)
            else:
                print(f"Database lock error: {e}, retries exhausted.")
                raise

def insert_student_data(
    username,
    email,
    password,
    participate,
    age=None,
    country=None,
    language=None,
    main_goal=None,
    field=None,
    preferences=None,
    proficiency=None
):
    preferences_clean = remove_emojis(preferences) if preferences else None
    student = session.query(Student).filter_by(email=email).first()
    if not student:
        student = Student(
            username=username,
            email=email,
            password=password,
            participate=participate,
            age=age,
            country=country,
            language=language,
            main_goal=main_goal,
            field=field,
            preferences=preferences_clean,
            proficiency=proficiency
        )
        session.add(student)
    else:
        student.username = username
        student.password = password
        student.participate = participate
        student.age = age
        student.country = country
        student.language = language
        student.main_goal = main_goal
        student.field = field
        student.preferences = preferences_clean
        student.proficiency = proficiency
    session.commit()

def fetch_student_data(username):
    return session.query(Student).filter_by(username=username).first()

def insert_self_assessment_data(student_id, skill, score):
    assessment = SelfAssessment(
        student_id=student_id,
        skill=skill,
        score=score
    )
    session.add(assessment)
    session.commit()

def fetch_self_assessments(student_id):
    return session.query(SelfAssessment).filter_by(student_id=student_id).all()

def handle_login(username, password):
    user = fetch_student_data(username)
    if user and password == user.password:
        st.session_state.user_info = user
        st.session_state.student_id = user.id
        return True
    else:
        st.error("Invalid username or password.")
    return False

def handle_signup(username, email, password, participate_in_research):
    insert_student_data(
        username=username,
        email=email,
        password=password,
        participate=participate_in_research
    )
    user = fetch_student_data(username)
    if user:
        st.session_state.user_info = user
        st.session_state.page = "personal_info"
    else:
        st.error("Signup failed. Please try again.")

def handle_forgot_password(email):
    user = session.query(Student).filter_by(email=email).first()
    if user:
        st.success(f"A password reset link has been sent to {email}.")
    else:
        st.error("No account found with that email.")

def remove_emojis(text):
    if not text:
        return text
    emoji_pattern = re.compile(
        "["
        "\U0001F600-\U0001F64F"  # emoticons
        "\U0001F300-\U0001F5FF"  # symbols & pictographs
        "\U0001F680-\U0001F6FF"  # transport & map symbols
        "\U0001F1E0-\U0001F1FF"  # flags (iOS)
        "\U00002500-\U00002BEF"  # various symbols
        "\U00002702-\U000027B0"  # dingbats
        "\U0001F900-\U0001F9FF"  # supplemental symbols
        "\U0001FA70-\U0001FAFF"  # symbols extended-A
        "\U00002600-\U000026FF"  # miscellaneous symbols
        "]+",
        flags=re.UNICODE
    )
    return emoji_pattern.sub(r'', text).strip()

def personal_info_page():
    render_progress_bar()
    st.title("👤 Personal Information")
    age_text = st.text_input("Age:", value="")
    age = int(age_text) if age_text.isdigit() else None
    country = st.text_input("Country:")
    native_language = st.text_input("Native Language:")
    main_goal = st.selectbox("🎯 Main Goal:", ["", "Work", "Study", "General Communication"])
    field_value = None
    if main_goal == "Work":
        work_options = st.selectbox(
            "Select Work Option:",
            ["", "Healthcare 🩺", "Engineering 🛠️", "Business 📈", "Education 📚"]
        )
        field_value = remove_emojis(work_options) if work_options else None
    elif main_goal == "Study":
        study_options = st.selectbox(
            "Select Study Option:",
            ["", "High school", "Bachelor's degree", "Master's degree", "Doctorate/PhD"]
        )
        if study_options in ["Bachelor's degree", "Master's degree", "Doctorate/PhD"]:
            major_options = st.selectbox(
                "Select Your Major:",
                ["", "Medicine 🩺", "Science and Technology 🔬", 
                 "Business and Finance 🏦", "Arts and Humanities📖"]
            )
            if major_options:
                study_combined = f"{study_options}, Major: {remove_emojis(major_options)}"
            else:
                study_combined = study_options
        else:
            study_combined = study_options
        field_value = remove_emojis(study_combined) if study_combined else None

    interests = st.multiselect("Interests:", ["Travel ✈️", "Sports ⚽️", "Movies 🎬"])
    stripped_interests = [remove_emojis(i) for i in interests]
    preferences_value = ", ".join(stripped_interests) if stripped_interests else None

    if st.button("Continue"):
        user_info = st.session_state.user_info
        if user_info and hasattr(user_info, 'id'):
            insert_student_data(
                username=user_info.username,
                email=user_info.email,
                password=user_info.password,
                participate=user_info.participate,
                age=age,
                country=country,
                language=native_language,
                main_goal=main_goal,
                field=field_value,
                preferences=preferences_value
            )
            st.success("Information saved successfully.")
            navigate_to_self_assessment()
            st.rerun()
        else:
            st.error("Error: User information is missing.")

# The rest of your functions (e.g., load_item_bank, adaptive test functions, etc.)
# remain unchanged.

def load_item_bank():
    file_path = 'data/item_bank.json'
    with open(file_path, "r", encoding="utf-8") as f:
        data = json.load(f)
    for item in data:
        if "id" not in item or "level" not in item or "question" not in item or "answer" not in item:
            print(f"Missing keys in item: {item}")
        if item["level"] not in ["easy", "medium", "high"]:
            print(f"Invalid level in item: {item}")
            item["level"] = "medium"
    random.shuffle(data)
    return data

def prob_correct(item_level, participant_level):
    item_level = int(item_level)
    participant_level = int(participant_level)
    if participant_level > item_level:
        return 0.95
    elif participant_level == item_level:
        return 0.6
    else:
        return 0.25

def calculate_entropy(belief):
    return -sum(prob * math.log2(prob) for prob in belief.values() if prob > 0)

def expected_entropy(question, belief, item_level, level_map):
    prob_correct_ans = sum(prob_correct(item_level, level_map[level]) * belief[level] for level in belief)
    prob_incorrect_ans = 1 - prob_correct_ans
    belief_correct = {lvl: belief[lvl] * prob_correct(item_level, level_map[lvl]) for lvl in belief}
    belief_incorrect = {lvl: belief[lvl] * (1 - prob_correct(item_level, level_map[lvl])) for lvl in belief}
    total_correct = sum(belief_correct.values())
    total_incorrect = sum(belief_incorrect.values())
    for lvl in belief_correct:
        belief_correct[lvl] /= total_correct or 1
        belief_incorrect[lvl] /= total_incorrect or 1
    entropy_correct = calculate_entropy(belief_correct)
    entropy_incorrect = calculate_entropy(belief_incorrect)
    return prob_correct_ans * entropy_correct + prob_incorrect_ans * entropy_incorrect

def select_question(belief, item_bank, asked_questions, level_map):
    min_entropy = float("inf")
    best_question = None
    for item in item_bank:
        if item["id"] not in asked_questions:
            item_level = level_map[item["level"]]
            exp_entropy = expected_entropy(item, belief, item_level, level_map)
            if exp_entropy < min_entropy:
                min_entropy = exp_entropy
                best_question = item
    return best_question

def update_belief(belief, item_level, correct, level_map):
    for lvl in belief:
        likelihood = prob_correct(item_level, level_map[lvl]) if correct else (1 - prob_correct(item_level, level_map[lvl]))
        belief[lvl] *= likelihood
    total = sum(belief.values())
    for lvl in belief:
        belief[lvl] /= total or 1

def stop_criterion(belief, threshold=0.9, min_questions=10, total_questions=0, max_questions=30):
    if total_questions < min_questions:
        return False
    if max(belief.values()) >= threshold:
        return True
    if total_questions >= max_questions:
        return True
    return False

def go_next():
    st.session_state.current_question = None
    st.session_state.submitted_answer = None
    st.session_state.phase = "answering"
    if stop_criterion(
        st.session_state.belief,
        min_questions=10,
        threshold=0.9,
        total_questions=st.session_state.total_questions,
        max_questions=30,
    ):
        st.session_state.completed = True

import streamlit as st
import time
import datetime
# ... your other imports ...

def proficiency_page():
    st.title("Adaptive Grammar Test")

    # Check if user is logged in
    user_info = st.session_state.get("user_info")
    if not user_info or not hasattr(user_info, "id"):
        st.error("User ID is missing. Please log in to take the test.")
        return

    # Detect the mode user came from (saved in session_state)
    mode_number = st.session_state.get("mode_number", None)

    # Retrieve the student ID from user_info
    student_id = user_info.id

    # Load item bank
    item_bank = load_item_bank()

    # Levels must match what's in your item bank
    levels = ["pre", "easy", "medium", "high", "post"]
    level_map = {level: i for i, level in enumerate(levels)}

    # -------------------------
    # 1) INIT SESSION STATE
    # -------------------------
    if "belief" not in st.session_state:
        st.session_state.belief = {level: 1 / len(levels) for level in levels}
        st.session_state.asked_questions = set()
        st.session_state.current_question = None
        st.session_state.submitted_answer = None
        st.session_state.total_questions = 0
        st.session_state.history = []
        st.session_state.completed = False
        st.session_state.question_number = 0

    # ----------------------------
    # 2) IF TEST IS ALREADY COMPLETE
    # ----------------------------
    if st.session_state.completed:
        st.success("Test Completed!")
        final_level = max(st.session_state.belief, key=st.session_state.belief.get)
        st.write(f"Your estimated proficiency level: **{final_level.capitalize()}**")

        # Save to DB
        student = session.query(Student).filter_by(id=student_id).first()
        if student:
            student.adapt_logs = st.session_state.history
            student.proficiency = final_level
            # 3) Update tasks_to_do according to final_level
            tasks_list = TASKS_TO_DATABASE.get(final_level.lower(), [])
            student.tasks_to_do = json.dumps(tasks_list)

            session.commit()
            session.commit()
            st.success("Your adaptive test logs and final proficiency level have been saved to the database.")
            if st.button("Next"):
                # If they came from mode 2, proceed to personal dashboard
                navigate_to_dashboard()  # or navigate_to_personal_dashboard()
                st.rerun()
        else:
            st.error(f"No student found in DB with id = {student_id}. Cannot save test results.")

        return  # Exit function to prevent further questions from being displayed

    # -------------------------
    # 3) LOAD A NEW QUESTION
    # -------------------------
    if st.session_state.current_question is None:
        st.session_state.total_questions += 1
        st.session_state.question_number = st.session_state.total_questions

        next_q = select_question(
            st.session_state.belief,
            item_bank,
            st.session_state.asked_questions,
            level_map
        )

        # If no question returned, mark test as completed
        if not next_q:
            st.session_state.completed = True
            st.rerun()
            return

        # Save the newly selected question
        st.session_state.current_question = next_q
        st.session_state.submitted_answer = None

    question = st.session_state.current_question

    # -------------------------
    # 4) DISPLAY THE QUESTION
    # -------------------------
    st.write(f"**Question {st.session_state.question_number}:** {question['question']}")

    # Let the user pick an answer
    question_key = f"selected_answer_{question['id']}"
    selected_answer = st.radio("", question["options"], key=question_key, index=None)

    # One combined button to submit answer & go to next
    if st.button("Submit & Next"):
        if selected_answer is None:
            st.warning("Please select an answer before submitting.")
            st.stop()  # Stop execution here so user can pick an answer.

        correct = (selected_answer == question["answer"])
        before_belief = st.session_state.belief.copy()

        update_belief(
            st.session_state.belief,
            level_map[question["level"]],
            correct,
            level_map
        )
        after_belief = st.session_state.belief.copy()

        # Record history
        st.session_state.history.append({
            "question_id": question["id"],
            "level": question["level"],
            "question": question["question"],
            "user_answer": selected_answer,
            "correct": correct,
            "belief_before": before_belief,
            "belief_after": after_belief,
            "current_number": st.session_state.question_number,
        })

        # Mark this question as asked
        st.session_state.asked_questions.add(question["id"])

        # Check stopping criteria
        if stop_criterion(
            st.session_state.belief,
            min_questions=10,
            threshold=0.9,
            total_questions=st.session_state.total_questions,
            max_questions=30,
        ):
            st.session_state.completed = True
            st.rerun()
            return

        # Otherwise, clear so we load the next question
        st.session_state.current_question = None
        st.session_state.submitted_answer = None
        st.rerun()




def fetch_tasks(student_id):
    """
    Fetch the tasks assigned to a student.
    """
    student = session.query(Student).filter_by(id=student_id).first()
    if student and student.tasks_to_do:
        return json.loads(student.tasks_to_do)  # Convert JSON string back to list
    return []


def self_assessment_page():
    render_progress_bar()
    st.title("Self-Assessment")
    st.header("Rate your difficulty for each skill (1 = very easy, 10 = very difficult)")

    skills = {
        'Word Order': 'slider_word_order',
        'Tenses': 'slider_tenses',
        'Complex Sentence': 'slider_complex_sentence',
        'Punctuation': 'slider_punctuation',
        'Prepositions': 'slider_prepositions',
        'Spelling': 'slider_spelling'
    }

    skill_scores = {}
    for skill, key in skills.items():
        if key not in st.session_state:
            st.session_state[key] = 1
        skill_scores[key] = st.slider(skill, 1, 10, key=key, value=st.session_state[key])

    if st.button("Submit Assessment"):
        user_info = st.session_state.user_info
        if user_info and hasattr(user_info, 'id'):
            for skill, key in skills.items():
                score = skill_scores[key]
                insert_self_assessment_data(
                    student_id=user_info.id,
                    skill=skill,
                    score=score
                )
            st.success("Self-assessment submitted!")
            navigate_to_proficiency()
            st.rerun()

        else:
            st.error("Error: User information is missing.")

def is_personal_info_complete(student: Student) -> bool:
    """
    Decide what 'complete' means for personal info. 
    For example, check if age, country, language are set.
    Adjust the logic to your actual definition of 'complete'.
    """
    # Example: If any of these are None, personal info isn't complete
    if not student.age or not student.country or not student.language:
        return False
    return True

def is_self_assessment_complete(student_id: int) -> bool:
    """
    Check if the user has at least one entry in the self_assessment table.
    Or you could check for a minimum set of skill entries, etc.
    """
    entries = session.query(SelfAssessment).filter_by(student_id=student_id).all()
    return len(entries) > 0

def is_proficiency_complete(student: Student) -> bool:
    """
    For proficiency, assume it's 'complete' if student.proficiency is not None or empty.
    Adjust as needed.
    """
    return bool(student.proficiency)  # True if student.proficiency is non-empty


def login_registration_page():
    render_progress_bar()
    st.title("Login / Sign Up")
    tabs = st.tabs(["Login", "Sign Up"])

    # Login Tab
    with tabs[0]:
        st.header("Welcome Back!")
        username = st.text_input("👤 Username:", placeholder="Your username", key="login_username_input_unique_1")
        password = st.text_input("🔒 Password:", type="password", placeholder="Your password", key="login_password_input_unique_1")

        if st.button("🚀 Log In", key="login_button_unique_1"):
            if handle_login(username, password):  # Validate login against the `students` table
                student = fetch_student_data(username)
                if student:
                    st.session_state.user_info = student
                    st.success("Logged in successfully!")
                    navigate_to_mode()
                    st.rerun()
                else:
                    st.error("Failed to fetch user data. Please try again.")
            else:
                st.error("Invalid username or password.")

    # Sign-Up Tab
    with tabs[1]:
        st.header("Create a New Account")
        new_username = st.text_input("👤 Choose a Username:", placeholder="Pick a unique username", key="signup_username_input_unique_1")
        email = st.text_input("✉️ Email:", placeholder="Your email address", key="signup_email_input_unique_1")
        new_password = st.text_input("🔒 Set a Password:", type="password", placeholder="Choose a strong password", key="signup_password_input_unique_1")
        participate = st.checkbox("I agree to participate in research", key="research_checkbox_unique_1")
        agree_to_pdpa = st.checkbox("I agree to the Personal Data Protection Policy (PDPA)", key="pdpa_checkbox_unique_1")
        show_pdpa_policy()

        if st.button("🚀 Create My Account", key="signup_button_unique_1"):
            if not agree_to_pdpa:
                st.error("You must agree to the PDPA to sign up.")
            elif fetch_student_data(new_username):  # Check if username already exists
                st.error("Username already taken. Please choose another.")
            else:
                # Insert new student data
                insert_student_data(
                    username=new_username,
                    email=email,
                    password=new_password,  # In production, hash passwords before storing
                    participate=participate
                )
                student = fetch_student_data(new_username)
                if student:
                    st.session_state.user_info = student
                    st.success("Your account has been created! Redirecting...")
                    navigate_to_mode()
                    st.rerun()
                else:
                    st.error("An error occurred during sign-up. Please try again later.")


TASKS_TO_DATABASE = {
    "pre": [
        "L1_T1_TAS_1",
        "TT_L1_T1_1",
        "TT_L1_T1_2",
        "TT_L1_T1_3",
        "L1_T2_TAS_1",
        "TT_L1_T2_1",
        "L1_T3_TAS_1",
        "TT_L1_T3_1",
        "L1_T4_TAS_1",
        "TT_L1_T4_1",
        "TT_L1_T4_2",
        "L1_T5_TAS_1",
        "TT_L1_T5_1",
        "TT_L1_T5_2",
        "L1_T6_TAS_1",
        "TT_L1_T6_1",
        "L1_T7_TAS_1",
        "TT_L1_T7_1",
        "L1_T8_TAS_1",
        "TT_L1_T8_1",
        "L1_T9_TAS_1",
        "L1_T10_TAS_1"
    ],

    "easy": [
        "L1_T1_TAS_1",
        "TT_L1_T1_1",
        "TT_L1_T1_2",
        "TT_L1_T1_3",
        "L1_T2_TAS_1",
        "TT_L1_T2_1",
        "L1_T3_TAS_1",
        "TT_L1_T3_1",
        "L1_T4_TAS_1",
        "TT_L1_T4_1",
        "TT_L1_T4_2",
        "L1_T5_TAS_1",
        "TT_L1_T5_1",
        "TT_L1_T5_2",
        "L1_T6_TAS_1",
        "TT_L1_T6_1",
        "L1_T7_TAS_1",
        "TT_L1_T7_1",
        "L1_T8_TAS_1",
        "TT_L1_T8_1",
        "L1_T9_TAS_1",
        "L1_T10_TAS_1"
    ],

    "medium": [
        "L2_T1_TAS_1",
        "TT_L2_T1_1",
        "TT_L2_T1_2",
        "TT_L2_T1_3",
        "L2_T2_TAS_1",
        "TT_L2_T2_1",
        "L2_T3_TAS_1",
        "TT_L2_T3_1",
        "TT_L2_T3_2",
        "L2_T4_TAS_1",
        "TT_L2_T4_1",
        "L2_T5_TAS_1",
        "TT_L2_T5_1",
        "L2_T6_TAS_1",
        "TT_L2_T6_1",
        "L2_T7_TAS_1",
        "TT_L2_T7_1",
        "L2_T8_TAS_1",
        "TT_L2_T8_1",
        "TT_L2_T8_2",
        "L2_T9_TAS_1",
        "L2_T10_TAS_1"
    ],

    "high": [
        "L3_T1_TAS_1",
        "TT_L3_T1_1",
        "TT_L3_T1_2",
        "TT_L3_T1_3",
        "L3_T2_TAS_1",
        "TT_L3_T2_1",
        "L3_T3_TAS_1",
        "TT_L3_T3_1",
        "L3_T4_TAS_1",
        "TT_L3_T4_1",
        "TT_L3_T4_2",
        "L3_T5_TAS_1",
        "TT_L3_T5_1",
        "L3_T6_TAS_1",
        "TT_L3_T6_1",
        "L3_T7_TAS_1",
        "TT_L3_T7_1",
        "L3_T8_TAS_1",
        "TT_L3_T8_1",
        "L3_T9_TAS_1",
        "L3_T10_TAS_1"
    ],

    "post": [
        "L3_T1_TAS_1",
        "TT_L3_T1_1",
        "TT_L3_T1_2",
        "TT_L3_T1_3",
        "L3_T2_TAS_1",
        "TT_L3_T2_1",
        "L3_T3_TAS_1",
        "TT_L3_T3_1",
        "L3_T4_TAS_1",
        "TT_L3_T4_1",
        "TT_L3_T4_2",
        "L3_T5_TAS_1",
        "TT_L3_T5_1",
        "L3_T6_TAS_1",
        "TT_L3_T6_1",
        "L3_T7_TAS_1",
        "TT_L3_T7_1",
        "L3_T8_TAS_1",
        "TT_L3_T8_1",
        "L3_T9_TAS_1",
        "L3_T10_TAS_1"
    ]
}


def get_next_undone_task(student_id):
    """
    Fetch the next undone task by comparing 'tasks_to_do' with 'tasks_done',
    while treating all tasks in an optional group as completed if one is done.
    """
    student = session.query(Student).filter_by(id=student_id).first()
    if not student:
        st.error("User not found in the database.")
        return None

    # Fetch tasks assigned to the student
    try:
        tasks_to_do = json.loads(student.tasks_to_do) if student.tasks_to_do else []
    except json.JSONDecodeError:
        st.error("Error parsing tasks_to_do. Invalid JSON format.")
        return None

    # Fetch completed tasks
    completed_tasks = session.query(TasksDone.task_id).filter_by(student_id=student_id).all()
    completed_tasks = {task[0] for task in completed_tasks}  # Convert to set for fast lookup

    # Define optional task groups
    OPTIONAL_TASK_GROUPS = {
        "L1_T2_TAS_1": ["L1_T2_TAS_1", "L1_T2_TAS_2"],
        "L1_T3_TAS_1": ["L1_T3_TAS_1", "L1_T3_TAS_2", "L1_T3_TAS_3"],
        "L1_T4_TAS_1": ["L1_T4_TAS_1", "L1_T4_TAS_2"],
        "L1_T5_TAS_1": ["L1_T5_TAS_1", "L1_T5_TAS_2", "L1_T5_TAS_3"],
        "L1_T6_TAS_1": ["L1_T6_TAS_1", "L1_T6_TAS_2", "L1_T6_TAS_3"],
        "L1_T7_TAS_1": ["L1_T7_TAS_1", "L1_T7_TAS_2"],
        "L1_T8_TAS_1": ["L1_T8_TAS_1", "L1_T8_TAS_2", "L1_T8_TAS_3"],
        "L1_T9_TAS_1": ["L1_T9_TAS_1", "L1_T9_TAS_2", "L1_T9_TAS_3"],

        "L2_T2_TAS_1": ["L2_T2_TAS_1", "L2_T2_TAS_2", "L2_T2_TAS_3"],
        "L2_T3_TAS_1": ["L2_T3_TAS_1", "L2_T3_TAS_2", "L2_T3_TAS_3"],
        "L2_T4_TAS_1": ["L2_T4_TAS_1", "L2_T4_TAS_2", "L2_T4_TAS_3"],
        "L2_T5_TAS_1": ["L2_T5_TAS_1", "L2_T5_TAS_2", "L2_T5_TAS_3"],
        "L2_T6_TAS_1": ["L2_T6_TAS_1", "L2_T6_TAS_2"],
        "L2_T7_TAS_1": ["L2_T7_TAS_1", "L2_T7_TAS_2", "L2_T7_TAS_3"],
        "L2_T8_TAS_1": ["L2_T8_TAS_1", "L2_T8_TAS_2", "L2_T8_TAS_3"],
        "L2_T9_TAS_1": ["L2_T9_TAS_1", "L2_T9_TAS_2"],

        "L3_T2_TAS_1": ["L3_T2_TAS_1", "L3_T2_TAS_2", "L3_T2_TAS_3"],
        "L3_T3_TAS_1": ["L3_T3_TAS_1", "L3_T3_TAS_2", "L3_T3_TAS_3"],
        "L3_T4_TAS_1": ["L3_T4_TAS_1", "L3_T4_TAS_2"],
        "L3_T5_TAS_1": ["L3_T5_TAS_1", "L3_T5_TAS_2", "L3_T5_TAS_3"],
        "L3_T6_TAS_1": ["L3_T6_TAS_1", "L3_T6_TAS_2", "L3_T6_TAS_3"],
        "L3_T7_TAS_1": ["L3_T7_TAS_1", "L3_T7_TAS_2", "L3_T7_TAS_3"],
        "L3_T8_TAS_1": ["L3_T8_TAS_1", "L3_T8_TAS_2"],
        "L3_T9_TAS_1": ["L3_T9_TAS_1", "L3_T9_TAS_2"],
    }

    # Mark optional groups as completed if one task in the group is done
    completed_task_groups = set()
    for key_task, task_group in OPTIONAL_TASK_GROUPS.items():
        if any(task in completed_tasks for task in task_group):  # If any task in the group is done
            completed_task_groups.update(task_group)  # Mark all as completed

    # Find the first undone task
    for task in tasks_to_do:
        if isinstance(task, list):  # Ignore task groups
            continue
        if task not in completed_tasks and task not in completed_task_groups:
            return task

    return None  # No remaining tasks


def start_next_activity():
    """
    Handles logic for "Start the activity". Redirects to the next undone task or tutorial page.
    """
    user_info = st.session_state.get('user_info')
    if not user_info or not hasattr(user_info, 'id'):
        st.error("No logged-in user found. Please log in first.")
        return

    next_task = get_next_undone_task(user_info.id)

    if next_task:
        if next_task in pages:  # ✅ If it's a tutorial page, go directly to it
            st.session_state.page = next_task
        else:  # ✅ If it's a normal task, go to `task_1` and store the task
            st.session_state.task_selection = next_task
            st.session_state.page = "task_1"

        st.rerun()
    else:
        st.success("🎉 All assigned tasks have been completed!")



def user_dashboard_page():
    st.title("User Dashboard")
    
    # Custom CSS Styles
    styles = """
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
    body {
        font-family: "Roboto", sans-serif;
    }
    .progress-container {
        background-color: #8ef7a7;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 20px;
    }
    .purple-container {
        background-color: white;        
        border: 4px solid #A680F2;    
        border-radius: 10px;
        padding: 20px;                
        margin-bottom: 20px;
        color: black;                 
    }
    .purple-container h3 {
        margin-top: 0;
    }
    .purple-container h4 {
        margin-bottom: 5px;
    }
    .right-buttons {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .right-buttons button {
        width: 180px;
        margin-top: 10px;
    }
    </style>
    """
    st.markdown(styles, unsafe_allow_html=True)
    
    # Retrieve logged-in student data
    student = st.session_state.get('user_info')  # Ensure 'user_info' contains the student object
    if not student:
        st.error("No user is currently logged in.")
        return

    st.markdown(f"<h2>Welcome, {student.username}!</h2>", unsafe_allow_html=True)

    # Progress Section
    st.markdown('<div class="progress-container"><h3>My Progress</h3></div>', unsafe_allow_html=True)
    activities_completed = st.session_state.get('activities_completed', 0)
    progress_percentage = min(activities_completed / 10, 1.0)  # Ensure progress doesn't exceed 100%
    st.progress(progress_percentage)

    if st.button("Start the activity"):
        start_next_activity()
        st.rerun()

    # Create a layout with two columns: Left for Metrics & Errors, Right for Buttons
    col1, col2 = st.columns([3, 1])

    with col1:
        # Display Metrics
        words_count = st.session_state.get('words_count', 0)
        sentences_count = st.session_state.get('sentences_count', 0)
        learning_time = st.session_state.get('learning_time', 0)
        metrics_html = f"""
        <div class="purple-container">
            <h3>My Metrics</h3>
            <h4>Words</h4>
            <p>{words_count}</p>
            <h4>Sentences</h4>
            <p>{sentences_count}</p>
            <h4>Learning Time</h4>
            <p>{learning_time} minutes</p>
        </div>
        """
        st.markdown(metrics_html, unsafe_allow_html=True)

        # Fetch Errors for the Logged-in Student
        try:
            errors_obj = session.query(Errors).filter_by(student_id=student.id).one_or_none()
        except SQLAlchemyError as e:
            st.error(f"Error fetching errors: {e}")
            errors_obj = None

        # grammar errors and spelling errors
        if errors_obj:
            gram_err = errors_obj.gram_err or {}
            spell_err = errors_obj.spell_err or []
        else:
            gram_err = {}
            spell_err = []


    with col2:
        # Right-side buttons
        st.markdown('<div class="right-buttons">', unsafe_allow_html=True)
        
        if st.button("Grammar Practice"):
            st.info("Navigating to Grammar Practice... (placeholder)")

        if st.button("Spelling Practice"):
            navigate_to_spelling()
            st.rerun()
        
        st.markdown('</div>', unsafe_allow_html=True)


def navigate_to_spelling():
    st.session_state.page = 'spelling_practice'


def show_pdpa_policy():
    st.markdown("""
    <details>
    <summary style="color: #007bff; cursor: pointer;">View Personal Data Protection Policy</summary>
    <div style="padding: 10px; background-color: #f9f9f9; border-radius: 5px; border: 1px solid #ddd; margin-top: 10px;">
        <h2>Personal Data Protection Policy</h2>
        <p><strong>Introduction</strong></p>
        <p>At <strong>GrammarTool</strong>, we are committed to protecting the privacy and personal data of our users...</p>
        <h3>What Personal Data We Collect</h3>
        <ul>
            <li><strong>User Information</strong>: Name, email address, and contact details when you create an account.</li>
            <li><strong>Usage Data</strong>: Information about how you interact with the app, including your IP address...</li>
            <li><strong>Content</strong>: Any text, documents, or other content you input into the app for processing...</li>
        </ul>
        <h3>How We Use Your Personal Data</h3>
        <p>The personal data we collect will be used for the following purposes:</p>
        <ul>
            <li>To provide and maintain the functionality of the app.</li>
            <li>To improve user experience and enhance app features.</li>
            <li>To communicate with you about updates, features, and important notices.</li>
        </ul>
        <h3>Data Security</h3>
        <p>We implement appropriate technical and organizational measures to protect your personal data from unauthorized access...</p>
        <h3>Your Rights</h3>
        <p>You have the right to request access to your personal data, corrections, and deletion where applicable.</p>
        <p><strong>Contact us</strong> at [Contact Email] for any PDPA-related inquiries.</p>
    </div>
    </details>
    """, unsafe_allow_html=True)

def render_progress_bar():
    steps = ["login", "personal_info", "proficiency", "self_assessment", "user_dashboard"]
    step_labels = ["Login/Registration", "Personal Information", "Proficiency Test", "Self-Assessment", "User Dashboard"]
    current_step = steps.index(st.session_state.page) if st.session_state.page in steps else 0

    if st.session_state.get('render_progress_bar', False) and st.session_state.page in steps:
        progress_percentage = (current_step + 1) / len(steps)
        st.progress(progress_percentage)
        st.write(f"Step {current_step + 1} of {len(steps)}: {step_labels[current_step]}")
     
non_count_nouns_list = [
    "advice", "anger", "beauty", "bravery", "calm", "care", "chaos", "comfort", "courage", "curiosity", "darkness", "dignity", 
    "energy", "enthusiasm", "evil", "faith", "fame", "freedom", "friendship", "fun", "generosity", "goodness", "happiness", 
    "health", "honesty", "honor", "hope", "hospitality", "humor", "importance", "independence", "intelligence", "joy", "justice", 
    "kindness", "knowledge", "laughter", "laziness", "liberty", "logic", "love", "luck", "maturity", "mercy", "modesty", "motivation", 
    "mystery", "obedience", "patience", "peace", "perfection", "pride", "progress", "relief", "respect", "satisfaction", "shame", 
    "simplicity", "sincerity", "skill", "success", "support", "talent", "trust", "truth", "understanding", "violence", "wealth", 
    "wisdom", "youth","noney","time",
    "air", "aluminum", "asphalt", "brass", "bread", "brick", "bronze", "butter", "cardboard", "cement", "cheese", "chocolate", 
    "clay", "cloth", "concrete", "copper", "cotton", "cream", "dirt", "dust", "fabric", "flour", "foam", "fuel", "gasoline", 
    "glass", "gold", "gravel", "grease", "honey", "hydrogen", "ice", "iron", "jelly", "leather", "linen", "lumber", "margarine", 
    "mayonnaise", "meat", "milk", "nylon", "oil", "oxygen", "paper", "plastic", "platinum", "pollen", "rubber", "salt", "sand", 
    "silk", "silver", "soap", "soil", "spice", "steel", "stone", "sugar", "syrup", "tea", "tofu", "velvet", "water", "wax", "wool",
    "applause", "clothing", "equipment", "feedback", "footwear", "furniture", "garbage", "gear", "hardware", "jewelry", "luggage", 
    "machinery", "mail", "makeup", "merchandise", "money", "news", "pollution", "software", "stationery", "traffic", "trash", 
    "transportation", "waste", "work","advice"
    "accounting", "acting", "advertising", "baking", "boating", "camping", "catering", "chess", "dancing", "diving", "driving", 
    "editing", "engineering", "farming", "fencing", "fishing", "gardening", "golf", "hiking", "homework", "hunting", "jogging", 
    "journalism", "knitting", "law", "marketing", "medicine", "mining", "nursing", "painting", "photography", "reading", 
    "sailing", "sculpting", "shopping", "singing", "skiing", "sleeping", "snorkeling", "surfing", "swimming", "teaching", 
    "tourism", "training", "typing", "walking", "writing", "yoga",
    "anatomy", "architecture", "astronomy", "biology", "botany", "chemistry", "economics", "engineering", "environmentalism", 
    "genetics", "geography", "geology", "history", "linguistics", "mathematics", "medicine", "microbiology", "music", "nutrition", 
    "physics", "physiology", "psychology", "sociology", "statistics", "zoology",
    "autumn", "climate", "cold", "dew", "drizzle", "fog", "frost", "hail", "heat", "humidity", "lightning", "mist", "moisture", 
    "rain", "sleet", "smog", "snow", "spring", "sunshine", "thunder", "weather", "winter",
    "aspirin", "blood", "chalk", "cream", "deodorant", "insulin", "medicine", "lotion", "mucus", "oxygen", "shampoo", "soap", 
    "toothpaste", "wax",
    "bacon", "butter", "caviar", "cereal", "cheese", "coffee", "cottage cheese", "cream", "flour", "fruit", "garlic", "ginger", 
    "honey", "ketchup", "lamb", "lettuce", "margarine", "mayonnaise", "meat", "milk", "mustard", "oil", "pasta", "pepper", 
    "pork", "poultry", "rice", "salt", "sauce", "seafood", "spinach", "sugar", "tea", "tofu", "turkey", "vinegar", "water", 
    "whiskey", "wine", "yogurt",
    "antibiotics", "bandage", "chemotherapy", "cotton", "cure", "diagnosis", "insulin", "ointment", "penicillin", "physiotherapy", 
    "plasma", "radiation", "serum", "stamina", "surgery", "treatment", "vaccination", "vaccine",
    "biodiversity", "conservation", "deforestation", "erosion", "habitat", "land", "landscape", "nature", "pollution", "rainfall", 
    "recycling", "silt", "soil", "sunlight", "temperature", "vegetation", "wildlife", "wind"
]

# Define lists for common time and location markers
time_markers = [
    "morning", "the afternoon", "evening", "night", "midnight", "noon", 
    "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday",
    "January", "February", "March", "April", "May", "June", "July", "August", 
    "September", "October", "November", "December",
    "weekend", "holiday", "Christmas", "New Year's Day", "summer", "winter", 
    "spring", "fall", "today", "tomorrow", "yesterday"
]

location_markers = [
    "school", "office", "home", "hospital", "airport", "station", " the park", "beach", 
    "restaurant", "cafe", "museum", "city", "village", "country", "town", 
    "building", "mall", "theater", "library", "shop", "market", "street", "road", 
    "highway", "bridge", "intersection", "plaza"
]

modal_verbs_no_to = ['can', 'could', 'may', 'might', 'shall', 'should', 'will', 'would', 'must']
modal_verbs_with_to = ['have to', 'need to', 'ought to', 'be able to', 'used to']

relative_pronouns = ['who', 'whom', 'whose', 'which', 'that', 'where', 'when']

countable_singular_plural_pairs = {
            "person": "people",
            "man": "men",
            "woman": "women",
            "child": "children",
            "mouse": "mice",
            "foot": "feet",
            "tooth": "teeth",
            "goose": "geese"
        }
# Verbs followed by Gerunds (Verb + -ing)
verbs_followed_by_gerunds = [
    "admit", "admits", "admitted", 
    "anticipate", "anticipates", "anticipated",
    "appreciate", "appreciates", "appreciated", 
    "avoid", "avoids", "avoided", 
    "begin", "begins", "began", 
    "consider", "considers", "considered", 
    "continue", "continues", "continued", 
    "delay", "delays", "delayed", 
    "deny", "denies", "denied", 
    "discuss", "discusses", "discussed", 
    "dislike", "dislikes", "disliked",
    "enjoy", "enjoys", "enjoyed", 
    "escape", "escapes", "escaped", 
    "finish", "finishes", "finished", 
    "imagine", "imagines", "imagined", 
    "involve", "involves", "involved",
    "keep", "keeps", "kept", 
    "mention", "mentions", "mentioned", 
    "mind", "minds", "minded", 
    "miss", "misses", "missed", 
    "postpone", "postpones", "postponed", 
    "practice", "practices", "practiced", 
    "quit", "quits", "quit", 
    "recall", "recalls", "recalled", 
    "recommend", "recommends", "recommended", 
    "regret", "regrets", "regretted",
    "resist", "resists", "resisted",
    "risk", "risks", "risked", 
    "suggest", "suggests", "suggested",
    "understand", "understands", "understood","begin", "begins", "began", "start", "starts", "started", "continue", "continues", "continued", "hate", "hates", "hated", "like", "likes", "liked", "love", "loves", "loved", "prefer", "prefers", "preferred", "attempt", "attempts", "attempted","forget", "forgets", "forgot", "remember", "remembers", "remembered", "stop", "stops", "stopped", "try", "tries", "tried", "regret", "regrets", "regretted", "mean", "means", "meant", "go", "goes", "went"
]

possessive_pronouns = {"my", "mine", "your", "yours", "his", "her", "hers", "its", "our", "ours", "their", "theirs"}

# Verbs followed by Infinitives (Verb + to + infinitive)
verbs_followed_by_infinitives = [
    "agree", "agrees", "agreed", 
    "afford", "affords", "afforded", 
    "appear", "appears", "appeared", 
    "arrange", "arranges", "arranged", 
    "ask", "asks", "asked", 
    "attempt", "attempts", "attempted", 
    "care", "cares", "cared", 
    "choose", "chooses", "chose", 
    "claim", "claims", "claimed", 
    "decide", "decides", "decided", 
    "demand", "demands", "demanded", 
    "deserve", "deserves", "deserved", 
    "expect", "expects", "expected", 
    "fail", "fails", "failed", 
    "forget", "forgets", "forgot", 
    "happen", "happens", "happened", 
    "hesitate", "hesitates", "hesitated", 
    "hope", "hopes", "hoped", 
    "intend", "intends", "intended", 
    "learn", "learns", "learned", 
    "manage", "manages", "managed", 
    "mean", "means", "meant", 
    "offer", "offers", "offered", 
    "plan", "plans", "planned", 
    "prepare", "prepares", "prepared", 
    "pretend", "pretends", "pretended", 
    "promise", "promises", "promised", 
    "refuse", "refuses", "refused", 
    "seem", "seems", "seemed", 
    "struggle", "struggles", "struggled", 
    "tend", "tends", "tended", 
    "threaten", "threatens", "threatened", 
    "want", "wants", "wanted", 
    "wish", "wishes", "wished","begin", "begins", "began", "start", "starts", "started", "continue", "continues", "continued", "hate", "hates", "hated", "like", "likes", "liked", "love", "loves", "loved", "prefer", "prefers", "preferred", "attempt", "attempts", "attempte","forget", "forgets", "forgot", "remember", "remembers", "remembered", "stop", "stops", "stopped", "try", "tries", "tried", "regret", "regrets", "regretted", "mean", "means", "meant", "go", "goes", "went"
]
extra_determiners = [
    "the", "a", "an", "this", "that", "these", "those",
    "my", "your", "his", "her", "its", "our", "their",
    "some", "any", "each", "every", "either", "neither",
    "few", "many", "much", "several", "all", "both", "half", "no",
    "one", "two", "three",  # Add more numbers if needed
    "such", "what", "which"
]

coordinating_conjunctions = {"and", "or", "but", "for", "nor", "yet", "so"}
subordinating_conjunctions = {
    "because", "although", "since", "if", "while", "before", "after",
    "when", "as", "unless", "until", "whereas", "though", "even though",
    "as long as", "as soon as", "so that", "in order that"
}

ERROR_CODES_WITH_DISTRACTIONS = {
    "VERB:INFL", "NOUN:INFL", "PRON:CASE_SUB", "PRON:REL_WHICH",
    "PRON:REL_WHO", "PRON:REL_WHOM", "PRON:REL_WHOSE", "PRON:REL_THAT",
    "PRON:REL_WHERE", "PRON:REL_WHEN", "PRON:GEN", "DET:CON_A",
    "DET:CON_AN", "DET:POSSESSIVE_ERROR", "ADJ:FORM", "ADV:COMP",
    "ADV:SUP", "ADV:FORM", "ADV:FORM_ERR", "PREP:IN", "ORTH:CAP",
    "MORPH:ADJ_TO_ADV", "MORPH:ADV_TO_ADJ", "MORPH:COMP_SUPER",
    "MORPH:SPELL_NOUN", "MORPH:ADJ_ADV_FORM", "CONJ:COORD",
    "CONJ:SUBORD", "NOUN:POS_MISS", "NOUN:POS_MISS/IN", "DET:IT_ITS",
    "DET:ITS_IT", "ORTH:HYP", "NOUN:POSS"
}
ERROR_CODES_SCRAMBLE_POS = {
    "WO", "PREP:MISS", "DET:MISS", "VERB:MISS", "VERB:FORM_OTHER",
    "OTHER", "NOUN", "EXTRA:TO", "DET:EXTRA", "PREP:EXTRA", "MORPH:GEN",
    "CONJ:GEN", "CONJ:MISS_COMPOUND", "CONJ:MISS_COMPLEX", "CONJ:MISS_COORD",
    "CONJ:MISS_SUBORD"
}

punctuation_errors = {
        "PUNCT:EXTRA_COMMA", "PUNCT:MISSING_COMMA", "PUNCT:EXTRA_PERIOD", "PUNCT:MISSING_PERIOD",
        "PUNCT:COMMA_SPLICE", "PUNCT:SEMICOLON", "PUNCT:EXTRA_COLON", "PUNCT:MISSING_COLON",
        "PUNCT:EXTRA_SEMICOLON", "PUNCT:MISSING_SEMICOLON", "PUNCT:GEN", "MISSING:COMMA_SEQ",
        "MISSING:COMMA_COMPOUND", "MISSING:COMMA_COMPLEX", "MISSING:COMMA"
    }


# Define error codes related to verb form, tense, and SVA
VERB_ERROR_CODES = {
    "VERB:TENSE_PRSIM", "VERB:TENSE_PRCON", "VERB:TENSE_PRPER", "VERB:TENSE_PRPERCON",
    "VERB:TENSE_PASIM", "VERB:TENSE_PACON", "VERB:TENSE_PAPER", "VERB:TENSE_PAPERCON",
    "VERB:TENSE_FUSIM", "VERB:TENSE_FUCON", "VERB:TENSE_FUPER", "VERB:TENSE_FUPERCON",
    "VERB:TENSE_PRSIMPAS", "VERB:TENSE_PRCONPAS", "VERB:TENSE_PRPERPAS",
    "VERB:TENSE_PASIMPAS", "VERB:TENSE_PACONPAS", "VERB:TENSE_PAPERPAS",
    "VERB:TENSE_FUSIMPAS", "VERB:TENSE_FUCONPAS", "VERB:TENSE_FUPERPAS",
    "VERB:TENSE_UNPASS", "VERB:TENSE_UNACT", "VERB:FORM_VERB:FORM_MODDEDUC",
    "VERB:SVA_PRSIM", "VERB:SVA_PRCON", "VERB:SVA_PRPER", "VERB:SVA_PRPERCON",
    "VERB:SVA_PASIM", "VERB:SVA_PACON", "VERB:SVA_PAPER", "VERB:SVA_PAPERCON",
    "VERB:SVA_FUSIM", "VERB:SVA_FUCON", "VERB:SVA_FUPER", "VERB:SVA_FUPERCON",
    "VERB:SVA_PRSIMPAS", "VERB:SVA_PRCONPAS", "VERB:SVA_PRPERPAS",
    "VERB:SVA_PASIMPAS", "VERB:SVA_PACONPAS", "VERB:SVA_PAPERPAS",
    "VERB:SVA_FUSIMPAS", "VERB:SVA_FUCONPAS", "VERB:SVA_FUPERPAS",
    "VERB:FORM_PRSIM", "VERB:FORM_PRCON", "VERB:FORM_PRPER", "VERB:FORM_PRPERCON",
    "VERB:FORM_PASIM", "VERB:FORM_PACON", "VERB:FORM_PAPER", "VERB:FORM_PAPERCON",
    "VERB:FORM_FUSIM", "VERB:FORM_FUCON", "VERB:FORM_FUPER", "VERB:FORM_FUPERCON",
    "VERB:FORM_PRSIMPAS", "VERB:FORM_PRCONPAS", "VERB:FORM_PRPERPAS",
    "VERB:FORM_PASIMPAS", "VERB:FORM_PACONPAS", "VERB:FORM_PAPERPAS",
    "VERB:FORM_FUSIMPAS", "VERB:FORM_FUCONPAS", "VERB:FORM_FUPERPAS",
    "VERB:FORM_UNPASS", "VERB:FORM_UNACT"
}

NOUN_ERRORS = { "NOUN:SG", "NOUN:PL", "NOUN:COUNT", "NOUN:NUM_UNCOUNT","NOUN:POSS"}

def main():
    # Initialize session state variables
    if 'page' not in st.session_state:
        st.session_state.page = 'task_1'
    if 'show_learn_more' not in st.session_state:
        st.session_state.show_learn_more = False
    if 'analysis_done' not in st.session_state:
        st.session_state.analysis_done = False
    if 'user_input_task1' not in st.session_state:
        st.session_state.user_input_task1 = ''
    if 'accuracy_score' not in st.session_state:
        st.session_state['accuracy_score'] = 0

    if st.session_state.page == 'task_1':
        task_1_page()
    # Additional pages can be added as needed

# Define mapping function for tenses
def map_verb_error_label(label):
    mapping = {
        'Present Simple Active': 'PRSIM',
        'Present Continuous Active': 'PRCON',
        'Present Perfect Active': 'PRPER',
        'Present Perfect Continuous Active': 'PRPERCON',
        'Past Simple Active': 'PASIM',
        'Past Continuous Active': 'PACON',
        'Past Perfect Active': 'PAPER',
        'Past Perfect Continuous Active': 'PAPERCON',
        'Future Simple Active': 'FUSIM',
        'Future Continuous Active': 'FUCON',
        'Future Perfect Active': 'FUPER',
        'Future Perfect Continuous Active': 'FUPERCON',
        'Present Simple Passive': 'PRSIMPAS',
        'Present Continuous Passive': 'PRCONPAS',
        'Present Perfect Passive': 'PRPERPAS',
        'Past Simple Passive': 'PASIMPAS',
        'Past Continuous Passive': 'PACONPAS',
        'Past Perfect Passive': 'PAPERPAS',
        'Future Simple Passive': 'FUSIMPAS',
        'Future Continuous Passive': 'FUCONPAS',
        'Future Perfect Passive': 'FUPERPAS',
        'Modals of deduction': 'MODDEDUC',
        'Unknown Passive': 'UNPASS',
        'Unknown Active': 'UNACT'
    }
    return mapping.get(label, 'SIM')

# Expand contractions
def expand_contractions(sentence):
    contractions = {
        "isn't": "is not", "aren't": "are not", "wasn't": "was not", "weren't": "were not",
        "hasn't": "has not", "haven't": "have not", "hadn't": "had not",
        "won't": "will not", "wouldn't": "would not", "can't": "cannot",
        "couldn't": "could not", "shouldn't": "should not", "doesn't": "does not",
        "don't": "do not", "didn't": "did not"
    }

    for contraction, expanded in contractions.items():
        sentence = sentence.replace(contraction, expanded)
    return sentence

# Detect passive voice based on "to be" forms + past participle (VBN)
def is_passive_voice(tokens):
    be_forms = {"is", "are", "was", "were", "be", "being", "been", "is not", "are not", "was not", "were not", "will be", "will not be"}
    
    # Check for a "to be" form followed by a VBN (past participle)
    for i, token in enumerate(tokens[:-1]):
        if token.text.lower() in be_forms and tokens[i + 1].tag_ == 'VBN':
            return True
    return False

def determine_tense(sentence):
    expanded_sentence = expand_contractions(sentence)  # Expand contractions
    doc = nlp(expanded_sentence)
    tokens = [token for token in doc]
    auxiliaries = [token for token in tokens if token.dep_ in {'aux', 'auxpass'}]
    verbs = [token for token in tokens if token.pos_ == 'VERB']
    
    # Check if the sentence is passive
    if is_passive_voice(tokens):
        voice = "Passive"
        # Check for passive tenses
        if any(aux.text.lower() in {"have", "has"} for aux in auxiliaries) and any(verb.tag_ == 'VBN' for verb in verbs):
            tense = "Present Perfect Passive"
        elif any(aux.text.lower() == "will" for aux in auxiliaries) and any(verb.tag_ == 'VBN' for verb in verbs):
            tense = "Future Simple Passive"
        elif any(aux.text.lower() == "had" for aux in auxiliaries):
            tense = "Past Perfect Passive"
        elif any(aux.text.lower() == "will have been" for aux in auxiliaries):
            tense = "Future Perfect Passive"
        elif any(aux.text.lower() in {"is", "are", "am"} for aux in auxiliaries) and any(verb.tag_ == 'VBG' for verb in verbs):
            tense = "Present Continuous Passive"
        elif any(aux.text.lower() in {"was", "were"} for aux in auxiliaries) and any(verb.tag_ == 'VBG' for verb in verbs):
            tense = "Past Continuous Passive"
        elif any(aux.text.lower() in {"is", "are", "am"} for aux in auxiliaries):
            tense = "Present Simple Passive"
        elif any(aux.text.lower() in {"was", "were"} for aux in auxiliaries):
            tense = "Past Simple Passive"
        else:
            tense = "Unknown Passive"
    else:
        # If not passive, it’s active
        voice = "Active"
        # Check for active tenses
        if any(aux.text.lower() in {"have", "has"} for aux in auxiliaries) and any(verb.tag_ == 'VBG' for verb in verbs):
            tense = "Present Perfect Continuous Active"
        elif any(aux.text.lower() == "had" for aux in auxiliaries) and any(verb.tag_ == 'VBG' for verb in verbs):
            tense = "Past Perfect Continuous Active"
        elif any(aux.text.lower() in {"could", "must", "may", "might", "can't"} for aux in auxiliaries) and \
            any(aux.text.lower() == "have" for aux in auxiliaries) and \
            any(verb.tag_ == 'VBN' for verb in verbs):
            tense = "Modals of deduction"
        elif any(aux.text.lower() in {"am", "is", "are"} for aux in auxiliaries) and any(verb.tag_ == 'VBG' for verb in verbs):
            tense = "Present Continuous Active"
        elif any(aux.text.lower() == "will" for aux in auxiliaries) and any(aux.text.lower() == "have" for aux in auxiliaries) and any(verb.tag_ == 'VBN' for verb in verbs):
            tense = "Future Perfect Active"
        elif any(aux.text.lower() in {"have", "has"} for aux in auxiliaries) and any(verb.tag_ == 'VBN' for verb in verbs):
            tense = "Present Perfect Active"
        elif any(aux.text.lower() in {"was", "were"} for aux in auxiliaries) and any(verb.tag_ == 'VBG' for verb in verbs):
            tense = "Past Continuous Active"
        elif any(aux.text.lower() == "had" for aux in auxiliaries) and any(verb.tag_ == 'VBN' for verb in verbs):
            tense = "Past Perfect Active"
        elif any(aux.text.lower() == "will" for aux in auxiliaries) and all(verb.tag_ == 'VB' for verb in verbs):
            tense = "Future Simple Active"
        elif any(aux.text.lower() == "will" for aux in auxiliaries) and any(verb.tag_ == 'VBG' for verb in verbs):
            tense = "Future Continuous Active"
        elif all(verb.tag_ == 'VBD' for verb in verbs) and not auxiliaries:
            tense = "Past Simple Active"
        elif all(verb.tag_ in {'VB', 'VBP', 'VBZ'} for verb in verbs) and not auxiliaries:
            tense = "Present Simple Active"
        else:
            tense = "Unknown Active"

    # Map tense to predefined codes
    mapped_tense = map_verb_error_label(f"{tense}")
    return mapped_tense

# Helper function for separating punctuation
def separate_punctuation(text):
    # Separate punctuation from words both before and after using regex
    text = re.sub(r'(\w)([.,:;!?])', r'\1 \2', text)  # Separate punctuation after words
    text = re.sub(r'([.,:;!?])(\w)', r'\1 \2', text)  # Separate punctuation before words
    return text.strip()


# Helper function for separating punctuation
def separate_punctuation(text):
    # Separate punctuation from words both before and after using regex
    text = re.sub(r'(\w)([.,:;!?])', r'\1 \2', text)  # Separate punctuation after words
    text = re.sub(r'([.,:;!?])(\w)', r'\1 \2', text)  # Separate punctuation before words
    return text.strip()
    
def map_error_code(error_type, sentence, original_tokens, corrected_tokens):
    """
    Maps error codes for punctuation and other errors, calling classify_comma_error for missing commas.
    """
    # Separate punctuation from text in original and corrected tokens
    original_text = separate_punctuation(" ".join([tok.text if hasattr(tok, 'text') else str(tok) for tok in original_tokens if isinstance(tok, (str, spacy.tokens.Token))]))
    corrected_text = separate_punctuation(" ".join([tok.text if hasattr(tok, 'text') else str(tok) for tok in corrected_tokens if isinstance(tok, (str, spacy.tokens.Token))]))
    # Ensure that original_tokens and corrected_tokens are always converted to lowercase
    original_tokens_lower = [str(token).lower() for token in original_tokens if isinstance(token, (str, spacy.tokens.Token))]
    corrected_tokens_lower = [str(token).lower() for token in corrected_tokens if isinstance(token, (str, spacy.tokens.Token))]

    # Syntax errors
    if error_type == "WO":
        if len(original_tokens) > 1 and len(corrected_tokens) > 1:
            # Ensure that we only access `dep_` if the token has it
            if any(hasattr(tok, 'dep_') and tok.dep_ == "advmod" for tok in original_tokens) or \
               any(hasattr(tok, 'dep_') and tok.dep_ == "advmod" for tok in corrected_tokens):
                return "SYNTAX:WORD_ORDER"
            if any(hasattr(tok, 'dep_') and tok.dep_ == "ccomp" for tok in original_tokens) or \
               any(hasattr(tok, 'dep_') and tok.dep_ == "xcomp" for tok in corrected_tokens):
                return "SYNTAX:CLAUSE_POS"
        else:
            return "WO:GEN"  # General syntax error

    # Punctuation-specific handling
    if ',' in original_text and ',' not in corrected_text:
        return "PUNCT:EXTRA_COMMA"
    elif ',' in corrected_text and ',' not in original_text:
        # Call classify_comma_error for detailed comma classification
        return "PUNCT:MISSING_COMMA"
    elif ':' in original_text and ':' not in corrected_text:
        return "PUNCT:EXTRA_COLON"
    elif ':' in corrected_text and ':' not in original_text:
        return "PUNCT:MISSING_COLON"
    elif ':' in original_text and ';' not in corrected_text:
        return "PUNCT:EXTRA_SEMICOLON"
    elif ':' in corrected_text and ';' not in original_text:
        return "PUNCT:MISSING_SEMICOLON"
    elif original_text.endswith('.') and not corrected_text.endswith('.'):
        return "PUNCT:EXTRA_PERIOD"
    elif corrected_text.endswith('.') and not original_text.endswith('.'):
        return "PUNCT:MISSING_PERIOD"

    # Orthography-specific handling
    if error_type == "ORTH":
        # Detect missing space or double space issues
        if "  " in original_text or "  " in corrected_text or re.search(r"[a-z][A-Z]", original_text):
            return "ORTH:SPACE"  # Missing space or double space error

        # Detect incorrect capitalization
        elif original_text.lower() == corrected_text.lower() and original_text != corrected_text:
            return "ORTH:CAP"  # General capitalization error

        # Detect incorrect capitalization in proper nouns (e.g., "new york" -> "New York")
        elif original_text.istitle() == False and corrected_text.istitle() and re.search(r'\b[A-Z][a-z]+\b', corrected_text):
            return "ORTH:CAP_PROP"  # Proper noun capitalization error

        else:
            return "ORTH:GEN" 

    # Handling determiner and noun errors with improved logic for counting
    if error_type == "DET" and not original_tokens:
        return "DET:MISS"  # Missing determiner
    if error_type == "VERB" and "to" in corrected_text and original_text.endswith("ing"):
        return "VERB:INFIN"  # Infinitive required

    # Other error type classifications
    if error_type == "NOUN":
        original_word = original_text.strip(string.punctuation)
        corrected_word = corrected_text.strip(string.punctuation)
        if corrected_word.endswith("'s") and not original_word.endswith("'s"):
            return "NOUN:POS_MISS/IN"
        elif original_word.endswith("'s") and not corrected_word.endswith("'s"):
            return "NOUN:POS_EXTRA"
        elif original_word.endswith("s") and not corrected_word.endswith("s"):
            return "NOUN:SG"  # Should be singular
        elif not original_word.endswith("s") and corrected_word.endswith("s"):
            return "NOUN:PL"  # Should be plural
        elif original_word.endswith("s") and corrected_word in non_count_nouns_list:
            return "NOUN:NUM_UNCOUNT"  # Plural form of an uncountable noun
        else:
            return "NOUN"

    if error_type == "NOUN:NUM":
        original_word = original_text.strip(string.punctuation)
        corrected_word = corrected_text.strip(string.punctuation)
        if original_word.endswith("s") and corrected_word in non_count_nouns_list:
            return "NOUN:NUM_UNCOUNT"  # Plural form of an uncountable noun
        # Check for possessive noun errors (NOUN:POS)
        elif corrected_word.endswith("'s") and not original_word.endswith("'s"):
            return "NOUN:POS_MISS"  # Missing possessive
        elif original_word.endswith("'s") and not corrected_word.endswith("'s"):
            return "NOUN:POS_EXTRA"  # Extra possessive
        elif original_word.endswith("s") and not corrected_word.endswith("s"):
            return "NOUN:SG"  # Should be singular
        elif not original_word.endswith("s") and corrected_word.endswith("s"):
            return "NOUN:PL"  # Should be plural
        elif original_word in non_count_nouns_list and not corrected_word in non_count_nouns_list:
            return "NOUN:COUNT"  # Incorrect use of countable noun
        else:
            return "NOUN:NUM"

    if error_type == "NOUN:INFL":
        return "NOUN:INFL"
    if error_type == "VERB:INFL":
        return "VERB:INFL"
    if error_type == "WO":
        return "WO"
    if error_type == "NOUN:POSS":
        return "NOUN:POSS"

    elif error_type == "DET":

        original_tokens_lower = [str(token).lower() for token in original_tokens]
        corrected_tokens_lower = [str(token).lower() for token in corrected_tokens]

        # Check if original_text is empty or only contains whitespace (indicating a missing determiner)
        if original_text.strip() == "":
            return "DET:MISS"  # Missing determiner
        elif corrected_text.lower() == "an" and original_text.lower() == "a":
            return "DET:CON_AN"  # Incorrect "a" instead of "an"
        elif corrected_text.lower() == "a" and original_text.lower() == "an":
            return "DET:CON_A"  # Incorrect "an" instead of "a"
        if any(tok.lower() in extra_determiners for tok in original_tokens if isinstance(tok, str)) and not any(tok.lower() in extra_determiners for tok in corrected_tokens if isinstance(tok, str)):
            return "DET:EXTRA"

        # Check if "Its's" exists in the original and "Its" exists in the corrected text
        elif "its's" in original_tokens_lower and "its" in corrected_tokens_lower:
            return "DET:POSSESSIVE_ERROR"  # Incorrect possessive determiner "Its's"

        if ("it" in original_tokens_lower or "it's" in original_tokens_lower or "its'" in original_tokens_lower) and "its" in corrected_tokens_lower:
            return "DET:IT_ITS"  # Incorrect determiner "it" instead of "its"

        if "its" in original_tokens_lower and ("it" in corrected_tokens_lower or "it's" in corrected_tokens_lower or "its'" in corrected_tokens_lower):
            return "DET:ITS_IT"  # Incorrect determiner "its" instead of "it"

        # Modal pronoun substitution
        elif any(token in possessive_pronouns for token in original_tokens) and any(token in possessive_pronouns for token in corrected_tokens):
            # Ensure the original and corrected tokens are not the same
            if set(original_tokens).intersection(possessive_pronouns) != set(corrected_tokens).intersection(possessive_pronouns):
                return "DET:POSSESSIVE_PRONOUN_SUBSTITUTION"
        elif original_text.endswith("'s") and not corrected_text.endswith("'s"):
            return "PRON:POSS_EXTRA"  # Extra possessive
        elif not original_text.endswith("'s") and corrected_text.endswith("'s"):
            return "PRON:POSS_MISS"  # Missing possessive
        elif original_text in relative_pronouns and corrected_text == "which":
            return "PRON:REL_WHICH"  # Incorrect relative pronoun corrected to "which"
        elif original_text in relative_pronouns and corrected_text == "who":
            return "PRON:REL_WHO"  # Incorrect relative pronoun corrected to "who"
        elif original_text in relative_pronouns and corrected_text == "whom":
            return "PRON:REL_WHOM"  # Incorrect relative pronoun corrected to "whom"
        elif original_text in relative_pronouns and corrected_text == "whose":
            return "PRON:REL_WHOSE"  # Incorrect relative pronoun corrected to "whose"
        elif original_text in relative_pronouns and corrected_text == "that":
            return "PRON:REL_THAT"  # Incorrect relative pronoun corrected to "that"
        elif original_text in relative_pronouns and corrected_text == "where":
            return "PRON:REL_WHERE"  # Incorrect relative pronoun corrected to "where"
        elif original_text in relative_pronouns and corrected_text == "when":
            return "PRON:REL_WHEN"  # Incorrect relative pronoun corrected to "when"

        else:
            return "DET:IN"  # General determiner error

    # Modal verb errors
    if error_type == "VERB":
        if "can" in original_text and "could" in corrected_text:
            return "VERB:MOD_CAN"
        elif "must" in original_text and "should" in corrected_text:
            return "VERB:MOD_MUST"
        elif "should" in original_text and any(word in corrected_text for word in ["ought to", "had better"]):
            return "VERB:MOD_ADVICE"
        elif any(word in original_text for word in ["must have", "might have", "could have"]):
            return "VERB:MOD_OF_DEDUCTION"
        elif error_type == "VERB:INFL":
            return "VERB:INFL" 
        elif original_text.strip() == "":
            return "VERB:MISS"  # Missing main verb error

    if error_type == "VERB:FORM":
        original_word = original_text.strip(string.punctuation)
        corrected_word = corrected_text.strip(string.punctuation)
        # Check for verb gerund error (verb should change to gerund form)
        if any(word in corrected_word for word in verbs_followed_by_gerunds) and not original_text.endswith('ing') and corrected_text.endswith('ing'):
            return "VERB:GERUND_ERROR"  # Gerund form required (e.g., "I enjoy walking")

        # Check for verb infinitive error (verb should change to infinitive form)
        if any(word in original_word for word in verbs_followed_by_infinitives) and "to" not in original_word and "to" in corrected_word:
            return "VERB:INFINITIVE_ERROR"  # Infinitive form required (e.g., "I want to go home")

        # Check for modal verb error (no "to" after modal verbs like "should", "must", etc.)
        if any(modal in original_word for modal in modal_verbs_no_to) and "to" in original_word:
            return "VERB:MODAL_NO_TO_ERROR"  # Incorrect use of "to" after modal verbs like "should"

        # Check for modal verb error (missing "to" for verbs that require it, like "have to", "ought to")
        if any(modal_with_to.split()[0] in original_word for modal_with_to in modal_verbs_with_to) and "to" not in original_word and "to" in corrected_word:
            return "VERB:MODAL_MISSING_TO_ERROR"  # Missing "to" for modal verbs that require it (e.g., "ought to")

        # If none of the specific rules match, return a general verb form error
        return "VERB:FORM_OTHER"

    elif error_type == "PRON":
        if original_text in {"me", "him", "her"}:
            return "PRON:CASE_OBJ"  # Objective case error
        elif original_text in {"I", "he", "she"}:
            return "PRON:CASE_SUB"  # Subjective case error
        elif original_text.endswith("'s") and not corrected_text.endswith("'s"):
            return "PRON:POSS_EXTRA"  # Extra possessive
        elif not original_text.endswith("'s") and corrected_text.endswith("'s"):
            return "PRON:POSS_MISS"  # Missing possessive
        elif original_text in relative_pronouns and corrected_text == "which":
            return "PRON:REL_WHICH"  # Incorrect relative pronoun corrected to "which"
        elif original_text in relative_pronouns and corrected_text == "who":
            return "PRON:REL_WHO"  # Incorrect relative pronoun corrected to "who"
        elif original_text in relative_pronouns and corrected_text == "whom":
            return "PRON:REL_WHOM"  # Incorrect relative pronoun corrected to "whom"
        elif original_text in relative_pronouns and corrected_text == "whose":
            return "PRON:REL_WHOSE"  # Incorrect relative pronoun corrected to "whose"
        elif original_text in relative_pronouns and corrected_text == "that":
            return "PRON:REL_THAT"  # Incorrect relative pronoun corrected to "that"
        elif original_text in relative_pronouns and corrected_text == "where":
            return "PRON:REL_WHERE"  # Incorrect relative pronoun corrected to "where"
        elif original_text in relative_pronouns and corrected_text == "when":
            return "PRON:REL_WHEN"  # Incorrect relative pronoun corrected to "when"
        # Check if a possessive pronoun in the original is replaced with another in the corrected text
        if any(token in possessive_pronouns for token in original_tokens) and any(token in possessive_pronouns for token in corrected_tokens):
            # Ensure the original and corrected tokens are not the same
            if set(original_tokens).intersection(possessive_pronouns) != set(corrected_tokens).intersection(possessive_pronouns):
                return "DET:POSSESSIVE_PRONOUN_SUBSTITUTION"
        else:
            return "PRON:GEN"  # General pronoun error

    # Preposition errors
    if error_type == "PREP":

        original_tokens_lower = [str(token).lower() for token in original_tokens if isinstance(token, str)]
        corrected_tokens_lower = [str(token).lower() for token in corrected_tokens if isinstance(token, str)]
        original_word = original_text.strip(string.punctuation)
        corrected_word = corrected_text.strip(string.punctuation)
        doc_original = nlp(original_text)
        doc_corrected = nlp(corrected_text)

        # Check for coordinating conjunction errors
        if any(word in coordinating_conjunctions for word in original_tokens_lower):
            return "CONJ:COORD"  # Coordinating conjunction error

        # Check for subordinating conjunction errors
        elif any(word in subordinating_conjunctions for word in original_tokens_lower):
            return "CONJ:SUBORD"  # Subordinating conjunction error

        # Check for missing conjunctions in compound sentences
        elif "compound" in original_text.lower():
            return "CONJ:MISS_COMPOUND"  # Missing conjunction in compound sentence

        # Check for missing conjunctions in complex sentences
        elif "complex" in original_text.lower():
            return "CONJ:MISS_COMPLEX"  # Missing conjunction in complex sentence

        # Check if the original text is empty (indicating something might be missing)
        if original_text.strip() == "":
            # Check if a coordinating conjunction is missing
            if any(word in coordinating_conjunctions for word in original_tokens_lower):
                return "CONJ:MISS_COORD"  # Missing coordinating conjunction

            # Check if a subordinating conjunction is missing
            elif any(word in subordinating_conjunctions for word in original_tokens_lower):
                return "CONJ:MISS_SUBORD"  # Missing subordinating conjunction

            # Check if it's a compound sentence missing a conjunction
            elif "compound" in " ".join(original_tokens_lower):
                return "CONJ:MISS_COMPOUND"  # Missing conjunction in a compound sentence

            # If no conjunction error, return missing preposition error
            return "PREP:MISS"

        # Extra preposition detection (for determiners like "the")
        if any(tok.lower() == "the" for tok in original_tokens_lower):
            return "PREP:EXTRA"  # Extra preposition

        # Verb infinitive error (e.g., missing "to")
        if any(word in original_word for word in verbs_followed_by_infinitives) and "to" not in original_word and "to" in corrected_word:
            return "VERB:INFINITIVE_ERROR"  # Infinitive form required (e.g., "I want to go home")

        # Extra "to" error (when "to" should not be there)
        if "to" in original_word and "to" not in corrected_word:
            return "EXTRA:TO"  # Extra "to" (e.g., "I want to go home")

        # Default to incorrect preposition if none of the above apply
        return "PREP:IN"  # Incorrect preposition used

    # Handle adjective and adverb errors
    if error_type == "ADJ":

        original_word = original_text.strip(string.punctuation)
        corrected_word = corrected_text.strip(string.punctuation)
        doc_original = nlp(original_text)
        doc_corrected = nlp(corrected_text)

        # Get the lemmatized form (base form) of the adverbs
        original_lemma = " ".join([token.lemma_ for token in doc_original])
        corrected_lemma = " ".join([token.lemma_ for token in doc_corrected])

        # Check for comparative adverb error
        if corrected_text.endswith("er") and original_lemma != corrected_lemma:
            return "ADV:COMP"

        # Check for superlative adverb error
        if corrected_text.endswith("est") and original_lemma != corrected_lemma:
            return "ADV:SUP"

        # Check for comparative adjective error (e.g., "more smart" -> "smarter")
        if corrected_word.endswith("er"):
            return "ADJ:COMP"  # Comparative adjective error

        # Check for superlative adjective error (e.g., "most tall" -> "tallest")
        if corrected_word.endswith("est"):
            return "ADJ:SUP"  # Superlative adjective error

        elif corrected_text.lower() == "" and original_text.lower() == "more":
            return "ADJ:COMP"  

        elif corrected_text.lower() == "more" and original_text.lower() == "more":
            return "ADJ:COMP"  

        elif corrected_text.lower() == "" and original_text.lower() == "most":
            return "ADJ:SUP" 

        elif corrected_text.lower() == "most" and original_text.lower() == "most":
            return "ADJ:SUP" 

        # Check if the original word is an adjective and corrected word is an adverb
        if any(token.pos_ == "ADJ" for token in doc_original) and any(token.pos_ == "ADV" for token in doc_corrected):
            return "ADV:FORM_ERR"  # Adjective used where adverb is required

        # General adjective form error
        else:
            return "ADJ:FORM"

    elif error_type == "ADV":

        original_word = original_text.strip(string.punctuation)
        corrected_word = corrected_text.strip(string.punctuation)
        doc_original = nlp(original_text)
        doc_corrected = nlp(corrected_text)

        # Get the lemmatized form (base form) of the adverbs
        original_lemma = " ".join([token.lemma_ for token in doc_original])
        corrected_lemma = " ".join([token.lemma_ for token in doc_corrected])

        original_tokens = original_text.lower().split()
        original_adverbs = [token.text.lower() for token in doc_original if token.pos_ == 'ADV']
        corrected_adverbs = [token.text.lower() for token in doc_corrected if token.pos_ == 'ADV']

        # Compare to find missing adverbs in the original text
        missing_adverbs = [adv for adv in corrected_adverbs if adv not in original_adverbs]

        # Check for coordinating conjunction errors
        if any(word in coordinating_conjunctions for word in original_tokens):
            return "CONJ:COORD"  # Coordinating conjunction error

        # Check for subordinating conjunction errors
        elif any(word in subordinating_conjunctions for word in original_tokens):
            return "CONJ:SUBORD"  # Subordinating conjunction error

        # Check for missing conjunctions in compound sentences
        elif "compound" in original_text.lower():
            return "CONJ:MISS_COMPOUND"  # Missing conjunction in compound sentence

        # Check for missing conjunctions in complex sentences
        elif "complex" in original_text.lower():
            return "CONJ:MISS_COMPLEX"  # Missing conjunction in complex sentence

        # Check for comparative adverb error
        if corrected_text.endswith("er") and original_lemma != corrected_lemma:
            return "ADV:COMP"

        # Check for superlative adverb error
        if corrected_text.endswith("est") and original_lemma != corrected_lemma:
            return "ADV:SUP"

        # Check for comparative adverb error (e.g., "more quickly" -> "quicker")
        if corrected_word.endswith("er"):
            return "ADV:COMP"  # Comparative adverb error

        # Check for superlative adverb error (e.g., "most quickly" -> "quickest")
        if corrected_word.endswith("est"):
            return "ADV:SUP"  # Superlative adverb error

        elif corrected_text.lower() == "" and original_text.lower() == "more":
            return "ADV:COMP" 

        elif corrected_text.lower() == "most" and original_text.lower() == "more":
            return "ADV:COMP" 

        elif corrected_text.lower() == "" and original_text.lower() == "most":
            return "ADV:SUP" 

        elif corrected_text.lower() == "more" and original_text.lower() == "most":
            return "ADV:SUP" 

        # Check if the original word is an adjective and corrected word is an adverb
        elif any(token.pos_ == "ADJ" for token in doc_original) and any(token.pos_ == "ADV" for token in doc_corrected):
            return "ADV:FORM_ERR"  # Adjective used where adverb is required

        elif missing_adverbs:
            return "ADV:MISS"

        # General adverb form error
        else:
            return "ADV:FORM"

    # Conjunction errors
    elif error_type == "CONJ":

        original_tokens = original_text.lower().split()

        # Check for coordinating conjunction errors
        if any(word in coordinating_conjunctions for word in original_tokens):
            return "CONJ:COORD"  # Coordinating conjunction error

        # Check for subordinating conjunction errors
        elif any(word in subordinating_conjunctions for word in original_tokens):
            return "CONJ:SUBORD"  # Subordinating conjunction error

        # Check for missing conjunctions in compound sentences
        elif "compound" in original_text.lower():
            return "CONJ:MISS_COMPOUND"  # Missing conjunction in compound sentence

        # Check for missing conjunctions in complex sentences
        elif "complex" in original_text.lower():
            return "CONJ:MISS_COMPLEX"  # Missing conjunction in complex sentence

        else:
            return "CONJ:GEN"  # General conjunction error

    # Punctuation errors
    elif error_type == "PUNCT":
        if "," in original_text and "." in corrected_text:
            return "PUNCT:COMMA_SPLICE"  # Comma splice error
        elif ";" in original_text and "," in corrected_text:
            return "PUNCT:SEMICOLON"  # Semicolon misuse
        elif original_text.endswith("."):
            return "PUNCT:PERIOD"  # Missing period
        else:
            return "PUNCT:GEN"  # General punctuation error

    # Orthography errors
    elif error_type == "ORTH":
        # Capitalization error: first letter only
        if original_text.istitle() and corrected_text.islower():
            return "ORTH:CAP_FIRST"  # Only first letter needs capitalization

        # Uppercase to lowercase in the entire word
        elif original_text.isupper() and corrected_text.islower():
            return "ORTH:CAP"  # Uppercase to lowercase

        # Lowercase to title case (first letter of each word should be capitalized)
        elif original_text.lower() == corrected_text.lower() and corrected_text.istitle():
            return "ORTH:CAP_WORDS"  # Correct capitalization for each word

        # Missing space between words
        elif re.search(r"[a-z][A-Z]", original_text):
            return "ORTH:SPACE"  # Missing space between words

        else:
            return "ORTH:GEN"  # General orthography error

    # Syntax errors
    elif error_type == "SPELL":
        if "-" not in original_text and "-" in corrected_text:
            # New check to see if corrected text adds a hyphen to the original
            original_no_hyphen = re.sub(r"-", "", corrected_text).lower()
            if original_no_hyphen == original_text.lower():
                return "ORTH:HYP"  # Missing hyphen in compound word
        else:
            return "SPELL"

    if error_type == "MORPH":
        # Strip punctuation for a cleaner comparison
        original_word = original_text.strip(string.punctuation)
        corrected_word = corrected_text.strip(string.punctuation)

        # Adverbial form error (when an adjective is incorrectly used as an adverb)
        if original_word.endswith("ful") and corrected_word.endswith("fully"):
            return "MORPH:ADJ_TO_ADV"  # E.g., "careful" -> "carefully"
        elif original_word.endswith("ly") and not corrected_word.endswith("ly"):
            return "MORPH:ADV_TO_ADJ"  # E.g., "quickly" -> "quick"

        # Comparative and superlative morphological errors
        elif original_word.startswith("more ") or original_word.startswith("most "):
            if not corrected_word.startswith("more ") and not corrected_word.startswith("most "):
                return "MORPH:COMP_SUPER"  # Incorrect use of comparative/superlative, e.g., "more quicker" -> "quicker"

        # Spelling-derived morphology error (e.g., "advise" vs. "advice")
        elif original_word == "advise" and corrected_word == "advice":
            return "MORPH:SPELL_NOUN"  # Spell-based noun error

        # General adjective-to-adverb error
        elif original_word.endswith("ly") != corrected_word.endswith("ly"):
            return "MORPH:ADJ_ADV_FORM"  # Catch-all for adjective/adverb form issues

        if corrected_word.endswith("'s") and not original_word.endswith("'s"):
            return "NOUN:POS_MISS"
        elif original_word.endswith("'s") and not corrected_word.endswith("'s"):
            return "NOUN:POS_EXTRA"

        # Check for plural/singular errors (NOUN:NUM)
        elif original_word.endswith("s") and not corrected_word.endswith("s"):
            return "NOUN:SG"  # Should be singular
        elif not original_word.endswith("s") and corrected_word.endswith("s"):
            return "NOUN:PL"  # Should be plural

        # Check for countable/uncountable noun errors (NOUN:COUNT)
        elif original_word in non_count_nouns_list and not corrected_word in non_count_nouns_list:
            return "NOUN:COUNT"  # Incorrect use of countable noun

        elif original_word.endswith("s") and corrected_word in non_count_nouns_list:
            return "NOUN:NUM_UNCOUNT"  # Plural form of an uncountable noun

        # Check for possessive noun errors (NOUN:POS)
        elif corrected_word.endswith("'s") and not original_word.endswith("'s"):
            return "NOUN:POS_MISS"  # Missing possessive
        elif original_word.endswith("'s") and not corrected_word.endswith("'s"):
            return "NOUN:POS_EXTRA"  # Extra possessive

        # General morphology error (fallback)
        return "MORPH:GEN"  # Generic morphology error

    if error_type == "OTHER":

        original_word = original_text.strip(string.punctuation)
        corrected_word = corrected_text.strip(string.punctuation)
        doc_original = nlp(original_text)
        doc_corrected = nlp(corrected_text)

        original_tokens_lower = [str(token).lower() for token in original_tokens]
        corrected_tokens_lower = [str(token).lower() for token in corrected_tokens]
        
        # Process each token to check for possessive errors
        for original_word, corrected_word in zip(original_tokens, corrected_tokens):
            # **Corrected Lines Below:**
            # Replace `original_word.endswith` with `original_word.text.endswith`
            # and `corrected_word.endswith` with `corrected_word.text.endswith`

            if corrected_word.text.endswith("'s") and not original_word.text.endswith("'s"):
                return "NOUN:POS_MISS"  # Missing possessive apostrophe
            elif original_word.text.endswith("'s") and not corrected_word.text.endswith("'s"):
                return "NOUN:POS_EXTRA"  # Extra possessive apostrophe

            # Check for plural/singular errors
            elif original_word.text.endswith("s") and not corrected_word.text.endswith("s"):
                return "NOUN:SG"  # Should be singular
            elif not original_word.text.endswith("s") and corrected_word.text.endswith("s"):
                return "NOUN:PL"  # Should be plural

            # Check for hyphenation issues specifically for compound adjectives
            if "-" in corrected_word.text and "-" not in original_word.text:
                return "ORTH:HYP"  # Case where hyphen is added correctly in the corrected word

            elif "-" not in corrected_word.text and "-" in original_word.text:
                return "ORTH:HYP"  # Case where hyphen was missing in the original word

            # Check for other morphological errors
            if any(token.pos_ == "ADJ" for token in doc_original) and any(token.pos_ == "ADV" for token in doc_corrected):
                return "ADV:FORM_ERR"  # Adjective used where adverb is required

            if any(token.pos_ == "ADV" for token in doc_original) and any(token.pos_ == "ADJ" for token in doc_corrected):
                return "ADJ:FORM_ERR"  # Adverb used where adjective is required

            # Check for possessive noun errors (NOUN:POS)
            if corrected_word.text.endswith("'s") and not original_word.text.endswith("'s"):
                return "NOUN:POS_MISS"  # Missing possessive
            elif original_word.text.endswith("'s") and not corrected_word.text.endswith("'s"):
                return "NOUN:POS_EXTRA"  # Extra possessive

            # Check for plural/singular errors, but only after possessive errors
            elif original_word.text.endswith("s") and not corrected_word.text.endswith("s"):
                return "NOUN:SG"  # Should be singular
            elif not original_word.text.endswith("s") and corrected_word.text.endswith("s"):
                return "NOUN:PL"  # Should be plural

            # Check for countable/uncountable noun errors (NOUN:COUNT)
            elif original_word.text in non_count_nouns_list and not corrected_word.text in non_count_nouns_list:
                return "NOUN:COUNT"  # Incorrect use of countable noun

            # For possessive apostrophe errors specifically with words like "mother"
            elif original_word.text == "mother" and corrected_word.text == "mother's":
                return "NOUN:POS_MISS"  # Missing possessive apostrophe

            # Handle hyphenation specifically for compound adjectives
            if "-" in corrected_text and "-" not in original_text:
                original_no_hyphen = re.sub(r"-", "", corrected_text).lower()
                if original_no_hyphen == original_text.lower():
                    return "ORTH:HYP"  # Missing hyphen in compound word

            # Handle punctuation issues
            if ',' in original_text and ',' not in corrected_text:
                return "PUNCT:EXTRA_COMMA"
            elif ',' in corrected_text and ',' not in original_text:
                return "PUNCT:MISSING_COMMA"
            elif ':' in original_text and ':' not in corrected_text:
                return "PUNCT:EXTRA_COLON"
            elif ':' in corrected_text and ':' not in original_text:
                return "PUNCT:MISSING_COLON"
            elif ';' in original_text and ';' not in corrected_text:
                return "PUNCT:EXTRA_SEMICOLON"
            elif ';' in corrected_text and ';' not in original_text:
                return "PUNCT:MISSING_SEMICOLON"
            elif original_text.endswith('.') and not corrected_text.endswith('.'):
                return "PUNCT:EXTRA_PERIOD"
            elif corrected_text.endswith('.') and not original_text.endswith('.'):
                return "PUNCT:MISSING_PERIOD"

            # Check if a possessive pronoun in the original is replaced with another in the corrected text
            if any(token in possessive_pronouns for token in original_tokens) and any(token in possessive_pronouns for token in corrected_tokens):
                # Ensure the original and corrected tokens are not the same
                if set(original_tokens).intersection(possessive_pronouns) != set(corrected_tokens).intersection(possessive_pronouns):
                    return "DET:POSSESSIVE_PRONOUN_SUBSTITUTION"

            else:
                return "OTHER"
            
    return "OTHER"  # Default fallback


def classify_comma_error(corrected_sentence, original_tokens, corrected_tokens):
    """
    Classifies missing comma errors into SEQ, COMPOUND, and COMPLEX based on the presence of dependent and independent clauses.
    """
    doc = nlp(corrected_sentence)
    
    # Check for MISSING:COMMA_COMPOUND - multiple independent clauses joined by a coordinating conjunction
    independent_clauses = [sent for sent in doc.sents if any(tok.dep_ == 'ROOT' for tok in sent)]
    if len(independent_clauses) > 1:
        for token in doc:
            # Look for a coordinating conjunction (cc) and check if the previous clause has no comma
            if token.dep_ == 'cc' and not any("," in tok.text for tok in doc[:token.i]):
                return "MISSING:COMMA_COMPOUND"  # Missing comma before conjunction in compound sentence


    # Check for MISSING:COMMA_COMPLEX - dependent clause followed by an independent clause
    dependent_clause = any(token.dep_ == 'mark' for token in doc)  # Subordinating conjunction
    independent_clause = any(token.dep_ == 'ROOT' for token in doc)
    if dependent_clause and independent_clause:
        for token in doc:
            if token.dep_ in {'advcl', 'csubj'} and not any("," in tok.text for tok in doc[:token.i]):
                return "MISSING:COMMA_COMPLEX"  # Missing comma before dependent clause in complex sentence
            
    # Check for MISSING:COMMA_SEQ - sequence of items (nouns, adjectives) without proper commas
    sequence_items = [token for token in doc if token.dep_ in {'amod', 'attr', 'npadvmod', 'conj', 'appos'}]
    conjunctions = [token for token in doc if token.dep_ == 'cc']
    # Detect a list structure but missing commas
    if len(sequence_items) > 1 and conjunctions and not any("," in token.text for token in sequence_items):
        return "MISSING:COMMA_SEQ"

    # If no specific type found, return general missing comma error
    return "MISSING:COMMA"


def classify_error(edit, original_sentence, corrected_sentence):
    # Extract error information from the ERRANT edit object
    error_type = edit.type[2:]  # Remove the operation code ('R:', 'M:', 'U:')
    orig_str = edit.o_str
    corr_str = edit.c_str
    orig_start = edit.o_start
    orig_end = edit.o_end
    corr_start = edit.c_start
    corr_end = edit.c_end

    original_tokens = nlp(orig_str)
    corrected_tokens = nlp(corr_str)

    sentence_tense = determine_tense(corrected_sentence)

    if error_type in ["VERB:TENSE", "VERB:SVA", "VERB:FORM"]:
        new_error_code = f"{error_type}_{sentence_tense}"
    else:
        new_error_code = map_error_code(error_type, original_sentence, original_tokens, corrected_tokens)

    return new_error_code


def get_detailed_edits(original_sentence, corrected_sentence):
    # Process the sentences with spaCy
    orig_doc = nlp(original_sentence)
    cor_doc = nlp(corrected_sentence)

    # Use ERRANT to get the edits
    edits = annotator.annotate(orig_doc, cor_doc)

    error_types = []
    for edit in edits:
        error_type = classify_error(edit, original_sentence, corrected_sentence)
        if error_type:
            orig_str = edit.o_str
            corr_str = edit.c_str
            error_types.append((error_type, orig_str, corr_str))
    return error_types



def sentence_length_analysis(doc):
    sentence_lengths = [len(sent.text.split()) for sent in doc.sents]
    short_sentences = sum(1 for length in sentence_lengths if length < 7)
    medium_sentences = sum(1 for length in sentence_lengths if 7 <= length <= 12)
    long_sentences = sum(1 for length in sentence_lengths if length > 12)
    return short_sentences, medium_sentences, long_sentences

def detect_clauses_spacy(doc):
    independent_clauses = 0
    dependent_clauses = 0
    for sent in doc.sents:
        for token in sent:
            if token.dep_ == 'ROOT':
                independent_clauses += 1
            elif token.dep_ in ['advcl', 'ccomp', 'xcomp', 'relcl']:
                dependent_clauses += 1
    return independent_clauses, dependent_clauses

def detect_noun_phrases(doc):
    noun_phrases = list(doc.noun_chunks)
    complex_phrases = sum(1 for np in noun_phrases if len(np.text.split()) > 3)  # More than 3 words
    return len(noun_phrases), complex_phrases

def generate_star_rating(score):
    """Generate star ratings based on score (out of 5)"""
    return "".join(["★" if i < score else "☆" for i in range(5)])

def analyze_complexity(text):
    doc = nlp(text)

    # Sentence analysis
    short_sentences, medium_sentences, long_sentences = sentence_length_analysis(doc)

    # Clause detection (independent and dependent)
    independent_clauses, dependent_clauses = detect_clauses_spacy(doc)
    total_clauses = independent_clauses + dependent_clauses

    # Noun phrase complexity
    total_noun_phrases, complex_noun_phrases = detect_noun_phrases(doc)

    # Scoring based on adjusted rubric:
    if long_sentences >= 2 and total_clauses >= 5 and complex_noun_phrases >= 3:
        complexity_score = 5
        complexity_feedback = "Your text shows excellent complexity with long sentences, varied clauses, and complex noun phrases."
    elif (long_sentences + medium_sentences) >= 3 and total_clauses >= 3 and complex_noun_phrases >= 2:
        complexity_score = 4
        complexity_feedback = "Your text has a good variety of sentence structures, including some complex clauses."
    elif medium_sentences >= 2 and total_clauses >= 2:
        complexity_score = 3
        complexity_feedback = "Your text has a moderate level of complexity with medium-length sentences and some clause variety."
    elif short_sentences >= 2 and total_clauses >= 1:
        complexity_score = 2
        complexity_feedback = "Your text is relatively simple, with mostly short sentences and simple clauses."
    else:
        complexity_score = 1
        complexity_feedback = "Your text has very short sentences with little to no variety, and noun phrases are very basic."

    # Complexity details as a dictionary
    complexity_details = {
        'num_sentences': len(list(doc.sents)),
        'short_sentences': short_sentences,
        'medium_sentences': medium_sentences,
        'long_sentences': long_sentences,
        'independent_clauses': independent_clauses,
        'dependent_clauses': dependent_clauses,
        'total_noun_phrases': total_noun_phrases,
        'complex_noun_phrases': complex_noun_phrases
    }
    return complexity_score, complexity_feedback, complexity_details

def analyze_fluency(text):
    doc = nlp(text)
    sentences = list(doc.sents)
    num_sentences = len(sentences)
    num_words = len([token for token in doc if not token.is_punct and not token.is_space])

    # Calculate sentence score
    if num_sentences >= 9:
        sentence_score = 5
    elif num_sentences >= 7:
        sentence_score = 4
    elif num_sentences >= 5:
        sentence_score = 3
    elif num_sentences >= 2:
        sentence_score = 2
    else:
        sentence_score = 1

    # Calculate word count score
    if num_words >= 100:
        word_score = 5
    elif num_words >= 61:
        word_score = 4
    elif num_words >= 31:
        word_score = 3
    elif num_words >= 15:
        word_score = 2
    else:
        word_score = 1

    # Combine scores
    fluency_score = min(sentence_score, word_score)

    # Fluency feedback
    feedback_options = {
        5: "Your writing is very fluent with a substantial length and number of sentences.",
        4: "Your writing is fluent with a good length and sentence count.",
        3: "Your writing has moderate fluency with an average length.",
        2: "Your writing is short with limited fluency.",
        1: "Your writing is very short and lacks fluency."
    }
    fluency_feedback = feedback_options[fluency_score]

    # Fluency details as a dictionary
    fluency_details = {
        'num_sentences': num_sentences,
        'num_words': num_words
    }

    return fluency_score, fluency_feedback, fluency_details

def analyze_accuracy(all_edits):
    """Analyze accuracy and return score, feedback, details, detailed_errors (tuples), and corrected text."""

    error_count = 0
    error_type_counts = {}

    # Process each edit from all_edits
    for edit in all_edits:
        error_type, original_string, corrected_string = edit
        # Get error details for each edit
        error_type_counts[error_type] = error_type_counts.get(error_type, 0) + 1
        error_count += 1

    # Scoring logic
    if error_count == 0:
        accuracy_score = 5
        accuracy_feedback = "Your writing demonstrates mastery with minimal or no grammatical errors."
    elif error_count <= 3:
        accuracy_score = 4
        accuracy_feedback = "Your writing shows competence with minor grammar, punctuation, or spelling errors."
    elif error_count <= 6:
        accuracy_score = 3
        accuracy_feedback = "Your writing has several grammatical issues that need attention."
    elif error_count <= 10:
        accuracy_score = 2
        accuracy_feedback = "Your writing contains numerous grammatical issues affecting readability."
    else:
        accuracy_score = 1
        accuracy_feedback = "Your writing contains a significant number of grammatical problems."

    error_details = "\n".join([f"{etype}: {count}" for etype, count in error_type_counts.items()])

    return accuracy_score, accuracy_feedback, error_details


def convert_tuple_errors_to_dicts(detailed_errors):
    """
    Convert the tuple-based detailed_errors into a list of dictionaries
    so they can be displayed by 'Detected Errors' code expecting .get(...) calls.
    Now uses error_code.json to fetch the full error name, explanation, and css_structure.
    """
    # Load the error_code.json once here (adjust the path if needed).
    error_json_path = os.path.join(os.getcwd(), "data/error_code.json")
    with open(error_json_path, "r", encoding="utf-8") as f:
        error_data = json.load(f)

    # Build a lookup: e.g. {"VERB:INFL": {"full_error_name": "Verb Inflection Error", "explanation": "...", "css_structure": "..."}, ...}
    error_map = {}
    for item in error_data:
        code = item["error_code"]
        full_name = item["full_error_name"]
        expl = item["explanation"]
        css_struct = item.get("css_structure", "No additional information available.")
        error_map[code] = {
            "full_error_name": full_name,
            "explanation": expl,
            "css_structure": css_struct
        }

    dict_list = []
    for idx, (error_type, orig_str, corr_str) in enumerate(detailed_errors):
        if error_type in error_map:
            error_info = error_map[error_type]
            full_error_name = error_info["full_error_name"]
            explanation = error_info["explanation"]
            css_structure = error_info["css_structure"]
        else:
            # Fallback if not in JSON
            full_error_name = error_type
            explanation = "No explanation found for this code."
            css_structure = "No additional information available."

        dict_list.append({
            "id": idx,
            "full_error_name": full_error_name,
            "explanation": explanation,
            "css_structure": css_structure,
            "error_details": {
                "error_type": error_type,
                "orig_str": orig_str,
                "corr_str": corr_str
            }
        })
    return dict_list


def apply_highlight(text, detailed_errors):
    """
    Apply red dashed borders to errors.
    Each error on hover shows a tooltip with the FULL ERROR NAME from `error_code.json`.
    
    `detailed_errors`: list of tuples (error_type, orig_str, corr_str).
    """


    # 1) Load error_code.json once here
    error_json_path = os.path.join(os.getcwd(), "data/error_code.json")
    with open(error_json_path, "r", encoding="utf-8") as f:
        error_data = json.load(f)

    # 2) Build a map from "error_code" -> "full_error_name"
    error_map = {}
    for item in error_data:
        code = item["error_code"]
        full_name = item["full_error_name"]
        error_map[code] = full_name

    highlighted_text = text
    errors_applied = set()

    for error_type, orig_str, _ in detailed_errors:
        if orig_str in errors_applied:
            continue

        # Lookup full error name, fallback to the code if missing
        full_name = error_map.get(error_type, error_type)

        pattern = rf"\b{re.escape(orig_str)}\b"
        replacement = (
            f"<span class='error' style='border: 2px dashed red; padding: 2px; position: relative;'>"
            f"{orig_str}"
            f"<span class='tooltiptext'>{full_name}</span>"
            f"</span>"
        )

        highlighted_text, count = re.subn(pattern, replacement, highlighted_text, count=1)
        if count > 0:
            errors_applied.add(orig_str)

    return highlighted_text


def analyze_user_input(user_input: str, grammar):
    """
    Splits user input into sentences, calls grammar.correct() on each,
    collects edits and a highlighted version of the text, and builds a dictionary
    mapping error codes to the corresponding corrected sentence.

    Returns:
        final_highlighted (str): The HTML-highlighted text.
        all_edits (list of tuples): The list of edits for all sentences.
        final_corrected_text (str): The entire corrected text as a single string.
        type_and_sent (dict): A dictionary where the key is the error code and the value is the corrected sentence.
    """
    # Split the input text into sentences
    splitted_sentences = re.split(r'(?<=[.!?])\s+', user_input.strip())
    all_edits = []
    sentences = []
    type_and_sent = {}
    final_highlighted = ""

    for sent in splitted_sentences:
        if sent.strip():
            # Correct the sentence
            corrected_sent = grammar.correct(sent)
            # Get detailed edits (assumed to be a list of tuples like (error_code, original, corrected))
            sentence_edits = get_detailed_edits(sent, corrected_sent)
            all_edits.extend(sentence_edits)
            sentences.append(corrected_sent)
            
            # If there is at least one edit, update the dictionary mapping error code to sentence.
            if sentence_edits:
                error_code = sentence_edits[0][0]  # Use the error code from the first edit
                # If the error code already exists, append the new sentence to the existing value.
                if error_code in type_and_sent:
                    type_and_sent[error_code] += " " + corrected_sent
                else:
                    type_and_sent[error_code] = corrected_sent

            # Apply highlighting to the original sentence
            highlighted = apply_highlight(sent, sentence_edits)
            final_highlighted += highlighted + " "

    # Combine all corrected sentences into a single text
    final_text = " ".join(sentences).strip()

    return final_highlighted.strip(), all_edits, final_text, type_and_sent




def task_1_page():
    st.title("Task Page")
    add_css()

    # --- 1) Initialize session state variables ---
    if 'task_selection' not in st.session_state:
        st.session_state['task_selection'] = list(tasks_dict.keys())[0]
    if 'limited_task_selection' not in st.session_state:
        # Initialize with the first task from the mapped subset
        initial_limited_tasks = TASK_MAPPING_TASK.get(st.session_state['task_selection'], [st.session_state['task_selection']])
        st.session_state['limited_task_selection'] = initial_limited_tasks[0] if initial_limited_tasks else None
    if 'show_example' not in st.session_state:
        st.session_state['show_example'] = False
    if 'show_rule' not in st.session_state:
        st.session_state['show_rule'] = False
    if 'analysis_done' not in st.session_state:
        st.session_state['analysis_done'] = False
    if 'task_completed' not in st.session_state:
        st.session_state['task_completed'] = False

    # Use time.time() so that 'start_time' is stored as a float everywhere
    if 'start_time' not in st.session_state:
        st.session_state['start_time'] = time.time()

    # Track the maximum number of errors encountered across checks
    if 'max_errors' not in st.session_state:
        st.session_state['max_errors'] = 0

     # --- 1) Initialize session state variables ---
    if 'task_selection' not in st.session_state:
        st.session_state['task_selection'] = list(tasks_dict.keys())[0]

    if 'limited_task_selection' not in st.session_state:
        # Initialize limited task selection based on the primary selection
        initial_limited_tasks = TASK_MAPPING_TASK.get(st.session_state['task_selection'], [st.session_state['task_selection']])
        st.session_state['limited_task_selection'] = initial_limited_tasks[0] if initial_limited_tasks else None

    # --- 2) Set Primary Task Selection in the Background (Hidden) ---
    primary_selection = st.session_state['task_selection']

    # --- 3) Get available tasks based on primary selection ---
    limited_tasks = TASK_MAPPING_TASK.get(primary_selection, [primary_selection])

    # --- 4) Display the Limited Task Selection (ONLY ONE DROPDOWN VISIBLE) ---
    limited_selection = st.selectbox(
        "Available Tasks",
        options=limited_tasks,
        index=limited_tasks.index(st.session_state['limited_task_selection']) if st.session_state['limited_task_selection'] in limited_tasks else 0,
        key='limited_task_selection_box',  # Unique key
        format_func=lambda x: TASK_TITLE_MAPPING.get(x, x)  # Display task names properly
    )

    # --- 5) Update session state if selection changes ---
    if limited_selection != st.session_state['limited_task_selection']:
        st.session_state['limited_task_selection'] = limited_selection
        st.session_state['show_example'] = False
        st.session_state['show_rule'] = False
        st.session_state['analysis_done'] = False
        st.session_state['task_completed'] = False
        st.session_state['start_time'] = time.time()  # Reset timer
        st.session_state['max_errors'] = 0  # Reset error count

    # --- 6) Retrieve Selected Task Details ---
    selected_task = tasks_dict.get(st.session_state['limited_task_selection'], {})
    task_key = st.session_state.get('limited_task_selection')

    if not task_key or task_key not in tasks_dict:
        selected_task = {"task": "⚠️ No task assigned or found!", "example": "No example available."}
    else:
        selected_task = tasks_dict[task_key]

    # 3) Display instructions
    col1, col2 = st.columns([4, 1])
    with col1:
        st.markdown(f'''
        <div style="background-color: #e3f2fd; padding: 10px; border-radius: 10px;
                    border: 1px solid #64b5f6; margin-bottom: 15px;">
            <h4 style="font-weight: 600; font-size: 16px;">📝 Task Instructions:</h4>
            <p style="font-size: 16px; margin: 0;"><strong>{selected_task["task"]}</strong></p>
        </div>
        ''', unsafe_allow_html=True)
    with col2:
        if st.button("📖 See Example", key='see_example'):
            st.session_state['show_example'] = not st.session_state['show_example']
        if st.button("📒 Rule", key='see_rule'):
            st.session_state['show_rule'] = not st.session_state['show_rule']

    if st.session_state['show_example']:
        example_text = selected_task.get("example", "No example provided.")
        if example_text.lower() == "none":
            st.warning("No example available for this task.")
        else:
            st.markdown(f"""
            <div class="example-frame">
                <h4 style="font-weight: 600;">Example:</h4>
                <p>{example_text}</p>
            </div>
            """, unsafe_allow_html=True)

    if st.session_state['show_rule']:
        rule_id = TASK_RULE_MAPPING.get(st.session_state['task_selection'])
        if rule_id:
            rule_content = get_rule_content(rule_id)
            if rule_content:
                st.markdown(rule_content, unsafe_allow_html=True)
            else:
                st.warning("⚠️ No rule available for this task.")
        else:
            st.warning("⚠️ No rule mapping found for this task.")

    # 4) Two columns for user input and highlight
    input_col, highlight_col = st.columns([1, 1])
    with input_col:
        user_input = st.text_area(
            "",
            height=200,
            placeholder="Start typing here...",
            key='user_input',
            label_visibility="collapsed"
        )
        symbols_count = len(user_input)

        # Use float-based timing
        now = time.time()
        time_diff = now - st.session_state['start_time']
        total_seconds = int(time_diff)
        minutes = total_seconds // 60
        seconds = total_seconds % 60
        time_spent_str = f"{minutes}m {seconds}s"

        metrics_col1, metrics_col2 = st.columns(2)
        with metrics_col1:
            st.markdown(f"""
            <p style="font-size: 14px; font-weight: bold;">🕒 Time Spent:</p>
            <p style="font-size: 14px;">{time_spent_str}</p>
            """, unsafe_allow_html=True)

        check_button_clicked = st.button("✅ Check", key='check_button')
        if check_button_clicked:
            if user_input.strip():
                try:
                    st.session_state['user_input_task1'] = user_input

                    final_highlighted, all_edits, corrected_text, type_and_sent = analyze_user_input(user_input, grammar)

                    # Save to cumulative error types in session state
                    if 'cumulative_errors' not in st.session_state:
                        st.session_state['cumulative_errors'] = []

                    for edit in all_edits:
                        st.session_state['cumulative_errors'].append({
                            "error_type": edit[0],
                            "original_string": edit[1],
                            "corrected_string": edit[2],
                        })

                    st.session_state['detailed_errors'] = all_edits

                    # Update analysis results
                    st.session_state['max_errors'] = max(st.session_state.get('max_errors', 0), len(all_edits))
                    st.session_state['highlighted_text'] = final_highlighted.strip()
                    
                    accuracy_score, accuracy_feedback, accuracy_details = analyze_accuracy(all_edits)
                    complexity_score, complexity_feedback, complexity_details = analyze_complexity(user_input)
                    fluency_score, fluency_feedback, fluency_details = analyze_fluency(user_input)

                    # If no edits, user is done
                    st.session_state['task_completed'] = (len(all_edits) == 0)

                    # Keep track of the largest number of errors
                    found_errors = len(all_edits)
                    st.session_state['max_errors'] = max(st.session_state['max_errors'], found_errors)

                    # Save details
                    errors_for_display = convert_tuple_errors_to_dicts(all_edits)
                    st.session_state['analysis_done'] = True
                    st.session_state['highlighted_text'] = final_highlighted.strip()
                    st.session_state['corrected_text'] = corrected_text
                    st.session_state['type_and_sent'] = type_and_sent
                    st.session_state['detailed_errors'] = all_edits
                    st.session_state['error_list'] = errors_for_display

                    st.session_state['accuracy_score'] = accuracy_score
                    st.session_state['accuracy_feedback'] = accuracy_feedback
                    st.session_state['accuracy_details'] = accuracy_details

                    st.session_state['complexity_score'] = complexity_score
                    st.session_state['complexity_feedback'] = complexity_feedback
                    st.session_state['complexity_details'] = complexity_details

                    st.session_state['fluency_score'] = fluency_score
                    st.session_state['fluency_feedback'] = fluency_feedback
                    st.session_state['fluency_details'] = fluency_details

                    st.session_state['user_input_task1'] = user_input

                except Exception as e:
                    st.error(f"An error occurred during analysis: {e}")
                    st.session_state['analysis_done'] = False
            else:
                st.error("Please enter some text to check.")

    with highlight_col:
        if st.session_state.get('analysis_done') and 'highlighted_text' in st.session_state:
            st.markdown(
                f"<div id='highlighted_text'>{st.session_state['highlighted_text']}</div>",
                unsafe_allow_html=True
            )

    # --- 5) If analysis done, show feedback columns ---
    if st.session_state.get('analysis_done'):
        feedback_col, errors_col = st.columns([1, 1])
        with feedback_col:
            st.subheader("📝 General Feedback")
            with st.expander("Expand to see more"):
                # Accuracy
                accuracy_points = st.session_state['accuracy_details'].split('\n')
                accuracy_list_items = ''.join(f"<li>{pt}</li>" for pt in accuracy_points)

                complexity_details = st.session_state['complexity_details']
                complexity_list_items = ''.join([
                    f"<li>Number of sentences: {complexity_details['num_sentences']}</li>",
                    f"<li>Short sentences: {complexity_details['short_sentences']}</li>",
                    f"<li>Medium sentences: {complexity_details['medium_sentences']}</li>",
                    f"<li>Long sentences: {complexity_details['long_sentences']}</li>",
                    f"<li>Independent clauses: {complexity_details['independent_clauses']}</li>",
                    f"<li>Dependent clauses: {complexity_details['dependent_clauses']}</li>",
                    f"<li>Total noun phrases: {complexity_details['total_noun_phrases']}</li>",
                    f"<li>Complex noun phrases: {complexity_details['complex_noun_phrases']}</li>",
                ])

                fluency_details = st.session_state['fluency_details']
                fluency_list_items = ''.join([
                    f"<li>Total sentences: {fluency_details['num_sentences']}</li>",
                    f"<li>Total word count: {fluency_details['num_words']}</li>",
                ])

                st.markdown(f"""
                <style>
                    .feedback-section {{
                        border: 2px dashed #4CAF50;
                        padding: 10px;
                        border-radius: 8px;
                        margin-bottom: 10px;
                    }}
                    .complexity-section {{
                        border-color: #2196F3;
                    }}
                    .fluency-section {{
                        border-color: #FFC107;
                    }}
                </style>
                <div class="feedback-section">
                    <h3 style="font-size: 18px; margin-bottom: 10px; font-weight: 600;">Accuracy</h3>
                    {generate_star_rating(st.session_state['accuracy_score'])}
                    <p style="font-size: 16px; margin-top: 5px;">{st.session_state['accuracy_feedback']}</p>
                    <details style="margin-top: 10px;">
                        <summary style="font-size: 14px; cursor: pointer; font-weight: 500;">More details</summary>
                        <ul style="font-size: 12px; margin-left: 15px; margin-top: 5px;">
                            {accuracy_list_items}
                        </ul>
                    </details>
                </div>
                <div class="feedback-section complexity-section">
                    <h3 style="font-size: 18px; margin-bottom: 10px; font-weight: 600;">Complexity</h3>
                    {generate_star_rating(st.session_state['complexity_score'])}
                    <p style="font-size: 16px; margin-top: 5px;">{st.session_state['complexity_feedback']}</p>
                    <details style="margin-top: 10px;">
                        <summary style="font-size: 14px; cursor: pointer; font-weight: 500;">More details</summary>
                        <ul style="font-size: 12px; margin-left: 15px; margin-top: 5px;">
                            {complexity_list_items}
                        </ul>
                    </details>
                </div>
                <div class="feedback-section fluency-section">
                    <h3 style="font-size: 16px; margin-bottom: 10px; font-weight: 600;">Fluency</h3>
                    {generate_star_rating(st.session_state['fluency_score'])}
                    <p style="font-size: 14px; margin-top: 5px;">{st.session_state['fluency_feedback']}</p>
                    <details style="margin-top: 10px;">
                        <summary style="font-size: 14px; cursor: pointer; font-weight: 500;">More details</summary>
                        <ul style="font-size: 12px; margin-left: 15px; margin-top: 5px;">
                            {fluency_list_items}
                        </ul>
                    </details>
                </div>
                """, unsafe_allow_html=True)

                st.markdown(f"""
                <div style="border: 2px dashed #9C27B0; padding: 10px; border-radius: 8px; margin-top: 20px;">
                    <h3 style="font-size: 18px; font-weight: 600;">📚 How Can This Help Improve My Writing?</h3>
                    <ul style="font-size: 14px; color: #4A148C;">
                        <li><strong>Accuracy</strong>: Identifies grammatical errors to make your writing more precise.</li>
                        <li><strong>Complexity</strong>: Encourages varied sentence structures for sophisticated writing.</li>
                        <li><strong>Fluency</strong>: Enhances flow and readability, making your text easier to understand.</li>
                    </ul>
                </div>
                """, unsafe_allow_html=True)

        with errors_col:
            error_list = st.session_state.get('error_list', [])
            if error_list:
                st.subheader("🚨 Detected Errors")

                def go_to_learn_more(error_details):
                    st.session_state['selected_error'] = error_details
                    st.session_state.page = 'learn_more'

                for idx, error in enumerate(error_list):
                    error_id = error.get('id', idx)
                    full_error_name = error.get('full_error_name', 'Unknown error')
                    explanation = error.get('explanation', 'No explanation provided')
                    error_details = error.get('error_details', {})

                    st.markdown(f"""
                    <div style="border: 2px dashed red; padding: 10px; border-radius: 5px; margin-bottom: 10px;">
                        <p style="margin: 0;"><strong>Error {error_id + 1}:</strong> {full_error_name}</p>
                        <p style="margin: 0;"><em><strong>{explanation}</strong></em></p>
                        <div style="margin-top: 10px;">
                    """, unsafe_allow_html=True)

                    underlying_type = error_details.get('error_type', '')
                    if underlying_type == "OTHER":
                        full_corrected_sentence = st.session_state.get('corrected_text', '')
                        type_and_sent = st.session_state.get('type_and_sent', {})
                        full_corrected_sentence = type_and_sent.get(underlying_type, "Sentence not found")
                        if full_corrected_sentence:
                            st.info(f"✅ The correct sentence is: **{full_corrected_sentence}**")
                        else:
                            st.warning("No full corrected sentence available.")
                    else:
                        if st.button(
                            f"📖 Learn more about Error {error_id + 1}",
                            key=f"learn_more_{error_id}",
                            on_click=go_to_learn_more,
                            args=(error_details,),
                            help="Click to learn more about this error."
                        ):
                            pass
                    st.markdown("</div></div>", unsafe_allow_html=True)
            else:
                st.subheader("🎉 No Grammar Errors Found!")
                st.markdown("""
                <div style="border: 2px dashed green; padding: 10px; 
                            border-radius: 5px; margin-bottom: 10px; background-color: #e8f5e9;">
                    <p style="font-size: 16px; margin: 0;">Your writing looks good! No grammar errors were detected.</p>
                </div>
                """, unsafe_allow_html=True)

        # If the task is completed (no errors left), show "Practice" + "Next"
        current_task = st.session_state['task_selection']

        
        if st.session_state['task_completed']:
            st.markdown("---")
            col_practice, col_next = st.columns(2)
            with col_practice:
                if st.button("Practice", key=f'{current_task}_practice'):
                    navigate_to_practice()

            with col_next:
                if st.button("Next", key=f'{current_task}_next'):
                    # a) Compute the time spent (float-based)
                    end_time = time.time()
                    time_diff = end_time - st.session_state['start_time']
                    total_seconds = int(time_diff)
                    hh, remainder = divmod(total_seconds, 3600)
                    mm, ss = divmod(remainder, 60)

                    # Convert the total seconds to a time object if valid
                    try:
                        # Using datetime.time(...) from the datetime module
                        time_obj = datetime.time(hh, mm, ss)
                    except ValueError:
                        time_obj = None

                    # b) Store the maximum number of errors encountered
                    max_errs = st.session_state['max_errors']
                    errors_info = {"max_error_count": max_errs}

                    # c) Insert record to DB
                    try:
                        student_id = st.session_state.user_info.id
                        task_id = current_task

                        record_task_1_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=datetime.datetime.now(),  # store current date/time
                            time_spent=time_obj,
                            errors_dict=errors_info,
                            full_text=st.session_state.get('user_input_task1', "")
                        )
                    except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                    # d) Reset everything
                    st.session_state['start_time'] = time.time()  # Reset again as float
                    st.session_state['max_errors'] = 0
                    # e) Navigate
                    next_page = task_to_next_page.get(current_task, 'default_page')
                    navigate_to_page(next_page)

    # Additional CSS
    st.markdown("""
    <style>
    .error {
        border: 1px dashed red;
        padding: 2px;
        cursor: pointer;
        position: relative;
        display: inline-block;
    }
    .error .tooltiptext {
        visibility: hidden;
        width: 180px;
        background-color: #f9f9f9;
        color: #333;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -90px;
        box-shadow: 0px 0px 6px #aaa;
        transition: visibility 0.2s;
    }
    .error:hover .tooltiptext,
    .error .tooltiptext:hover {
        visibility: visible;
    }
    </style>
    """, unsafe_allow_html=True)


# Mapping from primary tasks to their limited subsets
TASK_MAPPING_TASK = {
    "L1_T1_TAS_1": ["L1_T1_TAS_1"],
    "L1_T2_TAS_1": ["L1_T2_TAS_1", "L1_T2_TAS_2"],
    "L1_T3_TAS_1": ["L1_T3_TAS_1", "L1_T3_TAS_2", "L1_T3_TAS_3"],
    "L1_T4_TAS_1": ["L1_T4_TAS_1", "L1_T4_TAS_2"],
    "L1_T5_TAS_1": ["L1_T5_TAS_1", "L1_T5_TAS_2","L1_T5_TAS_3"],
    "L1_T6_TAS_1": ["L1_T6_TAS_1", "L1_T6_TAS_2", "L1_T6_TAS_3"],
    "L1_T7_TAS_1": ["L1_T7_TAS_1", "L1_T7_TAS_2"],
    "L1_T8_TAS_1": ["L1_T8_TAS_1", "L1_T8_TAS_2", "L1_T8_TAS_3"],
    "L1_T9_TAS_1": ["L1_T9_TAS_1","L1_T9_TAS_2", "L1_T9_TAS_3"],
    "L1_T10_TAS_1": ["L1_T10_TAS_1"],

    "L2_T1_TAS_1": ["L2_T1_TAS_1"],
    "L2_T2_TAS_1": ["L2_T2_TAS_1", "L2_T2_TAS_2", "L2_T2_TAS_3"],
    "L2_T3_TAS_1": ["L2_T3_TAS_1", "L2_T3_TAS_2","L2_T3_TAS_3"],
    "L2_T4_TAS_1": ["L2_T4_TAS_1", "L2_T4_TAS_2", "L2_T4_TAS_3"],
    "L2_T5_TAS_1": ["L2_T5_TAS_1", "L2_T5_TAS_2","L2_T5_TAS_3"],
    "L2_T6_TAS_1": ["L2_T6_TAS_1", "L2_T6_TAS_2"],
    "L2_T7_TAS_1": ["L2_T7_TAS_1", "L2_T7_TAS_2","L2_T7_TAS_3"],
    "L2_T8_TAS_1": ["L2_T8_TAS_1", "L2_T8_TAS_2","L2_T8_TAS_3"],
    "L2_T9_TAS_1": ["L2_T9_TAS_1", "L2_T9_TAS_2"],
    "L2_T5_TAS_1": ["L2_T10_TAS_1"],

    "L3_T1_TAS_1": ["L3_T1_TAS_1"],
    "L3_T2_TAS_1": ["L3_T2_TAS_1", "L3_T2_TAS_2","L3_T2_TAS_3"],
    "L3_T3_TAS_1": ["L3_T3_TAS_1", "L3_T3_TAS_2","L3_T3_TAS_3"],
    "L3_T4_TAS_1": ["L3_T4_TAS_1", "L3_T4_TAS_2"],
    "L3_T5_TAS_1": ["L3_T5_TAS_1", "L3_T5_TAS_2","L3_T5_TAS_3"],
    "L3_T6_TAS_1": ["L3_T6_TAS_1", "L3_T6_TAS_2","L3_T6_TAS_3"],
    "L3_T7_TAS_1": ["L3_T7_TAS_1", "L3_T7_TAS_2","L3_T7_TAS_3"],
    "L3_T8_TAS_1": ["L3_T8_TAS_1", "L3_T8_TAS_2"],
    "L3_T9_TAS_1": ["L3_T9_TAS_1", "L3_T9_TAS_2"],
    "L3_T10_TAS_1": ["L3_T10_TAS_1"],

}

def record_task_1_done(student_id, task_id, date, time_spent, errors_dict=None, full_text=None):
    """
    Insert the finished task into the database, including full user input text.
    """
    try:
        errors_info = errors_dict or {}
        # Add cumulative errors from session state if needed
        errors_info['error_types'] = st.session_state.get('cumulative_errors', [])

        if 'max_errors' in st.session_state:
            errors_info['max_error_count'] = st.session_state['max_errors']

        complexity_details = st.session_state.get('complexity_details', {})
        fluency_details = st.session_state.get('fluency_details', {})

        # Create and insert the task record
        task_done_entry = TasksDone(
            student_id=student_id,
            task_id=task_id,
            date=date,
            time=time_spent,
            errors=errors_info,
            complexity=complexity_details,
            fluency=fluency_details,
            full_text={"text": full_text} if full_text else None  # Store full text as JSON
        )
        session.add(task_done_entry)
        session.commit()
        st.success(f"Task '{task_id}' recorded successfully.")
    except Exception as e:
        session.rollback()
        st.error(f"Failed to record task: {e}")


def compute_scores_and_store_in_session(user_input: str, all_edits: list, corrected_text):
    """
    Runs accuracy, complexity, fluency analyses on the entire user_input.
    Stores the results (scores, feedback, details, etc.) in st.session_state.
    """
    accuracy_score, accuracy_feedback, accuracy_details = analyze_accuracy(all_edits)
    complexity_score, complexity_feedback, complexity_details = analyze_complexity(user_input)
    fluency_score, fluency_feedback, fluency_details = analyze_fluency(user_input)

    # Convert the multi-sentence edits to dict
    errors_for_display = convert_tuple_errors_to_dicts(all_edits)

    # Store main analysis flags
    st.session_state['analysis_done'] = True
    st.session_state['highlighted_text'] = st.session_state.get('highlighted_text', '')
    st.session_state['corrected_text'] = corrected_text
    st.session_state['detailed_errors'] = all_edits
    st.session_state['error_list'] = errors_for_display

    # Store scores/feedback
    st.session_state['accuracy_score'] = accuracy_score
    st.session_state['accuracy_feedback'] = accuracy_feedback
    st.session_state['accuracy_details'] = accuracy_details

    st.session_state['complexity_score'] = complexity_score
    st.session_state['complexity_feedback'] = complexity_feedback
    st.session_state['complexity_details'] = complexity_details

    st.session_state['fluency_score'] = fluency_score
    st.session_state['fluency_feedback'] = fluency_feedback
    st.session_state['fluency_details'] = fluency_details


def display_feedback_and_errors():
    """
    Displays the feedback columns (Accuracy, Complexity, Fluency)
    and the detected errors in two columns side-by-side.
    Also shows the full corrected sentence after analysis.
    """
    feedback_col, errors_col = st.columns([1, 1])
    
    # === Feedback Section ===
    with feedback_col:
        st.subheader("📝 General Feedback")
        with st.expander("Expand to see more"):
            # Accuracy
            accuracy_points = st.session_state['accuracy_details'].split('\n')
            accuracy_list_items = ''.join(f"<li>{pt}</li>" for pt in accuracy_points)

            # Complexity
            complexity_details = st.session_state['complexity_details']
            complexity_list_items = ''.join([
                f"<li>Number of sentences: {complexity_details['num_sentences']}</li>",
                f"<li>Short sentences: {complexity_details['short_sentences']}</li>",
                f"<li>Medium sentences: {complexity_details['medium_sentences']}</li>",
                f"<li>Long sentences: {complexity_details['long_sentences']}</li>",
                f"<li>Independent clauses: {complexity_details['independent_clauses']}</li>",
                f"<li>Dependent clauses: {complexity_details['dependent_clauses']}</li>",
                f"<li>Total noun phrases: {complexity_details['total_noun_phrases']}</li>",
                f"<li>Complex noun phrases: {complexity_details['complex_noun_phrases']}</li>",
            ])

            # Fluency
            fluency_details = st.session_state['fluency_details']
            fluency_list_items = ''.join([
                f"<li>Total sentences: {fluency_details['num_sentences']}</li>",
                f"<li>Total word count: {fluency_details['num_words']}</li>",
            ])

            st.markdown(f"""
            <style>
                .feedback-section {{
                    border: 2px dashed #4CAF50;
                    padding: 10px;
                    border-radius: 8px;
                    margin-bottom: 10px;
                }}
                .complexity-section {{
                    border-color: #2196F3;
                }}
                .fluency-section {{
                    border-color: #FFC107;
                }}
            </style>
            <div class="feedback-section">
                <h3 style="font-size: 18px; margin-bottom: 10px; font-weight: 600;">Accuracy</h3>
                {generate_star_rating(st.session_state['accuracy_score'])}
                <p style="font-size: 16px; margin-top: 5px;">{st.session_state['accuracy_feedback']}</p>
                <details style="margin-top: 10px;">
                    <summary style="font-size: 14px; cursor: pointer; font-weight: 500;">More details</summary>
                    <ul style="font-size: 12px; margin-left: 15px; margin-top: 5px;">
                        {accuracy_list_items}
                    </ul>
                </details>
            </div>
            <div class="feedback-section complexity-section">
                <h3 style="font-size: 18px; margin-bottom: 10px; font-weight: 600;">Complexity</h3>
                {generate_star_rating(st.session_state['complexity_score'])}
                <p style="font-size: 16px; margin-top: 5px;">{st.session_state['complexity_feedback']}</p>
                <details style="margin-top: 10px;">
                    <summary style="font-size: 14px; cursor: pointer; font-weight: 500;">More details</summary>
                    <ul style="font-size: 12px; margin-left: 15px; margin-top: 5px;">
                        {complexity_list_items}
                    </ul>
                </details>
            </div>
            <div class="feedback-section fluency-section">
                <h3 style="font-size: 16px; margin-bottom: 10px; font-weight: 600;">Fluency</h3>
                {generate_star_rating(st.session_state['fluency_score'])}
                <p style="font-size: 14px; margin-top: 5px;">{st.session_state['fluency_feedback']}</p>
                <details style="margin-top: 10px;">
                    <summary style="font-size: 14px; cursor: pointer; font-weight: 500;">More details</summary>
                    <ul style="font-size: 12px; margin-left: 15px; margin-top: 5px;">
                        {fluency_list_items}
                    </ul>
                </details>
            </div>
            """, unsafe_allow_html=True)

    # === Errors Section ===
    with errors_col:
        error_list = st.session_state.get('error_list', [])
        if error_list:
            st.subheader("🚨 Detected Errors")

            for idx, error in enumerate(error_list):
                full_error_name = error.get('full_error_name', 'Unknown error')
                explanation = error.get('explanation', 'No explanation provided')
                css_structure = error.get('css_structure', 'No additional information available.')

                # Container for each error
                st.markdown(f"""
                <div style="border: 2px dashed red; padding: 10px; border-radius: 5px; margin-bottom: 10px;">
                    <p style="margin: 0;"><strong>Error {idx + 1}:</strong> {full_error_name}</p>
                    <p style="margin: 0;"><em><strong>{explanation}</strong></em></p>
                """, unsafe_allow_html=True)

                # "Learn more" expander for CSS Structure
                with st.expander("📚 Learn More", expanded=False):
                    st.markdown(f"<p style='font-size: 14px;'>{css_structure}</p>", unsafe_allow_html=True)

                st.markdown("</div>", unsafe_allow_html=True)
        else:
            st.subheader("🎉 No Grammar Errors Found!")
            st.markdown("""
            <div style="border: 2px dashed green; padding: 10px; 
                        border-radius: 5px; margin-bottom: 10px; background-color: #e8f5e9;">
                <p style="font-size: 16px; margin: 0;">Your writing looks good! No grammar errors were detected.</p>
            </div>
            """, unsafe_allow_html=True)

    # === NEW: "Correct Sentence" Expander ===
    corrected_text = st.session_state.get('corrected_text', '')
    if corrected_text:  # Only show if corrected text exists
        with st.expander("Corrected Text", expanded=False):
            st.markdown(f"""
            <div style="background-color: #e8f5e9; padding: 10px; border-radius: 10px;
                        border: 1px solid #81c784; margin-top: 10px;">
                <p style="font-size: 16px; margin: 0;"><strong>{corrected_text}</strong></p>
            </div>
            """, unsafe_allow_html=True)

    # Optional: CSS for error highlighting, if you use tooltips
    st.markdown("""
    <style>
    .error {
        border: 1px dashed red;
        padding: 2px;
        cursor: pointer;
        position: relative;
        display: inline-block;
    }
    .error .tooltiptext {
        visibility: hidden;
        width: 180px;
        background-color: #f9f9f9;
        color: #333;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -90px;
        box-shadow: 0px 0px 6px #aaa;
        transition: visibility 0.2s;
    }
    .error:hover .tooltiptext,
    .error .tooltiptext:hover {
        visibility: visible;
    }
    </style>
    """, unsafe_allow_html=True)
    
    

def mode_1_page():
    """
    Displays the Mode 1 page with task selection and analysis,
    and records data to the database once the user finishes.
    """
    st.title("Task Page (Mode 1)")
    add_css()  # Your existing CSS injection

    # 1) Initialize session state
    if 'task_selection' not in st.session_state:
        st.session_state['task_selection'] = list(tasks_dict.keys())[0]
    if 'analysis_done' not in st.session_state:
        st.session_state['analysis_done'] = False
    if 'start_time' not in st.session_state:
        st.session_state['start_time'] = time.time()  # Float-based timer
    if 'error_list' not in st.session_state:
        st.session_state['error_list'] = []  # Store errors
    if 'final_user_input' not in st.session_state:
        st.session_state['final_user_input'] = ""

    # 2) Task selection
    title_to_id = {title: task_id for task_id, title in TASK_TITLE_MAPPING.items()}
    task_titles = list(TASK_TITLE_MAPPING.values())
    current_task_id = st.session_state['task_selection']
    current_task_title = TASK_TITLE_MAPPING.get(current_task_id, "Unknown Task")

    task_selection = st.selectbox(
        "Select Task",
        options=task_titles,
        index=task_titles.index(current_task_title) if current_task_title in task_titles else 0
    )

    selected_task_id = title_to_id.get(task_selection, current_task_id)
    if selected_task_id != st.session_state['task_selection']:
        st.session_state['task_selection'] = selected_task_id
        st.session_state['analysis_done'] = False
        st.session_state['start_time'] = time.time()
        st.session_state['error_list'] = []  # Reset errors

    # 3) Fetch and show the actual task instructions
    selected_task = tasks_dict[st.session_state['task_selection']]
    st.markdown(f'''
    <div style="background-color: #e3f2fd; padding: 10px; border-radius: 10px;
                border: 1px solid #64b5f6; margin-bottom: 15px;">
        <h4 style="font-weight: 600; font-size: 16px;">📝 Task Instructions:</h4>
        <p style="font-size: 16px; margin: 0;"><strong>{selected_task["task"]}</strong></p>
    </div>
    ''', unsafe_allow_html=True)

    # 4) Two columns: user input (left) + highlighted text (right)
    input_col, highlight_col = st.columns([1, 1])

    with input_col:
        user_input = st.text_area(
            "",
            height=200,
            placeholder="Start typing here...",
            key='user_input',
            label_visibility="collapsed"
        )

        # Store full user input in session state for database storage
        st.session_state['final_user_input'] = user_input

        # Calculate time spent
        current_time = time.time()
        time_spent_seconds = int(current_time - st.session_state['start_time'])
        minutes = time_spent_seconds // 60
        seconds = time_spent_seconds % 60
        time_spent_str = f"{minutes}m {seconds}s"

        # Display only "🕒 Time Spent" (No symbols count)
        st.markdown(f"""
        <p style="font-size: 14px; font-weight: bold;">🕒 Time Spent:</p>
        <p style="font-size: 14px;">{time_spent_str}</p>
        """, unsafe_allow_html=True)

        # "Check" button => Analyze text
        if st.button("✅ Check", key='check_button'):
            if user_input.strip():
                try:
                    # (A) Analyze user input => returns (highlighted_text, edits_list)
                    final_highlighted, all_edits, corrected_text = analyze_user_input(user_input, grammar)

                    # (B) Store error types for database
                    st.session_state['error_list'] = convert_tuple_errors_to_dicts(all_edits)

                    # (C) Store highlighted text
                    st.session_state['highlighted_text'] = final_highlighted

                    # (D) Compute & store accuracy/complexity/fluency
                    compute_scores_and_store_in_session(user_input, all_edits)

                    st.session_state['corrected_text'] = corrected_text

                    # Mark analysis as done
                    st.session_state['analysis_done'] = True

                except Exception as e:
                    st.error(f"An error occurred during analysis: {e}")
                    st.session_state['analysis_done'] = False
            else:
                st.error("Please enter some text to check.")

    # Display highlighted text in the right column (Aligned Properly)
    with highlight_col:
        if st.session_state.get('analysis_done') and 'highlighted_text' in st.session_state:
            st.markdown(
                f"<div id='highlighted_text'>{st.session_state['highlighted_text']}</div>",
                unsafe_allow_html=True
            )

    # 5) If analysis is done => show feedback & errors
    if st.session_state.get('analysis_done'):
        # Show your custom feedback UI
        display_feedback_and_errors()

        # "Submit my writing" => Saves to DB
        if st.button("Submit my writing"):
            try:
                # (A) Compute total time
                end_time = time.time()
                total_seconds = int(end_time - st.session_state['start_time'])
                hh, remainder = divmod(total_seconds, 3600)
                mm, ss = divmod(remainder, 60)

                # Create datetime.time(...) object if valid
                try:
                    time_spent_obj = datetime.time(hh, mm, ss)
                except ValueError:
                    time_spent_obj = None

                # (B) Get student ID
                student_id = st.session_state.user_info.id

                # (C) Get errors & details
                errors_dict = {
                    "error_types": st.session_state.get('error_list', [])
                }

                # (D) Insert into database with full user input
                record_task_1_done(
                    student_id=student_id,
                    task_id=st.session_state['task_selection'],
                    date=datetime.datetime.now(),  # store exact timestamp
                    time_spent=time_spent_obj,
                    errors_dict=errors_dict,
                    full_text=st.session_state['final_user_input']  # Store full user input
                )

                # (E) Reset session for next attempt
                st.session_state['analysis_done'] = False
                st.session_state['start_time'] = time.time()
                st.session_state['error_list'] = []
                st.success("Mode 1 task recorded successfully!")

            except Exception as e:
                st.error(f"Error recording Mode 1 task: {e}")

    # 6) Additional CSS (optional)
    st.markdown("""
    <style>
    .error {
        border: 1px dashed red;
        padding: 2px;
        cursor: pointer;
        position: relative;
        display: inline-block;
    }
    .error .tooltiptext {
        visibility: hidden;
        width: 180px;
        background-color: #f9f9f9;
        color: #333;
        text-align: center;
        border-radius: 6px;
        padding: 5px;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -90px;
        box-shadow: 0px 0px 6px #aaa;
        transition: visibility 0.2s;
    }
    .error:hover .tooltiptext,
    .error .tooltiptext:hover {
        visibility: visible;
    }
    </style>
    """, unsafe_allow_html=True)





def go_back_to_previous_page():
        current_task = st.session_state.get('task_selection', '')
        # Fallback if not found
        target_page = TASK_BACK_MAPPING.get(current_task, 'default_page')
        st.session_state['page'] = target_page

def go_back_to_task_page():
    # Set the page back to your main task page's label (e.g. 'task_1' or 'task_1_page')
    st.session_state.page = 'task_1'  
    # Optionally clear the selected error if you want to reset it
    st.session_state.pop('selected_error', None)

def learn_more_page():
    st.title("🎯 Learn more ")

    selected_error = st.session_state.get('selected_error')
    if not selected_error:
        st.error("No error selected. Please go back and select an error.")
        return

    # Extract basic fields from selected_error
    error_code = selected_error.get('error_type', '')
    orig_str = selected_error.get('orig_str', '')
    corr_str = selected_error.get('corr_str', '')

    # 1) Attempt to get original_sentence and corrected_sentence directly
    original_sentence = selected_error.get('original_sentence')
    corrected_sentence = selected_error.get('corrected_sentence')

    # 2) Fallback if missing
    if not original_sentence:
        # Maybe fallback to user's raw input from task_1_page
        fallback_original = st.session_state.get('user_input_task1')
        if fallback_original:
            original_sentence = fallback_original
        else:
            original_sentence = "[No original sentence found]"
            st.warning("No 'original_sentence' found in selected_error or session_state.")

    if not corrected_sentence:
        # Maybe fallback to the grammar-corrected text
        fallback_corrected = st.session_state.get('corrected_text')
        if fallback_corrected:
            corrected_sentence = fallback_corrected
        else:
            corrected_sentence = "[No corrected sentence found]"
            st.warning("No 'corrected_sentence' found in selected_error or session_state.")


    # Now that we have guaranteed *some* string, proceed
    # Get the full error name and explanation from your mapping
    error_info = error_code_mapping.get(error_code, {'full_error_name': error_code, 'explanation': ''})
    full_error_name = error_info['full_error_name']
    explanation = error_info['explanation']

    st.write(f"{explanation}")

    type_and_sent = st.session_state.get('type_and_sent', {})

    # Call the appropriate handler based on error_code
    if error_code == "SPELL":
        misspelled_word = orig_str
        correct_word = corr_str
        task_html = handle_spell_error(misspelled_word, correct_word)
        st.components.v1.html(task_html, height=500)

    elif error_code in punctuation_errors:  # Ensure 'punctuation_errors' is defined
        sentence = type_and_sent.get(error_code, "Sentence not found")
        task_html = handle_punctuation_error(sentence)
        st.components.v1.html(task_html, height=500)

    elif error_code in VERB_ERROR_CODES:  # Ensure 'VERB_ERROR_CODES' is defined
        incorrect_verb = orig_str
        correct_verb = corr_str
        sentence = type_and_sent.get(error_code, "Sentence not found")
        task_html = handle_verb_error(sentence, incorrect_verb, correct_verb)
        st.components.v1.html(task_html, height=500)

    elif error_code in NOUN_ERRORS:  # Ensure 'NOUN_ERRORS' is defined
        incorrect_noun = orig_str
        correct_noun = corr_str
        sentence = type_and_sent.get(error_code, "Sentence not found")
        task_html = handle_noun_error(sentence, incorrect_noun, correct_noun)
        st.components.v1.html(task_html, height=500)

    elif error_code in ERROR_CODES_WITH_DISTRACTIONS:  # Ensure 'ERROR_CODES_WITH_DISTRACTIONS' is defined
        sentence = type_and_sent.get(error_code, "Sentence not found")
        task_html = handle_distraction_error(sentence)
        st.components.v1.html(task_html, height=500)

    elif error_code in ERROR_CODES_SCRAMBLE_POS:  # Ensure 'ERROR_CODES_SCRAMBLE_POS' is defined
        sentence = type_and_sent.get(error_code, "Sentence not found")
        task_html = handle_scramble_pos_error(sentence)
        st.components.v1.html(task_html, height=500)

    else:
        st.write("No specific task for this error type.")

    if st.button("🔙 Back to Task Page"):
        go_back_to_task_page()
        st.rerun()

# Function to generate color-coded HTML for POS tags
def color_code_pos(word, pos):
    if pos == "PRON" or pos == "NOUN":
        return f'<div class="draggable noun" draggable="true">{word}</div>'
    elif pos == "VERB":
        return f'<div class="draggable verb" draggable="true">{word}</div>'
    elif pos == "ADJ":
        return f'<div class="draggable adjective" draggable="true">{word}</div>'
    elif pos == "ADV":
        return f'<div class="draggable adverb" draggable="true">{word}</div>'
    elif pos == "DET":
        return f'<div class="draggable det" draggable="true">{word}</div>'
    elif pos == "ADP":
        return f'<div class="draggable preposition" draggable="true">{word}</div>'
    elif pos in {"CCONJ", "SCONJ"}:
        return f'<div class="draggable conjunction" draggable="true">{word}</div>'
    else:
        return f'<div class="draggable" draggable="true">{word}</div>'

# Mock function to detect errors and randomly assign error codes
def detect_errors(sentence):
    words = sentence.split()
    error_codes = [
        "WO", "PREP:MISS", "DET:MISS", "VERB:MISS", "VERB:FORM_OTHER", "OTHER",
        "NOUN", "EXTRA:TO", "DET:EXTRA", "PREP:EXTRA", "MORPH:GEN", "CONJ:GEN",
        "CONJ:MISS_COMPOUND", "CONJ:MISS_COMPLEX", "CONJ:MISS_COORD",
        "CONJ:MISS_SUBORD", "SPELL"
    ]
    return [(word, random.choice(error_codes)) for word in words]

# Function to create a SPELL task with draggable letters
def handle_spell_error (misspelled_word, correct_word):
    scrambled_letters = random.sample(list(correct_word), len(correct_word))
    scrambled_html = ''.join([f'<div class="letter" draggable="true">{letter}</div>' for letter in scrambled_letters])

    return f"""
    <div class="container">
        <h4>Unscramble the letters to correct the misspelled word:</h4>
        <div id="drag-container">{scrambled_html}</div>
        <div id="drop-container" class="drop-container"></div>
        <div class="button-container">
            <button onclick="checkAnswer()">Check</button>
        </div>
        <p id="result"></p>
    </div>

    <script>
        const draggables = document.querySelectorAll('.letter');
        const dropContainer = document.getElementById('drop-container');
        const result = document.getElementById('result');
        const correctAnswer = {json.dumps(correct_word)};

        draggables.forEach(draggable => {{
            draggable.addEventListener('dragstart', () => {{
                draggable.classList.add('dragging');
            }});

            draggable.addEventListener('dragend', () => {{
                draggable.classList.remove('dragging');
            }});
        }});

        dropContainer.addEventListener('dragover', (e) => {{
            e.preventDefault();
            const afterElement = getDragAfterElement(dropContainer, e.clientX);
            const draggable = document.querySelector('.dragging');
            if (afterElement == null) {{
                dropContainer.appendChild(draggable);
            }} else {{
                dropContainer.insertBefore(draggable, afterElement);
            }}
        }});

        function getDragAfterElement(container, x) {{
            const draggableElements = [...container.querySelectorAll('.letter:not(.dragging)')];
            return draggableElements.reduce((closest, child) => {{
                const box = child.getBoundingClientRect();
                const offset = x - box.left - box.width / 2;
                if (offset < 0 && offset > closest.offset) {{
                    return {{ offset: offset, element: child }};
                }} else {{
                    return closest;
                }}
            }}, {{ offset: Number.NEGATIVE_INFINITY }}).element;
        }}

        function checkAnswer() {{
            const answer = Array.from(dropContainer.children).map(child => child.textContent).join('');
            if (answer.trim() === correctAnswer.trim()) {{
                result.textContent = 'Correct!';
                result.style.color = 'green';
            }} else {{
                result.textContent = 'Incorrect. Try again.';
                result.style.color = 'red';
            }}
        }}
    </script>
    <style>
        #drag-container {{
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
        }}
        .letter {{
            padding: 10px;
            margin: 5px;
            background-color: lightgray;
            border-radius: 5px;
            cursor: grab;
            font-weight: bold;
            font-size: 18px;
        }}
        #drop-container {{
            display: flex;
            justify-content: center;
            min-height: 50px;
            border: 2px dashed #64b5f6;
            padding: 10px;
            border-radius: 5px;
        }}
    </style>
    """


def handle_punctuation_error(corrected_sentence):
    SUB_CONJS = {
        "although", "because", "if", "since", "though", "unless", "until",
        "whereas", "whether", "while", "when", "as", "even though"
    }
    COORD_CONJS = {
        "and", "but", "or", "nor", "so", "yet", "for"
    }

    doc = nlp(corrected_sentence)
    elements = []

    main_clauses = []
    subordinate_clauses = []

    current_main_clause = ""
    current_sub_clause = ""
    is_subordinate = False

    def finalize_sub_clause():
        nonlocal current_sub_clause, subordinate_clauses
        if current_sub_clause.strip():
            subordinate_clauses.append(current_sub_clause.strip())
        current_sub_clause = ""

    def finalize_main_clause():
        nonlocal current_main_clause, main_clauses
        if current_main_clause.strip():
            main_clauses.append(current_main_clause.strip())
        current_main_clause = ""

    def finalize_current_clause():
        if is_subordinate:
            finalize_sub_clause()
        else:
            finalize_main_clause()

    for token in doc:
        text_lower = token.text.lower()

        if token.is_punct:
            elements.append(
                f'<div class="punctuation" draggable="true" '
                f'style="padding: 5px; border-radius: 5px; margin: 5px;">{token.text}</div>'
            )
            if token.text == "," and is_subordinate:
                finalize_sub_clause()
                is_subordinate = False
            continue

        if text_lower in COORD_CONJS and token.pos_ == "CCONJ":
            finalize_current_clause()
            is_subordinate = False
            elements.append(
                f'<div class="conjunction" draggable="true" '
                f'style="padding: 5px; border-radius: 5px; margin: 5px;">{token.text}</div>'
            )
            continue

        if text_lower in SUB_CONJS and token.pos_ in {"SCONJ", "ADP"}:
            finalize_current_clause()
            is_subordinate = True
            elements.append(
                f'<div class="conjunction" draggable="true" '
                f'style="padding: 5px; border-radius: 5px; margin: 5px;">{token.text}</div>'
            )
            continue

        if is_subordinate:
            if token.dep_ == "nsubj":
                current_sub_clause += f'<span class="subject">{token.text}</span> '
            elif token.pos_ in {"VERB", "AUX"}:
                current_sub_clause += f'<span class="verb">{token.text}</span> '
            else:
                current_sub_clause += f'{token.text} '
        else:
            if token.dep_ == "nsubj":
                current_main_clause += f'<span class="subject">{token.text}</span> '
            elif token.pos_ in {"VERB", "AUX"}:
                current_main_clause += f'<span class="verb">{token.text}</span> '
            else:
                current_main_clause += f'{token.text} '

    finalize_current_clause()

    for mc in main_clauses:
        elements.append(
            f'<div class="main-clause" draggable="true" '
            f'style="padding: 5px; border-radius: 5px; margin: 5px;">{mc}</div>'
        )
    for sc in subordinate_clauses:
        elements.append(
            f'<div class="subordinate-clause" draggable="true" '
            f'style="padding: 5px; border-radius: 5px; margin: 5px;">{sc}</div>'
        )

    random.shuffle(elements)
    scrambled_html = "".join(elements)

    # Build the correct answer string with proper spacing and punctuation
    correct_answer = ""
    for token in doc:
        if token.is_punct:
            correct_answer += token.text
        elif token.i > 0 and not doc[token.i - 1].is_punct:
            correct_answer += " " + token.text
        else:
            correct_answer += token.text
    correct_answer_js = json.dumps(correct_answer.strip())

    # Updated drag-and-drop HTML/JS
    drag_and_drop_html = f"""
    <div class="container">
        <h4>Arrange the clauses, conjunctions, and punctuation to form the correct sentence:</h4>
        <div id="drag-container">{scrambled_html}</div>
        <div id="drop-container"></div>
        <div class="button-container">
            <button id="check-button" style="background-color: #d3d3d3; color: black; padding: 8px 16px; border-radius: 4px; border: 1px solid #ccc; cursor: pointer;">
                Check
            </button>
        </div>
        <p id="result"></p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {{
            const draggables = document.querySelectorAll('.main-clause, .subordinate-clause, .conjunction, .punctuation');
            const dropContainer = document.getElementById('drop-container');
            const result = document.getElementById('result');
            const checkButton = document.getElementById('check-button');
            const correctAnswer = {correct_answer_js};

            draggables.forEach(draggable => {{
                draggable.addEventListener('dragstart', () => {{
                    draggable.classList.add('dragging');
                }});
                draggable.addEventListener('dragend', () => {{
                    draggable.classList.remove('dragging');
                }});
            }});

            dropContainer.addEventListener('dragover', (e) => {{
                e.preventDefault();
                const afterElement = getDragAfterElement(dropContainer, e.clientX);
                const draggable = document.querySelector('.dragging');
                if (draggable) {{
                    if (afterElement == null) {{
                        dropContainer.appendChild(draggable);
                    }} else {{
                        dropContainer.insertBefore(draggable, afterElement);
                    }}
                }}
            }});

            function getDragAfterElement(container, x) {{
                const draggableElements = [...container.querySelectorAll(
                    '.main-clause:not(.dragging), .subordinate-clause:not(.dragging), ' + 
                    '.conjunction:not(.dragging), .punctuation:not(.dragging)'
                )];
                return draggableElements.reduce((closest, child) => {{
                    const box = child.getBoundingClientRect();
                    const offset = x - box.left - box.width / 2;
                    if (offset < 0 && offset > closest.offset) {{
                        return {{ offset: offset, element: child }};
                    }} else {{
                        return closest;
                    }}
                }}, {{ offset: Number.NEGATIVE_INFINITY }}).element;
            }}

            checkButton.addEventListener('click', () => {{
                let userAnswer = '';
                dropContainer.childNodes.forEach(child => {{
                    if (child.classList.contains('punctuation')) {{
                        userAnswer += child.textContent.trim();
                    }} else {{
                        if (userAnswer.length > 0) {{
                            userAnswer += ' ';
                        }}
                        userAnswer += child.textContent.trim();
                    }}
                }});
                userAnswer = userAnswer.toLowerCase().trim();
                const sanitizedCorrectAnswer = correctAnswer.toLowerCase().trim();

                // Debugging: Uncomment the following lines to see the sanitized answers in the console
                console.log("User's Answer:", userAnswer);
                console.log("Sanitized Correct Answer:", sanitizedCorrectAnswer);

                if (userAnswer === sanitizedCorrectAnswer) {{
                    result.textContent = 'Correct!';
                    result.style.color = 'green';
                    disableInteractions();
                }} else {{
                    result.textContent = 'Correct!';
                    result.style.color = 'green';
                }}
            }});

            function disableInteractions() {{
                draggables.forEach(draggable => {{
                    draggable.setAttribute('draggable', 'false');
                }});
            }}
        }});
    </script>
    <style>
        #drag-container {{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 10px;
        }}
        .draggable {{
            padding: 10px;
            margin: 5px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: grab;
            color: black;
        }}
        .main-clause {{
            background-color: lightgreen;
            padding: 5px;
            border-radius: 5px;
            margin: 10px 0;
            cursor: grab;
        }}
        .subordinate-clause {{
            background-color: rgba(255, 165, 0, 0.5);
            padding: 5px;
            border-radius: 5px;
            margin: 10px 0;
            cursor: grab;
        }}
        .conjunction {{
            background-color: beige;
            padding: 5px;
            border-radius: 5px;
            margin: 10px 0;
            cursor: grab;
        }}
        .punctuation {{
            background-color: lightgray;
            padding: 5px;
            border-radius: 5px;
            margin: 5px;
            cursor: grab;
        }}
        #drop-container {{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            min-height: 50px;
            border: 2px dashed #999;
            padding: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }}
    </style>
    """

    return drag_and_drop_html



def handle_noun_error(corrected_sentence, incorrect_noun, correct_noun):
    # Parse the sentence to identify parts of speech and mark noun phrases
    doc = nlp(corrected_sentence)
    elements = []

    # Identify noun phrase dependencies and group relevant tokens
    noun_phrase = []
    for token in doc:
        if token.text.lower() == correct_noun.lower():
            # Replace the correct noun with the drop zone within the noun phrase
            noun_phrase.append('<div class="dropzone noun-phrase" id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">___</div> ')
        elif token.dep_ in {"nsubj", "dobj"} and token.pos_ == "NOUN":
            # Mark other parts of the noun phrase
            noun_phrase.append(f'<span class="noun-phrase">{token.text}</span> ')
        elif token.dep_ in {"det", "amod", "nummod"}:  # Include determiners, adjectives, and number modifiers
            noun_phrase.append(f'<span class="noun-phrase">{token.text}</span> ')
        else:
            if noun_phrase:
                elements.append(f'<span class="noun-phrase">{"".join(noun_phrase)}</span>')
                noun_phrase = []  # Reset noun phrase list
            elements.append(f'{token.text} ')

    if noun_phrase:
        elements.append(f'<span class="noun-phrase">{"".join(noun_phrase)}</span>')

    noun_options = [
        f'<div class="draggable noun-phrase" draggable="true" ondragstart="drag(event)" id="opt1">{incorrect_noun}</div>',
        f'<div class="draggable noun-phrase" draggable="true" ondragstart="drag(event)" id="opt2">{correct_noun}</div>'
    ]

    drag_and_drop_html = f"""
    <div class="container">
        <h2>🎯 Practice: Correct the Noun</h2>
        <p>Drag and drop the correct noun into the blank space to complete the sentence.</p>
        <div class="sentence-container">
            {" ".join(elements)}
        </div>
        <div class="drag-container">
            {" ".join(noun_options)}
        </div>
        <div class="button-container">
            <button onclick="checkAnswer()">Check Answer</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        function allowDrop(event) {{
            event.preventDefault();
        }}

        function drag(event) {{
            event.dataTransfer.setData("text/plain", event.target.id);
        }}

        function drop(event) {{
            event.preventDefault();
            var data = event.dataTransfer.getData("text/plain");
            var draggableElement = document.getElementById(data);
            
            var dropzone = event.currentTarget;

            // Replace the old answer with the new one
            dropzone.innerHTML = draggableElement.innerHTML;
            dropzone.setAttribute("data-noun", draggableElement.textContent.trim());
        }}

        function checkAnswer() {{
            var answer = document.getElementById('dropzone').getAttribute('data-noun');
            var result = document.getElementById('result');
            if (answer === "{correct_noun}") {{
                result.textContent = 'Correct!';
                result.style.color = 'green';
            }} else {{
                result.textContent = 'Incorrect. Try again.';
                result.style.color = 'red';
            }}
        }}
    </script>

    <style>
        .container {{
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            text-align: center;
        }}
        .sentence-container {{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }}
        .drag-container {{
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }}
        .draggable, .dropzone {{
            padding: 5px 10px;
            background-color: #f9f9c5;  
            border: 2px solid #ccc;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
            min-width: 100px;
            max-width: 150px;
            margin: 5px;
            color: black;
        }}
        .draggable:hover {{
            background-color: #f0e68c;  
        }}
        .dropzone {{
            border: 2px dashed #64b5f6;
            background-color: #f9f9c5;  
        }}
        .noun-phrase {{
            background-color: rgba(255, 255, 0, 0.3);  
            padding: 5px;
            border-radius: 5px;
            color: black;
            display: inline-block;
        }}
        .button-container {{
            margin-top: 20px;
            text-align: center;
        }}
        #result {{
            margin-top: 20px;
            font-weight: bold;
        }}
    </style>
    """

    return drag_and_drop_html


def handle_verb_error(corrected_sentence, incorrect_verb, correct_verb):
    """
    Generates an HTML drag-and-drop interface for correcting verbs in a sentence,
    using the same checking logic as handle_noun_error.
    """
    doc = nlp(corrected_sentence)
    elements = []

    # Go through each token in the corrected sentence
    for token in doc:
        # If this is the correct verb to be replaced, insert the drop zone
        if token.text.lower() == correct_verb.lower() and token.pos_ in {"VERB", "AUX"}:
            elements.append('<div class="dropzone" id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">___</div> ')
        else:
            # Everything else, just add the token text
            elements.append(f'{token.text} ')

    # Create the draggable options for the user
    verb_options = [
        f'<div class="draggable" draggable="true" ondragstart="drag(event)" id="opt1">{incorrect_verb}</div>',
        f'<div class="draggable" draggable="true" ondragstart="drag(event)" id="opt2">{correct_verb}</div>'
    ]

    # Construct the final HTML
    drag_and_drop_html = f"""
    <div class="container">
        <h2>🎯 Practice: Correct the Verb</h2>
        <p>Drag and drop the correct verb into the blank space to complete the sentence.</p>
        <div class="sentence-container">
            {" ".join(elements)}
        </div>
        <div class="drag-container">
            {" ".join(verb_options)}
        </div>
        <div class="button-container">
            <button onclick="checkAnswer()">Check Answer</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        function allowDrop(event) {{
            event.preventDefault();
        }}

        function drag(event) {{
            event.dataTransfer.setData("text/plain", event.target.id);
        }}

        function drop(event) {{
            event.preventDefault();
            var data = event.dataTransfer.getData("text/plain");
            var draggableElement = document.getElementById(data);

            var dropzone = event.currentTarget;
            
            // Replace whatever was inside dropzone with the dragged element's text
            dropzone.innerHTML = draggableElement.innerHTML;

            // Store the chosen verb in data-verb
            dropzone.setAttribute("data-verb", draggableElement.textContent.trim());
        }}

        function checkAnswer() {{
            // Compare the user's chosen verb to the correct_verb
            var answer = document.getElementById('dropzone').getAttribute('data-verb');
            var result = document.getElementById('result');
            if (answer === "{correct_verb}") {{
                result.textContent = 'Correct!';
                result.style.color = 'green';
            }} else {{
                result.textContent = 'Incorrect. Try again.';
                result.style.color = 'red';
            }}
        }}
    </script>

    <style>
        .container {{
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            text-align: center;
        }}
        .sentence-container {{
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }}
        .drag-container {{
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }}
        .draggable, .dropzone {{
            padding: 5px 10px;
            background-color: #f0f0f0;  /* Neutral background */
            border: 2px solid #ccc;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
            min-width: 100px;
            max-width: 150px;
            margin: 5px;
            color: black;
        }}
        .draggable:hover {{
            background-color: #e0e0e0;  /* Subtle hover effect */
        }}
        .dropzone {{
            border: 2px dashed #64b5f6;  /* Dashed border for drop zone */
            background-color: #f0f0f0;  /* Neutral background */
        }}
        .button-container {{
            margin-top: 20px;
            text-align: center;
        }}
        #result {{
            margin-top: 20px;
            font-weight: bold;
        }}
    </style>
    """

    return drag_and_drop_html


def clean_text_for_comparison(text):
    """
    Cleans text by removing punctuation, converting to lowercase,
    and normalizing spaces for comparison purposes only.
    """
    return re.sub(r'[^\w\s]', '', text).lower().strip()


def handle_distraction_error(sentence):
    selected_error = st.session_state.get('selected_error')
    if not selected_error:
        st.error("No error selected. Please go back and select an error.")
        return

    # 1) Get corrected sentence
    corrected_sentence = selected_error.get('corrected_sentence', '').strip()
    if not corrected_sentence or corrected_sentence.lower() == 'n/a':
        corrected_sentence = sentence
        if not corrected_sentence:
            st.error("No valid corrected sentence found.")
            return

    # 2) Tokenize corrected sentence (exclude punctuation tokens)
    corrected_doc = nlp(corrected_sentence)
    corrected_words = [token.text for token in corrected_doc if token.is_alpha or token.is_digit]

    # Retrieve erroneous & corrected words
    erroneous_word = selected_error.get('orig_str', '').strip()
    corrected_word = selected_error.get('corr_str', '').strip()

    # Build task words for display (retain original case, exclude punctuation)
    task_words = corrected_words + [erroneous_word]
    task_words = [w for w in task_words if w and w.lower() != 'n/a']

    # If the list is now empty or only one word, there's nothing to shuffle
    if len(task_words) < 2:
        st.warning("Not enough valid words to create a drag-and-drop exercise.")
        return

    # 3) Generate scrambled HTML for words
    scrambled_words_html = ''.join(
        f'<div class="draggable" draggable="true">{word}</div>' for word in random.sample(task_words, len(task_words))
    )

    # Sanitize correct answer for JavaScript comparison
    sanitized_correct_answer = clean_text_for_comparison(corrected_sentence)  # Sanitized for comparison
    correct_answer_js = json.dumps(sanitized_correct_answer)

    # 4) Generate drag-and-drop HTML and JS
    drag_and_drop_html = f"""
    <div class="container">
        <h4>Arrange the words to form the correct sentence:</h4>
        <div id="drag-container">{scrambled_words_html}</div>
        <div id="drop-container"></div>
        <div class="button-container">
            <button onclick="checkAnswer()">Check</button>
        </div>
        <p id="result"></p>
    </div>

    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropContainer = document.getElementById('drop-container');
        const result = document.getElementById('result');
        const correctAnswer = {correct_answer_js};

        draggables.forEach(draggable => {{
            draggable.addEventListener('dragstart', () => {{
                draggable.classList.add('dragging');
            }});
            draggable.addEventListener('dragend', () => {{
                draggable.classList.remove('dragging');
            }});
        }});

        dropContainer.addEventListener('dragover', (e) => {{
            e.preventDefault();
            const afterElement = getDragAfterElement(dropContainer, e.clientX);
            const draggable = document.querySelector('.dragging');
            if (afterElement == null) {{
                dropContainer.appendChild(draggable);
            }} else {{
                dropContainer.insertBefore(draggable, afterElement);
            }}
        }});

        function getDragAfterElement(container, x) {{
            const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];
            return draggableElements.reduce((closest, child) => {{
                const box = child.getBoundingClientRect();
                const offset = x - box.left - box.width / 2;
                if (offset < 0 && offset > closest.offset) {{
                    return {{ offset: offset, element: child }};
                }} else {{
                    return closest;
                }}
            }}, {{ offset: Number.NEGATIVE_INFINITY }}).element;
        }}

        function checkAnswer() {{
            const userAnswer = Array.from(dropContainer.children)
                                    .map(child => child.textContent.trim())
                                    .join(' ');  // Retain original formatting for display

            const sanitizedUserAnswer = userAnswer
                                        .toLowerCase()
                                        .replace(/[.,\/#!$%\^&\*;:=\-_`~()]/g, "")  // Remove punctuation
                                        .replace(/\s+/g, ' ');  // Normalize spaces

            const sanitizedCorrectAnswer = correctAnswer
                                            .trim()
                                            .toLowerCase()
                                            .replace(/[.,\/#!$%\^&\*;:=\-_`~()]/g, "")  // Remove punctuation
                                            .replace(/\s+/g, ' ');  // Normalize spaces

            // Debugging logs
            console.log("User Answer (Original):", userAnswer);
            console.log("User Answer (Sanitized):", sanitizedUserAnswer);
            console.log("Correct Answer (Sanitized):", sanitizedCorrectAnswer);

            if (sanitizedUserAnswer === sanitizedCorrectAnswer) {{
                result.textContent = 'Correct!';
                result.style.color = 'green';
                disableInteractions();
            }} else {{
                result.textContent = 'Incorrect. Try again.';
                result.style.color = 'red';
            }}
        }}

        function disableInteractions() {{
            draggables.forEach(draggable => {{
                draggable.setAttribute('draggable', 'false');
            }});
        }}
    </script>

    <style>
        #drag-container {{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 10px;
        }}
        .draggable {{
            padding: 10px;
            margin: 5px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: grab;
        }}
        #drop-container {{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            min-height: 50px;
            border: 2px dashed #999;
            padding: 10px;
            background-color: #f9f9f9;
        }}
    </style>
    """

    return drag_and_drop_html



def handle_scramble_pos_error(sentence):
    selected_error = st.session_state.get('selected_error')
    if not selected_error:
        st.error("No error selected. Please go back and select an error.")
        return

    # Try to get corrected_sentence from selected_error first
    corrected_sentence = selected_error.get('corrected_sentence')
    if not corrected_sentence:
        # Fallback: use st.session_state['corrected_text'], if present
        corrected_sentence = sentence
        if not corrected_sentence:
            st.error("No corrected sentence found in selected_error or session_state.")
            return

    # Now corrected_sentence is guaranteed to have a value
    corrected_doc = nlp(corrected_sentence)

    # Example: color_code_pos is presumably a function you already defined
    words_html = ''.join([color_code_pos(token.text, token.pos_) for token in corrected_doc])

    # Scramble the words for the drag-and-drop task
    words_list = words_html.split('</div>')
    scrambled_words = random.sample(words_list, len(words_list))
    scrambled_words_html = ''.join([word + '</div>' for word in scrambled_words if word])

    correct_answer = ' '.join(token.text for token in corrected_doc)
    correct_answer_js = json.dumps(correct_answer)

    # The rest of your drag-and-drop HTML/JS remains the same:
    drag_and_drop_html = f"""
    <div class="container">
        <h4>Arrange the words to form the correct sentence:</h4>
        <div id="drag-container">{scrambled_words_html}</div>
        <div id="drop-container"></div>
        <div class="button-container">
            <button onclick="checkAnswer()">Check</button>
        </div>
        <p id="result"></p>
    </div>

    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropContainer = document.getElementById('drop-container');
        const result = document.getElementById('result');
        const correctAnswer = {correct_answer_js};

        draggables.forEach(draggable => {{
            draggable.addEventListener('dragstart', () => {{
                draggable.classList.add('dragging');
            }});
            draggable.addEventListener('dragend', () => {{
                draggable.classList.remove('dragging');
            }});
        }});

        dropContainer.addEventListener('dragover', (e) => {{
            e.preventDefault();
            const afterElement = getDragAfterElement(dropContainer, e.clientX);
            const draggable = document.querySelector('.dragging');
            if (afterElement == null) {{
                dropContainer.appendChild(draggable);
            }} else {{
                dropContainer.insertBefore(draggable, afterElement);
            }}
        }});

        function getDragAfterElement(container, x) {{
            const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];
            return draggableElements.reduce((closest, child) => {{
                const box = child.getBoundingClientRect();
                const offset = x - box.left - box.width / 2;
                if (offset < 0 && offset > closest.offset) {{
                    return {{ offset: offset, element: child }};
                }} else {{
                    return closest;
                }}
            }}, {{ offset: Number.NEGATIVE_INFINITY }}).element;
        }}

        function checkAnswer() {{
                // Sanitize the user's answer: remove punctuation and convert to lowercase
                const answer = Array.from(dropContainer.children)
                                    .map(child => child.textContent.trim())
                                    .join(' ')
                                    .toLowerCase()
                                    .replace(/[.,\/#!$%\^&\*;:=\-_`~()]/g,"");  // Remove punctuation
    
                // Sanitize the correct answer: remove punctuation and convert to lowercase
                const sanitizedCorrectAnswer = correctAnswer.trim().toLowerCase()
                                                        .replace(/[.,\/#!$%\^&\*;:=\-_`~()]/g,"");  // Remove punctuation
    
                if (answer === sanitizedCorrectAnswer) {{
                    result.textContent = 'Correct!';
                    result.style.color = 'green';
                    disableInteractions();
                }} else {{
                    result.textContent = 'Incorrect. Try again.';
                    result.style.color = 'red';
                }}
            }}
    
            function disableInteractions() {{
                draggables.forEach(draggable => {{
                    draggable.setAttribute('draggable', 'false');
                }});
            }};
    </script>
    <style>
        #drag-container {{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 10px;
        }}
        .draggable {{
            padding: 10px;
            margin: 5px;
            background-color: #f0f0f0;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: grab;
            color: black;
        }}
        .noun {{
            background-color: rgba(255, 255, 0, 0.5);
        }}
        .verb {{
            background-color: rgba(255, 0, 0, 0.5);
        }}
        .adjective {{
            background-color: lightgreen;
        }}
        .adverb {{
            background-color: lightblue;
        }}
        .det {{
            background-color: darkblue;
            color: white;
        }}
        .preposition {{
            background-color: rgba(128, 0, 128, 0.5);
        }}
        .conjunction {{
            background-color: beige;
        }}
        #drop-container {{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            min-height: 50px;
            border: 2px dashed #999;
            padding: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }}
    </style>
    """

    return drag_and_drop_html



def add_css():
    st.markdown("""
    <style>
        .sentence-container {
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            border: 2px solid rgba(0, 0, 0, 0.1);
        }
        .noun-phrase, .noun {
            background-color: rgba(255, 255, 0, 0.5);  /* Light yellow for noun phrase */
            padding: 0 5px;
            border-radius: 3px;
            display: inline-block;
            margin: 5px 0;
            color: black;
        }
        }
        .sentence-white {
            background-color: white;  /* Changed from light yellow to white */
            padding: 0 5px;
            border-radius: 3px;
            display: inline-block;  /* Original display property */
            margin: 5px 0;          /* Original margin */
            color: black;
        }
                
        .verb-phrase {
            background-color: rgba(255, 0, 0, 0.5);  /* Light red for verb phrase */
            padding: 0 5px;
            border-radius: 3px;
            display: inline-block;
            margin: 5px 0;
        }
        .prepositional-phrase {
            background-color: rgba(128, 0, 128, 0.5);  /* Light purple for prepositional phrase */
            padding: 0 5px;
            border-radius: 3px;
            display: inline-block;
            margin: 5px 0;
        }
        .det {
            background-color: darkblue;
            color: white;
            padding: 0 5px;
            border-radius: 3px;
        }
        .adjective, .adj {
            background-color: lightgreen;
            color: black;
            padding: 0 5px;
            border-radius: 3px;
        }
        .adverb, .adv {
            background-color: lightblue;
            color: black;
            padding: 0 5px;
            border-radius: 3px;
        }
        .main-clause {
            background-color: lightgreen;
            padding: 5px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .subordinate-clause {
            background-color: rgba(255, 165, 0, 0.5);  /* Light orange for subordinate clause */
            padding: 5px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .conjunction, .conj {
            background-color: beige;
            padding: 5px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .subject {
            font-weight: bold;
            text-decoration: underline;
            color: black;
        }
        .verb {
            font-weight: bold;
            text-decoration: underline;
            color: blue;
        }
        .object {
            font-weight: bold;
            text-decoration: underline;
            color: green;
        }
        .rule-frame {
            border: 2px solid #ffeb3b;
            padding: 15px;
            border-radius: 5px;
            background-color: #white;
            margin-bottom: 15px;
        }
        .example-frame {
            border: 2px solid #4caf50;
            padding: 15px;
            border-radius: 5px;
            background-color: #white;
            margin-bottom: 15px;
        }
        .practice-frame {
            border: 2px solid #2196f3;
            padding: 15px;
            border-radius: 5px;
            background-color: #white;
            margin-bottom: 15px;
        }
        .drag-container, .drop-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 10px;
            margin-top: 20px;
        }
        .draggable {
            padding: 10px;
            margin: 5px;
            background-color: #f0f4c3;
            border: 2px solid #cddc39;
            border-radius: 5px;
            cursor: grab;
            text-align: center;
            width: 200px;
        }
        .dropzone {
            padding: 20px;
            background-color: #e3f2fd;
            border: 2px dashed #2196f3;
            border-radius: 10px;
            min-height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
        }
        .button-container {
            text-align: center;
            margin-top: 20px;
        }
        }
        .button-container button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .button-container button#check-button {
            background-color: #4CAF50;
            color: white;
        }
        .button-container button#check-button:hover {
            background-color: #45a049;
        }
        .button-container button#next-page-button {
            background-color: #008CBA;
            color: white;
            display: none;
        }
        .button-container button#next-page-button:hover {
            background-color: #007B9E;
        }
                
    </style>
    """, unsafe_allow_html=True)

TASK_TITLE_MAPPING = {
    # Level 1 Tasks
    "L1_T1_TAS_1": "Level 1 - Study Location",
    "L1_T2_TAS_1": "Level 1 - New Routine",
    "L1_T2_TAS_2": "Level 1 - Sport Activities",
    "L1_T3_TAS_1": "Level 1 - New Place",
    "L1_T3_TAS_2": "Level 1 - Advertising Text",
    "L1_T3_TAS_3": "Level 1 - Tech Benefits",
    "L1_T4_TAS_1": "Level 1 - Trip Planning",
    "L1_T4_TAS_2": "Level 1 - Exhibition Guide",
    "L1_T5_TAS_1": "Level 1 - Movie Disagreement",
    "L1_T5_TAS_2": "Level 1 - Travel Activity Dispute",
    "L1_T5_TAS_3": "Level 1 - ChatGPT Evaluation",
    "L1_T6_TAS_1": "Level 1 - Important Person",
    "L1_T6_TAS_2": "Level 1 - Memorable Trip",
    "L1_T6_TAS_3": "Level 1 - Famous Person Life",
    "L1_T7_TAS_1": "Level 1 - Tech Future",
    "L1_T7_TAS_2": "Level 1 - Life Next Year",
    "L1_T7_TAS_3": "Level 1 - Tech Future Extension",
    "L1_T8_TAS_1": "Level 1 - Well-Known Place",
    "L1_T8_TAS_2": "Level 1 - Tech Invention",
    "L1_T8_TAS_3": "Level 1 - Dish Preparation",
    "L1_T9_TAS_1": "Level 1 - Travel Guide",
    "L1_T9_TAS_2": "Level 1 - Sports Event Instructions",
    "L1_T9_TAS_3": "Level 1 - Healthy Lifestyle Advice",
    "L1_T10_TAS_1": "Level 1 - Travel Preferences",

    # Level 2 Tasks
    "L2_T1_TAS_1": "Level 2 - Social Media Pros/Cons",
    "L2_T2_TAS_1": "Level 2 - Professional Goals",
    "L2_T2_TAS_2": "Level 2 - Weather Advice",
    "L2_T2_TAS_3": "Level 2 - Conditional Sentences",
    "L2_T3_TAS_1": "Level 2 - Important Event",
    "L2_T3_TAS_2": "Level 2 - Achieved Goal",
    "L2_T3_TAS_3": "Level 2 - Tech Evolution",
    "L2_T4_TAS_1": "Level 2 - Event Organization",
    "L2_T4_TAS_2": "Level 2 - Learning Story",
    "L2_T4_TAS_3": "Level 2 - Team Problem",
    "L2_T5_TAS_1": "Level 2 - Morning Routine Benefits",
    "L2_T5_TAS_2": "Level 2 - Creative Activities",
    "L2_T5_TAS_3": "Level 2 - Pets' Happiness",
    "L2_T6_TAS_1": "Level 2 - Sports Milestone",
    "L2_T6_TAS_2": "Level 2 - Impactful Movie",
    "L2_T7_TAS_1": "Level 2 - Second Conditional",
    "L2_T7_TAS_2": "Level 2 - Conditional Movie Role",
    "L2_T7_TAS_3": "Level 2 - Conditional Scenarios",
    "L2_T8_TAS_1": "Level 2 - Artist Profile",
    "L2_T8_TAS_2": "Level 2 - Company Growth",
    "L2_T8_TAS_3": "Level 2 - Scientific Discovery",
    "L2_T9_TAS_1": "Level 2 - Movie Review",
    "L2_T9_TAS_2": "Level 2 - Seminar Report",
    "L2_T10_TAS_1": "Level 2 - AI Investment",

    # Level 3 Tasks
    "L3_T1_TAS_1": "Level 3 - Funding Priorities",
    "L3_T2_TAS_1": "Level 3 - Path Choice Reflection",
    "L3_T2_TAS_2": "Level 3 - Historical Outcome",
    "L3_T2_TAS_3": "Level 3 - Invention Impact",
    "L3_T3_TAS_1": "Level 3 - Business Pitch",
    "L3_T3_TAS_2": "Level 3 - Sports Lesson",
    "L3_T3_TAS_3": "Level 3 - Emotional Movie Review",
    "L3_T4_TAS_1": "Level 3 - Fitness Routine",
    "L3_T4_TAS_2": "Level 3 - Skill Improvement",
    "L3_T5_TAS_1": "Level 3 - Acting Preparation",
    "L3_T5_TAS_2": "Level 3 - Signature Dish",
    "L3_T5_TAS_3": "Level 3 - Explorer's Adventure",
    "L3_T6_TAS_1": "Level 3 - Memorable Character",
    "L3_T6_TAS_2": "Level 3 - Historical Figure",
    "L3_T6_TAS_3": "Level 3 - Influential Person",
    "L3_T7_TAS_1": "Level 3 - City Future",
    "L3_T7_TAS_2": "Level 3 - Future Transportation",
    "L3_T7_TAS_3": "Level 3 - Future Jobs",
    "L3_T8_TAS_1": "Level 3 - Missing Singer",
    "L3_T8_TAS_2": "Level 3 - Company Spy",
    "L3_T9_TAS_1": "Level 3 - Impact Event",
    "L3_T9_TAS_2": "Level 3 - Moment of Recognition",
    "L3_T10_TAS_1": "Level 3 - Environmental Campaign",
}
TASK_BACK_MAPPING = {
    "L1_T1_TAS_1": "user_dashboard",
    "L1_T2_TAS_1": "TT_L1_T1_3",
    "L1_T2_TAS_2": "TT_L1_T1_3",
    "L1_T3_TAS_1": "TT_L1_T2_1",
    "L1_T3_TAS_2": "TT_L1_T2_1",
    "L1_T3_TAS_3": "TT_L1_T2_1",
    "L1_T4_TAS_1": "TT_L1_T3_1",
    "L1_T4_TAS_2": "TT_L1_T3_1",
    "L1_T5_TAS_1": "TT_L1_T4_2",
    "L1_T5_TAS_2": "TT_L1_T4_2",
    "L1_T5_TAS_3": "TT_L1_T4_2",
    "L1_T6_TAS_1": "TT_L1_T5_2",
    "L1_T6_TAS_2": "TT_L1_T5_2",
    "L1_T6_TAS_3": "TT_L1_T5_2",
    "L1_T7_TAS_1": "TT_L1_T6_1",
    "L1_T7_TAS_2": "TT_L1_T6_1",
    "L1_T8_TAS_1": "TT_L1_T7_1",
    "L1_T8_TAS_2": "TT_L1_T7_1",
    "L1_T8_TAS_3": "TT_L1_T7_1",
    "L1_T9_TAS_1": "TT_L1_T8_1",
    "L1_T9_TAS_2": "TT_L1_T8_1",
    "L1_T9_TAS_3": "TT_L1_T8_1",
    "L1_T10_TAS_1": "task_1",
    "L2_T1_TAS_1": "user_dashboard",
    "L2_T2_TAS_1": "TT_L2_T1_3",
    "L2_T2_TAS_2": "TT_L2_T1_3",
    "L2_T2_TAS_3": "TT_L2_T1_3",
    "L2_T3_TAS_1": "TT_L2_T2_1",
    "L2_T3_TAS_2": "TT_L2_T2_1",
    "L2_T3_TAS_3": "TT_L2_T2_1",
    "L2_T4_TAS_1": "TT_L2_T3_2",
    "L2_T4_TAS_2": "TT_L2_T3_2",
    "L2_T4_TAS_3": "TT_L2_T3_2",
    "L2_T5_TAS_1": "TT_L2_T4_1",
    "L2_T5_TAS_2": "TT_L2_T4_1",
    "L2_T5_TAS_3": "TT_L2_T4_1",
    "L2_T6_TAS_1": "TT_L2_T5_1",
    "L2_T6_TAS_2": "TT_L2_T5_1",
    "L2_T7_TAS_1": "TT_L2_T6_1",
    "L2_T7_TAS_2": "TT_L2_T6_1",
    "L2_T7_TAS_3": "TT_L2_T6_1",
    "L2_T8_TAS_1": "TT_L2_T7_1",
    "L2_T8_TAS_2": "TT_L2_T7_1",
    "L2_T8_TAS_3": "TT_L2_T7_1",
    "L2_T9_TAS_1": "TT_L2_T8_2",
    "L2_T9_TAS_2": "TT_L2_T8_2",
    "L2_T10_TAS_1": "task_1",
    "L3_T1_TAS_1": "user_dashboard",
    "L3_T2_TAS_1": "TT_L3_T1_3",
    "L3_T2_TAS_2": "TT_L3_T1_3",
    "L3_T2_TAS_3": "TT_L3_T1_3",
    "L3_T3_TAS_1": "TT_L3_T2_1",
    "L3_T3_TAS_2": "TT_L3_T2_1",
    "L3_T3_TAS_3": "TT_L3_T2_1",
    "L3_T4_TAS_1": "TT_L3_T3_1",
    "L3_T4_TAS_2": "TT_L3_T3_1",
    "L3_T5_TAS_1": "TT_L3_T4_2",
    "L3_T5_TAS_2": "TT_L3_T4_2",
    "L3_T5_TAS_3": "TT_L3_T4_2",
    "L3_T6_TAS_1": "TT_L3_T5_1",
    "L3_T6_TAS_2": "TT_L3_T5_1",
    "L3_T6_TAS_3": "TT_L3_T5_1",
    "L3_T7_TAS_1": "TT_L3_T6_1",
    "L3_T7_TAS_2": "TT_L3_T6_1",
    "L3_T7_TAS_3": "TT_L3_T6_1",
    "L3_T8_TAS_1": "TT_L3_T7_1",
    "L3_T8_TAS_2": "TT_L3_T7_1",
    "L3_T9_TAS_1": "TT_L3_T8_1",
    "L3_T9_TAS_2": "TT_L3_T8_1",
    "L3_T10_TAS_1": "task_1"

}

# Define the mapping from task IDs to rule IDs
TASK_RULE_MAPPING = {
    "L1_T1_TAS_1": "L1_T1_TAS_1",
    "L1_T2_TAS_1": "L1_T2_TAS_1",
    "L1_T2_TAS_2": "L1_T2_TAS_2",
    "L1_T3_TAS_1": "L1_T3_TAS_1",
    "L1_T3_TAS_2": "L1_T3_TAS_2",
    "L1_T3_TAS_3": "L1_T3_TAS_3",
    "L1_T4_TAS_1": "L1_T4_TAS_1",
    "L1_T4_TAS_2": "L1_T4_TAS_2",
    "L1_T5_TAS_1": "L1_T5_TAS_1",
    "L1_T5_TAS_2": "L1_T5_TAS_2",
    "L1_T5_TAS_3": "L1_T5_TAS_3",
    "L1_T6_TAS_1": "L1_T6_TAS_1",
    "L1_T6_TAS_2": "L1_T6_TAS_2",
    "L1_T6_TAS_3": "L1_T6_TAS_3",
    "L1_T7_TAS_1": "L1_T7_TAS_1",
    "L1_T7_TAS_2": "L1_T7_TAS_2",
    "L1_T8_TAS_1": "L1_T8_TAS_1",
    "L1_T8_TAS_2": "L1_T8_TAS_2",
    "L1_T8_TAS_3": "L1_T8_TAS_3",
    "L1_T9_TAS_1": "L1_T9_TAS_1",
    "L1_T9_TAS_2": "L1_T9_TAS_2",
    "L1_T9_TAS_3": "L1_T9_TAS_3",
    "L1_T10_TAS_1": "L1_T10_TAS_1",
    "L2_T1_TAS_1": "L2_T1_TAS_1",
    "L2_T2_TAS_1": "L2_T2_TAS_1",
    "L2_T2_TAS_2": "L2_T2_TAS_2",
    "L2_T2_TAS_3": "L2_T2_TAS_3",
    "L2_T3_TAS_1": "L2_T3_TAS_1",
    "L2_T3_TAS_2": "L2_T3_TAS_2",
    "L2_T3_TAS_3": "L2_T3_TAS_3",
    "L2_T4_TAS_1": "L2_T4_TAS_1",
    "L2_T4_TAS_2": "L2_T4_TAS_2",
    "L2_T4_TAS_3": "L2_T4_TAS_3",
    "L2_T5_TAS_1": "L2_T5_TAS_1",
    "L2_T5_TAS_2": "L2_T5_TAS_2",
    "L2_T5_TAS_3": "L2_T5_TAS_3",
    "L2_T6_TAS_1": "L2_T6_TAS_1",
    "L2_T6_TAS_2": "L2_T6_TAS_2",
    "L2_T7_TAS_1": "L2_T7_TAS_1",
    "L2_T7_TAS_2": "L2_T7_TAS_2",
    "L2_T7_TAS_3": "L2_T7_TAS_3",
    "L2_T8_TAS_1": "L2_T8_TAS_1",
    "L2_T8_TAS_2": "L2_T8_TAS_2",
    "L2_T8_TAS_3": "L2_T8_TAS_3",
    "L2_T9_TAS_1": "L2_T9_TAS_1",
    "L2_T9_TAS_2": "L2_T9_TAS_2",
    "L2_T10_TAS_1": "L2_T10_TAS_1",
    "L3_T1_TAS_1": "L3_T1_TAS_1",
    "L3_T2_TAS_1": "L3_T2_TAS_1",
    "L3_T2_TAS_2": "L3_T2_TAS_2",
    "L3_T2_TAS_3": "L3_T2_TAS_3",
    "L3_T3_TAS_1": "L3_T3_TAS_1",
    "L3_T3_TAS_2": "L3_T3_TAS_2",
    "L3_T3_TAS_3": "L3_T3_TAS_3",
    "L3_T4_TAS_1": "L3_T4_TAS_1",
    "L3_T4_TAS_2": "L3_T4_TAS_2",
    "L3_T5_TAS_1": "L3_T5_TAS_1",
    "L3_T5_TAS_2": "L3_T5_TAS_2",
    "L3_T5_TAS_3": "L3_T5_TAS_3",
    "L3_T6_TAS_1": "L3_T6_TAS_1",
    "L3_T6_TAS_2": "L3_T6_TAS_2",
    "L3_T6_TAS_3": "L3_T6_TAS_3",
    "L3_T7_TAS_1": "L3_T7_TAS_1",
    "L3_T7_TAS_2": "L3_T7_TAS_2",
    "L3_T7_TAS_3": "L3_T7_TAS_3",
    "L3_T8_TAS_1": "L3_T8_TAS_1",
    "L3_T8_TAS_2": "L3_T8_TAS_2",
    "L3_T9_TAS_1": "L3_T9_TAS_1",
    "L3_T9_TAS_2": "L3_T9_TAS_2",
    "L3_T10_TAS_1": "L3_T10_TAS_1"

}

def L1_T10_TAS_1():
    navigate_to_task1_9()
    st.rerun()

def L2_T10_TAS_1():
    navigate_to_task2_9()
    st.rerun()

def L3_T10_TAS_1():
    navigate_to_task3_9()
    st.rerun()


# Define a mapping from each task to its next page
task_to_next_page = { 
    "L1_T1_TAS_1": "TT_L1_T1_1",
    "L1_T2_TAS_1": "TT_L1_T2_1",
    "L1_T2_TAS_2": "TT_L1_T2_1",
    "L1_T3_TAS_1": "TT_L1_T3_1",
    "L1_T3_TAS_2": "TT_L1_T3_1",
    "L1_T3_TAS_3": "TT_L1_T3_1",
    "L1_T4_TAS_1": "TT_L1_T4_1",
    "L1_T4_TAS_2": "TT_L1_T4_1",
    "L1_T5_TAS_1": "TT_L1_T5_1",
    "L1_T5_TAS_2": "TT_L1_T5_1",
    "L1_T5_TAS_3": "TT_L1_T5_1",
    "L1_T6_TAS_1": "TT_L1_T6_1",
    "L1_T6_TAS_2": "TT_L1_T6_1",
    "L1_T6_TAS_3": "TT_L1_T6_1",
    "L1_T7_TAS_1": "TT_L1_T7_1",
    "L1_T7_TAS_2": "TT_L1_T7_1",
    "L1_T8_TAS_1": "TT_L1_T8_1",
    "L1_T8_TAS_2": "TT_L1_T8_1",
    "L1_T8_TAS_3": "TT_L1_T8_1",
    "L1_T9_TAS_1": "L1_T10_TAS_1",
    "L1_T9_TAS_2": "L1_T10_TAS_1",
    "L1_T9_TAS_3": "L1_T10_TAS_1",
    "L1_T10_TAS_1": "success_page",
    "L2_T1_TAS_1": "TT_L2_T1_1",
    "L2_T2_TAS_1": "TT_L2_T2_1",
    "L2_T2_TAS_2": "TT_L2_T2_1",
    "L2_T2_TAS_3": "TT_L2_T2_1",
    "L2_T3_TAS_1": "TT_L2_T3_1",
    "L2_T3_TAS_2": "TT_L2_T3_1",
    "L2_T3_TAS_3": "TT_L2_T3_1",
    "L2_T4_TAS_1": "TT_L2_T4_1",
    "L2_T4_TAS_2": "TT_L2_T4_1",
    "L2_T4_TAS_3": "TT_L2_T4_1",
    "L2_T5_TAS_1": "TT_L2_T5_1",
    "L2_T5_TAS_2": "TT_L2_T5_1",
    "L2_T5_TAS_3": "TT_L2_T5_1",
    "L2_T6_TAS_1": "TT_L2_T6_1",
    "L2_T6_TAS_2": "TT_L2_T6_1",
    "L2_T7_TAS_1": "TT_L2_T7_1",
    "L2_T7_TAS_2": "TT_L2_T7_1",
    "L2_T7_TAS_3": "TT_L2_T7_1",
    "L2_T8_TAS_1": "TT_L2_T8_1",
    "L2_T8_TAS_2": "TT_L2_T8_1",
    "L2_T8_TAS_3": "L2_T10_TAS_1",
    "L2_T9_TAS_1": "L2_T10_TAS_1",
    "L2_T9_TAS_2": "L2_T10_TAS_1",
    "L2_T10_TAS_1": "success_page",
    "L3_T1_TAS_1": "TT_L3_T1_1",
    "L3_T2_TAS_1": "TT_L3_T2_1",
    "L3_T2_TAS_2": "TT_L3_T2_1",
    "L3_T2_TAS_3": "TT_L3_T2_1",
    "L3_T3_TAS_1": "TT_L3_T3_1",
    "L3_T3_TAS_2": "TT_L3_T3_1",
    "L3_T3_TAS_3": "TT_L3_T3_1",
    "L3_T4_TAS_1": "TT_L3_T4_1",
    "L3_T4_TAS_2": "TT_L3_T4_1",
    "L3_T5_TAS_1": "TT_L3_T5_1",
    "L3_T5_TAS_2": "TT_L3_T5_1",
    "L3_T5_TAS_3": "TT_L3_T5_1",
    "L3_T6_TAS_1": "TT_L3_T6_1",
    "L3_T6_TAS_2": "TT_L3_T6_1",
    "L3_T6_TAS_3": "TT_L3_T6_1",
    "L3_T7_TAS_1": "TT_L3_T7_1",
    "L3_T7_TAS_2": "TT_L3_T7_1",
    "L3_T7_TAS_3": "TT_L3_T7_1",
    "L3_T8_TAS_1": "TT_L3_T8_1",
    "L3_T8_TAS_2": "TT_L3_T8_1",
    "L3_T9_TAS_1": "L3_T10_TAS_1",
    "L3_T9_TAS_2": "L3_T10_TAS_1",
    "L3_T10_TAS_1": "success_page"
}

def navigate_to_page(page_key):
    """Navigate to the specified page."""
    st.session_state.page = page_key

tasks_dict = load_tasks()
rules = load_rules()

def get_rule_content(rule_id):
    """
    Retrieves the rule content from the rules dictionary based on the rule_id.
    """
    if rule_id in rules:
        rule_content = rules[rule_id].get('rule')
        return rule_content


def navigate_back():
    """
    Sets st.session_state.page to whatever was stored as 'previous_page'.
    If none is found, defaults to some other page, e.g. 'main_page'.
    """
    st.session_state.page = st.session_state.get('previous_page')

def practice_page():
    """
    Displays a practice page with no dropdown, auto-loading questions for the
    tutorial in st.session_state.selected_tutorial. Also adds a 'Back' button
    to return to the page from which you arrived.
    """
    st.title("Grammar Practice")
    st.write("Below are the questions for your selected tutorial:")

    # --- 1) 'Back' button at the top (or you can place it at the bottom) ---
    

    # --- 2) Load all tasks if needed ---
    if "all_tasks" not in st.session_state:
        script_dir = os.path.dirname(os.path.abspath(__file__))
        file_path = os.path.join(script_dir, "data/practice.json")
        with open(file_path, "r") as f:
            st.session_state.all_tasks = json.load(f)

    # --- 3) Determine which tutorial is selected ---
    selected_tutorial = st.session_state.get("selected_tutorial", None)
    if not selected_tutorial:
        st.info("No tutorial selected.")
        return

    # --- 4) Filter tasks for this tutorial ---
    filtered_tasks = [
        t for t in st.session_state.all_tasks
        if selected_tutorial in t["Tutorial number"]
    ]
    if not filtered_tasks:
        st.warning(f"No tasks found for tutorial '{selected_tutorial}'.")
        return

    # --- 5) Check if we have a stored set of questions for this tutorial ---
    if "selected_questions" not in st.session_state:
        st.session_state.selected_questions = {}

    if selected_tutorial not in st.session_state.selected_questions:
        # pick up to 8 questions at random
        chosen_ques = random.sample(filtered_tasks, min(8, len(filtered_tasks)))
        st.session_state.selected_questions[selected_tutorial] = chosen_ques

    questions_for_tutorial = st.session_state.selected_questions[selected_tutorial]

    # --- 6) Store user answers keyed by tutorial ---
    if "user_answers" not in st.session_state:
        st.session_state.user_answers = {}
    if selected_tutorial not in st.session_state.user_answers:
        # Initialize answers
        st.session_state.user_answers[selected_tutorial] = [None] * len(questions_for_tutorial)

    user_answers = st.session_state.user_answers[selected_tutorial]

    # --- 7) Display each question & a radio for answers ---
    for i, q in enumerate(questions_for_tutorial):
        st.write(f"**Question {i + 1}:** {q['Task']}")
        options = q["Options"]

        # Figure out which option the user previously chose
        current_answer = user_answers[i]
        default_index = 0
        if current_answer in options:
            default_index = options.index(current_answer)

        user_answers[i] = st.radio(
            label="",
            options=options,
            index=None,
            key=f"{selected_tutorial}_q_{i}"
        )
        st.write("---")

    # --- 8) Check Answers button ---
    if st.button("Check Answers"):
        correct_count = 0
        for i, q in enumerate(questions_for_tutorial):
            correct_ans = q["Correct option"]
            if user_answers[i] == correct_ans:
                correct_count += 1
        st.write(f"**Score**: {correct_count}/{len(questions_for_tutorial)}")
    
    if st.button("Back"):
            navigate_back()
            st.rerun()  # stop here so we don't keep drawing this page


def success_page():
    st.title("Congratulations!")
    st.write("You have successfully completed all tasks.")



# If these session keys are used elsewhere, keep them:
if 'selected_tutorial' not in st.session_state:
    st.session_state.selected_tutorial = None

if 'practice_questions' not in st.session_state:
    st.session_state.practice_questions = []


import streamlit as st
import streamlit.components.v1 as components
from sqlalchemy.exc import SQLAlchemyError
import random
import json

def spelling_practice_page():
    st.title("Spelling Practice Page")

    # Define styles
    styles = """
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
    body {
        font-family: "Roboto", sans-serif;
    }
    .container {
        padding: 20px;
        background-color: #e3f2fd;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }
    .button-container {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    /* Enhanced Button Styling */
    .button-container button {
        flex: 1;
        margin: 0 5px;
        background-color: #f0f2f6; /* Streamlit-like button background */
        color: #262730; /* Streamlit-like button text */
        border: 1px solid #d1d5db; /* Light border */
        border-radius: 4px;
        padding: 8px 16px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s, box-shadow 0.2s;
    }
    .button-container button:hover {
        background-color: #e4e7eb; /* Slightly darker on hover */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    .button-container button:active {
        background-color: #d1d5db; /* Even darker on click */
    }
    /* Draggable Letter Boxes - Narrower */
    .draggable {
        padding: 8px;
        margin: 4px;
        background-color: #1E3A8A; /* Dark Blue */
        color: white;
        border-radius: 4px;
        cursor: grab;
        user-select: none;
        font-size: 16px;
        text-align: center;
        width: 30px; /* Reduced width for narrower boxes */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .draggable.dragging {
        opacity: 0.5;
    }
    /* Drop Container Styling */
    #drop-container {
        display: flex;
        justify-content: center;
        min-height: 50px;
        border: 2px dashed #1E3A8A; /* Dark Blue */
        padding: 10px;
        border-radius: 5px;
        flex-wrap: wrap;
        background-color: #f9f9f9;
    }
    </style>
    """
    st.markdown(styles, unsafe_allow_html=True)

    # Function to sanitize words (remove non-alphabetic characters)
    def sanitize_word(word):
        return ''.join(filter(str.isalpha, word))

    # Function to scramble a word
    def scramble_word(word):
        word = sanitize_word(word.lower())
        if len(word) <= 1:
            return word  # No scramble needed for single-letter words
        letters = list(word)
        scrambled = word
        attempts = 0
        # Attempt to scramble until it's different from the original
        while scrambled == word and attempts < 10:
            random.shuffle(letters)
            scrambled = ''.join(letters)
            attempts += 1
        return scrambled

    # Retrieve logged-in student data from session state
    student = st.session_state.get('user_info')  # Ensure 'user_info' contains the student object
    if not student:
        st.error("No user is currently logged in.")
        return

    # Fetch Errors for the Logged-in Student
    try:
        errors_obj = session.query(Errors).filter_by(student_id=student.id).one_or_none()
    except SQLAlchemyError as e:
        st.error(f"Error fetching errors: {e}")
        return

    if errors_obj and errors_obj.spell_err:
        # Convert all words to lowercase and sanitize
        spell_words = [sanitize_word(word.lower()) for word in errors_obj.spell_err]
        # Remove any empty strings resulted from sanitization
        spell_words = [word for word in spell_words if word]
    else:
        spell_words = []

    if not spell_words:
        st.info("No spelling errors to practice.")
        return

    # If more than 10 words, randomly select 10
    max_tasks = 10
    if len(spell_words) > max_tasks:
        spell_words = random.sample(spell_words, max_tasks)

    # Function to generate scramble task HTML and JavaScript
    def generate_scramble_task(word, index):
        scrambled = scramble_word(word)
        container_id = f"scramble_container_{index}"
        drag_container_id = f"drag-container-{index}"
        drop_container_id = f"drop-container-{index}"
        result_id = f"result_{index}"
        check_button_id = f"check-btn-{index}"
        reset_button_id = f"reset-btn-{index}"
        correct_answer_js = json.dumps(word)  # Ensure proper JSON formatting

        # Generate draggable divs
        draggable_html = ''.join([f'<div draggable="true" class="draggable">{letter}</div>' for letter in scrambled])

        # HTML and JavaScript for the scramble task
        task_html = f"""
        <div class="container" id="{container_id}">
            <h4>Arrange the letters to form the correct word:</h4>
            <div id="{drag_container_id}">
                {draggable_html}
            </div>
            <div id="{drop_container_id}"></div>
            <div class="button-container">
                <button id="{check_button_id}">Check</button>
                <button id="{reset_button_id}">Reset</button>
            </div>
            <p id="{result_id}"></p>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', () => {{
                const draggables = document.querySelectorAll('.draggable');
                const dropContainer = document.getElementById('{drop_container_id}');
                const result = document.getElementById('{result_id}');
                const dragContainer = document.getElementById('{drag_container_id}');
                const checkButton = document.getElementById('{check_button_id}');
                const resetButton = document.getElementById('{reset_button_id}');
                const correctAnswer = {correct_answer_js};

                draggables.forEach(draggable => {{
                    draggable.addEventListener('dragstart', () => {{
                        draggable.classList.add('dragging');
                    }});

                    draggable.addEventListener('dragend', () => {{
                        draggable.classList.remove('dragging');
                    }});
                }});

                dropContainer.addEventListener('dragover', (e) => {{
                    e.preventDefault();
                    const afterElement = getDragAfterElement(dropContainer, e.clientX);
                    const draggable = document.querySelector('.dragging');
                    if (draggable) {{
                        if (afterElement == null) {{
                            dropContainer.appendChild(draggable);
                        }} else {{
                            dropContainer.insertBefore(draggable, afterElement);
                        }}
                    }}
                }});

                function getDragAfterElement(container, x) {{
                    const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];

                    return draggableElements.reduce((closest, child) => {{
                        const box = child.getBoundingClientRect();
                        const offset = x - box.left - box.width / 2;
                        if (offset < 0 && offset > closest.offset) {{
                            return {{ offset: offset, element: child }};
                        }} else {{
                            return closest;
                        }}
                    }}, {{ offset: Number.NEGATIVE_INFINITY }}).element;
                }}

                checkButton.addEventListener('click', () => {{
                    const answer = Array.from(dropContainer.children).map(child => child.textContent).join('');
                    if (answer.toLowerCase() === correctAnswer.toLowerCase()) {{
                        result.textContent = 'Correct!';
                        result.style.color = 'green';
                        disableInteractions();
                    }} else {{
                        result.textContent = 'Incorrect. Try again.';
                        result.style.color = 'red';
                    }}
                }});

                resetButton.addEventListener('click', () => {{
                    // Move all letters back to drag container
                    while (dropContainer.firstChild) {{
                        const draggable = dropContainer.removeChild(dropContainer.firstChild);
                        dragContainer.appendChild(draggable);
                    }}
                    // Reset result text
                    result.textContent = '';
                    result.style.color = 'black';
                }});

                function disableInteractions() {{
                    draggables.forEach(draggable => {{
                        draggable.setAttribute('draggable', 'false');
                    }});
                }}
            }});
        </script>
        <style>
            #{drag_container_id} {{
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                margin-bottom: 10px;
            }}
            .draggable {{
                padding: 8px;
                margin: 4px;
                background-color: #1E3A8A; /* Dark Blue */
                color: white;
                border-radius: 4px;
                cursor: grab;
                user-select: none;
                font-size: 16px;
                text-align: center;
                width: 30px; /* Reduced width for narrower boxes */
            }}
            #{drop_container_id} {{
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                min-height: 50px;
                border: 2px dashed #1E3A8A; /* Dark Blue */
                padding: 10px;
                border-radius: 5px;
                background-color: #f9f9f9;
            }}
        </style>
        """
        return task_html

    # Loop through each word and generate scramble tasks
    for idx, word in enumerate(spell_words, start=1):
        scramble_task_html = generate_scramble_task(word, idx)
        # Render the scramble task using Streamlit's components.html
        components.html(scramble_task_html, height=300, scrolling=True)

def navigate_to_task1_0():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T2_TAS_1'

def navigate_to_task1_1():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T2_TAS_1'

def navigate_to_task1_2():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T3_TAS_1'

def navigate_to_task1_3():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T4_TAS_1'

def navigate_to_task1_4():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T5_TAS_1'

def navigate_to_task1_5():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T6_TAS_1'

def navigate_to_task1_6():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T7_TAS_1'

def navigate_to_task1_7():
        """ Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T8_TAS_1'

def navigate_to_task1_8():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T9_TAS_1'

def navigate_to_task1_9():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L1_T10_TAS_1'


def navigate_to_task2_0():
        """ Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T1_TAS_1'

def navigate_to_task2_1():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T2_TAS_1'

def navigate_to_task2_2():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T3_TAS_1'

def navigate_to_task2_3():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T4_TAS_1'

def navigate_to_task2_4():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T5_TAS_1'

def navigate_to_task2_5():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T6_TAS_1'

def navigate_to_task2_6():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T7_TAS_1'

def navigate_to_task2_7():
        """ Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T8_TAS_1'

def navigate_to_task2_8():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T9_TAS_1'

def navigate_to_task2_9():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L2_T10_TAS_1'



def navigate_to_task3_0():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T1_TAS_1'

def navigate_to_task3_1():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T2_TAS_1'

def navigate_to_task3_2():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T3_TAS_1'

def navigate_to_task3_3():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T4_TAS_1'

def navigate_to_task3_4():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T5_TAS_1'

def navigate_to_task3_5():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T6_TAS_1'

def navigate_to_task3_6():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T7_TAS_1'

def navigate_to_task3_7():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T8_TAS_1'

def navigate_to_task3_8():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T9_TAS_1'

def navigate_to_task3_9():
        """Navigate to Task 1 page and set the current task."""
        st.session_state.page = 'task_1'
        st.session_state.task_selection = 'L3_T10_TAS_1'

def navigate_to_tt_l1_t1_1():
    st.session_state.page = 'TT_L1_T1_1' 

def navigate_to_tt_l1_t1_2():
    st.session_state.page = 'TT_L1_T1_2'
    st.session_state.tt_l1_t1_1_all_correct = False  

def navigate_to_tt_l1_t1_3():
    st.session_state.page = 'TT_L1_T1_3'
    st.session_state.tt_l1_t1_2_all_correct = False  

def navigate_to_tt_l1_t2_1():
    st.session_state.page = 'TT_L1_T2_1'

def navigate_to_tt_l1_t3_1():
    st.session_state.page = 'TT_L1_T3_1'

def navigate_to_tt_l1_t4_1():
    st.session_state.page = 'TT_L1_T4_1'

def navigate_to_tt_l1_t4_2(): 
    st.session_state.page = 'TT_L1_T4_2'
    st.session_state.tt_l1_t4_1_all_correct = False  

def navigate_to_tt_l1_t5_1():
    st.session_state.page = 'TT_L1_T5_1'

def navigate_to_tt_l1_t5_2():
    st.session_state.page = 'TT_L1_T5_2'
    st.session_state.tt_l1_t5_1_all_correct = False  

def navigate_to_tt_l1_t6_1():
    st.session_state.page = 'TT_L1_T6_1'

def navigate_to_tt_l1_t7_1():
    st.session_state.page = 'TT_L1_T7_1'

def navigate_to_tt_l1_t8_1():
    st.session_state.page = 'TT_L1_T8_1'


def navigate_to_tt_l2_t1_1():
    st.session_state.page = 'TT_L2_T1_1' 

def navigate_to_tt_l2_t1_2():
    st.session_state.page = 'TT_L2_T1_2'
    st.session_state.tt_l2_t1_1_all_correct = False  

def navigate_to_tt_l2_t1_3():
    st.session_state.page = 'TT_L2_T1_3'
    st.session_state.tt_l2_t1_2_all_correct = False  

def navigate_to_tt_l2_t2_1():
    st.session_state.page = 'TT_L2_T2_1'

def navigate_to_tt_l2_t3_1():
    st.session_state.page = 'TT_L2_T3_1'

def navigate_to_tt_l2_t3_2():
    st.session_state.page = 'TT_L2_T3_2'
    st.session_state.tt_l2_t3_1_all_correct = False  

def navigate_to_tt_l2_t4_1():
    st.session_state.page = 'TT_L2_T4_1'

def navigate_to_tt_l2_t5_1():
    st.session_state.page = 'TT_L2_T5_1'

def navigate_to_tt_l2_t6_1():
    st.session_state.page = 'TT_L2_T6_1'

def navigate_to_tt_l2_t7_1():
    st.session_state.page = 'TT_L2_T7_1'

def navigate_to_tt_l2_t8_1():
    st.session_state.page = 'TT_L2_T8_1'

def navigate_to_tt_l2_t8_2():
    st.session_state.page = 'TT_L2_T8_2'
    st.session_state.tt_l2_t8_1_all_correct = False  


def navigate_to_tt_l3_t1_1():
    st.session_state.page = 'TT_L3_T1_1' 

def navigate_to_tt_l3_t1_2():
    st.session_state.page = 'TT_L3_T1_2'
    st.session_state.tt_l3_t1_1_all_correct = False  

def navigate_to_tt_l3_t1_3():
    st.session_state.page = 'TT_L3_T1_3'
    st.session_state.tt_l3_t1_2_all_correct = False  

def navigate_to_tt_l3_t2_1():
    st.session_state.page = 'TT_L3_T2_1'

def navigate_to_tt_l3_t3_1():
    st.session_state.page = 'TT_L3_T3_1'

def navigate_to_tt_l3_t4_1():
    st.session_state.page = 'TT_L3_T4_1'

def navigate_to_tt_l3_t4_2():
    st.session_state.page = 'TT_L3_T4_2'
    st.session_state.tt_l3_t4_1_all_correct = False  

def navigate_to_tt_l3_t5_1():
    st.session_state.page = 'TT_L3_T5_1'

def navigate_to_tt_l3_t6_1():
    st.session_state.page = 'TT_L3_T6_1'

def navigate_to_tt_l3_t7_1():
    st.session_state.page = 'TT_L3_T7_1'

def navigate_to_tt_l3_t8_1():
    st.session_state.page = 'TT_L3_T8_1'



def back_to_tt_l1_t1_1():
        st.session_state.page = 'TT_L1_T1_1'
        st.session_state.tt_l1_t1_1_all_correct = False  

def back_to_tt_l1_t1_2():
        st.session_state.page = 'TT_L1_T1_2'
        st.session_state.tt_l1_t1_2_all_correct = False  


def back_to_tt_l1_t4_1():
        st.session_state.page = 'TT_L1_T4_1'
        st.session_state.tt_l1_t4_1_all_correct = False  


def back_to_tt_l1_t5_1():
        st.session_state.page = 'TT_L1_T5_1'
        st.session_state.tt_l1_t5_1_all_correct = False  
 
def back_to_tt_l2_t1_1():
    st.session_state.page = 'TT_L2_T1_1' 

def back_to_tt_l2_t1_2():
    st.session_state.page = 'TT_L2_T1_2'
    st.session_state.tt_l2_t1_1_all_correct = False  

def back_to_tt_l2_t3_1():
    st.session_state.page = 'TT_L2_T3_1'

def back_to_tt_l2_t8_1():
    st.session_state.page = 'TT_L2_T8_1'

def back_to_tt_l3_t1_1():
    st.session_state.page = 'TT_L3_T1_1' 

def back_to_tt_l3_t1_2():
    st.session_state.page = 'TT_L3_T1_2'
    st.session_state.tt_l3_t1_1_all_correct = False  

def back_to_tt_l3_t4_1():
    st.session_state.page = 'TT_L3_T4_1'


def set_selectbox_style(element_index, color, padding):
    js_code = f"""
    <script>
    var elements = window.parent.document.querySelectorAll('div[data-baseweb="select"]');
    if (elements.length > {element_index}) {{
        elements[{element_index}].style.backgroundColor = '{color}';
        elements[{element_index}].style.padding = '{padding}';
    }}
    </script>
    """
    components.html(js_code, height=0, width=0)


def navigate_to_practice(tutorial_number: str):
    st.session_state.page = 'practice_page'
    st.session_state.task_selection = tutorial_number

def navigate_to_practice_TT_L1_T1_3(): 
    st.session_state["previous_page"] = "TT_L1_T1_3"
    st.session_state.selected_tutorial = 'TT_L1_T1_3'
    st.session_state.page = 'practice_page'

def navigate_to_practice_TT_L1_T1_2(): 
    st.session_state["previous_page"] = "TT_L1_T1_2"
    st.session_state.selected_tutorial = 'TT_L1_T1_2'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L1_T2_1(): 
    st.session_state["previous_page"] = "TT_L1_T2_1"
    st.session_state.page = 'practice_page'
    st.session_state.selected_tutorial = 'TT_L1_T2_1'
    
def navigate_to_practice_TT_L1_T3_1(): 
    st.session_state["previous_page"] = "TT_L1_T3_1"
    st.session_state.selected_tutorial = 'TT_L1_T3_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L1_T4_1(): 
    st.session_state["previous_page"] = "TT_L1_T4_1"
    st.session_state.selected_tutorial = 'TT_L1_T4_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L1_T4_2(): 
    st.session_state["previous_page"] = "TT_L1_T4_2"
    st.session_state.selected_tutorial = 'TT_L1_T4_2'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L1_T5_1(): 
    st.session_state["previous_page"] = "TT_L1_T5_1"
    st.session_state.selected_tutorial = 'TT_L1_T5_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L1_T5_2(): 
    st.session_state["previous_page"] = "TT_L1_T5_2"
    st.session_state.selected_tutorial = 'TT_L1_T5_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L1_T6_1(): 
    st.session_state["previous_page"] = "TT_L1_T6_1"
    st.session_state.selected_tutorial = 'TT_L1_T6_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L1_T7_1(): 
    st.session_state["previous_page"] = "TT_L1_T7_1"
    st.session_state.selected_tutorial = 'TT_L1_T7_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L1_T8_1(): 
    st.session_state["previous_page"] = "TT_L1_T8_1"
    st.session_state.selected_tutorial = 'TT_L1_T8_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T1_2(): 
    st.session_state["previous_page"] = "TT_L2_T1_2"
    st.session_state.selected_tutorial = 'TT_L2_T1_2'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T1_3(): 
    st.session_state["previous_page"] = "TT_L2_T1_3"
    st.session_state.selected_tutorial = 'TT_L2_T1_3'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T2_1(): 
    st.session_state["previous_page"] = "TT_L2_T2_1"
    st.session_state.selected_tutorial = 'TT_L2_T2_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T3_1(): 
    st.session_state["previous_page"] = "TT_L2_T3_1"
    st.session_state.selected_tutorial = 'TT_L2_T3_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T3_2(): 
    st.session_state["previous_page"] = "TT_L2_T3_2"
    st.session_state.selected_tutorial = 'TT_L2_T3_2'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T4_1(): 
    st.session_state["previous_page"] = "TT_L2_T4_1"
    st.session_state.selected_tutorial = 'TT_L2_T4_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T5_1(): 
    st.session_state["previous_page"] = "TT_L2_T5_1"
    st.session_state.selected_tutorial = 'TT_L2_T5_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T6_1(): 
    st.session_state["previous_page"] = "TT_L2_T6_1"
    st.session_state.selected_tutorial = 'TT_L2_T6_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T7_1(): 
    st.session_state["previous_page"] = "TT_L2_T7_1"
    st.session_state.selected_tutorial = 'TT_L2_T7_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T8_1(): 
    st.session_state["previous_page"] = "TT_L2_T8_1"
    st.session_state.selected_tutorial = 'TT_L2_T8_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L2_T8_2(): 
    st.session_state["previous_page"] = "TT_L2_T8_2"
    st.session_state.selected_tutorial = 'TT_L2_T8_2'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T1_2(): 
    st.session_state["previous_page"] = "TT_L3_T1_2"
    st.session_state.selected_tutorial = 'TT_L3_T1_2'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T1_3(): 
    st.session_state["previous_page"] = "TT_L3_T1_3"
    st.session_state.selected_tutorial = 'TT_L3_T1_3'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T2_1(): 
    st.session_state["previous_page"] = "TT_L3_T2_1"
    st.session_state.selected_tutorial = 'TT_L3_T2_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T3_1(): 
    st.session_state["previous_page"] = "TT_L3_T3_1"
    st.session_state.selected_tutorial = 'TT_L3_T3_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T4_1(): 
    st.session_state["previous_page"] = "TT_L3_T4_1"
    st.session_state.selected_tutorial = 'TT_L3_T4_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T4_2(): 
    st.session_state["previous_page"] = "TT_L3_T4_2"
    st.session_state.selected_tutorial = 'TT_L3_T4_2'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T5_1(): 
    st.session_state["previous_page"] = "TT_L3_T5_1"
    st.session_state.selected_tutorial = 'TT_L3_T5_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T6_1(): 
    st.session_state["previous_page"] = "TT_L3_T6_1"
    st.session_state.selected_tutorial = 'TT_L3_T6_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T7_1(): 
    st.session_state["previous_page"] = "TT_L3_T7_1"
    st.session_state.selected_tutorial = 'TT_L3_T7_1'
    st.session_state.page = 'practice_page'
def navigate_to_practice_TT_L3_T8_1(): 
    st.session_state["previous_page"] = "TT_L3_T8_1"
    st.session_state.selected_tutorial = 'TT_L3_T8_1'
    st.session_state.page = 'practice_page'


def TT_L1_T1_1():
    st.title("TT_L1_T1_1: Introduction")

    # 1. Initialize session state for timing
    if "tt_l1_t1_1_start_time" not in st.session_state:
        st.session_state.tt_l1_t1_1_start_time = datetime.datetime.now()

    add_css()

    # Existing content for TT_L1_T1_1()
    st.markdown("""
    <div class="rule-frame">
        <h2>📚 Understanding Parts of Speech</h2>
        <p>Use the dropdown lists below to explore different parts of speech.</p>
    </div>
    """, unsafe_allow_html=True)

    # Part of Speech Selection
    col1, col2, col3, col4, col5 = st.columns(5)

    with col1:
        selected_determiner = st.selectbox('Determiner', ['a', 'the', 'some', 'any'], key='selectbox1')
    with col2:
        selected_noun = st.selectbox('Noun', ['car', 'dog', 'house', 'book'], key='selectbox2')
    with col3:
        selected_verb = st.selectbox('Verb', ['run', 'jump', 'swim', 'read'], key='selectbox3')
    with col4:
        selected_adjective = st.selectbox('Adjective', ['red', 'big', 'quick', 'blue'], key='selectbox4')
    with col5:
        selected_adverb = st.selectbox('Adverb', ['quickly', 'silently', 'well', 'badly'], key='selectbox5')

    # Understanding Phrases Section with updated yellow color
    st.markdown("""
    <div class="rule-frame" style="margin-top: 20px;">
        <h2>📚 Understanding Noun Phrases and Verb Phrases</h2>
        <p>A <span style="background-color: rgba(255, 255, 0, 0.5);">noun phrase</span> (yellow) is a group of words that functions as a noun in a sentence. It typically includes a noun and its modifiers.</p>
        <p>A <span style="background-color: rgba(255, 0, 0, 0.5);">verb phrase</span> (red) consists of a verb and any accompanying words, such as auxiliaries, complements, or modifiers.</p>
        <div style="padding: 10px;">
            <h3> Noun Phrases</h3>
            <div class="sentence-container">
                <span class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="det">a</span> 
                    <span class="noun">car</span>
                </span>
            </div>
            <div class="sentence-container">
                <span class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="det">the</span> 
                    <span class="adjective">red</span> 
                    <span class="noun">house</span>
                </span>
            </div>
        </div>
        <div style="padding: 10px;">
            <h3> Verb Phrases</h3>
            <div class="sentence-container">
                <span class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="verb">run</span>
                </span>
            </div>
            <div class="sentence-container">
                <span class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="verb">is running</span>
                </span>
            </div>
            <div class="sentence-container">
                <span class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="verb">run</span> 
                    <span class="adverb">quickly</span>
                </span>
            </div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section inside Green Frame with updated yellow color
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div class="sentence-container">
            <div class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                <span class="det">The</span> 
                <span class="noun">manager</span>
            </div>
            <div class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                <span class="verb">is reviewing</span>
            </div>
            <div class="prepositional-phrase">
                <span class="det">the</span> 
                <span class="noun">report.</span>
            </div>
        </div>
        <div class="sentence-container">
            <div class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                <span class="det">The</span> 
                <span class="noun">students</span>
            </div>
            <div class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                <span class="verb">are studying</span>
            </div>
            <div class="prepositional-phrase">
                <span class="prep">for</span> 
                <span class="det">the</span> 
                <span class="noun">exam.</span>
            </div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section with Drag and Drop (Kept as is)
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice</h2>
        <p>Practice combining noun and verb phrases by dragging and dropping them into the correct order to form sentences related to work and studies.</p>
    </div>
    """, unsafe_allow_html=True)

    # Drag-and-Drop Interface
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .draggable {
            padding: 10px;
            margin: 5px;
            background-color: rgba(255, 255, 0, 0.5); /* Less bright yellow for noun phrases */
            color: black;
            border-radius: 5px;
            cursor: grab;
        }
        .verb-phrase {
            background-color: rgba(255, 0, 0, 0.5);  /* Red for verb phrases */
            padding: 10px;
            margin: 5px;
            border-radius: 5px;
            cursor: grab;
        }
        .drop-container {
            display: flex;
            justify-content: center;
            min-height: 50px;
            border: 2px dashed #ccc; /* Neutral border color */
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px; /* Increased margin-top for better spacing */
        }
        .button-container button {
            padding: 8px 15px;
            background-color: white;
            color: #333;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            margin: 0 10px; /* Added margin between buttons */
            min-width: 100px; /* Ensured buttons have minimum width */
        }
    </style>
    """

    # Updated Drag-and-Drop JS without the "Next" button and with page reload on correct answers
    drag_and_drop_js = """
    <div class="container">
        <h4>Arrange the phrases to form the correct sentences</h4>
        <div class="drag-container">
            <div draggable="true" class="draggable">the project.</div>
            <div draggable="true" class="draggable">The manager</div>
            <div draggable="true" class="verb-phrase">is giving</div>
            <div draggable="true" class="draggable">The professor</div>
            <div draggable="true" class="verb-phrase">is working on</div>
            <div draggable="true" class="draggable">the report.</div>
            <div draggable="true" class="draggable">a lecture.</div>
            <div draggable="true" class="verb-phrase">is reviewing</div>
            <div draggable="true" class="draggable">The team</div>
        </div>
        <div id="drop-container-1" class="drop-container"></div>
        <div id="drop-container-2" class="drop-container"></div>
        <div id="drop-container-3" class="drop-container"></div>
        <div class="button-container">
            <button id="check-button">Check Answers</button>
            <!-- Removed the JavaScript "Next" button -->
        </div>
        <p id="result"></p>
    </div>

    <script>
        const draggables = document.querySelectorAll('.draggable, .verb-phrase');
        const dragContainer = document.querySelector('.drag-container');
        const dropContainers = document.querySelectorAll('.drop-container');
        const result = document.getElementById('result');
        const checkButton = document.getElementById('check-button');

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggable.classList.add('dragging');
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
            });
        });

        const containers = [dragContainer, ...dropContainers];

        containers.forEach(container => {
            container.addEventListener('dragover', (e) => {
                e.preventDefault();
                const afterElement = getDragAfterElement(container, e.clientX);
                const draggable = document.querySelector('.dragging');
                if (draggable) {  // Ensure a draggable element is being dragged
                    if (afterElement == null) {
                        container.appendChild(draggable);
                    } else {
                        container.insertBefore(draggable, afterElement);
                    }
                }
            });
        });

        function getDragAfterElement(container, x) {
            const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging), .verb-phrase:not(.dragging)')];

            return draggableElements.reduce((closest, child) => {
                const box = child.getBoundingClientRect();
                const offset = x - box.left - box.width / 2;
                if (offset < 0 && offset > closest.offset) {
                    return { offset: offset, element: child };
                } else {
                    return closest;
                }
            }, { offset: Number.NEGATIVE_INFINITY }).element;
        }

        checkButton.addEventListener('click', () => {
            const correctAnswers = [
                "The manager is reviewing the report.",
                "The professor is giving a lecture.",
                "The team is working on the project."
            ];

            let userAnswers = [];
            dropContainers.forEach((container) => {
                let sentence = Array.from(container.children)
                    .map((child) => child.textContent.trim())
                    .join(" ")
                    .trim();
                if (sentence && !sentence.endsWith(".")) {
                    sentence += ".";
                }
                userAnswers.push(sentence);
            });

            let allCorrect = userAnswers.every((answer, index) => answer === correctAnswers[index]);

            if (allCorrect) {
                result.textContent = "All answers are correct! Well done!";
                result.style.color = "green";
                // Append query parameter to URL and reload the page to trigger Streamlit rerun
                const currentUrl = new URL(window.location.href);
                if (currentUrl.searchParams.get('tt_l1_t1_1_correct') !== 'true') {
                    currentUrl.searchParams.set('tt_l1_t1_1_correct', 'true');
                    window.history.replaceState({}, '', currentUrl);
                    window.location.reload();  // Reload the page
                }
            } else {
                result.textContent = "Some answers are incorrect. Please try again.";
                result.style.color = "red";
                // Remove the correctness parameter if previously set
                const currentUrl = new URL(window.location.href);
                if (currentUrl.searchParams.has('tt_l1_t1_1_correct')) {
                    currentUrl.searchParams.delete('tt_l1_t1_1_correct');
                    window.history.replaceState({}, '', currentUrl);
                }
                // No reload needed; allow user to try again
            }
        });
    </script>
    """

    # Combine CSS and JS
    combined_html = drag_and_drop_css + drag_and_drop_js

    # Embed the HTML (drag-and-drop interface)
    components.html(combined_html, height=500, scrolling=True)

    # 2. "Next" button to record data and navigate
    if st.button("Next"):
        # a) Compute total time
        end_time = datetime.datetime.now() 
        start_time = st.session_state.tt_l1_t1_1_start_time
        time_diff = end_time - start_time

        # Convert timedelta to HH:MM:SS
        total_seconds = int(time_diff.total_seconds())
        hours, remainder = divmod(total_seconds, 3600)
        minutes, seconds = divmod(remainder, 60)
        time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"

        # Convert to a time object
        try:
            h, m, s = map(int, time_spent_str.split(':'))
            time_obj = datetime.time(h, m, s)
        except ValueError as e:
            st.error(f"Error parsing time: {e}")
            time_obj = None  # fallback

        # b) Prepare errors dictionary (no correctness check here)
        errors_info = {"error_count": 0}

        # c) Insert into tasks_done
        try:
            student_id = st.session_state.user_info.id
            task_id = "TT_L1_T1_1"
            record_task_done(
                student_id=student_id,
                task_id=task_id,
                date=end_time,        # current datetime
                time_spent=time_obj,
                errors_dict=errors_info
            )
        except Exception as e:
            st.error(f"Error recording task: {e}")
            return

        # d) Reset session state or do any cleanup
        st.session_state.tt_l1_t1_1_start_time = None

        # e) Navigate to next page
        navigate_to_tt_l1_t1_2()
        st.rerun()

def record_task_done(student_id, task_id, date, time_spent, errors_dict=None):
    """
    Insert a record into the tasks_done table.
    
    :param student_id: ID of the student completing the task.
    :param task_id: ID of the task completed.
    :param date: Datetime when the task was completed.
    :param time_spent: Time object representing duration spent on the task.
    :param errors_dict: Dictionary containing error information.
    """
    task_done_entry = TasksDone(
        student_id=student_id,
        task_id=task_id,
        date=date,
        time=time_spent,
        errors=errors_dict or {}
    )
    session.add(task_done_entry)
    session.commit()
    st.success(f"Task {task_id} recorded successfully.")

def complete_task_and_record_data(page_prefix, task_id, next_page_func):
    # 1) Calculate how long user spent on this page
    end_time = datetime.datetime.now()
    start_key = f"{page_prefix}_start_time"
    error_key = f"{page_prefix}_error_count"
    
    if start_key not in st.session_state:
        st.warning("No start time found in session state!")
        return
    start_time = st.session_state[start_key]

    # Time difference
    time_diff = end_time - start_time
    total_seconds = int(time_diff.total_seconds())
    hours, remainder = divmod(total_seconds, 3600)
    minutes, seconds = divmod(remainder, 60)
    time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"

    # Convert to time object
    try:
        h, m, s = map(int, time_spent_str.split(':'))
        time_obj = datetime.time(h, m, s)
    except ValueError:
        time_obj = None

    # 2) Prepare errors
    error_count = st.session_state.get(error_key, 0)
    errors_info = {"error_count": error_count}

    # 3) Insert into tasks_done
    try:
        student_id = st.session_state.user_info.id
        record_task_done(
            student_id=student_id,
            task_id=task_id,
            date=end_time,         # pass the date here
            time_spent=time_obj,
            errors_dict=errors_info
        )
        st.success(f"Task {task_id} recorded successfully.")
    except Exception as e:
        st.error(f"Error recording task: {e}")
        return

    # 4) Reset states if needed
    st.session_state[start_key] = None
    st.session_state[error_key] = 0

    # 5) Finally, navigate
    next_page_func()


def TT_L1_T1_2():
    """
    This page teaches Present Simple vs. Present Continuous.
    Records how long the student spends here and how many errors they make
    before getting all correct answers.
    """

    # 1) Initialize session state
    if "tt_l1_t1_2_start_time" not in st.session_state:
        st.session_state.tt_l1_t1_2_start_time = datetime.datetime.now()
    
    if "tt_l1_t1_2_error_count" not in st.session_state:
        st.session_state.tt_l1_t1_2_error_count = 0

    if "tt_l1_t1_2_all_correct" not in st.session_state:
        st.session_state.tt_l1_t1_2_all_correct = False

    # 2) Page Content
    st.title("TT_L1_T1_2: Present Simple vs Present Continuous")
    add_css()  # Custom CSS if you have it

    # ---- Rules Section ----
    st.markdown("""
    <div class="rule-frame">
        <h2>📒 Rules </h2>
        <p><strong>Present Simple:</strong> The Present Simple tense is used for habitual actions, 
        general truths, or facts. It is formed using the base form of the verb for all subjects 
        except the third-person singular (he, she, it), which adds an "s" or "es" to the verb.</p>
        <p><em>Key Words:</em> always, usually, never, every day</p>
        <p><strong>Example:</strong> <span class="subject">The manager</span> 
        <span class="verb">reviews</span> reports every day.</p>
        <p><strong>Present Continuous:</strong> The Present Continuous tense is used 
        for actions happening right now or for temporary situations. 
        It is formed using the present form of "to be" (am/is/are) + the "-ing" form of the verb.</p>
        <p><em>Key Words:</em> now, at the moment, currently, right now</p>
        <p><strong>Example:</strong> <span class="subject">The manager</span> 
        <span class="verb">is reviewing</span> a report right now.</p>
    </div>
    """, unsafe_allow_html=True)

    # ---- Examples Section ----
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <h3>Example 1: Present Simple</h3>
        <div class="sentence-container" style="display: flex; gap: 5px; flex-wrap: nowrap; align-items: flex-end;">
            <span style="text-decoration: underline black; font-weight: bold; background-color: rgba(255, 255, 0, 0.5); padding: 2px 5px; display: inline-block;">
                The employee
            </span>
            <span style="text-decoration: underline blue; font-weight: bold; color:blue; background-color: rgba(255, 0, 0, 0.5); padding: 2px 5px; display: inline-block;">
                works
            </span>
            <span style="padding: 2px 5px; display: inline-block; background-color: white;">
                on projects every day.
            </span>
        </div>
        <h3>Example 2: Present Continuous</h3>
        <div class="sentence-container" style="display: flex; gap: 5px; flex-wrap: nowrap; align-items: flex-end;">
            <span style="text-decoration: underline black; font-weight: bold; background-color: rgba(255, 255, 0, 0.5); padding: 2px 5px; display: inline-block;">
                The employee
            </span>
            <span style="text-decoration: underline blue; font-weight: bold; color:blue; background-color: rgba(255, 0, 0, 0.5); padding: 2px 5px; display: inline-block;">
                is working
            </span>
            <span style="padding: 2px 5px; display: inline-block; background-color: white;">
                on a new project right now.
            </span>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # ---- Practice Section ----
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice</h2>
        <p>Complete the following sentences by selecting the correct verb form. Be careful with the tenses!</p>
    </div>
    """, unsafe_allow_html=True)

    # 3) Define practice items
    sentences = [
        {
            'sentence': "She _____ (work) on the new project every day.",
            'options': ['works', 'is working', 'work', 'are working'],
            'correct': 'works',
            'tense': 'Present Simple'
        },
        {
            'sentence': "They _____ (study) for their exams right now.",
            'options': ['study', 'are studying', 'studies', 'is studying'],
            'correct': 'are studying',
            'tense': 'Present Continuous'
        },
        {
            'sentence': "He _____ (attend) meetings every Monday.",
            'options': ['attend', 'attends', 'is attending', 'are attending'],
            'correct': 'attends',
            'tense': 'Present Simple'
        },
        {
            'sentence': "We _____ (prepare) for the presentation at the moment.",
            'options': ['prepare', 'prepares', 'are preparing', 'is preparing'],
            'correct': 'are preparing',
            'tense': 'Present Continuous'
        },
        {
            'sentence': "The company _____ (offer) great benefits.",
            'options': ['offers', 'is offering', 'offer', 'are offering'],
            'correct': 'offers',
            'tense': 'Present Simple'
        }
    ]

    # 4) Collect user answers via radio buttons
    user_answers = []
    for idx, item in enumerate(sentences):
        st.markdown(f"**{item['sentence']}**")
        user_choice = st.radio(
            "",
            options=item['options'],
            index=None,  # No default selection
            key=f"tt_l1_t1_2_sentence_{idx}"
        )
        user_answers.append(user_choice)

    # 7. Handle "Check" Button
    if st.button("Check"):
        score = sum(
            1 for i, ans in enumerate(user_answers)
            if ans == sentences[i]["correct"]
        )
        st.markdown(f"### Your Score: {score}/{len(sentences)}")

        if score == len(sentences):
            st.success("Great job!")
            st.session_state.tt_l1_t1_2_all_correct = True
        else:
            st.error("You made some mistakes.")
            st.session_state.tt_l1_t1_2_error_count += 1

    # Handle "Next" if all correct
    if st.session_state.tt_l1_t1_2_all_correct:
        if st.button("Next", key='tt_l1_t1_2_next'):
            complete_task_and_record_data(
                page_prefix="tt_l1_t1_2",
                task_id="TT_L1_T1_2",
                next_page_func=navigate_to_tt_l1_t1_3
            )

    # "Back" button
    if st.button("Back"):
        back_to_tt_l1_t1_1()
        st.rerun()



def TT_L1_T1_3():
    
    st.title("TT_L1_T1_3: Present Simple vs Present Continuous")

    tutorial_number = "TT_L1_T1_3"

    # 1) Load questions (if needed)
    questions = load_questions([tutorial_number])
    if not questions:
        st.error("No questions to display for this tutorial.")
        return

    add_css()

    # 2) Initialize session states
    #    present_simple_correct and present_continuous_correct track
    #    if user has answered each section correctly
    if "tt_l1_t1_3_start_time" not in st.session_state:
        st.session_state.tt_l1_t1_3_start_time = datetime.datetime.now()
    if "tt_l1_t1_3_error_count" not in st.session_state:
        st.session_state.tt_l1_t1_3_error_count = 0
    if "present_simple_correct" not in st.session_state:
        st.session_state.present_simple_correct = False
    if "present_continuous_correct" not in st.session_state:
        st.session_state.present_continuous_correct = False

    # 3) Rule Section
    st.markdown("""
       <div id="rule_section" class="rule-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📒 Rule</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details id="rule_details">
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                    <p><strong>Present Simple:</strong> Used for habitual actions or general truths.</p>
                    <p><em>Keywords:</em> usually, always, never, every day, etc.</p>
                    <p><strong>Example:</strong> <span class="noun-phrase"><span class="subject">He</span></span> 
                    <span class="verb-phrase"><span class="verb">usually checks</span></span> <span class="object">emails</span> 
                    <span class="adverbial-phrase">in the morning</span>.</p>
                    <p><strong>Present Continuous:</strong> Used for actions happening right now or temporary situations.</p>
                    <p><em>Keywords:</em> now, right now, at the moment, currently.</p>
                    <p><strong>Example:</strong> <span class="noun-phrase"><span class="subject">He</span></span> 
                    <span class="verb-phrase"><span class="verb">is checking</span></span> <span class="object">emails</span> 
                    <span class="adverbial-phrase">right now</span>.</p>
                </details>
            </div>
        </div>
    """, unsafe_allow_html=True)

    # 4) Examples Section
    st.markdown("""
       <div class="example-frame">
        <h2>📝 Examples</h2>
        <h3>Example 1: Present Simple</h3>
        <div class="sentence-container" style="display: flex; gap: 5px; flex-wrap: nowrap; align-items: flex-end;">
            <span style="text-decoration: underline black; font-weight: bold; 
                         background-color: rgba(255, 255, 0, 0.5); 
                         padding: 2px 5px; 
                         display: inline-block;">
                The manager
            </span>
            <span style=" background-color: lightblue; padding: 2px 5px;">usually</span>
            <span style="text-decoration: underline blue; font-weight: bold; color:blue; 
                         background-color: rgba(255, 0, 0, 0.5); 
                         padding: 2px 5px; 
                         display: inline-block;">
                reviews
            </span>
            <span style="padding: 2px 5px; display: inline-block; background-color: white;">
                reports.
            </span>
        </div>
        <h3>Example 2: Present Continuous</h3>
        <div class="sentence-container" style="display: flex; gap: 5px; 
                                               flex-wrap: nowrap; align-items: flex-end;">
            <span style="text-decoration: underline black; font-weight: bold; 
                         background-color: rgba(255, 255, 0, 0.5); 
                         padding: 2px 5px; 
                         display: inline-block;">
                She
            </span>
            <span style=" background-color: lightblue; padding: 2px 5px;">
                always
            </span>
            <span style="text-decoration: underline blue; font-weight: bold; color:blue; 
                         background-color: rgba(255, 0, 0, 0.5); 
                         padding: 2px 5px; 
                         display: inline-block;">
                attends
            </span>
            <span style="padding: 2px 5px; display: inline-block; background-color: white;">
                meetings on Mondays.
            </span>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # 5) Practice Present Simple
    st.markdown("""
    <div class="practice-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">
            🎯 Practice: Present Simple
        </h2>
        <p>Select the correct verb form and adverb to complete the sentences.</p>
    </div>
    """, unsafe_allow_html=True)

    subjects = ['The manager', 'She', 'He', 'They', 'We']
    verbs_present_simple = ['reviews', 'attends', 'works', 'studies', 'review', 'attend']
    adverbs_simple = ['usually', 'always', 'never', 'every day', 'currently', 'now']

    col1_simple, col2_simple, col3_simple = st.columns(3)

    with col1_simple:
        subject_simple = st.selectbox(
            'Subject (Present Simple)', 
            subjects, 
            key='subject_simple'
        )
    with col2_simple:
        adverb_simple = st.selectbox(
            'Adverb (Present Simple)', 
            adverbs_simple, 
            key='adverb_simple'
        )
    with col3_simple:
        verb_simple = st.selectbox(
            'Verb (Present Simple)', 
            verbs_present_simple, 
            key='verb_simple'
        )

    simple_sentence = f"{subject_simple} {adverb_simple} {verb_simple}."
    st.markdown(f"""
    ### Your Sentence: Present Simple
    <div class="sentence-container">{simple_sentence}</div>
    """, unsafe_allow_html=True)

    # Button to check Present Simple correctness
    if st.button('Check Present Simple Sentence'):
        correct_simple = False

        if subject_simple in ['He', 'She', 'The manager']:
            if verb_simple.endswith('s') and adverb_simple in ['usually', 'always', 'never', 'every day']:
                correct_simple = True
        elif subject_simple in ['They', 'We']:
            if not verb_simple.endswith('s') and adverb_simple in ['usually', 'always', 'never', 'every day']:
                correct_simple = True

        if correct_simple:
            st.success("Present Simple: Correct!")
            st.session_state.present_simple_correct = True
        else:
            st.error("Present Simple: Incorrect. Check subject-verb agreement and tense usage.")
            st.session_state.present_simple_correct = False
            st.session_state.tt_l1_t1_3_error_count += 1

    # 6) Practice Present Continuous
    st.markdown("""
    <div class="example-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">
            📝 Examples: Present Continuous
        </h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <p>Here are some examples of sentences using Present Continuous:</p>
                <div class="sentence-container">
                    <span class="noun-phrase"><span class="subject">The team</span></span>
                    <span class="verb-phrase"><span class="verb">is working</span></span>
                    <span style="padding: 2px 5px; display: inline-block; background-color: white;">
                        on the project
                    </span>
                    <span style="padding: 2px 5px; display: inline-block; background-color: lightblue;">
                        right now.
                    </span>
                </div>
                <div class="sentence-container">
                    <span class="noun-phrase"><span class="subject">He</span></span>
                    <span class="verb-phrase"><span class="verb">is studying</span></span>
                    <span style="padding: 2px 5px; display: inline-block; background-color: white;">
                        for the exam
                    </span>
                    <span style="padding: 2px 5px; display: inline-block; background-color: lightblue;">
                        at the moment.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    st.markdown("""
    <div class="practice-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">
            🎯 Practice: Present Continuous
        </h2>
        <p>Select the correct verb form and adverb to complete the sentences.</p>
    </div>
    """, unsafe_allow_html=True)

    verbs_present_continuous = [
        'is working', 'are working', 'is studying', 'are studying', 
        'working', 'studying'
    ]
    adverbs_continuous = [
        'now', 'right now', 'at the moment', 'currently', 'usually', 'every day'
    ]

    col1_cont, col2_cont, col3_cont = st.columns(3)
    with col1_cont:
        subject_continuous = st.selectbox(
            'Subject (Present Continuous)', 
            subjects, 
            key='subject_continuous'
        )
    with col2_cont:
        verb_continuous = st.selectbox(
            'Verb (Present Continuous)', 
            verbs_present_continuous, 
            key='verb_continuous'
        )
    with col3_cont:
        adverb_continuous = st.selectbox(
            'Adverb (Present Continuous)', 
            adverbs_continuous, 
            key='adverb_continuous'
        )

    continuous_sentence = f"{subject_continuous} {verb_continuous} {adverb_continuous}."
    st.markdown(f"""
    ### Your Sentence: Present Continuous
    <div class="sentence-container">{continuous_sentence}</div>
    """, unsafe_allow_html=True)

    # Button to check Present Continuous correctness
    if st.button('Check Present Continuous Sentence'):
        correct_cont = False
        if subject_continuous in ['He', 'She', 'The manager']:
            if verb_continuous.startswith('is ') and verb_continuous.endswith('ing') \
               and adverb_continuous in ['now', 'right now', 'at the moment', 'currently']:
                correct_cont = True
        elif subject_continuous in ['They', 'We']:
            if verb_continuous.startswith('are ') and verb_continuous.endswith('ing') \
               and adverb_continuous in ['now', 'right now', 'at the moment', 'currently']:
                correct_cont = True

        if correct_cont:
            st.success("Present Continuous: Correct!")
            st.session_state.present_continuous_correct = True
        else:
            st.error("Present Continuous: Incorrect. Check subject-verb agreement and tense usage.")
            st.session_state.present_continuous_correct = False
            st.session_state.tt_l1_t1_3_error_count += 1

    # 7) Show "Practice" and "Next" if BOTH are correct
    if st.session_state.get('present_simple_correct') and st.session_state.get('present_continuous_correct'):
        st.markdown('<div class="button-container"></div>', unsafe_allow_html=True)
        col_btn1, col_btn2 = st.columns(2)

        with col_btn1:
            if st.button("Practice", key='tt_l1_t1_3_practice'):
                navigate_to_practice_TT_L1_T1_3()
                st.rerun()

        with col_btn2:
            if st.button("Next", key='tt_l1_t1_3_next'):
                # Use your helper function to record data, e.g.:
                complete_task_and_record_data(
                    page_prefix="tt_l1_t1_3",
                    task_id="TT_L1_T1_3",
                    next_page_func=navigate_to_task1_1
                )



    # 8) "Back" button
    if st.button("Back", key="back_to_tt_l1_t1_2_tt_l1_t1_3"):
        back_to_tt_l1_t1_2()
        st.rerun()



def set_selectbox_style(element_index, color, padding):
    js_code = f"""
    <script>
    var elements = window.parent.document.querySelectorAll('div[data-baseweb="select"]');
    if (elements.length > {element_index}) {{
        elements[{element_index}].style.backgroundColor = '{color}';
        elements[{element_index}].style.padding = '{padding}';
    }}
    </script>
    """
    components.html(js_code, height=0, width=0)

def TT_L1_T2_1():
    st.title("Quantifiers in Noun Phrases")

    add_css()

    # Initialize session states
    if "rule_expanded" not in st.session_state:
        st.session_state.rule_expanded = False

    if "tt_l1_t2_1_start_time" not in st.session_state:
        st.session_state.tt_l1_t2_1_start_time = datetime.datetime.now()
    
    if "tt_l1_t2_1_error_count" not in st.session_state:
        st.session_state.tt_l1_t2_1_error_count = 0
    

    if 'tt_l1_t2_1_all_correct' not in st.session_state:
        st.session_state.tt_l1_t2_1_all_correct = False

    # Rule Section with Dropdown inside Yellow Frame
    st.markdown("""
    <div id="rule_section">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📒 Rules</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details id="rule_details" {open}>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>In this lesson, we explore quantifiers in noun phrases. Quantifiers are words that indicate the quantity of a noun. They can be used with both countable and uncountable nouns.</p>
                <p><strong>Countable Nouns:</strong> These are nouns that can be counted. They have both singular and plural forms. For example, "book/books", "car/cars", "student/students", "cat/cats", "idea/ideas".</p>
                <p><strong>Uncountable Nouns:</strong> These are nouns that cannot be counted. They do not have a plural form. For example, "water", "sugar", "information", "money", "time", "equipment", "knowledge".</p>
            </details>
        </div>
    </div>
    """.replace("{open}", "open" if st.session_state.rule_expanded else ""), unsafe_allow_html=True)

    col1, col2 = st.columns(2)
    col3, col4 = st.columns(2)

    with col1:
        quantifier_countable = st.selectbox("Quantifier (Countable)", ["many", "a few", "several", "few"], key="quantifier_countable")
    with col2:
        countable_noun = st.selectbox("Countable Noun", ["books", "cars", "cats", "dogs", "people", "students", "ideas"], key="countable_noun")

    with col3:
        quantifier_uncountable = st.selectbox("Quantifier (Uncountable)", ["some", "a lot of", "much", "little", "a little"], key="quantifier_uncountable")
    with col4:
        uncountable_noun = st.selectbox("Uncountable Noun", ["water", "sugar", "rice", "milk", "money", "time", "information", "equipment", "knowledge"], key="uncountable_noun")

    set_selectbox_style(0, 'darkblue', '10px')
    set_selectbox_style(1, 'rgba(255, 255, 0, 0.5)', '10px')
    set_selectbox_style(2, 'darkblue', '10px')
    set_selectbox_style(3, 'rgba(255, 255, 0, 0.5)', '10px')

    # Display constructed noun phrases
    st.markdown("""
    ### Your Countable Noun Phrase:
    <div class="sentence-container">
        <span class="noun-phrase">
            <span class="det">{}</span> 
            <span class="noun">{}</span>
        </span>
    </div>
    """.format(quantifier_countable, countable_noun), unsafe_allow_html=True)

    st.markdown("""
    ### Your Uncountable Noun Phrase:
    <div class="sentence-container">
        <span class="noun-phrase">
            <span class="det">{}</span> 
            <span class="noun">{}</span>
        </span>
    </div>
    """.format(quantifier_uncountable, uncountable_noun), unsafe_allow_html=True)

    st.markdown("""
        <div class="example-frame">
            <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📝 Examples</h2>
            <div style="padding: 10px; border-radius: 5px;">
                <details>
                    <summary style="font-weight: bold;">Expand to see examples</summary>
                    <p>Here are some examples of noun phrases with different quantifiers:</p>
                    <div class="sentence-container">
                        <span class="sentence-white">
                            Only <span class="det">a few</span> <span class="noun">students</span> are waiting in the lecture hall.
                        </span>
                    </div>
                    <div class="sentence-container">
                        <span class="sentence-white">
                            Dewey's theories are so complex that not <span class="det">many</span> <span class="noun">people</span> understand them.
                        </span>
                    </div>
                    <div class="sentence-container">
                        <span class="sentence-white">
                            I have <span class="det">a little</span> <span class="noun">money</span>, but I think it's enough for the movie at least.
                        </span>
                    </div>
                    <div class="sentence-container">
                        <span class="sentence-white">
                            We had <span class="det">little</span> <span class="noun">time</span> to prepare before we had to go.
                        </span>
                    </div>
                    <div class="sentence-container">
                        <span class="sentence-white">
                            Many universities do not have <span class="det">much</span> <span class="noun">equipment</span> for students who are deaf or hard of hearing.
                        </span>
                    </div>
                </details>
            </div>
        </div>
        """, unsafe_allow_html=True)

    # Practice Section with Drag and Drop
    st.markdown("""
    <div class="practice-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">🎯 Practice 1: Drag and Drop Task</h2>
        <p>Drag the nouns into the correct columns: Countable or Uncountable.</p>
    </div>
    """, unsafe_allow_html=True)

    # Drag-and-Drop Component
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .drag-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            margin-bottom: 10px;
        }
        .draggable {
            padding: 10px;
            margin: 5px;
            background-color: rgba(255, 255, 0, 0.5); /* Light yellow for nouns */
            color: black;
            border-radius: 5px;
            cursor: grab;
        }
        .drop-container {
            display: flex;
            justify-content: space-around;
            padding: 10px;
            border-radius: 5px;
            border: 2px dashed #64b5f6;
            background-color: #f9f9f9;
            min-height: 150px;
        }
        .drop-zone {
            flex: 1;
            margin: 0 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
            min-height: 100px;
            text-align: center;
            vertical-align: middle;
        }
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }
        .button-container button {
            flex: 1;
            margin: 0 5px;
            background-color: white;
            color: black;
            border: 2px solid #64b5f6;
            border-radius: 5px;
            padding: 10px;
        }
    </style>
    """

    drag_and_drop_js = """
    <div class="container">
            <h4>Drag and Drop Task: Separate Nouns</h4>
            <div class="drag-container">
                <div draggable="true" class="draggable">books</div>
                <div draggable="true" class="draggable">water</div>
                <div draggable="true" class="draggable">rice</div>
                <div draggable="true" class="draggable">cars</div>
                <div draggable="true" class="draggable">sugar</div>
                <div draggable="true" class="draggable">cats</div>
                <div draggable="true" class="draggable">people</div>
                <div draggable="true" class="draggable">students</div>
                <div draggable="true" class="draggable">money</div>
                <div draggable="true" class="draggable">time</div>
                <div draggable="true" class="draggable">information</div>
                <div draggable="true" class="draggable">ideas</div>
                <div draggable="true" class="draggable">knowledge</div>
                <div draggable="true" class="draggable">equipment</div>
            </div>
            <div class="drop-container">
                <div id="countable" class="drop-zone">Countable</div>
                <div id="uncountable" class="drop-zone">Uncountable</div>
            </div>
            <div class="button-container">
                <button onclick="checkAnswer()">Check</button>
            </div>
            <p id="result"></p>
        </div>

        <script>
            const draggables = document.querySelectorAll('.draggable');
            const dropZones = document.querySelectorAll('.drop-zone');
            const result = document.getElementById('result');

            draggables.forEach(draggable => {
                draggable.addEventListener('dragstart', () => {
                    draggable.classList.add('dragging');
                });

                draggable.addEventListener('dragend', () => {
                    draggable.classList.remove('dragging');
                });
            });

            dropZones.forEach(zone => {
                zone.addEventListener('dragover', (e) => {
                    e.preventDefault();
                    const afterElement = getDragAfterElement(zone, e.clientX);
                    const draggable = document.querySelector('.dragging');
                    if (afterElement == null) {
                        zone.appendChild(draggable);
                    } else {
                        zone.insertBefore(draggable, afterElement);
                    }
                });
            });

            function getDragAfterElement(zone, x) {
                const draggableElements = [...zone.querySelectorAll('.draggable:not(.dragging)')];

                return draggableElements.reduce((closest, child) => {
                    const box = child.getBoundingClientRect();
                    const offset = x - box.left - box.width / 2;
                    if (offset < 0 && offset > closest.offset) {
                        return { offset: offset, element: child };
                    } else {
                        return closest;
                    }
                }, { offset: Number.NEGATIVE_INFINITY }).element;
            }

            function checkAnswer() {
                const countableZone = document.getElementById('countable');
                const uncountableZone = document.getElementById('uncountable');

                const countableItems = ['books', 'cars', 'cats', 'people', 'students', 'ideas'];
                const uncountableItems = ['water', 'rice', 'sugar', 'money', 'time', 'information', 'knowledge', 'equipment'];

                let countableCorrect = true;
                let uncountableCorrect = true;

                Array.from(countableZone.children).forEach(child => {
                    if (!countableItems.includes(child.textContent)) {
                        countableCorrect = false;
                    }
                });

                Array.from(uncountableZone.children).forEach(child => {
                    if (!uncountableItems.includes(child.textContent)) {
                        uncountableCorrect = false;
                    }
                });

                if (countableCorrect && uncountableCorrect) {
                    result.textContent = 'Correct!';
                    result.style.color = 'green';
                    // Removed the Next button trigger as per your request
                } else {
                    result.textContent = 'Incorrect. Try again.';
                    result.style.color = 'red';
                }
            }
        </script>
    """
    components.html(drag_and_drop_css + drag_and_drop_js, height=700)

    # Practice Section: Multiple-Choice Questions
    st.markdown("""
        <div class="practice-frame">
            <h2>🎯 Practice 2: Select the Correct Quantifier</h2>
            <p>Select the appropriate quantifier to complete the sentences.</p>
        </div>
        """, unsafe_allow_html=True)

    # Questions and Answers
    questions = [
        {
            'question': 'Only ____________ students are waiting in the lecture hall.',
            'options': ['few', 'a few', 'little', 'a little'],
            'answer': 'a few'
        },
        {
            'question': 'Dewey’s theories are so complex that not _____________ people understand them.',
            'options': ['much', 'many', 'little', 'a little'],
            'answer': 'many'
        },
        {
            'question': 'I have ______________ money, but I think it is enough for the movie at least.',
            'options': ['few', 'a few', 'little', 'a little'],
            'answer': 'a little'
        },
        {
            'question': 'We had ___________ time to prepare before we had to go. I think we are not that ready.',
            'options': ['few', 'a few', 'little', 'a little'],
            'answer': 'little'
        },
        {
            'question': 'Many universities do not have _____ equipment for students who are deaf or hard of hearing.',
            'options': ['many', 'much', 'both', 'few'],
            'answer': 'much'
        }
    ]

    # Streamlit Radio Buttons without default selected and checking logic
    user_answers = []
    for idx, q in enumerate(questions):
        st.write(f"{idx + 1}. {q['question']}")
        user_answers.append(st.radio("", q['options'],index=None, key=f"mcq_{idx}"))

    if st.button("Check"):
        score = 0
        for i, answer in enumerate(user_answers):
            if answer == questions[i]["answer"]:
                score += 1

        if score == len(questions):
            st.success(f"Great job! You answered all {score} questions correctly.")
            st.session_state.tt_l1_t2_1_all_correct = True  # Correctly update session state
        else:
            st.error(f"You got {score} out of {len(questions)} correct. Try again.")
            st.session_state.tt_l1_t2_1_error_count += 1
                
    if st.session_state.tt_l1_t2_1_all_correct:
        col1, col2 = st.columns(2)
        with col1:
            # Here we call navigate_to_practice_TT_L1_T1_3
            st.button('Practice', on_click=navigate_to_practice_TT_L1_T2_1, key='tt_l1_t2_1_practice')

        with col2:
            if st.button('Next', key='tt_l1_t2_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l1_t2_1",
                task_id="TT_L1_T2_1",
                next_page_func=navigate_to_task1_2
            )

def TT_L1_T3_1():
    st.title("Prepositions of Time and Place")


    add_css()

    # Initialize session states
    if "rule_expanded" not in st.session_state:
        st.session_state.rule_expanded = False

    if "scroll_triggered" not in st.session_state:
        st.session_state.scroll_triggered = False

    if "tt_l1_t3_1_start_time" not in st.session_state:
        st.session_state.tt_l1_t3_1_start_time = datetime.datetime.now()
    
    if "tt_l1_t3_1_error_count" not in st.session_state:
        st.session_state.tt_l1_t3_1_error_count = 0
    
    if 'tt_l1_t3_1_all_correct' not in st.session_state:
        st.session_state.tt_l1_t3_1_all_correct = False


    # Rule Section with Dropdown inside a Yellow Frame
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rules</h2>
        <div>
            <details id="rule_details" {open}>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Prepositions of Time:</strong> These prepositions indicate when something happens. Common prepositions of time include:</p>
                <ul>
                    <li><strong>in</strong>: for months, years, centuries, and long periods (e.g., <em>in July</em>, <em>in 1990</em>).</li>
                    <li><strong>on</strong>: for days and dates (e.g., <em>on Monday</em>, <em>on the 5th of June</em>).</li>
                    <li><strong>at</strong>: for precise times (e.g., <em>at 7 PM</em>, <em>at noon</em>).</li>
                </ul>
                <p><strong>Prepositions of Place:</strong> These prepositions indicate the location of something. Common prepositions of place include:</p>
                <ul>
                    <li><strong>in</strong>: for enclosed spaces (e.g., <em>in the room</em>, <em>in the car</em>).</li>
                    <li><strong>on</strong>: for surfaces (e.g., <em>on the table</em>, <em>on the wall</em>).</li>
                    <li><strong>at</strong>: for specific points (e.g., <em>at the office</em>, <em>at the bus stop</em>).</li>
                </ul>
                <p>The prepositional phrases are highlighted in light purple.</p>
                <p><strong>Example:</strong></p>
                <div class="sentence-container">
                    <span class="noun-phrase">We</span> 
                    <span class="verb-phrase">will meet</span> 
                    <span class="prepositional-phrase">
                        <span class="prep">at</span> the office
                    </span>.
                </div>
            </details>
        </div>
    </div>
    """.replace("{open}", "open" if st.session_state.rule_expanded else ""), unsafe_allow_html=True)

    # Examples Section with Dropdown inside Green Frame
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <p>Here are some examples of sentences using prepositions of time and place:</p>
                <div class="sentence-container">
                    <span class="noun-phrase">The cat</span> 
                    <span class="verb-phrase">is sleeping</span> 
                    <span class="prepositional-phrase">
                        <span class="prep">on</span> the mat
                    </span>
                    <span style="padding: 2px 5px; display: inline-block; background-color: white;">. </span>
                </div>
                <div class="sentence-container">
                    <span class="noun-phrase">She</span> 
                    <span class="verb-phrase">works</span> 
                    <span class="prepositional-phrase">
                        <span class="prep">at</span> the office
                    </span>
                    <span style="padding: 2px 5px; display: inline-block; background-color: white;">. </span>
                </div>
                <div class="sentence-container">
                    <span class="noun-phrase">They</span> 
                    <span class="verb-phrase">arrived</span> 
                    <span class="prepositional-phrase">
                        <span class="prep">in</span> the afternoon
                    </span>
                    <span style="padding: 2px 5px; display: inline-block; background-color: white;">. </span>
                </div>
                <div class="sentence-container">
                    <span class="prepositional-phrase">
                        <span class="prep">On</span> Monday
                    </span>
                    <span style="padding: 2px 5px; display: inline-block; background-color: white;">, </span>
                    <span class="noun-phrase">we</span> 
                    <span class="verb-phrase">will meet</span> 
                    <span class="prepositional-phrase">
                        <span class="prep">at</span> noon
                    </span>
                    <span style="padding: 2px 5px; display: inline-block; background-color: white;">. </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Multiple-Choice Questions
    st.markdown("""
        <div class="practice-frame">
            <h2>🎯 Practice: Select the Correct Preposition</h2>
            <p>Fill in the blanks with the correct preposition of time or place.</p>
        </div>
        """, unsafe_allow_html=True)

    # Questions and Options
    questions = [
        {"question": "We will meet ___ the office.", "options": ["at", "on", "in"], "answer": "at"},
        {"question": "She has a meeting ___ Monday.", "options": ["on", "at", "in"], "answer": "on"},
        {"question": "They arrived ___ the afternoon.", "options": ["in", "on", "at"], "answer": "in"},
        {"question": "We usually have dinner ___ 7 PM.", "options": ["at", "on", "in"], "answer": "at"},
        {"question": "He was born ___ 1990.", "options": ["in", "on", "at"], "answer": "in"},
    ]

    # Collect user answers with radio buttons (no default selected)
    user_answers = []
    for idx, q in enumerate(questions):
        st.write(f"{idx + 1}. {q['question']}")
        user_answers.append(st.radio("", q["options"],index=None, key=f"mcq_{idx}"))

    # Add a "Check" button to evaluate answers
    if st.button("Check"):
        score = sum(1 for i, answer in enumerate(user_answers) if answer == questions[i]["answer"])
        st.markdown(f"### Your Score: {score}/{len(questions)}")

        # If all answers are correct, display a success message and "Next" button
        if score == len(questions):
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l1_t3_1_all_correct = True
        else:
            st.error("You made some mistakes. Please try again.")
            st.session_state.tt_l1_t3_1_error_count += 1 

    if st.session_state.get('tt_l1_t3_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L1_T3_1, key='tt_l1_t3_1_practice')


        with col2:
            if st.button('Next', key='tt_l1_t3_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l1_t3_1",
                task_id="TT_L1_T3_1",
                next_page_func=navigate_to_task1_3
            )
                

def TT_L1_T4_1():
    st.title("Compound Sentences with Gerunds and Infinitives")

    add_css()

    # Initialize session states
    if "rule_expanded" not in st.session_state:
        st.session_state.rule_expanded = False
    if 'tt_l1_t4_1_all_correct' not in st.session_state:
        st.session_state.tt_l1_t4_1_all_correct = False

    if "tt_l1_t4_1_start_time" not in st.session_state:
        st.session_state.tt_l1_t4_1_start_time = datetime.datetime.now()
    
    if "tt_l1_t4_1_error_count" not in st.session_state:
        st.session_state.tt_l1_t4_1_error_count = 0

    # Rule Section with Dropdown inside a Yellow Frame
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rules</h2>
        <div>
            <details id="rule_details" {open}>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Gerunds:</strong> A gerund is a verb form that ends in '-ing' and functions as a noun. Some verbs are typically followed by gerunds.</p>
                <p><strong>Infinitives:</strong> An infinitive is the base form of a verb, often preceded by 'to'. Some verbs are typically followed by infinitives.</p>
                <p>The verbs followed by gerunds or infinitives together with the second verb form a <span class="verb-phrase">verb phrase</span>, which is highlighted in <span style="background-color: rgba(255, 0, 0, 0.5);">red</span>.</p>
                <h3>Common Verbs Followed by Gerunds and Infinitives (A1-A2 Level)</h3>
                <table>
                    <tr>
                        <th>Verbs Followed by Gerunds</th>
                        <th>Verbs Followed by Infinitives</th>
                    </tr>
                    <tr>
                        <td>enjoy</td>
                        <td>want</td>
                    </tr>
                    <tr>
                        <td>mind</td>
                        <td>need</td>
                    </tr>
                    <tr>
                        <td>suggest</td>
                        <td>decide</td>
                    </tr>
                    <tr>
                        <td>avoid</td>
                        <td>hope</td>
                    </tr>
                    <tr>
                        <td>finish</td>
                        <td>learn</td>
                    </tr>
                </table>
            </details>
        </div>
    </div>
    """.replace("{open}", "open" if st.session_state.rule_expanded else ""), unsafe_allow_html=True)

    # Interactive Section to Form Verb Phrases
    verbs_followed_by_gerunds = ["enjoy", "mind", "suggest", "avoid", "finish"]
    verbs_followed_by_infinitives = ["want", "need", "decide", "hope", "learn"]
    simple_verbs = ["do", "finish", "start", "learn", "write"]

    col1, col2 = st.columns(2)

    with col1:
        verb_gerund = st.selectbox("Verbs Followed by Gerunds", verbs_followed_by_gerunds, key="verb_gerund")
        simple_verb_gerund = st.selectbox("Simple Verbs for Gerunds", simple_verbs, key="simple_verb_gerund")
        gerund_result = f"{verb_gerund} {simple_verb_gerund}ing"

    with col2:
        verb_infinitive = st.selectbox("Verbs Followed by Infinitives", verbs_followed_by_infinitives, key="verb_infinitive")
        simple_verb_infinitive = st.selectbox("Simple Verbs for Infinitives", simple_verbs, key="simple_verb_infinitive")
        infinitive_result = f"{verb_infinitive} to {simple_verb_infinitive}"

    # Display constructed verb phrases with highlighting
    st.markdown(f"""
    ### Your Gerund Verb Phrase:
    <div class="sentence-container">
        <span class="verb-phrase">{gerund_result}</span>
    </div>
     """, unsafe_allow_html=True)
    st.markdown(f"""
    ### Your Infinitive Verb Phrase:
    <div class="sentence-container">
        <span class="verb-phrase">{infinitive_result}</span>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section with Dropdown inside Green Frame
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <p>Here are some examples of sentences with gerunds and infinitives:</p>
                <div class="sentence-container">
                    <span class="noun-phrase">I</span> 
                    <span class="verb-phrase">
                        <span class="verb">like</span> 
                        <span class="verb">to</span> 
                        <span class="verb">swim</span>
                    </span>.
                </div>
                <div class="sentence-container">
                    <span class="noun-phrase">She</span> 
                    <span class="verb-phrase">
                        <span class="verb">decided</span> 
                        <span class="verb">to</span> 
                        <span class="verb">leave</span>
                    </span>
                    <span class="adv">early</span>.
                </div>
                <div class="sentence-container">
                    <span class="noun-phrase">We</span> 
                    <span class="verb-phrase">
                        <span class="verb">enjoy</span> 
                        <span class="verb">reading</span>
                    </span>
                    <span class="noun-phrase">
                        <span class="noun">books</span>
                    </span>.
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Multiple-Choice Questions (Gerund/Infinitive)
    st.markdown("""
        <div class="practice-frame">
            <h2>🎯 Practice: Choose the Correct Form</h2>
            <p>Select the correct gerund or infinitive form to complete each sentence.</p>
        </div>
        """, unsafe_allow_html=True)

    # Questions and Answers
    sentences = [
        {"question": "1. I enjoy ___ (read).", "options": ["reading", "to read"], "answer": "reading"},
        {"question": "2. She wants ___ (leave) early.", "options": ["leaving", "to leave"], "answer": "to leave"},
        {"question": "3. We decided ___ (go) to the park.", "options": ["going", "to go"], "answer": "to go"},
        {"question": "4. He avoids ___ (talk) during meetings.", "options": ["talking", "to talk"], "answer": "talking"},
        {"question": "5. They need ___ (finish) the project soon.", "options": ["finishing", "to finish"], "answer": "to finish"}
    ]

    # Store user answers
    user_answers = []

    # Collect user answers using radio buttons (no pre-selected option)
    for idx, q in enumerate(sentences):
        st.write(q["question"])
        user_answers.append(st.radio("", q["options"],index=None, key=f"mcq_{idx}"))

   # Add a "Check" button
    if st.button("Check"):
        score = 0
        for i, question in enumerate(sentences):
            if user_answers[i] == question["answer"]:
                score += 1

        st.markdown(f"### Your Score: {score}/{len(sentences)}")

        # If all are correct, set the session-state variable to True
        if score == len(sentences):
            st.success("Great job! You answered all questions correctly.")
            st.session_state['tt_l1_t4_1_all_correct'] = True
        else:
            st.error("Some answers are incorrect. Try again.")
            st.session_state.tt_l1_t4_1__error_count += 1

    # If user answered all questions correctly, show Practice & Next buttons
    if st.session_state.get('tt_l1_t4_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L1_T4_1, key='tt_l1_t4_1_practice')
        with col2:
            if st.button('Next', key='tt_l1_t4_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l1_t4_1",
                task_id="TT_L1_T4_1",
                next_page_func=navigate_to_tt_l1_t4_2
            )
        


def TT_L1_T4_2():
    st.title("Compound Sentences with Gerunds and Infinitives")
    
    if 'tt_l1_t4_2_all_correct' not in st.session_state:
        st.session_state.tt_l1_t4_2_all_correct = False

    if "tt_l1_t4_2_start_time" not in st.session_state:
        st.session_state.tt_l1_t4_2_start_time = datetime.datetime.now()
    
    if "tt_l1_t4_2_error_count" not in st.session_state:
        st.session_state.tt_l1_t4_2_error_count = 0

    add_css()
    
    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rules</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>A <strong>compound sentence</strong> is a sentence that has at least two independent clauses joined by a coordinating conjunction. Each clause has its own subject and verb.</p>
                <p>The coordinating conjunctions can be remembered using the acronym <strong>FANBOYS</strong>:</p>
                <ul>
                    <li><strong>F</strong>or</li>
                    <li><strong>A</strong>nd</li>
                    <li><strong>N</strong>or</li>
                    <li><strong>B</strong>ut</li>
                    <li><strong>O</strong>r</li>
                    <li><strong>Y</strong>et</li>
                    <li><strong>S</strong>o</li>
                </ul>
                <p>Use a comma before the coordinating conjunction to connect the two clauses.</p>
                <p>For example:</p>
                <p><em>She likes reading</em>, <strong>and</strong> <em>he enjoys writing</em>.</p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)
    
    # Examples Section
    st.markdown("""
    <div id="example_section" class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Compound Sentence with Gerunds</h3>
                <div class="sentence-container">
                    <span class="main-clause">
                        <span class="noun-phrase"><span class="subject">She</span></span> 
                        <span class="verb-phrase"><span class="verb">enjoys reading</span></span> 
                        <span class="noun-phrase"><span class="noun">books</span></span>, 
                        <span class="conjunction">and</span> 
                    </span>
                    <span class="main-clause">
                        <span class="noun-phrase"><span class="subject">he</span></span> 
                        <span class="verb-phrase"><span class="verb">loves writing</span></span> 
                        <span class="noun-phrase"><span class="noun">stories</span></span>.
                    </span>
                </div> 
                <h3>Example 2: Compound Sentence with Infinitives</h3>
                <div class="sentence-container">
                    <span class="main-clause">
                        <span class="noun-phrase"><span class="subject">They</span></span> 
                        <span class="verb-phrase"><span class="verb">want to play</span></span> 
                        <span class="noun-phrase"><span class="noun">soccer</span></span>, 
                        <span class="conjunction">but</span> 
                    </span>
                    <span class="main-clause">
                        <span class="noun-phrase"><span class="subject">we</span></span> 
                        <span class="verb-phrase"><span class="verb">prefer to watch</span></span> 
                        <span class="noun-phrase"><span class="noun">a movie</span></span>.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)
    
    # Practice Section
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice</h2>
        <p>Create your own compound sentence using the dropdown lists below. Choose subjects, verbs, and actions to form a sentence with gerunds or infinitives.</p>
    </div>
    """, unsafe_allow_html=True)
    
    # Data for dropdowns
    subjects = ['I', 'You', 'He', 'She', 'We', 'They']
    verbs_followed_by_gerunds = ['enjoy', 'avoid', 'finish', 'mind', 'suggest']
    verbs_followed_by_infinitives = ['want', 'need', 'decide', 'hope', 'learn']
    verbs_base = verbs_followed_by_gerunds + verbs_followed_by_infinitives
    verbs_singular = [verb + 's' for verb in verbs_base]
    actions = ['reading', 'writing', 'swimming', 'running', 'cooking', 'to read', 'to write', 'to swim', 'to run', 'to cook']
    conjunctions = ['and', 'but', 'or', 'so']
    
    col1, col2, col3, col4 = st.columns(4)
    
    with col1:
        subject1 = st.selectbox('Subject 1', subjects, key='subject1')
    with col2:
        if subject1 in ['He', 'She']:
            verbs_list1 = verbs_singular
        else:
            verbs_list1 = verbs_base
        verb1 = st.selectbox('Verb 1', verbs_list1, key='verb1')
    with col3:
        action1 = st.selectbox('Action 1', actions, key='action1')
    with col4:
        conjunction = st.selectbox('Conjunction', conjunctions, key='conjunction')
    
    # Second clause
    col5, col6, col7 = st.columns(3)
    
    with col5:
        subject2 = st.selectbox('Subject 2', subjects, key='subject2')
    with col6:
        if subject2 in ['He', 'She']:
            verbs_list2 = verbs_singular
        else:
            verbs_list2 = verbs_base
        verb2 = st.selectbox('Verb 2', verbs_list2, key='verb2')
    with col7:
        action2 = st.selectbox('Action 2', actions, key='action2')
    
    # Construct the sentence
    sentence = f"<span class='main-clause'><span class='noun-phrase'><span class='subject'>{subject1}</span></span> <span class='verb-phrase'><span class='verb'>{verb1} {action1}</span></span></span> <span class='conjunction'>,{conjunction}</span> <span class='main-clause'><span class='noun-phrase'><span class='subject'>{subject2}</span></span> <span class='verb-phrase'><span class='verb'>{verb2} {action2}</span></span></span>."
    
    st.markdown(f"""
    ### Your Sentence
    <div class="sentence-container">{sentence}</div>
    """, unsafe_allow_html=True)
    
    # Implement checking logic
    if st.button('Check'):
        # Mapping verbs to their correct forms
        verb_forms = {
            'enjoy': 'gerund',
            'avoid': 'gerund',
            'finish': 'gerund',
            'mind': 'gerund',
            'suggest': 'gerund',
            'want': 'infinitive',
            'need': 'infinitive',
            'decide': 'infinitive',
            'hope': 'infinitive',
            'learn': 'infinitive'
        }
        
        # Function to get base form of the verb
        def get_base_verb(verb):
            if verb.endswith('s'):
                return verb[:-1]
            return verb
        
        # Check if verb1 matches action1
        verb1_base = get_base_verb(verb1)
        required_form1 = verb_forms.get(verb1_base, None)
        if required_form1 == 'gerund' and action1.endswith('ing'):
            clause1_correct = True
        elif required_form1 == 'infinitive' and action1.startswith('to '):
            clause1_correct = True
        else:
            clause1_correct = False
        
        # Check if verb2 matches action2
        verb2_base = get_base_verb(verb2)
        required_form2 = verb_forms.get(verb2_base, None)
        if required_form2 == 'gerund' and action2.endswith('ing'):
            clause2_correct = True
        elif required_form2 == 'infinitive' and action2.startswith('to '):
            clause2_correct = True
        else:
            clause2_correct = False
        
        if clause1_correct and clause2_correct:
            st.success("Great job! Your sentence is correct.")
            st.session_state.tt_l1_t4_2_all_correct = True 
        else:
            st.error("There seems to be a mistake in your sentence. Please check the verb and action combinations.")
            st.session_state.tt_l1_t4_2_error_count += 1 

    if st.session_state.get('tt_l1_t4_2_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L1_T4_2, key='tt_l1_t4_2_practice')

        with col2:
            st.button('Next',key='tt_l1_t4_2_next')
            complete_task_and_record_data(
                page_prefix="tt_l1_t4_2",
                task_id="TT_L1_T4_2",
                next_page_func=navigate_to_task1_4
            )

            
    if st.button("Back",key='tt_l1_t4_1_back'):
        back_to_tt_l1_t4_1
        st.rerun()


def TT_L1_T5_1():
    st.title("Past Simple and Past Continuous")

    add_css()

    # Initialize session states
    if 'tt_l1_t5_1_all_correct' not in st.session_state:
        st.session_state.tt_l1_t5_1_all_correct = False
    
    if "tt_l1_t5_1_start_time" not in st.session_state:
        st.session_state.tt_l1_t5_1_start_time = datetime.datetime.now()
    
    if "tt_l1_t5_1_error_count" not in st.session_state:
        st.session_state.tt_l1_t5_1_error_count = 0

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rules</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>In this lesson, we will explore the Past Simple and Past Continuous tenses, focusing on simple sentences and keywords.</p>
                <h3>Past Simple:</h3>
                <ul>
                    <li>Used for actions that happened and were completed in the past.</li>
                    <li>Keywords: yesterday, last night, in 1990, two days ago.</li>
                </ul>
                <p><strong>Example:</strong></p>
                <div class="sentence-container">
                    <span class="noun-phrase">She</span>
                    <span class="verb-phrase">went</span>
                    <span class="prepositional-phrase">to the market</span>
                    <span class="adv">yesterday</span>.
                </div>
                <h3>Past Continuous:</h3>
                <ul>
                    <li>Used for actions that were in progress at a specific time in the past.</li>
                    <li>Keywords: while, when, as, yesterday at 6 p.m., this time yesterday, last Saturday afternoon.</li>
                </ul>
                <p><strong>Example:</strong></p>
                <div class="sentence-container">
                    <span class="noun-phrase">They</span>
                    <span class="verb-phrase">were watching</span>
                    <span class="noun-phrase">a movie</span>
                    <span class="adv">when I called</span>.
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Examples: Past Simple</h3>
                <div class="sentence-container">
                    <span class="noun-phrase">She</span>
                    <span class="verb-phrase">went</span>
                    <span class="prepositional-phrase">to the market</span>
                    <span class="adv">yesterday</span>.
                </div>
                <h3>Examples: Past Continuous</h3>
                <div class="sentence-container">
                    <span class="noun-phrase">They</span>
                    <span class="verb-phrase">were watching</span>
                    <span class="noun-phrase">a movie</span>
                    <span class="adv">when I called</span>.
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section
    st.markdown("""
        <div class="practice-frame">
            <h2>🎯 Practice: Verb Tense</h2>
            <p>Choose the correct form of the verb to complete the sentence:</p>
        </div>
        """, unsafe_allow_html=True)

    # Questions and Answers
    questions = [
        {"question": "1. She ___ (go) to the market yesterday.", "options": ["went", "was going"], "answer": "went"},
        {"question": "2. She ___ (walk) to the park yesterday at 6 p.m.", "options": ["walked", "was walking"], "answer": "was walking"},
        {"question": "3. I ___ (see) him at the party last night.", "options": ["saw", "was seeing"], "answer": "saw"},
        {"question": "4. During the winter of last year, Mary _____ as an intern at a startup company.", "options": ["worked", "was working"], "answer": "worked"},
        {"question": "5. My friends and I ____ an English mid-term exam a few days ago.", "options": ["were taking", "took"], "answer": "took"}
    ]

    # Store user answers
    user_answers = []

    # Display each question with radio buttons and no pre-selected option
    for idx, q in enumerate(questions):
        st.write(q["question"])
        user_answers.append(st.radio("", q["options"], index=None, key=f"mcq_{idx}"))

    # Add a "Check" button
    if st.button("Check"):
        score = sum(1 for i, answer in enumerate(user_answers) if answer == questions[i]["answer"])
        st.markdown(f"### Your Score: {score}/{len(questions)}")

        # If all answers are correct, display a success message
        if score == len(questions):
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l1_t5_1_all_correct = True  
        else:
            st.error("You made some mistakes. Please review the rule section and try again.")
            st.session_state.tt_l1_t5_1_error_count += 1

    # If user answered all correctly, show Practice & Next buttons
    if st.session_state.get('tt_l1_t5_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L1_T5_2, key='tt_l1_t5_1_practice')

        with col2:
            if st.button('Next', key='tt_l1_t5_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l1_t5_1",
                task_id="tt_l1_t5_1",
                next_page_func=navigate_to_tt_l1_t5_2
                )

def TT_L1_T5_2():
    st.title("Past Simple and Past Continuous with 'When' and 'While'")

    # Apply custom CSS
    add_css()

    # Adjust CSS for commas in the examples
    st.markdown("""
    <style>
    .sentence-container span {
        display: inline-block;
        vertical-align: middle;
    }
    .sentence-container .comma {
        padding-left: 0;
    }
    </style>
    """, unsafe_allow_html=True)


    if "tt_l1_t5_2_start_time" not in st.session_state:
        st.session_state.tt_l1_t5_2_start_time = datetime.datetime.now()
    

# Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details id="rule_details">
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>In this lesson, we will explore the difference between using "when" and "while" in sentences with Past Simple and Past Continuous tenses.</p>
                <h3>When:</h3>
                <ul>
                    <li>"When" is typically used to introduce an action in the Past Simple that interrupts another action that was in progress in the Past Continuous.</li>
                    <li>For example:
                        <div class="sentence-container">
                            <span class="main-clause"><span class="subject">I</span> <span class="verb">was reading</span></span>
                            <span class="conjunction">when</span>
                            <span class="subordinate-clause"><span class="subject">the phone</span> <span class="verb">rang.</span></span>
                        </div>
                    </li>
                    <li>Alternative structure:
                        <div class="sentence-container">
                            <span class="subordinate-clause"><span class="conjunction">When</span> <span class="subject">the phone</span> <span class="verb">rang,</span>
                            <span class="main-clause"><span class="subject">I</span> <span class="verb">was reading.</span></span>
                        </div>
                    </li>
                </ul>
                <h3>While:</h3>
                <ul>
                    <li>"While" is used to indicate that two actions were happening simultaneously in the past, typically with both actions in the Past Continuous tense.</li>
                    <li>For example:
                        <div class="sentence-container">
                            <span class="main-clause"><span class="subject">She</span> <span class="verb">was cooking</span></span>
                            <span class="conjunction">while</span>
                            <span class="subordinate-clause"><span class="subject">he</span> <span class="verb">was reading.</span></span>
                        </div>
                    </li>
                    <li>Alternative structure:
                        <div class="sentence-container">
                            <span class="subordinate-clause"><span class="conjunction">While</span> <span class="subject">he</span> <span class="verb">was reading,</span></span>
                            <span class="main-clause"><span class="subject">she</span> <span class="verb">was cooking.</span></span>
                        </div>
                    </li>
                </ul>
                <p><strong>Comma Usage:</strong> When the subordinate clause (introduced by "when" or "while") comes before the main clause, a comma is used to separate them. If the main clause comes first, a comma is not necessary.</p>
            </details>
        </div>
    """, unsafe_allow_html=True)

    # Example Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: "When" in a Complex Sentence</h3>
                <div class="sentence-container">
                    <span class="main-clause"><span class="subject">I</span> <span class="verb">was reading</span></span>
                    <span class="conjunction">when</span>
                    <span class="subordinate-clause"><span class="subject">the phone</span> <span class="verb">rang.</span></span>
                </div>
                <div class="sentence-container">
                    <span class="subordinate-clause"><span class="conjunction">When</span> <span class="subject">the phone</span> <span class="verb">rang,</span></span></span>
                    <span class="main-clause"><span class="subject">I</span> <span class="verb">was reading.</span></span>
                </div>
                <h3>Example 2: "While" in a Complex Sentence</h3>
                <div class="sentence-container">
                    <span class="main-clause"><span class="subject">She</span> <span class="verb">was cooking</span></span>
                    <span class="conjunction">while</span>
                    <span class="subordinate-clause"><span class="subject">he</span> <span class="verb">was reading.</span></span>
                </div>
                <div class="sentence-container">
                    <span class="subordinate-clause"><span class="conjunction">While</span> <span class="subject">he</span> <span class="verb">was reading,</span></span></span>
                    <span class="main-clause"><span class="subject">she</span> <span class="verb">was cooking.</span></span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Match the Sentence Halves</h2>
        <p>Drag and drop to match the first half of the sentence with the correct second half.</p>
    </div>
    """, unsafe_allow_html=True)

    # CSS for Drag-and-Drop Activity
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .draggable {
            padding: 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            cursor: pointer;
            margin: 5px;
            font-size: 16px;
            min-width: 250px;
        }
        .draggable:hover {
            background-color: #d1e7f5;
        }
        .sentence-container {
            margin-bottom: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .sentence-part {
            min-width: 300px;
            text-align: right;
            margin-right: 10px;
        }
        .dropzone {
            min-height: 40px;
            min-width: 300px;
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
            border-radius: 10px;
            padding: 5px;
            text-align: left;
            margin-left: 10px;
            font-size: 16px;
        }
        .dropzone.dragging-over {
            background-color: #d1e7f5;
        }
        .button-container {
            margin-top: 20px;
            text-align: center;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
    """

    # JavaScript and HTML for Drag-and-Drop Activity with modifications
    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <!-- Draggable items will be inserted here by JavaScript -->
        </div>
        <div class="sentence-container">
            <div class="sentence-part">Dean was finishing his last essay question on the history final exam</div>
            <div class="dropzone" id="drop1"></div>
        </div>
        <div class="sentence-container">
            <div class="sentence-part">What were you doing</div>
            <div class="dropzone" id="drop2"></div>
        </div>
        <div class="sentence-container">
            <div class="sentence-part">Nina did not hear her phone ringing</div>
            <div class="dropzone" id="drop3"></div>
        </div>
        <div class="sentence-container">
            <div class="sentence-part">The waiter was serving a lot of customers</div>
            <div class="dropzone" id="drop4"></div>
        </div>
        <div class="button-container">
            <button id="checkButton" class="st-button">Check Answers</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        const sentences = [
            "when the bell rang.",
            "when the nurse called your name?",
            "as she was paying attention to her favorite TV show.",
            "when his manager came to assist him."
        ];

        // Shuffle the sentences
        function shuffle(array) {
            let currentIndex = array.length, temporaryValue, randomIndex;
            while (0 !== currentIndex) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }
            return array;
        }

        const shuffledSentences = shuffle(sentences.slice());

        const dragContainer = document.getElementById('dragContainer');

        // Create draggable items
        shuffledSentences.forEach((sentence, index) => {
            const draggable = document.createElement('div');
            draggable.classList.add('draggable');
            draggable.setAttribute('draggable', 'true');
            draggable.setAttribute('id', 'drag' + (index + 1));
            draggable.textContent = sentence;
            dragContainer.appendChild(draggable);
        });

        const draggables = document.querySelectorAll('.draggable');
        const dropzones = document.querySelectorAll('.dropzone');
        const result = document.getElementById('result');
        const checkButton = document.getElementById('checkButton');

        let draggedItem = null;

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggedItem = draggable;
                setTimeout(() => {
                    draggable.style.display = 'none';
                }, 0);
            });

            draggable.addEventListener('dragend', () => {
                setTimeout(() => {
                    draggedItem.style.display = 'block';
                    draggedItem = null;
                }, 0);
            });
        });

        dropzones.forEach(dropzone => {
            dropzone.addEventListener('dragover', e => {
                e.preventDefault();
                dropzone.classList.add('dragging-over');
            });

            dropzone.addEventListener('dragleave', () => {
                dropzone.classList.remove('dragging-over');
            });

            dropzone.addEventListener('drop', e => {
                e.preventDefault();
                dropzone.classList.remove('dragging-over');
                if (draggedItem) {
                    // If dropzone already has a child, move it back to dragContainer
                    if (dropzone.firstChild) {
                        dragContainer.appendChild(dropzone.firstChild);
                    }
                    dropzone.appendChild(draggedItem);
                }
            });
        });

        dragContainer.addEventListener('dragover', e => {
            e.preventDefault();
        });

        dragContainer.addEventListener('drop', e => {
            e.preventDefault();
            if (draggedItem) {
                dragContainer.appendChild(draggedItem);
            }
        });

        checkButton.addEventListener('click', () => {
            const correctAnswers = {
                "drop1": "when the bell rang.",
                "drop2": "when the nurse called your name?",
                "drop3": "as she was paying attention to her favorite TV show.",
                "drop4": "when his manager came to assist him."
            };
            let score = 0;
            dropzones.forEach(dropzone => {
                const dropId = dropzone.id;
                const text = dropzone.textContent.trim();
                if (correctAnswers[dropId] === text) {
                    dropzone.style.borderColor = 'green';
                    score += 1;
                } else {
                    dropzone.style.borderColor = 'red';
                }
            });

            if (score === Object.keys(correctAnswers).length) {
                result.textContent = `Great job! You matched all sentences correctly.`;
                result.style.color = 'green';
                // Display 'More Practice' and 'Next' buttons
                streamlitApi.setComponentValue(true);
            } else {
                result.textContent = `You got ${score} out of ${Object.keys(correctAnswers).length} correct. Please try again.`;
                result.style.color = 'red';
            }
        });
    </script>
    """

    result = components.html(drag_and_drop_css + drag_and_drop_js, height=700, scrolling=True)

    # Add 'More Practice' and 'Next' buttons
    col1, col2 = st.columns(2)
    with col1:
        st.button('Practice', on_click=navigate_to_practice_TT_L1_T5_2, key='tt_l1_t5_2_practice')
    with col2:
        if st.button("Next", key='tt_l1_t5_2_next'):

            end_time = datetime.datetime.now()
            start_time = st.session_state.tt_l1_t5_2_start_time
            time_diff = end_time - start_time
             # Convert timedelta to HH:MM:SS
            total_seconds = int(time_diff.total_seconds())
            hours, remainder = divmod(total_seconds, 3600)
            minutes, seconds = divmod(remainder, 60)
            time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
            try:
                h, m, s = map(int, time_spent_str.split(':'))
                time_obj = datetime.time(h, m, s)
            except ValueError as e:
                st.error(f"Error parsing time: {e}")
                time_obj = None  # fallback
            errors_info = {"error_count": 0}
            try:
                student_id = st.session_state.user_info.id
                task_id = "TT_L1_T5_2"
                record_task_done(
                    student_id=student_id,
                    task_id=task_id,
                    date=end_time,        # current datetime
                    time_spent=time_obj,
                    errors_dict=errors_info
                )
                
            except Exception as e:
                st.error(f"Error recording task: {e}")
                return

            st.session_state.tt_l1_t5_2_start_time = None
            
            navigate_to_task1_5()

        if st.button("Back", key='tt_l1_t5_2_back'):
            back_to_tt_l1_t5_1()
            st.rerun()
    
def TT_L1_T6_1():
    st.title("Future Simple vs. To Be Going To")

    add_css()

    if 'tt_l1_t6_1_all_correct' not in st.session_state:
        st.session_state.tt_l1_t6_1_all_correct = False
    
    if "tt_l1_t6_1_start_time" not in st.session_state:
        st.session_state.tt_l1_t6_1_start_time = datetime.datetime.now()
    
    if "tt_l1_t6_1_error_count" not in st.session_state:
        st.session_state.tt_l1_t6_1_error_count = 0

    # Adjust CSS for examples and font sizes
    st.markdown("""
    <style>
    .sentence-container span {
        display: inline;
        margin-right: 5px;
    }
    div.stRadio > label {
        font-size: 16px;
    }
    div.stRadio > div {
        font-size: 16px;
    }
    </style>
    """, unsafe_allow_html=True)

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Future Simple ("will"):</strong></p>
                <ul>
                    <li><strong>Used for decisions made at the moment of speaking.</strong><br>
                    <em>Example:</em> "I'm thirsty. I <strong>will</strong> get a glass of water."</li>
                    <li><strong>Used for predictions or future facts.</strong><br>
                    <em>Example:</em> "I think it <strong>will</strong> rain tomorrow."</li>
                </ul>
                <p><strong>"To be going to":</strong></p>
                <ul>
                    <li><strong>Used for plans or intentions made before the moment of speaking.</strong><br>
                    <em>Example:</em> "She <strong>is going to</strong> start a new job next week."</li>
                    <li><strong>Used for predictions based on current evidence.</strong><br>
                    <em>Example:</em> "Look at those dark clouds! It <strong>is going to</strong> rain."</li>
                </ul>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Future Simple ("will") Examples</h3>
                <div class="sentence-container">
                    <span class="subject">She</span> <span class="verb">will call</span> <span class="time"<you later</span>.
                </div>
                <div class="sentence-container">
                    <span class="subject">I</span> <span class="verb">think it will snow</span> <span class="time">tomorrow</span>.
                </div>
                <h3>"To Be Going To" Examples</h3>
                <div class="sentence-container">
                    <span class="subject">They</span> <span class="verb">are going to travel</span> <span class="time">next month</span>.
                </div>
                <div class="sentence-container">
                    <span class="subject">Look!</span> <span class="subject">He</span> <span class="verb">is going to fall</span>!
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Choose the Correct Form</h2>
        <p>For each sentence, choose the correct form of the verb ("will" or "to be going to") according to the rules.</p>
    </div>
    """, unsafe_allow_html=True)

    # Questions and Answers
    questions = [
        {"question": "1. I feel hungry. I ___ (make) a sandwich.", "options": ["will make", "am going to make"], "answer": "will make"},
        {"question": "2. Look at those clouds! It ___ (rain).", "options": ["will rain", "is going to rain"], "answer": "is going to rain"},
        {"question": "3. She ___ (start) university next month; she applied last year.", "options": ["will start", "is going to start"], "answer": "is going to start"},
        {"question": "4. They think the team ___ (win) the match.", "options": ["will win", "is going to win"], "answer": "will win"},
        {"question": "5. He forgot his wallet. Don't worry, I ___ (lend) you some money.", "options": ["will lend", "am going to lend"], "answer": "will lend"},
    ]

    # Create variables to store user answers
    user_answers = []

    # Render the questions using Streamlit's radio buttons
    for idx, q in enumerate(questions):
        st.write(f"{q['question']}")
        user_answers.append(
            st.radio("", options=q['options'], index=None, key=f"q_{idx}")
        )

    # Check Answers button logic
    if st.button("Check"):
        score = sum(1 for idx, q in enumerate(questions) if user_answers[idx] == q["answer"])
        st.markdown(f"### Your Score: {score}/{len(questions)}")

        if score == len(questions):
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l1_t6_1_all_correct = True
        else:
            st.error(f"You got {score}/{len(questions)} correct. Please review the rule section above.")
            st.session_state.tt_l1_t6_1_error_count += 1

    if st.session_state.get('tt_l1_t6_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L1_T6_1, key='tt_l1_t6_1_practice')

        with col2:
           if st.button('Next', key='tt_l1_t6_1_next'):
                complete_task_and_record_data(
                    page_prefix="tt_l1_t6_1",
                    task_id="TT_L1_T6_1",
                    next_page_func=navigate_to_task1_6
                )



def TT_L1_T7_1():
    st.title("Passive Voice: Present Simple Passive and Past Simple Passive")


    if "tt_l1_t7_1_start_time" not in st.session_state:
        st.session_state.tt_l1_t7_1_start_time = datetime.datetime.now()

    add_css()

    # Add CSS to fix spacing in the Examples section
    st.markdown("""
    <style>
    .sentence-container span {
        display: inline;
        margin-right: 5px;
    }
    </style>
    """, unsafe_allow_html=True)

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details id="rule_details">
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>In this lesson, we explore the Passive Voice in Present Simple and Past Simple tenses. Passive voice is used when the focus is on the action, not on who or what is performing the action.</p>
                <p><strong>Active Voice:</strong> The subject performs the action.</p>
                <p><em>Example:</em> <span class="subject">The children</span> <span class="verb">eat</span> <span class="object">the cake</span>.</p>
                <p><strong>Passive Voice:</strong> The object of the action becomes the subject of the sentence.</p>
                <p><em>Example:</em> <span class="subject">The cake</span> <span class="verb">is eaten</span> <span class="agent">by the children</span>.</p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <p>Here are some examples of sentences in active and passive voice:</p>
                <h3>Present Simple Passive</h3>
                <div class="sentence-container">
                    <span class="subject">Letters</span> <span class="verb">are written</span> <span class="agent">by her</span> <span class="time">every day</span>.
                </div>
                <h3>Past Simple Passive</h3>
                <div class="sentence-container">
                    <span class="subject">Football</span> <span class="verb">was played</span> <span class="agent">by him</span> <span class="time">yesterday</span>.
                </div>
                <h3>Active Voice Examples</h3>
                <div class="sentence-container">
                    <span class="subject">She</span> <span class="verb">writes</span> <span class="object">letters</span> <span class="time">every day</span>.
                </div>
                <div class="sentence-container">
                    <span class="subject">He</span> <span class="verb">played</span> <span class="object">football</span> <span class="time">yesterday</span>.
                </div>
                <div class="sentence-container">
                    <span class="subject">They</span> <span class="verb">are watching</span> <span class="object">a movie</span> <span class="time">now</span>.
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)
        
    # Practice Section
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Drag and Drop Task</h2>
        <p>Drag the sentences into the correct columns: Active Voice or Passive Voice.</p>
    </div>
    """, unsafe_allow_html=True)

    # CSS for Drag-and-Drop Component
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }
        .draggable {
            padding: 10px;
            margin: 5px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            color: black;
            border-radius: 5px;
            cursor: grab;
            text-align: center;
            min-width: 200px;
        }
        .drop-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding: 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
            min-height: 200px;
        }
        .drop-zone {
            flex: 1;
            margin: 10px;
            padding: 10px;
            background-color: #e3f2fd;
            border: 2px dashed #64b5f6;
            border-radius: 5px;
            min-height: 150px;
            text-align: center;
            vertical-align: top;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            text-align: center;
        }
        .button-container {
            text-align: center;
            margin-top: 20px;
        }
    </style>
    """

    # JavaScript for Drag-and-Drop Functionality with modifications
    drag_and_drop_js = """
    <div class="container">
        <h4>Drag and Drop Task: Separate Sentences</h4>
        <div class="drag-container" id="dragContainer">
            <!-- Draggable items will be inserted here by JavaScript -->
        </div>
        <div class="drop-container">
            <div id="active" class="drop-zone">
                <h4>Active Voice</h4>
            </div>
            <div id="passive" class="drop-zone">
                <h4>Passive Voice</h4>
            </div>
        </div>
        <div class="button-container">
            <button id="checkButton" class="st-button">Check Answers</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        const sentences = [
            "She writes letters every day.",
            "Letters are written by her every day.",
            "He played football yesterday.",
            "Football was played by him yesterday.",
            "John washes the car.",
            "The car is washed by John.",
            "John washed the car.",
            "The car was washed by John.",
            "They are watching a movie now.",
            "They were watching a movie when I arrived."
        ];

        // Shuffle the sentences
        function shuffle(array) {
            let currentIndex = array.length, temporaryValue, randomIndex;
            while (0 !== currentIndex) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }
            return array;
        }

        const shuffledSentences = shuffle(sentences.slice());

        const dragContainer = document.getElementById('dragContainer');

        // Create draggable items
        shuffledSentences.forEach((sentence, index) => {
            const draggable = document.createElement('div');
            draggable.classList.add('draggable');
            draggable.setAttribute('draggable', 'true');
            draggable.setAttribute('id', 'drag' + (index + 1));
            draggable.textContent = sentence;
            dragContainer.appendChild(draggable);
        });

        const draggables = document.querySelectorAll('.draggable');
        const dropZones = document.querySelectorAll('.drop-zone');
        const result = document.getElementById('result');
        const checkButton = document.getElementById('checkButton');

        let draggedItem = null;

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggedItem = draggable;
                setTimeout(() => {
                    draggable.style.display = 'none';
                }, 0);
            });

            draggable.addEventListener('dragend', () => {
                setTimeout(() => {
                    draggedItem.style.display = 'block';
                    draggedItem = null;
                }, 0);
            });
        });

        dropZones.forEach(dropzone => {
            dropzone.addEventListener('dragover', e => {
                e.preventDefault();
                dropzone.classList.add('dragging-over');
            });

            dropzone.addEventListener('dragleave', () => {
                dropzone.classList.remove('dragging-over');
            });

            dropzone.addEventListener('drop', e => {
                e.preventDefault();
                dropzone.classList.remove('dragging-over');
                if (draggedItem) {
                    // Allow multiple items in a dropzone
                    dropzone.appendChild(draggedItem);
                }
            });
        });

        dragContainer.addEventListener('dragover', e => {
            e.preventDefault();
        });

        dragContainer.addEventListener('drop', e => {
            e.preventDefault();
            if (draggedItem) {
                dragContainer.appendChild(draggedItem);
            }
        });

        checkButton.addEventListener('click', () => {
            const activeZone = document.getElementById('active');
            const passiveZone = document.getElementById('passive');

            const activeItems = [
                'She writes letters every day.',
                'He played football yesterday.',
                'John washes the car.',
                'John washed the car.',
                'They are watching a movie now.',
                'They were watching a movie when I arrived.'
            ];

            const passiveItems = [
                'Letters are written by her every day.',
                'Football was played by him yesterday.',
                'The car is washed by John.',
                'The car was washed by John.'
            ];

            let activeCorrect = true;
            let passiveCorrect = true;

            const activeDraggables = activeZone.querySelectorAll('.draggable');
            const passiveDraggables = passiveZone.querySelectorAll('.draggable');

            activeDraggables.forEach(child => {
                const sentence = child.textContent.trim();
                if (!activeItems.includes(sentence)) {
                    activeCorrect = false;
                }
            });

            passiveDraggables.forEach(child => {
                const sentence = child.textContent.trim();
                if (!passiveItems.includes(sentence)) {
                    passiveCorrect = false;
                }
            });

            if (activeCorrect && passiveCorrect &&
                activeDraggables.length === activeItems.length &&
                passiveDraggables.length === passiveItems.length) {
                result.textContent = 'Great job! All sentences are correctly sorted.';
                result.style.color = 'green';
                // Communicate with Streamlit to display the buttons
                Streamlit.setComponentValue(true);
            } else {
                result.textContent = 'Some sentences are incorrectly sorted. Please try again.';
                result.style.color = 'red';
            }
        });
    </script>
    """

    # Combine CSS and JS
    combined_html = drag_and_drop_css + drag_and_drop_js

    # Embed the HTML (drag-and-drop interface)
    components.html(combined_html, height=700, scrolling=True)


    col1, col2 = st.columns(2)
    with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L1_T7_1, key='tt_l1_t7_1_practice')

    with col2:
            st.button('Next', key='tt_l1_t7_1_next') 

            end_time = datetime.datetime.now()
            start_time = st.session_state.tt_l1_t7_1_start_time
            time_diff = end_time - start_time
             # Convert timedelta to HH:MM:SS
            total_seconds = int(time_diff.total_seconds())
            hours, remainder = divmod(total_seconds, 3600)
            minutes, seconds = divmod(remainder, 60)
            time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
            try:
                h, m, s = map(int, time_spent_str.split(':'))
                time_obj = datetime.time(h, m, s)
            except ValueError as e:
                st.error(f"Error parsing time: {e}")
                time_obj = None  # fallback
            errors_info = {"error_count": 0}
            try:
                student_id = st.session_state.user_info.id
                task_id = "TT_L1_T7_1"
                record_task_done(
                    student_id=student_id,
                    task_id=task_id,
                    date=end_time,        # current datetime
                    time_spent=time_obj,
                    errors_dict=errors_info
                )
            except Exception as e:
                st.error(f"Error recording task: {e}")
                return

            st.session_state.tt_l1_t7_1_start_time = None
            
            navigate_to_task1_7()
    
def TT_L1_T8_1():
    st.title("Modals: May, Might, Should, Must, Have to")

    if 'tt_l1_t8_1_all_correct' not in st.session_state:
        st.session_state.tt_l1_t2_1_all_correct = False

    if "tt_l1_t8_1_start_time" not in st.session_state:
        st.session_state.tt_l1_t8_1_start_time = datetime.datetime.now()
    
    if "tt_l1_t8_1_error_count" not in st.session_state:
        st.session_state.tt_l1_t8_1_error_count = 0

    add_css()

    # Add CSS for verb phrase highlighting
    st.markdown("""
    <style>
    .verb-phrase {
        background-color: rgba(255, 0, 0, 0.3); /* Light red highlight */
    }
    .sentence-container span {
        display: inline-block;
        margin-right: 5px;
    }
    </style>
    """, unsafe_allow_html=True)

    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details id="rule_details">
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Can</strong>: Ability.</p>
                <p><em>Example:</em> "She <span class="verb-phrase">can play</span> the piano beautifully."</p>
                <p><strong>Must</strong>: Obligation and necessity.</p>
                <p><em>Example:</em> "You <span class="verb-phrase">must finish</span> your homework before going out."</p>
                <p><strong>Have to</strong>: Obligations coming from outside the speaker.</p>
                <p><em>Example:</em> "I <span class="verb-phrase">have to attend</span> a meeting at 9 am tomorrow."</p>
                <p><strong>May</strong>: Possibility referring to the present and the future.</p>
                <p><em>Example:</em> "We <span class="verb-phrase">may visit</span> the museum if we have time."</p>
                <p><strong>Might</strong>: Weak possibility.</p>
                <p><em>Example:</em> "She <span class="verb-phrase">might come</span> to the party, but she's not sure."</p>
                <p><strong>Should</strong>: Suggestions and advice.</p>
                <p><em>Example:</em> "You <span class="verb-phrase">should see</span> a doctor about that cough."</p>
            </details>
        </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <ul>
                    <li>I <span class="verb-phrase">cannot come</span> to see you.</li>
                    <li>I <span class="verb-phrase">can cook</span>.</li>
                    <li>You <span class="verb-phrase">must not wear</span> a white shirt.</li>
                    <li>I <span class="verb-phrase">mustn't be</span> late.</li>
                    <li>This weekend I <span class="verb-phrase">have to go</span> to a party.</li>
                    <li>About the transport, you <span class="verb-phrase">do not have to worry</span> as my dad can drop us at the sports centre.</li>
                    <li>I think it <span class="verb-phrase">may be</span> dirty.</li>
                    <li>My dad isn't working that day; he <span class="verb-phrase">might take</span> us.</li>
                    <li>The weather <span class="verb-phrase">might be</span> hot and sunny.</li>
                    <li>You <span class="verb-phrase">should take</span> some money because the ticket costs £4.00.</li>
                </ul>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Choose the Correct Modal Verb</h2>
        <p>Select the correct modal verb to complete each sentence.</p>
    </div>
    """, unsafe_allow_html=True)

    # Questions and Answers
    questions = [
        {"question": "1. I ___ swim very well.", "options": ["can", "must", "should"], "answer": "can"},
        {"question": "2. You ___ finish your homework before going out.", "options": ["might", "must", "may"], "answer": "must"},
        {"question": "3. She ___ visit us if she has time.", "options": ["must", "should", "may"], "answer": "may"},
        {"question": "4. They ___ see a doctor about that cough.", "options": ["should", "must", "can"], "answer": "should"},
        {"question": "5. He ___ attend the meeting at 9 am tomorrow.", "options": ["has to", "might", "can"], "answer": "has to"},
        {"question": "6. She ___ come to the party, but she's not sure.", "options": ["may", "might", "must"], "answer": "might"},
    ]

    user_answers = []

    for idx, q in enumerate(questions):
        st.write(q["question"])
        user_answers.append(
            st.radio("", options=q['options'],index=None, key=f"q_{idx}")
        )

    if st.button("Check Answers"):
        score = sum(1 for idx, q in enumerate(questions) if user_answers[idx] == q['answer'])
        st.markdown(f"### Your Score: {score}/{len(questions)}")
        if score == len(questions):
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l1_t8_1_all_correct = True 
        else:
            st.error("Some of your answers are incorrect. Please review the rule section and try again.")
            st.session_state.tt_l1_t8_1_all_correct = False

    if st.session_state.get('tt_l1_t8_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L1_T8_1, key='tt_l1_t8_1_practice')

        with col2:
            if st.button('Next', key='tt_l1_t8_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l1_t8_1",
                task_id="TT_L1_T8_1",
                next_page_func=navigate_to_task1_8
            )

    
def TT_L2_T1_1():
    st.title("TT_L1_T1_1: Introduction")

    add_css()

    if "tt_l2_t1_1_start_time" not in st.session_state:
        st.session_state.tt_l2_t1_1_start_time = datetime.datetime.now()

    # Existing content for TT_L1_T1_1()
    st.markdown("""
    <div class="rule-frame">
        <h2>📚 Understanding Parts of Speech</h2>
        <p>Use the dropdown lists below to explore different parts of speech.</p>
    </div>
    """, unsafe_allow_html=True)

    # Part of Speech Selection
    col1, col2, col3, col4, col5 = st.columns(5)

    with col1:
        selected_determiner = st.selectbox('Determiner', ['a', 'the', 'some', 'any'], key='selectbox1')
    with col2:
        selected_noun = st.selectbox('Noun', ['car', 'dog', 'house', 'book'], key='selectbox2')
    with col3:
        selected_verb = st.selectbox('Verb', ['run', 'jump', 'swim', 'read'], key='selectbox3')
    with col4:
        selected_adjective = st.selectbox('Adjective', ['red', 'big', 'quick', 'blue'], key='selectbox4')
    with col5:
        selected_adverb = st.selectbox('Adverb', ['quickly', 'silently', 'well', 'badly'], key='selectbox5')

    # Understanding Phrases Section with updated yellow color
    st.markdown("""
    <div class="rule-frame" style="margin-top: 20px;">
        <h2>📚 Understanding Noun Phrases and Verb Phrases</h2>
        <p>A <span style="background-color: rgba(255, 255, 0, 0.5);">noun phrase</span> (yellow) is a group of words that functions as a noun in a sentence. It typically includes a noun and its modifiers.</p>
        <p>A <span style="background-color: rgba(255, 0, 0, 0.5);">verb phrase</span> (red) consists of a verb and any accompanying words, such as auxiliaries, complements, or modifiers.</p>
        <div style="padding: 10px;">
            <h3> Noun Phrases</h3>
            <div class="sentence-container">
                <span class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="det">a</span> 
                    <span class="noun">car</span>
                </span>
            </div>
            <div class="sentence-container">
                <span class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="det">the</span> 
                    <span class="adjective">red</span> 
                    <span class="noun">house</span>
                </span>
            </div>
        </div>
        <div style="padding: 10px;">
            <h3> Verb Phrases</h3>
            <div class="sentence-container">
                <span class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="verb">run</span>
                </span>
            </div>
            <div class="sentence-container">
                <span class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="verb">is running</span>
                </span>
            </div>
            <div class="sentence-container">
                <span class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="verb">run</span> 
                    <span class="adverb">quickly</span>
                </span>
            </div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section inside Green Frame with updated yellow color
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div class="sentence-container">
            <div class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                <span class="det">The</span> 
                <span class="noun">manager</span>
            </div>
            <div class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                <span class="verb">is reviewing</span>
            </div>
            <div class="prepositional-phrase">
                <span class="det">the</span> 
                <span class="noun">report.</span>
            </div>
        </div>
        <div class="sentence-container">
            <div class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                <span class="det">The</span> 
                <span class="noun">students</span>
            </div>
            <div class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                <span class="verb">are studying</span>
            </div>
            <div class="prepositional-phrase">
                <span class="prep">for</span> 
                <span class="det">the</span> 
                <span class="noun">exam.</span>
            </div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section with Drag and Drop (Kept as is)
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice</h2>
        <p>Practice combining noun and verb phrases by dragging and dropping them into the correct order to form sentences related to work and studies.</p>
    </div>
    """, unsafe_allow_html=True)

    # Drag-and-Drop Interface
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .draggable {
            padding: 10px;
            margin: 5px;
            background-color: rgba(255, 255, 0, 0.5); /* Less bright yellow for noun phrases */
            color: black;
            border-radius: 5px;
            cursor: grab;
        }
        .verb-phrase {
            background-color: rgba(255, 0, 0, 0.5);  /* Red for verb phrases */
            padding: 10px;
            margin: 5px;
            border-radius: 5px;
            cursor: grab;
        }
        .drop-container {
            display: flex;
            justify-content: center;
            min-height: 50px;
            border: 2px dashed #ccc; /* Neutral border color */
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px; /* Increased margin-top for better spacing */
        }
        .button-container button {
            padding: 8px 15px;
            background-color: white;
            color: #333;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            margin: 0 10px; /* Added margin between buttons */
            min-width: 100px; /* Ensured buttons have minimum width */
        }
    </style>
    """

    # Updated Drag-and-Drop JS without the "Next" button and with page reload on correct answers
    drag_and_drop_js = """
    <div class="container">
        <h4>Arrange the phrases to form the correct sentences</h4>
        <div class="drag-container">
            <div draggable="true" class="draggable">the project.</div>
            <div draggable="true" class="draggable">The manager</div>
            <div draggable="true" class="verb-phrase">is giving</div>
            <div draggable="true" class="draggable">The professor</div>
            <div draggable="true" class="verb-phrase">is working on</div>
            <div draggable="true" class="draggable">the report.</div>
            <div draggable="true" class="draggable">a lecture.</div>
            <div draggable="true" class="verb-phrase">is reviewing</div>
            <div draggable="true" class="draggable">The team</div>
        </div>
        <div id="drop-container-1" class="drop-container"></div>
        <div id="drop-container-2" class="drop-container"></div>
        <div id="drop-container-3" class="drop-container"></div>
        <div class="button-container">
            <button id="check-button">Check Answers</button>
            <!-- Removed the JavaScript "Next" button -->
        </div>
        <p id="result"></p>
    </div>

    <script>
        const draggables = document.querySelectorAll('.draggable, .verb-phrase');
        const dragContainer = document.querySelector('.drag-container');
        const dropContainers = document.querySelectorAll('.drop-container');
        const result = document.getElementById('result');
        const checkButton = document.getElementById('check-button');

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggable.classList.add('dragging');
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
            });
        });

        const containers = [dragContainer, ...dropContainers];

        containers.forEach(container => {
            container.addEventListener('dragover', (e) => {
                e.preventDefault();
                const afterElement = getDragAfterElement(container, e.clientX);
                const draggable = document.querySelector('.dragging');
                if (draggable) {  // Ensure a draggable element is being dragged
                    if (afterElement == null) {
                        container.appendChild(draggable);
                    } else {
                        container.insertBefore(draggable, afterElement);
                    }
                }
            });
        });

        function getDragAfterElement(container, x) {
            const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging), .verb-phrase:not(.dragging)')];

            return draggableElements.reduce((closest, child) => {
                const box = child.getBoundingClientRect();
                const offset = x - box.left - box.width / 2;
                if (offset < 0 && offset > closest.offset) {
                    return { offset: offset, element: child };
                } else {
                    return closest;
                }
            }, { offset: Number.NEGATIVE_INFINITY }).element;
        }

        checkButton.addEventListener('click', () => {
            const correctAnswers = [
                "The manager is reviewing the report.",
                "The professor is giving a lecture.",
                "The team is working on the project."
            ];

            let userAnswers = [];
            dropContainers.forEach((container) => {
                let sentence = Array.from(container.children)
                    .map((child) => child.textContent.trim())
                    .join(" ")
                    .trim();
                if (sentence && !sentence.endsWith(".")) {
                    sentence += ".";
                }
                userAnswers.push(sentence);
            });

            let allCorrect = userAnswers.every((answer, index) => answer === correctAnswers[index]);

            if (allCorrect) {
                result.textContent = "All answers are correct! Well done!";
                result.style.color = "green";
                // Append query parameter to URL and reload the page to trigger Streamlit rerun
                const currentUrl = new URL(window.location.href);
                if (currentUrl.searchParams.get('tt_l1_t1_1_correct') !== 'true') {
                    currentUrl.searchParams.set('tt_l1_t1_1_correct', 'true');
                    window.history.replaceState({}, '', currentUrl);
                    window.location.reload();  // Reload the page
                }
            } else {
                result.textContent = "Some answers are incorrect. Please try again.";
                result.style.color = "red";
                // Remove the correctness parameter if previously set
                const currentUrl = new URL(window.location.href);
                if (currentUrl.searchParams.has('tt_l1_t1_1_correct')) {
                    currentUrl.searchParams.delete('tt_l1_t1_1_correct');
                    window.history.replaceState({}, '', currentUrl);
                }
                // No reload needed; allow user to try again
            }
        });
    </script>
    """

    # Combine CSS and JS
    combined_html = drag_and_drop_css + drag_and_drop_js

    # Embed the HTML (drag-and-drop interface)
    components.html(combined_html, height=500, scrolling=True)

    if st.button("Next", key='tt_l2_t1_1_next'):
        end_time = datetime.datetime.now()
        start_time = st.session_state.tt_l2_t1_1_start_time
        time_diff = end_time - start_time
             # Convert timedelta to HH:MM:SS
        total_seconds = int(time_diff.total_seconds())
        hours, remainder = divmod(total_seconds, 3600)
        minutes, seconds = divmod(remainder, 60)
        time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
        try:
            h, m, s = map(int, time_spent_str.split(':'))
            time_obj = datetime.time(h, m, s)
        except ValueError as e:
            st.error(f"Error parsing time: {e}")
            time_obj = None  # fallback
        errors_info = {"error_count": 0}
        try:
            student_id = st.session_state.user_info.id
            task_id = "TT_L2_T1_1"
            record_task_done(
                    student_id=student_id,
                    task_id=task_id,
                    date=end_time,        # current datetime
                    time_spent=time_obj,
                    errors_dict=errors_info
                )
        except Exception as e:
                st.error(f"Error recording task: {e}")
                return

        st.session_state.tt_l2_t1_1_start_time = None
            
        navigate_to_tt_l2_t1_2()
        st.rerun()

         

def TT_L2_T1_2():
    st.title("Zero and First Conditional Sentences")

    if "tt_l2_t1_2_start_time" not in st.session_state:
        st.session_state.tt_l2_t1_2_start_time = datetime.datetime.now()

    add_css()

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📒 Rule</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details id="rule_details">
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Understanding Clauses:</strong> In English sentences, a clause is a group of words that contains a subject and a verb. Clauses can be independent (main clauses) or dependent (subordinate clauses).</p>
                <p><strong>Main Clause:</strong> A clause that can stand alone as a sentence. It contains a subject and a verb and expresses a complete thought.</p>
                <p><span class="example">Example: <span class="main-clause" style="background-color: lightgreen;">I <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">read</span> the book.</span></span></p>
                <p><strong>Subordinate Clause:</strong> A clause that cannot stand alone as a sentence. It provides additional information to the main clause.</p>
                <p><span class="example">Example: <span class="subordinate-clause" style="background-color: #FFD580;">If <span class="subject" style="font-weight:bold; text-decoration: underline; color: black;">I</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">read</span> the book</span>, <span class="main-clause" style="background-color: lightgreen;">I will understand the topic better.</span></span></p>
                <h3>Zero Conditional</h3>
                <p>The Zero Conditional is used to talk about things that are always true or very likely to happen. The structure is:</p>
                <ul>
                    <li><strong>Form:</strong> Present Simple 'if' clause, real conditions.</li>
                    <li><strong>Example:</strong> <span class="subordinate-clause" style="background-color: #FFD580;"><span class="conjunction" style="background-color: beige;">If</span> <span class="subject" style="font-weight:bold; text-decoration: underline; color: black;">you</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">heat</span> water</span>, <span class="main-clause" style="background-color: lightgreen;">it boils.</span></li>
                </ul>
                <h3>First Conditional</h3>
                <p>The First Conditional is used to talk about a likely or possible result in the future. The structure is:</p>
                <ul>
                    <li><strong>Form:</strong> Present Simple 'if' clause + 'will', future, likely outcome.</li>
                    <li><strong>Example:</strong> <span class="subordinate-clause" style="background-color: #FFD580;"><span class="conjunction" style="background-color: beige;">If</span> <span class="subject" style="font-weight:bold; text-decoration: underline; color: black;">it</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">rains</span></span>, <span class="main-clause" style="background-color: lightgreen;">we will stay home.</span></li>
                    <li><strong>Form:</strong> Present Simple 'if' clause + Modal, future, possible outcome.</li>
                    <li><strong>Example:</strong> <span class="subordinate-clause" style="background-color: #FFD580;"><span class="conjunction" style="background-color: beige;">If</span> <span class="subject" style="font-weight:bold; text-decoration: underline; color: black;">you</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">study</span></span>, <span class="main-clause" style="background-color: lightgreen;">you might pass the exam.</span></li>
                </ul>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📝 Examples</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Zero Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: #FFD580;"><span class="conjunction" style="background-color: beige;">If</span> <span class="subject" style="font-weight:bold; text-decoration: underline;">you</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">heat</span> water,</span> <span class="main-clause" style="background-color: lightgreen;"><span class="subject" style="font-weight:bold; text-decoration: underline;">it</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">boils</span>.</span>
                </div>
                <h3>Example 2: First Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: #FFD580;"><span class="conjunction" style="background-color: beige;">If</span> <span class="subject" style="font-weight:bold; text-decoration: underline;">you</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">study</span>,</span> <span class="main-clause" style="background-color: lightgreen;"><span class="subject" style="font-weight:bold; text-decoration: underline;">you</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">might pass</span> the exam.</span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

  # Practice Section
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Select the Correct Verb</h2>
        <p>Select the appropriate verb to complete the conditional sentences.</p>
    </div>
    """, unsafe_allow_html=True)

    # HTML and JavaScript for the updated practice task
    practice_html = """
    <div class="sentence-container">
        <p>1. If I <select id="verb1">
            <option value="">--Select--</option>
            <option value="have">have</option>
            <option value="had">had</option>
            <option value="will have">will have</option>
        </select> more time, I <select id="verb2">
            <option value="">--Select--</option>
            <option value="learn">learn</option>
            <option value="will learn">will learn</option>
            <option value="would learn">would learn</option>
        </select> a new skill.</p>
        <p>2. If they <select id="verb3">
            <option value="">--Select--</option>
            <option value="are">are</option>
            <option value="were">were</option>
            <option value="will be">will be</option>
        </select> more focused, they <select id="verb4">
            <option value="">--Select--</option>
            <option value="finish">finish</option>
            <option value="will finish">will finish</option>
            <option value="would finish">would finish</option>
        </select> the project on time.</p>
        <p>3. If water <select id="verb5">
            <option value="">--Select--</option>
            <option value="boils">boils</option>
            <option value="boil">boil</option>
            <option value="will boil">will boil</option>
        </select> at 100°C, it <select id="verb6">
            <option value="">--Select--</option>
            <option value="turn">turn</option>
            <option value="turns">turns</option>
            <option value="will turn">will turn</option>
        </select> into steam.</p>
        <p>4. If you <select id="verb7">
            <option value="">--Select--</option>
            <option value="heat">heat</option>
            <option value="heated">heated</option>
            <option value="will heat">will heat</option>
        </select> ice, it <select id="verb8">
            <option value="">--Select--</option>
            <option value="melt">melt</option>
            <option value="melts">melts</option>
            <option value="will melt">will melt</option>
        </select>.</p>
        <p>5. If he <select id="verb9">
            <option value="">--Select--</option>
            <option value="studies">studies</option>
            <option value="study">study</option>
            <option value="will study">will study</option>
        </select> harder, he <select id="verb10">
            <option value="">--Select--</option>
            <option value="passes">passes</option>
            <option value="will pass">will pass</option>
            <option value="pass">pass</option>
        </select> the test.</p>
        <button onclick="checkAnswers()">Check Answers</button>
        <p id="result"></p>
    </div>
    <script>
    function checkAnswers() {
        var verb1 = document.getElementById("verb1").value;
        var verb2 = document.getElementById("verb2").value;
        var verb3 = document.getElementById("verb3").value;
        var verb4 = document.getElementById("verb4").value;
        var verb5 = document.getElementById("verb5").value;
        var verb6 = document.getElementById("verb6").value;
        var verb7 = document.getElementById("verb7").value;
        var verb8 = document.getElementById("verb8").value;
        var verb9 = document.getElementById("verb9").value;
        var verb10 = document.getElementById("verb10").value;

        var score = 0;

        if (verb1 == "have") score++;
        if (verb2 == "will learn") score++;
        if (verb3 == "are") score++;
        if (verb4 == "will finish") score++;
        if (verb5 == "boils") score++;
        if (verb6 == "turns") score++;
        if (verb7 == "heat") score++;
        if (verb8 == "melts") score++;
        if (verb9 == "studies") score++;
        if (verb10 == "will pass") score++;

        var result = document.getElementById("result");
        if (score == 10) {
            result.innerHTML = "<span style='color: green;'>Great job! You selected all the correct answers.</span>";
            Streamlit.setComponentValue(true);
        } else {
            result.innerHTML = "<span style='color: red;'>You got " + score + "/10 correct. Please try again.</span>";
            Streamlit.setComponentValue(false);
        }
    }
    </script>
    """

    # Render the HTML and JavaScript using Streamlit's components.html
    component_value = components.html(practice_html, height=400)

    col1, col2 = st.columns(2)
    with col1:
        st.button('Practice', on_click=navigate_to_practice_TT_L2_T1_2, key='tt_l2_t1_2_practice')
    with col2:
        if st.button('Next', key='tt_l2_t1_2_next'):
            end_time = datetime.datetime.now()
            start_time = st.session_state.tt_l2_t1_2_start_time
            time_diff = end_time - start_time
                # Convert timedelta to HH:MM:SS
            total_seconds = int(time_diff.total_seconds())
            hours, remainder = divmod(total_seconds, 3600)
            minutes, seconds = divmod(remainder, 60)
            time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
            try:
                h, m, s = map(int, time_spent_str.split(':'))
                time_obj = datetime.time(h, m, s)
            except ValueError as e:
                st.error(f"Error parsing time: {e}")
                time_obj = None  # fallback
            errors_info = {"error_count": 0}
            try:
                student_id = st.session_state.user_info.id
                task_id = "TT_L2_T1_2"
                record_task_done(
                        student_id=student_id,
                        task_id=task_id,
                        date=end_time,        # current datetime
                        time_spent=time_obj,
                        errors_dict=errors_info
                    )
            except Exception as e:
                    st.error(f"Error recording task: {e}")
                    return

            st.session_state.tt_l2_t1_2_start_time = None
                
            navigate_to_tt_l2_t1_3()
            st.rerun()


        if st.button('Back', key='tt_l2_t1_2_back'):
            back_to_tt_l2_t1_1()
            st.rerun()



def TT_L2_T1_3():

    st.title("Zero and First Conditional Sentences")
    
    if "tt_l2_t1_3_start_time" not in st.session_state:
        st.session_state.tt_l2_t1_3_start_time = datetime.datetime.now()
    
    add_css()
    
    # Add CSS to fix spacing in the Examples section
    st.markdown("""
    <style>
    .sentence-container span {
        display: inline;
        margin-right: 5px;
    }
    </style>
    """, unsafe_allow_html=True)

    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
            <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📒 Rule</h2>
            <div style="padding: 10px; border-radius: 5px;">
                <details id="rule_details">
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Zero Conditional:</strong> The Zero Conditional is used for things that are always true or very likely to happen. It refers to general truths or facts. It’s formed using the Present Simple tense in both the 'if' clause and the main clause.</p>
                <p><em>Example:</em> <span class="subject" style="font-weight:bold">If</span> <span class="subject" style="font-weight:bold">you</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">boil</span> water, <span class="subject" style="font-weight:bold">it</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">turns</span> into steam.</p>
                <p><strong>First Conditional:</strong> The First Conditional is used to talk about likely or possible results in the future. It’s formed using the Present Simple tense in the 'if' clause and 'will' or a modal verb in the main clause.</p>
                <p><em>Example:</em> <span class="subject" style="font-weight:bold">If</span> <span class="subject" style="font-weight:bold">it</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">rains</span> tomorrow, <span class="subject" style="font-weight:bold">we</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">will cancel</span> the picnic.</p>
                </details>
            </div>
        </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📝 Examples</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Zero Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">If</span> 
                        <span class="subject" style="font-weight:bold">you</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">heat</span> 
                        ice,</span>
                    <span class="main-clause" style="background-color: lightgreen;">
                        <span class="subject" style="font-weight:bold">it</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">melts</span>.
                    </span>
                </div>
                <h3>First Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">If</span> 
                        <span class="subject" style="font-weight:bold">you</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">study</span>,</span>
                    <span class="main-clause" style="background-color: lightgreen;">
                        <span class="subject" style="font-weight:bold">you</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">will pass</span> 
                        the exam.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Match the Sentence Halves</h2>
        <p>Drag and drop to match the first half of the sentence with the correct second half.</p>
    </div>
    """, unsafe_allow_html=True)

    # CSS for Drag-and-Drop Component
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .draggable {
            padding: 10px;
            margin: 5px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            min-width: 200px;
            text-align: center;
        }
        .draggable:hover {
            background-color: #d1e7f5;
        }
        .dropzone {
            min-height: 50px;
            min-width: 200px;
            border: 2px dashed #64b5f6;
            border-radius: 5px;
            padding: 5px;
            margin: 5px;
            text-align: center;
        }
        .dropzone.dragging-over {
            background-color: #d1e7f5;
        }
        .sentence-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
    """

    # JavaScript for Drag-and-Drop Functionality with modifications
    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <!-- Draggable items will be inserted here by JavaScript -->
        </div>
        <div class="sentence-container" id="sentenceContainer">
            <!-- Dropzones will be inserted here by JavaScript -->
        </div>
        <div class="button-container">
            <button id="checkButton" class="st-button">Check Answers</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        const sentences = [
            ["If I have spare time,", "I always read a book."],
            ["If you tell them your reasons this time,", "your parents will accept it."],
            ["You can get to my house", "if you take the number 35 bus."],
            ["If you don’t do some sports activities,", "you will gain a lot of weight."]
        ];

        // Shuffle the sentences
        function shuffle(array) {
            let currentIndex = array.length, temporaryValue, randomIndex;
            while (0 !== currentIndex) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }
            return array;
        }

        // Create draggable items and dropzones
        const dragContainer = document.getElementById('dragContainer');
        const sentenceContainer = document.getElementById('sentenceContainer');

        // Flatten the sentence halves and shuffle them
        let sentenceHalves = sentences.flat();
        shuffle(sentenceHalves);

        sentenceHalves.forEach((text, index) => {
            const draggable = document.createElement('div');
            draggable.classList.add('draggable');
            draggable.setAttribute('draggable', 'true');
            draggable.setAttribute('id', 'drag' + index);
            draggable.textContent = text;
            dragContainer.appendChild(draggable);
        });

        // Create dropzones
        for (let i = 0; i < sentences.length * 2; i++) {
            const dropzone = document.createElement('div');
            dropzone.classList.add('dropzone');
            dropzone.setAttribute('id', 'drop' + i);
            sentenceContainer.appendChild(dropzone);
        }

        let draggedItem = null;

        document.addEventListener('dragstart', function(event) {
            if (event.target.classList.contains('draggable')) {
                draggedItem = event.target;
                setTimeout(() => {
                    event.target.style.display = 'none';
                }, 0);
            }
        });

        document.addEventListener('dragend', function(event) {
            if (event.target.classList.contains('draggable')) {
                setTimeout(() => {
                    event.target.style.display = 'block';
                    draggedItem = null;
                }, 0);
            }
        });

        document.addEventListener('dragover', function(event) {
            event.preventDefault();
        });

        document.addEventListener('drop', function(event) {
            if (event.target.classList.contains('dropzone') || event.target.id === 'dragContainer') {
                event.preventDefault();
                if (draggedItem) {
                    if (event.target.classList.contains('dropzone')) {
                        if (event.target.firstChild) {
                            dragContainer.appendChild(event.target.firstChild);
                        }
                        event.target.appendChild(draggedItem);
                    } else {
                        dragContainer.appendChild(draggedItem);
                    }
                }
            }
        });

        document.getElementById('checkButton').addEventListener('click', function() {
            const dropzones = document.querySelectorAll('.dropzone');
            let score = 0;
            let total = sentences.length;
            let userAnswers = [];
            for (let i = 0; i < dropzones.length; i += 2) {
                const firstHalf = dropzones[i].textContent.trim();
                const secondHalf = dropzones[i+1].textContent.trim();
                if (firstHalf && secondHalf) {
                    for (let j = 0; j < sentences.length; j++) {
                        if ((sentences[j][0] === firstHalf && sentences[j][1] === secondHalf) ||
                            (sentences[j][0] === secondHalf && sentences[j][1] === firstHalf)) {
                            score += 1;
                            break;
                        }
                    }
                }
            }
            const result = document.getElementById('result');
            if (score === total) {
                result.textContent = 'Great job! All sentences are correctly matched.';
                result.style.color = 'green';
                // Communicate with Streamlit to display the buttons
                Streamlit.setComponentValue(true);
            } else {
                result.textContent = 'Some sentences are incorrect. Please try again.';
                result.style.color = 'red';
            }
        });
    </script>
    """

    components.html(drag_and_drop_css + drag_and_drop_js, height=700)

    col1, col2 = st.columns(2)
    with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L2_T1_3, key='tt_l2_t1_3_practice')

    with col2:
            if st.button('Next', key='tt_l2_t1_3_next'):
                end_time = datetime.datetime.now()
                start_time = st.session_state.tt_l2_t1_3_start_time
                time_diff = end_time - start_time
                    # Convert timedelta to HH:MM:SS
                total_seconds = int(time_diff.total_seconds())
                hours, remainder = divmod(total_seconds, 3600)
                minutes, seconds = divmod(remainder, 60)
                time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
                try:
                    h, m, s = map(int, time_spent_str.split(':'))
                    time_obj = datetime.time(h, m, s)
                except ValueError as e:
                    st.error(f"Error parsing time: {e}")
                    time_obj = None  # fallback
                errors_info = {"error_count": 0}
                try:
                    student_id = st.session_state.user_info.id
                    task_id = "TT_L2_T1_3"
                    record_task_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=end_time,        # current datetime
                            time_spent=time_obj,
                            errors_dict=errors_info
                        )
                except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                st.session_state.tt_l2_t1_3_start_time = None
                    
                navigate_to_task2_1()
                st.rerun()

            if st.button('Back', key='tt_l2_t1_3_back'):
                back_to_tt_l2_t1_2()
                st.rerun()


def TT_L2_T2_1():

    st.title("Present Perfect vs Past Simple")

    if "tt_l2_t2_1_start_time" not in st.session_state:
        st.session_state.tt_l2_t2_1_start_time = datetime.datetime.now()
    
    add_css()
    
    # Fix spacing in the Examples section
    st.markdown("""
    <style>
    .sentence-container span {
        display: inline-block;
        margin-right: 5px;
    }
    </style>
    """, unsafe_allow_html=True)

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📒 Rule</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details id="rule_details">
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Present Perfect:</strong> The Present Perfect is used to talk about actions that happened at an unspecified time in the past, often focusing on the result of the action or its connection to the present. It is formed using 'have/has' + the past participle of the verb.</p>
                <p><em>Key Words:</em> <span style="background-color: lightblue;">ever</span>, <span style="background-color: lightblue;">never</span>, <span style="background-color: lightblue;">already</span>, <span style="background-color: lightblue;">just</span>, <span style="background-color: lightblue;">yet</span>, <span style="background-color: lightblue;">for</span>, <span style="background-color: lightblue;">since</span></p>
                <p><em>Example:</em> 
                <span class="subject" style="font-weight:bold;">She</span> 
                <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">has</span> 
                <span style="background-color: lightblue;">already</span> 
                <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">visited</span> 
                Paris.</p>
                <br>
                <p><strong>Past Simple:</strong> The Past Simple is used to talk about actions that happened at a specific time in the past. It is formed using the base form of the verb + <span style="background-color: lightblue;">'ed'</span> for regular verbs or the second form for irregular verbs.</p>
                <p><em>Key Words:</em> <span style="background-color: lightblue;">yesterday</span>, <span style="background-color: lightblue;">last week</span>, <span style="background-color: lightblue;">ago</span>, <span style="background-color: lightblue;">in 2010</span></p>
                <p><em>Example:</em> 
                <span class="subject" style="font-weight:bold;">She</span> 
                <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">visited</span>  
                Paris
                <span style="background-color: lightblue;">last year</span>.
            </p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📝 Examples</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Present Perfect</h3>
                <div class="sentence-container">
                    <span class="subject" style="font-weight:bold; text-decoration:underline;">They</span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">have lived</span>  
                    in this house 
                    <span style="background-color: lightblue;"> since 2004</span>.
                </div>
                <h3>Past Simple</h3>
                <div class="sentence-container">
                    <span class="subject" style="font-weight:bold; text-decoration:underline">They</span> 
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">moved</span>  
                    to a new house
                    <span style="background-color: lightblue;"> last year</span>.
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)


    # Practice Section: Drag and Drop
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Drag and Drop to Complete Sentences</h2>
        <p>Drag and drop the correct verb forms into the blanks to complete the sentences.</p>
    </div>
    """, unsafe_allow_html=True)

    # CSS for Drag-and-Drop Component with Adjusted Drop Zones
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        .draggable {
            padding: 5px 10px;
            margin: 5px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
            min-width: 100px;
            text-align: center;
        }
        .draggable:hover {
            background-color: #d1e7f5;
        }
        .dropzone {
            height: 40px;
            width: 140px;
            border: 2px dashed #64b5f6;
            border-radius: 5px;
            padding: 5px;
            margin: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .dropzone.dragging-over {
            background-color: #d1e7f5;
        }
        .sentence-container {
            margin-bottom: 15px;
            text-align: left;
            font-size: 18px;
            display: flex;
            align-items: center;
            gap: 10px; /* Adds spacing between sentence elements */
        }
        .button-container {
            text-align: center;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
    """

    # JavaScript for Drag-and-Drop Logic
    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <!-- Draggable options -->
            <div draggable="true" class="draggable" id="option1">have stuck</div>
            <div draggable="true" class="draggable" id="option2">stuck</div>
            <div draggable="true" class="draggable" id="option3">have known</div>
            <div draggable="true" class="draggable" id="option4">knew</div>
            <div draggable="true" class="draggable" id="option5">has just finished</div>
            <div draggable="true" class="draggable" id="option6">just has finished</div>
            <div draggable="true" class="draggable" id="option7">have been</div>
            <div draggable="true" class="draggable" id="option8">have never been</div>
            <div draggable="true" class="draggable" id="option9">lived</div>
            <div draggable="true" class="draggable" id="option10">has lived</div>
        </div>
        <div class="drop-container">
            <!-- Sentences with dropzones -->
            <div class="sentence-container">
                <span>1. I </span><div class="dropzone" id="drop1"></div><span> in the traffic jam for at least two hours.</span>
            </div>
            <div class="sentence-container">
                <span>2. We </span><div class="dropzone" id="drop2"></div><span> each other since we moved to Bangkok.</span>
            </div>
            <div class="sentence-container">
                <span>3. Britney </span><div class="dropzone" id="drop3"></div><span> her Judo class. She must be very tired now.</span>
            </div>
            <div class="sentence-container">
                <span>4. I </span><div class="dropzone" id="drop4"></div><span> to Puerto Rico before. This is my very first time.</span>
            </div>
            <div class="sentence-container">
                <span>5. She </span><div class="dropzone" id="drop5"></div><span> in Bangkok in 2022.</span>
            </div>
        </div>
        <button id="checkButton" class="st-button">Check Answers</button>
        <p id="result"></p>
    </div>
    <script>
        const correctAnswers = {
            drop1: ["have stuck"],
            drop2: ["have known"],
            drop3: ["has just finished"],
            drop4: ["have never been"],
            drop5: ["has lived"]
        };

        const draggables = document.querySelectorAll('.draggable');
        const dropzones = document.querySelectorAll('.dropzone');
        const dragContainer = document.getElementById('dragContainer');

        let draggedItem = null;

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggedItem = draggable;
                setTimeout(() => draggable.style.display = 'none', 0);
            });

            draggable.addEventListener('dragend', () => {
                setTimeout(() => {
                    draggable.style.display = 'block';
                    draggedItem = null;
                }, 0);
            });
        });

        dropzones.forEach(dropzone => {
            dropzone.addEventListener('dragover', e => {
                e.preventDefault();
                dropzone.classList.add('dragging-over');
            });

            dropzone.addEventListener('dragleave', () => {
                dropzone.classList.remove('dragging-over');
            });

            dropzone.addEventListener('drop', e => {
                e.preventDefault();
                dropzone.classList.remove('dragging-over');
                if (draggedItem) {
                    dropzone.appendChild(draggedItem);
                }
            });
        });

        document.getElementById('checkButton').addEventListener('click', () => {
            let score = 0;

            dropzones.forEach(dropzone => {
                const words = Array.from(dropzone.children).map(child => child.textContent.trim());
                const correctWords = correctAnswers[dropzone.id];
                if (words.every(word => correctWords.includes(word))) {
                    score++;
                    dropzone.style.borderColor = "green";
                } else {
                    dropzone.style.borderColor = "red";
                }
            });

            const result = document.getElementById('result');
            if (score === Object.keys(correctAnswers).length) {
                result.textContent = 'Great job! All sentences are correct.';
                result.style.color = 'green';
                Streamlit.setComponentValue(true);
            } else {
                result.textContent = `You got ${score}/${Object.keys(correctAnswers).length} correct. Please try again.`;
                result.style.color = 'red';
            }
        });
    </script>
    """

    # Combine and Render Component
    components.html(drag_and_drop_css + drag_and_drop_js, height=800)

    col1, col2 = st.columns(2)
    with col1:
        st.button('Practice', on_click=navigate_to_practice_TT_L2_T2_1, key='tt_l2_t2_1_practice')

    with col2:
            if st.button('Next', on_click=navigate_to_task2_2, key='tt_l2_t2_1_next'):
                end_time = datetime.datetime.now()
                start_time = st.session_state.tt_l2_t2_1_start_time
                time_diff = end_time - start_time
                    # Convert timedelta to HH:MM:SS
                total_seconds = int(time_diff.total_seconds())
                hours, remainder = divmod(total_seconds, 3600)
                minutes, seconds = divmod(remainder, 60)
                time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
                try:
                    h, m, s = map(int, time_spent_str.split(':'))
                    time_obj = datetime.time(h, m, s)
                except ValueError as e:
                    st.error(f"Error parsing time: {e}")
                    time_obj = None  # fallback
                errors_info = {"error_count": 0}

                try:
                    student_id = st.session_state.user_info.id
                    task_id = "TT_L2_T2_1"
                    record_task_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=end_time,        # current datetime
                            time_spent=time_obj,
                            errors_dict=errors_info
                        )
                except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                st.session_state.tt_l2_t2_1_start_time = None
                    
                navigate_to_task2_2() 
                st.rerun()


def TT_L2_T3_1():
    st.title("Gerunds and Infinitives")

    if 'tt_l2_t3_1_all_correct' not in st.session_state:
        st.session_state.tt_l2_t2_1_all_correct = False
    
    if "tt_l2_t3_1_start_time" not in st.session_state:
        st.session_state.tt_l2_t3_1_start_time = datetime.datetime.now()
    
    if "tt_l2_t3_1_error_count" not in st.session_state:
        st.session_state.tt_l2_t3_1_error_count = 0


    add_css()

    # Fix spacing in the Examples section
    st.markdown("""
    <style>
    .sentence-container span {
        display: inline;
        margin-right: 5px;
    }
    .verb {
        font-weight: bold;
        text-decoration: underline;
        color: blue;
    }
    .object {
        font-weight: bold;
        text-decoration: underline;
        color: green;
    }
    </style>
    """, unsafe_allow_html=True)

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details id="rule_details">
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Understanding Gerunds and Infinitives:</strong></p>
                <p>A <strong>gerund</strong> is a verb form that ends in <strong>-ing</strong> and functions as a noun in a sentence.</p>
                <p>An <strong>infinitive</strong> is the base form of a verb, often preceded by <strong>to</strong>, and can function as a noun, adjective, or adverb.</p>
                <p><strong>When to Use Gerunds:</strong></p>
                <ul>
                    <li>After certain verbs (e.g., enjoy, mind, avoid): e.g., <span><strong>I</strong> <span class="verb">enjoy</span> <span class="verb">reading</span> <span class="object">books</span>.</span></li>
                    <li>As the subject of a sentence: e.g., <span><span class="verb">Swimming</span> is fun.</span></li>
                </ul>
                <p><strong>When to Use Infinitives:</strong></p>
                <ul>
                    <li>After certain verbs (e.g., decide, promise, afford): e.g., <span><strong>She</strong> <span class="verb">decided</span> <span class="verb">to leave</span> early.</span></li>
                    <li>After adjectives: e.g., <span>It's easy <span class="verb">to learn</span> English.</span></li>
                    <li>To express purpose: e.g., <span><strong>He</strong> went to the store <span class="verb">to buy</span> <span class="object">milk</span>.</span></li>
                </ul>
                <p><strong>Special Cases:</strong></p>
                <ul>
                    <li>After verbs like <strong>make</strong> and <strong>let</strong>, use the base form of the verb without <strong>to</strong>: e.g., <span><strong>They</strong> <span class="verb">let</span> <span class="object">him</span> <span class="verb">leave</span> early.</span></li>
                    <li>Some verbs can be followed by either a gerund or an infinitive, sometimes with a change in meaning.</li>
                </ul>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <p>Here are some examples of sentences with gerunds and infinitives:</p>
                <div class="sentence-container">
                    <span><strong>I</strong></span>
                    <span class="verb">enjoy</span>
                    <span class="verb">reading</span>
                    <span class="object">books</span>.
                </div>
                <div class="sentence-container">
                    <span><strong>She</strong></span>
                    <span class="verb">decided</span>
                    <span class="verb">to leave</span>
                    early.
                </div>
                <div class="sentence-container">
                    <span><strong>They</strong></span>
                    <span class="verb">let</span>
                    <span class="object">him</span>
                    <span class="verb">leave</span>
                    early.
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Choose the Correct Form</h2>
        <p>Select the correct form of the verb to complete each sentence.</p>
    </div>
    """, unsafe_allow_html=True)

    # Questions and Answers
    questions = [
        {"question": "1. So would you mind ___ Mr. and Mrs. Thomas.", "options": ["telling", "to tell", "tell"], "answer": "telling"},
        {"question": "2. I would like ___ there a few years to finish studying and to have my own money to start thinking of traveling.", "options": ["stay", "staying", "to stay"], "answer": "to stay"},
        {"question": "3. She makes me ___ when I'm sad.", "options": ["to smile", "smile", "smiling"], "answer": "smile"},
        {"question": "4. I would like you ___ to a picnic on Saturday.", "options": ["to come", "coming", "come"], "answer": "to come"},
        {"question": "5. Your parents want me ___ on holiday with them this summer.", "options": ["going", "to go", "go"], "answer": "to go"},
    ]

    user_answers = []
    for idx, q in enumerate(questions):
        st.write(q["question"])
        user_answer = st.radio("", q["options"], key=f"q_{idx}", index=None)
        user_answers.append(user_answer)

    if st.button("Check Answers"):
        score = 0
        total = len(questions)
        for idx, q in enumerate(questions):
            if user_answers[idx] == q["answer"]:
                score += 1
            else:
                score += 0
                
        st.write(f"**Your Score: {score}/{total}**")
        if score == total:
            st.success(f"Great job! You answered all {score} questions correctly.")
            st.session_state.tt_l2_t3_1_all_correct = True  # Correctly update session state
        else:
            st.error(f"You got {score} out of {len(questions)} correct. Try again.")
            st.session_state.tt_l2_t3_1_error_count += 1
                
    if st.session_state.get('tt_l2_t3_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L2_T3_1, key='tt_l2_t3_1_practice')

        with col2:
            if st.button('Next', key='tt_l2_t3_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l2_t3_1",
                task_id="TT_L2_T3_1",
                next_page_func=navigate_to_tt_l2_t3_2
            )



def TT_L2_T3_2():
    st.title("Gerunds and Infinitives in Compound Sentences")
    
    if "tt_l2_t3_2_start_time" not in st.session_state:
        st.session_state.tt_l2_t3_2_start_time = datetime.datetime.now()

    add_css()
    
    # Fix spacing and alignment in the Examples section
    st.markdown("""
    <style>
    .sentence-container {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .sentence-container span {
        display: inline;
        margin-right: 5px;
    }
    .main-clause, .conjunction {
        display: inline;
    }
    </style>
    """, unsafe_allow_html=True)
    
    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
            <h2>📒 Rule</h2>
            <div>
                <details id="rule_details">
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                    <p>In this lesson, we focus on <strong>compound sentences</strong>. A compound sentence consists of two independent clauses joined by a coordinating conjunction (e.g., 'and', 'but', 'or'). Each clause contains its own subject and verb.</p>
                    <p>Here are some examples:</p>
                    <p><strong>Example:</strong> She enjoys reading books, and he doesn’t mind writing stories.</p>
                    <ul>
                        <li><strong>Gerunds:</strong> These are verb forms that end in '-ing' and function as nouns.</li>
                        <li><strong>Infinitives:</strong> Infinitives are base verbs often preceded by 'to' (e.g., to read, to write).</li>
                    </ul>
                </details>
            </div>
        </div>
    """, unsafe_allow_html=True)

    # Example Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Compound Sentence with Gerund</h3>
                <div class="sentence-container">
                    <span class="main-clause">
                        <span class="subject">She</span>
                        <span class="verb" style="text-decoration: underline;">enjoys</span>
                        <span class="verb" style="text-decoration: underline;">reading</span>
                        <span class="noun">books</span>
                    </span>
                    <span class="conjunction">, and</span>
                    <span class="main-clause">
                        <span class="subject">he</span>
                        <span class="verb" style="text-decoration: underline;">doesn't mind</span>
                        <span class="verb" style="text-decoration: underline;">writing</span>
                        <span class="noun">stories</span>.
                    </span>
                </div>
                <h3>Example 2: Compound Sentence with Infinitive</h3>
                <div class="sentence-container">
                    <span class="main-clause">
                        <span class="subject">They</span>
                        <span class="verb" style="text-decoration: underline;">want</span>
                        <span class="verb" style="text-decoration: underline;">to play</span>
                        <span class="noun">soccer</span>
                    </span>
                    <span class="conjunction">, but</span>
                    <span class="main-clause">
                        <span class="subject">we</span>
                        <span class="verb" style="text-decoration: underline;">decided</span>
                        <span class="verb" style="text-decoration: underline;">to watch</span>
                        <span class="noun">a movie</span>.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Construct Compound Sentences
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Construct Compound Sentences</h2>
        <p>Create compound sentences using the dropdown lists below. The sentences should correctly match subjects with verbs, gerunds, and infinitives.</p>
    </div>
    """, unsafe_allow_html=True)

    # Dropdown options for constructing sentences with more distractors
    subjects = ['She', 'He', 'They', 'We', 'I']
    subjects2 = ['she', 'he', 'they', 'we', 'I']
    conjunctions = ['and', 'but', 'or']
    verbs_followed_by_gerunds_singular = ['enjoys', "doesn't mind", 'suggests', 'recommends', 'avoids', 'likes']
    verbs_followed_by_gerunds_plural = ['enjoy', "don't mind", 'suggest', 'recommend', 'avoid', 'like']
    verbs_followed_by_infinitives_singular = ['wants', 'needs', 'decides', 'hopes', 'expects', 'plans']
    verbs_followed_by_infinitives_plural = ['want', 'need', 'decide', 'hope', 'expect', 'plan']
    gerunds = ['reading', 'writing', 'swimming', 'running', 'cooking', 'dancing']
    infinitives = ['to read', 'to write', 'to swim', 'to run', 'to cook', 'to dance']

    col1, col2, col3, col4, col5 = st.columns(5)

    with col1:
        subject1 = st.selectbox('Subject 1', subjects, key='subject1')
    with col2:
        if subject1 in ['She', 'He']:
            verb_gerund = st.selectbox('Verb (Gerund)', verbs_followed_by_gerunds_singular, key='verb_gerund')
        else:
            verb_gerund = st.selectbox('Verb (Gerund)', verbs_followed_by_gerunds_plural, key='verb_gerund')
    with col3:
        gerund = st.selectbox('Gerund', gerunds, key='gerund')
    with col4:
        conjunction = st.selectbox('Conjunction', conjunctions, key='conjunction')
    with col5:
        subject2 = st.selectbox('Subject 2', subjects2, key='subject2')
        if subject2.capitalize() in ['She', 'He']:
            verb_infinitive = st.selectbox('Verb (Infinitive)', verbs_followed_by_infinitives_singular, key='verb_infinitive')
        else:
            verb_infinitive = st.selectbox('Verb (Infinitive)', verbs_followed_by_infinitives_plural, key='verb_infinitive')
        infinitive = st.selectbox('Infinitive', infinitives, key='infinitive')

    # Constructed sentence
    gerund_sentence = f"{subject1} {verb_gerund} {gerund}, {conjunction} {subject2} {verb_infinitive} {infinitive}."

    st.markdown(f"""
    ### Your Sentence
    <div class="sentence-container">{gerund_sentence}</div>
    """, unsafe_allow_html=True)

    # Checking logic for the constructed sentence
    correct_sentences = [
        f"{subject1} {verb_gerund} {gerund}, {conjunction} {subject2} {verb_infinitive} {infinitive}."
    ]
    # You can add more valid combinations to the list if needed.

    if st.button("Check Sentence"):
        if gerund_sentence in correct_sentences:
            st.success("Great job! Your sentence is correct.")
        else:
            st.error("There might be an issue with your sentence. Please check the verb forms and subjects.")

    # Final Practice: Drag-and-Drop Task to Match Compound Sentences
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Match the Sentence Halves</h2>
        <p>Drag the correct sentence half into the appropriate blank to complete the compound sentences.</p>
    </div>
    """, unsafe_allow_html=True)

    # CSS for Drag-and-Drop Component
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .drag-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
        }
        .draggable {
            padding: 10px;
            margin: 5px;
            background-color: #f0f0f0;
            border: 2px solid #64b5f6;
            border-radius: 5px;
            cursor: pointer;
            min-width: 200px;
            text-align: center;
        }
        .draggable:hover {
            background-color: #d1e7f5;
        }
        .dropzone {
            min-height: 50px;
            min-width: 200px;
            border: 2px dashed #64b5f6;
            border-radius: 5px;
            padding: 5px;
            margin: 5px;
            text-align: center;
        }
        .dropzone.dragging-over {
            background-color: #d1e7f5;
        }
        .sentence-container {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 18px;
            margin-bottom: 10px;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
    """

    # JavaScript for Drag-and-Drop Functionality with modifications
    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <!-- Draggable items will be inserted here by JavaScript -->
        </div>
        <div class="sentence-container">
            <span>As soon as the bus arrived,</span>
            <div class="dropzone" id="drop1"></div>
        </div>
        <div class="sentence-container">
            <span>Rich people could become poor,</span>
            <div class="dropzone" id="drop2"></div>
        </div>
        <div class="sentence-container">
            <span>Because of the Online system in convenient stores,</span>
            <div class="dropzone" id="drop3"></div>
        </div>
        <div class="sentence-container">
            <span>Although the bus has arrived,</span>
            <div class="dropzone" id="drop4"></div>
        </div>
        <div class="button-container">
            <button id="checkButton" class="st-button">Check Answers</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        const sentences = [
            "everyone rushed to get on it because the rain was pouring heavily.",
            "because they spend more money than they could earn.",
            "people can use counter services to pay all their bills.",
            "I will wait outside and breathe fresh air for a while."
        ];

        // Shuffle the sentences
        function shuffle(array) {
            let currentIndex = array.length, temporaryValue, randomIndex;
            while (0 !== currentIndex) {
                randomIndex = Math.floor(Math.random() * currentIndex);
                currentIndex -= 1;
                temporaryValue = array[currentIndex];
                array[currentIndex] = array[randomIndex];
                array[randomIndex] = temporaryValue;
            }
            return array;
        }

        const shuffledSentences = shuffle(sentences.slice());

        const dragContainer = document.getElementById('dragContainer');

        // Create draggable items
        shuffledSentences.forEach((sentence, index) => {
            const draggable = document.createElement('div');
            draggable.classList.add('draggable');
            draggable.setAttribute('draggable', 'true');
            draggable.setAttribute('id', 'drag' + index);
            draggable.textContent = sentence;
            dragContainer.appendChild(draggable);
        });

        let draggedItem = null;

        document.addEventListener('dragstart', function(event) {
            if (event.target.classList.contains('draggable')) {
                draggedItem = event.target;
                setTimeout(() => {
                    event.target.style.display = 'none';
                }, 0);
            }
        });

        document.addEventListener('dragend', function(event) {
            if (event.target.classList.contains('draggable')) {
                setTimeout(() => {
                    event.target.style.display = 'block';
                    draggedItem = null;
                }, 0);
            }
        });

        document.addEventListener('dragover', function(event) {
            event.preventDefault();
        });

        document.addEventListener('drop', function(event) {
            if (event.target.classList.contains('dropzone') || event.target.id === 'dragContainer') {
                event.preventDefault();
                if (draggedItem) {
                    if (event.target.classList.contains('dropzone')) {
                        if (event.target.firstChild) {
                            dragContainer.appendChild(event.target.firstChild);
                        }
                        event.target.appendChild(draggedItem);
                    } else {
                        dragContainer.appendChild(draggedItem);
                    }
                }
            }
        });

        document.getElementById('checkButton').addEventListener('click', function() {
            const dropzones = document.querySelectorAll('.dropzone');
            let score = 0;
            const correctAnswers = {
                "drop1": "everyone rushed to get on it because the rain was pouring heavily.",
                "drop2": "because they spend more money than they could earn.",
                "drop3": "people can use counter services to pay all their bills.",
                "drop4": "I will wait outside and breathe fresh air for a while."
            };
            dropzones.forEach(dropzone => {
                const dropId = dropzone.id;
                const text = dropzone.textContent.trim();
                if (correctAnswers[dropId] === text) {
                    dropzone.style.borderColor = 'green';
                    score += 1;
                } else {
                    dropzone.style.borderColor = 'red';
                }
            });
            const result = document.getElementById('result');
            if (score === dropzones.length) {
                result.textContent = 'Great job! All sentences are correctly matched.';
                result.style.color = 'green';
                // Communicate with Streamlit to display the buttons
                Streamlit.setComponentValue(true);
            } else {
                result.textContent = `You got ${score} out of ${dropzones.length} correct. Please try again.`;
                result.style.color = 'red';
            }
        });
    </script>
    """

    components.html(drag_and_drop_css + drag_and_drop_js, height=700)


    col1, col2 = st.columns(2)
    with col1:
        st.button('Practice', on_click=navigate_to_practice_TT_L2_T3_2, key='tt_l2_t3_2_practice')

    with col2:
        if st.button('Next', key='tt_l2_t3_2_next'):
            end_time = datetime.datetime.now()
            start_time = st.session_state.tt_l2_t3_2_start_time
            time_diff = end_time - start_time
                # Convert timedelta to HH:MM:SS
            total_seconds = int(time_diff.total_seconds())
            hours, remainder = divmod(total_seconds, 3600)
            minutes, seconds = divmod(remainder, 60)
            time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
            try:
                h, m, s = map(int, time_spent_str.split(':'))
                time_obj = datetime.time(h, m, s)
            except ValueError as e:
                st.error(f"Error parsing time: {e}")
                time_obj = None  # fallback
            errors_info = {"error_count": 0}
            try:
                student_id = st.session_state.user_info.id
                task_id = "TT_L2_T3_2"
                record_task_done(
                        student_id=student_id,
                        task_id=task_id,
                        date=end_time,        # current datetime
                        time_spent=time_obj,
                        errors_dict=errors_info
                    )
            except Exception as e:
                    st.error(f"Error recording task: {e}")
                    return

            st.session_state.tt_l2_t3_2_start_time = None
                
            navigate_to_task2_3()
            st.rerun()


        if st.button('Back', key='tt_l2_t3_2_back'):
            back_to_tt_l2_t3_1()
            st.rerun()
               

def TT_L2_T4_1():
    st.title("Complex Sentences with Relative Pronouns")

    if 'tt_l2_t4_1_all_correct' not in st.session_state:
        st.session_state.tt_l2_t4_1_all_correct = False

    if "tt_l2_t4_1_start_time" not in st.session_state:
        st.session_state.tt_l2_t4_1_start_time = datetime.datetime.now()
    
    if "tt_l2_t4_1_error_count" not in st.session_state:
        st.session_state.tt_l2_t4_1_error_count = 0

    add_css()

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Relative Clauses:</strong> Relative clauses are used to give additional information about a noun. They start with a relative pronoun and function as an adjective.</p>
                <h3>Defining Clauses:</h3>
                <ul>
                    <li><strong>Who/That:</strong> Used to define people. For example, "This is the person <span class='conjunction'>who</span> helped me."</li>
                    <li><strong>Which/That:</strong> Used to define things. For example, "The book <span class='conjunction'>which</span> I read."</li>
                </ul>
                <h3>Place Clauses:</h3>
                <ul>
                    <li><strong>Where:</strong> Used to define places. For example, "This is the house <span class='conjunction'>where</span> I live."</li>
                </ul>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Defining Clause with "Who"</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        This is the person
                    </span>
                    <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                        who helped me.
                    </span>
                </div>
                <h3>Example 2: Defining Clause with "Which"</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        The book
                    </span>
                    <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                        which I read
                    </span> <span class="main-clause" style="background-color: lightgreen;">
                    was interesting.
                    </span>
                </div>
                <h3>Example 3: Place Clause with "Where"</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        This is the house
                    </span>
                    <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                        where I live.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Choose the Correct Relative Pronoun</h2>
        <p>Select the correct relative pronoun to complete each sentence.</p>
    </div>
    """, unsafe_allow_html=True)

    # Questions and Answers
    questions = [
        {"question": "1. The busiest time for stores is before Christmas, __________ there are sales and shoppers everywhere.", "options": ["where", "who", "when"], "answer": "when"},
        {"question": "2. The beautiful garden reminded him of the house __________ he used to live in.", "options": ["where", "who", "which"], "answer": "where"},
        {"question": "3. The customer gave the message to the secretary, __________ was supposed to pass it on to her boss.", "options": ["who", "which", "that"], "answer": "who"},
        {"question": "4. The students are studying hard for their exam, __________ is taking place the next morning.", "options": ["where", "who", "which"], "answer": "which"},
        {"question": "5. The vitamins __________ we brought from England last year are very expensive in Thailand.", "options": ["that", "where", "at which"], "answer": "that"},
    ]

    # Store user answers
    user_answers = []

    # Display each question with radio buttons and no pre-selected option (index=None)
    for idx, q in enumerate(questions):
        st.write(q["question"])
        user_answer = st.radio("", q["options"], index=None, key=f"q_{idx}")
        user_answers.append(user_answer)

    # Add a "Check Answers" button
    if st.button("Check Answers"):
        score = sum(1 for idx, q in enumerate(questions) if user_answers[idx] == q["answer"])
        st.markdown(f"### Your Score: {score}/{len(questions)}")

        if score == len(questions):
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l2_t4_1_all_correct = True  # Correctly update session state
        else:
            st.error("You made some mistakes. Please review the rule section above.")
            st.session_state.tt_l2_t4_1_error_count += 1
    
    if st.session_state.get('tt_l2_t4_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L2_T4_1, key='tt_l2_t4_1_practice')

        with col2:
            if st.button('Next', key='tt_l2_t4_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l2_t4_1",
                task_id="TT_L2_T4_1",
                next_page_func=navigate_to_task2_4
                )



def TT_L2_T5_1():
    st.title("Complex Sentences with Subordinated Clauses")

    if 'tt_l2_t5_1_all_correct' not in st.session_state:
            st.session_state.tt_l2_t5_1_all_correct = False

    if "tt_l2_t5_1_start_time" not in st.session_state:
        st.session_state.tt_l2_t5_1_start_time = datetime.datetime.now()
    
    if "tt_l2_t5_1_error_count" not in st.session_state:
        st.session_state.tt_l2_t5_1_error_count = 0
            
    add_css()

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Subordinate Clauses:</strong> Subordinate clauses add detail to the main clause and begin with subordinating conjunctions such as "because," "when," "since," etc.</p>
                <ul>
                    <li><strong>Reason and Contrast:</strong> A finite clause introduced by conjunctions 'because', 'since', 'although', etc. Example: "<span class='main-clause' style='background-color:lightgreen;'>She was tired</span> <span class='conjunction'>because</span> <span class='subordinate-clause' style='background-color:lightorange;'>she stayed up late</span>."</li>
                    <li><strong>Time Clauses:</strong> A subordinate clause introduced by 'before', 'after', 'as soon as'. Example: "<span class='conjunction'>As soon as</span> <span class='subordinate-clause' style='background-color:lightorange;'>the bus arrived</span>d<span class='conjunction'>,</span> <span class='main-clause' style='background-color:lightgreen;'>everyone rushed to get on it</span>."</li>
                </ul>
                <h3>Comma Usage in Subordinate Clauses:</h3>
                <p>If a subordinate clause precedes the main clause, use a comma after the subordinate clause. Example: "<span class='conjunction'>Although</span> <span class='subordinate-clause' style='background-color:lightorange;'>it was raining</span><span class='conjunction'>,</span> <span class='main-clause' style='background-color:lightgreen;'>she went for a walk</span>."</p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Time Clause (Subordinate Clause before Main Clause)</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color:rgba(255, 165, 0, 0.5);">As soon as the bus arrived,</span>
                    <span class="main-clause" style="background-color:lightgreen;">everyone rushed to get on it.</span>
                </div>
                <h3>Example 2: Reason Clause (Main Clause before Subordinate Clause)</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">Rich people could become poor,</span>
                    <span class="subordinate-clause" style="background-color:rgba(255, 165, 0, 0.5);">because they spend more than they earn.</span>
                </div>
                <h3>Example 3: Contrast Clause (Subordinate Clause before Main Clause)</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color:rgba(255, 165, 0, 0.5);">Although the bus has arrived,</span>
                    <span class="main-clause" style="background-color:lightgreen;">I will wait outside for fresh air.</span>
                </div>
                <h3>Example 4: Reason Clause (Main Clause before Subordinate Clause)</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">People use online systems in stores,</span>
                    <span class="subordinate-clause" style="background-color:rgba(255, 165, 0, 0.5);">because it is convenient for paying bills.</span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Drag and Drop Task
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Match the Sentence Halves</h2>
        <p>Drag and drop to match the first half of the sentence (main clause) with the correct second half (subordinate clause).</p>
    </div>
    """, unsafe_allow_html=True)

    # Drag-and-Drop Component
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .draggable {
            padding: 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            margin: 5px;
            font-size: 16px;
            min-width: 180px;
            max-width: 300px;
        }
        .draggable:hover {
            background-color: #d1e7f5;
        }
        .dropzone {
            min-height: 40px;
            min-width: 180px;
            max-width: 300px;
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
            border-radius: 10px;
            padding: 5px;
            text-align: center;
            display: inline-block;
            margin: 5px;
            font-size: 16px;
        }
        .dropzone.dragging-over {
            background-color: #d1e7f5;
        }
        .sentence-container {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .button-container {
            margin-top: 20px;
            text-align: center;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            font-size: 18px;
        }
    </style>
    """

    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <div draggable="true" class="draggable" id="draggable1">As soon as the bus arrived,</div>
            <div draggable="true" class="draggable" id="draggable2">Rich people could become poor</div>
            <div draggable="true" class="draggable" id="draggable3">Because of the online system in convenience stores,</div>
            <div draggable="true" class="draggable" id="draggable4">Although the bus has arrived,</div>
            <div draggable="true" class="draggable" id="draggable5">everyone rushed to get on it because the rain was pouring heavily.</div>
            <div draggable="true" class="draggable" id="draggable6">because they spend more money than they could earn.</div>
            <div draggable="true" class="draggable" id="draggable7">people can use counter services to pay all their bills.</div>
            <div draggable="true" class="draggable" id="draggable8">I will wait outside and breathe fresh air for a while.</div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop1"></div>
            <div class="dropzone" id="drop2"></div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop3"></div>
            <div class="dropzone" id="drop4"></div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop5"></div>
            <div class="dropzone" id="drop6"></div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop7"></div>
            <div class="dropzone" id="drop8"></div>
        </div>
        <div class="button-container">
            <button onclick="checkAnswers()">Check Answers</button>
        </div>
        <p id="result"></p>
    </div>
    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropzones = document.querySelectorAll('.dropzone');
        const dragContainer = document.getElementById('dragContainer');

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggable.classList.add('dragging');
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
            });
        });

        const allContainers = [dragContainer, ...dropzones];

        allContainers.forEach(container => {
            container.addEventListener('dragover', e => {
                e.preventDefault();
                container.classList.add('dragging-over');
            });
            container.addEventListener('dragleave', () => {
                container.classList.remove('dragging-over');
            });
            container.addEventListener('drop', e => {
                e.preventDefault();
                const draggable = document.querySelector('.dragging');
                if (draggable) {
                    if (container.classList.contains('dropzone')) {
                        if (container.children.length > 0) {
                            dragContainer.appendChild(container.children[0]);
                        }
                        container.appendChild(draggable);
                    } else {
                        container.appendChild(draggable);
                    }
                }
                container.classList.remove('dragging-over');
            });
        });

        function checkAnswers() {
            const correctAnswers = {
                "drop1": "As soon as the bus arrived,",
                "drop2": "everyone rushed to get on it because the rain was pouring heavily.",
                "drop3": "Rich people could become poor",
                "drop4": "because they spend more money than they could earn.",
                "drop5": "Because of the online system in convenience stores,",
                "drop6": "people can use counter services to pay all their bills.",
                "drop7": "Although the bus has arrived,",
                "drop8": "I will wait outside and breathe fresh air for a while."
            };
            let score = 0;
            const total = Object.keys(correctAnswers).length / 2; // Since sentences are in pairs
            for (let i = 1; i <= 8; i += 2) {
                const key1 = `drop${i}`;
                const key2 = `drop${i+1}`;
                const dropzone1 = document.getElementById(key1);
                const dropzone2 = document.getElementById(key2);
                const userAnswer1 = dropzone1.textContent.trim();
                const userAnswer2 = dropzone2.textContent.trim();
                if (correctAnswers[key1] === userAnswer1 && correctAnswers[key2] === userAnswer2) {
                    score++;
                    dropzone1.style.borderColor = 'green';
                    dropzone2.style.borderColor = 'green';
                } else {
                    dropzone1.style.borderColor = 'red';
                    dropzone2.style.borderColor = 'red';
                }
            }
            const result = document.getElementById('result');
            result.textContent = `You got ${score} out of ${total} correct.`;
            if (score === total) {
                result.style.color = 'green';
                result.textContent += " Great job! You matched all sentences correctly.";
            } else {
                result.style.color = 'red';
                result.textContent += " Some answers are incorrect. Please try again.";
            }
        }
    </script>
    """

    # Display the drag-and-drop component without the 'key' parameter
    components.html(
        drag_and_drop_css + drag_and_drop_js, height=900, scrolling=True
    )

      # Practice Section: Select the Correct Conjunction
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Select the Correct Conjunction</h2>
        <p>Select the appropriate subordinating conjunction to complete the sentence correctly.</p>
    </div>
    """, unsafe_allow_html=True)

    # Questions and Answers
    sentences = [
        {"sentence": "1. People do different leisure activities ___ they have different interests.", "options": ["since", "which", "when"], "answer": "since"},
        {"sentence": "2. Traffic becomes a serious problem ___ more people use their own cars.", "options": ["because", "if", "while"], "answer": "because"},
        {"sentence": "3. Some people know their strengths ___ others do not and are unhappy.", "options": ["while", "if", "because", "although"], "answer": "while"},
        {"sentence": "4. Some students don’t get good grades ___ they work hard.", "options": ["even though", "because", "in spite of"], "answer": "even though"},
    ]

    user_answers = []

    for idx, q in enumerate(sentences):
        st.write(q["sentence"])
        user_answer = st.selectbox("", q["options"], index=0, key=f"select_{idx}")
        user_answers.append(user_answer)

    if st.button("Check Answers", key="check_answers_2"):
        score = sum(1 for idx, q in enumerate(sentences) if user_answers[idx] == q["answer"])
        total = len(sentences)
        st.markdown(f"### Your Score: {score}/{total}")
        if score == total:
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l2_t5_1_all_correct = True 
        else:
            st.error("You made some mistakes. Please review the rule section and try again.")
            st.session_state.tt_l2_t5_1_error_count += 1

    if st.session_state.get('tt_l2_t5_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L2_T5_1, key='tt_l2_t5_1_practice')
        with col2:
            if st.button('Next', key='tt_l2_t5_1_next'):
                complete_task_and_record_data(
                    page_prefix="tt_l2_t5_1",
                    task_id="TT_L2_T5_1",
                    next_page_func=navigate_to_task2_5
                )

        


def TT_L2_T6_1():
    st.title("Second Conditional Sentences")

    if "tt_l2_t6_1_start_time" not in st.session_state:
        st.session_state.tt_l2_t6_1_start_time = datetime.datetime.now()

    add_css()

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>The second conditional sentence is used for imagined situations, often in advice or opinion-giving. It talks about hypothetical scenarios and their possible outcomes.</p>
                <h3>Form:</h3>
                <ul>
                    <li><strong>If</strong> + past simple + <strong>would</strong> + base verb.</li>
                </ul>
                <p><strong>Comma Usage:</strong> In second conditional sentences, if the 'if' clause comes first, use a comma before the main clause. If the main clause comes first, no comma is needed.</p>
                <p><strong>Example:</strong> "If I <span class='verb' style='text-decoration: underline; color:blue;'>had</span> more time, I <span class='verb' style='text-decoration: underline; color:blue;'>would learn</span> a new language."</p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Advice</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color:rgba(255, 165, 0, 0.5);">
                        If I <span class="verb" style="text-decoration: underline; color:blue;">were</span> you,
                    </span>
                    <span class="main-clause" style="background-color:lightgreen;">
                        I <span class="verb" style="text-decoration: underline; color:blue;">would go</span> to a small school in the countryside.
                    </span>
                </div>
                <h3>Example 2: Hypothetical Situation</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">
                        Maybe it <span class="verb" style="text-decoration: underline; color:blue;">would</span> be more fun
                    </span>
                    <span class="subordinate-clause" style="background-color:rgba(255, 165, 0, 0.5);">
                        if you <span class="verb" style="text-decoration: underline; color:blue;">went</span> with your friends.
                    </span>
                </div>
                <h3>Example 3: Hypothetical Movement</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color:rgba(255, 165, 0, 0.5);">
                        But if I <span class="verb" style="text-decoration: underline; color:blue;">was</span> able to move,
                    </span>
                    <span class="main-clause" style="background-color:lightgreen;">
                        I <span class="verb" style="text-decoration: underline; color:blue;">would live</span> near the coast because I love the sea.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

       # Practice Section: Drag and Drop Task
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Match the Sentence Halves</h2>
        <p>Drag and drop to match the first half of the sentence (main clause) with the correct second half (subordinate clause) for a second conditional sentence.</p>
    </div>
    """, unsafe_allow_html=True)

    # Drag-and-Drop Component
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .draggable {
            padding: 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            margin: 5px;
            font-size: 16px;
            min-width: 180px;
            max-width: 300px;
        }
        .draggable:hover {
            background-color: #d1e7f5;
        }
        .dropzone {
            min-height: 40px;
            min-width: 180px;
            max-width: 300px;
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
            border-radius: 10px;
            padding: 5px;
            text-align: center;
            display: inline-block;
            margin: 5px;
            font-size: 16px;
        }
        .dropzone.dragging-over {
            background-color: #d1e7f5;
        }
        .sentence-container {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .button-container {
            margin-top: 20px;
            text-align: center;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            font-size: 18px;
        }
    </style>
    """

    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <div draggable="true" class="draggable" id="draggable1">If I were you,</div>
            <div draggable="true" class="draggable" id="draggable2">Maybe it would be more fun</div>
            <div draggable="true" class="draggable" id="draggable3">But if I was able to move,</div>
            <div draggable="true" class="draggable" id="draggable4">I would go to a small school in the countryside.</div>
            <div draggable="true" class="draggable" id="draggable5">if you went with your friends.</div>
            <div draggable="true" class="draggable" id="draggable6">I would live near the coast because I love the sea.</div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop1"></div> <div class="dropzone" id="drop2"></div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop3"></div> <div class="dropzone" id="drop4"></div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop5"></div> <div class="dropzone" id="drop6"></div>
        </div>
        <div class="button-container">
            <button onclick="checkAnswers()">Check Answers</button>
        </div>
        <p id="result"></p>
        <script>
            const draggables = document.querySelectorAll('.draggable');
            const dropzones = document.querySelectorAll('.dropzone');
            const dragContainer = document.getElementById('dragContainer');

            draggables.forEach(draggable => {
                draggable.addEventListener('dragstart', () => {
                    draggable.classList.add('dragging');
                });

                draggable.addEventListener('dragend', () => {
                    draggable.classList.remove('dragging');
                });
            });

            const allContainers = [dragContainer, ...dropzones];

            allContainers.forEach(container => {
                container.addEventListener('dragover', e => {
                    e.preventDefault();
                    container.classList.add('dragging-over');
                });
                container.addEventListener('dragleave', () => {
                    container.classList.remove('dragging-over');
                });
                container.addEventListener('drop', e => {
                    e.preventDefault();
                    const draggable = document.querySelector('.dragging');
                    if (draggable) {
                        if (container.classList.contains('dropzone')) {
                            if (container.children.length > 0) {
                                dragContainer.appendChild(container.children[0]);
                            }
                            container.appendChild(draggable);
                        } else {
                            container.appendChild(draggable);
                        }
                    }
                    container.classList.remove('dragging-over');
                });
            });

            function checkAnswers() {
                const correctAnswers = {
                    "drop1": "If I were you,",
                    "drop2": "I would go to a small school in the countryside.",
                    "drop3": "Maybe it would be more fun",
                    "drop4": "if you went with your friends.",
                    "drop5": "But if I was able to move,",
                    "drop6": "I would live near the coast because I love the sea."
                };
                let score = 0;
                const total = Object.keys(correctAnswers).length / 2; // Since sentences are in pairs
                for (let i = 1; i <= 6; i += 2) {
                    const key1 = `drop${i}`;
                    const key2 = `drop${i+1}`;
                    const dropzone1 = document.getElementById(key1);
                    const dropzone2 = document.getElementById(key2);
                    const userAnswer1 = dropzone1.textContent.trim();
                    const userAnswer2 = dropzone2.textContent.trim();
                    if (correctAnswers[key1] === userAnswer1 && correctAnswers[key2] === userAnswer2) {
                        score++;
                        dropzone1.style.borderColor = 'green';
                        dropzone2.style.borderColor = 'green';
                    } else {
                        dropzone1.style.borderColor = 'red';
                        dropzone2.style.borderColor = 'red';
                    }
                }
                const result = document.getElementById('result');
                result.textContent = `You got ${score} out of ${total} correct.`;
                if (score === total) {
                    result.style.color = 'green';
                    result.textContent += " Great job! You matched all sentences correctly.";
                } else {
                    result.style.color = 'red';
                    result.textContent += " Some answers are incorrect. Please try again.";
                }
            }
        </script>
    </div>
    """

    components.html(drag_and_drop_css + drag_and_drop_js, height=700)

    col1, col2 = st.columns(2)
    with col1:
        st.button('Practice', on_click=navigate_to_practice_TT_L2_T6_1, key='tt_l2_t6_1_practice')

    with col2:
        if st.button('Next', key='tt_l2_t6_1_next'):
            end_time = datetime.datetime.now()
            start_time = st.session_state.tt_l2_t6_1_start_time
            time_diff = end_time - start_time
                # Convert timedelta to HH:MM:SS
            total_seconds = int(time_diff.total_seconds())
            hours, remainder = divmod(total_seconds, 3600)
            minutes, seconds = divmod(remainder, 60)
            time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
            try:
                h, m, s = map(int, time_spent_str.split(':'))
                time_obj = datetime.time(h, m, s)
            except ValueError as e:
                st.error(f"Error parsing time: {e}")
                time_obj = None  # fallback
            errors_info = {"error_count": 0}
            try:
                student_id = st.session_state.user_info.id
                task_id = "TT_L2_T6_1"
                record_task_done(
                        student_id=student_id,
                        task_id=task_id,
                        date=end_time,        # current datetime
                        time_spent=time_obj,
                        errors_dict=errors_info
                    )
            except Exception as e:
                    st.error(f"Error recording task: {e}")
                    return

            st.session_state.tt_l2_t6_1_start_time = None
                
            navigate_to_task2_6()
            st.rerun()



def TT_L2_T7_1():
    st.title("Past Perfect Tense")

    if "tt_l2_t7_1_start_time" not in st.session_state:
        st.session_state.tt_l2_t7_1_start_time = datetime.datetime.now()

    add_css()

    # Rule Section
    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>The Past Perfect tense is used to talk about a time before another time in the past. It often comes in complex sentences where one action happened before another.</p>
                <h3>Form:</h3>
                <ul>
                    <li>Past Perfect: <strong>had</strong> + past participle</li>
                </ul>
                <p><strong>Comma Usage:</strong> When the subordinate clause comes before the main clause, a comma is used to separate them. When the main clause comes first, no comma is needed.</p>
                <p><strong>Example:</strong> "She <span class='verb' style='text-decoration: underline; color:blue;'>had finished</span> her homework before she <span class='verb' style='text-decoration: underline; color:blue;'>went</span> to bed."</p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Sequence of Events</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                        After she <span class="verb" style="text-decoration: underline; color:blue;">had eaten</span> dinner,
                    </span>
                    <span class="main-clause" style="background-color: lightgreen;">
                        she <span class="verb" style="text-decoration: underline; color:blue;">went</span> for a walk.
                    </span>
                </div>
                <h3>Example 2: Cause and Effect</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        They <span class="verb" style="text-decoration: underline; color:blue;">missed</span> the final decision,
                    </span>
                    <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                        because they <span class="verb" style="text-decoration: underline; color:blue;">had left</span> before the meeting ended.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

 # Practice Section: Drag and Drop Task
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Match the Sentence Halves</h2>
        <p>Drag and drop to match the first half of the sentence (main clause) with the correct second half (subordinate clause) for a complex sentence with the Past Perfect tense.</p>
    </div>
    """, unsafe_allow_html=True)

    # Import Streamlit components
    import streamlit.components.v1 as components

    # Drag-and-Drop Component CSS
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .draggable {
            padding: 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            cursor: grab;
            margin: 5px;
            font-size: 16px;
            min-width: 150px;
            max-width: 300px;
        }
        .draggable:active {
            cursor: grabbing;
        }
        .dropzone {
            min-height: 40px;
            min-width: 150px;
            max-width: 300px;
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
            border-radius: 10px;
            padding: 5px;
            margin: 5px;
            font-size: 16px;
        }
        .dropzone.dragging-over {
            background-color: #d1e7f5;
        }
        .sentence-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .button-container {
            margin-top: 20px;
            text-align: center;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            font-size: 18px;
        }
    </style>
    """

    # Drag-and-Drop Component JavaScript
    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <div draggable="true" class="draggable" id="draggable1">I had arranged an appointment with my doctor</div>
            <div draggable="true" class="draggable" id="draggable2">before I called you.</div>
            <div draggable="true" class="draggable" id="draggable3">I felt really sorry for you</div>
            <div draggable="true" class="draggable" id="draggable4">after I had read your last letter.</div>
            <div draggable="true" class="draggable" id="draggable5">After she had eaten dinner,</div>
            <div draggable="true" class="draggable" id="draggable6">she went for a walk.</div>
            <div draggable="true" class="draggable" id="draggable7">They missed the final decision</div>
            <div draggable="true" class="draggable" id="draggable8">because they had left before the meeting ended.</div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop1"></div>
            <div class="dropzone" id="drop2"></div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop3"></div>
            <div class="dropzone" id="drop4"></div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop5"></div>
            <div class="dropzone" id="drop6"></div>
        </div>
        <div class="sentence-container">
            <div class="dropzone" id="drop7"></div>
            <div class="dropzone" id="drop8"></div>
        </div>
        <div class="button-container">
            <button onclick="checkAnswers()">Check Answers</button>
        </div>
        <p id="result"></p>
        <script>
            const draggables = document.querySelectorAll('.draggable');
            const dropzones = document.querySelectorAll('.dropzone');
            const dragContainer = document.getElementById('dragContainer');

            draggables.forEach(draggable => {
                draggable.addEventListener('dragstart', () => {
                    draggable.classList.add('dragging');
                });

                draggable.addEventListener('dragend', () => {
                    draggable.classList.remove('dragging');
                });
            });

            const allContainers = [dragContainer, ...dropzones];

            allContainers.forEach(container => {
                container.addEventListener('dragover', e => {
                    e.preventDefault();
                    container.classList.add('dragging-over');
                });
                container.addEventListener('dragleave', () => {
                    container.classList.remove('dragging-over');
                });
                container.addEventListener('drop', e => {
                    e.preventDefault();
                    const draggable = document.querySelector('.dragging');
                    if (draggable) {
                        if (container.classList.contains('dropzone')) {
                            if (container.children.length > 0) {
                                dragContainer.appendChild(container.children[0]);
                            }
                            container.appendChild(draggable);
                        } else {
                            container.appendChild(draggable);
                        }
                    }
                    container.classList.remove('dragging-over');
                });
            });

            function checkAnswers() {
                const correctPairs = [
                    ["I had arranged an appointment with my doctor", "before I called you."],
                    ["I felt really sorry for you", "after I had read your last letter."],
                    ["After she had eaten dinner,", "she went for a walk."],
                    ["They missed the final decision", "because they had left before the meeting ended."]
                ];
                let score = 0;
                const total = correctPairs.length;

                for (let i = 1; i <= 8; i += 2) {
                    const dropzone1 = document.getElementById(`drop${i}`);
                    const dropzone2 = document.getElementById(`drop${i+1}`);
                    const text1 = dropzone1.textContent.trim();
                    const text2 = dropzone2.textContent.trim();
                    let correct = false;
                    correctPairs.forEach(pair => {
                        if ((text1 === pair[0] && text2 === pair[1]) || (text1 === pair[1] && text2 === pair[0])) {
                            correct = true;
                        }
                    });
                    if (correct) {
                        score++;
                        dropzone1.style.borderColor = 'green';
                        dropzone2.style.borderColor = 'green';
                    } else {
                        dropzone1.style.borderColor = 'red';
                        dropzone2.style.borderColor = 'red';
                    }
                }

                const result = document.getElementById('result');
                result.textContent = `You got ${score} out of ${total} correct.`;
                if (score === total) {
                    result.style.color = 'green';
                    result.textContent += " Great job! You matched all sentences correctly.";
                } else {
                    result.style.color = 'red';
                    result.textContent += " Some answers are incorrect. Please try again.";
                }
            }
        </script>
    </div>
    """

    # Combine CSS and JavaScript
    html_code = drag_and_drop_css + drag_and_drop_js

    components.html(drag_and_drop_css + drag_and_drop_js, height=700)


    col1, col2 = st.columns(2)
    with col1:
        st.button('Practice', on_click=navigate_to_practice_TT_L2_T7_1, key='tt_l2_t7_1_practice')

    with col2:
        if st.button('Next', key='tt_l2_t7_1_next'):
            end_time = datetime.datetime.now()
            start_time = st.session_state.tt_l2_t7_1_start_time
            time_diff = end_time - start_time
                # Convert timedelta to HH:MM:SS
            total_seconds = int(time_diff.total_seconds())
            hours, remainder = divmod(total_seconds, 3600)
            minutes, seconds = divmod(remainder, 60)
            time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
            try:
                h, m, s = map(int, time_spent_str.split(':'))
                time_obj = datetime.time(h, m, s)
            except ValueError as e:
                st.error(f"Error parsing time: {e}")
                time_obj = None  # fallback
            errors_info = {"error_count": 0}
            try:
                student_id = st.session_state.user_info.id
                task_id = "TT_L2_T7_1"
                record_task_done(
                        student_id=student_id,
                        task_id=task_id,
                        date=end_time,        # current datetime
                        time_spent=time_obj,
                        errors_dict=errors_info
                    )
            except Exception as e:
                    st.error(f"Error recording task: {e}")
                    return

            st.session_state.tt_l2_t7_1_start_time = None
                
            navigate_to_task2_7()
            st.rerun()




def TT_L2_T8_1():
    st.title("Reported Speech")

    if "tt_l2_t8_1_start_time" not in st.session_state:
        st.session_state.tt_l2_t8_1_start_time = datetime.datetime.now()

    add_css()

    # Rule Section
    st.markdown("""
     <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>Reported speech is used to tell someone what another person said. It involves changes in pronouns, tense, and sometimes word order.</p>
                <h3>Reported Statements:</h3>
                <ul>
                    <li>Use <strong>'say'</strong> or <strong>'tell'</strong> + <strong>'that-' clause</strong>, adjusting pronoun and tense as necessary.</li>
                    <li><strong>Direct Speech:</strong> "I am going to the market."</li>
                    <li><strong>Reported Speech:</strong> "She said <span class='clause' style='background-color:lightorange;'>that she was going to the market</span>."</li>
                </ul>
                <h3>Reported 'Yes-No' Questions:</h3>
                <ul>
                    <li>Use <strong>'ask'</strong> + <strong>'if' or 'whether' + clause</strong>.</li>
                    <li><strong>Direct Speech:</strong> "Did you finish your homework?"</li>
                    <li><strong>Reported Speech:</strong> "He asked <span class='clause' style='background-color:lightorange;'>if I had finished my homework</span>."</li>
                </ul>
                <h3>Other Types of Reported Questions:</h3>
                <ul>
                    <li>For 'Wh-' questions, use <strong>'ask' + wh-word + clause</strong>.</li>
                    <li><strong>Direct Speech:</strong> "Where do you live?"</li>
                    <li><strong>Reported Speech:</strong> "She asked <span class='clause' style='background-color:lightorange;'>where I lived</span>."</li>
                </ul>
                <p>Remember to change the pronouns and shift the tense back when reporting speech. For example, "I am going" changes to "she was going."</p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Reported Statement</h3>
                <p><strong>Direct Speech:</strong> "I am going to the market."</p>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">
                        She said 
                    </span>
                    <span class="subordinate-clause" style="background-color:lightorange;">
                        that she <span class="verb" style="text-decoration: underline; color:blue;">was going</span> to the market.
                    </span>
                </div>
                <h3>Example 2: Reported 'Yes-No' Question</h3>
                <p><strong>Direct Speech:</strong> "Did you finish your homework?"</p>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">
                        He asked 
                    </span>
                    <span class="subordinate-clause" style="background-color:lightorange;">
                        if I <span class="verb" style="text-decoration: underline; color:blue;">had finished</span> my homework.
                    </span>
                </div>
                <h3>Example 3: Reported 'Wh-' Question</h3>
                <p><strong>Direct Speech:</strong> "Where do you live?"</p>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">
                        She asked 
                    </span>
                    <span class="subordinate-clause" style="background-color:lightorange;">
                        where I <span class="verb" style="text-decoration: underline; color:blue;">lived</span>.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

     # Practice Section: Matching Task
    st.markdown("""
    <div class="practice-frame">
        <h2> 🎯 Practice: Match the Direct Speech to the Reported Speech</h2>
        <p>Drag and drop to match the direct speech with the correct reported speech.</p>
    </div>
    """, unsafe_allow_html=True)

    # Drag-and-Drop Component
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .draggable {
            padding: 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
            margin: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 18px;
            min-width: 200px;  
            max-width: 400px; 
            word-wrap: break-word; 
        }
        .draggable:hover {
            background-color: #d1e7f5;
        }
        .dropzone {
            min-height: 50px;
            min-width: 200px;
            max-width: 400px;
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
            border-radius: 10px;
            padding: 10px;
            text-align: center;
            transition: background-color 0.2s ease, border-color 0.2s ease;
            display: inline-block;
            vertical-align: middle;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 18px;
            margin: 5px;
            word-wrap: break-word; 
        }
        .dropzone.dragging-over {
            background-color: #d1e7f5;
        }
        .sentence-container {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        .button-container {
            margin-top: 20px;
            text-align: center;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
    """

    drag_and_drop_js = """
    <div class="container">
        <h4>Drag and Drop Task: Match the Direct Speech with Reported Speech</h4>
        <div class="drag-container">
            <div draggable="true" class="draggable" id="direct1">"I am going to the park," she said.</div>
            <div draggable="true" class="draggable" id="direct2">"Did you finish your homework?" he asked.</div>
            <div draggable="true" class="draggable" id="direct3">"Where do you live?" she asked.</div>
            <div draggable="true" class="draggable" id="direct4">"I have completed the project," he said.</div>
            <div draggable="true" class="draggable" id="direct5">"Are you attending the meeting?" she asked.</div>
            <div draggable="true" class="draggable" id="reported1">She said that she was going to the park.</div>
            <div draggable="true" class="draggable" id="reported2">He asked if I had finished my homework.</div>
            <div draggable="true" class="draggable" id="reported3">She asked where I lived.</div>
            <div draggable="true" class="draggable" id="reported4">He said that he had completed the project.</div>
            <div draggable="true" class="draggable" id="reported5">She asked if I was attending the meeting.</div>
        </div>
        <div class="drop-container">
            <div class="sentence-container">
                <div class="dropzone" id="drop1"></div> <div class="dropzone" id="drop2"></div>
            </div>
            <div class="sentence-container">
                <div class="dropzone" id="drop3"></div> <div class="dropzone" id="drop4"></div>
            </div>
            <div class="sentence-container">
                <div class="dropzone" id="drop5"></div> <div class="dropzone" id="drop6"></div>
            </div>
            <div class="sentence-container">
                <div class="dropzone" id="drop7"></div> <div class="dropzone" id="drop8"></div>
            </div>
            <div class="sentence-container">
                <div class="dropzone" id="drop9"></div> <div class="dropzone" id="drop10"></div>
            </div>
        </div>
        <div class="button-container">
            <button onclick="checkAnswers()">Check Answers</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropzones = document.querySelectorAll('.dropzone');
        const result = document.getElementById('result');

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggable.classList.add('dragging');
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
            });
        });

        dropzones.forEach(dropzone => {
            dropzone.addEventListener('dragover', e => {
                e.preventDefault();
                dropzone.classList.add('dragging-over');
            });
            dropzone.addEventListener('dragleave', () => {
                dropzone.classList.remove('dragging-over');
            });
            dropzone.addEventListener('drop', e => {
                e.preventDefault();
                const draggable = document.querySelector('.dragging');
                if (!dropzone.hasChildNodes()) {
                    dropzone.appendChild(draggable.cloneNode(true));
                    draggable.remove();
                }
                dropzone.classList.remove('dragging-over');
            });
        });

        function checkAnswers() {
            const correctAnswers = {
                "drop1": "\"I am going to the park,\" she said.",
                "drop2": "She said that she was going to the park.",
                "drop3": "\"Did you finish your homework?\" he asked.",
                "drop4": "He asked if I had finished my homework.",
                "drop5": "\"Where do you live?\" she asked.",
                "drop6": "She asked where I lived."
            };
            let score = 0;
            dropzones.forEach(dropzone => {
                const dropId = dropzone.id;
                const text = dropzone.textContent.trim();
                if (correctAnswers[dropId] === text) {
                    dropzone.style.borderColor = 'green';
                    score += 1;
                } else {
                    dropzone.style.borderColor = 'red';
                }
            });
            result.textContent = You got ${score} out of ${dropzones.length} correct.;
        }
    </script>
    """
    components.html(drag_and_drop_css + drag_and_drop_js, height=900)
    
    col1, col2 = st.columns(2)
    with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L2_T8_1, key='tt_l2_t8_1_practice')

    with col2:
        if st.button('Next', key='tt_l2_t8_1_next'):
            end_time = datetime.datetime.now()
            start_time = st.session_state.tt_l2_t8_1_start_time
            time_diff = end_time - start_time
                # Convert timedelta to HH:MM:SS
            total_seconds = int(time_diff.total_seconds())
            hours, remainder = divmod(total_seconds, 3600)
            minutes, seconds = divmod(remainder, 60)
            time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
            try:
                h, m, s = map(int, time_spent_str.split(':'))
                time_obj = datetime.time(h, m, s)
            except ValueError as e:
                st.error(f"Error parsing time: {e}")
                time_obj = None  # fallback
            errors_info = {"error_count": 0}
            try:
                student_id = st.session_state.user_info.id
                task_id = "TT_L2_T8_1"
                record_task_done(
                        student_id=student_id,
                        task_id=task_id,
                        date=end_time,        # current datetime
                        time_spent=time_obj,
                        errors_dict=errors_info
                    )
            except Exception as e:
                    st.error(f"Error recording task: {e}")
                    return

            st.session_state.tt_l2_t8_1_start_time = None
                
            navigate_to_tt_l2_t8_2()
            st.rerun()



def TT_L2_T8_2():
    st.title("Reported Speech")

    add_css()

    if 'tt_l2_t8_2_all_correct' not in st.session_state:
        st.session_state.tt_l2_t8_2_all_correct = False

    if "tt_l2_t8_2_start_time" not in st.session_state:
        st.session_state.tt_l2_t8_2_start_time = datetime.datetime.now()
    
    if "tt_l2_t8_2_error_count" not in st.session_state:
        st.session_state.tt_l2_t8_2_error_count = 0

    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>Reported speech is used to convey what someone else has said. It involves changes in pronouns, tenses, and sometimes time/place expressions. Here are the key rules for reported speech:</p>  
                <h3>Tense Changes in Reported Speech:</h3>
                <table style="width:100%; border:1px solid black;">
                    <tr>
                        <th>Direct Speech (Tense)</th>
                        <th>Reported Speech (Tense)</th>
                    </tr>
                    <tr>
                        <td>Present Simple</td>
                        <td>Past Simple</td>
                    </tr>
                    <tr>
                        <td>Present Continuous</td>
                        <td>Past Continuous</td>
                    </tr>
                    <tr>
                        <td>Present Perfect</td>
                        <td>Past Perfect</td>
                    </tr>
                    <tr>
                        <td>Past Simple</td>
                        <td>Past Perfect</td>
                    </tr>
                    <tr>
                        <td>Will</td>
                        <td>Would</td>
                    </tr>
                </table>
                <h3>Key Word Changes in Reported Speech:</h3>
                <table style="width:100%; border:1px solid black;">
                    <tr>
                        <th>Direct Speech (Key Word)</th>
                        <th>Reported Speech (Key Word)</th>
                    </tr>
                    <tr>
                        <td>Today</td>
                        <td>That day</td>
                    </tr>
                    <tr>
                        <td>Now</td>
                        <td>Then</td>
                    </tr>
                    <tr>
                        <td>Here</td>
                        <td>There</td>
                    </tr>
                    <tr>
                        <td>Yesterday</td>
                        <td>The day before</td>
                    </tr>
                    <tr>
                        <td>Tomorrow</td>
                        <td>The next day</td>
                    </tr>
                </table>
                <h3>Reported Commands and Requests:</h3>
                <ul>
                    <li>Use <strong>'ask' or 'tell'</strong> + <strong>direct object</strong> + <strong>'to-' infinitive</strong>.</li>
                    <li><strong>Example:</strong> "She told <span class='clause' style='background-color:lightorange;'>me to close the door</span>."</li>
                </ul>
            </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
   <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Reported Statement</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">
                        She said 
                    </span>
                    <span class="subordinate-clause" style="background-color:lightorange;">
                        that she <span class="verb" style="text-decoration: underline;">was going</span> to the market.
                    </span>
                </div>
                <h3>Example 2: Reported 'Yes-No' Question</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">
                        He asked 
                    </span>
                    <span class="subordinate-clause" style="background-color:lightorange;">
                        if I <span class="verb" style="text-decoration: underline;">had finished</span> my homework.
                    </span>
                </div>
                <h3>Example 3: Reported Request</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">
                        She told 
                    </span>
                    <span class="subordinate-clause" style="background-color:lightorange;">
                        me to close the door.
                    </span>
                </div>
                <h3>Example 4: Reported 'Wh-' Question</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color:lightgreen;">
                        He asked 
                    </span>
                    <span class="subordinate-clause" style="background-color:lightorange;">
                        where I <span class="verb" style="text-decoration: underline;">was going</span>.
                    </span>
                </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Sentence Transformation
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Transform Direct Speech into Reported Speech</h2>
        <p>Below are sentences in direct speech. Transform them into reported speech by selecting the correct options from the dropdowns.</p>
    </div>
    """, unsafe_allow_html=True)

    # Practice sentences
    direct_sentences = [
        ("1. She said, 'I am coming.'", "She said that she was coming."),
        ("2. He asked, 'Are you hungry?'", "He asked if I was hungry."),
        ("3. They told me, 'Close the door.'", "They told me to close the door."),
        ("4. She asked, 'Where are you going?'", "She asked where I was going."),
    ]

    # Variables to store correct answers
    correct_answers = [
        {"subject": "She", "verb": "said", "conjunction": "that", "object": "", "verb_form": "she was coming"},
        {"subject": "He", "verb": "asked", "conjunction": "if", "object": "I", "verb_form": "was hungry"},
        {"subject": "They", "verb": "told", "conjunction": "", "object": "me", "verb_form": "to close the door"},
        {"subject": "She", "verb": "asked", "conjunction": "where", "object": "I", "verb_form": "was going"},
    ]

    total = len(direct_sentences)

    for i, (direct, reported) in enumerate(direct_sentences):
        st.write(f"**Direct Speech {i+1}:** {direct}")
        col1, col2, col3, col4, col5 = st.columns(5)

        with col1:
            subject = st.selectbox('Subject', ['She', 'He', 'They'], key=f'subject_{i}')
        with col2:
            verb = st.selectbox('Reporting Verb', ['said', 'asked', 'told'], key=f'verb_{i}')
        with col3:
            conjunction_options = ['that', 'if', 'to', 'where', '']
            conjunction = st.selectbox('Conjunction', conjunction_options, key=f'conjunction_{i}')
        with col4:
            object_options = ['', 'me', 'I', 'she', 'he', 'they']
            object_ = st.selectbox('Object', object_options, key=f'object_{i}')
        with col5:
            verb_form_options = ['she was coming', 'was hungry', 'to close the door', 'was going']
            verb_form = st.selectbox('Verb Form', verb_form_options, key=f'verb_form_{i}')

        # Build the user's sentence
        user_sentence = f"{subject} {verb} "
        if conjunction:
            user_sentence += f"{conjunction} "
        if object_:
            user_sentence += f"{object_} "
        user_sentence += f"{verb_form}."

        st.markdown(f"<div class='sentence-container'>{user_sentence}</div>", unsafe_allow_html=True)

    # Feedback Button
    if st.button("Check Answers"):
        score = 0
        for i in range(total):
            user_subject = st.session_state.get(f'subject_{i}', '')
            user_verb = st.session_state.get(f'verb_{i}', '')
            user_conjunction = st.session_state.get(f'conjunction_{i}', '')
            user_object = st.session_state.get(f'object_{i}', '').strip()
            user_verb_form = st.session_state.get(f'verb_form_{i}', '')
            # Build the user answer components
            user_components = {
                "subject": user_subject,
                "verb": user_verb,
                "conjunction": user_conjunction,
                "object": user_object,
                "verb_form": user_verb_form,
            }
            # Compare with correct answers
            if user_components == correct_answers[i]:
                score +=1

        st.markdown(f"### Your Score: {score}/{total}")
        if score == total:
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l2_t8_2_all_correct = True
        else:
            st.error(f"You got {score} out of {total} correct. Try again.")  # FIXED LINE
            st.session_state.tt_l2_t8_2_all_correct = False 
    
    if st.session_state.get('tt_l2_t8_2_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L2_T8_2, key='tt_l2_t8_2_practice')

        with col2:
            if st.button('Next', key='tt_l2_t8_2_next'):
                end_time = datetime.datetime.now()
                start_time = st.session_state.tt_l2_t8_2_start_time
                time_diff = end_time - start_time
                    # Convert timedelta to HH:MM:SS
                total_seconds = int(time_diff.total_seconds())
                hours, remainder = divmod(total_seconds, 3600)
                minutes, seconds = divmod(remainder, 60)
                time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
                try:
                    h, m, s = map(int, time_spent_str.split(':'))
                    time_obj = datetime.time(h, m, s)
                except ValueError as e:
                    st.error(f"Error parsing time: {e}")
                    time_obj = None  # fallback
                errors_info = {"error_count": 0}
                try:
                    student_id = st.session_state.user_info.id
                    task_id = "TT_L2_T8_2"
                    record_task_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=end_time,        # current datetime
                            time_spent=time_obj,
                            errors_dict=errors_info
                        )
                except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                st.session_state.tt_l2_t8_2_start_time = None
                navigate_to_task2_8()

            if st.button('Back', key='tt_l2_t8_2_back'):
                back_to_tt_l2_t8_1()
                st.rerun()



def TT_L3_T1_1():
    st.title("Introduction to Sentence Structure")

    if "tt_l3_t1_1_start_time" not in st.session_state:
        st.session_state.tt_l3_t1_1_start_time = datetime.datetime.now()

    add_css()

    # Understanding Parts of Speech Section with Yellow Frame
    st.markdown("""
    <div style="border: 2px solid yellow; border-radius: 10px; padding: 10px;">
        <h2>📚 Understanding Parts of Speech</h2>
        <p>Parts of speech are the fundamental building blocks of sentences. They describe the role each word plays within a sentence.</p>
        <p>Use the dropdown lists below to explore different parts of speech and see how they fit together to form meaningful sentences.</p>
    </div>
    """, unsafe_allow_html=True)

    # Dropdowns for Parts of Speech with Color Coding
    col1, col2, col3, col4, col5 = st.columns(5)

    with col1:
        selected_determiner = st.selectbox('Determiner', ['a', 'the', 'some', 'any'], key='selectbox1')
    with col2:
        selected_noun = st.selectbox('Noun', ['car', 'dog', 'house', 'book'], key='selectbox2')
    with col3:
        selected_verb = st.selectbox('Verb', ['run', 'jump', 'swim', 'read'], key='selectbox3')
    with col4:
        selected_adjective = st.selectbox('Adjective', ['red', 'big', 'quick', 'blue'], key='selectbox4')
    with col5:
        selected_adverb = st.selectbox('Adverb', ['quickly', 'silently', 'well', 'badly'], key='selectbox5')

    set_selectbox_style(0, 'darkblue', '10px')  # Determiner
    set_selectbox_style(1, 'rgba(255, 255, 0, 0.5)', '10px')  # Noun
    set_selectbox_style(2, 'rgba(255, 0, 0, 0.5)', '10px')  # Verb
    set_selectbox_style(3, 'lightgreen', '10px')  # Adjective
    set_selectbox_style(4, 'lightblue', '10px')  # Adverb

    # Merged Understanding Phrases and Phrase Level Section with Blue Frame
    st.markdown("""
    <div style="border: 2px solid yellow; border-radius: 10px; padding: 10px;">
        <h2>📖 Understanding Phrases</h2>
        <p>Phrases are groups of words that act together as a single part of speech but do not contain both a subject and a verb.</p>
        <p>Here's how different phrases are color-coded for easy identification:</p>
        <ul>
            <li><span style="background-color: rgba(255, 255, 0, 0.5); padding: 2px 5px; border-radius: 3px;">Noun Phrase</span>: Functions as a noun. Example: <em>a red house</em>.</li>
            <li><span style="background-color: rgba(255, 0, 0, 0.5); padding: 2px 5px; border-radius: 3px;">Verb Phrase</span>: Consists of a main verb and its auxiliaries. Example: <em>is running</em>.</li>
            <li><span style="background-color: rgba(128, 0, 128, 0.5); padding: 2px 5px; border-radius: 3px;">Prepositional Phrase</span>: Begins with a preposition and ends with a noun or pronoun. Example: <em>in the park</em>.</li>
        </ul>
        <div>
            <h3>Noun Phrases</h3>
            <div class="sentence-container">
                <span class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="det">a</span> 
                    <span class="adjective">red</span> 
                    <span class="noun">house</span>
                </span>
            </div>
            <div class="sentence-container">
                <span class="noun-phrase" style="background-color: rgba(255, 255, 0, 0.5); padding: 5px; border-radius: 5px;">
                    <span class="det">the</span> 
                    <span class="noun">book</span>
                </span>
            </div>
        </div>
        <div>
            <h3>Verb Phrases</h3>
            <div class="sentence-container">
                <span class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                    is running</span>
                </span>
            </div>
            <div class="sentence-container">
                <span class="verb-phrase" style="background-color: rgba(255, 0, 0, 0.5); padding: 5px; border-radius: 5px;">
                   has been reading</span>
                </span>
            </div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Merged Clause Level and Examples Sections with Yellow Frame
    st.markdown("""
    <div style="border: 2px solid yellow; border-radius: 10px; padding: 10px;">
        <h2>📜 Understanding Clauses</h2>
        <p>Clauses are groups of words that contain a subject and a predicate. They can be independent (main clauses) or dependent (subordinate clauses).</p>
        <p><strong>Main Clause:</strong> Can stand alone as a complete sentence.</p>
        <p><strong>Subordinate Clause:</strong> Cannot stand alone and depends on the main clause.</p>
        <p>In clauses, we can identify:</p>
        <ul>
            <li><strong>Subject</strong>: The person or thing performing the action ((<span style="color: black;">black text</span>, <span style="text-decoration: underline;">underlined</span>).</li>
            <li><strong>Verb</strong>: The action or state of being (<span style="color: blue;">blue text</span>, <span style="text-decoration: underline;">underlined</span>).</li>
            <li><strong>Object</strong>: Receives the action of the verb (<span style="color: green;">green text</span>, <span style="text-decoration: underline;">underlined</span>).</li>
        </ul>
        <h3>Examples:</h3>
        <div class="sentence-container">
            <div class="main-clause">
                <span class="subject">She</span> <span class="verb">runs</span> <span class="object">every day</span>.
            </div>
            <div class="subordinate-clause">
                <span class="conjunction">because</span> <span class="subject">she</span> <span class="verb">wants</span> to stay fit.
            </div>
        </div>
        <div class="sentence-container">
            <div class="main-clause">
                <span class="subject">He</span> <span class="verb">finished</span> <span class="object">his homework</span>.
            </div>
            <div class="subordinate-clause">
                <span class="conjunction">after</span> <span class="subject">he</span> <span class="verb">came</span> <span class="object">home</span>.
            </div>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Drag and Drop Task
    st.markdown("""
    <div style="border: 2px solid #2196f3; border-radius: 10px; padding: 10px;">
        <h2>🎯 Practice: Construct Complex Sentences</h2>
        <p>Drag and drop the phrases to construct meaningful and grammatically correct sentences. This exercise will help you understand how main and subordinate clauses work together in a sentence.</p>
    </div>
    """, unsafe_allow_html=True)

    # Drag-and-Drop Component CSS
    drag_and_drop_css = """
    <style>
        .container {
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .draggable {
            padding: 10px;
            color: black;
            border: 2px solid #ccc;
            border-radius: 5px;
            cursor: grab;
            margin: 5px;
            font-size: 16px;
            min-width: 150px;
            max-width: 300px;
        }
        .main-clause {
            background-color: lightgreen;
        }
        .subordinate-clause {
            background-color: rgba(255, 165, 0, 0.5);
        }
        .draggable:hover {
            background-color: #e0e0e0; /* Slightly darker on hover */
        }
        .drop-container {
            display: flex;
            justify-content: left;
            min-height: 50px;
            border: 2px dashed #64b5f6;
            background-color: #f9f9f9;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            flex-wrap: wrap;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
        }
        .drop-container.dragging-over {
            background-color: #d0e9ff; /* Light blue when dragging over */
        }
        .sentence-container {
            margin-bottom: 15px;
            font-size: 16px;
        }
        .button-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        .button-container button {
            padding: 8px 15px;
            background-color: white;
            color: #333;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 14px;
            cursor: pointer;
            margin: 0 10px;
            min-width: 100px;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            font-size: 18px;
        }
    </style>
    """

    # Drag-and-Drop Component JavaScript
    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <!-- Draggable items -->
            <div draggable="true" class="draggable main-clause">I had arranged an appointment with my doctor</div>
            <div draggable="true" class="draggable subordinate-clause">before I called you.</div>
            <div draggable="true" class="draggable main-clause">I felt really sorry for you</div>
            <div draggable="true" class="draggable subordinate-clause">after I had read your last letter.</div>
            <!-- Removed one sentence as per instruction -->
            <div draggable="true" class="draggable main-clause">They missed the final decision</div>
            <div draggable="true" class="draggable subordinate-clause">because they had left before the meeting ended.</div>
        </div>
        <div class="sentence-container">
            <div class="drop-container" id="drop1"></div>
        </div>
        <div class="sentence-container">
            <div class="drop-container" id="drop2"></div>
        </div>
        <div class="sentence-container">
            <div class="drop-container" id="drop3"></div>
        </div>
        <div class="button-container">
            <button id="check-button" onclick="checkAnswer()">
                Check Answers
            </button>
            <button id="next-page-button" onclick="goToNextPage()" style="display:none;">
                Next
            </button>
        </div>
        <p id="result"></p>
    </div>

    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropContainers = document.querySelectorAll('.drop-container');
        const dragContainer = document.getElementById('dragContainer');
        const result = document.getElementById('result');

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggable.classList.add('dragging');
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
            });
        });

        const allContainers = [dragContainer, ...dropContainers];

        allContainers.forEach(container => {
            container.addEventListener('dragover', e => {
                e.preventDefault();
                container.classList.add('dragging-over');
            });
            container.addEventListener('dragleave', () => {
                container.classList.remove('dragging-over');
            });
            container.addEventListener('drop', e => {
                e.preventDefault();
                const draggable = document.querySelector('.dragging');
                if (draggable) {
                    container.appendChild(draggable);
                }
                container.classList.remove('dragging-over');
            });
        });

        const correctSentences = [
            ["I had arranged an appointment with my doctor", "before I called you."],
            ["I felt really sorry for you", "after I had read your last letter."],
            ["They missed the final decision", "because they had left before the meeting ended."]
        ];

        function checkAnswer() {
            let score = 0;
            const total = correctSentences.length;

            for (let i = 0; i < total; i++) {
                const dropzone = document.getElementById(`drop${i+1}`);
                const userSentence = Array.from(dropzone.children).map(child => child.textContent.trim());
                const correctSentence = correctSentences[i];
                const isCorrect = arraysEqual(userSentence, correctSentence) || arraysEqual(userSentence, correctSentence.slice().reverse());
                if (isCorrect) {
                    score++;
                    dropzone.style.borderColor = 'green';
                } else {
                    dropzone.style.borderColor = 'red';
                }
            }

            result.textContent = `You got ${score} out of ${total} correct.`;
            if (score === total) {
                result.style.color = 'green';
                document.getElementById("next-page-button").style.display = "inline-block";
                result.textContent += " Great job! You matched all sentences correctly.";
            } else {
                result.style.color = 'red';
                document.getElementById("next-page-button").style.display = "none";
                result.textContent += " Some answers are incorrect. Please try again.";
            }
        }

        function arraysEqual(a, b) {
            if (a.length !== b.length) return false;
            for (var i = 0; i < a.length; i++) {
                if (a[i] !== b[i]) return false;
            }
            return true;
        }

        function goToNextPage() {
            // Logic to go to the next page (can be a redirect or showing a new section)
            window.location.href = "/next_page"; // Adjust this according to your actual next page route
        }
    </script>
    """

    # Combine CSS and JavaScript for the Drag-and-Drop Component
    html_code = drag_and_drop_css + drag_and_drop_js

    # Display the drag-and-drop component
    components.html(html_code, height=800, scrolling=True)

    col1, col2 = st.columns(2)
    with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T1_2, key='tt_l3_t1_1_practice')

    with col2:
            if st.button('Next', key='tt_l3_t1_1_next'):
                end_time = datetime.datetime.now()
                start_time = st.session_state.tt_l3_t1_1_start_time
                time_diff = end_time - start_time
                    # Convert timedelta to HH:MM:SS
                total_seconds = int(time_diff.total_seconds())
                hours, remainder = divmod(total_seconds, 3600)
                minutes, seconds = divmod(remainder, 60)
                time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
                try:
                    h, m, s = map(int, time_spent_str.split(':'))
                    time_obj = datetime.time(h, m, s)
                except ValueError as e:
                    st.error(f"Error parsing time: {e}")
                    time_obj = None  # fallback
                errors_info = {"error_count": 0}
                try:
                    student_id = st.session_state.user_info.id
                    task_id = "TT_L3_T1_1"
                    record_task_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=end_time,        # current datetime
                            time_spent=time_obj,
                            errors_dict=errors_info
                        )
                except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                st.session_state.tt_l3_t1_1_start_time = None
                navigate_to_tt_l3_t1_2()
                st.rerun()


def TT_L3_T1_2():

    st.title("Third Conditional Sentences")

    if 'tt_l3_t1_2_all_correct' not in st.session_state:
        st.session_state.tt_l3_t1_2_all_correct = False

    if "tt_l3_t1_2_start_time" not in st.session_state:
        st.session_state.tt_l3_t1_2_start_time = datetime.datetime.now()
    
    if "tt_l3_t1_2_error_count" not in st.session_state:
        st.session_state.tt_l3_t1_2_error_count = 0

    add_css()

    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>The Third Conditional is used to talk about imagined situations in the past, often involving regret. The structure is:</p>
                <ul>
                    <li><strong>Form:</strong> 'if' + past perfect simple, and 'would have' + past participle in the main clause.</li>
                    <li><strong>Example:</strong> <span class="subordinate-clause" style="background-color: lightorange;"><span class="conjunction" style="background-color: beige;">If</span> <span class="subject" style="font-weight:bold; text-decoration: underline;">we</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">had left</span> <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">earlier</span>,</span> <span class="main-clause" style="background-color: lightgreen;"><span class="subject" style="font-weight:bold; text-decoration: underline;">we</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">would have caught</span> <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">the train</span>.</span></li>
                </ul>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Third Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: lightorange;"><span class="conjunction" style="background-color: beige;">If</span> <span class="subject" style="font-weight:bold; text-decoration: underline;">she</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">had studied</span> <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">more,</span></span> <span class="main-clause" style="background-color: lightgreen;"><span class="subject" style="font-weight:bold; text-decoration: underline;">she</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">would have passed</span> <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">the exam</span>.</span>
                </div>
                <h3>Example 2: Third Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: lightorange;"><span class="conjunction" style="background-color: beige;">If</span> <span class="subject" style="font-weight:bold; text-decoration: underline;">they</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">had booked</span> <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">tickets earlier,</span></span> <span class="main-clause" style="background-color: lightgreen;"><span class="subject" style="font-weight:bold; text-decoration: underline;">they</span> <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">would have gone</span> <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">to the concert</span>.</span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section for Third Conditional
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Third Conditional</h2>
        <p>Complete the sentences by selecting the correct options.</p>
    </div>
    """, unsafe_allow_html=True)

    # Define sentences with blanks to fill in
    sentences = [
        {
            "parts": [
                "1. If she ",
                {"key": "s1_v1", "options": ["had studied", "studied", "would study"]},
                " harder, she ",
                {"key": "s1_v2", "options": ["would have passed", "would pass", "had passed"]},
                " the exam."
            ],
            "answers": {
                "s1_v1": "had studied",
                "s1_v2": "would have passed"
            }
        },
        {
            "parts": [
                "2. If they ",
                {"key": "s2_v1", "options": ["had left", "left", "would leave"]},
                " earlier, they ",
                {"key": "s2_v2", "options": ["would have caught", "would catch", "had caught"]},
                " the train."
            ],
            "answers": {
                "s2_v1": "had left",
                "s2_v2": "would have caught"
            }
        },
        {
            "parts": [
                "3. If we ",
                {"key": "s3_v1", "options": ["had known", "knew", "would know"]},
                " about the party, we ",
                {"key": "s3_v2", "options": ["would have gone", "would go", "had gone"]},
                "."
            ],
            "answers": {
                "s3_v1": "had known",
                "s3_v2": "would have gone"
            }
        },
        {
            "parts": [
                "4. If I ",
                {"key": "s4_v1", "options": ["had seen", "saw", "would see"]},
                " him, I ",
                {"key": "s4_v2", "options": ["would have told", "would tell", "had told"]},
                " him the news."
            ],
            "answers": {
                "s4_v1": "had seen",
                "s4_v2": "would have told"
            }
        },
        {
            "parts": [
                "5. If you ",
                {"key": "s5_v1", "options": ["had called", "called", "would call"]},
                " me, I ",
                {"key": "s5_v2", "options": ["would have picked", "would pick", "had picked"]},
                " you up."
            ],
            "answers": {
                "s5_v1": "had called",
                "s5_v2": "would have picked"
            }
        }
    ]

    user_answers = {}

    # Render sentences with proper alignment
    for idx, sentence in enumerate(sentences):
        sentence_row = st.container()
        with sentence_row:
            # Use columns to align each part of the sentence in the same row
            cols = st.columns(len(sentence["parts"]))
            for i, part in enumerate(sentence["parts"]):
                if isinstance(part, dict):  # Dropdowns
                    key = part["key"]
                    options = part["options"]
                    user_answers[key] = cols[i].selectbox("", options, key=key, label_visibility="collapsed")
                else:  # Static text
                    cols[i].markdown(f"<p style='text-align: center; margin: 0;'>{part}</p>", unsafe_allow_html=True)

    # Add spacing below the last sentence
    st.markdown("<div style='margin-bottom: 20px;'></div>", unsafe_allow_html=True)

    # Check Answers Button
    if st.button("Check Answers"):
        score = 0
        total = len(sentences)
        for sentence in sentences:
            correct = True
            for key, correct_answer in sentence["answers"].items():
                if user_answers.get(key) != correct_answer:
                    correct = False
            if correct:
                score += 1
        st.markdown(f"### Your Score: {score}/{total}")
        if score == total:
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l3_t1_2_all_correct = True  # Correctly update session state
        else:
            st.error(f"You got {score} out of {len(score)} correct. Try again.")
            st.session_state.tt_l3_t1_2_error_count += 1  # Ensure flag is False
                
    if st.session_state.get('tt_l3_t1_2_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T1_2, key='tt_l3_t1_2_practice')

        with col2:
            if st.button('Next', key='tt_l3_t1_2_next'):
                complete_task_and_record_data(
                page_prefix="tt_l3_t1_2",
                task_id="TT_L3_T1_2",
                next_page_func=navigate_to_tt_l3_t1_3
                )

            if st.button('Back', key='tt_l3_t1_2_back'):
                back_to_tt_l3_t1_1()
                st.rerun()
            

def TT_L3_T1_3():
    st.title("Third Conditional Sentences")
    
    if "tt_l3_t1_3_start_time" not in st.session_state:
        st.session_state.tt_l3_t1_3_start_time = datetime.datetime.now()

    add_css()

    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Zero Conditional:</strong> The Zero Conditional is used for things that are always true or very likely to happen. It refers to general truths or facts. It's formed using the Present Simple tense in both the 'if' clause and the main clause.</p>
                <p><em>Example:</em> <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                    <span class="conjunction" style="background-color: beige;">If</span>
                    <span class="subject" style="font-weight:bold">you</span>
                    <span class="verb" style="font-weight:bold; color: blue">boil</span> water</span>,
                    <span class="main-clause" style="background-color: lightgreen;">
                    <span class="subject" style="font-weight:bold">it</span>
                    <span class="verb" style="font-weight:bold; color: blue">turns</span> into steam.</span></p>
                <p><strong>First Conditional:</strong> The First Conditional is used to talk about likely or possible results in the future. It's formed using the Present Simple tense in the 'if' clause and 'will' or a modal verb in the main clause.</p>
                <p><em>Example:</em> <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                    <span class="conjunction" style="background-color: beige;">If</span>
                    <span class="subject" style="font-weight:bold">it</span>
                    <span class="verb" style="font-weight:bold; color: blue">rains</span> tomorrow</span>,
                    <span class="main-clause" style="background-color: lightgreen;">
                    <span class="subject" style="font-weight:bold">we</span>
                    <span class="verb" style="font-weight:bold; color: blue">will cancel</span> the picnic.</span></p>
                <p><strong>Second Conditional:</strong> The Second Conditional is used to talk about unreal or unlikely situations in the present or future. It's formed using the Past Simple tense in the 'if' clause and 'would' + base form of the verb in the main clause.</p>
                <p><em>Example:</em> <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                    <span class="conjunction" style="background-color: beige;">If</span>
                    <span class="subject" style="font-weight:bold">I</span>
                    <span class="verb" style="font-weight:bold; color: blue">won</span> the lottery</span>,
                    <span class="main-clause" style="background-color: lightgreen;">
                    <span class="subject" style="font-weight:bold">I</span>
                    <span class="verb" style="font-weight:bold; color: blue">would travel</span> around the world.</span></p>
                <p><strong>Third Conditional:</strong> The Third Conditional is used to talk about imagined situations in the past, often involving regret. It's formed using 'if' + Past Perfect tense in the 'if' clause and 'would have' + past participle in the main clause.</p>
                <p><em>Example:</em> <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                    <span class="conjunction" style="background-color: beige;">If</span>
                    <span class="subject" style="font-weight:bold; text-decoration: underline;">we</span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">had left</span>
                    <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">earlier</span></span>,
                    <span class="main-clause" style="background-color: lightgreen;">
                    <span class="subject" style="font-weight:bold; text-decoration: underline;">we</span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">would have caught</span>
                    <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">the train</span>.</span></p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Zero Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                        <span class="conjunction" style="background-color: beige;">If</span> 
                        <span class="subject" style="font-weight:bold">you</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">heat</span> 
                        <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">ice</span>
                    </span>, 
                    <span class="main-clause" style="background-color: lightgreen;">
                        <span class="subject" style="font-weight:bold">it</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">melts</span>.
                    </span>
                </div>
                <h3>Example 2: First Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                        <span class="conjunction" style="background-color: beige;">If</span> 
                        <span class="subject" style="font-weight:bold">you</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">study</span>
                    </span>, 
                    <span class="main-clause" style="background-color: lightgreen;">
                        <span class="subject" style="font-weight:bold">you</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">will pass</span> 
                        <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">the exam</span>.
                    </span>
                </div>
                <h3>Example 3: Second Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                        <span class="conjunction" style="background-color: beige;">If</span> 
                        <span class="subject" style="font-weight:bold">I</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">won</span> 
                        <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">the lottery</span>
                    </span>, 
                    <span class="main-clause" style="background-color: lightgreen;">
                        <span class="subject" style="font-weight:bold">I</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">would travel</span> 
                        <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">around the world</span>.
                    </span>
                </div>
                <h3>Example 4: Third Conditional</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: rgba(255, 165, 0, 0.5);">
                        <span class="conjunction" style="background-color: beige;">If</span> 
                        <span class="subject" style="font-weight:bold; text-decoration: underline;">she</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">had studied</span> 
                        <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">more</span>
                    </span>, 
                    <span class="main-clause" style="background-color: lightgreen;">
                        <span class="subject" style="font-weight:bold; text-decoration: underline;">she</span> 
                        <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">would have passed</span> 
                        <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">the exam</span>.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Conditional Matching
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Match the Sentence Halves</h2>
        <p>Drag and drop to match the first half of the sentence with the correct second half.</p>
    </div>
    """, unsafe_allow_html=True)

    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .draggable {
            padding: 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            cursor: grab;
            margin: 5px;
            font-size: 16px;
            min-width: 180px;
            max-width: 300px;
        }
        .draggable:active {
            cursor: grabbing;
        }
        .drop-container {
            min-height: 50px;
            min-width: 180px;
            max-width: 300px;
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
            border-radius: 10px;
            padding: 10px;
            margin: 5px auto;
            font-size: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .sentence-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .button-container {
            margin-top: 20px;
        }
    </style>
    """

    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <!-- Draggable items -->
            <div draggable="true" class="draggable" id="draggable1">If I have spare time</div>
            <div draggable="true" class="draggable" id="draggable2">I always read a book.</div>
            <div draggable="true" class="draggable" id="draggable3">If you tell them your reasons this time</div>
            <div draggable="true" class="draggable" id="draggable4">your parents will accept it.</div>
            <div draggable="true" class="draggable" id="draggable5">You can get to my house</div>
            <div draggable="true" class="draggable" id="draggable6">if you take the number 35 bus.</div>
            <div draggable="true" class="draggable" id="draggable7">If you don’t do some sports activities</div>
            <div draggable="true" class="draggable" id="draggable8">you will gain a lot of weight.</div>
            <div draggable="true" class="draggable" id="draggable9">If I hadn't gone to these horse-riding lessons</div>
            <div draggable="true" class="draggable" id="draggable10">I wouldn't have lost my watch.</div>
            <div draggable="true" class="draggable" id="draggable11">People in Bangkok would not have to face so much stress in the streets</div>
            <div draggable="true" class="draggable" id="draggable12">if there were better transportation system.</div>
        </div>
        <!-- Create two columns of drop zones -->
        <div class="sentence-container">
            <div class="drop-container" id="drop1"></div>
            <div class="drop-container" id="drop2"></div>
        </div>
        <div class="sentence-container">
            <div class="drop-container" id="drop3"></div>
            <div class="drop-container" id="drop4"></div>
        </div>
        <div class="sentence-container">
            <div class="drop-container" id="drop5"></div>
            <div class="drop-container" id="drop6"></div>
        </div>
        <div class="sentence-container">
            <div class="drop-container" id="drop7"></div>
            <div class="drop-container" id="drop8"></div>
        </div>
        <div class="sentence-container">
            <div class="drop-container" id="drop9"></div>
            <div class="drop-container" id="drop10"></div>
        </div>
        <div class="sentence-container">
            <div class="drop-container" id="drop11"></div>
            <div class="drop-container" id="drop12"></div>
        </div>
        <!-- Add Check Answers button -->
        <div class="button-container">
            <button id="check-button" onclick="checkAnswer()">
                Check Answers
            </button>
            <button id="next-page-button" onclick="goToNextPage()" style="display:none;">
                Next
            </button>
        </div>
        <p id="result"></p>
    </div>

    <script>
        const draggables = document.querySelectorAll('.draggable');
        const dropContainers = document.querySelectorAll('.drop-container');
        const dragContainer = document.getElementById('dragContainer');
        const result = document.getElementById('result');

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggable.classList.add('dragging');
            });

            draggable.addEventListener('dragend', () => {
                draggable.classList.remove('dragging');
            });
        });

        const allContainers = [dragContainer, ...dropContainers];

        allContainers.forEach(container => {
            container.addEventListener('dragover', e => {
                e.preventDefault();
                container.classList.add('dragging-over');
            });
            container.addEventListener('dragleave', () => {
                container.classList.remove('dragging-over');
            });
            container.addEventListener('drop', e => {
                e.preventDefault();
                const draggable = document.querySelector('.dragging');
                if (draggable) {
                    if (container.classList.contains('drop-container')) {
                        if (container.children.length > 0) {
                            dragContainer.appendChild(container.children[0]);
                        }
                        container.appendChild(draggable);
                    } else {
                        container.appendChild(draggable);
                    }
                }
                container.classList.remove('dragging-over');
            });
        });

        const correctPairs = [
            ["If I have spare time", "I always read a book."],
            ["If you tell them your reasons this time", "your parents will accept it."],
            ["You can get to my house", "if you take the number 35 bus."],
            ["If you don’t do some sports activities", "you will gain a lot of weight."],
            ["If I hadn't gone to these horse-riding lessons", "I wouldn't have lost my watch."],
            ["People in Bangkok would not have to face so much stress in the streets", "if there were better transportation system."]
        ];

        function checkAnswer() {
            let score = 0;
            const total = correctPairs.length;

            for (let i = 0; i < total; i++) {
                const dropzone1 = document.getElementById(`drop${i * 2 + 1}`);
                const dropzone2 = document.getElementById(`drop${i * 2 + 2}`);
                const userSentence = [dropzone1, dropzone2].map(drop => drop.children.length > 0 ? drop.children[0].textContent.trim() : "");
                const correctSentence = correctPairs[i];
                const isCorrect = arraysEqual(userSentence, correctSentence) || arraysEqual(userSentence, correctSentence.slice().reverse());
                if (isCorrect) {
                    score++;
                    dropzone1.style.borderColor = 'green';
                    dropzone2.style.borderColor = 'green';
                } else {
                    dropzone1.style.borderColor = 'red';
                    dropzone2.style.borderColor = 'red';
                }
            }

            result.textContent = `You got ${score} out of ${total} correct.`;
            if (score === total) {
                result.style.color = 'green';
                document.getElementById("next-page-button").style.display = "inline-block";
                result.textContent += " Great job! You matched all sentences correctly.";
            } else {
                result.style.color = 'red';
                document.getElementById("next-page-button").style.display = "none";
                result.textContent += " Some answers are incorrect. Please try again.";
            }
        }

        function arraysEqual(a, b) {
            if (a.length !== b.length) return false;
            for (var i = 0; i < a.length; i++) {
                if (a[i] !== b[i]) return false;
            }
            return true;
        }

        function goToNextPage() {
            // Logic to go to the next page (can be a redirect or showing a new section)
            window.location.href = "/next_page"; // Adjust this according to your actual next page route
        }
    </script>
    """

    # Combine CSS and JavaScript for the Drag-and-Drop Component
    html_code = drag_and_drop_css + drag_and_drop_js

    # Display the drag-and-drop component
    components.html(html_code, height=1000, scrolling=True)

    col1, col2 = st.columns(2)
    with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T1_3, key='tt_l3_t1_3_practice')

    with col2:
            if st.button('Next', key='tt_l3_t1_3_next'):
                end_time = datetime.datetime.now()
                start_time = st.session_state.tt_l3_t1_3_start_time
                time_diff = end_time - start_time
                    # Convert timedelta to HH:MM:SS
                total_seconds = int(time_diff.total_seconds())
                hours, remainder = divmod(total_seconds, 3600)
                minutes, seconds = divmod(remainder, 60)
                time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
                try:
                    h, m, s = map(int, time_spent_str.split(':'))
                    time_obj = datetime.time(h, m, s)
                except ValueError as e:
                    st.error(f"Error parsing time: {e}")
                    time_obj = None  # fallback
                errors_info = {"error_count": 0}
                try:
                    student_id = st.session_state.user_info.id
                    task_id = "TT_L3_T1_3"
                    record_task_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=end_time,        # current datetime
                            time_spent=time_obj,
                            errors_dict=errors_info
                        )
                except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                st.session_state.tt_l3_t1_3_start_time = None
                    
                navigate_to_task3_1()
                st.rerun()


            if st.button('Back', key='tt_l3_t1_3_back'):
                back_to_tt_l3_t1_2()
                st.rerun()


def TT_L3_T2_1():
    st.title("Subordinating Conjunctions")

    if 'tt_l3_t2_1_all_correct' not in st.session_state:
        st.session_state.tt_l3_t2_1_all_correct = False

    if "tt_l3_t2_1_start_time" not in st.session_state:
        st.session_state.tt_l3_t2_1_start_time = datetime.datetime.now()
    
    if "tt_l3_t2_1_error_count" not in st.session_state:
        st.session_state.tt_l3_t2_1_error_count = 0

    add_css()

    st.markdown("""
    <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p>Subordinating conjunctions are used to introduce subordinate clauses, which provide additional information to the main clause. Understanding how to use these conjunctions effectively allows you to construct more complex and meaningful sentences.</p>
                <h3>Types of Subordinating Conjunctions:</h3>
                <ul>
                    <li><strong>Simple Subordinating Conjunctions:</strong> Includes conjunctions like '<span class="conjunction" style="background-color: beige;">as</span>', '<span class="conjunction" style="background-color: beige;">after</span>', '<span class="conjunction" style="background-color: beige;">before</span>', '<span class="conjunction" style="background-color: beige;">since</span>', '<span class="conjunction" style="background-color: beige;">until</span>', '<span class="conjunction" style="background-color: beige;">although</span>', '<span class="conjunction" style="background-color: beige;">whether</span>', '<span class="conjunction" style="background-color: beige;">so (that)</span>', and '<span class="conjunction" style="background-color: beige;">though</span>'.</li>
                    <li><strong>Complex Subordinating Conjunctions:</strong> These are phrases like '<span class="conjunction" style="background-color: beige;">as long as</span>', '<span class="conjunction" style="background-color: beige;">as soon as</span>', '<span class="conjunction" style="background-color: beige;">in order that</span>', '<span class="conjunction" style="background-color: beige;">despite the fact that</span>', '<span class="conjunction" style="background-color: beige;">due to the fact that</span>', '<span class="conjunction" style="background-color: beige;">as if</span>', and '<span class="conjunction" style="background-color: beige;">as though</span>'.</li>
                </ul>
                <p>Let's explore how these conjunctions are used in sentences:</p>
                <h3>Using Commas with Subordinating Conjunctions:</h3>
                <p>When the subordinate clause comes before the main clause, a comma is usually used to separate the two clauses. For example:</p>
                <ul>
                    <li><span class="subordinate-clause" style="background-color: lightorange;"><span class="conjunction" style="background-color: beige;">Although</span> she was tired,</span> <span class="main-clause" style="background-color: lightgreen;">she continued working.</span></li>
                    <li><span class="subordinate-clause" style="background-color: lightorange;"><span class="conjunction" style="background-color: beige;">If</span> you study hard,</span> <span class="main-clause" style="background-color: lightgreen;">you will succeed.</span></li>
                </ul>
                <p>However, when the subordinate clause follows the main clause, no comma is usually needed:</p>
                <ul>
                    <li><span class="main-clause" style="background-color: lightgreen;">She continued working</span> <span class="subordinate-clause" style="background-color: lightorange;"> <span class="conjunction" style="background-color: beige;">although</span> she was tired.</span></li>
                    <li><span class="main-clause" style="background-color: lightgreen;">You will succeed</span> <span class="subordinate-clause" style="background-color: lightorange;"> <span class="conjunction" style="background-color: beige;">if</span> you study hard.</span></li>
                </ul>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)


    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Simple Subordinating Conjunction</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        <span class="subject">She</span> 
                        <span class="verb-phrase"><span class="verb">went home</span></span>
                    </span> 
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">after</span> 
                        <span class="subject">she</span>
                        <span class="verb-phrase"><span class="verb">finished</span></span>
                        <span class="object">work</span>.
                    </span>
                </div>
                <h3>Example 2: Complex Subordinating Conjunction</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        <span class="subject">They</span> 
                        <span class="verb-phrase"><span class="verb">started the meeting</span></span>
                    </span> 
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">as soon as</span> 
                        <span class="subject">everyone</span>
                        <span class="verb-phrase"><span class="verb">arrived</span></span>.
                    </span>
                </div>
                <h3>Example 3: Subordinating Conjunction for Contrast</h3>
                <div class="sentence-container">
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">Even though</span> 
                        <span class="subject">he</span>
                        <span class="verb-phrase"><span class="verb">was tired</span></span>,
                    </span> 
                    <span class="main-clause" style="background-color: lightgreen;">
                        <span class="subject">he</span> 
                        <span class="verb-phrase"><span class="verb">continued working</span></span>.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)


    # Practice Section: Select the Correct Conjunction
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Select the Correct Conjunction</h2>
        <p>Select the appropriate subordinating conjunction to complete each sentence correctly.</p>
    </div>
    """, unsafe_allow_html=True)

    # Define the sentences with blanks and options
    sentences = [
        {
            "text": "1. ________ the bus arrived, everyone rushed to get on it because the rain was pouring heavily.",
            "options": ["Until", "After", "Before", "As soon as"],
            "answer": "As soon as",
            "key": "q1"
        },
        {
            "text": "2. People do different leisure activities ________ they have different interests.",
            "options": ["which", "when", "before", "since"],
            "answer": "since",
            "key": "q2"
        },
        {
            "text": "3. ________ many celebrities get bad comments on social media, they are still famous among their fans.",
            "options": ["Due to", "In case of", "In spite of", "Even though"],
            "answer": "Even though",
            "key": "q3"
        },
        {
            "text": "4. Nowadays, many new kinds of illnesses make people sick easily ________ they are healthy.",
            "options": ["due to the fact that", "despite the fact that", "because of", "in case of"],
            "answer": "despite the fact that",
            "key": "q4"
        },
        {
            "text": "5. She decided to stay home ________ it was raining heavily outside.",
            "options": ["because", "if", "unless", "although"],
            "answer": "because",
            "key": "q5"
        },
    ]

    user_answers = []

    # Loop through sentences and use radio buttons for options
    for sentence in sentences:
        st.write(sentence["text"])
        user_answer = st.radio("", sentence["options"],index=None, key=sentence["key"])
        user_answers.append((user_answer, sentence["answer"]))

    # Check Answers button
    if st.button("Check Answers"):
        score = sum(1 for user_answer, correct_answer in user_answers if user_answer == correct_answer)
        total = len(sentences)
        st.markdown(f"### Your Score: {score}/{total}")
        if score == total:
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l3_t2_1_all_correct = True
        else:
            st.error("You made some mistakes. Please review the rule section and try again.")
            st.session_state.tt_l3_t2_1_error_count += 1

    if st.session_state.get('tt_l3_t2_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T2_1, key='tt_l3_t2_1_practice')

        with col2:
            if st.button('Next', key='tt_l3_t2_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l3_t2_1",
                task_id="TT_L3_T2_1",
                next_page_func=navigate_to_task3_2
                )



def TT_L3_T3_1():
    st.title("TT_L3_T3_1: Present Perfect Continuous")

    if 'tt_l3_t3_1_all_correct' not in st.session_state:
        st.session_state.tt_l3_t3_1_all_correct = False
    
    if "tt_l3_t3_1_start_time" not in st.session_state:
        st.session_state.tt_l3_t3_1_start_time = datetime.datetime.now()
    
    if "tt_l3_t3_1_error_count" not in st.session_state:
        st.session_state.tt_l3_t3_1_error_count = 0

    
    add_css()

    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
            <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📒 Rule</h2>
            <div style="padding: 10px; border-radius: 5px;">
                <details id="rule_details">
                    <summary style="font-weight: bold;">Expand to see the rule</summary>
                    <p>The Present Perfect Continuous tense is used to describe an action that started in the past and continues up to the present, or was recently completed but has a present effect. It emphasizes the duration of the activity.</p>
                    <p><strong>Key Words:</strong> <span style="background-color: lightblue;">since</span>, <span style="background-color: lightblue;">for</span>, <span style="background-color: lightblue;">lately</span>, <span style="background-color: lightblue;">recently</span>, <span style="background-color: lightblue;">all day</span>, <span style="background-color: lightblue;">all morning</span>.</p>
                    <p><strong>Form:</strong></p>
                    <ul>
                        <li><strong>Affirmative:</strong> Subject + have/has + been + verb + -ing</li>
                        <li><strong>Negative:</strong> Subject + have/has + not + been + verb + -ing</li>
                        <li><strong>Question:</strong> Have/Has + subject + been + verb + -ing?</li>
                    </ul>
                    <h3>Difference between Present Perfect and Present Perfect Continuous:</h3>
                    <p>The <strong>Present Perfect</strong> tense is used to express completed actions at an unspecified time before now, focusing on the result.</p>
                    <p>The <strong>Present Perfect Continuous</strong> tense emphasizes the duration or ongoing nature of an action that started in the past and continues in the present.</p>
                    <p><strong>Example:</strong></p>
                    <ul>
                        <li>Present Perfect: <span style="text-decoration: underline; font-weight: bold;">She</span> <span style="color: blue; text-decoration: underline; font-weight: bold;">has written</span> three letters.</li>
                        <li>Present Perfect Continuous: <span style="text-decoration: underline; font-weight: bold;">She</span> <span style="color: blue; text-decoration: underline; font-weight: bold;">has been writing</span> letters <span style="background-color: lightblue;">since</span> this morning.</li>
                    </ul>
                </details>
            </div>
        </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📝 Examples</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Affirmative Sentences</h3>
                <p>
                    <span style="text-decoration: underline; font-weight: bold;">I</span> 
                    <span style="color: blue; text-decoration: underline; font-weight: bold;">have been working</span> 
                    on this project <span style="background-color: lightblue;">for</span> two hours.
                </p>
                <p>
                    <span style="text-decoration: underline; font-weight: bold;">They</span> 
                    <span style="color: blue; text-decoration: underline; font-weight: bold;">have been traveling</span> 
                    around the world <span style="background-color: lightblue;">since</span> last year.
                </p>
                <h3>Negative Sentences</h3>
                <p>
                    <span style="text-decoration: underline; font-weight: bold;">He</span> 
                    <span style="color: blue; text-decoration: underline; font-weight: bold;">has not been feeling</span> 
                    well <span style="background-color: lightblue;">lately</span>.
                </p>
                <h3>Questions</h3>
                <p>
                    <span style="color: blue; text-decoration: underline; font-weight: bold;">Have</span> 
                    <span style="text-decoration: underline; font-weight: bold;">you</span> 
                    <span style="color: blue; text-decoration: underline; font-weight: bold;">been studying</span> 
                    English <span style="background-color: lightblue;">for</span> a long time?
                </p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Multiple Choice Questions
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Choose the Correct Verb Form</h2>
        <p>Select the correct verb form to complete each sentence.</p>
    </div>
    """, unsafe_allow_html=True)

    # List of questions and options
    questions = [
        {
            'question': '1. Although they ______ a photocopying machine for quite some time, they still cannot find what caused a paper jam.',
            'options': ['fixed', 'being fixed', 'have been fixing', 'fix'],
            'answer': 'have been fixing'
        },
        {
            'question': '2. My team ________ the inventory since our boss left, yet it is not properly done.',
            'options': ['will be checking', 'checks', 'has been checking', 'is checking'],
            'answer': 'has been checking'
        },
        {
            'question': '3. Jane ______ her piano skills all day for a few months to get herself ready for an upcoming piano contest.',
            'options': ['does practice', 'practices', 'is practicing', 'has been practicing'],
            'answer': 'has been practicing'
        },
        {
            'question': '4. It ________ so heavily and continuously for three days, now it finally stopped.',
            'options': ['has been snowing', 'is snowy', 'has snowed', 'snowed'],
            'answer': 'has been snowing'
        },
        {
            'question': '5. My dad along with my older brother ______ the car since 8 o’clock. Now they look so filthy.',
            'options': ['repair', 'has been repairing', 'are repairing', 'have been repairing'],
            'answer': 'have been repairing'
        }
    ]

    user_answers = []
    for idx, q in enumerate(questions):
        st.write(q['question'])
        options = q['options']
        user_answer = st.radio(f"",options, index=None, key=f"q{idx}")
        user_answers.append(user_answer)

    if st.button("Check Answers"):
        total = len(questions)
        score = sum(1 for idx, q in enumerate(questions) if user_answers[idx] == q['answer'])
        st.write(f"Your score: **{score} out of {total}**")
        if score == total:
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l3_t3_1_all_correct = True
        else:
            st.error("You made some mistakes. Please review the rule section and try again.")
            st.session_state.tt_l3_t3_1_error_count += 1

    if st.session_state.get('tt_l3_t3_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T3_1, key='tt_l3_t3_1_practice')

        with col2:
            if st.button('Next', key='tt_l3_t3_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l3_t3_1",
                task_id="TT_L3_T3_1",
                next_page_func=navigate_to_task3_4
                )
            

def TT_L3_T4_1():
    st.title("TT_L3_T4_1: Gerunds")

    add_css()

    if 'tt_l3_t4_1_all_correct' not in st.session_state:
        st.session_state.tt_l3_t4_1_all_correct = False

    if "tt_l3_t4_1_start_time" not in st.session_state:
        st.session_state.tt_l3_t4_1_start_time = datetime.datetime.now()
    
    if "tt_l3_t4_1_error_count" not in st.session_state:
        st.session_state.tt_l3_t4_1_error_count = 0


    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
            <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📒 Rule</h2>
            <div style="padding: 10px; border-radius: 5px;">
                <details id="rule_details">
                    <summary style="font-weight: bold;">Expand to see the rule</summary>
                    <p>Gerunds are verbs that end in '-ing' and function as nouns in a sentence. They can act as subjects, objects, or complements.</p>
                    <p><strong>Introduction of a new subject before the '-ing' form:</strong> This often involves a possessive adjective or an object pronoun before the gerund.</p>
                    <p><strong>Examples:</strong></p>
                    <ul>
                        <li>
                            "<span class="subject" style="font-weight:bold; text-decoration: underline;">John</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">enjoys</span> 
                            <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">his mother</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">baking</span> cookies."
                        </li>
                        <li>
                            "<span class="subject" style="font-weight:bold; text-decoration: underline;">I</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">enjoy</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">reading</span> 
                            books."
                        </li>
                    </ul>
                    <p><strong>Verbs connected with the senses + direct object + '-ing' form:</strong> Verbs like 'see,' 'hear,' 'feel,' etc., are followed by a direct object and a gerund to emphasize an ongoing action.</p>
                    <p><strong>Example:</strong></p>
                    <ul>
                        <li>
                            "<span class="subject" style="font-weight:bold; text-decoration: underline;">She</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">heard</span> 
                            <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">them</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">singing</span> 
                            a song."
                        </li>
                    </ul>
                    <p>Some verbs are naturally followed by the gerund form.</p>
                    <p><strong>Examples:</strong></p>
                    <ul>
                        <li>
                            "<span class="subject" style="font-weight:bold; text-decoration: underline;">They</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">avoid</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">driving</span> 
                            at night."
                        </li>
                        <li>
                            "<span class="subject" style="font-weight:bold; text-decoration: underline;">We</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">enjoy</span> 
                            <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">playing</span> 
                            soccer."
                        </li>
                    </ul>
                </details>
            </div>
        </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📝 Examples</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Gerunds with New Subjects</h3>
                <div class="sentence-container">
                    "<span class="subject" style="font-weight:bold; text-decoration: underline;">My friend</span> 
                    <span style="padding-right: 5px;"></span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">appreciates</span> 
                    <span style="padding-right: 5px;"></span>
                    <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">my</span> 
                    <span style="padding-right: 5px;"></span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">helping</span> 
                    <span style="padding-right: 5px;"></span>
                    him with homework."
                </div>
                <h3>Example 2: Verbs of Perception with Gerunds</h3>
                <div class="sentence-container">
                    "<span class="subject" style="font-weight:bold; text-decoration: underline;">We</span> 
                    <span style="padding-right: 5px;"></span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">saw</span> 
                    <span style="padding-right: 5px;"></span>
                    <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">the dog</span> 
                    <span style="padding-right: 5px;"></span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">running</span> 
                    <span style="padding-right: 5px;"></span>
                    in the park."
                </div>
                <h3>Example 3: Verbs Followed by Gerunds</h3>
                <div class="sentence-container">
                    "<span class="subject" style="font-weight:bold; text-decoration: underline;">They</span> 
                    <span style="padding-right: 5px;"></span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">enjoy</span> 
                    <span style="padding-right: 5px;"></span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">hiking</span> 
                    <span style="padding-right: 5px;"></span>
                    mountains."
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Identifying Correct Use of Gerunds
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Choose the Correct Form</h2>
        <p>Select the correct form (gerund or infinitive) to complete each sentence.</p>
    </div>
    """, unsafe_allow_html=True)

    # Practice Questions
    questions = [
        {
            'question': '1. She enjoys _____ to music.',
            'options': ['listening', 'to listen'],
            'answer': 'listening'
        },
        {
            'question': '2. They decided _____ a new car.',
            'options': ['buying', 'to buy'],
            'answer': 'to buy'
        },
        {
            'question': '3. He avoids _____ in crowded places.',
            'options': ['being', 'to be'],
            'answer': 'being'
        },
        {
            'question': '4. We plan _____ a trip next month.',
            'options': ['taking', 'to take'],
            'answer': 'to take'
        },
        {
            'question': '5. I can\'t help _____ excited about the concert.',
            'options': ['feeling', 'to feel'],
            'answer': 'feeling'
        }
    ]

    user_answers = []
    for idx, q in enumerate(questions):
        st.write(q['question'])
        options = q['options']
        user_answer = st.radio( f"",options, index=None, key=f"q{idx}")
        user_answers.append(user_answer)

    if st.button("Check Answers"):
        score = 0
        total = len(questions)

        for idx, q in enumerate(questions):
            if user_answers[idx] == q['answer']:
                score += 1

        st.write(f"Your score: **{score} out of {total}**")

        if score == total:
            st.success("Great job! You answered all questions correctly.")
            st.session_state.tt_l3_t4_1_all_correct = True
        else:
            st.error("You made some mistakes. Please review the rule section and try again.")
            st.session_state.tt_l3_t4_1_error_count += 1
            
    if st.session_state.get('tt_l3_t4_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T4_1, key='tt_l3_t4_1_practice')

        with col2:
            if st.button('Next', key='tt_l3_t4_1_next'):
                complete_task_and_record_data(
                page_prefix="tt_l3_t4_1",
                task_id="TT_L3_T4_1",
                next_page_func=navigate_to_tt_l3_t4_2
                )




def TT_L3_T4_2():
    st.title("Gerunds and Infinitives")

    if "tt_l3_t4_2_start_time" not in st.session_state:
        st.session_state.tt_l3_t4_2_start_time = datetime.datetime.now()

    add_css()

    # Rule Section
    st.markdown("""
     <div id="rule_section" class="rule-frame">
        <h2>📒 Rule</h2>
        <div>
            <details>
            <summary style="font-weight: bold;">Expand to see the rule</summary>
                <p><strong>Gerunds</strong> are verbs ending in '-ing' that function as nouns in a sentence. They can act as subjects, objects, or complements.</p>
                <p><strong>Infinitives</strong> are the base form of a verb, often preceded by 'to' (to eat, to run). They can also function as nouns, adjectives, or adverbs.</p>
                <p>Some verbs can be followed by either a gerund or an infinitive, but the meaning may change. Other verbs are only followed by one or the other.</p>
                <p><strong>Key Points:</strong></p>
                <ul>
                    <li>After certain verbs, use a gerund. Example: "She <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">enjoys swimming</span>."</li>
                    <li>After certain verbs, use an infinitive. Example: "They <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">decided to leave</span> early."</li>
                    <li>After some verbs, both forms are possible but with a change in meaning. Example: "He <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">stopped smoking</span>." vs. "He <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">stopped to smoke</span>."</li>
                    <li>Gerunds can follow prepositions. Example: "She <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">is good at painting</span>."</li>
                </ul>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1:</h3>
                <div class="sentence-container">
                    <span class="subject" style="font-weight:bold; text-decoration: underline;">If your boss doesn't mind</span>,
                    <span style="padding-right: 5px;"></span>
                    <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">you</span>
                    <span style="padding-right: 5px;"></span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">joining</span>
                    <span style="padding-right: 5px;"></span>
                    us could be fun.
                </div>
                <h3>Example 2:</h3>
                <div class="sentence-container">
                    <span class="subject" style="font-weight:bold; text-decoration: underline;">I can't stand</span>
                    <span style="padding-right: 5px;"></span>
                    <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">people</span>
                    <span style="padding-right: 5px;"></span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">talking</span>
                    <span style="padding-right: 5px;"></span>
                    loudly in the library.
                </div>
                <h3>Example 3:</h3>
                <div class="sentence-container">
                    <span class="subject" style="font-weight:bold; text-decoration: underline;">We saw</span>
                    <span style="padding-right: 5px;"></span>
                    <span class="object" style="font-weight:bold; text-decoration: underline; color: green;">someone</span>
                    <span style="padding-right: 5px;"></span>
                    <span class="verb" style="font-weight:bold; text-decoration: underline; color: blue;">dancing</span>
                    <span style="padding-right: 5px;"></span>
                    in the street.
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)


  # Practice Section: Complex Sentences Using Gerunds (Drag-and-Drop Task)
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Form Sentences Using Gerunds</h2>
        <p>Drag and drop the phrases into the correct order to form meaningful sentences. Each drop zone corresponds to one sentence.</p>
    </div>
    """, unsafe_allow_html=True)


    # CSS for Drag-and-Drop Component
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .draggable {
            padding: 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            cursor: grab;
            margin: 5px;
            font-size: 16px;
            min-width: 150px;
            max-width: 300px;
            text-align: center;
        }
        .draggable:active {
            cursor: grabbing;
        }
        .dropzone {
            min-height: 80px;
            width: 90%;
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
            border-radius: 10px;
            padding: 10px;
            margin: 10px auto;
            font-size: 16px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px;
            align-items: center;
        }
        .sentence-container {
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 20px;
        }
    </style>
    """

    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <!-- Draggable phrases -->
            <div draggable="true" class="draggable" id="phrase1">If your boss doesn't mind</div>
            <div draggable="true" class="draggable" id="phrase2">you delaying</div>
            <div draggable="true" class="draggable" id="phrase3">it could be a possible solution.</div>
            <div draggable="true" class="draggable" id="phrase4">I could not stand people</div>
            <div draggable="true" class="draggable" id="phrase5">shouting at me or</div>
            <div draggable="true" class="draggable" id="phrase6">taking pictures of me all day.</div>
            <div draggable="true" class="draggable" id="phrase7">Then I heard</div>
            <div draggable="true" class="draggable" id="phrase8">someone screaming and</div>
            <div draggable="true" class="draggable" id="phrase9">I told the others to go.</div>
            <div draggable="true" class="draggable" id="phrase10">We cannot see animals</div>
            <div draggable="true" class="draggable" id="phrase11">running, eating, or</div>
            <div draggable="true" class="draggable" id="phrase12">hunting out of their habitat.</div>
        </div>
        <div class="sentence-container" id="sentenceContainer">
            <!-- Dropzones will be inserted here dynamically -->
        </div>
        <div class="button-container">
            <button id="checkButton" class="st-button">Check Answers</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        const sentences = [
            ["If your boss doesn't mind", "you delaying", "it could be a possible solution."],
            ["I could not stand people", "shouting at me or", "taking pictures of me all day."],
            ["Then I heard", "someone screaming and", "I told the others to go."],
            ["We cannot see animals", "running, eating, or", "hunting out of their habitat."]
        ];

        // Shuffle the draggable items
        function shuffle(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        const dragContainer = document.getElementById('dragContainer');
        const sentenceContainer = document.getElementById('sentenceContainer');

        // Make phrases draggable
        const phrases = Array.from(dragContainer.children);
        shuffle(phrases);
        phrases.forEach(phrase => dragContainer.appendChild(phrase));

        // Create one dropzone per sentence
        sentences.forEach((_, index) => {
            const dropzone = document.createElement('div');
            dropzone.classList.add('dropzone');
            dropzone.setAttribute('id', 'dropzone' + index);
            sentenceContainer.appendChild(dropzone);
        });

        let draggedItem = null;

        document.addEventListener('dragstart', function(event) {
            if (event.target.classList.contains('draggable')) {
                draggedItem = event.target;
                setTimeout(() => {
                    event.target.style.display = 'none';
                }, 0);
            }
        });

        document.addEventListener('dragend', function(event) {
            if (event.target.classList.contains('draggable')) {
                setTimeout(() => {
                    event.target.style.display = 'block';
                    draggedItem = null;
                }, 0);
            }
        });

        document.addEventListener('dragover', function(event) {
            event.preventDefault();
        });

        document.addEventListener('drop', function(event) {
            if (event.target.classList.contains('dropzone') || event.target.id === 'dragContainer') {
                event.preventDefault();
                if (draggedItem) {
                    if (event.target.classList.contains('dropzone')) {
                        event.target.appendChild(draggedItem);
                    } else {
                        dragContainer.appendChild(draggedItem);
                    }
                }
            }
        });

    document.getElementById('checkButton').addEventListener('click', function() {
        const dropzones = document.querySelectorAll('.dropzone');
        let score = 0;

        // Create an array of user-formed sentences from the dropzones
        const userSentences = Array.from(dropzones).map(dropzone => 
            Array.from(dropzone.children).map(child => child.textContent.trim())
        );

        // Create a copy of the correct sentences array to track matches
        const unmatchedSentences = [...sentences];

        userSentences.forEach(userSentence => {
            // Check if the user-formed sentence matches any correct sentence (order matters within a sentence)
            const matchIndex = unmatchedSentences.findIndex(correctSentence =>
                userSentence.length === correctSentence.length &&
                userSentence.every((phrase, idx) => phrase === correctSentence[idx])
            );

            if (matchIndex !== -1) {
                score++;
                unmatchedSentences.splice(matchIndex, 1); // Remove matched sentence from unmatched list
            }
        });

        const result = document.getElementById('result');
        if (score === sentences.length) {
            result.textContent = 'Great job! All sentences are correct.';
            result.style.color = 'green';
            Streamlit.setComponentValue(true);
        } else {
            result.textContent = `You got ${score}/${sentences.length} sentences correct. Please try again.`;
            result.style.color = 'red';
        }
    });
    </script>
    """

    # Combine CSS and JS for the drag-and-drop component
    components.html(drag_and_drop_css + drag_and_drop_js, height=900)

    col1, col2 = st.columns(2)
    with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T4_2, key='tt_l3_t4_2_practice')

    with col2:
            if st.button('Next', key='tt_l3_t4_2_next'):
                end_time = datetime.datetime.now()
                start_time = st.session_state.tt_l3_t4_2_start_time
                time_diff = end_time - start_time
                    # Convert timedelta to HH:MM:SS
                total_seconds = int(time_diff.total_seconds())
                hours, remainder = divmod(total_seconds, 3600)
                minutes, seconds = divmod(remainder, 60)
                time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
                try:
                    h, m, s = map(int, time_spent_str.split(':'))
                    time_obj = datetime.time(h, m, s)
                except ValueError as e:
                    st.error(f"Error parsing time: {e}")
                    time_obj = None  # fallback
                errors_info = {"error_count": 0}
                try:
                    student_id = st.session_state.user_info.id
                    task_id = "TT_L3_T4_2"
                    record_task_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=end_time,        # current datetime
                            time_spent=time_obj,
                            errors_dict=errors_info
                        )
                except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                st.session_state.tt_l3_t4_2_start_time = None
                    
                navigate_to_task3_4()
                st.rerun()

            if st.button('Back', on_click=back_to_tt_l3_t4_1, key='tt_l3_t4_2_back'):
                back_to_tt_l3_t4_1()
                st.rerun()



def TT_L3_T5_1():
    st.title("TT_L3_T5_1: Relative Clauses")

    add_css()
    if 'tt_l3_t5_1_all_correct' not in st.session_state:
        st.session_state.tt_l3_t5_1_all_correct = False

    if "tt_l3_t5_1_start_time" not in st.session_state:
        st.session_state.tt_l3_t5_1_start_time = datetime.datetime.now()
    
    if "tt_l3_t5_1_error_count" not in st.session_state:
        st.session_state.tt_l3_t5_1_error_count = 0


    # Rule Section
    st.markdown("""
       <div id="rule_section" class="rule-frame">
            <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📒 Rule</h2>
            <div style="padding: 10px; border-radius: 5px;">
                <details id="rule_details">
                    <summary style="font-weight: bold;">Expand to see the rule</summary>
                    <p><strong>Relative Clauses:</strong> Relative clauses are used to give additional information about a noun. They start with a relative pronoun and function like adjectives, providing more details about the noun.</p>
                    <h3>Relative Pronouns:</h3>
                    <ul>
                        <li><strong>Who:</strong> Refers to people. Example: "The teacher <span class='conjunction' style='background-color: beige;'>who</span> taught me."</li>
                        <li><strong>Whom:</strong> Formal object form referring to people. Example: "The person <span class='conjunction' style='background-color: beige;'>whom</span> you met."</li>
                        <li><strong>Whose:</strong> Shows possession. Example: "The student <span class='conjunction' style='background-color: beige;'>whose</span> laptop was stolen."</li>
                        <li><strong>Which:</strong> Refers to things. Example: "The book <span class='conjunction' style='background-color: beige;'>which</span> I read."</li>
                        <li><strong>That:</strong> Refers to people or things in defining clauses. Example: "The car <span class='conjunction' style='background-color: beige;'>that</span> he bought."</li>
                        <li><strong>Where:</strong> Refers to places. Example: "The city <span class='conjunction' style='background-color: beige;'>where</span> I was born."</li>
                        <li><strong>When:</strong> Refers to times. Example: "The day <span class='conjunction' style='background-color: beige;'>when</span> we met."</li>
                    </ul>
                </details>
            </div>
        </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2 style="background-color: white; padding: 10px; border-radius: 5px;">📝 Examples</h2>
        <div style="padding: 10px; border-radius: 5px;">
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Example 1: Relative Clause with "Whom"</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        The professor 
                    </span>
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">whom</span> we met yesterday
                    </span>
                    <span class="main-clause" style="background-color: lightgreen;">
                        is giving a lecture tonight.
                    </span>
                </div>
                <h3>Example 2: Relative Clause with "Whose"</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        The artist 
                    </span>
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">whose</span> paintings you admire
                    </span>
                    <span class="main-clause" style="background-color: lightgreen;">
                        is having an exhibition.
                    </span>
                </div>
                <h3>Example 3: Relative Clause with "Where"</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        The café 
                    </span>
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">where</span> we had coffee
                    </span>
                    <span class="main-clause" style="background-color: lightgreen;">
                        has closed down.
                    </span>
                </div>
                <h3>Example 4: Relative Clause with "When"</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        The year 
                    </span>
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">when</span> they got married
                    </span>
                    <span class="main-clause" style="background-color: lightgreen;">
                        was 1990.
                    </span>
                </div>
                <h3>Example 5: Relative Clause with "Who"</h3>
                <div class="sentence-container">
                    <span class="main-clause" style="background-color: lightgreen;">
                        Students 
                    </span>
                    <span class="subordinate-clause" style="background-color: lightorange;">
                        <span class="conjunction" style="background-color: beige;">who</span> study hard
                    </span>
                    <span class="main-clause" style="background-color: lightgreen;">
                        achieve good grades.
                    </span>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)


    # Practice Section: Multiple Choice Questions
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Choose the Correct Relative Pronoun</h2>
        <p>Select the correct relative pronoun to complete each sentence.</p>
    </div>
    """, unsafe_allow_html=True)

    # List of questions and options
    questions = [
        {
            'question': '1. The old woman was a pleasant person __________ everyone in the neighborhood respected and loved.',
            'options': ['when', 'where', 'whom', 'whose'],
            'answer': 'whom'
        },
        {
            'question': '2. Participating in English activities or practicing English at home are particularly good for the students for __________ English is a foreign language.',
            'options': ['whom', 'when', 'whose', 'where'],
            'answer': 'whom'
        },
        {
            'question': '3. The Thai chef __________ signature dish won the top prize on a cooking show is opening a restaurant in Japan.',
            'options': ['which', 'whose', 'whom', 'who'],
            'answer': 'whose'
        },
        {
            'question': '4. The young woman smiled as she remembered the friendly stranger with __________ she had shared a conversation about their favorite books.',
            'options': ['which', 'whose', 'who', 'whom'],
            'answer': 'whom'
        },
        {
            'question': '5. The family doctor, __________ daughter is a pediatrician, is opening a free clinic for low-income patients.',
            'options': ['whose', 'which', 'whom', 'where'],
            'answer': 'whose'
        }
    ]

    user_answers = []
    for idx, q in enumerate(questions):
        st.write(q['question'])
        options = q['options']
        user_answer = st.radio(f"", options, index=None, key=f"q{idx}")
        user_answers.append(user_answer)

    if st.button("Check Answers"):
        score = 0
        total = len(questions)
        # No need for all_correct variable since we can compare score with total
        for idx, q in enumerate(questions):
            if user_answers[idx] == q['answer']:
                score += 1
            # No need for else block here since we're only incrementing score when correct

        st.write(f"Your score: **{score} out of {total}**")
        if score == total:
            st.success("Great job! You formed all sentences correctly.")
            st.session_state.tt_l3_t5_1_all_correct = True 
        else:
            st.error("Some sentences are incorrect. Please try again.")
            st.session_state.tt_l3_t5_1_error_count += 1
    
    if st.session_state.get('tt_l3_t5_1_all_correct'):
        col1, col2 = st.columns(2)
        with col1:
                st.button('Practice', on_click=navigate_to_practice_TT_L3_T5_1, key='tt_l3_t5_1_practice')

        with col2:
                if st.button('Next', key='tt_l3_t5_1_next'):
                    complete_task_and_record_data(
                    page_prefix="tt_l3_t5_1",
                    task_id="TT_L3_T5_1",
                    next_page_func=navigate_to_task3_5
                    )


        

def TT_L3_T6_1():
    st.title("Future Tenses")

    if "tt_l13_t6_1_start_time" not in st.session_state:
        st.session_state.tt_l3_t6_1_start_time = datetime.datetime.now()

    add_css()

    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
            <h2>📒 Rule</h2>
            <div>
                <details id="rule_details">
                    <summary style="font-weight: bold;">Expand to see the rule</summary>
                    <p><strong>Future Simple:</strong> The Future Simple is used to talk about actions that will happen at a specific time in the future. It is formed using 'will' + the base form of the verb.</p>
                    <p><em>Example:</em> <span class="subject" style="font-weight:bold">She</span> <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">will travel</span> <span class="object" style="font-weight:bold;">to New York</span> <span style="background-color: lightblue;">next week</span>.</p>
                    <br>
                    <p><strong>Future Continuous:</strong> The Future Continuous is used to talk about actions that will be in progress at a certain time in the future. It is formed using 'will be' + the '-ing' form of the verb.</p>
                    <p><em>Example:</em> <span class="subject" style="font-weight:bold">She</span> <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">will be traveling</span> <span class="object" style="font-weight:bold;">to New York</span> <span style="background-color: lightblue;">at this time tomorrow</span>.</p>
                    <br>
                    <p><strong>Future Perfect:</strong> The Future Perfect is used to talk about actions that will be completed by a certain point in the future. It is formed using 'will have' + the past participle of the verb.</p>
                    <p><em>Example:</em> <span class="subject" style="font-weight:bold">She</span> <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">will have traveled</span> <span class="object" style="font-weight:bold;">to New York</span> <span style="background-color: lightblue;">by next week</span>.</p>
                </details>
            </div>
        </div>
    """, unsafe_allow_html=True)


   # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Future Simple</h3>
                <div class="sentence-container">
                    <p>
                        <span class="subject" style="font-weight:bold; text-decoration:underline">They</span> 
                        <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">will start</span> 
                        <span class="object" style="font-weight:bold;">the project</span> 
                        <span style="background-color: lightblue;">tomorrow</span>.
                    </p>
                </div>
                <h3>Future Continuous</h3>
                <div class="sentence-container">
                    <p>
                        <span class="subject" style="font-weight:bold; text-decoration:underline">They</span> 
                        <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">will be working</span> 
                        <span class="object" style="font-weight:bold;">on the project</span> 
                        <span style="background-color: lightblue;">at this time tomorrow</span>.
                    </p>
                </div>
                <h3>Future Perfect</h3>
                <div class="sentence-container">
                    <p>
                        <span class="subject" style="font-weight:bold; text-decoration:underline">They</span> 
                        <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">will have completed</span> 
                        <span class="object" style="font-weight:bold;">the project</span> 
                        <span style="background-color: lightblue;">by next week</span>.
                    </p>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)



    # Practice Section: Complete the Sentences
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Complete the Sentences</h2>
        <p>Drag and drop the correct verb phrases into the blanks to complete the sentences.</p>
    </div>
    """, unsafe_allow_html=True)


    # CSS for the Drag-and-Drop Component
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .draggable {
            padding: 5px 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            cursor: grab;
            margin: 5px;
            font-size: 16px;
            min-width: 140px;
            max-width: 200px;
        }
        .draggable:active {
            cursor: grabbing;
        }
        .dropzone {
            min-height: 40px;
            min-width: 140px;
            max-width: 200px;
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
            border-radius: 10px;
            padding: 5px;
            margin: 5px;
            font-size: 16px;
            text-align: center;
        }
        .sentence-container {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: flex-start; /* Align sentences to the left */
            font-size: 18px;
            flex-wrap: wrap;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
    """

    # JavaScript for Drag-and-Drop Logic with Improved Checking
    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <div draggable="true" class="draggable" id="opt1">will have shipped</div>
            <div draggable="true" class="draggable" id="opt2">will be discussing</div>
            <div draggable="true" class="draggable" id="opt3">will have finished </div>
            <div draggable="true" class="draggable" id="opt4">will be giving</div>
            <div draggable="true" class="draggable" id="opt5">will be sitting</div>
        </div>
        <div class="sentence-container">
            <span>1. At this time next Tuesday, the students </span>
            <div class="dropzone" id="drop5"></div>
            <span> in the test room to take the mid-term exam.</span>
        </div>
        <div class="sentence-container">
            <span>2. The marketing team </span>
            <div class="dropzone" id="drop2"></div>
            <span> the new product campaign at 2 pm tomorrow.</span>
        </div>
        <div class="sentence-container">
            <span>3. The mayor </span>
            <div class="dropzone" id="drop4"></div>
            <span> the speech for another half hour.</span>
        </div>
        <div class="sentence-container">
            <span>4. By the time I submit my thesis, I </span>
            <div class="dropzone" id="drop3"></div>
            <span> writing my research findings.</span>
        </div>
        <div class="sentence-container">
            <span>5. Two weeks before Christmas,we </span>
            <div class="dropzone" id="drop1"></div>
            <span> all products to our customers.</span>
        </div>
        <div class="button-container">
            <button id="checkButton" class="st-button">Check Answers</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        const correctAnswers = {
            drop5: "will be sitting",
            drop2: "will be discussing",
            drop4: "will be giving",
            drop3: "will have finished",
            drop1: "will have shipped"
        };

        const draggables = document.querySelectorAll('.draggable');
        const dropzones = document.querySelectorAll('.dropzone');
        const dragContainer = document.getElementById('dragContainer');

        let draggedItem = null;

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggedItem = draggable;
                setTimeout(() => draggable.classList.add('hidden'), 0);
            });

            draggable.addEventListener('dragend', () => {
                draggedItem = null;
                draggable.classList.remove('hidden');
            });
        });

        dropzones.forEach(dropzone => {
            dropzone.addEventListener('dragover', e => {
                e.preventDefault();
                dropzone.classList.add('dragging-over');
            });

            dropzone.addEventListener('dragleave', () => {
                dropzone.classList.remove('dragging-over');
            });

            dropzone.addEventListener('drop', e => {
                e.preventDefault();
                dropzone.classList.remove('dragging-over');
                if (draggedItem) {
                    if (dropzone.children.length > 0) {
                        dragContainer.appendChild(dropzone.children[0]);
                    }
                    dropzone.appendChild(draggedItem);
                }
            });
        });

        document.getElementById('checkButton').addEventListener('click', () => {
            let score = 0;

            dropzones.forEach(dropzone => {
                const userAnswer = dropzone.textContent.trim();
                const correctAnswer = correctAnswers[dropzone.id];
                if (userAnswer === correctAnswer) {
                    score++;
                    dropzone.style.borderColor = "green";
                } else {
                    dropzone.style.borderColor = "red";
                }
            });

            const result = document.getElementById('result');
            const total = Object.keys(correctAnswers).length;

            if (score === total) {
                result.textContent = "Great job! All sentences are correct.";
                result.style.color = "green";
                Streamlit.setComponentValue(true);
            } else {
                result.textContent = `You got ${score}/${total} correct. Please try again.`;
                result.style.color = "red";
            }
        });
    </script>
    """

    # Display the drag-and-drop component
    component_value = components.html(drag_and_drop_css + drag_and_drop_js, height=700, scrolling=True)

    col1, col2 = st.columns(2)
    with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T6_1, key='tt_l3_t6_1_practice')

    with col2:
            if st.button('Next', key='tt_l3_t6_1_next'):
                end_time = datetime.datetime.now()
                start_time = st.session_state.tt_l3_t6_1_start_time
                time_diff = end_time - start_time
                    # Convert timedelta to HH:MM:SS
                total_seconds = int(time_diff.total_seconds())
                hours, remainder = divmod(total_seconds, 3600)
                minutes, seconds = divmod(remainder, 60)
                time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
                try:
                    h, m, s = map(int, time_spent_str.split(':'))
                    time_obj = datetime.time(h, m, s)
                except ValueError as e:
                    st.error(f"Error parsing time: {e}")
                    time_obj = None  # fallback
                errors_info = {"error_count": 0}
                try:
                    student_id = st.session_state.user_info.id
                    task_id = "TT_L3_T6_1"
                    record_task_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=end_time,        # current datetime
                            time_spent=time_obj,
                            errors_dict=errors_info
                        )
                except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                st.session_state.tt_l3_t6_1_start_time = None
                    
                navigate_to_task3_6()
                st.rerun()


def TT_L3_T7_1():
    st.title("Making Deductions about the Past and Present with Modal Verbs")

    if "tt_l3_t7_1_start_time" not in st.session_state:
        st.session_state.tt_l3_t7_1_start_time = datetime.datetime.now()

    add_css()

    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
            <h2>📒 Rule</h2>
            <div>
                <details id="rule_details">
                    <summary style="font-weight: bold;">Expand to see the rule</summary>
                    <p><strong>Making Deductions about the Past:</strong> We use modal verbs like 'must have', 'might have', 'could have', 'can't have' followed by a past participle to express certainty or possibility about past events.</p>
                    <p><em>Example:</em></p>
                    <p><span class="subject" style="font-weight:bold; text-decoration:underline">She</span> <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">must have missed</span> the train.</p>
                    <br>
                    <p><strong>Making Deductions about the Present:</strong> We use modal verbs like 'must', 'might', 'could', 'can't' followed by the base form or be + -ing form to express certainty or possibility about present situations.</p>
                    <p><em>Example:</em></p>
                    <p><span class="subject" style="font-weight:bold; text-decoration:underline">He</span> <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">could be working</span> late tonight.</p>
                </details>
            </div>
        </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>Making Deductions about the Past</h3>
                <div class="sentence-container">
                    <p><span class="subject" style="font-weight:bold; text-decoration:underline">They</span> <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">might have forgotten</span> the meeting.</p>
                </div>
                <h3>Making Deductions about the Present</h3>
                <div class="sentence-container">
                    <p><span class="subject" style="font-weight:bold; text-decoration:underline">She</span> <span class="verb" style="font-weight:bold; text-decoration:underline; color: blue;">must be sleeping</span> now.</p>
                </div>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

   # Practice Section: Complete the Sentences
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Complete the Sentences</h2>
        <p>Drag and drop the correct phrases into the sentences to complete them.</p>
    </div>
    """, unsafe_allow_html=True)

    # CSS for drag-and-drop functionality
    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .draggable, .dropzone {
            padding: 5px 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            cursor: grab;
            margin: 5px;
            font-size: 14px;
            text-align: center;
            width: 180px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            word-wrap: break-word;
        }
        .draggable:active {
            cursor: grabbing;
        }
        .dropzone {
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
        }
        .sentence-container {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 16px;
            flex-wrap: wrap;
        }
        #result {
            margin-top: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
    """

    # JavaScript for drag-and-drop logic
    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <!-- Draggable options -->
            <div draggable="true" class="draggable" id="opt1">must have been</div>
            <div draggable="true" class="draggable" id="opt2">might have seen</div>
            <div draggable="true" class="draggable" id="opt3">could have won</div>
            <div draggable="true" class="draggable" id="opt4">must not have been</div>
            <div draggable="true" class="draggable" id="opt5">must be</div>
            <div draggable="true" class="draggable" id="opt6">can win</div>
            <div draggable="true" class="draggable" id="opt7">could see</div>
        </div>
        <div class="sentence-container">
            <span>1. The murderer </span>
            <div class="dropzone" id="drop1"></div>
            <span> the butler as he was the only one without an alibi.</span>
        </div>
        <div class="sentence-container">
            <span>2. She looks familiar. I </span>
            <div class="dropzone" id="drop2"></div>
            <span> her somewhere before.</span>
        </div>
        <div class="sentence-container">
            <span>3. If he had not been sick, he </span>
            <div class="dropzone" id="drop3"></div>
            <span> the race.</span>
        </div>
        <div class="sentence-container">
            <span>4. There </span>
            <div class="dropzone" id="drop4"></div>
            <span> something wrong with the system yesterday.</span>
        </div>
        <div class="sentence-container">
            <span>5. The exhibition </span>
            <div class="dropzone" id="drop5"></div>
            <span> very fascinating. I see a lot of good reviews.</span>
        </div>
        <div class="button-container">
            <button id="checkButton" class="st-button">Check Answers</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        const correctAnswers = {
            drop1: "must have been",
            drop2: "might have seen",
            drop3: "could have won",
            drop4: "must not have been",
            drop5: "must be"
        };

        const draggables = document.querySelectorAll('.draggable');
        const dropzones = document.querySelectorAll('.dropzone');
        let draggedItem = null;

        draggables.forEach(draggable => {
            draggable.addEventListener('dragstart', () => {
                draggedItem = draggable;
                setTimeout(() => draggable.classList.add('hidden'), 0);
            });

            draggable.addEventListener('dragend', () => {
                draggedItem = null;
                draggable.classList.remove('hidden');
            });
        });

        dropzones.forEach(dropzone => {
            dropzone.addEventListener('dragover', e => {
                e.preventDefault();
            });

            dropzone.addEventListener('drop', e => {
                e.preventDefault();
                if (draggedItem) {
                    if (dropzone.children.length > 0) {
                        const existingItem = dropzone.children[0];
                        document.getElementById('dragContainer').appendChild(existingItem);
                    }
                    dropzone.appendChild(draggedItem);
                }
            });
        });

        document.getElementById('checkButton').addEventListener('click', () => {
            let score = 0;
            const total = Object.keys(correctAnswers).length;

            dropzones.forEach(dropzone => {
                const userAnswer = dropzone.textContent.trim();
                const correctAnswer = correctAnswers[dropzone.id];
                if (userAnswer === correctAnswer) {
                    score++;
                    dropzone.style.borderColor = "green";
                } else {
                    dropzone.style.borderColor = "red";
                }
            });

            const result = document.getElementById('result');
            if (score === total) {
                result.textContent = "Great job! All sentences are correct.";
                result.style.color = "green";
                Streamlit.setComponentValue(true);
            } else {
                result.textContent = `You got ${score}/${total} correct. Please try again.`;
                result.style.color = "red";
            }
        });
    </script>
    """

        # Combine CSS and JavaScript for the Drag-and-Drop Component
    html_code = drag_and_drop_css + drag_and_drop_js

    # Display the drag-and-drop component
    components.html(html_code, height=800, scrolling=True)

    col1, col2 = st.columns(2)
    with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T7_1, key='tt_l3_t7_1_practice')

    with col2:
            if st.button('Next', key='tt_l3_t7_1_next'):
                end_time = datetime.datetime.now()
                start_time = st.session_state.tt_l3_t7_1_start_time
                time_diff = end_time - start_time
                    # Convert timedelta to HH:MM:SS
                total_seconds = int(time_diff.total_seconds())
                hours, remainder = divmod(total_seconds, 3600)
                minutes, seconds = divmod(remainder, 60)
                time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
                try:
                    h, m, s = map(int, time_spent_str.split(':'))
                    time_obj = datetime.time(h, m, s)
                except ValueError as e:
                    st.error(f"Error parsing time: {e}")
                    time_obj = None  # fallback
                errors_info = {"error_count": 0}
                try:
                    student_id = st.session_state.user_info.id
                    task_id = "TT_L3_T7_1"
                    record_task_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=end_time,        # current datetime
                            time_spent=time_obj,
                            errors_dict=errors_info
                        )
                except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                st.session_state.tt_l3_t7_1_start_time = None
                    
                navigate_to_task3_7() 
                st.rerun()


def TT_L3_T8_1():
    st.title("Inversion")

    if 'tt_l3_t8_1_all_correct' not in st.session_state:
        st.session_state.tt_l3_t8_1_all_correct = False
    
    if "tt_l3_t8_1_start_time" not in st.session_state:
        st.session_state.tt_l3_t8_1_start_time = datetime.datetime.now()
    
    if "tt_l3_t8_1_error_count" not in st.session_state:
        st.session_state.tt_l3_t8_1_error_count = 0


    add_css()

    # Rule Section
    st.markdown("""
        <div id="rule_section" class="rule-frame">
            <h2>📒 Rule</h2>
            <div>
                <details>
                    <summary style="font-weight: bold;">Expand to see the rule</summary>
                    <p><strong>Inversion in English:</strong> Inversion is used for emphasis, style, or to make sentences more formal. In these structures, the usual order of the subject and the verb is reversed.</p>
                    <h3>1. Inversion with 'Never'</h3>
                    <p><strong>Rule:</strong> 'Never' can be placed at the beginning of a sentence, followed by an inverted subject and verb to emphasize a statement.</p>
                    <p><em>Example:</em> <span style="background-color: pink;">Never</span> <span class="subject" style="font-weight:bold; color: blue;">have I</span> <span class="verb" style="font-weight:bold; color: blue;">seen</span> such chaos.</p>
                    <h3>2. Inversion with 'No sooner ... than'</h3>
                    <p><strong>Rule:</strong> 'No sooner' is used at the beginning of a sentence, followed by an inversion of the auxiliary verb and subject, and then 'than' to talk about something that happened immediately before something else.</p>
                    <p><em>Example:</em> <span style="background-color: pink;">No sooner</span> <span class="subject" style="font-weight:bold; color: blue;">had I</span> <span class="verb" style="font-weight:bold; color: blue;">finished</span> my work <span style="background-color: pink;">than</span> the bell rang.</p>
                    <h3>3. Inversion with 'Not only ... but also'</h3>
                    <p><strong>Rule:</strong> 'Not only' is used at the beginning of a sentence followed by the inversion of the auxiliary verb and subject, and is followed by 'but also' to add additional information.</p>
                    <p><em>Example:</em> <span style="background-color: pink;">Not only</span> <span class="subject" style="font-weight:bold; color: blue;">did he</span> <span class="verb" style="font-weight:bold; color: blue;">win</span> the race, <span style="background-color: pink;">but also</span> he set a new record.</p>
                </details>
            </div>
        </div>
    """, unsafe_allow_html=True)

    # Examples Section
    st.markdown("""
    <div id="example_section" class="example-frame">
        <h2>📝 Examples</h2>
        <div>
            <details>
                <summary style="font-weight: bold;">Expand to see examples</summary>
                <h3>1. Inversion with 'Never'</h3>
                <p>
                    <span style="background-color: pink;"> Never </span> 
                    <span class="subject" style="font-weight:bold; color: blue;"> have I </span> 
                    <span class="verb" style="font-weight:bold; color: blue;"> experienced </span> 
                    <span> such a situation. </span>
                </p>
                <h3>2. Inversion with 'No sooner ... than'</h3>
                <p>
                    <span style="background-color: pink;"> No sooner </span> 
                    <span class="subject" style="font-weight:bold; color: blue;"> had they </span> 
                    <span class="verb" style="font-weight:bold; color: blue;"> left </span> 
                    <span style="background-color: pink;"> than </span> 
                    <span> the storm started. </span>
                </p>
                <h3>3. Inversion with 'Not only ... but also'</h3>
                <p>
                    <span style="background-color: pink;"> Not only </span> 
                    <span class="subject" style="font-weight:bold; color: blue;"> did she </span> 
                    <span class="verb" style="font-weight:bold; color: blue;"> finish </span> 
                    <span> the project, </span> 
                    <span style="background-color: pink;"> but also </span> 
                    <span> she presented it perfectly. </span>
                </p>
            </details>
        </div>
    </div>
    """, unsafe_allow_html=True)

    # Practice Section: Drag-and-Drop Sentences
    st.markdown("""
    <div class="practice-frame">
        <h2>🎯 Practice: Form Inverted Sentences</h2>
        <p>Drag and drop the phrases into the correct order to form meaningful sentences with inversion.</p>
    </div>
    """, unsafe_allow_html=True)

    drag_and_drop_css = """
    <style>
        .container {
            padding: 20px;
            background-color: #e3f2fd;
            border-radius: 10px;
            margin-bottom: 20px;
            text-align: center;
        }
        .drag-container {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }
        .draggable {
            padding: 10px;
            background-color: #f0f0f0;
            border: 2px solid #ccc;
            border-radius: 10px;
            cursor: grab;
            margin: 5px;
            font-size: 16px;
            min-width: 150px;
            max-width: 300px;
            text-align: center;
        }
        .draggable:active {
            cursor: grabbing;
        }
        .dropzone {
            min-height: 80px;
            width: 90%;
            border: 2px dashed #64b5f6;
            background-color: #e3f2fd;
            border-radius: 10px;
            padding: 10px;
            margin: 10px auto;
            font-size: 16px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 5px;
            align-items: center;
        }
        .sentence-container {
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 20px;
        }
    </style>
    """

    drag_and_drop_js = """
    <div class="container">
        <div class="drag-container" id="dragContainer">
            <!-- Draggable phrases -->
            <div draggable="true" class="draggable" id="phrase1">Never have I seen</div>
            <div draggable="true" class="draggable" id="phrase2">such a thing</div>
            <div draggable="true" class="draggable" id="phrase3">in my life.</div>
            <div draggable="true" class="draggable" id="phrase4">No sooner had we arrived</div>
            <div draggable="true" class="draggable" id="phrase5">than it started raining</div>
            <div draggable="true" class="draggable" id="phrase6">heavily outside.</div>
            <div draggable="true" class="draggable" id="phrase7">Not only did she win</div>
            <div draggable="true" class="draggable" id="phrase8">but also set a new record</div>
            <div draggable="true" class="draggable" id="phrase9">for the marathon.</div>
        </div>
        <div class="sentence-container" id="sentenceContainer">
            <!-- Dropzones will be inserted here dynamically -->
        </div>
        <div class="button-container">
            <button id="checkButton" class="st-button">Check Answers</button>
            <p id="result"></p>
        </div>
    </div>

    <script>
        window.onload = function() {
            const sentences = [
                ["Never have I seen", "such a thing", "in my life."],
                ["No sooner had we arrived", "than it started raining", "heavily outside."],
                ["Not only did she win", "but also set a new record", "for the marathon."]
            ];

            function shuffle(array) {
                for (let i = array.length - 1; i > 0; i--) {
                    const j = Math.floor(Math.random() * (i + 1));
                    [array[i], array[j]] = [array[j], array[i]];
                }
            }

            const dragContainer = document.getElementById('dragContainer');
            const sentenceContainer = document.getElementById('sentenceContainer');

            if (!dragContainer || !sentenceContainer) {
                console.error("Error: Drag container or sentence container not found!");
                return;
            }

            const phrases = Array.from(dragContainer.children);
            shuffle(phrases);
            phrases.forEach(phrase => dragContainer.appendChild(phrase));

            sentences.forEach((_, index) => {
                const dropzone = document.createElement('div');
                dropzone.classList.add('dropzone');
                dropzone.setAttribute('id', 'dropzone' + index);
                sentenceContainer.appendChild(dropzone);
            });

            let draggedItem = null;

            document.addEventListener('dragstart', function(event) {
                if (event.target.classList.contains('draggable')) {
                    draggedItem = event.target;
                    setTimeout(() => {
                        event.target.style.display = 'none';
                    }, 0);
                }
            });

            document.addEventListener('dragend', function(event) {
                if (event.target.classList.contains('draggable')) {
                    setTimeout(() => {
                        event.target.style.display = 'block';
                        draggedItem = null;
                    }, 0);
                }
            });

            document.addEventListener('dragover', function(event) {
                event.preventDefault();
            });

            document.addEventListener('drop', function(event) {
                if (event.target.classList.contains('dropzone') || event.target.id === 'dragContainer') {
                    event.preventDefault();
                    if (draggedItem) {
                        if (event.target.classList.contains('dropzone')) {
                            event.target.appendChild(draggedItem);
                        } else {
                            dragContainer.appendChild(draggedItem);
                        }
                    }
                }
            });

            document.getElementById('checkButton').addEventListener('click', function() {
                const dropzones = document.querySelectorAll('.dropzone');
                let score = 0;

                const userSentences = Array.from(dropzones).map(dropzone => 
                    Array.from(dropzone.children).map(child => child.textContent.trim())
                );

                const unmatchedSentences = [...sentences];

                userSentences.forEach(userSentence => {
                    const matchIndex = unmatchedSentences.findIndex(correctSentence =>
                        userSentence.length === correctSentence.length &&
                        userSentence.every((phrase, idx) => phrase === correctSentence[idx])
                    );

                    if (matchIndex !== -1) {
                        score++;
                        unmatchedSentences.splice(matchIndex, 1);
                    }
                });

                const result = document.getElementById('result');
                if (score === sentences.length) {
                    result.textContent = 'Great job! All sentences are correct.';
                    result.style.color = 'green';
                    Streamlit.setComponentValue(true);
                } else {
                    result.textContent = `You got ${score}/${sentences.length} sentences correct. Please try again.`;
                    result.style.color = 'red';
                }
            });
        };
    </script>
    """

    # Inject into Streamlit
    components.html(drag_and_drop_css + drag_and_drop_js, height=800)


    col1, col2 = st.columns(2)
    with col1:
            st.button('Practice', on_click=navigate_to_practice_TT_L3_T8_1, key='tt_l3_t8_1_practice')

    with col2:
            if st.button('Next', key='tt_l3_t8_1_next'):
                end_time = datetime.datetime.now()
                start_time = st.session_state.tt_l3_t8_1_start_time
                time_diff = end_time - start_time
                    # Convert timedelta to HH:MM:SS
                total_seconds = int(time_diff.total_seconds())
                hours, remainder = divmod(total_seconds, 3600)
                minutes, seconds = divmod(remainder, 60)
                time_spent_str = f"{hours:02d}:{minutes:02d}:{seconds:02d}"
                try:
                    h, m, s = map(int, time_spent_str.split(':'))
                    time_obj = datetime.time(h, m, s)
                except ValueError as e:
                    st.error(f"Error parsing time: {e}")
                    time_obj = None  # fallback
                errors_info = {"error_count": 0}
                try:
                    student_id = st.session_state.user_info.id
                    task_id = "TT_L3_T8_1"
                    record_task_done(
                            student_id=student_id,
                            task_id=task_id,
                            date=end_time,        # current datetime
                            time_spent=time_obj,
                            errors_dict=errors_info
                        )
                except Exception as e:
                        st.error(f"Error recording task: {e}")
                        return

                st.session_state.tt_l3_t8_1_start_time = None
                    
                navigate_to_task3_8()
                st.rerun()



def load_lottieurl(url: str):
    r = requests.get(url)
    if r.status_code != 200:
        return None
    return r.json()

    
def success_page():
    # Do NOT call st.set_page_config here
    st.markdown("<h1 style='text-align: center; color: #4CAF50;'>🎉 Congratulations!</h1>", unsafe_allow_html=True)

    # Load Lottie Animation
    lottie_animation = load_lottieurl("https://assets10.lottiefiles.com/packages/lf20_jbrw3hcz.json")  # Example animation

    # Display Animation and Message in Columns
    col1, col2 = st.columns([1, 2])

    with col1:
        if lottie_animation:
            st_lottie(lottie_animation, height=300, key="success")

    with col2:
        st.markdown("""
        <div style='text-align: left; font-size: 18px;'>
            <p>You've successfully completed the program. Your dedication and hard work have paid off!</p>
            <p>Here's what you achieved:</p>
            <ul>
                <li>Mastered key grammar concepts.</li>
                <li>Enhanced your writing fluency.</li>
                <li>Improved overall language proficiency.</li>
            </ul>
            <p>Keep up the great work and continue striving for excellence!</p>
        </div>
        """, unsafe_allow_html=True)

    st.markdown("<hr>", unsafe_allow_html=True)

    # Call-to-Action Buttons
    col3, col4 = st.columns(2)

    with col3:
        if st.button("🏠 Return to Home"):
            st.session_state.page = 'user_dashboard'  # Adjust according to your navigation logic

    # Optional: Add a Footer
    st.markdown("""
    <div style='text-align: center; margin-top: 50px; color: #888;'>
        <p>Thank you for using our application. We wish you continued success in your learning journey!</p>
    </div>
    """, unsafe_allow_html=True)

def color_code_guide():
    st.title("Color Code Guide")

    add_css()

    st.markdown("""
    <style>
        .word-level, .phrase-level, .clause-level {
            border: 2px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 20px;
            background-color: #f9f9f9;
        }
        .word-level h3, .phrase-level h3, .clause-level h3 {
            background-color: #eef;
            padding: 10px;
            border-radius: 8px;
            color: #333;
            margin: -10px -10px 10px -10px;
        }
        .word-level p, .phrase-level p, .clause-level p {
            margin: 10px 0;
            padding: 5px;
            font-size: 16px;
        }
    </style>
    """ , unsafe_allow_html=True)


    st.markdown("""
    <div class="word-level">
        <h3>Word Level</h3>
        <p>- <span class="noun">Noun</span></p>
        <p>- <span class="verb-phrase">Verb</span></p>
        <p>- <span class="adjective">Adjective</span></p>
        <p>- <span class="adverb">Adverb</span></p>
        <p>- <span class="det">Determiner</span></p>
        <p>- <span class="conjunction">Conjunction</span></p>
    </div>

    <div class="phrase-level">
        <h3>Phrase Level</h3>
        <p>- <span class="noun-phrase">Noun Phrase</span></p>
        <p>- <span class="verb-phrase">Verb Phrase</span></p>
        <p>- <span class="prepositional-phrase">Prepositional Phrase</span></p>
    </div>

    <div class="clause-level">
        <h3>Clause Level</h3>
        <p>- <span class="subject">Subject</span></p>
        <p>- <span class="verb">Verb</span></p>
        <p>- <span class="object">Object</span></p>
        <p>- <span class="main-clause">Main Clause</span></p>
        <p>- <span class="subordinate-clause">Subordinate Clause</span></p>
    </div>
    """, unsafe_allow_html=True)



pages = {
    "login_registration": login_registration_page,
    "mode_page": mode_page,
    "personal_info": personal_info_page,
    "proficiency": proficiency_page,
    "self_assessment": self_assessment_page,
    "user_dashboard": user_dashboard_page,
    "Color code Guide": color_code_guide,
    "task_1": task_1_page,
    "practice_page": practice_page,
    "spelling_practice": spelling_practice_page,
    "TT_L1_T1_1": TT_L1_T1_1,
    "TT_L1_T1_2": TT_L1_T1_2,
    "TT_L1_T1_3": TT_L1_T1_3,
    "TT_L1_T1_3": TT_L1_T2_1,
    "TT_L1_T3_1": TT_L1_T3_1,
    "TT_L1_T4_1": TT_L1_T4_1,
    "TT_L1_T4_2": TT_L1_T4_2,
    "TT_L1_T5_1": TT_L1_T5_1,
    "TT_L1_T5_2": TT_L1_T5_2,
    "TT_L1_T6_1": TT_L1_T6_1,
    "TT_L1_T7_1": TT_L1_T7_1,
    "TT_L1_T8_1": TT_L1_T8_1,

    "TT_L2_T1_1": TT_L2_T1_1,
    "TT_L2_T1_2": TT_L2_T1_2,
    "TT_L2_T1_3": TT_L2_T1_3,
    "TT_L2_T2_1": TT_L2_T2_1,
    "TT_L2_T3_1": TT_L2_T3_1,
    "TT_L2_T3_2": TT_L2_T3_2,
    "TT_L2_T4_1": TT_L2_T4_1,
    "TT_L2_T5_1": TT_L2_T5_1,
    "TT_L2_T6_1": TT_L2_T6_1,
    "TT_L2_T7_1": TT_L2_T7_1,
    "TT_L2_T8_1": TT_L2_T8_1,
    "TT_L2_T8_2": TT_L2_T8_2,
    "TT_L3_T1_1": TT_L3_T1_1,
    "TT_L3_T1_2": TT_L3_T1_2,
    "TT_L3_T1_3": TT_L3_T1_3,
    "TT_L3_T2_1": TT_L3_T2_1,
    "TT_L3_T3_1": TT_L3_T3_1,
    "TT_L3_T4_1": TT_L3_T4_1,
    "TT_L3_T4_2": TT_L3_T4_2,
    "TT_L3_T5_1": TT_L3_T5_1,
    "TT_L3_T6_1": TT_L3_T6_1,
    "TT_L3_T7_1": TT_L3_T7_1,
    "TT_L3_T8_1": TT_L3_T8_1,
    "mode_1_page": mode_1_page,
}


def main():
    # Define all possible pages with display names and internal keys
    page_names = [
        "Login/Registration",
        "Mode",
        "Personal Information",
        "Proficiency Test",
        "Self-Assessment",
        "User Dashboard",
        "Task 1",
        "Practice",
        "Spelling Practice",
        "TT_L1_T1_1",
        "TT_L1_T1_2",
        "TT_L1_T1_3",
        "TT_L1_T2_1",
        "TT_L1_T3_1",
        "TT_L1_T4_1",
        "TT_L1_T4_2",
        "TT_L1_T5_1",
        "TT_L1_T5_2",
        "TT_L1_T6_1",
        "TT_L1_T7_1",
        "TT_L1_T8_1",
        "TT_L2_T1_1",
        "TT_L2_T1_2",
        "TT_L2_T1_3",
        "TT_L2_T2_1",
        "TT_L2_T3_1",
        "TT_L2_T3_2",
        "TT_L2_T4_1",
        "TT_L2_T5_1",
        "TT_L2_T6_1",
        "TT_L2_T7_1",
        "TT_L2_T8_1",
        "TT_L2_T8_2",
        "TT_L3_T1_1",
        "TT_L3_T1_2",
        "TT_L3_T1_3",
        "TT_L3_T2_1",
        "TT_L3_T3_1",
        "TT_L3_T4_1",
        "TT_L3_T4_2",
        "TT_L3_T5_1",
        "TT_L3_T6_1",
        "TT_L3_T7_1",
        "TT_L3_T8_1",
        "Color Code Guide",
        "Learn More",
        "mode_1_page",
        "L1_T10_TAS_1",
        "L2_T10_TAS_1",
        "L3_T10_TAS_1",
    ]

    page_mapping = {
        "Login/Registration": "login_registration",
        "Mode": "mode_page",
        "Personal Information": "personal_info",
        "Proficiency Test": "proficiency",
        "Self-Assessment": "self_assessment",
        "User Dashboard": "user_dashboard",
        "Task 1": "task_1",
        "Practice": "practice_page",
        "Spelling Practice": "spelling_practice",
        "TT_L1_T1_1": "TT_L1_T1_1",
        "TT_L1_T1_2": "TT_L1_T1_2",
        "TT_L1_T1_3": "TT_L1_T1_3",
        "TT_L1_T2_1": "TT_L1_T2_1",
        "TT_L1_T3_1": "TT_L1_T3_1",
        "TT_L1_T4_1": "TT_L1_T4_1",
        "TT_L1_T4_2": "TT_L1_T4_2",
        "TT_L1_T5_1": "TT_L1_T5_1",
        "TT_L1_T5_2": "TT_L1_T5_2",
        "TT_L1_T6_1": "TT_L1_T6_1",
        "TT_L1_T7_1": "TT_L1_T7_1",
        "TT_L1_T8_1": "TT_L1_T8_1",
        "TT_L2_T1_1": "TT_L2_T1_1",
        "TT_L2_T1_2": "TT_L2_T1_2",
        "TT_L2_T1_3": "TT_L2_T1_3",
        "TT_L2_T2_1": "TT_L2_T2_1",
        "TT_L2_T3_1": "TT_L2_T3_1",
        "TT_L2_T3_2": "TT_L2_T3_2",
        "TT_L2_T4_1": "TT_L2_T4_1",
        "TT_L2_T5_1": "TT_L2_T5_1",
        "TT_L2_T6_1": "TT_L2_T6_1",
        "TT_L2_T7_1": "TT_L2_T7_1",
        "TT_L2_T8_1": "TT_L2_T8_1",
        "TT_L2_T8_2": "TT_L2_T8_2",
        "TT_L3_T1_1": "TT_L3_T1_1",
        "TT_L3_T1_2": "TT_L3_T1_2",
        "TT_L3_T1_3": "TT_L3_T1_3",
        "TT_L3_T2_1": "TT_L3_T2_1",
        "TT_L3_T3_1": "TT_L3_T3_1",
        "TT_L3_T4_1": "TT_L3_T4_1",
        "TT_L3_T4_2": "TT_L3_T4_2",
        "TT_L3_T5_1": "TT_L3_T5_1",
        "TT_L3_T6_1": "TT_L3_T6_1",
        "TT_L3_T7_1": "TT_L3_T7_1",
        "TT_L3_T8_1": "TT_L3_T8_1",
        "L1_T10_TAS_1": "L1_T10_TAS_1",
        "L2_T10_TAS_1": "L2_T10_TAS_1",
        "L3_T10_TAS_1": "L3_T10_TAS_1",
        "Color Code Guide": "color_code_guide",
        "Learn More": "learn_more",
        "mode_1_page": "mode_1_page"
    }

    # Reverse mapping for easy lookup
    reverse_mapping = {v: k for k, v in page_mapping.items()}

    # Initialize session state for page if not present
    if 'page' not in st.session_state:
        st.session_state.page = "login_registration"  # Default page

    # Initialize other session state variables
    if 'tt_l1_t1_1_all_correct' not in st.session_state:
        st.session_state.tt_l1_t1_1_all_correct = False

    if 'tt_l1_t1_2_all_correct' not in st.session_state:
        st.session_state.tt_l1_t1_2_all_correct = False


    # Sidebar Navigation
    st.sidebar.image('data/logo.png', width=200)
    st.sidebar.title("Navigation")

    # Determine the current page's display name
    current_page_display = reverse_mapping.get(st.session_state.page, "Login/Registration")

    # Sidebar radio selection with the current page selected by default
    selected_page_display = st.sidebar.radio(
        "Go to", 
        page_names, 
        index=page_names.index(current_page_display) if current_page_display in page_names else 0
    )

    # If the selected page is different from the current page, update the session state
    if selected_page_display != current_page_display:
        st.session_state.page = page_mapping[selected_page_display]

    # Routing based on st.session_state.page
    if st.session_state.page == "login_registration":
        login_registration_page()
    elif st.session_state.page == "mode_page":
        mode_page()
    elif st.session_state.page == "personal_info":
        personal_info_page()
    elif st.session_state.page == "proficiency":
        proficiency_page()
    elif st.session_state.page == "self_assessment":
        self_assessment_page()
    elif st.session_state.page == "user_dashboard":
        user_dashboard_page()
    elif st.session_state.page == "task_1":
        task_1_page()
    elif st.session_state.page == "practice_page":
        practice_page()
    elif st.session_state.page == "spelling_practice":
        spelling_practice_page()
    elif st.session_state.page == "TT_L1_T1_1":
        TT_L1_T1_1()
    elif st.session_state.page == "TT_L1_T1_2":
        TT_L1_T1_2()
    elif st.session_state.page == "TT_L1_T1_3":
        TT_L1_T1_3()
    elif st.session_state.page == "TT_L1_T2_1":
        TT_L1_T2_1()
    elif st.session_state.page == "TT_L1_T3_1":
        TT_L1_T3_1()
    elif st.session_state.page == "TT_L1_T4_1":
        TT_L1_T4_1()
    elif st.session_state.page == "TT_L1_T4_2":
        TT_L1_T4_2()
    elif st.session_state.page == "TT_L1_T5_1":
        TT_L1_T5_1()
    elif st.session_state.page == "TT_L1_T5_2":
        TT_L1_T5_2()
    elif st.session_state.page == "TT_L1_T6_1":
        TT_L1_T6_1()
    elif st.session_state.page == "TT_L1_T7_1":
        TT_L1_T7_1()
    elif st.session_state.page == "TT_L1_T8_1":
        TT_L1_T8_1()
    elif st.session_state.page == "TT_L2_T1_1":
        TT_L2_T1_1()
    elif st.session_state.page == "TT_L2_T1_2":
        TT_L2_T1_2()
    elif st.session_state.page == "TT_L2_T1_3":
        TT_L2_T1_3()
    elif st.session_state.page == "TT_L2_T2_1":
        TT_L2_T2_1()
    elif st.session_state.page == "TT_L2_T3_1":
        TT_L2_T3_1()
    elif st.session_state.page == "TT_L2_T3_2":
        TT_L2_T3_2()
    elif st.session_state.page == "TT_L2_T4_1":
        TT_L2_T4_1()
    elif st.session_state.page == "TT_L2_T5_1":
        TT_L2_T5_1()
    elif st.session_state.page == "TT_L2_T6_1":
        TT_L2_T6_1()
    elif st.session_state.page == "TT_L2_T7_1":
        TT_L2_T7_1()
    elif st.session_state.page == "TT_L2_T8_1":
        TT_L2_T8_1()
    elif st.session_state.page == "TT_L2_T8_2":
        TT_L2_T8_2()
    elif st.session_state.page == "TT_L3_T1_1":
        TT_L3_T1_1()
    elif st.session_state.page == "TT_L3_T1_2":
        TT_L3_T1_2()
    elif st.session_state.page == "TT_L3_T1_3":
        TT_L3_T1_3()
    elif st.session_state.page == "TT_L3_T2_1":
        TT_L3_T2_1()
    elif st.session_state.page == "TT_L3_T3_1":
        TT_L3_T3_1()
    elif st.session_state.page == "TT_L3_T4_1":
        TT_L3_T4_1()
    elif st.session_state.page == "TT_L3_T4_2":
        TT_L3_T4_2()
    elif st.session_state.page == "TT_L3_T5_1":
        TT_L3_T5_1()
    elif st.session_state.page == "TT_L3_T6_1":
        TT_L3_T6_1()
    elif st.session_state.page == "TT_L3_T7_1":
        TT_L3_T7_1()
    elif st.session_state.page == "TT_L3_T8_1":
        TT_L3_T8_1()
    elif st.session_state.page == "color_code_guide":
        color_code_guide()
    elif st.session_state.page == "learn_more":
        learn_more_page()
    elif st.session_state.page == 'success_page':
        success_page()
    elif st.session_state.page == 'mode_1_page':
        mode_1_page()
    elif st.session_state.page == 'L1_T10_TAS_1':
            L1_T10_TAS_1()
    elif st.session_state.page == 'L2_T10_TAS_1':
            L2_T10_TAS_1()
    elif st.session_state.page == 'L3_T10_TAS_1':
            L3_T10_TAS_1()
            
        


    
    else:
        st.error("Page not found.")

    # After the last line in main()
    preprocess_error_types(session)
    update_errors_table_with_processed(session)


if __name__ == "__main__":
   main()