#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""Inspect featured image container CSS in real post."""
from pathlib import Path
from playwright.sync_api import sync_playwright

URL = "https://franciscoborrello.com.br/feng-shui/5-mitos-sobre-feng-shui-que-voce-ainda-acredita/"
OUT = Path("/opt/mia/workspace/temp/wp_preview_screenshots")
OUT.mkdir(parents=True, exist_ok=True)

UA_DESKTOP = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
UA_MOBILE = "Mozilla/5.0 (iPhone; CPU iPhone OS 16_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Mobile/15E148 Safari/604.1"

with sync_playwright() as p:
    b = p.chromium.launch()

    for label, viewport, ua, mob in [
        ("desktop", {"width": 1440, "height": 900}, UA_DESKTOP, False),
        ("mobile", {"width": 390, "height": 844}, UA_MOBILE, True),
    ]:
        ctx = b.new_context(viewport=viewport, user_agent=ua, is_mobile=mob, device_scale_factor=2 if mob else 1)
        page = ctx.new_page()
        page.goto(URL, wait_until="networkidle", timeout=45000)
        page.wait_for_timeout(2000)

        # Encontra a featured image real (aquela do topo, antes do conteudo)
        info = page.evaluate("""
        () => {
            const imgs = document.querySelectorAll('img');
            const list = [];
            imgs.forEach(img => {
                const rect = img.getBoundingClientRect();
                if (rect.width > 200 && rect.top < 1500) {
                    let el = img;
                    let css_chain = '';
                    for (let i = 0; i < 4; i++) {
                        if (!el) break;
                        css_chain += `<${el.tagName.toLowerCase()}${el.className ? '.' + el.className.split(' ').join('.') : ''}>`;
                        el = el.parentElement;
                    }
                    list.push({
                        src: img.src.substring(0, 100),
                        classes: img.className,
                        alt: img.alt.substring(0, 40),
                        rect: {x: Math.round(rect.left), y: Math.round(rect.top), w: Math.round(rect.width), h: Math.round(rect.height)},
                        naturalW: img.naturalWidth,
                        naturalH: img.naturalHeight,
                        css_object_fit: getComputedStyle(img).objectFit,
                        css_object_pos: getComputedStyle(img).objectPosition,
                        css_aspect: getComputedStyle(img).aspectRatio,
                        chain: css_chain,
                    });
                }
            });
            return list.slice(0, 8);
        }
        """)
        print(f"\n=== {label} ===")
        for i, item in enumerate(info):
            print(f"  [{i}] {item['rect']} nat={item['naturalW']}x{item['naturalH']} fit={item['css_object_fit']} pos={item['css_object_pos']}")
            print(f"      classes: {item['classes']}")
            print(f"      chain: {item['chain']}")
            print(f"      alt: {item['alt']}")
            print(f"      src: {item['src']}")

        # Screenshot do topo pro debug
        page.screenshot(path=str(OUT / f"real_post_top_{label}.png"), full_page=False)
        page.close()
        ctx.close()

    b.close()