#!/usr/bin/env python3
"""컨셉 #50 Scandinavian Digital Elegance — Red Dot / iF Design Award Inspired
T.O.P Recruiting Meta Ad — typography-driven minimalism, pure white + gold accent.
"""

from __future__ import annotations

import shutil
import sys
from pathlib import Path

from playwright.sync_api import sync_playwright

# ── 경로 설정 ──────────────────────────────────────────────────────────────
OUTPUT_DIR = Path("/home/jay/workspace/output/meta-ads/concept-catalog/50-intl-award-scandinavian-elegance")
SAMPLE_PATH = OUTPUT_DIR / "sample.png"
COPY_PATH = OUTPUT_DIR / "50-intl-award-scandinavian-elegance.png"

FONT_DIR = Path.home() / ".local/share/fonts/Pretendard"

# ── HTML 템플릿 ──────────────────────────────────────────────────────────────
HTML_TEMPLATE = f"""<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  @font-face {{
    font-family: 'Pretendard';
    src: url('file://{FONT_DIR}/Pretendard-Black.otf') format('opentype');
    font-weight: 900;
  }}
  @font-face {{
    font-family: 'Pretendard';
    src: url('file://{FONT_DIR}/Pretendard-ExtraBold.otf') format('opentype');
    font-weight: 800;
  }}
  @font-face {{
    font-family: 'Pretendard';
    src: url('file://{FONT_DIR}/Pretendard-Bold.otf') format('opentype');
    font-weight: 700;
  }}
  @font-face {{
    font-family: 'Pretendard';
    src: url('file://{FONT_DIR}/Pretendard-SemiBold.otf') format('opentype');
    font-weight: 600;
  }}
  @font-face {{
    font-family: 'Pretendard';
    src: url('file://{FONT_DIR}/Pretendard-Medium.otf') format('opentype');
    font-weight: 500;
  }}
  @font-face {{
    font-family: 'Pretendard';
    src: url('file://{FONT_DIR}/Pretendard-Regular.otf') format('opentype');
    font-weight: 400;
  }}
  @font-face {{
    font-family: 'Pretendard';
    src: url('file://{FONT_DIR}/Pretendard-Light.otf') format('opentype');
    font-weight: 300;
  }}
  @font-face {{
    font-family: 'Pretendard';
    src: url('file://{FONT_DIR}/Pretendard-ExtraLight.otf') format('opentype');
    font-weight: 200;
  }}

  * {{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }}

  body {{
    width: 1080px;
    height: 1080px;
    overflow: hidden;
    background: #FFFFFF;
  }}

  .canvas {{
    width: 1080px;
    height: 1080px;
    position: relative;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    background: #FFFFFF;
  }}

  /* ── 배경: 극히 미세한 그리드 라인 ── */
  .bg-lines {{
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(
        0deg,
        transparent,
        transparent 107px,
        rgba(0, 0, 0, 0.035) 107px,
        rgba(0, 0, 0, 0.035) 108px
      ),
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent 107px,
        rgba(0, 0, 0, 0.025) 107px,
        rgba(0, 0, 0, 0.025) 108px
      );
    pointer-events: none;
  }}

  /* ── 좌측 상단 브랜드 뱃지 ── */
  .brand-badge {{
    position: absolute;
    top: 64px;
    left: 80px;
    display: flex;
    align-items: center;
    gap: 14px;
  }}
  .brand-badge .dot {{
    width: 10px;
    height: 10px;
    background: #D4AF37;
    border-radius: 50%;
    flex-shrink: 0;
  }}
  .brand-badge .brand-label {{
    font-size: 28px;
    font-weight: 400;
    color: #8A8A8A;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }}

  /* ── 우측 상단 작은 수직 텍스트 태그 ── */
  .tag-right {{
    position: absolute;
    top: 64px;
    right: 80px;
    font-size: 26px;
    font-weight: 300;
    color: #CCCCCC;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: right;
  }}

  /* ── 골드 액센트 바 ── */
  .gold-bar {{
    position: absolute;
    top: 218px;
    left: 80px;
    width: 56px;
    height: 4px;
    background: #D4AF37;
  }}

  /* ── 메인 헤드라인 ── */
  .headline-block {{
    position: absolute;
    top: 244px;
    left: 80px;
    right: 80px;
  }}
  .headline {{
    font-size: 96px;
    font-weight: 900;
    color: #1F1F1F;
    letter-spacing: -0.03em;
    line-height: 1.05;
  }}
  .headline .line-2 {{
    display: block;
    margin-top: 4px;
  }}

  /* ── 서브 텍스트 ── */
  .sub-block {{
    position: absolute;
    top: 494px;
    left: 80px;
  }}
  .sub-label {{
    font-size: 48px;
    font-weight: 300;
    color: #1F1F1F;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }}
  .sub-amount {{
    font-size: 80px;
    font-weight: 800;
    color: #D4AF37;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-top: 2px;
    display: block;
  }}

  /* ── 수평 구분선 (골드) ── */
  .divider-gold {{
    position: absolute;
    top: 710px;
    left: 80px;
    width: 340px;
    height: 1px;
    background: rgba(212, 175, 55, 0.45);
  }}

  /* ── 보디 텍스트 ── */
  .body-block {{
    position: absolute;
    top: 730px;
    left: 80px;
  }}
  .body-line {{
    font-size: 40px;
    font-weight: 400;
    color: #6B6B6B;
    letter-spacing: -0.005em;
    line-height: 1.55;
  }}

  /* ── CTA 영역 ── */
  .cta-block {{
    position: absolute;
    bottom: 80px;
    left: 80px;
    right: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }}
  .cta-text {{
    font-size: 44px;
    font-weight: 700;
    color: #1F1F1F;
    letter-spacing: -0.02em;
  }}
  .cta-arrow-wrap {{
    width: 68px;
    height: 68px;
    border: 2px solid #D4AF37;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }}
  .cta-arrow {{
    font-size: 32px;
    color: #D4AF37;
    line-height: 1;
    margin-left: 2px;
  }}

  /* ── 우하단 META AD 워터마크 ── */
  .meta-tag {{
    position: absolute;
    bottom: 88px;
    right: 80px;
    font-size: 22px;
    font-weight: 300;
    color: #D5D5D5;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }}

  /* ── 우측 중단 세로 텍스트 장식 ── */
  .vertical-text {{
    position: absolute;
    top: 50%;
    right: 68px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center center;
    font-size: 24px;
    font-weight: 200;
    color: #E2E2E2;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    white-space: nowrap;
  }}
</style>
</head>
<body>
<div class="canvas">

  <!-- 배경 그리드 라인 -->
  <div class="bg-lines"></div>

  <!-- 우측 세로 장식 텍스트 -->
  <div class="vertical-text">Premium Recruiting</div>

  <!-- 브랜드 뱃지 상단 좌 -->
  <div class="brand-badge">
    <div class="dot"></div>
    <div class="brand-label">T.O.P 사업단</div>
  </div>

  <!-- 우측 상단 태그 -->
  <div class="tag-right">Meta Ad</div>

  <!-- 골드 액센트 바 -->
  <div class="gold-bar"></div>

  <!-- 메인 헤드라인 -->
  <div class="headline-block">
    <div class="headline">
      당신의 가치에<span class="line-2">걸맞은 대우</span>
    </div>
  </div>

  <!-- 서브 텍스트 -->
  <div class="sub-block">
    <div class="sub-label">정착지원금 최대</div>
    <span class="sub-amount">1,000만원</span>
  </div>

  <!-- 골드 구분선 -->
  <div class="divider-gold"></div>

  <!-- 보디 텍스트 -->
  <div class="body-block">
    <div class="body-line">T.O.P 사업단 &nbsp;|&nbsp; 코스닥 상장</div>
    <div class="body-line">인카금융서비스</div>
  </div>

  <!-- CTA -->
  <div class="cta-block">
    <div class="cta-text">지금 상담 신청하기</div>
    <div class="cta-arrow-wrap">
      <span class="cta-arrow">→</span>
    </div>
  </div>

</div>
</body>
</html>"""


def render_html() -> None:
    """Playwright로 HTML을 1080x1080 PNG로 캡처합니다."""
    OUTPUT_DIR.mkdir(parents=True, exist_ok=True)

    html_file = OUTPUT_DIR / "_concept50_template.html"
    html_file.write_text(HTML_TEMPLATE, encoding="utf-8")
    print(f"  HTML 템플릿 저장: {html_file}")

    print("  Playwright 렌더링 중...")
    with sync_playwright() as p:
        browser = p.chromium.launch()
        try:
            page = browser.new_page(viewport={"width": 1080, "height": 1080})
            page.goto(f"file://{html_file.resolve()}", wait_until="networkidle")
            # 폰트 렌더링 대기
            page.wait_for_timeout(2000)
            page.screenshot(path=str(SAMPLE_PATH), type="png")
        finally:
            browser.close()

    size = SAMPLE_PATH.stat().st_size
    print(f"  PNG 저장 완료: {SAMPLE_PATH} ({size:,} bytes)")


def main() -> None:
    print("=" * 60)
    print("컨셉 #50 Scandinavian Digital Elegance")
    print("Red Dot / iF Design Award inspired typography minimalism")
    print("T.O.P Recruiting — Premium Settlement Bonus Meta Ad")
    print("=" * 60)

    print("\n[1/2] HTML 오버레이 렌더링 (Playwright)...")
    render_html()

    print("\n[2/2] 복사본 생성...")
    shutil.copy2(SAMPLE_PATH, COPY_PATH)
    print(f"  복사 완료: {COPY_PATH}")

    print(f"\n완료!")
    print(f"  sample.png  : {SAMPLE_PATH}")
    print(f"  named copy  : {COPY_PATH}")


if __name__ == "__main__":
    main()
