#!/usr/bin/env python3
"""Cari CSS paling ringkas untuk membereskan overflow widget Trustindex,
uji di ponsel (390px) DAN desktop (1280px) supaya tidak merusak tampilan besar."""
from playwright.sync_api import sync_playwright

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

VARIAN = {
    "E. hanya widget blok footer (section#block-17)": """
        pre.ti-widget { white-space: normal !important; max-width: 100% !important; }
        section#block-17, section#block-17 .ti-widget { max-width: 100% !important; overflow: hidden !important; }
    """,
    "F. kolom footer tempat widget dipasang": """
        pre.ti-widget { white-space: normal !important; max-width: 100% !important; }
        .site-footer-primary-section-4 { max-width: 100% !important; overflow: hidden !important; }
    """,
    "G. semua widget di footer": """
        pre.ti-widget { white-space: normal !important; max-width: 100% !important; }
        .footer-widget-area .widget { max-width: 100% !important; overflow: hidden !important; }
    """,
    "H. E + kolom footer (paling aman)": """
        pre.ti-widget { white-space: normal !important; max-width: 100% !important; overflow-x: auto !important; }
        section#block-17, section#block-17 .ti-widget { max-width: 100% !important; overflow: hidden !important; }
        .site-footer-primary-section-4 { max-width: 100% !important; overflow: hidden !important; }
        @media (max-width: 768px) {
          .ti-widget .ti-review-item { flex: 0 0 100% !important; max-width: 100% !important; }
        }
    """,
}

UKUR = """() => {
  const de = document.documentElement;
  const w = document.querySelector('.ti-widget');
  const t = document.querySelector('.ti-review-item');
  return {
    scrollWidth: de.scrollWidth, innerWidth: window.innerWidth, lebih: de.scrollWidth - window.innerWidth,
    lebarWidget: w ? Math.round(w.getBoundingClientRect().width) : null,
    tinggiWidget: w ? Math.round(w.getBoundingClientRect().height) : null,
    lebarKartu: t ? Math.round(t.getBoundingClientRect().width) : null,
    ulasan: document.querySelectorAll('.ti-review-item').length,
    teks: w ? (w.textContent || '').trim().length : 0
  };
}"""

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), ("DESKTOP 1280px", 1280, False)):
        print(f"\n########## {nama} ##########")
        for label, css in [("(dasar, tanpa perbaikan)", "")] + list(VARIAN.items()):
            ctx = b.new_context(viewport={"width": w, "height": 900}, device_scale_factor=1 if not mob else 2,
                                is_mobile=mob, has_touch=mob)
            pg = ctx.new_page()
            pg.goto(URL, wait_until="domcontentloaded", timeout=90000)
            pg.wait_for_timeout(4500)
            if css:
                pg.add_style_tag(content=css)
                pg.wait_for_timeout(2500)
            d = pg.evaluate(UKUR)
            status = "✅ rapi" if d["lebih"] <= 2 else "❌ melebar"
            print(f"  {label:<46} scroll {d['scrollWidth']:>5}px | lebih {d['lebih']:>5}px | widget {d['lebarWidget']:>5}x{d['tinggiWidget']:<5} | "
                  f"kartu {d['lebarKartu']:>5}px | ulasan {d['ulasan']} | {status}")
            if css and label.startswith("H"):
                pg.screenshot(path=f"ss_trustindex_{w}.png", full_page=False)
            ctx.close()
    b.close()
print("\nscreenshot: ss_trustindex_390.png, ss_trustindex_1280.png")