"""본심 이미지+텍스트 배치 3가지 비교.

dx1.png (612x224, 가로형) + 관계 텍스트를 293px 안에 배치.
A: 상단 이미지 + 하단 텍스트
B: 왼쪽 텍스트(55%) + 오른쪽 이미지(45%)
C: 상단 이미지(중앙) + 좌우 텍스트
"""
from __future__ import annotations
import asyncio, sys, datetime, base64
from pathlib import Path

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

IMG_PATH = "data:image/png;base64,[encoded data, 203960 characters]"

# 공통 텍스트
TEXTS = {
    "main": "DX는 BIM, GIS, 디지털 트윈 등 핵심기술의 융합을 통해서만 실현 가능한 상위개념이다.",
    "gis": "GIS: 지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공",
    "bim": "BIM: 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구",
    "dt": "디지털 트윈: 현실 세계의 물리적 객체나 시스템을 디지털 환경에 동일하게 구현하는 기술",
    "conclusion": "DX는 이들 기술을 통합하여 업무방식과 가치 창출 구조를 근본적으로 전환하는 과정 및 결과이다.",
    "key": "BIM ≠ DX — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다",
}

CSS_COMMON = """
<style>
* { margin:0; padding:0; box-sizing:border-box; }
.core { width:707px; height:293px; font-family:'Pretendard Variable',sans-serif; font-size:11px; color:#1e293b; line-height:1.6; overflow:hidden; display:flex; flex-direction:column; }
.core img { border-radius:6px; border:1px solid #e2e8f0; object-fit:contain; }
.core .main-text { font-size:12px; font-weight:500; color:#1e293b; margin-bottom:6px; }
.core .bullet { font-size:11px; color:#475569; margin-bottom:3px; padding-left:12px; position:relative; }
.core .bullet::before { content:'•'; position:absolute; left:0; color:#2563eb; }
.core .bullet b { color:#1e293b; }
.core .key-msg { background:#f0f9ff; border:2px solid #bae6fd; border-radius:6px; padding:6px 12px; text-align:center; font-size:12px; font-weight:700; color:#0c4a6e; margin-top:auto; }
.core .key-msg em { color:#dc2626; font-style:normal; font-weight:900; }
.core .details-link { font-size:10px; color:#2563eb; cursor:pointer; font-weight:700; text-align:right; }
</style>
"""


def layout_A():
    """상단 이미지(가운데, 너비 400px) + 하단 텍스트"""
    return f"""{CSS_COMMON}
<div class="core">
    <div style="text-align:center; margin-bottom:8px;">
        <img src="{IMG_PATH}" style="width:400px; height:auto;">
    </div>
    <div class="main-text">{TEXTS['main']}</div>
    <div class="bullet"><b>GIS</b>: 지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</div>
    <div class="bullet"><b>BIM</b>: 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
    <div class="bullet"><b>디지털 트윈</b>: 현실 세계의 물리적 객체나 시스템을 디지털 환경에 동일하게 구현하는 기술</div>
    <div class="key-msg"><em>BIM ≠ DX</em> — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다</div>
</div>"""


def layout_B():
    """왼쪽 텍스트(55%) + 오른쪽 이미지(45%)"""
    return f"""{CSS_COMMON}
<div class="core">
    <div style="display:flex; gap:16px; flex:1;">
        <div style="flex:55%; display:flex; flex-direction:column;">
            <div class="main-text">{TEXTS['main']}</div>
            <div class="bullet"><b>GIS</b>: 지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</div>
            <div class="bullet"><b>BIM</b>: 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
            <div class="bullet"><b>디지털 트윈</b>: 현실 세계의 물리적 객체나 시스템을 디지털 환경에 동일하게 구현하는 기술</div>
            <div style="margin-top:8px; font-size:11px; color:#1e293b; font-weight:500;">{TEXTS['conclusion']}</div>
        </div>
        <div style="flex:45%; display:flex; align-items:center;">
            <img src="{IMG_PATH}" style="width:100%; height:auto;">
        </div>
    </div>
    <div class="key-msg"><em>BIM ≠ DX</em> — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다</div>
</div>"""


def layout_C():
    """이미지 상단 + 좌우 텍스트 분할 (DX 설명 | BIM 설명)"""
    return f"""{CSS_COMMON}
<div class="core">
    <div style="text-align:center; margin-bottom:6px;">
        <img src="{IMG_PATH}" style="width:380px; height:auto;">
    </div>
    <div style="display:flex; gap:12px; flex:1;">
        <div style="flex:1; border-left:3px solid #2563eb; padding-left:10px;">
            <div style="font-size:12px; font-weight:700; color:#2563eb; margin-bottom:4px;">DX (Digital Transformation)</div>
            <div class="bullet">BIM, GIS, 디지털 트윈 등 핵심기술의 융합을 통해서만 실현 가능</div>
            <div class="bullet">업무방식과 가치 창출 구조를 근본적으로 전환하는 과정 및 결과</div>
            <div class="bullet">Engineering + Management 통합</div>
        </div>
        <div style="flex:1; border-left:3px solid #10b981; padding-left:10px;">
            <div style="font-size:12px; font-weight:700; color:#10b981; margin-bottom:4px;">BIM (Building Information Modeling)</div>
            <div class="bullet">시설물 생애주기 정보를 3차원 모델로 통합·관리하는 도구</div>
            <div class="bullet">건설 정보 기반의 Process와 Product를 제공</div>
            <div class="bullet">DX를 실현하기 위한 핵심 기술 중 하나</div>
        </div>
    </div>
    <div class="key-msg"><em>BIM ≠ DX</em> — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다</div>
</div>"""


def _wrap(inner):
    return 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">
{inner}
</div>
</body></html>"""


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

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

    layouts = {"A_top_image": layout_A(), "B_left_text": layout_B(), "C_image_split": layout_C()}

    for name, html in layouts.items():
        wrapped = _wrap(html)
        (out_dir / f"{name}.html").write_text(wrapped, encoding="utf-8")
        s = await asyncio.to_thread(capture_slide_screenshot, wrapped)
        if s:
            (out_dir / f"{name}.png").write_bytes(base64.b64decode(s))
        print(f"  {name} 완료")

    print(f"\n결과: {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())
