#!/usr/bin/env python3
"""
Google Display Ad Generator - Angle C (위기감/긴급성)
Design #17: 숫자 뉴스플래시 - Breaking News Aesthetic
"""

import asyncio
from pathlib import Path
from PIL import Image

OUTPUT_DIR = Path("/home/jay/workspace/output/google-ads/angle-C/production")

# ─────────────────────────────────────────────
# HTML TEMPLATES
# ─────────────────────────────────────────────

def html_1200x628():
    return """<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1200px;
    height: 628px;
    background: #1A1A1A;
    font-family: 'Noto Sans KR', sans-serif;
    overflow: hidden;
    position: relative;
  }

  /* Subtle texture overlay */
  body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.012) 2px,
      rgba(255,255,255,0.012) 4px
    );
    z-index: 0;
  }

  /* Red top banner */
  .red-banner {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 62px;
    background: #E60012;
    display: flex;
    align-items: center;
    padding: 0 40px;
    gap: 20px;
  }

  .breaking-dot {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    animation: blink 1s infinite;
    flex-shrink: 0;
  }

  .breaking-label {
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .banner-divider {
    width: 2px;
    height: 28px;
    background: rgba(255,255,255,0.5);
    flex-shrink: 0;
  }

  .banner-sub {
    font-size: 22px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.05em;
  }

  .banner-date {
    margin-left: auto;
    font-size: 20px;
    font-weight: 400;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.08em;
  }

  /* Main content area */
  .main-content {
    position: relative;
    z-index: 5;
    padding: 38px 60px 0 60px;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Headline */
  .headline {
    font-size: 92px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  }

  /* Layout row: number + sub stacked */
  .info-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 0;
  }

  .date-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .date-label {
    font-size: 18px;
    font-weight: 700;
    color: #E60012;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .date-number {
    font-size: 96px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-shadow: 0 0 40px rgba(230,0,18,0.3);
  }

  .vertical-divider {
    width: 3px;
    height: 110px;
    background: linear-gradient(to bottom, #E60012, rgba(230,0,18,0.1));
    margin-top: 14px;
    flex-shrink: 0;
  }

  .right-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 16px;
  }

  .rule-text {
    font-size: 66px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }

  .rule-muted {
    font-size: 32px;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
    letter-spacing: 0.04em;
  }

  /* Bottom CTA bar */
  .cta-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 72px;
    background: linear-gradient(90deg, #111111 0%, #1E1E1E 100%);
    border-top: 3px solid #E60012;
    display: flex;
    align-items: center;
    padding: 0 60px;
    gap: 24px;
  }

  .cta-brand {
    font-size: 30px;
    font-weight: 900;
    color: #E60012;
    letter-spacing: 0.05em;
  }

  .cta-divider {
    width: 2px;
    height: 30px;
    background: rgba(255,255,255,0.25);
  }

  .cta-action {
    font-size: 28px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.03em;
  }

  .cta-arrow {
    margin-left: auto;
    width: 48px;
    height: 48px;
    background: #E60012;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    font-weight: 900;
  }

  /* Decorative elements */
  .deco-line {
    position: absolute;
    right: 0;
    top: 62px;
    bottom: 72px;
    width: 4px;
    background: linear-gradient(to bottom, #E60012, transparent 60%);
    z-index: 3;
  }

  .deco-corner {
    position: absolute;
    bottom: 72px;
    right: 60px;
    width: 120px;
    height: 120px;
    border-right: 3px solid rgba(230,0,18,0.15);
    border-bottom: 3px solid rgba(230,0,18,0.15);
    z-index: 2;
  }

  /* Urgency badge */
  .urgency-badge {
    position: absolute;
    right: 60px;
    top: 120px;
    background: rgba(230,0,18,0.12);
    border: 2px solid rgba(230,0,18,0.4);
    border-radius: 8px;
    padding: 12px 20px;
    text-align: center;
    z-index: 10;
  }

  .badge-line1 {
    font-size: 22px;
    font-weight: 700;
    color: rgba(255,255,255,0.6);
    letter-spacing: 0.05em;
  }

  .badge-line2 {
    font-size: 40px;
    font-weight: 900;
    color: #FF3344;
    letter-spacing: 0.02em;
    line-height: 1.1;
  }

  .badge-line3 {
    font-size: 20px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.04em;
    margin-top: 2px;
  }

  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }
</style>
</head>
<body>
  <!-- Red top banner -->
  <div class="red-banner">
    <div class="breaking-dot"></div>
    <div class="breaking-label">긴급 안내</div>
    <div class="banner-divider"></div>
    <div class="banner-sub">BREAKING NEWS</div>
    <div class="banner-date">2026. 03. 29</div>
  </div>

  <!-- Decorative elements -->
  <div class="deco-line"></div>
  <div class="deco-corner"></div>

  <!-- Urgency badge (right side) -->
  <div class="urgency-badge">
    <div class="badge-line1">시행까지</div>
    <div class="badge-line2">D-90</div>
    <div class="badge-line3">지금이 마지막 기회</div>
  </div>

  <!-- Main content -->
  <div class="main-content">
    <div class="headline">보험 시장 대격변</div>
    <div class="info-row">
      <div class="date-block">
        <div class="date-label">▶ 시행일</div>
        <div class="date-number">2026.7월</div>
      </div>
      <div class="vertical-divider"></div>
      <div class="right-block">
        <div class="rule-text">1,200% 룰 시행 예정</div>
        <div class="rule-muted">보험업법 시행령 개정안</div>
      </div>
    </div>
  </div>

  <!-- Bottom CTA bar -->
  <div class="cta-bar">
    <div class="cta-brand">T.O.P 사업단</div>
    <div class="cta-divider"></div>
    <div class="cta-action">지금 확인하기</div>
    <div class="cta-arrow">▶</div>
  </div>
</body>
</html>"""


def html_1200x1200():
    return """<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 1200px;
    height: 1200px;
    background: #1A1A1A;
    font-family: 'Noto Sans KR', sans-serif;
    overflow: hidden;
    position: relative;
  }

  /* Scanline texture */
  body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,0.01) 3px,
      rgba(255,255,255,0.01) 6px
    );
    z-index: 0;
  }

  /* Radial glow from center */
  body::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 900px;
    background: radial-gradient(ellipse, rgba(230,0,18,0.06) 0%, transparent 70%);
    z-index: 0;
  }

  /* Red top banner */
  .red-banner {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 80px;
    background: #E60012;
    display: flex;
    align-items: center;
    padding: 0 50px;
    gap: 24px;
  }

  .breaking-dot {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .breaking-label {
    font-size: 34px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.18em;
  }

  .banner-divider {
    width: 2px;
    height: 34px;
    background: rgba(255,255,255,0.45);
    flex-shrink: 0;
  }

  .banner-sub {
    font-size: 26px;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    letter-spacing: 0.08em;
  }

  .banner-date {
    margin-left: auto;
    font-size: 22px;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    letter-spacing: 0.06em;
  }

  /* Content wrapper */
  .content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 70px 0 70px;
    text-align: center;
    height: calc(1200px - 80px - 90px);
  }

  /* Headline */
  .headline {
    font-size: 96px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: 50px;
    text-shadow: 0 2px 30px rgba(0,0,0,0.6);
  }

  /* Middle divider */
  .mid-divider {
    width: 80px;
    height: 4px;
    background: #E60012;
    margin-bottom: 50px;
  }

  /* Date focal point */
  .date-section {
    margin-bottom: 30px;
  }

  .date-label {
    font-size: 24px;
    font-weight: 700;
    color: #E60012;
    letter-spacing: 0.2em;
    margin-bottom: 10px;
  }

  .date-number {
    font-size: 130px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 0.9;
    letter-spacing: -0.03em;
    text-shadow:
      0 0 60px rgba(230,0,18,0.25),
      0 4px 30px rgba(0,0,0,0.5);
  }

  /* Rule text */
  .rule-section {
    margin-bottom: 50px;
  }

  .rule-text {
    font-size: 72px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
  }

  .rule-sub {
    font-size: 36px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
    letter-spacing: 0.04em;
  }

  /* Urgency row */
  .urgency-row {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-bottom: 0;
  }

  .urgency-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(230,0,18,0.4));
  }

  .urgency-line.right {
    background: linear-gradient(90deg, rgba(230,0,18,0.4), transparent);
  }

  .urgency-text {
    font-size: 44px;
    font-weight: 700;
    color: #FF4455;
    letter-spacing: 0.05em;
  }

  /* Bottom CTA bar */
  .cta-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 90px;
    background: #111111;
    border-top: 4px solid #E60012;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
  }

  .cta-brand {
    font-size: 36px;
    font-weight: 900;
    color: #E60012;
    letter-spacing: 0.08em;
  }

  .cta-divider {
    width: 2px;
    height: 36px;
    background: rgba(255,255,255,0.25);
  }

  .cta-action {
    font-size: 34px;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.04em;
  }

  /* Decorative corner lines */
  .corner-tl, .corner-tr, .corner-bl, .corner-br {
    position: absolute;
    z-index: 6;
    width: 50px;
    height: 50px;
  }

  .corner-tl {
    top: 100px;
    left: 30px;
    border-top: 2px solid rgba(230,0,18,0.3);
    border-left: 2px solid rgba(230,0,18,0.3);
  }

  .corner-tr {
    top: 100px;
    right: 30px;
    border-top: 2px solid rgba(230,0,18,0.3);
    border-right: 2px solid rgba(230,0,18,0.3);
  }

  .corner-bl {
    bottom: 110px;
    left: 30px;
    border-bottom: 2px solid rgba(230,0,18,0.3);
    border-left: 2px solid rgba(230,0,18,0.3);
  }

  .corner-br {
    bottom: 110px;
    right: 30px;
    border-bottom: 2px solid rgba(230,0,18,0.3);
    border-right: 2px solid rgba(230,0,18,0.3);
  }
</style>
</head>
<body>
  <!-- Red top banner -->
  <div class="red-banner">
    <div class="breaking-dot"></div>
    <div class="breaking-label">긴급 안내</div>
    <div class="banner-divider"></div>
    <div class="banner-sub">BREAKING NEWS</div>
    <div class="banner-date">2026. 03. 29</div>
  </div>

  <!-- Corner decorations -->
  <div class="corner-tl"></div>
  <div class="corner-tr"></div>
  <div class="corner-bl"></div>
  <div class="corner-br"></div>

  <!-- Main content -->
  <div class="content">
    <div class="headline">보험 시장 대격변</div>
    <div class="mid-divider"></div>

    <div class="date-section">
      <div class="date-label">▶ 시행일</div>
      <div class="date-number">2026.7월</div>
    </div>

    <div class="rule-section">
      <div class="rule-text">1,200% 룰 시행 예정</div>
      <div class="rule-sub">보험업법 시행령 개정안</div>
    </div>

    <div class="urgency-row">
      <div class="urgency-line"></div>
      <div class="urgency-text">지금이 마지막 기회</div>
      <div class="urgency-line right"></div>
    </div>
  </div>

  <!-- Bottom CTA bar -->
  <div class="cta-bar">
    <div class="cta-brand">T.O.P 사업단</div>
    <div class="cta-divider"></div>
    <div class="cta-action">지금 확인하기</div>
  </div>
</body>
</html>"""


def html_600x500():
    """Renders at 600x500, will be resized to 300x250"""
    return """<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700;900&display=swap" rel="stylesheet">
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    width: 600px;
    height: 500px;
    background: #1A1A1A;
    font-family: 'Noto Sans KR', sans-serif;
    overflow: hidden;
    position: relative;
  }

  body::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(ellipse, rgba(230,0,18,0.08) 0%, transparent 70%);
    z-index: 0;
  }

  /* Red top banner */
  .red-banner {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 48px;
    background: #E60012;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
  }

  .breaking-dot {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .breaking-label {
    font-size: 20px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.15em;
  }

  .banner-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.45);
    flex-shrink: 0;
  }

  .banner-sub {
    font-size: 14px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    letter-spacing: 0.08em;
  }

  /* Main content */
  .content {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 30px 0 30px;
  }

  .headline {
    font-size: 52px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.0;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
  }

  .red-rule {
    width: 50px;
    height: 3px;
    background: #E60012;
    margin-bottom: 16px;
  }

  .date-label {
    font-size: 14px;
    font-weight: 700;
    color: #E60012;
    letter-spacing: 0.15em;
    margin-bottom: 4px;
  }

  .date-number {
    font-size: 76px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 0.92;
    letter-spacing: -0.02em;
    text-shadow: 0 0 40px rgba(230,0,18,0.3);
    margin-bottom: 16px;
  }

  .rule-text {
    font-size: 40px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
  }

  .urgency-text {
    font-size: 26px;
    font-weight: 700;
    color: #FF4455;
    letter-spacing: 0.04em;
  }

  /* Bottom CTA */
  .cta-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    height: 60px;
    background: #111111;
    border-top: 3px solid #E60012;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .cta-brand {
    font-size: 22px;
    font-weight: 900;
    color: #E60012;
    letter-spacing: 0.06em;
  }

  .cta-divider {
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.25);
  }

  .cta-action {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
  }
</style>
</head>
<body>
  <!-- Red top banner -->
  <div class="red-banner">
    <div class="breaking-dot"></div>
    <div class="breaking-label">긴급 안내</div>
    <div class="banner-divider"></div>
    <div class="banner-sub">BREAKING NEWS</div>
  </div>

  <!-- Main content -->
  <div class="content">
    <div class="headline">보험 시장 대격변</div>
    <div class="red-rule"></div>
    <div class="date-label">▶ 시행일</div>
    <div class="date-number">2026.7월</div>
    <div class="rule-text">1,200% 룰 시행 예정</div>
    <div class="urgency-text">지금이 마지막 기회</div>
  </div>

  <!-- Bottom CTA -->
  <div class="cta-bar">
    <div class="cta-brand">T.O.P 사업단</div>
    <div class="cta-divider"></div>
    <div class="cta-action">지금 확인하기</div>
  </div>
</body>
</html>"""


# ─────────────────────────────────────────────
# RENDER FUNCTIONS
# ─────────────────────────────────────────────

async def render_html(html_content: str, width: int, height: int, output_path: Path):
    from playwright.async_api import async_playwright

    async with async_playwright() as p:
        browser = await p.chromium.launch(args=["--no-sandbox"])
        page = await browser.new_page(viewport={"width": width, "height": height})

        # Write HTML to temp file
        tmp_path = output_path.parent / f"_tmp_{output_path.name}.html"
        tmp_path.write_text(html_content, encoding="utf-8")

        await page.goto(f"file://{tmp_path}", wait_until="networkidle")
        await page.wait_for_timeout(2000)  # Wait for fonts to load

        await page.screenshot(path=str(output_path), full_page=False)
        await browser.close()

        tmp_path.unlink(missing_ok=True)
        print(f"  ✓ Rendered: {output_path.name} ({width}x{height})")


def resize_to_300x250(src_path: Path, dst_path: Path):
    """Resize 600x500 → 300x250 using PIL with high-quality Lanczos"""
    img = Image.open(src_path)
    resized = img.resize((300, 250), Image.LANCZOS)
    resized.save(dst_path, "PNG", optimize=True)
    print(f"  ✓ Resized: {dst_path.name} (300x250)")


async def main():
    print("\n=== Google Display Ad Generator: Angle C ===")
    print("Design: #17 숫자 뉴스플래시 (Breaking News Aesthetic)\n")

    OUTPUT_DIR.mkdir(parents=True, exist_ok=True)

    # 1. 1200x628 landscape
    print("[1/3] Generating 1200x628 landscape...")
    path_1200x628 = OUTPUT_DIR / "display-1200x628.png"
    await render_html(html_1200x628(), 1200, 628, path_1200x628)

    # 2. 1200x1200 square
    print("[2/3] Generating 1200x1200 square...")
    path_1200x1200 = OUTPUT_DIR / "display-1200x1200.png"
    await render_html(html_1200x1200(), 1200, 1200, path_1200x1200)

    # 3. 300x250: render at 600x500, then resize
    print("[3/3] Generating 300x250 (render at 600x500, then resize)...")
    path_600x500_tmp = OUTPUT_DIR / "_tmp_600x500.png"
    path_300x250 = OUTPUT_DIR / "display-300x250.png"
    await render_html(html_600x500(), 600, 500, path_600x500_tmp)
    resize_to_300x250(path_600x500_tmp, path_300x250)
    path_600x500_tmp.unlink(missing_ok=True)

    print("\n=== All ads generated successfully! ===")
    for f in sorted(OUTPUT_DIR.glob("display-*.png")):
        size_kb = f.stat().st_size // 1024
        print(f"  {f.name}: {size_kb}KB")
    print(f"\nOutput directory: {OUTPUT_DIR}")


if __name__ == "__main__":
    asyncio.run(main())
