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

# Paths to images
IMG_1 = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409258728-rfd2pbws8ui.webp"
IMG_2 = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409418708-eex35u1fwt9.webp"
IMG_3 = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409330764-hw0pcmhz6zu.webp"
IMG_4 = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409452298-28q80zv9p37.webp"
IMG_5 = "/root/.hermes/cache/boat_scrapes/fishing/models_350-solarium_gallery_1773409350332-eeohcflgxcu.webp"

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

b64_1 = get_b64(IMG_1)
b64_2 = get_b64(IMG_2)
b64_3 = get_b64(IMG_3)
b64_4 = get_b64(IMG_4)
b64_5 = get_b64(IMG_5)

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

HTML_TEMPLATE = """
<!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: 1080px; height: 1920px; background: {bg_color}; color: {text_color}; overflow: hidden; }}
.container {{ width: 1080px; height: 1920px; position: relative; display: flex; flex-direction: column; box-sizing: border-box; padding: {padding}; }}

/* Image Container with object-fit contain to preserve 100% of the boat */
.image-wrapper {{
    width: 100%;
    height: {img_height};
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: {border};
}}
.image-wrapper img {{
    width: 100%;
    height: 100%;
    object-fit: contain;
}}

/* Typography */
.title {{ font-family: 'Pirulen', sans-serif; font-size: {title_size}; line-height: 1.1; text-transform: uppercase; letter-spacing: 2px; color: {accent_color}; margin-bottom: 20px; }}
.subtitle {{ font-family: 'Cormorant Garamond', serif; font-size: 42px; font-style: italic; color: {text_color}; margin-bottom: 40px; }}
.specs-grid {{ display: grid; grid-template-columns: 1fr 1fr; gap: 30px; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 24px; letter-spacing: 1px; margin-top: auto; border-top: 1px solid {accent_color}; padding-top: 40px; }}
.spec-item span {{ display: block; font-size: 16px; color: {accent_color}; font-weight: 600; text-transform: uppercase; margin-bottom: 5px; }}
.footer {{ font-family: 'Pirulen', sans-serif; font-size: 24px; text-align: center; margin-top: 60px; letter-spacing: 4px; color: {text_color}; opacity: 0.8; }}

{custom_css}
</style>
</head>
<body>
<div class="container">
    <div class="title">{title}</div>
    <div class="subtitle">{subtitle}</div>
    
    <div class="image-wrapper">
        <img src="{img_src}" />
    </div>
    
    <div class="specs-grid">
        <div class="spec-item"><span>Comprimento</span>10,67 m</div>
        <div class="spec-item"><span>Boca</span>3,05 m</div>
        <div class="spec-item"><span>Motorização</span>2x 250 a 400 HP</div>
        <div class="spec-item"><span>Deadrise</span>24,5°</div>
        <div class="spec-item"><span>Combustível</span>650 L</div>
        <div class="spec-item"><span>Capacidade</span>12 Dia / 2 Noite</div>
    </div>
    
    <div class="footer">FISHING RAPTOR</div>
</div>
</body>
</html>
"""

CONCEPTS = [
    {
        "name": "1_Swiss_Editorial_Noir",
        "bg_color": "#0A0D12",
        "text_color": "#F5F5F0",
        "accent_color": "#C5A059",
        "padding": "100px",
        "img_height": "900px",
        "border": "1px solid #C5A059",
        "title_size": "72px",
        "title": "350 SOLARIUM",
        "subtitle": "Offshore Architecture & Supreme Comfort",
        "img_src": b64_1,
        "custom_css": ".image-wrapper { margin-bottom: 60px; }"
    },
    {
        "name": "2_High_Performance_Stealth",
        "bg_color": "#0F141C",
        "text_color": "#FFFFFF",
        "accent_color": "#00E5FF", # Cyan tech accent
        "padding": "80px",
        "img_height": "1000px",
        "border": "none",
        "title_size": "80px",
        "title": "SPEED. RANGE.<br>UNBREAKABLE.",
        "subtitle": "The Ultimate Deep-V Offshore Machine",
        "img_src": b64_4,
        "custom_css": ".image-wrapper { background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 70%); }"
    },
    {
        "name": "3_Riviera_Solarium_Lifestyle",
        "bg_color": "#FAF9F6",
        "text_color": "#111827",
        "accent_color": "#A38B53",
        "padding": "120px",
        "img_height": "850px",
        "border": "none",
        "title_size": "64px",
        "title": "THE SUPREME<br>DAY-BOAT",
        "subtitle": "Lounge, Sun & Sea in Perfect Harmony",
        "img_src": b64_2,
        "custom_css": ".container { background: linear-gradient(to bottom, #FAF9F6 0%, #E5E7EB 100%); }"
    },
    {
        "name": "4_Atelier_Naval_Blueprint",
        "bg_color": "#1A1C23",
        "text_color": "#E2E8F0",
        "accent_color": "#FBBF24",
        "padding": "90px",
        "img_height": "950px",
        "border": "1px dashed #475569",
        "title_size": "68px",
        "title": "HULL SPECIFICATION",
        "subtitle": "Model: 350 Solarium • Engineering Draft",
        "img_src": b64_3,
        "custom_css": ".specs-grid { font-family: monospace; font-size: 20px; }"
    },
    {
        "name": "5_Dual_Soul_Offshore_Weekender",
        "bg_color": "#171717",
        "text_color": "#FAFAFA",
        "accent_color": "#EF4444", # Red accent for dual soul
        "padding": "100px",
        "img_height": "900px",
        "border": "2px solid #333",
        "title_size": "70px",
        "title": "DUAL SOUL",
        "subtitle": "Extreme Offshore meets Luxury Weekender",
        "img_src": b64_5,
        "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": 1080, "height": 1920})
        
        for c in CONCEPTS:
            html = HTML_TEMPLATE.format(
                font_b64=font_b64,
                bg_color=c["bg_color"],
                text_color=c["text_color"],
                accent_color=c["accent_color"],
                padding=c["padding"],
                img_height=c["img_height"],
                border=c["border"],
                title_size=c["title_size"],
                title=c["title"],
                subtitle=c["subtitle"],
                img_src=c["img_src"],
                custom_css=c["custom_css"]
            )
            await page.set_content(html, wait_until="networkidle")
            out_path = f"/root/services/pipodesign/output/fishing_350/derivatives/folders_v1/{c['name']}.jpg"
            await page.screenshot(path=out_path, type="jpeg", quality=95)
            print(f"Rendered: {out_path}")
            
        await browser.close()

asyncio.run(render_all())
