#!/usr/bin/env python3
"""
小红书内页渲染 v6 — Playwright 透明渲染 + Pillow 叠底图 + Notion 式设计原则
用法：~/project/we-mp-rss-main/venv/bin/python3 scripts/render_xhs_v6.py
依赖：Playwright (chromium 已缓存), Pillow, poppler-utils
"""

import os, base64
from pathlib import Path
from datetime import datetime, timezone, timedelta

CST = timezone(timedelta(hours=8))
TODAY = datetime.now(CST)

BASE = Path(os.path.expanduser("~/project/brand"))
FONT_T = BASE / "YouSheBiaoTiHei-2.ttf"
FONT_B = Path("/usr/share/fonts/truetype/wqy/wqy-zenhei.ttc")
INNER_BG = BASE / "内页.png"
COVER_BG = BASE / "小红书封面.jpeg"
OUT = Path(os.path.expanduser(f"~/.hermes/articles/{TODAY.strftime('%Y-%m-%d')}/选题1-最终版"))

def fb64(p):
    with open(p, "rb") as f:
        return base64.b64encode(f.read()).decode()

TB64 = fb64(FONT_T)
BB64 = fb64(FONT_B)

DARK = "#285A37"
ORANGE = "#E67E22"
TEXT_COLOR = "#1E3C28"
TINT = "#DCEEE2"
TINT_O = "#FCEBD7"
MID = "#649B73"
WHITE = "#FFFFFF"

def build_html(pages):
    """pages: list of {title, blocks_html}"""
    all_html = ""
    for i, pg in enumerate(pages, 1):
        pn = f'<div class="pn">{i}/{len(pages)}</div>'
        all_html += f'''<div class="page">
            <div class="brand">广东高职高考信息网</div>{pn}
            <div class="title-area"><div class="title-text">{pg["title"]}</div><div class="title-line"></div></div>
            <div class="content">{pg["blocks"]}</div>
            <div class="footer">广东高职高考信息网 | {TODAY.strftime('%Y.%m.%d')}</div>
        </div>'''
    
    return f"""<!DOCTYPE html>
<html><head><meta charset="utf-8"><style>
@font-face {{ font-family: 'TF'; src: url(data:font/ttf;base64,{TB64}) format('truetype'); }}
@font-face {{ font-family: 'BF'; src: url(data:font/ttf;base64,{BB64}) format('truetype'); }}
* {{ margin: 0; padding: 0; box-sizing: border-box; }}
body {{ width: {len(pages)*1242}px; height: 1660px; font-family: 'BF', sans-serif; color: {TEXT_COLOR}; display: flex; }}
.page {{ width: 1242px; height: 1660px; background: transparent; position: relative; overflow: hidden; flex-shrink: 0; }}
.brand {{ height: 72px; background: {DARK}; color: {WHITE}; font-size: 24px; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; }}
.pn {{ position: absolute; top: 82px; right: 90px; font-size: 22px; color: {MID}; }}
.title-area {{ padding: 56px 90px 0; text-align: center; }}
.title-text {{ font-family: 'TF', 'BF', sans-serif; font-size: 52px; color: {DARK}; line-height: 1.3; letter-spacing: -0.5px; }}
.title-line {{ margin: 20px 0 0; height: 2px; background: {DARK}; position: relative; }}
.title-line::before {{ content: ''; position: absolute; left: 20px; top: -4px; width: 12px; height: 12px; background: {ORANGE}; border-radius: 50%; }}
.content {{ padding: 42px 90px 0; }}
.footer {{ position: absolute; bottom: 0; left: 0; right: 0; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: {MID}; }}
</style></head><body>{all_html}</body></html>"""

def render():
    from playwright.sync_api import sync_playwright
    from PIL import Image
    
    OUT.mkdir(parents=True, exist_ok=True)
    
    # Define pages (extracted from the template for clarity)
    pages_data = [
        # Page 1: Hero stat
        {"title": "计算机证有多重要？", "blocks": f'''
            <div class="hero-stat"><div class="hero-num">91<span class="hero-unit">%</span></div>
            <div class="hero-label">的3+证书招生计划接受<br>全国计算机等级证书</div></div>
            <div class="stat-row">
                <div class="stat-item"><div class="stat-value">7,409</div><div class="stat-desc">条计划「不限证书种类」<br>有证就能报</div></div>
                <div class="stat-divider"></div>
                <div class="stat-item"><div class="stat-value">231<span class="stat-sm">分</span></div><div class="stat-desc">中位录取分数<br>一半专业 ≤231 分</div></div>
                <div class="stat-divider"></div>
                <div class="stat-item"><div class="stat-value">509</div><div class="stat-desc">个可报专业<br>覆盖所有大类</div></div>
            </div>
            <div class="insight"><span class="insight-dot">●</span>全国计算机等级证书是3+证书最通用的证书。<b>一张证打通几乎所有专业</b>，你不需要纠结「这个证能不能报那个学校」。</div>
        '''},
        # Page 2: Three choices
        {"title": "三个科目，报哪个？", "blocks": f'''
            <div class="choice-grid">
                <div class="choice-card"><div class="choice-num">①</div><div class="choice-title">MS Office</div><div class="choice-desc">最实用，备考资料最多<br>通过率最高</div></div>
                <div class="choice-card"><div class="choice-num">②</div><div class="choice-title">WPS Office</div><div class="choice-desc">国产软件，内容更少<br>上手更快</div></div>
                <div class="choice-card"><div class="choice-num">③</div><div class="choice-title">Photoshop</div><div class="choice-desc">有设计基础可选<br>备考难度较大</div></div>
            </div>
            <div class="insight"><span class="insight-dot">●</span>三个科目<b>报考效力完全相同</b>。建议选 MS 或 WPS —— 最实用、最容易过。别纠结，选最简单的那个。</div>
        '''},
        # Page 3: Score bar
        {"title": "拿到证，能报什么分数段？", "blocks": f'''
            <div class="score-bar-wrap">
                <div class="score-labels"><span>149分</span><span>176分</span><span>231分</span><span>278分</span><span>335分</span></div>
                <div class="score-bar"><div class="score-seg" style="flex:1.49"></div><div class="score-seg active" style="flex:0.27"></div><div class="score-seg mid" style="flex:0.55"></div><div class="score-seg" style="flex:0.47"></div><div class="score-seg" style="flex:0.57"></div></div>
                <div class="score-annotations">
                    <div style="flex:1.49"><span class="ann-num">10%</span><br>专业</div>
                    <div style="flex:0.27"><span class="ann-num">15%</span><br>专业</div>
                    <div style="flex:0.55;color:{ORANGE}"><span class="ann-num">25%</span><br>专业</div>
                    <div style="flex:0.47"><span class="ann-num">25%</span><br>专业</div>
                    <div style="flex:0.57"><span class="ann-num">25%</span><br>专业</div>
                </div>
            </div>
            <div class="insight"><span class="insight-dot">●</span>估分 <b>176-231</b> 之间？你有一半的专业可选。<b>现在拿到证书 + 出分后精准填报</b>，不浪费任何一分。</div>
        '''},
        # Page 4: Urgent action
        {"title": "现在立刻要做 3 件事", "blocks": f'''
            <div class="urgent-tag">⚠️ 报名进行中 · 6月25日–7月3日 · 今年最后一次</div>
            <div class="action-list">
                <div class="action-item"><div class="action-num">1</div><div class="action-content"><div class="action-title">去官网报名</div><div class="action-desc">ncre-bm.neea.cn · 选一级 MS 或 WPS</div></div></div>
                <div class="action-item"><div class="action-num">2</div><div class="action-content"><div class="action-title">确认考点和时间</div><div class="action-desc">9月考试 · 选离家近的考点 · 提前踩点</div></div></div>
                <div class="action-item"><div class="action-num">3</div><div class="action-content"><div class="action-title">开始刷题备考</div><div class="action-desc">选择题 + 操作题 · 重点练 Word / Excel / PPT</div></div></div>
            </div>
            <div class="urgent-box">⏰ 今年最后一次计算机等级考试！<br>错过这次，明年3月志愿填报前拿不到证书，<b>91% 的专业直接与你无关</b>。</div>
        '''},
    ]
    
    html = build_html(pages_data)
    html_path = "/tmp/v6_pages.html"
    with open(html_path, "w", encoding="utf-8") as f:
        f.write(html)
    
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=True)
        page = browser.new_page(viewport={"width": len(pages_data)*1242, "height": 1660})
        page.goto(f"file://{html_path}")
        page.screenshot(path="/tmp/v6_full.png")
        browser.close()
    
    full = Image.open("/tmp/v6_full.png").convert("RGBA")
    base = Image.open(INNER_BG).convert("RGBA")
    
    for i in range(len(pages_data)):
        x = i * 1242
        content = full.crop((x, 0, x + 1242, 1660))
        result = Image.alpha_composite(base.copy(), content).convert("RGB")
        fp = OUT / f"inner-{i+1:02d}.png"
        result.save(str(fp), "PNG", quality=90)
        print(f"📄 内页{i+1}/{len(pages_data)}: {fp.stat().st_size//1024}KB")
    
    print(f"\\n✅ 完成: {OUT}/")

if __name__ == "__main__":
    render()
