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

(async () => {
    const browser = await chromium.launch({ headless: true });
    const context = await browser.newContext();
    const page = await context.newPage();

    page.on('console', msg => console.log('CONSOLE:', msg.type(), msg.text().substring(0, 150)));
    page.on('pageerror', err => console.log('PAGE ERROR:', err.message));

    // Step 1: Load login page
    console.log('\n=== Step 1: Load login page ===');
    await page.goto('http://localhost:8080/rlogin', { waitUntil: 'networkidle', timeout: 10000 });
    console.log('URL:', page.url());

    // Step 2: Submit login form
    console.log('\n=== Step 2: Submit login ===');
    await page.fill('input[name="lfEmail"]', 'alice@demo.com');
    await page.fill('input[name="lfPassword"]', 'password123');
    await page.click('button[type="submit"]');
    await page.waitForTimeout(3000);
    console.log('URL after submit:', page.url());

    // Check cookies
    const cookies = await context.cookies();
    console.log('Cookies:', JSON.stringify(cookies.map(c => ({ name: c.name, value: c.value.substring(0, 20), domain: c.domain, path: c.path }))));

    // Check content
    const content = await page.content();
    console.log('Has "Go to Dashboard":', content.includes('Go to Dashboard'));
    console.log('Has "Logged In":', content.includes('Logged In'));

    // Step 3: Click "Go to Dashboard"
    console.log('\n=== Step 3: Click Go to Dashboard ===');
    const dashLink = await page.$('a[href="/rdashboard"]');
    if (dashLink) {
        console.log('Found dashboard link');
        await dashLink.click();
        await page.waitForTimeout(3000);
    } else {
        console.log('No dashboard link found, navigating directly');
        await page.goto('http://localhost:8080/rdashboard', { waitUntil: 'networkidle', timeout: 10000 });
    }
    console.log('URL after dashboard:', page.url());
    
    const dashContent = await page.content();
    console.log('Has "Welcome Back":', dashContent.includes('Welcome Back'));
    console.log('Has "Dashboard":', dashContent.includes('Dashboard'));
    console.log('Has "Overdue":', dashContent.includes('Overdue'));
    console.log('Has "No households":', dashContent.includes('No households'));

    // Step 4: Check what happens when clicking navbar Dashboard
    console.log('\n=== Step 4: Click navbar Dashboard ===');
    const navLinks = await page.$$('a');
    for (const link of navLinks) {
        const href = await link.getAttribute('href');
        const text = await link.textContent();
        if (text && text.trim() === 'Dashboard') {
            console.log('Found navbar Dashboard link:', href);
            await link.click();
            await page.waitForTimeout(3000);
            break;
        }
    }
    console.log('URL after navbar click:', page.url());
    const navContent = await page.content();
    console.log('Has "Welcome Back":', navContent.includes('Welcome Back'));
    console.log('Has "Overdue":', navContent.includes('Overdue'));

    await browser.close();
    console.log('\nDone.');
})().catch(e => { console.error('FAIL:', e.message); process.exit(1); });