### 🚀 MAIN PROMPT ###
MAIN_PROMPT = """
### **Module 3: Proportional Reasoning Problem Types**  
#### **Task Introduction**  
"Welcome to this module on proportional reasoning problem types!  
Your task is to explore three different problem types foundational to proportional reasoning:  
1️⃣ **Missing Value Problems**  
2️⃣ **Numerical Comparison Problems**  
3️⃣ **Qualitative Reasoning Problems**  
You will solve and compare these problems, **identify their characteristics**, and finally **create your own problems** for each type.  
💡 **Throughout this module, I will guide you step by step.**  
💡 **You will be encouraged to explain your reasoning.**  
💡 **If you’re unsure, I will provide hints rather than giving direct answers.**  
🚀 **Let’s get started! Solve each problem and compare them by analyzing your solution process.**"  

---
### **🚀 Solve the Following Three Problems**  
📌 **Problem 1: Missing Value Problem**  
*"The scale on a map is **2 cm represents 25 miles**. If a given measurement on the map is **24 cm**, how many miles are represented?"*  

📌 **Problem 2: Numerical Comparison Problem**  
*"Ali and Ahmet purchased pencils. Ali bought **10 pencils for $3.50**, and Ahmet purchased **5 pencils for $1.80**. Who got the better deal?"*  

📌 **Problem 3: Qualitative Reasoning Problem**  
*"Kim is mixing paint. Yesterday, she combined **red and white paint** in a certain ratio. Today, she used **more red paint** but kept the **same amount of white paint**. How will today’s mixture compare to yesterday’s in color?"*  
"""

### 🚀 PROBLEM SOLUTIONS ###
PROBLEM_SOLUTIONS_PROMPT = """
### **🚀 Step-by-Step Solutions**
#### **Problem 1: Missing Value Problem**  
We set up the proportion:  
\[
\frac{2 \text{ cm}}{25 \text{ miles}} = \frac{24 \text{ cm}}{x \text{ miles}}
\]  
Cross-multiply:  
\[
2x = 24 \times 25
\]  
Solve for \( x \):  
\[
x = \frac{600}{2} = 300
\]  
**Conclusion:** *24 cm represents **300 miles**.*

---
#### **Problem 2: Numerical Comparison Problem**  
**Calculate unit prices:**  
\[
\text{Price per pencil (Ali)} = \frac{\$3.50}{10} = \$0.35
\]  
\[
\text{Price per pencil (Ahmet)} = \frac{\$1.80}{5} = \$0.36
\]  
**Comparison:**  
- Ali: **\$0.35** per pencil  
- Ahmet: **\$0.36** per pencil  

**Conclusion:** *Ali got the better deal because he paid **less per pencil**.*

---
#### **Problem 3: Qualitative Reasoning Problem**  
🔹 **Given Situation:**  
- Yesterday: **Ratio of red to white paint**  
- Today: **More red, same white**

🔹 **Reasoning:**  
- Since the amount of **white paint stays the same** but **more red paint is added**, the **red-to-white ratio increases**.
- This means today’s mixture is **darker (more red)** than yesterday’s.

🔹 **Conclusion:**  
- *The new paint mixture has a **stronger red color** than before.*
"""

---

### **🚀 Fully Updated `app.py` (Ensuring Proper OpenAI Handling & Math Formatting)**
```python
import os
import gradio as gr
from dotenv import load_dotenv
from openai import OpenAI
from prompts.initial_prompt import INITIAL_PROMPT
from prompts.main_prompt import MAIN_PROMPT, PROBLEM_SOLUTIONS_PROMPT  # Ensure both are imported

# Load the API key from the .env file if available
if os.path.exists(".env"):
    load_dotenv(".env")

OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")

client = OpenAI(api_key=OPENAI_API_KEY)


def gpt_call(history, user_message,
             model="gpt-4o",
             max_tokens=512,
             temperature=0.7,
             top_p=0.95):
    """
    Calls the OpenAI API to generate a response.
    - history: [(user_text, assistant_text), ...]
    - user_message: The latest user message
    """
    # 1) Start with the system message (MAIN_PROMPT) for context
    messages = [{"role": "system", "content": MAIN_PROMPT}]

    # 2) Append conversation history
    for user_text, assistant_text in history:
        if user_text:
            messages.append({"role": "user", "content": user_text})
        if assistant_text:
            messages.append({"role": "assistant", "content": assistant_text})

    # 3) Add the user's new message
    messages.append({"role": "user", "content": user_message})

    # 4) Call OpenAI API
    completion = client.chat.completions.create(
        model=model,
        messages=messages,
        max_tokens=max_tokens,
        temperature=temperature,
        top_p=top_p
    )

    return completion.choices[0].message.content


def respond(user_message, history):
    """
    Handles user input and gets GPT-generated response.
    - user_message: The message from the user
    - history: List of (user, assistant) conversation history
    """
    if not user_message:
        return "", history

    # If the user asks for a solution, inject PROBLEM_SOLUTIONS_PROMPT
    if "solution" in user_message.lower():
        assistant_reply = gpt_call(history, PROBLEM_SOLUTIONS_PROMPT)
    else:
        assistant_reply = gpt_call(history, user_message)

    # Add conversation turn to history
    history.append((user_message, assistant_reply))

    return "", history


##############################
#  Gradio Blocks UI
##############################
with gr.Blocks() as demo:
    gr.Markdown("## AI-Guided Math PD Chatbot")

    # Chatbot initialization with the first AI message
    chatbot = gr.Chatbot(
        value=[("", INITIAL_PROMPT)],  # Initial system prompt
        height=500
    )

    # Stores the chat history
    state_history = gr.State([("", INITIAL_PROMPT)])

    # User input field
    user_input = gr.Textbox(
        placeholder="Type your message here...",
        label="Your Input"
    )

    # Submit action
    user_input.submit(
        respond,
        inputs=[user_input, state_history],
        outputs=[user_input, chatbot]
    ).then(
        fn=lambda _, h: h,
        inputs=[user_input, chatbot],
        outputs=[state_history]
    )

# Run the Gradio app
if __name__ == "__main__":
    demo.launch(server_name="0.0.0.0", server_port=7860, share=True)