"""이상적인 슬라이드 시뮬레이션 v2.

콘텐츠의 전달 의도를 정확히 반영한 블록 배치.
핵심: "DX와 BIM은 다르다. BIM은 DX의 일부다."를 독자가 이해하게 하는 것.

Kei API 불필요 — 순수 렌더링만.
"""
from __future__ import annotations

import asyncio
import json
import sys
from pathlib import Path

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

# 직접 HTML을 작성하여 렌더링
SLIDE_HTML = """<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>건설산업 DX의 올바른 이해</title>
<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: #ffffff;
    font-family: 'Pretendard Variable', sans-serif;
    color: #1e293b;
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
    display: grid;
    grid-template-areas:
        'header header'
        'body sidebar'
        'footer footer';
    grid-template-columns: 65fr 35fr;
    grid-template-rows: auto 1fr auto;
    gap: 16px;
    padding: 36px 40px 24px;
}

/* ── 제목 ── */
.header {
    grid-area: header;
    font-size: 28px;
    font-weight: 900;
    color: #1e293b;
    border-bottom: 3px solid #2563eb;
    padding-bottom: 8px;
}

/* ── Body ── */
.body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

/* ── 배경: 문제 제기 (간결한 1블록) ── */
.problem-box {
    background: linear-gradient(135deg, #1e293b, #0f172a);
    border-radius: 8px;
    padding: 16px 24px;
    color: #fff;
}
.problem-title {
    font-size: 13px;
    font-weight: 700;
    color: #93c5fd;
    margin-bottom: 6px;
}
.problem-text {
    font-size: 13px;
    line-height: 1.7;
    color: #e2e8f0;
}
.problem-text strong {
    color: #fbbf24;
    font-weight: 700;
}
.problem-cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.case-card {
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 10px 14px;
    border-left: 3px solid #60a5fa;
}
.case-label {
    font-size: 11px;
    font-weight: 700;
    color: #93c5fd;
    margin-bottom: 4px;
}
.case-content {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.6;
}

/* ── 본심: 핵심 관계 시각화 ── */
.core-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.core-label {
    font-size: 14px;
    font-weight: 800;
    color: #2563eb;
    text-align: center;
}

/* 포함 관계 시각화 */
.hierarchy-visual {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dx-outer {
    width: 100%;
    max-width: 620px;
    border: 3px solid #2563eb;
    border-radius: 16px;
    padding: 16px 20px 14px;
    position: relative;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
}
.dx-label {
    position: absolute;
    top: -12px;
    left: 20px;
    background: #2563eb;
    color: white;
    font-size: 13px;
    font-weight: 800;
    padding: 2px 16px;
    border-radius: 10px;
}
.dx-desc {
    font-size: 11px;
    color: #1e40af;
    margin-bottom: 10px;
    text-align: center;
}
.tech-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
.tech-card {
    background: white;
    border: 2px solid #93c5fd;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}
.tech-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #93c5fd, #2563eb);
    color: white;
    font-size: 16px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px;
}
.tech-name {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3px;
}
.tech-desc {
    font-size: 10px;
    color: #64748b;
    line-height: 1.5;
}

/* 핵심 메시지 */
.core-message {
    background: #f0f9ff;
    border: 2px solid #bae6fd;
    border-radius: 8px;
    padding: 10px 16px;
    text-align: center;
}
.core-message-text {
    font-size: 13px;
    font-weight: 700;
    color: #0c4a6e;
    line-height: 1.5;
}
.core-message-text em {
    color: #dc2626;
    font-style: normal;
    font-weight: 800;
}

/* ── Sidebar ── */
.sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid #e2e8f0;
    padding-left: 20px;
}
.sidebar-label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}
.sidebar-label::before, .sidebar-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.def-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 14px;
}
.def-num {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    font-size: 12px;
    font-weight: 800;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    vertical-align: middle;
}
.def-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    display: inline;
    vertical-align: middle;
}
.def-desc {
    font-size: 12px;
    color: #475569;
    line-height: 1.6;
    margin-top: 6px;
}
.def-source {
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
    margin-top: 4px;
}

/* ── Footer ── */
.footer {
    grid-area: footer;
    background: linear-gradient(135deg, #006aff, #00aaff);
    border-radius: 8px;
    padding: 14px 30px;
    text-align: center;
    color: white;
}
.footer-text {
    font-size: 15px;
    font-weight: 700;
}
.footer-sub {
    font-size: 11px;
    opacity: 0.85;
    margin-top: 2px;
}
</style>
</head>
<body>

<div class="slide">
    <div class="header">건설산업 DX의 올바른 이해</div>

    <div class="body">
        <!-- 배경: 문제 제기 + 사례 (1블록에 통합) -->
        <div class="problem-box">
            <div class="problem-title">현실 — 용어의 혼용</div>
            <div class="problem-text">
                건설산업에서 <strong>DX와 BIM이 동일 개념으로 인식</strong>되고 있다.
                DX는 산업 전반의 프로세스를 혁신하는 상위개념이며, BIM은 하위 기술에 해당한다.
            </div>
            <div class="problem-cases">
                <div class="case-card">
                    <div class="case-label">스마트 건설 활성화 방안 (2022.07)</div>
                    <div class="case-content">추진과제: 건설산업 디지털화<br>실행과제: BIM 전면 도입, BIM 전문인력 양성</div>
                </div>
                <div class="case-card">
                    <div class="case-label">제7차 건설기술진흥 기본계획 (2023.12)</div>
                    <div class="case-content">추진방향: 디지털 전환을 통한 스마트 건설 확산<br>추진과제: BIM 도입으로 건설산업 디지털화</div>
                </div>
            </div>
        </div>

        <!-- 본심: DX ⊃ BIM 포함 관계 시각화 -->
        <div class="core-section">
            <div class="core-label">DX와 핵심기술의 올바른 관계</div>
            <div class="hierarchy-visual">
                <div class="dx-outer">
                    <div class="dx-label">DX — 디지털 전환 (상위개념)</div>
                    <div class="dx-desc">BIM, GIS, 디지털 트윈 등 핵심기술의 융합을 통해서만 실현 가능</div>
                    <div class="tech-row">
                        <div class="tech-card">
                            <div class="tech-icon">G</div>
                            <div class="tech-name">GIS</div>
                            <div class="tech-desc">지리적 데이터를 공간 분석하여 시각적으로 표현, 위치기반 정보 제공</div>
                        </div>
                        <div class="tech-card">
                            <div class="tech-icon">B</div>
                            <div class="tech-name">BIM</div>
                            <div class="tech-desc">시설물 생애주기 정보를 3차원 모델 기반으로 통합·관리하는 도구</div>
                        </div>
                        <div class="tech-card">
                            <div class="tech-icon">T</div>
                            <div class="tech-name">디지털 트윈</div>
                            <div class="tech-desc">현실 세계의 물리적 객체를 디지털 환경에 동일하게 구현</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="core-message">
                <div class="core-message-text">
                    DX는 이들 기술을 통합하여 업무방식과 가치 창출 구조를 근본적으로 전환하는 과정이다.<br>
                    <em>BIM ≠ DX</em> — BIM은 DX를 실현하기 위한 핵심 기술 중 하나일 뿐이다.
                </div>
            </div>
        </div>
    </div>

    <div class="sidebar">
        <div class="sidebar-label">용어 정의</div>

        <div class="def-item">
            <span class="def-num">1</span>
            <span class="def-title">건설산업</span>
            <div class="def-desc">부동산 개발, 설계, 시공, 유지보수를 포괄하는 종합산업으로, 광범위한 기술을 통합·융합하여 인프라를 만드는 산업</div>
        </div>

        <div class="def-item">
            <span class="def-num">2</span>
            <span class="def-title">BIM</span>
            <div class="def-desc">형상정보와 속성정보가 포함된 3D 모델로, 시설물의 생애주기 동안 발생한 모든 정보를 3차원 모델 기반으로 통합·관리하는 정보 관리 도구</div>
            <div class="def-source">건설산업 BIM 기본지침, 국토교통부, 2020</div>
        </div>

        <div class="def-item">
            <span class="def-num">3</span>
            <span class="def-title">DX (디지털 전환)</span>
            <div class="def-desc">디지털 기술을 활용하여 업무방식과 가치 창출 구조를 전환하는 과정 및 결과. 단순한 기술 도입이 아닌, 산업의 새로운 방향을 정립</div>
            <div class="def-source">IBM Institute for Business Value, 2011</div>
        </div>
    </div>

    <div class="footer">
        <div class="footer-text">BIM은 건설산업의 디지털전환(DX)을 수행하는 과정에서 가장 기초가 되는 일부분이다</div>
        <div class="footer-sub">각 용어의 정의, 역할, 상호관계에 대한 체계적 정립 필요</div>
    </div>
</div>

</body>
</html>"""


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

    out_dir = ROOT / "data" / "runs" / "ideal_v2"
    out_dir.mkdir(parents=True, exist_ok=True)

    # 렌더링 + 측정
    m = await asyncio.to_thread(measure_rendered_heights, SLIDE_HTML)
    s = await asyncio.to_thread(capture_slide_screenshot, SLIDE_HTML)

    (out_dir / "ideal_v2.html").write_text(SLIDE_HTML, encoding="utf-8")
    if s:
        (out_dir / "ideal_v2_screenshot.png").write_bytes(base64.b64decode(s))

    print("=== 이상적인 슬라이드 v2 ===")
    slide = m.get("slide", {})
    print(f"  slide: {slide.get('scrollHeight', 0)}px / 720px {'✅' if not slide.get('overflowed') else '❌'}")
    for name, data in m.get("zones", {}).items():
        status = "✅" if not data.get("overflowed") else f"❌ +{data.get('excess_px', 0)}px"
        print(f"  {name}: {data.get('scrollHeight', 0)}px / {data.get('clientHeight', 0)}px {status}")
    print(f"\n결과: {out_dir}/ideal_v2_screenshot.png")


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())
