import {test,expect} from '@playwright/test';

async function readColors(page){
  return page.evaluate(()=>{
    const header=getComputedStyle(document.querySelector('body > header'));
    const body=getComputedStyle(document.body);
    const active=document.querySelector('header nav .sun-nav-button.on');
    return {header:header.backgroundImage,body:body.backgroundColor,active:active?getComputedStyle(active).backgroundColor:null};
  });
}

for(const theme of [null,{ui:{background:'#EAF6EE'},sidebar:{background:'#123C30',background2:'#071F19',activeBackground:'#1C4C3D'}}]){
  test(`saved theme is stable before and after a slow runtime: ${theme?'custom':'default'}`,async({page})=>{
    await page.addInitScript(value=>{
      if(value)localStorage.setItem('sunBrandThemeV1',JSON.stringify(value));
      // Skip the logged-out skeleton to inspect the application shell itself.
      localStorage.setItem('sb-theme-test-auth-token','theme-test-placeholder-without-user-credentials');
    },theme);
    let release;
    const held=new Promise(resolve=>{release=resolve});
    await page.route('**/app-runtime.js*',async route=>{await held;await route.continue()});
    await page.goto('/index.html',{waitUntil:'commit'});
    await page.waitForFunction(()=>document.body?.classList.contains('sun-enterprise-sidebar'));
    await expect(page.locator('body')).toHaveCSS('visibility','hidden');
    const early=await readColors(page);
    release();
    await page.waitForLoadState('domcontentloaded');
    await page.waitForFunction(()=>Boolean(window.SunBrandTheme));
    await expect(page.locator('html')).not.toHaveClass(/sun-app-starting/);
    const final=await readColors(page);
    expect(early).toEqual(final);
    expect(final.body).toBe(theme?'rgb(234, 246, 238)':'rgb(255, 247, 230)');
    expect(final.header).toContain(theme?'rgb(18, 60, 48)':'rgb(26, 26, 26)');
  });
}

test('theme preview, save, reload and cloud updates keep working',async({page})=>{
  await page.goto('/index.html',{waitUntil:'domcontentloaded'});
  await expect(page.locator('html')).not.toHaveClass(/sun-app-starting/);
  const before=await readColors(page);
  await page.evaluate(()=>window.SunBrandTheme.applyPreset('emerald'));
  expect(await readColors(page)).toEqual(before);
  await page.evaluate(()=>window.SunBrandTheme.save());
  await expect.poll(async()=>(await readColors(page)).active).toBe('rgb(28, 76, 61)');
  const saved=await readColors(page);
  expect(saved.header).toContain('rgb(18, 60, 48)');
  await page.reload({waitUntil:'domcontentloaded'});
  await expect(page.locator('html')).not.toHaveClass(/sun-app-starting/);
  expect(await readColors(page)).toEqual(saved);
  await page.evaluate(()=>{
    const theme=window.SunBrandTheme.get();theme.sidebar.background='#49301B';theme.ui.background='#F0EADD';
    localStorage.setItem('sunBrandThemeV1',JSON.stringify(theme));
    window.dispatchEvent(new Event('sun:cloud-state-applied'));
  });
  const synced=await readColors(page);
  expect(synced.header).toContain('rgb(73, 48, 27)');
  expect(synced.body).toBe('rgb(240, 234, 221)');
});