const { chromium } = require('playwright');

const BASE = 'http://localhost:8000';
const OUT = '/home/glauko/viral-social/frontend/static/tutorial';

const pages = [
    { path: '/', name: 'dashboard', wait: 2000 },
    { path: '/feed', name: 'feed', wait: 3000 },
    { path: '/discover', name: 'discover', wait: 2000 },
    { path: '/scrape', name: 'scrape', wait: 2000 },
    { path: '/viral-scanner', name: 'viral_scanner', wait: 3000 },
    { path: '/intelligence', name: 'intelligence', wait: 2000 },
    { path: '/trends', name: 'trends', wait: 2000 },
    { path: '/sounds', name: 'sounds', wait: 2000 },
    { path: '/hashtags-page', name: 'hashtags', wait: 2000 },
    { path: '/shop', name: 'shop', wait: 2000 },
    { path: '/opportunities', name: 'opportunities', wait: 2000 },
    { path: '/competitors-spy', name: 'competitors', wait: 2000 },
    { path: '/ideas', name: 'ideas', wait: 2000 },
    { path: '/creators-page', name: 'creators', wait: 2000 },
    { path: '/calendar-page', name: 'calendar', wait: 2000 },
    { path: '/downloads-page', name: 'downloads', wait: 2000 },
    { path: '/scheduler-page', name: 'scheduler', wait: 2000 },
    { path: '/alerts-page', name: 'alerts', wait: 2000 },
    { path: '/settings-page', name: 'settings', wait: 2000 },
];

(async () => {
    const browser = await chromium.launch({ headless: true });
    const context = await browser.newContext({
        viewport: { width: 1440, height: 900 },
        deviceScaleFactor: 2,
    });

    for (const pg of pages) {
        try {
            const page = await context.newPage();
            await page.goto(BASE + pg.path, { waitUntil: 'networkidle', timeout: 15000 });
            await page.waitForTimeout(pg.wait);

            // Expand sidebar if collapsed
            try {
                await page.evaluate(() => {
                    localStorage.setItem('sidebar', 'true');
                });
            } catch(e) {}

            await page.screenshot({
                path: `${OUT}/${pg.name}.png`,
                fullPage: false,
            });
            console.log(`OK: ${pg.name}`);
            await page.close();
        } catch (e) {
            console.log(`FAIL: ${pg.name} - ${e.message.slice(0, 80)}`);
        }
    }

    // Mobile screenshot of dashboard
    const mobilePage = await context.newPage();
    await mobilePage.setViewportSize({ width: 390, height: 844 });
    await mobilePage.goto(BASE + '/', { waitUntil: 'networkidle', timeout: 15000 });
    await mobilePage.waitForTimeout(2000);
    await mobilePage.screenshot({ path: `${OUT}/mobile_dashboard.png` });
    console.log('OK: mobile_dashboard');
    await mobilePage.close();

    await browser.close();
    console.log('DONE');
})();
