from playwright.sync_api import sync_playwright
import json,os,re
BASE=os.path.dirname(os.path.abspath(__file__))
html=open(BASE+'/index.html').read()
html=re.sub(r'<link rel="stylesheet"[^>]*>', '', html)
html=re.sub(r'<script src="[^"]+" defer></script>', '', html)
css=open(BASE+'/styles.css').read()
engine=open(BASE+'/engine.js').read()
app=open(BASE+'/app.js').read()
data={x:json.load(open(BASE+'/'+x)) for x in ['train.json','iid_test.json','challenge.json']}
def initialize(page):
    page.set_content(html,wait_until='load')
    page.add_style_tag(content=css)
    page.evaluate('data => { window.fetch = async (url) => ({ok:true, json:async()=>data[url.replace("./","")]}); }',data)
    page.add_script_tag(content=engine)
    page.add_script_tag(content=app)
errs=[]
with sync_playwright() as p:
    browser=p.chromium.launch(headless=True, executable_path='/usr/bin/chromium',args=['--no-sandbox','--disable-dev-shm-usage'])
    page=browser.new_page(viewport={'width':1440,'height':1040},accept_downloads=True)
    page.on('pageerror',lambda e: errs.append(str(e)))
    initialize(page)
    page.wait_for_function("document.querySelector('#status').textContent.includes('Ready.')",timeout=30000)
    print('01 Boot ready:',page.locator('#status').inner_text())
    print('02 Best challenge:',page.locator('#kpis').inner_text().replace('\n',' ')[:120])
    assert page.locator('#leaderboard .bar-row').count()==4
    assert page.locator('#confusion tbody tr').count()==6
    page.locator('#overviewSplit').select_option('iid')
    assert '130' in page.locator('#kpis').inner_text()
    print('03 130 IID data loaded')
    page.locator('button[data-tab="experiments"]').click()
    page.locator('#runSeed').fill('2026')
    page.locator('#runReps').select_option('200')
    page.locator('#runButton').click()
    assert page.locator('#experimentOutput tbody tr').count()==4
    assert page.locator('#historyList tbody tr').count()>=1
    print('04 Experiment runner + history PASS')
    page.locator('button[data-tab="slices"]').click()
    assert page.locator('#languageSlices tbody tr').count()==3
    page.locator('#sliceSplit').select_option('iid')
    assert page.locator('#domainSlices tbody tr').count()>=3
    print('05 Language and domain slices PASS')
    page.locator('button[data-tab="errors"]').click()
    assert 'errors in 54' in page.locator('#errorsList').inner_text()
    page.locator('#errorSearch').fill('method')
    print('06 Error inspector and search PASS')
    page.locator('#sampleText').fill('This study seeks to evaluate the effects of technology on learning.')
    page.locator('#classifyButton').click()
    assert 'PREDICTED RHETORICAL FUNCTION' in page.locator('#sampleOutput').inner_text()
    print('07 Sample inference PASS')
    page.locator('button[data-tab="shift"]').click()
    assert page.locator('#shiftGrid tbody tr').count()==4
    print('08 Shift comparison PASS')
    page.locator('button[data-tab="audit"]').click()
    assert 'PASS' in page.locator('#leakageChecks').inner_text()
    print('09 Data audit PASS')
    page.locator('button[data-tab="exports"]').click()
    for button in ['downloadPred','downloadMetrics','downloadReport','downloadRuns']:
        with page.expect_download(timeout=10000) as d:
            page.locator('#'+button).click()
        download=d.value
        print('10 Download',download.suggested_filename,'PASS')
    # screenshot at overview after setup
    page.locator('button[data-tab="overview"]').click()
    page.locator('#overviewSplit').select_option('challenge')
    page.screenshot(path=os.path.join(BASE,'ModelOps_Research_Lab_DESKTOP_PREVIEW.png'),full_page=True)
    print('11 Desktop screenshot PASS')
    # Mobile responsive
    mobile=browser.new_page(viewport={'width':390,'height':844},device_scale_factor=1)
    mobile.on('pageerror',lambda e: errs.append(str(e)))
    initialize(mobile)
    mobile.wait_for_function("document.querySelector('#status').textContent.includes('Ready.')",timeout=30000)
    mobile.screenshot(path=os.path.join(BASE,'ModelOps_Research_Lab_MOBILE_PREVIEW.png'),full_page=True)
    width=mobile.evaluate('document.documentElement.scrollWidth')
    print('12 Mobile viewport scroll width:',width)
    assert width<=400, 'mobile horizontal overflow on document'
    mobile.locator('button[data-tab="slices"]').click()
    assert mobile.locator('#languageSlices tbody tr').count()==3
    print('13 Mobile interface PASS')
    print('14 JavaScript errors:',errs)
    assert not errs
    browser.close()