#!/usr/bin/env python3
"""Fix v5 - Corrigir SO o banner desktop (1290x500).

Problema: em v4, a foto tinha height=640 com bottom=-100, o que cortava
~140px da parte de cima (a cabeca).

Correcao: foto inteira dentro dos 500px de altura.
- height da foto = 460px (deixa 40px de margem total)
- top = 20px (margem acima da cabeca)
- Foto centralizada horizontalmente (translateX(-50%))

Nao mexe em hotmart_capa_v3.jpg nem checkout_1x1.jpg (aprovados).
"""
from playwright.sync_api import sync_playwright
from pathlib import Path
import base64

BASE = Path("/opt/mia/workspace/clientes/francisco_borrello")
BG = BASE / "_bg_cromoterapia.png"
FOTO = BASE / "_recortes" / "foto_oficial_cutout_mirror.png"

FONTS = Path("/home/mia/.fonts/px3lab")
BEBAS = FONTS / "BebasNeue-Regular.ttf"
INTER_BOLD = FONTS / "Inter-Bold.ttf"
INTER_REG = FONTS / "Inter-Regular.ttf"
INTER_SEMI = FONTS / "Inter-SemiBold.ttf"


def b64(p: Path) -> str:
    return base64.b64encode(p.read_bytes()).decode()


bg_b64 = b64(BG)
foto_b64 = b64(FOTO)
bebas_b64 = b64(BEBAS)
inter_bold_b64 = b64(INTER_BOLD)
inter_reg_b64 = b64(INTER_REG)
inter_semi_b64 = b64(INTER_SEMI)


COMMON_FONTS = f"""
@font-face {{ font-family: 'Bebas Neue'; src: url(data:font/ttf;base64,{bebas_b64}) format('truetype'); font-weight: 400; }}
@font-face {{ font-family: 'Inter'; src: url(data:font/ttf;base64,{inter_bold_b64}) format('truetype'); font-weight: 700; }}
@font-face {{ font-family: 'Inter'; src: url(data:font/ttf;base64,{inter_semi_b64}) format('truetype'); font-weight: 600; }}
@font-face {{ font-family: 'Inter'; src: url(data:font/ttf;base64,{inter_reg_b64}) format('truetype'); font-weight: 400; }}
"""


HTML_DESKTOP = f"""<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8">
<style>
{COMMON_FONTS}

* {{ box-sizing: border-box; margin: 0; padding: 0; }}
html, body {{ width: 1290px; height: 500px; overflow: hidden; }}
body {{
  position: relative;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(6,4,14,0.85) 0%, rgba(6,4,14,0.72) 40%, rgba(6,4,14,0.45) 60%, rgba(6,4,14,0.30) 80%, rgba(6,4,14,0.15) 100%),
    url(data:image/png;base64,{bg_b64}) center/cover no-repeat;
}}

.glow-violet {{
  position: absolute;
  top: 30px; left: 40px;
  width: 560px; height: 190px;
  background: radial-gradient(ellipse at center, rgba(168,148,245,0.42) 0%, rgba(168,148,245,0.16) 42%, transparent 72%);
  filter: blur(30px);
  pointer-events: none;
}}
.glow-gold {{
  position: absolute;
  top: 200px; left: 40px;
  width: 560px; height: 240px;
  background: radial-gradient(ellipse at center, rgba(226,174,90,0.36) 0%, rgba(226,174,90,0.13) 40%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}}
.halo-figure {{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 480px; height: 480px;
  background: radial-gradient(ellipse at center, rgba(226,174,90,0.28) 0%, rgba(168,148,245,0.15) 40%, transparent 68%);
  filter: blur(40px);
  pointer-events: none;
}}

.corner {{
  position: absolute; width: 38px; height: 38px;
  border-color: rgba(226,174,90,0.55);
  border-style: solid; border-width: 0;
}}
.corner.tl {{ top: 24px; left: 24px; border-top-width: 2px; border-left-width: 2px; }}
.corner.tr {{ top: 24px; right: 24px; border-top-width: 2px; border-right-width: 2px; }}
.corner.bl {{ bottom: 24px; left: 24px; border-bottom-width: 2px; border-left-width: 2px; }}
.corner.br {{ bottom: 24px; right: 24px; border-bottom-width: 2px; border-right-width: 2px; }}

/* Textos na metade esquerda */
.left {{
  position: absolute;
  top: 74px; left: 60px;
  display: flex; flex-direction: column;
  align-items: flex-start;
  max-width: 560px;
  z-index: 3;
}}

.tag {{
  border: 1px solid rgba(226,174,90,0.65);
  background: rgba(6,4,14,0.35);
  border-radius: 999px;
  padding: 6px 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 4px;
  color: #f4d9a4;
  text-transform: uppercase;
}}

.radi {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 82px;
  line-height: 0.9;
  letter-spacing: 3px;
  margin-top: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #d8c9ff 55%, #a894f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 40px rgba(168,148,245,0.4);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.65));
}}

.cromo {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 52px;
  line-height: 0.95;
  letter-spacing: 2px;
  margin-top: 14px;
  background: linear-gradient(180deg, #f6dfa8 0%, #e2ae5a 45%, #b6832f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(226,174,90,0.35);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.65));
}}
.luzes {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 46px;
  line-height: 0.95;
  letter-spacing: 2px;
  margin-top: 4px;
  background: linear-gradient(180deg, #f6dfa8 0%, #e2ae5a 45%, #b6832f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(226,174,90,0.35);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.65));
}}

/* Rodape com metodo e nome do prof */
.footer {{
  position: absolute;
  left: 60px; bottom: 40px;
  z-index: 4;
  display: flex; align-items: center; gap: 14px;
}}
.footer .metodo {{
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}}
.footer .sep {{
  width: 22px; height: 1px;
  background: rgba(226,174,90,0.7);
}}
.footer .prof-nome {{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 2.5px;
  color: #f4d9a4;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}}

/* FOTO CORRIGIDA:
   Foto original 740x1256 (ratio 0.589).
   Altura 460 -> largura ~271px. Cabe inteira dentro dos 500px.
   Margem: 20px acima da cabeca, 20px na base. */
.figure-wrap {{
  position: absolute;
  left: 50%; top: 20px;
  transform: translateX(-50%);
  height: 460px;
  z-index: 2;
}}
.figure-wrap img {{
  height: 460px;
  width: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.55)) drop-shadow(0 0 30px rgba(168,148,245,0.18));
}}
</style></head>
<body>
  <div class="glow-violet"></div>
  <div class="glow-gold"></div>
  <div class="halo-figure"></div>

  <div class="corner tl"></div>
  <div class="corner tr"></div>
  <div class="corner bl"></div>
  <div class="corner br"></div>

  <div class="figure-wrap">
    <img src="data:image/png;base64,{foto_b64}" alt="Prof. Francisco Borrello" />
  </div>

  <div class="left">
    <div class="tag">Acesso Oficial Hotmart</div>
    <div class="radi">RADIESTESIA</div>
    <div class="cromo">com Cromoterapia</div>
    <div class="luzes">das Luzes Angelicais</div>
  </div>

  <div class="footer">
    <span class="metodo">METODO EXCLUSIVO</span>
    <span class="sep"></span>
    <span class="prof-nome">PROF. FRANCISCO BORRELLO</span>
  </div>
</body></html>
"""


def render_html(html: str, out_png: Path, out_jpg: Path, w: int, h: int):
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page(viewport={"width": w, "height": h}, device_scale_factor=2)
        page.set_content(html, wait_until="networkidle")
        page.screenshot(path=str(out_png), clip={"x": 0, "y": 0, "width": w, "height": h})
        browser.close()

    from PIL import Image
    img = Image.open(out_png).convert("RGB")
    if img.size != (w, h):
        img = img.resize((w, h), Image.LANCZOS)
    img.save(out_jpg, "JPEG", quality=92, optimize=True)
    print(f"OK -> {out_jpg}  ({img.size[0]}x{img.size[1]})")


if __name__ == "__main__":
    render_html(
        HTML_DESKTOP,
        BASE / "checkout_desktop.png",
        BASE / "checkout_desktop.jpg",
        1290, 500,
    )
