"""본심 float v3: 이미지를 아래로 내려서 GIS 역할 줄과 상단 맞춤. 팝업은 상단 오른쪽."""
from __future__ import annotations
import asyncio, sys, datetime, base64
from pathlib import Path

ROOT = Path(__file__).parent.parent
sys.path.insert(0, str(ROOT))


async def main():
    from src.slide_measurer import capture_slide_screenshot

    out_dir = ROOT / "data" / "runs" / f"core_float3_{datetime.datetime.now().strftime('%Y%m%d_%H%M%S')}"
    out_dir.mkdir(parents=True, exist_ok=True)

    img_path = Path("D:/ad-hoc/cel/public/assets/images/dx1.png")
    img_b64 = base64.b64encode(img_path.read_bytes()).decode()
    img_src = f"data:image/png;base64,{img_b64}"

    # 상단 불릿 2줄(메인 포인트)의 대략적 높이를 계산
    # 줄 높이 12px * 1.75 = 21px, 불릿 2개 + margin = ~52px
    # GIS 역할 줄이 시작하는 위치와 이미지 상단을 맞춤
    # margin-top으로 이미지를 아래로 내림

    html = f"""<style>
* {{ margin:0; padding:0; box-sizing:border-box; }}
.core {{
    width: 767px;
    font-family: 'Pretendard Variable', sans-serif;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 18px;
    overflow: hidden;
    word-break: keep-all;
}}
.core-header {{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}}
.core-label {{
    background: #1e293b;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 4px;
}}
.detail-link {{
    font-size: 10px;
    color: #2563eb;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}}
.detail-link details {{ position: relative; }}
.detail-link summary {{
    font-size: 10px; color: #2563eb; font-weight: 700;
    cursor: pointer; list-style: none;
}}
.detail-link summary::-webkit-details-marker {{ display: none; }}
.popup {{
    position: absolute; right: 0; top: 18px;
    background: white; border: 1px solid #e2e8f0;
    border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    padding: 8px; z-index: 10; width: 500px;
}}
.popup table {{ width: 100%; border-collapse: collapse; font-size: 10px; }}
.popup th {{ background: #1e293b; color: white; padding: 4px 6px; text-align: left; }}
.popup td {{ padding: 3px 6px; border-bottom: 1px solid #e2e8f0; color: #334155; }}
.popup tr:nth-child(even) {{ background: #f8fafc; }}

/* 이미지를 아래로 내림: 상단 불릿 2줄 후 GIS 역할과 상단 맞춤 */
.float-img {{
    float: right;
    margin: 50px 0 8px 14px;
    width: 280px;
}}
.float-img img {{
    width: 100%;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    object-fit: contain;
}}
.float-img .caption {{
    font-size: 9px;
    color: #94a3b8;
    text-align: center;
    margin-top: 3px;
}}

.core-text {{
    font-size: 12px;
    color: #1e293b;
    line-height: 1.75;
}}
.bp {{
    padding-left: 14px;
    text-indent: -14px;
    margin-bottom: 5px;
}}
.bp::before {{
    content: '•';
    display: inline-block;
    width: 14px;
    text-indent: 0;
    color: #1e293b;
    font-weight: 700;
}}
.sp {{
    padding-left: 28px;
    text-indent: -14px;
    margin-bottom: 4px;
    font-size: 11px;
    color: #475569;
}}
.sp::before {{
    content: '◦';
    display: inline-block;
    width: 14px;
    text-indent: 0;
    color: #64748b;
}}
.core-text b {{ font-weight: 700; color: #1e293b; }}

.key-msg {{
    background: #f0f9ff;
    border: 2px solid #bae6fd;
    border-radius: 6px;
    padding: 5px 12px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #0c4a6e;
    margin-top: 8px;
    clear: both;
}}
.key-msg em {{
    color: #dc2626;
    font-style: normal;
    font-weight: 900;
}}
</style>

<div class="core">
    <div class="core-header">
        <div class="core-label">DX와 BIM의 관계</div>
        <div class="detail-link">
            <details>
                <summary>📊 DX와 BIM의 상세 비교</summary>
                <div class="popup">
                    <table>
                        <tr><th>기준</th><th>DX</th><th>BIM</th></tr>
                        <tr><td>범위</td><td>BIM &lt;&lt; DX (Engineering + Management 통합)</td><td>Only 3D (형상 구현 중심)</td></tr>
                        <tr><td>프로세스</td><td>근본적 문제의식을 통한 개선</td><td>기존 2D 설계 방식 유지</td></tr>
                        <tr><td>성과품</td><td>공학 정보 및 콘텐츠 연계에 집중</td><td>3D 모델 중심</td></tr>
                        <tr><td>활용</td><td>설계/시공 생산성 혁신(개념의 재정립)</td><td>3D 모델에 의한 일반적 이해 향상</td></tr>
                        <tr><td>확장성</td><td>전 생애주기 활용 시스템</td><td>(설계/시공/운영) 분야별 단절</td></tr>
                        <tr><td>주체</td><td>적극적, 주체적인 기술 접목/융합<br>자체 수행 능력 — 지속가능성 확보</td><td>소극적, 상용 기술에 의존<br>S/W 제작사 판매 정책에 의존</td></tr>
                    </table>
                </div>
            </details>
        </div>
    </div>

    <div class="core-text">
        <!-- 이미지: margin-top으로 아래로 내려서 GIS 역할 줄과 상단 맞춤 -->
        <div class="float-img">
            <img src="{img_src}" alt="건설산업의 DX">
            <div class="caption">건설산업의 DX</div>
        </div>

        <div class="bp">DX는 BIM과 같은 디지털기술을 기반으로 산업 전반의 <b>프로세스를 혁신하는 상위개념</b></div>
        <div class="bp">건설산업의 DX는 GIS(공간정보), BIM, 디지털 트윈(가상환경)의 <b>기술융합을 통해서만 실현 또는 구현 가능</b></div>
        <div class="sp"><b>GIS의 역할</b> : 지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</div>
        <div class="sp"><b>BIM의 역할</b> : 형상정보와 내용정보가 포함된 3D모델로, 건설 정보 기반의 Process와 Product를 제공. 시설물의 생애주기동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
        <div class="sp"><b>디지털 트윈</b> : 현실 세계의 물리적 객체나 시스템을 디지털 환경에 동일하게 구현하는 기술</div>
        <div class="bp">DX는 이들 기술을 통합하여 업무방식과 가치 창출 구조를 <b>근본적으로 전환하는 과정 및 결과</b></div>
    </div>

    <div class="key-msg">
        <em>BIM ≠ DX</em> — BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다
    </div>
</div>"""

    wrapped = f"""<!DOCTYPE html>
<html lang="ko"><head><meta charset="UTF-8">
<style>
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');
* {{ margin:0; padding:0; box-sizing:border-box; }}
.slide {{
    width:1280px; height:720px; overflow:hidden; background:white;
    font-family:'Pretendard Variable',sans-serif;
    display:flex; align-items:center; justify-content:center;
}}
</style>
</head><body>
<div class="slide">
{html}
</div>
</body></html>"""

    (out_dir / "core_float3.html").write_text(wrapped, encoding="utf-8")
    s = await asyncio.to_thread(capture_slide_screenshot, wrapped)
    if s:
        (out_dir / "core_float3.png").write_bytes(base64.b64decode(s))

    print(f"결과: {out_dir}")


if __name__ == "__main__":
    import logging
    logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s %(message)s", datefmt="%H:%M:%S")
    logging.getLogger("selenium").setLevel(logging.WARNING)
    logging.getLogger("urllib3").setLevel(logging.WARNING)
    asyncio.run(main())