import gradio as gr
import pygwalker as pyg
from datasets import load_dataset

# -----------------------------
# 데이터 & Pygwalker HTML
# -----------------------------
dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
df = dataset.to_pandas()
html = pyg.to_html(df, spec="./viz-config.json", spec_io_mode=False)

# -----------------------------
# 사용자 계정
# -----------------------------
ACCOUNTS = {
    "alice": "1234",
    "bob": "qwerty",
    "winwin": "mypassword"
}

def check_login(username, password):
    if username in ACCOUNTS and ACCOUNTS[username] == password:
        return (
            gr.update(visible=True),   # Pygwalker 화면 표시
            gr.update(visible=False),  # 로그인 화면 숨김
            gr.update(visible=False),  # 에러 메시지 숨김
        )
    else:
        return (
            gr.update(visible=False),
            gr.update(visible=True),
            gr.update(visible=True, value="❌ 사용자명 또는 비밀번호가 틀렸습니다!"),
        )

# -----------------------------
# Gradio UI
# -----------------------------
with gr.Blocks(css="""

/* 로그인 박스 */
.login-box {
    background-color: #19254D;  /* 옅은 회색 */
    padding: 30px 25px;
    border-radius: 12px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 로그인 버튼 */
.button-custom {
    background-color: #87CEFA !important; /* 연한 파랑 */
    color: white !important;
    font-weight: bold !important;
    border-radius: 6px !important;
    padding: 10px 0 !important;
    font-size: 16px !important;
}
.button-custom span {
    color: white !important;
}
.button-custom:hover {
    background-color: #00BFFF !important;
    color: white !important;
}

/* 에러 메시지 */
.error-msg {
    color: red;
    text-align: center;
    font-weight: bold;
}

/* Pygwalker 화면 중앙 정렬 */
.pygwalker-container {
    max-width: 90%;
    margin: 30px auto;
}
""") as demo:

    # 로그인 화면
    with gr.Group(visible=True, elem_classes="login-box") as login_box:
        username_box = gr.Textbox(label="사용자명", placeholder="아이디 입력")
        password_box = gr.Textbox(label="비밀번호", type="password", placeholder="비밀번호 입력")
        submit_btn = gr.Button("로그인", elem_classes="button-custom")
        error_msg = gr.Textbox(visible=False, interactive=False, label="", show_label=False, elem_classes="error-msg")

    # Pygwalker 화면
    pyg_html = gr.HTML(html, visible=False, elem_classes="pygwalker-container")

    # 버튼 클릭 시 로그인 확인
    submit_btn.click(
        fn=check_login,
        inputs=[username_box, password_box],
        outputs=[pyg_html, login_box, error_msg]
    )

demo.launch()