import os, asyncio, base64
from playwright.async_api import async_playwright

# Paths
IMG_FRONT = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409258728-rfd2pbws8ui.webp"
IMG_LAYOUT = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409477978-m9uypnh91rb.webp"
IMG_GAL1 = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409330764-hw0pcmhz6zu.webp"
IMG_GAL2 = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409350332-eeohcflgxcu.webp"
IMG_GAL3 = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409418708-eex35u1fwt9.webp"

def get_b64(path):
    with open(path, "rb") as f:
        return "data:image/webp;base64," + base64.b64encode(f.read()).decode()

b64_front = get_b64(IMG_FRONT)
b64_layout = get_b64(IMG_LAYOUT)
b64_gal1 = get_b64(IMG_GAL1)
b64_gal2 = get_b64(IMG_GAL2)
b64_gal3 = get_b64(IMG_GAL3)

with open("/root/.hermes/fonts/Pirulen-Regular.otf", "rb") as f:
    font_b64 = base64.b64encode(f.read()).decode()

HTML_BASE = """
<!DOCTYPE html>
<html>
<head>
<style>
@font-face {{
    font-family: 'Pirulen';
    src: url(data:font/opentype;base64,{font_b64}) format('opentype');
}}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Montserrat:wght@200;300;400;600&display=swap');

body, html {{ margin: 0; padding: 0; width: 2550px; height: 3300px; background: #0A0D12; color: #F5F5F0; overflow: hidden; box-sizing: border-box; }}
</style>
</head>
<body>
{content}
</body>
</html>
"""

FRONT_CONTENT = f"""
<div style="padding: 200px; height: 3300px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between;">
    <div style="border-bottom: 3px solid #C5A059; padding-bottom: 60px;">
        <h1 style="font-family: 'Pirulen'; font-size: 200px; color: #F5F5F0; margin: 0; letter-spacing: 15px; line-height: 1;">FISHING</h1>
        <h2 style="font-family: 'Pirulen'; font-size: 110px; color: #C5A059; margin: 20px 0 0 0; letter-spacing: 10px;">350 SOLARIUM</h2>
    </div>
    <div style="flex-grow: 1; display: flex; align-items: center; justify-content: center; margin: 100px 0;">
        <img src="{b64_front}" style="max-width: 100%; max-height: 1800px; object-fit: contain;" />
    </div>
    <div style="border-top: 1px solid #333; padding-top: 60px; display: flex; justify-content: space-between; font-family: 'Montserrat'; color: #888; font-size: 45px; letter-spacing: 8px; text-transform: uppercase; font-weight: 300;">
        <span>Offshore Architecture</span>
        <span>Supreme Comfort</span>
    </div>
</div>
"""

BACK_CONTENT = f"""
<div style="padding: 200px; height: 3300px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1fr; gap: 120px;">
    <!-- Left Column: Specs & Layout -->
    <div style="display: flex; flex-direction: column;">
        <h2 style="font-family: 'Pirulen'; font-size: 90px; color: #C5A059; margin-top: 0; margin-bottom: 100px; letter-spacing: 6px; border-bottom: 3px solid #C5A059; padding-bottom: 50px; line-height: 1.2;">TECHNICAL<br>SPECIFICATIONS</h2>
        
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 70px; font-family: 'Montserrat'; font-size: 45px; color: #F5F5F0; margin-bottom: 120px; font-weight: 300;">
            <div><span style="color: #C5A059; font-size: 30px; display: block; margin-bottom: 15px; font-weight: 600; letter-spacing: 3px;">COMPRIMENTO</span>10,67 m</div>
            <div><span style="color: #C5A059; font-size: 30px; display: block; margin-bottom: 15px; font-weight: 600; letter-spacing: 3px;">BOCA</span>3,05 m</div>
            <div><span style="color: #C5A059; font-size: 30px; display: block; margin-bottom: 15px; font-weight: 600; letter-spacing: 3px;">MOTORIZAÇÃO</span>2x 250-400 HP</div>
            <div><span style="color: #C5A059; font-size: 30px; display: block; margin-bottom: 15px; font-weight: 600; letter-spacing: 3px;">ÂNGULO V</span>24,5° Deadrise</div>
            <div><span style="color: #C5A059; font-size: 30px; display: block; margin-bottom: 15px; font-weight: 600; letter-spacing: 3px;">COMBUSTÍVEL</span>650 L</div>
            <div><span style="color: #C5A059; font-size: 30px; display: block; margin-bottom: 15px; font-weight: 600; letter-spacing: 3px;">ÁGUA</span>100 L</div>
            <div style="grid-column: span 2; border-top: 1px solid #333; padding-top: 40px;"><span style="color: #C5A059; font-size: 30px; display: block; margin-bottom: 15px; font-weight: 600; letter-spacing: 3px;">CAPACIDADE</span>12 Dia / 2 Pernoite</div>
        </div>

        <div style="flex-grow: 1; border: 1px solid #222; padding: 60px; display: flex; align-items: center; justify-content: center; background: #0D1117;">
            <img src="{b64_layout}" style="max-width: 100%; max-height: 100%; object-fit: contain; filter: sepia(1) hue-rotate(10deg) saturate(1.5) brightness(0.9);" />
        </div>
    </div>

    <!-- Right Column: Gallery -->
    <div style="display: flex; flex-direction: column; gap: 60px; height: 100%;">
        <div style="flex: 1; border: 3px solid #C5A059; overflow: hidden;"><img src="{b64_gal1}" style="width: 100%; height: 100%; object-fit: cover;" /></div>
        <div style="flex: 1; border: 3px solid #C5A059; overflow: hidden;"><img src="{b64_gal2}" style="width: 100%; height: 100%; object-fit: cover;" /></div>
        <div style="flex: 1; border: 3px solid #C5A059; overflow: hidden;"><img src="{b64_gal3}" style="width: 100%; height: 100%; object-fit: cover;" /></div>
    </div>
</div>
"""

async def render_master():
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page(viewport={"width": 2550, "height": 3300})
        
        # Render Front
        front_html = HTML_BASE.format(font_b64=font_b64, content=FRONT_CONTENT)
        await page.set_content(front_html, wait_until="networkidle")
        front_path = "/root/services/pipodesign/output/fishing_350/derivatives/folders_letter/Master_Frente.jpg"
        await page.screenshot(path=front_path, type="jpeg", quality=100)
        print(f"Rendered: {front_path}")
        
        # Render Back
        back_html = HTML_BASE.format(font_b64=font_b64, content=BACK_CONTENT)
        await page.set_content(back_html, wait_until="networkidle")
        back_path = "/root/services/pipodesign/output/fishing_350/derivatives/folders_letter/Master_Verso.jpg"
        await page.screenshot(path=back_path, type="jpeg", quality=100)
        print(f"Rendered: {back_path}")
        
        await browser.close()

asyncio.run(render_master())
