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" # Using as layout/detail
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: {bg_color}; color: {text_color}; overflow: hidden; box-sizing: border-box; }}
.container {{ width: 2550px; height: 3300px; position: relative; display: flex; flex-direction: column; box-sizing: border-box; padding: 200px; }}

/* Typography */
.title {{ font-family: 'Pirulen', sans-serif; font-size: 160px; line-height: 1.1; text-transform: uppercase; letter-spacing: 4px; color: {accent_color}; margin-bottom: 40px; }}
.subtitle {{ font-family: 'Cormorant Garamond', serif; font-size: 80px; font-style: italic; color: {text_color}; margin-bottom: 80px; }}
.footer {{ font-family: 'Pirulen', sans-serif; font-size: 50px; text-align: center; margin-top: auto; letter-spacing: 8px; color: {text_color}; opacity: 0.8; }}

/* Front Specific */
.front-img-wrapper {{ width: 100%; height: 1800px; display: flex; justify-content: center; align-items: center; overflow: hidden; border: {border}; margin-bottom: 100px; }}
.front-img-wrapper img {{ width: 100%; height: 100%; object-fit: contain; }}

/* Back Specific */
.back-title {{ font-family: 'Pirulen', sans-serif; font-size: 100px; color: {accent_color}; margin-bottom: 60px; text-align: center; letter-spacing: 4px; }}
.layout-wrapper {{ width: 100%; height: 900px; display: flex; justify-content: center; align-items: center; margin-bottom: 80px; border: {border}; }}
.layout-wrapper img {{ width: 100%; height: 100%; object-fit: contain; }}

.specs-grid {{ display: grid; grid-template-columns: 1fr 1fr; gap: 60px; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 50px; letter-spacing: 2px; border-top: 2px solid {accent_color}; border-bottom: 2px solid {accent_color}; padding: 80px 0; margin-bottom: 80px; }}
.spec-item span {{ display: block; font-size: 35px; color: {accent_color}; font-weight: 600; text-transform: uppercase; margin-bottom: 15px; }}

.gallery {{ display: flex; gap: 40px; width: 100%; height: 600px; }}
.gallery img {{ width: 33.333%; height: 100%; object-fit: cover; border: {border}; }}

{custom_css}
</style>
</head>
<body>
{content}
</body>
</html>
"""

FRONT_CONTENT = """
<div class="container">
    <div class="title">{title}</div>
    <div class="subtitle">{subtitle}</div>
    <div class="front-img-wrapper">
        <img src="{img_src}" />
    </div>
    <div class="footer">FISHING RAPTOR • 350 SOLARIUM</div>
</div>
"""

BACK_CONTENT = """
<div class="container">
    <div class="back-title">ESPECIFICAÇÕES TÉCNICAS</div>
    <div class="layout-wrapper">
        <img src="{layout_src}" />
    </div>
    <div class="specs-grid">
        <div class="spec-item"><span>Comprimento Total</span>10,67 m</div>
        <div class="spec-item"><span>Boca (Largura)</span>3,05 m</div>
        <div class="spec-item"><span>Motorização Parelha</span>2x 250 a 400 HP</div>
        <div class="spec-item"><span>Ângulo V de Popa</span>24,5° Deadrise</div>
        <div class="spec-item"><span>Combustível / Água</span>650 L / 100 L</div>
        <div class="spec-item"><span>Capacidade</span>12 Dia / 2 Pernoite</div>
    </div>
    <div class="gallery">
        <img src="{gal1}" />
        <img src="{gal2}" />
        <img src="{gal3}" />
    </div>
</div>
"""

CONCEPTS = [
    {
        "name": "1_Swiss_Noir",
        "bg_color": "#0A0D12", "text_color": "#F5F5F0", "accent_color": "#C5A059",
        "border": "2px solid #C5A059", "title": "350 SOLARIUM", "subtitle": "Offshore Architecture & Supreme Comfort",
        "custom_css": ""
    },
    {
        "name": "2_Stealth",
        "bg_color": "#0F141C", "text_color": "#FFFFFF", "accent_color": "#00E5FF",
        "border": "none", "title": "SPEED. RANGE.<br>UNBREAKABLE.", "subtitle": "The Ultimate Deep-V Offshore Machine",
        "custom_css": ".front-img-wrapper { background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 70%); }"
    },
    {
        "name": "3_Riviera",
        "bg_color": "#FAF9F6", "text_color": "#111827", "accent_color": "#A38B53",
        "border": "none", "title": "THE SUPREME<br>DAY-BOAT", "subtitle": "Lounge, Sun & Sea in Perfect Harmony",
        "custom_css": ".container { background: linear-gradient(to bottom, #FAF9F6 0%, #E5E7EB 100%); }"
    },
    {
        "name": "4_Blueprint",
        "bg_color": "#1A1C23", "text_color": "#E2E8F0", "accent_color": "#FBBF24",
        "border": "2px dashed #475569", "title": "HULL SPECIFICATION", "subtitle": "Model: 350 Solarium • Engineering Draft",
        "custom_css": ".specs-grid { font-family: monospace; font-size: 45px; }"
    },
    {
        "name": "5_DualSoul",
        "bg_color": "#171717", "text_color": "#FAFAFA", "accent_color": "#EF4444",
        "border": "4px solid #333", "title": "DUAL SOUL", "subtitle": "Extreme Offshore meets Luxury Weekender",
        "custom_css": ".title { text-align: center; } .subtitle { text-align: center; }"
    }
]

async def render_all():
    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        page = await browser.new_page(viewport={"width": 2550, "height": 3300})
        
        for c in CONCEPTS:
            # Render Front
            front_html = HTML_BASE.format(
                font_b64=font_b64, bg_color=c["bg_color"], text_color=c["text_color"],
                accent_color=c["accent_color"], border=c["border"], custom_css=c["custom_css"],
                content=FRONT_CONTENT.format(title=c["title"], subtitle=c["subtitle"], img_src=b64_front)
            )
            await page.set_content(front_html, wait_until="networkidle")
            front_path = f"/root/services/pipodesign/output/fishing_350/derivatives/folders_letter/{c['name']}_Frente.jpg"
            await page.screenshot(path=front_path, type="jpeg", quality=95)
            print(f"Rendered: {front_path}")
            
            # Render Back
            back_html = HTML_BASE.format(
                font_b64=font_b64, bg_color=c["bg_color"], text_color=c["text_color"],
                accent_color=c["accent_color"], border=c["border"], custom_css=c["custom_css"],
                content=BACK_CONTENT.format(layout_src=b64_layout, gal1=b64_gal1, gal2=b64_gal2, gal3=b64_gal3)
            )
            await page.set_content(back_html, wait_until="networkidle")
            back_path = f"/root/services/pipodesign/output/fishing_350/derivatives/folders_letter/{c['name']}_Verso.jpg"
            await page.screenshot(path=back_path, type="jpeg", quality=95)
            print(f"Rendered: {back_path}")
            
        await browser.close()

asyncio.run(render_all())
