import gradio as gr
from openai import OpenAI
import docx2txt
import PyPDF2
import time
import os
API_KEY = os.environ.get("API_KEY")

default_system_prompt =  """

You are a friendly and supportive human-like assistant helping users explore their interests and potential career paths through a guided questionnaire.
Ask the user each question one at a time, and allow them to respond either by choosing from given options or typing their own input. After receiving a reasonable response, continue to the next question until the survey is complete.
At the end of the questionnaire, generate personalized career suggestions based on the user's responses. Your summary should:
1. Briefly reflect the user's key interests, strengths, preferences and user's basic information.
2. Brainstorm some unique ways of combinations of user's key interests, strengths, and preferences, and how these interdiscipline can be applied to their career trajectory. .
3. Recommend 3 potential careers that align well with their profile.
4. Suggest 5 university programs that match their interests and academic background and college characteristics preference.

For each university/program:
1. Include a brief description of the program, and college characteristics preference.
2. Explain why it's a strong fit for the user.
3. Sort the programs by acceptance rate (from low to high).
4. Ensure at least one suggested school is realistic for guaranteed admission.

Then ask follow up questions to encourage users to ask you more questions and more suggestions. Please encourage them to ask for a step-by-step road map for college application. Maybe also guide them to ask what other subjects that they should take in the future.
When presenting the final recommendations, make your language friendly, encouraging, and logically consistent. Add a few well-placed emojis to keep the tone warm and engaging 😊🎓💡.

🔧 SECTION 1: What Do You Enjoy Doing?
(1/20) What are you mostly drawn to?
A. Solving problems
B. Doing experiments
C. Analyzing data
D. Creating or designing things

(2/20) Do you like writing, drawing, designing, or performing?
A. Very much
B. Somewhat
C. Not really
D. Not at all

(3/20) Do you enjoy helping people learn, grow, or feel better?
A. Very much
B. Somewhat
C. Not really
D. Not at all

(4/20) Are you motivated by leading, persuading, or organizing people for a common goal?
A. Very much
B. Somewhat
C. Not really
D. Not at all

(5/20) Do you enjoy working with data, numbers, or detailed processes?
A. Very much
B. Somewhat
C. Not really
D. Not at all


💭 SECTION 2: What Kind of Work Feels Meaningful to You?
(6/20) Think about a time you felt proud of your work — what were you doing?
A. Finishing big projects
B. Organizing an event
C. Solving challenging problems
D. Helping classmates

(7/20) Do you prefer collaborating with others or working alone?
A. Collaborating
B. Working alone
C. Balanced preference
D. Depends on the task

(8/20) Do you like structure and clear expectations, or do you thrive in flexibility and creativity?
A. Strong structure
B. Some structure
C. Flexible, creative work
D. Depends on context

(9/20) What kind of praise or advice helps you do your best?
A. Helpful tips and strategies
B. Noticing my efforts
C. Positive encouragement
D. Quick and clear feedback

(10/20) What kind of impact do you hope to make through your work?
A. Empowering others through data
B. Helping others learn and grow
C. Solving problems that matter
D. Creating or building something new

🧬 SECTION 3: How Do You Make Decisions and Process Information?
(11/20) What helps you decide?
A. I think about the facts and what makes the most sense
B. I think about how people feel and what’s fair
C. I use both facts and empathy
D. I trust my instincts and experience

(12/20) How do you get energized?
A. Talking with others and sharing ideas out loud
B. Quiet reflection and solo thinking
C. I enjoy both depending on the situation
D. I prefer observing first, then contributing

(13/20) Do you prefer a detailed plan or flexibility?
A. I like having a clear, step-by-step plan
B. I prefer to stay open and adapt as I go
C. I like having a plan but can adapt if needed
D. I thrive on spontaneity and last-minute ideas

(14/20) How do you solve problems?
A. I rely on past experience
B. I imagine new solutions
C. I do both—learn from the past and explore new ideas
D. I ask others and collaborate to find the best answer

🔎 SECTION 4: Your Strengths in Action
(15/20) What compliments have you received?
A. “You’re helpful” / “Great friend”
B. “You explain things clearly” / “Good teacher”
C. “You’re creative” / “You have great ideas”
D. “You’re organized and reliable”

(16/20) What tasks come naturally to you?
A. Solving math problems
B. Writing or storytelling
C. Public speaking
D. Organizing or planning tasks

(17/20) What doesn’t feel like work to you?
A. Creating (art, design, building)
B. Solving puzzles or challenges
C. Helping others
D. Leading teams or projects

(18/20) In a group project, what role fits you best?
A. Leader
B. Planner
C. Researcher
D. Presenter

🧩 SECTION 5: Career Environment Preferences
(19/20) What environments do you prefer?
A. Fast-paced and competitive
B. Calm and predictable
C. Flexible and collaborative
D. Structured and professional

(20/20)Which motivates you more?
A. Competing and achieving goals
B. Supporting others and shared values
C. Learning and growing
D. Recognition and influence

"""

essay_system_prompt = """
You are a friendly and professional writing assistant. Your job is to guide the user step-by-step through writing a strong personal statement or optional essay.

Intro: 
Hi there! Welcome to UniCue’s Writing Assistant.
I’m Athena, your personal guide for crafting a standout university application essay. Let’s turn your ideas and experiences into a story that reflects you at your best.
To get started, which type of essay are you working on? Personal Statement Or Optional Essays ?

If Personal statements chosen: 
Great! Personal statements are your chance to show who you really are.
From the info you shared, I see you're into swimming—awesome! That’s a powerful passion we can build on.
Before we dive in, what tone do you want your essay to have?

Warm and heartfelt
Confident and ambitious
Thoughtful and reflective
Creative or playful

If Optional essays chosen: 
Awesome! Optional essays are a great way to highlight different sides of your story.
Which prompt are you focusing on?

Why major/ Why school 
Overcoming Challenges
Diversity or Community
Creative or Open-Ended Essay
"""

essay_system_prompt = """
You are a friendly and professional writing assistant. Your job is to guide the user step-by-step through writing a strong personal statement or optional essay.

Intro: 
Hi there! Welcome to UniCue’s Writing Assistant.
I’m Athena, your personal guide for crafting a standout university application essay. Let’s turn your ideas and experiences into a story that reflects you at your best.
To get started, which type of essay are you working on? Personal Statement Or Optional Essays ?

If Personal statements chosen: 
Great! Personal statements are your chance to show who you really are.
From the info you shared, I see you're into swimming—awesome! That’s a powerful passion we can build on.
Before we dive in, what tone do you want your essay to have?

Warm and heartfelt
Confident and ambitious
Thoughtful and reflective
Creative or playful

If Optional essays chosen: 
Awesome! Optional essays are a great way to highlight different sides of your story.
Which prompt are you focusing on?

Why major/ Why school 
Overcoming Challenges
Diversity or Community
Creative or Open-Ended Essay
"""

MODEL_NAME = "gpt-4o"
DEFAULT_MAX_TOKENS = 2000
DEFAULT_TEMPERATURE = 0.7
DEFAULT_TOP_P = 0.95

def convert_to_chatbot_format(history):
    result = []
    user_msg = None
    for msg in history:
        if msg["role"] == "user":
            user_msg = msg["content"]
        elif msg["role"] == "assistant":
            result.append([user_msg, msg["content"]])
            user_msg = None
    return result

def predict(message, history):
    client = OpenAI(api_key=API_KEY)
    messages = [{"role": "system", "content": default_system_prompt}]
    messages.extend(history if history else [])
    messages.append({"role": "user", "content": message})

    start_time = time.time()
    response = client.chat.completions.create(
        model=MODEL_NAME,
        messages=messages,
        max_tokens=DEFAULT_MAX_TOKENS,
        temperature=DEFAULT_TEMPERATURE,
        top_p=DEFAULT_TOP_P,
        stream=True
    )

    full_message = ""
    first_chunk_time = None
    last_yield_time = None

    for chunk in response:
        if chunk.choices and chunk.choices[0].delta.content:
            if first_chunk_time is None:
                first_chunk_time = time.time() - start_time
            full_message += chunk.choices[0].delta.content
            current_time = time.time()
            if last_yield_time is None or (current_time - last_yield_time >= 0.25):
                chatbot_display = convert_to_chatbot_format(history + [
                    {"role": "user", "content": message},
                    {"role": "assistant", "content": full_message}
                ])
                yield chatbot_display, history
                last_yield_time = current_time

    if full_message:
        history.append({"role": "user", "content": message})
        history.append({"role": "assistant", "content": full_message})
        yield convert_to_chatbot_format(history), history

def predict_mini(message, history):
    client = OpenAI(api_key=API_KEY)
    messages = [{"role": "system", "content": essay_system_prompt}]
    messages.extend(history if history else [])
    messages.append({"role": "user", "content": message})

    start_time = time.time()
    response = client.chat.completions.create(
        model=MODEL_NAME,
        messages=messages,
        max_tokens=DEFAULT_MAX_TOKENS,
        temperature=DEFAULT_TEMPERATURE,
        top_p=DEFAULT_TOP_P,
        stream=True
    )

    full_message = ""
    first_chunk_time = None
    last_yield_time = None

    for chunk in response:
        if chunk.choices and chunk.choices[0].delta.content:
            if first_chunk_time is None:
                first_chunk_time = time.time() - start_time
            full_message += chunk.choices[0].delta.content
            current_time = time.time()
            if last_yield_time is None or (current_time - last_yield_time >= 0.25):
                chatbot_display = convert_to_chatbot_format(history + [
                    {"role": "user", "content": message},
                    {"role": "assistant", "content": full_message}
                ])
                yield chatbot_display, history
                last_yield_time = current_time

    if full_message:
        history.append({"role": "user", "content": message})
        history.append({"role": "assistant", "content": full_message})
        yield convert_to_chatbot_format(history), history

def start_essay_intro():
    intro_message = """Hi there! Welcome to UniCue’s Writing Assistant.
I’m Athena, your personal guide for crafting a standout university application essay. Let’s turn your ideas and experiences into a story that reflects you at your best.
To get started, which type of essay are you working on? Personal statement or optional essay?"""
    history = [{"role": "assistant", "content": intro_message}]
    return [[ "", intro_message ]], history


def send_draft_to_chatbot(draft_text, history):
    prompt = f"Please review and provide feedback for the following personal statement:\n\n{draft_text}"
    yield from predict(prompt, history)

# 固定消息按钮逻辑
def send_fixed_message(fixed_message):
    def inner(*args):
        history = args[0]  # only use the first input, which is your `state`
        yield from predict(fixed_message, history)

    return inner

def stop_chat():
    return [], [], "", ""

def start_chat_fn(g, s, p, gen, sat, interests_list, dream_school):

    if interests_list:
        interest_str = f"You mentioned you're interested in subjects like {', '.join(interests_list)}."
    else:
        interest_str = "You haven't selected any favorite subjects yet."

    if sat:
        sat_str = f" You've also entered an SAT score of {sat}."
    else:
        sat_str = ""
    gender_str = f" and identify as {gen}" if gen != "Prefer not to say" else ""
    dream_str = f" Your dream school is {dream_school}." if dream_school else ""
    welcome = (
        f"Welcome! I am the AI counselor Athena from UniCue! I know you're in grade {g}, from {s} in {p}{gender_str}. "
        f"""{interest_str}{sat_str}{dream_str} I will help you to find the perfect career path and interest for you! 
            Let's begin with Section 1: What Do You Enjoy Doing? \n \n (1/20)What are you mostly drawn to?
                    A. Solving problems
                    B. Doing experiments
                    C. Analyzing data
                    D. Creating or designing things
                Please choose one of the options above.
            """
    )
    return (
        gr.update(visible=False),
        gr.update(visible=True),
        gr.update(visible=False),
        [["", welcome]],
        [{"role": "assistant", "content": welcome}]  # Initialize history with the welcome message,

    )

def brainstorm_idea_message(history):
    user_prompt = "Can you help me brainstorm ideas for my personal statement?"
    history.append({"role": "user", "content": user_prompt})
    yield from predict(user_prompt, history)

def fix_structure_message(history):
    user_prompt = "Can you help me improve the structure of my personal statement?"
    history.append({"role": "user", "content": user_prompt})
    yield from predict(user_prompt, history)

def polish_writing_message(history):
    user_prompt = "Can you help polish and refine my draft?"
    history.append({"role": "user", "content": user_prompt})
    yield from predict(user_prompt, history)

def extract_text_from_file(file):
    if file is None:
        return gr.update()

    filepath = file.name
    text = ""

    if filepath.endswith(".pdf"):
        with open(filepath, "rb") as f:
            reader = PyPDF2.PdfReader(f)
            for page in reader.pages:
                page_text = page.extract_text()
                if page_text:
                    text += page_text
    elif filepath.endswith(".docx"):
        text = docx2txt.process(filepath)

    return gr.update(value=text)

def should_disable_add_button(school, program, rate):
    if not school.strip() or not program.strip() or not rate.strip():
        return gr.update(interactive=False)
    return gr.update(interactive=True)

with gr.Blocks(css="""
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@700&display=swap');

body, .gradio-container {
    background-color: #fff8dc !important;
}

#title {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
    font-size: 80px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
}

#title .gradient-text {
    background: linear-gradient(90deg, #ff6ec4, #7873f5, #4ac29a);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

button.small-colored {
    font-size: 14px !important;
    padding: 8px 12px !important;
    border-radius: 8px;
    font-weight: bold;
    background-color: #a8e6cf;
    color: #000000;
    border: none;
    margin-bottom: 10px;
    width: 100%;
}

footer { display: none !important; }

#spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    font-family: 'Fredoka', sans-serif;
    font-size: 20px;
    font-weight: bold;
    gap: 20px;
}

.spinner-circle {
  border: 6px solid #f3f3f3;
  border-top: 6px solid #ff6ec4;
  border-right: 6px solid #7873f5;
  border-bottom: 6px solid #4ac29a;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

.typing-loader {
  display: inline-block;
}

.typing-loader .loader-text {
  color: #b19cd9;
  font-size: 24px;
}

.typing-loader .dot {
  animation: blink 1.4s infinite both;
  font-size: 32px;
  font-weight: bold;
  color: #4ac29a;
}

.typing-loader .dot:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-loader .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes blink {
  0% { opacity: 0.2; }
  20% { opacity: 1; }
  100% { opacity: 0.2; }
}

label {
    font-size: 18px !important;
}
input, select, textarea {
    font-size: 16px !important;
}
input[type="radio"] + span, select option {
    font-size: 14px !important;
}

div[data-testid="chatbot"] > div:first-child {
    font-size: 18px !important;
    font-weight: 600;
    color: #6a5acd;
}

div[data-testid="chatbot"] svg {
    display: none !important;
}

#subject_checkboxes input[type="checkbox"] + span {
    font-size: 14px !important;
}

#sidebar {
    background-color: #fff8f5;
    border-right: 2px solid #ffa500;
    padding-top: 20px;
    align-items: center;
    gap: 10px;
    height: 100%;
}

#interest-tab,
#program-tab,
#statement-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    justify-content: center;
    gap: 4px;  /* 图标与文字间距 */
    line-height: 1.2;
}

#interest-tab.selected,
#program-tab.selected,
#statement-tab.selected {
    color: #ff6600 !important;
    background-color: #fff2ec !important;
    border-left: 4px solid #ff6600 !important;
}

#school-card {
    background-color: #fdfdfd;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
    margin: 8px 0;
}

.card-grid {
    display: flex;
    flex-wrap: wrap;             
    gap: 16px;                   
    margin-top: 20px;
    justify-content: flex-start;
}

.school-card {
    flex: 1 1 calc(50% - 16px);
    max-width: calc(50% - 16px); 
    box-sizing: border-box;      
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 16px;
    font-family: 'Fredoka', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

.school-card strong {
    font-size: 18px;
    font-weight: 700;
    color: #333333;
}

.school-card span {
    font-size: 16px;
    color: #444;
}

button.start-colored {
    font-size: 16px !important;
    padding: 12px 20px !important;
    border-radius: 10px;
    font-weight: bold;
    background: linear-gradient(90deg, #ff6ec4, #7873f5, #4ac29a);
    color: white;
    border: none;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

button.start-colored:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.send-btn {
    font-size: 18px !important;
    padding: 0 !important;
    width: 36px !important;
    height: 30px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    background-color: #ffd6e7 !important;
    color: #333;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#upload-area {
    height: 100px;  /* 你可以改成 80px、120px 等 */
    border: 2px dashed #aaa;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background-color: #fafafa;
}
#upload-area:hover {
    background-color: #f0f8ff;
    border-color: #ff6600;
    cursor: pointer;
}
#upload-area span {
    display: none !important;
}

.bg-green {
    background-color: #99e699;
}
.bg-yellow {
    background-color: #ffd54d;
}
.bg-red {
    background-color: #ffb3b3;
}

.card-label {
    font-size: 16px;
    font-weight: bold;
    color: #333333;
}

.card-colon {
    font-size: 16px;
    font-weight: normal;
    margin-left: 2px;
    margin-right: 4px;
    color: #333333;
}

.card-value {
    font-size: 16px;
    color: #444444;
    font-family: "Roboto", "Inter", "Arial", sans-serif;
}
""") as demo:

    selected_tab = gr.State(value="interest")

    with gr.Row():
        gr.Image(
            value="logo.png",
            show_label=False,
            show_download_button=False,
            height=150,
            width=150,
            container=False
        )

    with gr.Column(visible=True) as intro_page:
        grade = gr.Dropdown(choices=["9th and below", "10th", "11th", "12th"], label="Grade")
        school = gr.Textbox(label="High School")
        province = gr.Textbox(label="State")
        gender = gr.Radio(choices=["Female", "Male", "Other", "Prefer not to say"], label="Gender")
        sat_score = gr.Textbox(label="SAT Score (optional)", placeholder="e.g. 1450")
        interests = gr.CheckboxGroup(
            label="Subjects you’re interested in (optional)",
            choices=[
                "Math",
                "Physics",
                "Chemistry",
                "Biology",
                "Geography",
                "History",
                "Literature",
                "Economics",
                "Politics",
                "Art",
                "Music",
                "Drama",
                "Engineering",
                "Psychology",
                "Philosophy",
                "Other"
            ],

        elem_id="subject_checkboxes"
        )
        dream_school = gr.Textbox(label="Dream School (optional)", placeholder="e.g. Stanford University")
        start_button = gr.Button("🚀 Start Chat", elem_classes="start-colored")

    with gr.Column(visible=False) as loading_page:
        gr.HTML("""
        <div id="spinner">
            <div class="spinner-circle"></div>
            <div class="typing-loader">
                <span class="loader-text">Preparing your personalized assistant</span>
                <span class="dot">.</span><span class="dot">.</span><span class="dot">.</span>
            </div>
        </div>
        """)

    with gr.Row(visible=False) as main_chat:
        with gr.Column(scale=0, min_width=80, elem_id="sidebar"):
            interest_tab = gr.Button("🎯 Interest", elem_id="interest-tab", elem_classes=["selected"])
            program_tab = gr.Button("🎓 Program", elem_id="program-tab")
            statement_tab = gr.Button("📝      Essay", elem_id="statement-tab")

        with gr.Column(scale=4, elem_id="main-content") as main_area:

            with gr.Column(visible=True) as interest_page:
                with gr.Row():
                    with gr.Column(scale=4):
                        chatbot = gr.Chatbot(label="👩‍🎓 AI counselor: Athena")
                        with gr.Column():
                            with gr.Row():
                                send_btn1 = gr.Button("📨 A", elem_classes=["send-btn"])
                                send_btn2 = gr.Button("📨 B", elem_classes=["send-btn"])
                                send_btn3 = gr.Button("📨 C", elem_classes=["send-btn"])
                                send_btn4 = gr.Button("📨 D", elem_classes=["send-btn"])

                            msg = gr.Textbox(
                                placeholder="Please input your answer as text if you think the options are not enough.",
                                label=" Text Input ",
                                lines=1,
                                scale=16
                            )
                            with gr.Row():
                                send_btn5 = gr.Button(" Get your Interest Cue! ", elem_classes=["send-btn"], scale=16)

                        state = gr.State([])
                        msg.submit(fn=predict, inputs=[msg, state], outputs=[chatbot, state]).then(
                            lambda: gr.update(value=""), inputs=[], outputs=[msg]
                        )
                        send_btn1.click(fn=send_fixed_message("I’d like to choose A."), inputs=[state],
                                        outputs=[chatbot, state])
                        send_btn2.click(fn=send_fixed_message("I’ll go with B."), inputs=[state],
                                        outputs=[chatbot, state])
                        send_btn3.click(fn=send_fixed_message("I choose C."), inputs=[state],
                                        outputs=[chatbot, state])
                        send_btn4.click(fn=send_fixed_message("My choice is D."), inputs=[state],
                                        outputs=[chatbot, state])
                        send_btn5.click(fn=send_fixed_message(
                            "I finished the survey. Can you recommend some related University and programs?"),
                            inputs=[state], outputs=[chatbot, state])

            with gr.Column(visible=False) as program_page:
                gr.Markdown("## 🎓 Program Wishlist")

                with gr.Column():
                    with gr.Row():
                        school_name = gr.Textbox(label="University Name", placeholder="e.g. University of Pennsylvania")
                        program_name = gr.Textbox(label="Program Name", placeholder="e.g. Computer and Information Science")
                        acceptance_rate = gr.Textbox(label="Acceptance rate", placeholder="e.g. 65%")
                    add_button = gr.Button("✚️  Add Program Card", elem_classes="start-colored", interactive=False)

                card_display = gr.HTML("")
                school_cards = gr.State([])
                delete_trigger = gr.Textbox(visible=False, label=None, elem_id="delete_trigger")

                def delete_school_card(delete_index, cards):
                    cards = cards or []
                    delete_index = int(delete_index)
                    if 0 <= delete_index < len(cards):
                        cards.pop(delete_index)

                    html = "<div class='card-grid'>"
                    for i, (s, p) in enumerate(cards):
                        html += f"""
                        <div class='school-card' id='card-{i}'>
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <strong>🏫 {s}</strong>
                                <button class='delete-btn' data-index='{i}' style='background: none; border: none; font-size: 18px; cursor: pointer;'>❌</button>
                            </div>
                            <span>📘 {p}</span>
                        </div>
                        """
                    html += "</div>"
                    return html, cards

                delete_trigger.change(
                    fn=delete_school_card,
                    inputs=[delete_trigger, school_cards],
                    outputs=[card_display, school_cards]
                )


                def add_school_card(school, program, rate, cards):
                    cards = cards or []
                    existing_entries = [(s.strip().lower(), p.strip().lower(), r.strip()) for s, p, r in cards]

                    if (school.strip().lower(), program.strip().lower()) in [(s, p) for s, p, _ in existing_entries]:
                        return gr.update(), cards

                    cards.append((school, program, rate))

                    html = "<div class='card-grid'>"
                    for i, (s, p, r) in enumerate(cards):
                        try:
                            rate_num = float(r.strip('%'))
                        except:
                            rate_num = 50

                        if rate_num > 80:
                            bg_class = "bg-green"
                        elif rate_num >= 40:
                            bg_class = "bg-yellow"
                        else:
                            bg_class = "bg-red"

                        html += f"""
                    <div class='school-card {bg_class}' id='card-{i}'>
                        <div>
                            <span class="card-label">🏫 <strong>University</strong></span><span class="card-colon">:</span>
                            <span class="card-value">{s}</span>
                        </div>

                        <div>
                            <span class="card-label">📘 <strong>Program</strong></span><span class="card-colon">:</span>
                            <span class="card-value">{p}</span>
                        </div>
                        <div>
                            <span class="card-label">📊 <strong>Acceptance rate</strong></span><span class="card-colon">:</span>
                            <span class="card-value">{r}</span>
                        </div>

                    </div>
                    """
                    html += "</div>"
                    return html, cards

                add_button.click(
                    fn=add_school_card,
                    inputs=[school_name, program_name, acceptance_rate, school_cards],
                    outputs=[card_display, school_cards]
                )

                school_name.change(fn=should_disable_add_button, inputs=[school_name, program_name, acceptance_rate],
                                   outputs=add_button)
                program_name.change(fn=should_disable_add_button, inputs=[school_name, program_name, acceptance_rate],
                                    outputs=add_button)
                acceptance_rate.change(fn=should_disable_add_button,
                                       inputs=[school_name, program_name, acceptance_rate], outputs=add_button)

            with gr.Column(visible=False) as statement_page:
                gr.Markdown("## 📝 Personal Statement Workspace")

                with gr.Row(equal_height=True):
                    with gr.Column():
                        upload_file = gr.File(
                            label="📎",
                            file_types=[".pdf", ".docx"],
                            elem_id="upload-area"
                        )

                        # Left Panel: Area for User to Edit Personal Statement Draft
                        user_draft = gr.Textbox(
                            label="📄 Your Personal Statement Draft",
                            lines=14,
                            placeholder="Paste or write your draft here...",
                            show_copy_button=True
                        )
                        send_draft_btn = gr.Button("✉️ Send Draft to Assistant", elem_classes="small-colored")

                    upload_file.change(
                        fn=extract_text_from_file,
                        inputs=upload_file,
                        outputs=user_draft
                    )

                    # Right Panel: Mini Chatbot Assistant
                    with gr.Column():
                        mini_chatbot = gr.Chatbot(label="💡 Writing Assistant")
                        mini_input = gr.Textbox(
                            placeholder="Ask for suggestions or improvements...",
                            label="Message",
                            lines=1
                        )
                        mini_state = gr.State([])

                        send_draft_btn.click(
                            fn=send_draft_to_chatbot,
                            inputs=[user_draft, mini_state],
                            outputs=[mini_chatbot, mini_state]
                        )

                        mini_input.submit(fn=predict_mini, inputs=[mini_input, mini_state],
                                          outputs=[mini_chatbot, mini_state]).then(
                            lambda: gr.update(value=""), inputs=[], outputs=[mini_input]
                        )

                        with gr.Row():
                            brainstorm_btn = gr.Button("🧠 Brainstorm Ideas", elem_classes="small-colored")
                            structure_btn = gr.Button("📚 Fix Structure", elem_classes="small-colored")
                            polish_btn = gr.Button("✨ Polish Writing", elem_classes="small-colored")

                        brainstorm_btn.click(
                            fn=brainstorm_idea_message,
                            inputs=[mini_state],
                            outputs=[mini_chatbot, mini_state]
                        )

                        structure_btn.click(
                            fn=fix_structure_message,
                            inputs=[mini_state],
                            outputs=[mini_chatbot, mini_state]
                        )

                        polish_btn.click(
                            fn=polish_writing_message,
                            inputs=[mini_state],
                            outputs=[mini_chatbot, mini_state]
                        )


    def switch_to_interest():
        return (
            gr.update(visible=True),  # interest_page
            gr.update(visible=False),  # program_page
            gr.update(visible=False),  # statement_page
            gr.update(elem_classes=["selected"]),  # highlight Interest
            gr.update(elem_classes=[]),  # unhighlight Program
            gr.update(elem_classes=[]),  # unhighlight Statement
            "interest"
        )


    def switch_to_program():
        return (
            gr.update(visible=False),  # interest_page
            gr.update(visible=True),  # program_page
            gr.update(visible=False),  # statement_page
            gr.update(elem_classes=[]),  # unhighlight Interest
            gr.update(elem_classes=["selected"]),  # highlight Program
            gr.update(elem_classes=[]),  # unhighlight Statement
            "program"
        )


    def switch_to_statement():
        chatbot_display, history = start_essay_intro()
        return (
            gr.update(visible=False),  # interest_page
            gr.update(visible=False),  # program_page
            gr.update(visible=True),  # statement_page
            gr.update(elem_classes=[]),  # unhighlight Interest
            gr.update(elem_classes=[]),  # unhighlight Program
            gr.update(elem_classes=["selected"]),  # highlight Statement
            "statement",
            chatbot_display,
            history
        )

    interest_tab.click(
        fn=switch_to_interest,
        inputs=[],
        outputs=[
            interest_page,
            program_page,
            statement_page,
            interest_tab,
            program_tab,
            statement_tab,
            selected_tab
        ]
    )

    program_tab.click(
        fn=switch_to_program,
        inputs=[],
        outputs=[
            interest_page,
            program_page,
            statement_page,
            interest_tab,
            program_tab,
            statement_tab,
            selected_tab
        ]
    )

    statement_tab.click(
        fn=switch_to_statement,
        inputs=[],
        outputs=[
            interest_page,
            program_page,
            statement_page,
            interest_tab,
            program_tab,
            statement_tab,
            selected_tab,
            mini_chatbot,
            mini_state
        ]
    )

    def loading_to_main():
        time.sleep(1)
        return gr.update(visible=False), gr.update(visible=True)


    start_button.click(
        fn=start_chat_fn,
        inputs=[grade, school, province, gender, sat_score, interests, dream_school],  # ✅ 加上 dream_school
        outputs=[intro_page, loading_page, main_chat, chatbot, state]
    ).then(
        fn=loading_to_main,
        inputs=[],
        outputs=[loading_page, main_chat]
    )

demo.launch()

gr.HTML("""
<script>
document.addEventListener('click', function(event) {
    if (event.target && event.target.matches('.delete-btn')) {
        const index = event.target.getAttribute('data-index');
        const wrapper = document.querySelector('[id^="delete_trigger"]');
        const textarea = wrapper ? wrapper.querySelector('textarea') : null;
        if (textarea) {
            textarea.value = index;
            textarea.dispatchEvent(new Event('input', { bubbles: true }));
        }
    }
});
</script>
""")