import json,re,base64,mimetypes
from pathlib import Path
from playwright.sync_api import sync_playwright
root=Path(__file__).resolve().parents[1]/'web'
html=(root/'index.html').read_text(); css=(root/'styles.css').read_text(); js=(root/'app.js').read_text();data=json.loads((root/'catalog.json').read_text());
html=re.sub(r'<link rel="stylesheet"[^>]+>', '',html)
html=re.sub(r'<script src="app.js" type="module"></script>', '',html)
assetmap={}
for f in (root/'assets').iterdir():
 if f.suffix.lower() in ['.png','.jpg']:
  mime=mimetypes.guess_type(str(f))[0]
  assetmap[f.name]='data:'+mime+';base64,'+base64.b64encode(f.read_bytes()).decode()
css=css.replace("url('assets/neon-wallpaper.jpg')", "url('"+assetmap['neon-wallpaper.jpg']+"')")
for width,height in [(390,844),(320,640),(1280,900)]:
 with sync_playwright() as p:
  browser=p.chromium.launch(executable_path='/usr/bin/chromium',args=['--no-sandbox'])
  page=browser.new_page(viewport={'width':width,'height':height})
  errs=[]
  page.on('pageerror',lambda err:errs.append(str(err)))
  page.set_content(html)
  page.add_style_tag(content=css)
  page.evaluate('(data)=>{window.fetch=async()=>({ok:true,json:async()=>data})}',data)
  page.evaluate(js)
  page.wait_for_selector('article.product')
  page.evaluate('''(m)=>{for(const img of document.querySelectorAll('img')){const name=img.getAttribute('src').split('/').pop();if(m[name])img.src=m[name]}}''',assetmap)
  page.wait_for_timeout(500)
  page.screenshot(path=f'./preview-{width}.png',full_page=True)
  assert page.locator('article.product').count()==4
  widths=page.evaluate('''()=>({scrollWidth:document.documentElement.scrollWidth,innerWidth:innerWidth})''')
  print('viewport',width,'card count',page.locator('article.product').count(),'overflow',widths,'js_errors',errs)
  assert widths['scrollWidth']<=widths['innerWidth']+1
  page.get_by_role('tab',name='Über mich').click()
  assert page.get_by_text('Über Vanessa').count()==1
  page.get_by_role('tab',name='Artikel').click()
  page.locator('[data-add="demo-1"]').first.click()
  assert page.get_by_role('dialog',name='Wäschekorb').count()==1
  assert '34,00' in page.get_by_role('dialog',name='Wäschekorb').inner_text()
  page.locator('[data-action="close"]').click()
  page.locator('[data-action="events"]').click()
  page.locator('#demo-theme').select_option('christmas')
  assert page.locator('.flake').count()==38
  assert not errs,errs
  browser.close()
print('interaction tests: passed. Note: service worker/offline network tests pending on dev LXC.')