const puppeteer = require('puppeteer');
const AuthHelper = require('./auth_helper');

async function testRateLimitingChart() {
    const browser = await puppeteer.launch({
        headless: false,
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });

    try {
        const page = await browser.newPage();
        await page.setViewport({ width: 1280, height: 720 });

        const auth = new AuthHelper(page);
        await auth.ensureAuthenticated();

        console.log('Navigating to metrics...');
        await page.goto('http://127.0.0.1:5000/metrics/', {
            waitUntil: 'domcontentloaded',
            timeout: 30000
        });

        // Wait for content to fully load
        console.log('Waiting for metrics to load...');
        await new Promise(resolve => setTimeout(resolve, 5000));

        // Scroll to rate limiting section
        await page.evaluate(() => {
            const rateLimitSection = document.querySelector('#rate-limiting-chart');
            if (rateLimitSection) {
                rateLimitSection.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        });

        await new Promise(resolve => setTimeout(resolve, 2000));

        // Take screenshot
        await page.screenshot({
            path: './rate-limiting-chart.png',
            fullPage: false // Just viewport to see the focused area
        });
        console.log('Screenshot saved: ./rate-limiting-chart.png');

        // Check if chart is rendered
        const chartInfo = await page.evaluate(() => {
            const canvas = document.getElementById('rate-limiting-chart');
            if (!canvas) return { error: 'Canvas not found' };

            const ctx = canvas.getContext('2d');
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const hasContent = imageData.data.some((value, index) => {
                // Check alpha channel (every 4th value) for non-transparent pixels
                return index % 4 === 3 && value > 0;
            });

            // Check if Chart.js instance exists
            const chartExists = window.rateLimitingChart !== undefined;

            return {
                canvasFound: true,
                width: canvas.width,
                height: canvas.height,
                hasVisibleContent: hasContent,
                chartInstanceExists: chartExists,
                parentVisible: canvas.offsetParent !== null
            };
        });

        console.log('Chart Info:', JSON.stringify(chartInfo, null, 2));

        // Check console for errors
        const consoleErrors = [];
        page.on('console', msg => {
            if (msg.type() === 'error') {
                consoleErrors.push(msg.text());
            }
        });

        if (consoleErrors.length > 0) {
            console.log('Console errors:', consoleErrors);
        }

    } finally {
        await browser.close();
    }
}

testRateLimitingChart().catch(console.error);