from pathlib import Path
import subprocess, textwrap
ROOT=Path('/mnt/data/next_rc99_impl/next_rc99_work')
OUT=ROOT/'qa_screenshots'
OUT.mkdir(exist_ok=True)
# asset URIs
hockey=(ROOT/'assets/img/exercises/enbensrodd/hockey.webp').as_uri()
downhill=(ROOT/'assets/img/exercises/enbensrodd/downhill.webp').as_uri()
box=(ROOT/'assets/img/exercises/rc99/generated_png/box-jumps.png').as_uri()
plank=(ROOT/'assets/img/exercises/rc99/generated_png/plank.png').as_uri()
bg=(ROOT/'assets/img/exercise-backgrounds/v98/neutral-soft.svg').as_uri()
hockeybg=(ROOT/'assets/img/exercise-backgrounds/v98/hockey-window-rink.svg').as_uri()
downhillbg=(ROOT/'assets/img/exercise-backgrounds/v98/downhill-alpine-terrace.svg').as_uri()

def html_doc(w,h,label):
    mobile=w<500
    detail_grid='1fr' if mobile else '390px 1fr'
    thumb='70px' if mobile else '96px'
    fs='13px' if mobile else '15px'
    ptext='' if mobile else 'Alla masterövningar har nu bildkoppling. Premium-piloten ligger kvar på Enbensrodd; resten har genererade foregrounds som kan bytas per övning senare.'
    return f'''<!doctype html><html><head><meta charset="utf-8"><style>
    @page {{ size:{w}px {h}px; margin:0; }} *{{box-sizing:border-box}} body{{margin:0;font-family:Inter,Arial,sans-serif;background:#07101d;color:#eaf6ff;font-size:{fs}}}
    .app{{width:{w}px;min-height:{h}px;padding:{18 if mobile else 28}px;background:radial-gradient(circle at 8% 0%,#16365b 0%,#0a1525 42%,#050914 100%);}}
    .top{{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:14px}} .kicker{{color:#38bdf8;font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:11px}} h1{{margin:4px 0 6px;font-size:{26 if mobile else 42}px;line-height:1.02}} p{{margin:0;color:#b7cae0;line-height:1.35}} .btn{{background:#123152;border:1px solid #315275;border-radius:14px;padding:10px 12px;font-weight:800;white-space:nowrap}}
    .stats{{display:grid;grid-template-columns:repeat({2 if mobile else 5},1fr);gap:10px;margin:12px 0 16px}} .stat{{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px}} .stat b{{display:block;font-size:{24 if mobile else 30}px}} .stat span{{font-size:12px;color:#aac4dd}}
    .controls{{display:grid;grid-template-columns:{'1fr' if mobile else '1.5fr 1fr 1fr'};gap:10px;background:rgba(255,255,255,.07);padding:12px;border-radius:18px;border:1px solid rgba(255,255,255,.11);margin-bottom:12px}} .input{{background:#07101d;border:1px solid #263d56;border-radius:12px;padding:11px;color:#cfe5ff}}
    .row{{display:grid;grid-template-columns:{thumb} 1fr auto;gap:12px;align-items:center;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:11px;margin-bottom:10px}} .row.active{{outline:2px solid #38bdf8;background:rgba(30,105,160,.22)}} .thumb{{height:{thumb};border-radius:14px;overflow:hidden;background:#eaf5ff;display:flex;align-items:center;justify-content:center}} .thumb img{{width:100%;height:100%;object-fit:cover}} .thumb .layer{{height:100%;width:100%;border-radius:14px}}.thumb .layer img{{width:100%;height:100%;object-fit:contain}} .title{{display:flex;gap:8px;align-items:center;flex-wrap:wrap}} .title b{{font-size:{15 if mobile else 18}px}} .status,.chip{{display:inline-flex;background:#0f2d4b;border:1px solid #2c5b8a;border-radius:999px;padding:5px 8px;font-size:11px;color:#d8efff;font-weight:800}} .chips{{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}} .chip.gold{{background:#3a2a0c;border-color:#bd7d18;color:#ffe8b5}} .chip.green{{background:#0d3728;border-color:#1d8d61;color:#c5ffe7}}
    .detail{{display:grid;grid-template-columns:{detail_grid};gap:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:14px;margin:0 0 12px}} .video{{height:{190 if mobile else 250}px;border-radius:18px;overflow:hidden;background:#04101d;position:relative}} .video img{{width:100%;height:100%;object-fit:cover}} .play{{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.84);clip-path:polygon(35% 24%,35% 76%,78% 50%)}}
    .illustration{{border-radius:18px;overflow:hidden;background:#eaf5ff;border:1px solid rgba(255,255,255,.18);margin-top:10px}} .illustration img{{display:block;width:100%;height:auto}} .layer{{height:{160 if mobile else 225}px;background-image:linear-gradient(rgba(245,250,255,.72),rgba(245,250,255,.72)),url({bg});background-size:cover;border-radius:18px;display:flex;align-items:center;justify-content:center;overflow:hidden}} .layer.hockey{{background-image:linear-gradient(rgba(245,250,255,.62),rgba(245,250,255,.62)),url({hockeybg})}} .layer.downhill{{background-image:linear-gradient(rgba(245,250,255,.62),rgba(245,250,255,.62)),url({downhillbg})}} .layer img{{width:88%;height:88%;object-fit:contain}} .illmeta{{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;background:#091827;color:#e9f6ff}} .pill{{display:inline-flex;padding:5px 8px;border-radius:999px;background:#0f2d4b;border:1px solid #315c83;margin-left:4px;font-size:11px}} .pill.active{{background:#1780c8}}
    .backup{{background:rgba(20,120,210,.14);border:1px solid rgba(56,189,248,.32);border-radius:18px;padding:12px;margin-top:10px}} .progress{{height:7px;background:#0c2037;border-radius:999px;overflow:hidden;margin-top:8px}} .bar{{height:100%;width:0%;background:#38bdf8}} .facts{{display:grid;grid-template-columns:{'1fr' if mobile else '1fr 1fr'};gap:8px;margin-top:10px}} .fact{{background:rgba(255,255,255,.07);border-radius:14px;padding:9px}} .fact b{{display:block;color:#9edbff;font-size:11px;text-transform:uppercase;letter-spacing:.06em}}
    </style></head><body><main class="app"><div class="top"><div><div class="kicker">RC99 · Övningsbibliotek</div><h1>Alla övningar har bildkoppling</h1><p>{ptext}</p></div><div class="btn">← Dashboard</div></div>
    <div class="stats"><div class="stat"><b>172</b><span>Masterövningar</span></div><div class="stat"><b>172</b><span>Illustrationer</span></div><div class="stat"><b>171</b><span>Generated fallback</span></div><div class="stat"><b>1</b><span>Premium pilot</span></div><div class="stat"><b>RC99</b><span>{label}</span></div></div>
    <div class="controls"><div class="input">Sök övning…</div><div class="input">Alla kategorier</div><div class="input">Alla videostatusar</div></div>
    <article class="row active"><div class="thumb"><img src="{hockey}"></div><div><div class="title"><b>Enbensrodd med hantel</b><span class="status">OTA inbäddning</span></div><p>Premiumbild: temaassets + inline info där man klickar.</p><div class="chips"><span class="chip">Styrka</span><span class="chip gold">Premium pilot</span><span class="chip green">Instruktionsbild</span></div></div><div class="btn">Visar</div></article>
    <section class="detail"><div><div class="video"><img src="{downhill}"><div class="play"></div></div><div class="backup"><b>Server backup saknas</b><p>Lägg till server backup direkt i detaljen. Film visas här – inte som länk längst upp.</p><div class="progress"><div class="bar"></div></div></div></div><div><h2 style="margin:0 0 6px">Enbensrodd med hantel</h2><p>Premium-piloten används för att låsa slutstilen. Samma exerciseKey får alla passkopplingar.</p><div class="illustration"><img src="{hockey}"><div class="illmeta"><b>Instruktionsbild</b><span><span class="pill">Neutral</span><span class="pill active">Hockey</span><span class="pill">Downhill alpint</span></span></div></div><div class="facts"><div class="fact"><b>Exercise ID</b>single-arm-row</div><div class="fact"><b>Assetmodell</b>assets/img + manifestlänk</div></div></div></section>
    <article class="row"><div class="thumb"><div class="layer"><img src="{box}"></div></div><div><div class="title"><b>Box Jumps</b><span class="status">OTA inbäddning</span></div><p>Generated foreground som kan bytas till premium senare utan att ändra passdata.</p><div class="chips"><span class="chip">Hopp/spänst</span><span class="chip green">Instruktionsbild</span></div></div><div class="btn">Visa</div></article>
    <article class="row"><div class="thumb"><div class="layer downhill"><img src="{plank}"></div></div><div><div class="title"><b>Plank</b><span class="status">OTA inbäddning</span></div><p>Alla övningar får bild direkt i biblioteket; tema kan bytas globalt.</p><div class="chips"><span class="chip">Bål</span><span class="chip green">Instruktionsbild</span></div></div><div class="btn">Visa</div></article>
    </main></body></html>'''

def render(w,h,label):
    html=OUT/f'rc99_library_all_illustrations_{label}_{w}x{h}.html'
    pdf=OUT/f'rc99_library_all_illustrations_{label}_{w}x{h}.pdf'
    pngbase=OUT/f'rc99_library_all_illustrations_{label}_{w}x{h}'
    html.write_text(html_doc(w,h,label))
    subprocess.run(['weasyprint',str(html),str(pdf)],check=True)
    subprocess.run(['pdftoppm','-png','-singlefile','-r','96',str(pdf),str(pngbase)],check=True)
for w,h,label in [(390,844,'mobile'),(820,1180,'ipad'),(1440,1024,'desktop')]:
    render(w,h,label)
print('done')
