#!/usr/bin/env python3
"""Uji final: perbaikan dengan min-width:0 pada kolom footer, lalu ukur node widget yang TAMPIL
dan ambil tangkapan layar ponsel + desktop."""
from playwright.sync_api import sync_playwright

URL = "https://studiosoft.id/"

CSS_FIX = """
/* Kolom grid footer: cegah melebar karena isi widget (min-width:auto pada grid/flex) */
.site-footer-primary-section-4 { min-width: 0 !important; max-width: 100% !important; }
/* Ruang widget: batasi lebar dan beri gulir sendiri kalau isinya lebih panjang */
.widget_block, .footer-widget-area .widget { min-width: 0 !important; max-width: 100% !important; }
section#block-17 .ti-widget,
section#block-17 .ti-widget-container { max-width: 100% !important; }
"""

UKUR = """() => {
  const de = document.documentElement;
  const tampil = document.querySelector('.ti-widget-container');
  const kartu = document.querySelector('.ti-review-item');
  const kolom = document.querySelector('.site-footer-primary-section-4');
  return {
    layar: window.innerWidth, scrollWidth: de.scrollWidth, lebih: de.scrollWidth - window.innerWidth,
    kolomFooter: kolom ? Math.round(kolom.getBoundingClientRect().width) : null,
    widgetTampil: tampil ? Math.round(tampil.getBoundingClientRect().width) + 'x' + Math.round(tampil.getBoundingClientRect().height) : null,
    kartuUlasan: kartu ? Math.round(kartu.getBoundingClientRect().width) : null,
    jumlahUlasan: document.querySelectorAll('.ti-review-item').length,
    tinggiHalaman: de.scrollHeight
  };
}"""

with sync_playwright() as p:
    b = p.chromium.launch(args=["--no-sandbox", "--disable-dev-shm-usage"])
    for nama, w, mob in (("PONSEL 390px", 390, True), ("TABLET 768px", 768, True), ("DESKTOP 1280px", 1280, False)):
        for label, css in (("sebelum", ""), ("sesudah", CSS_FIX)):
            ctx = b.new_context(viewport={"width": w, "height": 900}, is_mobile=mob, has_touch=mob,
                                device_scale_factor=2 if mob else 1)
            pg = ctx.new_page()
            pg.goto(URL, wait_until="load", timeout=90000)
            pg.wait_for_timeout(6500)
            if css:
                pg.add_style_tag(content=css)
                pg.wait_for_timeout(3000)
            d = pg.evaluate(UKUR)
            tandai = "✅" if d["lebih"] <= 2 else "❌"
            print(f"  {nama:<15} {label:<7} scroll {d['scrollWidth']:>5} | lebih {d['lebih']:>5} {tandai} | "
                  f"kolom {d['kolomFooter']} | widget {d['widgetTampil']} | kartu {d['kartuUlasan']} | ulasan {d['jumlahUlasan']}")
            if css:
                try:
                    el = pg.query_selector("section#block-17")
                    if el:
                        el.scroll_into_view_if_needed(); pg.wait_for_timeout(1200)
                        el.screenshot(path=f"ss_fix_widget_{w}.png")
                    pg.screenshot(path=f"ss_fix_atas_{w}.png", full_page=False)
                except Exception as e:
                    print("      screenshot gagal:", str(e)[:50])
            ctx.close()
    b.close()
print("\nscreenshot: ss_fix_widget_*.png, ss_fix_atas_*.png")