const {chromium} = require('playwright');
const assert = require('node:assert/strict');

(async () => {
 const browser = await chromium.launch({headless:true, ...(process.env.TEST_CHROME ? {executablePath:process.env.TEST_CHROME} : {})});
 try {
  const errors = [];
  for (const mobile of [false,true]) {
   const page = await browser.newPage({viewport: mobile ? {width:390,height:844} : {width:1440,height:1000}, isMobile:mobile, hasTouch:mobile});
   page.on('pageerror',error=>errors.push(error.message));
   await page.goto('http://127.0.0.1:7868');
   await page.getByRole('tab',{name:'Illustrious',exact:true}).click();
   await page.getByRole('button',{name:'JujoHotaruのLoRAサンプル・使い方はこちら'}).click();
   const area = page.locator('.jujo-samples:visible');
   for (const [code,shape] of [['127','tareme'],['115','tsurime']]) {
    await area.locator('.jb-search').fill('eyecolle_xl_code'+code);
    assert.equal(await area.locator('.jb-card').count(),1);
    const card = area.locator('.jb-card');
    assert.equal(await card.locator('.jb-code').innerText(),'code'+code);
    assert.match(await card.locator('img').getAttribute('src'),new RegExp('/'+shape+'_ill'+code+'\\.webp$'));
    await card.click();
    const preview = area.locator('.jb-preview img');
    assert.equal(await preview.getAttribute('src'),await card.locator('img').getAttribute('src'));
    await preview.evaluate(img=>img.complete&&img.naturalWidth>0 ? true : new Promise((resolve,reject)=>{img.addEventListener('load',resolve,{once:true});img.addEventListener('error',reject,{once:true});}));
    assert.match(await area.locator('.jb-sample-note').innerText(),new RegExp('code'+code+'.*Illustrious'));
    assert.match(await area.locator('.jb-hint').innerText(),new RegExp(shape));
    assert.equal(await area.locator('.jb-strength').inputValue(),'1.5');
    assert.match(await area.locator('.jb-source').getAttribute('href'),/JujoHotaru\/lora\/blob\/9e51c3d49a291408c00f15a04d903948b819cc4d\/sdxl\/eyecollexl\/README.md$/);
    await area.locator('.jb-preview').click();
    assert.equal(await area.locator('.jb-zoom img').getAttribute('src'),await preview.getAttribute('src'));
    assert.equal(await area.locator('.jb-zoom').evaluate(el=>el.matches(':modal')),true);
    await area.locator('.jb-zoom-close').click();
    if (mobile) await area.locator('.jb-close').click();
   }
   if (mobile) await area.locator('.jb-card').click();
   await area.locator('.jb-target').selectOption('3');
   await area.locator('.jb-apply-button').click();
   await area.locator('.jb-message').filter({hasText:'LoRA 3に設定して有効化しました'}).waitFor();
   if (mobile) await area.locator('.jb-close').click();
   await page.getByRole('button',{name:'LoRA設定・追加モデル（最大4つ）'}).click();
   assert.equal(await page.getByRole('checkbox',{name:'LoRA 3 Enable',exact:true}).isChecked(),true);
   assert.match(await page.getByRole('combobox',{name:'LoRA 3 File',exact:true}).inputValue(),/eyecolle_xl_code115/);
   if (mobile) await page.getByRole('button',{name:'LoRA設定・追加モデル（最大4つ）'}).click();
   if (mobile) await area.locator('.jb-card').click();
   const screenshot = mobile ? process.env.EYECOLLE_MOBILE_SCREENSHOT : process.env.EYECOLLE_DESKTOP_SCREENSHOT;
   if (screenshot) {
    if (mobile) {
     await area.locator('.jb-detail').evaluate(el=>{el.scrollTop=0;});
     await page.screenshot({path:screenshot});
    } else await area.screenshot({path:screenshot});
   }
   assert.equal(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth),true);
   console.log('PASS',mobile?'mobile':'desktop','exact code thumbnail/detail/zoom, ILL images loaded, shape hints and slot assignment');
   await page.close();
  }
  assert.deepEqual(errors,[]);
 } finally {await browser.close();}
})().catch(error=>{console.error(error);process.exitCode=1;});