import assert from "node:assert/strict";

export async function runOverlaySmoke({ evaluate }) {
  const results = await evaluate(`(async () => {
    const { renderOverlayLeaderboard, renderTeamOverlay, renderObsOverlay } = await import('/src/overlays.js');
    const { escapeHtml } = await import('/src/html_escape.js');
    const { installListSorting } = await import('/src/list_sorting.js');
    const frame = document.createElement('iframe');
    frame.style.cssText = 'position:fixed;left:0;top:0;height:900px;border:0;z-index:99999';
    document.body.append(frame);
    const doc = frame.contentDocument;
    const style = doc.createElement('link'); style.rel='stylesheet'; style.href='/src/styles.css';
    const loaded = new Promise((resolve,reject) => {style.onload=resolve;style.onerror=reject;});
    doc.head.append(style); await loaded;
    const labels = {'table.pos':'Pos','table.driver':'Förare','table.laps':'Varv','table.result':'Resultat','table.gap':'Gap','table.ahead_gap':'Gap fram','table.own_delta':'Eget delta','table.best_lap':'Bästa varv'};
    let layout='leaderboard';
    const deps={t:key=>labels[key]||key, escapeHtml, formatLap:()=> '0:36.619', formatTeamActiveMemberLabel:()=> 'Test Driver', formatPredictedLapDelta:()=> '-', getVisiblePassings:()=>[], getEventName:()=> 'Club Practice', getSessionTypeLabel:()=> 'Practice', getStartModeLabel:()=> 'Mass start', getStatusLabel:()=> 'Running', getObsOverlayConfig:()=>({layout,rows:10,showClock:true,showLaps:true,showResult:true,showBest:true,showGap:true}), normalizeStartMode:v=>v, renderPositionGrid:()=>'', getSessionGridEntries:()=>[]};
    const rows=[{key:'a',displayName:'Karl Bodell',laps:27,resultDisplay:'0:36.619',bestLapMs:36619},{key:'b',displayName:'Anders',laps:19,resultDisplay:'0:37.854',bestLapMs:37854}];
    const results=[];
    const tick=()=>new Promise(resolve=>setTimeout(resolve,0));
    try {
      for (const mode of ['leaderboard','tv','team']) {
        for (const width of [390,900,1600]) {
          frame.style.width=width+'px';
          doc.body.innerHTML='<section class="overlay-shell"><div class="overlay-board"></div></section>';
          const root=doc.querySelector('.overlay-board');
          root.innerHTML=mode==='team' ? renderTeamOverlay(rows,{}, {},deps) : renderOverlayLeaderboard(rows,deps);
          const stop=installListSorting(root); await tick();
          const list=root.querySelector('.overlay-race-list');
          const header=list.querySelector('.list-sort-toolbar');
          const row=list.querySelector('.overlay-race-row');
          const deltas=[...header.children].map((button,index)=>Math.abs(button.getBoundingClientRect().left-row.children[index].getBoundingClientRect().left));
          for(let attempt=0;attempt<3 && !header.children[1].textContent.includes("▲");attempt++) header.children[1].click();
          await tick();
          const firstName=list.querySelector('.overlay-race-driver strong').textContent;
          const firstPosition=list.querySelector('.pos-pill').textContent;
          results.push({mode,width,aligned:deltas.every(delta=>delta<1),firstName,firstPosition,columns:header.children.length,tableScroll:list.scrollWidth>list.clientWidth});
          stop();
        }
      }
      for (layout of ['leaderboard','grid']) {
        for (const width of [390,1600]) {
          frame.style.width=width+'px';
          doc.body.innerHTML='<section class="overlay-shell-obs"></section>';
          const root=doc.body.firstElementChild;
          root.innerHTML=renderObsOverlay({name:'Practice',eventId:'e',status:'running'},rows,{}, {remainingMs:300000},{},deps);
          const stop=installListSorting(root);await tick();
          results.push({mode:'obs-'+layout,width,controls:root.querySelectorAll('.list-sort-toolbar').length});
          stop();
        }
      }
    } finally {frame.remove();}
    return results;
  })()`);
  for (const result of results) {
    if (result.mode.startsWith("obs")) assert.equal(result.controls, 0, JSON.stringify(result));
    else {
      assert.equal(result.aligned, true, JSON.stringify(result));
      assert.equal(result.columns, 8, JSON.stringify(result));
      assert.equal(result.firstName, "Anders", JSON.stringify(result));
      assert.equal(result.firstPosition, "2", JSON.stringify(result));
    }
  }
  console.log("PASS overlay heading alignment at 390/900/1600px, sorting preserves race position, OBS has no sort controls");
}