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

(async () => {
  const browser = await chromium.launch({headless:true, executablePath:process.env.TEST_CHROME});
  try {
    for (const width of [1440, 390]) {
      const page = await browser.newPage({viewport:{width,height:900}});
      const errors = [];
      page.on('pageerror', e => errors.push(e.message));
      await page.goto('http://127.0.0.1:7869', {waitUntil:'networkidle'});
      const toggle = page.getByRole('button',{name:'モデルの特徴・サンプルはこちら'});
      assert.equal(await page.getByText('共通設定でのサンプル',{exact:true}).isVisible(),false);
      await toggle.click();
      const area = page.locator('.checkpoint-samples');
      const ready = count => page.waitForFunction(n => [...document.querySelectorAll('.checkpoint-samples img')]
        .filter(x=>x.getBoundingClientRect().width>0 && x.complete && x.naturalWidth===1024).length===n, count);
      await ready(2);
      const input = page.getByRole('combobox',{name:'Anima Checkpoint',exact:true});
      await input.fill('anima-aestheticV11_INT8.safetensors');
      await page.getByRole('option',{name:'anima-aestheticV11_INT8.safetensors',exact:true}).click();
      await page.getByText('Aestheticのプロンプトについて',{exact:true}).waitFor();
      await ready(4);
      await page.getByRole('button',{name:'推奨設定：生成条件・プロンプト'}).click();
      assert.match(await area.innerText(), /24681012/);
      assert.match(await area.innerText(), /13579113/);
      assert.equal(await page.getByRole('textbox',{name:'Prompt',exact:true}).inputValue(),'unchanged prompt');
      assert(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth+1));
      for (const name of ['fnMixAnimaTurbo_baseNoTurbo_INT8.safetensors','fwaunAnima_v11_INT8.safetensors','tekitoMix_v32_INT8.safetensors','anima-turbo-v1.1_INT8.safetensors']) {
        await input.fill(name);
        await page.getByRole('option',{name,exact:true}).click();
        await ready(2);
        assert.equal(await page.getByText('Aesthetic推奨設定でのサンプル（クオリティタグ省略）',{exact:true}).isVisible(),false);
      }
      assert.deepEqual(errors,[]);
      console.log(`PASS ${width}px: initially closed, 5 model switches, Aesthetic 4 images, conditions, no overflow, prompt preserved`);
      await page.close();
    }
  } finally { await browser.close(); }
})().catch(e=>{console.error(e);process.exit(1);});