#!/usr/bin/env python3
"""Petakan semua node ti-widget: mana yang tersembunyi dan melebarkan halaman, mana yang tampil."""
from playwright.sync_api import sync_playwright

URL = "https://studiosoft.id/"
JS = """() => {
  const out = [];
  document.querySelectorAll('[class*="ti-widget"], pre').forEach(el => {
    const s = getComputedStyle(el); const r = el.getBoundingClientRect();
    out.push({
      tag: el.tagName.toLowerCase(),
      cls: String(el.className || '').slice(0, 70),
      id: el.id || '',
      lebar: Math.round(r.width), tinggi: Math.round(r.height), kiri: Math.round(r.left),
      opacity: s.opacity, display: s.display, visibility: s.visibility, position: s.position,
      overflow: s.overflow, gaya: (el.getAttribute('style') || '').slice(0, 90),
      anakWidget: el.querySelectorAll('.ti-widget').length,
      induk: el.parentElement ? el.parentElement.tagName.toLowerCase() + '.' + String(el.parentElement.className || '').slice(0, 40) : '-'
    });
  });
  // node penentu lebar halaman
  const de = document.documentElement;
  let pelaku = null;
  document.querySelectorAll('*').forEach(el => {
    const r = el.getBoundingClientRect();
    if (Math.round(r.width) >= de.scrollWidth - 5) {
      if (!pelaku) pelaku = {tag: el.tagName.toLowerCase(), cls: String(el.className||'').slice(0,60),
                             lebar: Math.round(r.width), tampil: getComputedStyle(el).display};
    }
  });
  return {innerWidth: window.innerWidth, scrollWidth: de.scrollWidth, pelaku, node: out};
}"""

with sync_playwright() as p:
    b = p.chromium.launch(args=["--no-sandbox", "--disable-dev-shm-usage"])
    ctx = b.new_context(viewport={"width": 390, "height": 900}, is_mobile=True, has_touch=True)
    pg = ctx.new_page()
    pg.goto(URL, wait_until="load", timeout=90000)
    pg.wait_for_timeout(7000)
    d = pg.evaluate(JS)
    print(f"layar {d['innerWidth']}px | scrollWidth {d['scrollWidth']}px")
    print(f"node penentu lebar: {d['pelaku']}\n")
    print(f"{'#':<3}{'tag':<6}{'lebar':>7}{'tinggi':>7}{'opacity':>9}  kelas / gaya")
    for i, n in enumerate(d["node"], 1):
        print(f"{i:<3}{n['tag']:<6}{n['lebar']:>7}{n['tinggi']:>7}{n['opacity']:>9}  {n['cls'][:58]}")
        print(f"      display={n['display']} visibility={n['visibility']} overflow={n['overflow']} gaya={n['gaya']!r}")
        print(f"      induk={n['induk']} | anak .ti-widget={n['anakWidget']}")
    ctx.close()
    b.close()