#!/usr/bin/env python3
"""Renderiza a capa YouTube 1280x720 via HTML+CSS+Playwright.
Compoe background (GPT Image) + foto Borrello tratada + tipografia + Bagua SVG.
v2 - ajustes de posicionamento e foto trocada pra _MG_9314.
"""
from playwright.sync_api import sync_playwright
import base64, os

BG_PATH = "/opt/mia/workspace/clientes/francisco_borrello/live-02-06/visuais/temp/bg_capa_yt.png"
FOTO_PATH = "/opt/mia/workspace/clientes/francisco_borrello/live-02-06/visuais/temp/borrello_capa.png"
DESTINO = "/opt/mia/workspace/clientes/francisco_borrello/live-02-06/visuais/output/01-capa-youtube.png"

def img_to_data_uri(path):
    with open(path, "rb") as f:
        b64 = base64.b64encode(f.read()).decode()
    ext = path.split(".")[-1].lower()
    mime = "png" if ext == "png" else "jpeg"
    return f"data:image/{mime};base64,{b64}"

bg_uri = img_to_data_uri(BG_PATH)
foto_uri = img_to_data_uri(FOTO_PATH)

# SVG do Bagua geometrico minimalista
BAGUA_SVG = """
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" class="bagua-svg">
  <defs>
    <radialGradient id="halo" cx="50%" cy="50%" r="50%">
      <stop offset="0%" stop-color="#E6B324" stop-opacity="0.32"/>
      <stop offset="55%" stop-color="#E6B324" stop-opacity="0.12"/>
      <stop offset="100%" stop-color="#E6B324" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <circle cx="200" cy="200" r="200" fill="url(#halo)"/>
  <polygon points="200,30 320,80 370,200 320,320 200,370 80,320 30,200 80,80"
           fill="none" stroke="#E6B324" stroke-width="1.8" stroke-opacity="0.90"/>
  <polygon points="200,90 270,118 298,200 270,282 200,310 130,282 102,200 130,118"
           fill="none" stroke="#E6B324" stroke-width="1" stroke-opacity="0.38"/>
  <g stroke="#E6B324" stroke-width="1.2" stroke-opacity="0.55">
    <line x1="200" y1="200" x2="200" y2="50"/>
    <line x1="200" y1="200" x2="306" y2="94"/>
    <line x1="200" y1="200" x2="350" y2="200"/>
    <line x1="200" y1="200" x2="306" y2="306"/>
    <line x1="200" y1="200" x2="200" y2="350"/>
    <line x1="200" y1="200" x2="94" y2="306"/>
    <line x1="200" y1="200" x2="50" y2="200"/>
    <line x1="200" y1="200" x2="94" y2="94"/>
  </g>
  <g fill="#E6B324">
    <circle cx="200" cy="30" r="5"/>
    <circle cx="320" cy="80" r="5"/>
    <circle cx="370" cy="200" r="5"/>
    <circle cx="320" cy="320" r="5"/>
    <circle cx="200" cy="370" r="5"/>
    <circle cx="80" cy="320" r="5"/>
    <circle cx="30" cy="200" r="5"/>
    <circle cx="80" cy="80" r="5"/>
  </g>
  <circle cx="200" cy="200" r="4" fill="#E6B324"/>
  <circle cx="200" cy="200" r="12" fill="none" stroke="#E6B324" stroke-width="0.8" stroke-opacity="0.5"/>
</svg>
"""

PARTICLES = """
<div class="particle" style="top: 22%; right: 8%; width: 6px; height: 6px;"></div>
<div class="particle" style="top: 14%; right: 32%; width: 5px; height: 5px;"></div>
<div class="particle" style="top: 68%; right: 14%; width: 8px; height: 8px;"></div>
<div class="particle" style="top: 52%; right: 40%; width: 4px; height: 4px;"></div>
<div class="particle" style="top: 78%; right: 32%; width: 5px; height: 5px;"></div>
"""

HTML = f"""<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<style>
* {{ box-sizing: border-box; margin: 0; padding: 0; }}
html, body {{ width: 1280px; height: 720px; overflow: hidden; }}
body {{
  font-family: 'Montserrat', sans-serif;
  background: #1A1A2E;
  position: relative;
  color: #fff;
}}

.bg-image {{
  position: absolute; inset: 0;
  background-image: url('{bg_uri}');
  background-size: cover;
  background-position: center;
  z-index: 1;
}}

.grid-overlay {{
  position: absolute; inset: 0; z-index: 2;
  background-image:
    linear-gradient(rgba(230,179,36,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,179,36,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}}

.dark-overlay {{
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(26,26,46,0.55) 100%),
    linear-gradient(180deg, rgba(26,26,46,0.0) 50%, rgba(26,26,46,0.65) 100%);
  pointer-events: none;
}}

.bar-top {{
  position: absolute; top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #E6B324, #FFBC7D, #E6B324);
  z-index: 30;
}}

/* Tag superior esquerda - AULA AO VIVO. Posicionada acima da foto, fora do gradient escuro */
.tag-top {{
  position: absolute;
  top: 32px; left: 50px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 5px;
  color: #E6B324;
  text-transform: uppercase;
  z-index: 25;
  display: flex; align-items: center; gap: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}}
.tag-top .dot {{
  display: inline-block;
  width: 10px; height: 10px; border-radius: 50%;
  background: #E6B324;
  box-shadow: 0 0 10px #E6B324, 0 0 20px rgba(230,179,36,0.6);
}}

/* Foto do Borrello a esquerda */
.foto-borrello {{
  position: absolute;
  left: 0; bottom: 0; top: 0;
  width: 500px;
  z-index: 5;
  overflow: hidden;
}}
.foto-borrello img {{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  object-fit: cover;
}}

/* Bagua + particles container - lado direito */
.bagua-container {{
  position: absolute;
  top: 50%;
  right: 80px;
  transform: translateY(-50%);
  width: 380px; height: 380px;
  z-index: 6;
}}
.bagua-svg {{
  width: 100%; height: 100%;
  filter: drop-shadow(0 0 24px rgba(230,179,36,0.30));
}}
.particle {{
  position: absolute;
  background: #E6B324;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(230,179,36,0.85), 0 0 24px rgba(230,179,36,0.45);
}}

/* Headline central inferior */
.headline {{
  position: absolute;
  left: 420px;
  right: 360px;
  bottom: 150px;
  text-align: center;
  z-index: 15;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 76px;
  line-height: 1.02;
  color: #fff;
  letter-spacing: -0.5px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.9), 0 2px 8px rgba(0,0,0,0.7);
}}
.headline .gold {{ color: #E6B324; }}

/* Subheadline (promessa) */
.subheadline {{
  position: absolute;
  left: 420px;
  right: 360px;
  bottom: 92px;
  text-align: center;
  z-index: 15;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 3.5px;
  color: #E6B324;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}}

/* Detalhe inferior direito (data + nome) */
.bottom-right {{
  position: absolute;
  right: 45px;
  bottom: 30px;
  text-align: right;
  z-index: 20;
}}
.bottom-right .data {{
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #FFFFFF;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}}
.bottom-right .nome {{
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  margin-top: 4px;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
}}
.bottom-right .nome b {{ font-weight: 700; color: #E6B324; }}

/* Divisor dourado abaixo da headline */
.divisor {{
  position: absolute;
  bottom: 124px;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 30px;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, #E6B324, transparent);
  z-index: 14;
}}

</style>
</head>
<body>
  <div class="bg-image"></div>
  <div class="grid-overlay"></div>
  <div class="dark-overlay"></div>
  <div class="bar-top"></div>

  <div class="tag-top">
    <span class="dot"></span>
    <span>AULA AO VIVO</span>
  </div>

  <div class="foto-borrello">
    <img src="{foto_uri}" alt="Francisco Borrello">
  </div>

  <div class="bagua-container">
    {BAGUA_SVG}
    {PARTICLES}
  </div>

  <div class="headline">
    A direção que<br>
    <span class="gold">te levanta</span>
  </div>

  <div class="divisor"></div>

  <div class="subheadline">Pode ser você a escolhida ao vivo</div>

  <div class="bottom-right">
    <div class="data">TER 02/06 · 19H</div>
    <div class="nome">prof. Francisco <b>Borrello</b></div>
  </div>
</body>
</html>"""

with open("/opt/mia/workspace/clientes/francisco_borrello/live-02-06/visuais/temp/capa_yt.html", "w") as f:
    f.write(HTML)

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1280, "height": 720}, device_scale_factor=1)
    page.set_content(HTML, wait_until="networkidle")
    page.wait_for_timeout(1500)
    page.screenshot(path=DESTINO, clip={"x": 0, "y": 0, "width": 1280, "height": 720}, omit_background=False)
    browser.close()

print(f"OK: {DESTINO}")
print(f"Tamanho: {os.path.getsize(DESTINO)/1024:.1f} KB")
