import gradio as gr
import random

# 단어 리스트
words = {
    "있었다": "was",
    "말했다": "said",
    "지켜봤다": "watched",
    "영감을 받았다": "inspired",
    "탐험하다": "exploring",
    "우연히 발견했다": "stumbled",
    "결정했다": "decided",
    "준비했다": "prepared",
    "안내했다": "guided",
    "도착했다": "reached",
    "발견했다": "discovered",
    "움직였다": "moved",
    "열었다": "opened",
    "찾았다": "found",
    "되었다": "became"
}

korean_words = list(words.keys())
english_words = list(words.values())
random.shuffle(korean_words)
random.shuffle(english_words)

state = {
    "selected_korean": None,
    "selected_english": None,
    "matched_pairs": []
}

def select_word(word, lang):
    if lang == "korean":
        state["selected_korean"] = word
    else:
        state["selected_english"] = word

    result = "Select the matching word."
    matched = False

    if state["selected_korean"] and state["selected_english"]:
        if words[state["selected_korean"]] == state["selected_english"]:
            state["matched_pairs"].append((state["selected_korean"], state["selected_english"]))
            result = f"Matched! {state['matched_pairs']}"
            matched = True
        else:
            result = "Not Matched! Try again."
        state["selected_korean"] = None
        state["selected_english"] = None

    return result, state["matched_pairs"], matched

def update_buttons(matched_pairs):
    korean_buttons = []
    english_buttons = []

    for k in korean_words:
        btn = gr.Button(k, elem_id=f"k_{k}")
        if any(pair[0] == k for pair in matched_pairs):
            btn.style = {"background-color": "lightgreen"}
        korean_buttons.append(btn)

    for e in english_words:
        btn = gr.Button(e, elem_id=f"e_{e}")
        if any(pair[1] == e for pair in matched_pairs):
            btn.style = {"background-color": "lightgreen"}
        english_buttons.append(btn)

    return korean_buttons, english_buttons

css = """
.button-green {
    background-color: lightgreen !important;
}
.button-red {
    background-color: lightcoral !important;
}
"""

with gr.Blocks(css=css) as demo:
    gr.Markdown("### 한글 단어와 영어 단어를 매칭하세요")

    with gr.Row() as row:
        korean_buttons, english_buttons = update_buttons(state["matched_pairs"])
        korean_col = gr.Column(korean_buttons)
        english_col = gr.Column(english_buttons)

    output = gr.Textbox(label="결과", elem_id="result")

    def on_click(word, lang):
        result, matched_pairs, matched = select_word(word, lang)
        updated_korean_buttons, updated_english_buttons = update_buttons(matched_pairs)
        if matched:
            for btn in updated_korean_buttons:
                if btn.value == word:
                    btn.style = {"background-color": "lightgreen"}
            for btn in updated_english_buttons:
                if btn.value == word:
                    btn.style = {"background-color": "lightgreen"}
        else:
            if lang == "korean":
                for btn in updated_korean_buttons:
                    if btn.value == word:
                        btn.style = {"background-color": "lightcoral"}
            else:
                for btn in updated_english_buttons:
                    if btn.value == word:
                        btn.style = {"background-color": "lightcoral"}
        with row:
            gr.update(korean_col, children=updated_korean_buttons)
            gr.update(english_col, children=updated_english_buttons)
        return result

    for btn in korean_buttons:
        btn.click(on_click, inputs=[btn, gr.State("korean")], outputs=output)

    for btn in english_buttons:
        btn.click(on_click, inputs=[btn, gr.State("english")], outputs=output)

    demo.launch()