#!/usr/bin/env python3
"""Uji calon CSS perbaikan untuk overflow widget Trustindex di studiosoft.id.
Ukur scrollWidth sebelum & sesudah tiap kandidat, pada lebar 390px (ponsel)."""
from playwright.sync_api import sync_playwright

URL = "https://studiosoft.id/"
KANDIDAT = {
    "A. netralkan pembungkus <pre>": """
        pre.ti-widget { white-space: normal !important; max-width: 100% !important; overflow-x: auto !important; }
    """,
    "B. batasi lebar isi widget": """
        .ti-widget, .ti-widget .ti-reviews-container, .ti-widget .ti-reviews-container-wrapper {
            max-width: 100% !important; }
        .ti-widget .ti-review-item { max-width: 100% !important; }
    """,
    "C. paksa satu ulasan per baris di ponsel": """
        @media (max-width: 768px) {
          .ti-widget .ti-review-item { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }
        }
    """,
    "D. A + B (paling lengkap)": """
        pre.ti-widget { white-space: normal !important; max-width: 100% !important; overflow-x: auto !important; }
        .ti-widget, .ti-widget .ti-reviews-container, .ti-widget .ti-reviews-container-wrapper {
            max-width: 100% !important; }
        .ti-widget .ti-review-item { max-width: 100% !important; }
        @media (max-width: 768px) {
          .ti-widget .ti-review-item { flex: 0 0 100% !important; width: 100% !important; }
        }
    """,
}

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

with sync_playwright() as p:
    b = p.chromium.launch(args=["--no-sandbox", "--disable-dev-shm-usage"])
    for nama, css in [("TANPA perbaikan (dasar)", "")] + list(KANDIDAT.items()):
        ctx = b.new_context(viewport={"width": 390, "height": 844}, device_scale_factor=2, is_mobile=True, has_touch=True)
        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)
        tanda = "✅ PAS" if d["lebih"] <= 2 else ("⚠️ masih lebar" if d["lebih"] < 400 else "❌ parah")
        print(f"\n{nama}")
        print(f"   scrollWidth {d['scrollWidth']}px | layar {d['innerWidth']}px | kelebihan {d['lebih']}px  {tanda}")
        print(f"   widget {d['lebarWidget']}px | kartu ulasan {d['lebarKartuUlasan']}px | jumlah ulasan {d['jumlahUlasan']} | teks {d['teksUlasanTampak']} char")
        if css and d["lebih"] <= 2:
            pg.screenshot(path="ss_mobile_setelah_perbaikan.png")
        ctx.close()
    b.close()
print("\nscreenshot hasil perbaikan: ss_mobile_setelah_perbaikan.png")