const {test,expect}=require('@playwright/test');
const {openClassic,showPlayingFixture}=require('./helpers/classic-fixture');
const {mkdirSync,readFileSync}=require('node:fs');
const {differentPixels}=require('./helpers/png-diff');
const out='/home/josh/deliverables/ytplayer-done13';mkdirSync(out,{recursive:true});
const before=process.env.CAPTURE_BEFORE==='1';
const screens=['home','search','playlist','queue','history','saved','downloads','channel','settings','settings-detail','now-playing','lyrics','chapters','lyric-search','service','modal','empty-queue','empty-saved','empty-downloads'];
async function scene(page,layout,screen){
 await openClassic(page,{populated:true,standalone:page.viewportSize().width<900});await showPlayingFixture(page);
 await page.evaluate(({layout,screen})=>{
  data.settings.layout=layout;applyAppearance();
  const videos=data.playlists[0].videos;
  API.cacheList=async()=>({ok:true,items:screen==='empty-saved'?[]:videos.map(v=>({...v,size:84000000})),total:screen==='empty-saved'?0:1008000000});
  Downloads.configure({slots:()=>4,files:async()=>[],playlists:()=>data.playlists,jobs:()=>!['downloads','settings-detail'].includes(screen)?[]:['active','queued','paused','failed'].map((status,i)=>({...videos[i],status,error:status==='failed'?'ERROR: [youtube] Video unavailable':null,progress:status==='active'?{received:24000000,total:84000000}:null})),action:()=>{}});
  channelData={name:'Preview fixtures',url:'https://www.youtube.com/@preview',key:'preview',results:videos,loading:false};
  searchResults=screen==='home'?[]:videos; searchAttempted=screen!=='home';
  if(screen==='empty-queue'){queue=[];data.queue=[];}
  view=screen==='home'?{type:'search'}:screen==='playlist'?{type:'playlist',id:'studio'}:{type:screen.replace('empty-','')};
  if(screen==='home'){current=null;els.playerPane.classList.add('empty');els.placeholder.classList.remove('hidden');}
  if(['now-playing','lyrics','chapters','lyric-search','service','modal'].includes(screen))view={type:'playlist',id:'studio'};
  if(screen==='settings-detail')view={type:'settings'};
  render();renderUpNext();
  if(screen!=='home')showMiniBar();
  if(['lyrics','chapters','lyric-search'].includes(screen)){
   $('notesPanel').classList.remove('hidden');
   const tab=screen==='lyrics'?'lyrics':screen==='chapters'?'markers':'search';
   document.querySelectorAll('.notes-tab').forEach(b=>b.classList.toggle('active',b.dataset.tab===tab));
   ['lyrics','markers','search'].forEach(t=>$(t+'Pane').classList.toggle('hidden',t!==tab));
   $('lyricsList').innerHTML='<div class="lyr-line"><span class="lyr-text">Because You are God</span></div><div class="lyr-line active"><span class="lyr-text">You can do anything<br>You can do anything</span></div><div class="lyr-line"><span class="lyr-text">Your grace is enough</span></div>';
   $('chapterList').innerHTML='<button class="marker-row"><span>0:00</span><b>Opening verse</b></button><button class="marker-row"><span>1:24</span><b>Chorus</b></button>';
  }
  if(screen==='service'){data.settings.serviceLyrics=true;enterServiceMode(data.playlists[0]);$('serviceLyrics').classList.remove('hidden');$('serviceLyricsList').innerHTML='<div class="sl-line">Because You are God</div><div class="sl-line active">You can do anything</div>';}
  if(screen==='modal')showModal('Add to playlist',document.createTextNode('Keep this song in your Sunday setlist.'),[{label:'Cancel',onClick:closeModal},{label:'Add',primary:true,onClick:closeModal}]);
 },{layout,screen});
 if(screen==='settings-detail')await page.getByRole('button',{name:/Downloads & storage/}).click();
 await page.addStyleTag({content:'*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important}'});
 await page.evaluate(async()=>{ await document.fonts.ready; await Promise.all([...document.images].map(img=>{img.loading='eager';return img.decode().catch(()=>{});})); if(document.activeElement instanceof HTMLElement)document.activeElement.blur(); });await page.waitForTimeout(300);
}
for(const width of [390,1440])for(const screen of screens)for(const layout of before?['classic','glass-stage']:['classic','glass-stage','bento-hub'])test(`${layout} ${width} ${screen}`,async({page},info)=>{
 await page.setViewportSize({width,height:844});await scene(page,layout,screen);
 const name=`${layout}-${width}-${screen}-${info.project.name}.png`;
 const buffer=await page.screenshot({path:`${out}/${before?'before':'after'}-${name}`});
 if(before)return;
 if(layout!=='bento-hub'){expect(differentPixels(readFileSync(`${out}/before-${name}`),buffer)).toBeLessThanOrEqual(40);return;}
 expect(await page.evaluate(()=>document.documentElement.scrollWidth<=innerWidth)).toBe(true);
 expect(await page.locator('#sectionRail').evaluate(el=>el.parentElement===document.body)).toBe(true);
 if(!['service','modal'].includes(screen)&&width===390){const tabs=page.locator('#bottomNav button');for(const b of await tabs.all()){if(await b.isVisible()){const r=await b.boundingBox();expect(r.height).toBeGreaterThanOrEqual(44);}}}
});
for(const width of [390,1440])test(`reference ${width}`,async({page},info)=>{
 await page.setViewportSize({width,height:844});await page.route('**/__bento-reference',r=>r.fulfill({contentType:'text/html',body:readFileSync('docs/mockups/bento-hub/index.html','utf8')}));await page.goto('/__bento-reference');await page.evaluate(()=>document.fonts.ready);
 await page.screenshot({path:`${out}/reference-${width}-${info.project.name}.png`,fullPage:true});
});