import puppeteer from 'puppeteer';
import path from 'path';

async function main() {
  const browser = await puppeteer.launch({
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  const page = await browser.newPage();
  await page.setViewport({ width: 1440, height: 1200, deviceScaleFactor: 2 });

  const url = 'http://localhost:51720/prototypes/oneos-v2';
  console.log(`Navigating to ${url}...`);

  await page.goto(url, { waitUntil: 'networkidle2', timeout: 15000 });
  await new Promise(r => setTimeout(r, 1500));

  // 1. Scroll to Mobile Nav Section
  await page.evaluate(() => {
    const el = document.getElementById('sec-mobile_nav');
    if (el) el.scrollIntoView({ behavior: 'auto' });
  });
  await new Promise(r => setTimeout(r, 800));

  const shotMobileNavPath = path.resolve('.tmp-ds-mobile-nav-light.png');
  await page.screenshot({ path: shotMobileNavPath, fullPage: false });
  console.log(`Captured Light Mode screenshot to ${shotMobileNavPath}`);

  // 2. Click the top-right Theme Mode toggle button specifically
  await page.evaluate(() => {
    const topBarBtns = Array.from(document.querySelectorAll('button'));
    const themeBtn = topBarBtns.find(b => b.textContent && (b.textContent.includes('浅色') || b.textContent.includes('暗色')));
    if (themeBtn) themeBtn.click();
  });
  await new Promise(r => setTimeout(r, 800));

  // Scroll to Mobile Nav Section again
  await page.evaluate(() => {
    const el = document.getElementById('sec-mobile_nav');
    if (el) el.scrollIntoView({ behavior: 'auto' });
  });
  await new Promise(r => setTimeout(r, 800));

  const shotDarkPath = path.resolve('.tmp-ds-mobile-nav-dark.png');
  await page.screenshot({ path: shotDarkPath, fullPage: false });
  console.log(`Captured Dark Mode screenshot to ${shotDarkPath}`);

  await browser.close();
}

main().catch(console.error);