from pyscript import document, fetch, window
from pyscript.ffi import create_proxy

from lib.lesson_parser import parse_lesson
from lib.runner import run_code

import markdown as md

# 주의: 클라이언트 사이드 게이트라 진짜 보안은 아님(소스 노출/우회 가능).
TEACHER_PASSWORD = "hgyoo"

# 사이트에서 다루는 주차 (Phase 1). 파일 있는 주차만 로드, 없으면 "준비 중".
WEEKS = [
    {"n": 1, "title": "첫걸음", "theme": "print·변수·리스트"},
    {"n": 2, "title": "반복", "theme": "여러 손님 자동 인사"},
    {"n": 3, "title": "조건", "theme": "VIP는 다르게 인사"},
    {"n": 4, "title": "합치기", "theme": "참석/불참 자동 집계"},
]

# Colab으로 졸업하는 이후 단계 (클릭 불가 라벨).
LATER_PHASES = [
    "📊 2단계 — 데이터 (Colab에서)",
    "📈 3단계 — 시각화 (Colab에서)",
    "🤖 4단계 — AI 맛보기 (Colab에서)",
]


def render_text(block):
    el = document.createElement("div")
    el.className = "lesson-text"
    el.innerHTML = md.markdown(block.content)
    return el


def render_teacher(block):
    el = document.createElement("details")
    el.className = "teacher-note"
    summary = document.createElement("summary")
    summary.innerText = "🔒 선생님 메모"
    el.append(summary)
    body = document.createElement("div")
    body.innerHTML = md.markdown(block.content)
    el.append(body)
    return el


def render_code(block):
    wrap = document.createElement("div")
    wrap.className = "code-cell"

    editor = document.createElement("textarea")
    editor.className = "code-input"
    editor.value = block.content
    editor.rows = max(2, block.content.count("\n") + 1)

    controls = document.createElement("div")
    controls.className = "code-controls"
    run_btn = document.createElement("button")
    run_btn.className = "run-btn"
    run_btn.innerText = "▶ 실행"
    reset_btn = document.createElement("button")
    reset_btn.className = "reset-btn"
    reset_btn.innerText = "↺ 처음으로"
    controls.append(run_btn)
    controls.append(reset_btn)

    output = document.createElement("pre")
    output.className = "code-output"

    def on_run(event):
        result = run_code(editor.value)
        if result.ok:
            output.className = "code-output ok"
            output.innerText = result.output or "(출력 없음)"
        else:
            output.className = "code-output err"
            output.innerText = (result.output + "\n" if result.output else "") + result.error

    def on_reset(event):
        editor.value = block.content
        output.innerText = ""
        output.className = "code-output"

    run_btn.addEventListener("click", create_proxy(on_run))
    reset_btn.addEventListener("click", create_proxy(on_reset))

    wrap.append(editor)
    wrap.append(controls)
    wrap.append(output)
    return wrap


RENDERERS = {"text": render_text, "code": render_code, "teacher": render_teacher}


def render_blocks(raw):
    container = document.querySelector("#lessons")
    container.innerHTML = ""
    for block in parse_lesson(raw):
        container.append(RENDERERS[block.kind](block))


def show_placeholder(n):
    container = document.querySelector("#lessons")
    container.innerHTML = ""
    el = document.createElement("div")
    el.className = "lesson-text placeholder"
    el.innerHTML = f"<h2>{n}주차 🚧</h2><p>아직 준비 중이에요. 곧 만들어둘게!</p>"
    container.append(el)


def set_active(n):
    for link in document.querySelectorAll("#sidebar .week-link"):
        link.classList.toggle("active", link.getAttribute("data-week") == str(n))


async def load_week(n):
    set_active(n)
    resp = await fetch(f"./lessons/week{n:02d}.md")
    if not resp.ok:
        show_placeholder(n)
        return
    raw = await resp.text()
    render_blocks(raw)


def build_sidebar():
    sidebar = document.querySelector("#sidebar")
    sidebar.innerHTML = ""

    head = document.createElement("div")
    head.className = "toc-phase site"
    head.innerText = "🌱 1단계 — 자신감"
    sidebar.append(head)

    for w in WEEKS:
        link = document.createElement("button")
        link.className = "week-link"
        link.setAttribute("data-week", str(w["n"]))
        link.innerHTML = f"<b>{w['n']}주차 · {w['title']}</b><span>{w['theme']}</span>"

        def make_handler(num):
            async def handler(event):
                await load_week(num)
            return create_proxy(handler)

        link.addEventListener("click", make_handler(w["n"]))
        sidebar.append(link)

    for label in LATER_PHASES:
        ph = document.createElement("div")
        ph.className = "toc-phase later"
        ph.innerText = label
        sidebar.append(ph)


def ask_password(callback):
    """마스킹된 인라인 비밀번호 입력 모달. 결과를 callback(value)로 전달 (취소=None)."""
    overlay = document.createElement("div")
    overlay.className = "pw-overlay"
    overlay.innerHTML = (
        '<div class="pw-box">'
        '<p>🔒 선생님 비밀번호</p>'
        '<input type="password" class="pw-input" placeholder="비밀번호" />'
        '<div class="pw-btns">'
        '<button class="pw-cancel">취소</button>'
        '<button class="pw-ok">확인</button>'
        '</div></div>'
    )
    document.body.append(overlay)
    inp = overlay.querySelector(".pw-input")
    inp.focus()

    def finish(value):
        overlay.remove()
        callback(value)

    def on_ok(event):
        finish(inp.value)

    def on_cancel(event):
        finish(None)

    def on_key(event):
        if event.key == "Enter":
            finish(inp.value)
        elif event.key == "Escape":
            finish(None)

    overlay.querySelector(".pw-ok").addEventListener("click", create_proxy(on_ok))
    overlay.querySelector(".pw-cancel").addEventListener("click", create_proxy(on_cancel))
    inp.addEventListener("keydown", create_proxy(on_key))


def setup_teacher_toggle():
    checkbox = document.querySelector("#teacher-mode")
    state = {"authed": False}

    def on_result(value):
        if value == TEACHER_PASSWORD:
            state["authed"] = True
            document.body.classList.add("show-teacher")
        else:
            checkbox.checked = False
            document.body.classList.remove("show-teacher")
            if value is not None:  # 취소가 아니라 틀린 입력일 때만 안내
                window.alert("비밀번호가 틀렸어요.")

    def on_toggle(event):
        if not checkbox.checked:
            document.body.classList.remove("show-teacher")
            return
        if state["authed"]:
            document.body.classList.add("show-teacher")
            return
        ask_password(on_result)

    checkbox.addEventListener("change", create_proxy(on_toggle))


async def main():
    build_sidebar()
    await load_week(1)
    document.querySelector("#loading").style.display = "none"
    setup_teacher_toggle()


await main()