import { chromium } from 'playwright';

const TABS = [
  { name: 'prayer', tab: 0, label: 'Prayer Times — Schedule & Next Prayer' },
  { name: 'qibla', tab: 1, label: 'Qibla Finder — Compass & Direction' },
  { name: 'quran', tab: 2, label: 'Holy Quran — Surah List' },
  { name: 'hijri', tab: 3, label: 'Hijri Calendar — Islamic Date' },
  { name: 'tasbih', tab: 4, label: 'Tasbih Counter — Dhikr Counter' },
  { name: 'names99', tab: 5, label: '99 Names of Allah — Asma-ul-Husna' },
];

const URL = 'https://moslem.falahos.my';
const OUTPUT_DIR = '/tmp/nur-falah-screenshots';

import { mkdir } from 'fs';
mkdir(OUTPUT_DIR, { recursive: true }, () => {});

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
  viewport: { width: 390, height: 844 }, // iPhone 14 Pro size
  deviceScaleFactor: 3,
  isMobile: true,
  locale: 'en-GB',
  timezoneId: 'Asia/Kuala_Lumpur',
});
const page = await context.newPage();

for (const tab of TABS) {
  console.log(`📸 Capturing: ${tab.name}...`);
  await page.goto(URL, { waitUntil: 'networkidle', timeout: 30000 });

  // Click the tab button (index-based)
  const tabButtons = await page.locator('nav button').all();
  if (tabButtons[tab.tab]) {
    await tabButtons[tab.tab].click();
    await page.waitForTimeout(1000);
  }

  // Take full-page screenshot
  const path = `${OUTPUT_DIR}/${tab.name}.png`;
  await page.screenshot({ path, fullPage: false });
  console.log(`  ✅ Saved: ${path}`);
}

// Also take a prayer notification enabled version for variety
console.log(`📸 Capturing: prayer-notification...`);
await page.goto(URL, { waitUntil: 'networkidle', timeout: 30000 });
// Check the notification checkbox
const notifyCheckbox = page.locator('input[type="checkbox"], [role="checkbox"]').first();
if (await notifyCheckbox.isVisible()) {
  await notifyCheckbox.check().catch(() => {});
  await page.waitForTimeout(500);
}
const pathNotif = `${OUTPUT_DIR}/prayer-notification.png`;
await page.screenshot({ path: pathNotif, fullPage: false });
console.log(`  ✅ Saved: ${pathNotif}`);

await browser.close();
console.log('\n🎉 All screenshots captured!');