import gradio as gr
import random
import json

# Load vocabulary words from JSON
def load_words(file_path):
    with open(file_path, 'r', encoding="utf-8") as file:
        data = json.load(file)
    return data

# Function to shuffle and get flashcards for a specific day
def get_flashcards(day, word_list):
    if day not in range(1, 101):
        return f"Invalid day: {day}. Please select a day between 1 and 100.", []
    shuffled_words = random.sample(word_list[day - 1], len(word_list[day - 1]))
    return f"Day {day} loaded! Click 'Next Card' to start.", shuffled_words

# Function to show the next card
def show_next_card(index, word_list):
    if word_list is None or index >= len(word_list) - 1:
        return "<div style='font-size: 36px; color: green; text-align: center;'>You've reviewed all the words for this day!</div>", "", "", index, "Progress: Complete!"
    index += 1
    word_data = word_list[index]
    word_html = (
        f"<div style='font-size: 40px; font-weight: bold; color: #1E90FF; text-align: center;'>"
        f"{word_data['Word']} ({word_data['Part of Speech']})</div>"
    )
    return word_html, "", "", index, f"Progress: {index + 1}/{len(word_list)}"

# Function to show the previous card
def show_previous_card(index, word_list):
    if word_list is None or index <= 0:
        return "<div style='font-size: 36px; text-align: center;'>This is the first card!</div>", "", "", index, "Progress: Start"
    index -= 1
    word_data = word_list[index]
    word_html = (
        f"<div style='font-size: 40px; font-weight: bold; color: #1E90FF; text-align: center;'>"
        f"{word_data['Word']} ({word_data['Part of Speech']})</div>"
    )
    return word_html, "", "", index, f"Progress: {index + 1}/{len(word_list)}"

# Function to show the translation
def show_translation(index, word_list):
    if word_list is None or index >= len(word_list):
        return "<div style='font-size: 20px; text-align: center; color: #555;'>Translation not available.</div>"
    translation = word_list[index]['Translate']
    return f"<div style='font-size: 20px; text-align: center; color: #555;'>{translation}</div>"

# Function to show the example sentence
def show_example(index, word_list):
    if word_list is None or index >= len(word_list):
        return "<div style='font-size: 20px; text-align: center; color: #555;'>Example sentence not available.</div>"
    example_sentence = word_list[index].get("Example Sentence", "No example available.")
    return f"<div style='font-size: 20px; text-align: center; color: #555;'>{example_sentence}</div>"

# Load vocabulary data
file_path = "words_divided.json"  # JSON file with divided words
word_data = load_words(file_path)

# Gradio interface
def flashcard_game(day):
    day = int(day)
    message, shuffled_words = get_flashcards(day, word_data)
    current_index = 0
    return message, "", "", "", current_index, shuffled_words, "Progress: Start"

with gr.Blocks(css=".main-container { max-width: 900px; margin: auto; }") as app:
    gr.Markdown("""
        <div style="text-align: center;">
            <h1 style="color: #FF6347;">🌟 Keetawlingo 🌟</h1>
            <p style="font-size: 18px;">Master English with the Oxford 3000 EN-TH Vocabulary!</p>
        </div>
    """)

    with gr.Row():
        with gr.Column(scale=2):
            gr.Markdown("### Word Card")
            card_output = gr.HTML(label="Word Card")
            translation_output = gr.HTML(label="Translation")
            example_output = gr.HTML(label="Example Sentence")

    with gr.Row():
        with gr.Column(scale=1):
            gr.Markdown("### Select a day to start")
            day_dropdown = gr.Dropdown(
                label="Select Day", 
                choices=[str(i) for i in range(1, 101)], 
                value="1",
                interactive=True
            )
            day_output = gr.Textbox(label="Message", interactive=False)
            progress_output = gr.Textbox(label="Progress", interactive=False)

        with gr.Column(scale=2):
            gr.Markdown("### Controls")
            next_card_btn = gr.Button("➡️ Next Card")
            prev_card_btn = gr.Button("⬅️ Previous Card")
            show_translation_btn = gr.Button("📖 Show Translation")
            example_btn = gr.Button("📘 Show Example Sentence")

    # Hidden states
    current_index = gr.State(0)
    word_list = gr.State(None)

    # Actions
    day_dropdown.change(
        fn=flashcard_game,
        inputs=[day_dropdown],
        outputs=[day_output, card_output, translation_output, example_output, current_index, word_list, progress_output]
    )

    next_card_btn.click(
        fn=show_next_card,
        inputs=[current_index, word_list],
        outputs=[card_output, translation_output, example_output, current_index, progress_output]
    )

    prev_card_btn.click(
        fn=show_previous_card,
        inputs=[current_index, word_list],
        outputs=[card_output, translation_output, example_output, current_index, progress_output]
    )

    show_translation_btn.click(
        fn=show_translation,
        inputs=[current_index, word_list],
        outputs=[translation_output]
    )

    example_btn.click(
        fn=show_example,
        inputs=[current_index, word_list],
        outputs=[example_output]
    )

app.launch()