"""Verify photo has no embedded green badge/ring and status is on neon ring in all breakpoints."""
from pathlib import Path
from PIL import Image
import math
from playwright.sync_api import sync_playwright
from tempfile import TemporaryDirectory
import subprocess, time, urllib.request
ROOT = Path(__file__).resolve().parents[1]/"web"
photo = Image.open(ROOT/'assets/avatar-portrait-v041.png').convert('RGBA')
assert photo.size == (276, 276)
# No source artwork should remain anywhere inside the opaque circle.
for r,g,b,a in photo.get_flattened_data():
    if a>230:
        assert not (g>130 and g>r*1.55 and g>b*1.2), 'baked green dot in photo'
# No near-white neon border inside visible circle near photo edges.
# Functional and computed-layout checks run in real Chromium with service worker disabled.
with sync_playwright() as playwright:
    browser=playwright.chromium.launch(executable_path='/usr/bin/chromium',headless=True,args=['--no-sandbox'])
    import json,base64,mimetypes
    assets={}
    for f in (ROOT/'assets').iterdir():
        if f.is_file():
            mime=mimetypes.guess_type(str(f))[0] or 'application/octet-stream'
            assets[f.name]='data:'+mime+';base64,'+base64.b64encode(f.read_bytes()).decode()
    css=(ROOT/'v04.css').read_text().replace("url('assets/neon-wallpaper.jpg')",f"url('{assets['neon-wallpaper.jpg']}')")
    js=(ROOT/'app.js').read_text().replace("const path = name => A + name;", "const path = name => window.__assetData[name] || A+name;").replace("const r=await fetch('./catalog.json');", "const r={ok:true,json:async()=>window.__demoCatalog};")
    js=js.replace("navigator.serviceWorker.register('./sw.js').catch(()=>{});", "/* no service worker in inline test */")
    catalog=json.loads((ROOT/'catalog.json').read_text())
    html='<html><head><meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><style>'+css+'</style></head><body><div id="app"></div><div id="nav-root"></div><div id="overlay-root"></div></body></html>'
    for width,height in ((320,640),(390,844),(430,932),(820,1180),(1280,900)):
        page=browser.new_page(viewport={'width':width,'height':height},device_scale_factor=1,has_touch=True,is_mobile=True,service_workers='block')
        page.goto('about:blank')
        page.set_content(html)
        page.evaluate('(arg)=>{window.__assetData=arg.assets;window.__demoCatalog=arg.catalog}', {'assets':assets,'catalog':catalog})
        page.evaluate(js)
        page.locator('.online-dot').wait_for()
        data=page.evaluate("""() => {
           const frame=document.querySelector('.avatar-frame').getBoundingClientRect();
           const dot=document.querySelector('.online-dot').getBoundingClientRect();
           const pic=document.querySelector('.avatar-photo').getBoundingClientRect();
           const ring=document.querySelector('.avatar-ring').getBoundingClientRect();
           return {diameter:frame.width, ring:Math.hypot(ring.width,ring.height),
              r:Math.hypot(dot.left+dot.width/2-frame.left-frame.width/2,dot.top+dot.height/2-frame.top-frame.height/2),
              rr:frame.width*0.47, photo:pic.width, status:dot.width, imageUrl:document.querySelector('.avatar-photo').getAttribute('src')};
        }""")
        assert abs(data['r']-data['rr'])<1.5,(width,data)
        assert data['imageUrl'].startswith('data:image/png;'),(width,data)
        assert abs(data['photo']-data['diameter']*0.9)<1.5,(width,data)
        page.locator('.online-dot').click()
        assert page.locator('.online-dot.presence-away').count()==1
        page.locator('.online-dot').click()
        assert page.locator('.online-dot.presence-offline').count()==1
        page.locator('.online-dot').click()
        assert page.locator('.online-dot.presence-online').count()==1
        if width in (320,390,1280):page.locator('.seller-card').screenshot(path=f'/mnt/data/WetSlip_Avatar_v041_{width}.png')
        print(width, data['diameter'],data['r'],data['rr'],'OK')
        page.close()
    browser.close()