pages/2_information.py

# -------------------------------
# 용어 데이터 (카테고리별, 한글+영문 병기)
# -------------------------------
from dashboard_theme.theme import inject
inject("graphite_gold")

import streamlit as st

st.set_page_config(page_title="Information", layout="wide")

# 인증 체크
if "authenticated" not in st.session_state or not st.session_state["authenticated"]:
    st.error("⛔ 접근 불가: 먼저 메인 화면에서 비밀번호를 입력하세요.")
    st.stop()

# -------------------------------
# 용어 데이터 (카테고리별, 한글+영문 병기)
# -------------------------------
terms = {
    "금형 부품": {
        "Die (다이)": {
            "description": "프레스 공구의 하부에 위치...",
            "image": "assets/Drawing.png"
        },
        "Punch (펀치)": {
            "description": "상부 금형으로 ...",
            "image": "assets/Drawing.png"
        },
        "Pad (패드)": {
            "description": "유지 압력을 받는 금형 부품 총칭",
            "image": None
        },
    },
    "소재": {
        "Blank (블랭크)": {
            "description": "Punch와 Die가 재료판에 작용하여 분리된 결과물",
            "image": "assets/Drawing.png"
        },
    },
    "공정": {
        "Blank holder (블랭크 홀더)": {
            "description": "드로잉 금형 또는 포밍 금형의 부품...",
            "image": "assets/Drawing.png"
        },
    }
}

# 전체 용어 flat dict
all_terms = {term: data for cat in terms.values() for term, data in cat.items()}

# -------------------------------
# (중요) 설명 박스 전용 스타일
# - 테마 패널을 쓰되, 내부 문단 여백만 약간 튜닝
# -------------------------------
st.markdown(
    """
    <style>
      .info-panel { margin: 0 0 16px 0; }
      .info-panel p { margin: 0; line-height: 1.7; font-size: 16px; }
      /* 만약 밝은 카드가 필요하면 아래 클래스로 사용 (현재는 미사용)
      .light-card {
        background:#f9f9f9 !important; color:#1f2937 !important;
        border:1px solid rgba(0,0,0,.08) !important; border-radius:12px;
        padding:20px;
      }
      .light-card * { color:#1f2937 !important; }
      */
    </style>
    """,
    unsafe_allow_html=True
)

# -------------------------------
# 세션 초기화
# -------------------------------
if "selected_term" not in st.session_state:
    st.session_state["selected_term"] = None

# -------------------------------
# 헤더 (제목 + 검색)
# -------------------------------
col1, col2 = st.columns([3, 2])

with col1:
    st.title("📘 성형 관련 용어 사전")

with col2:
    search_query = st.selectbox(
        " ",  # 라벨 숨김
        options=[""] + list(all_terms.keys()),
        index=0,
        placeholder="검색 (예: Die, 다이, Punch, 블랭크 ...)"
    )
    if search_query:
        st.session_state["selected_term"] = search_query

# -------------------------------
# 카테고리별 용어 (탭 + 카드)
# -------------------------------
st.markdown("---")
st.subheader("📑 카테고리별 용어")

tabs = st.tabs(list(terms.keys()))
for tab, (category, items) in zip(tabs, terms.items()):
    with tab:
        cols = st.columns(3)
        for i, (term, data) in enumerate(items.items()):
            with cols[i % 3]:
                st.markdown(f"#### {term}")
                if st.button("자세히 보기", key=f"btn_{term}"):
                    st.session_state["selected_term"] = term

# -------------------------------
# 공용 상세 패널 (검색/버튼 통합, 좌우 레이아웃)
# -------------------------------
if st.session_state["selected_term"]:
    term = st.session_state["selected_term"]
    data = all_terms[term]

    st.markdown("---")
    st.markdown(f"## 📖 {term}")

    # 좌(설명) : 우(이미지)
    col1, col2 = st.columns([2, 1])

    with col1:
        # ✅ 테마의 패널(.panel)을 그대로 사용 → 다크 배경 + 밝은 글자
        st.markdown(
            f"""
            <div class="panel info-panel">
                <p>{data["description"]}</p>
            </div>
            """,
            unsafe_allow_html=True
        )

    with col2:
        if data["image"]:
            st.image(data["image"], use_container_width=True)