#!/usr/bin/env node

const puppeteer = require('puppeteer');

async function debugStarReviews() {
    console.log('🚀 Starting star reviews debug test...');

    const browser = await puppeteer.launch({
        headless: false,
        args: [
            '--no-sandbox',
            '--disable-setuid-sandbox',
            '--disable-web-security',
            '--disable-features=VizDisplayCompositor'
        ],
        slowMo: 100  // Slow down for debugging
    });

    const page = await browser.newPage();

    // Enable console logging
    page.on('console', msg => {
        const type = msg.type();
        if (type === 'error') {
            console.log('❌ BROWSER ERROR:', msg.text());
        } else if (type === 'warn') {
            console.log('⚠️  BROWSER WARNING:', msg.text());
        } else {
            console.log('📝 BROWSER LOG:', msg.text());
        }
    });

    // Monitor network requests
    page.on('response', response => {
        const url = response.url();
        const status = response.status();
        if (url.includes('/metrics/api/star-reviews')) {
            console.log(`🌐 API Response: ${url} - Status: ${status}`);
        }
    });

    // Monitor request failures
    page.on('requestfailed', request => {
        console.log('❌ REQUEST FAILED:', request.url(), request.failure().errorText);
    });

    try {
        console.log('📄 Navigating to star reviews page...');
        await page.goto('http://localhost:5000/metrics/star-reviews', {
            waitUntil: 'networkidle2',
            timeout: 10000
        });

        // Wait for page to load
        await page.waitForSelector('body', { timeout: 5000 });

        console.log('🔍 Checking page title...');
        const title = await page.title();
        console.log('Page title:', title);

        // Check if main containers exist
        console.log('🏗️  Checking page structure...');
        const hasMainContainer = await page.$('.star-reviews-container') !== null;
        console.log('Main container exists:', hasMainContainer);

        const hasHeader = await page.$('h1') !== null;
        console.log('Header exists:', hasHeader);

        if (hasHeader) {
            const headerText = await page.$eval('h1', el => el.textContent);
            console.log('Header text:', headerText);
        }

        // Check for loading indicators
        console.log('⏳ Checking for loading states...');
        const loadingElements = await page.$$('.loading, .spinner, [data-loading]');
        console.log('Loading elements found:', loadingElements.length);

        // Wait for API call to complete
        console.log('🔄 Waiting for API data...');
        await new Promise(resolve => setTimeout(resolve, 3000));

        // Check API response manually
        console.log('📡 Testing API endpoint directly...');
        const apiResponse = await page.evaluate(async () => {
            try {
                const response = await fetch('/metrics/api/star-reviews');
                const data = await response.json();
                return { success: true, data, status: response.status };
            } catch (error) {
                return { success: false, error: error.message };
            }
        });

        console.log('API Response:', JSON.stringify(apiResponse, null, 2));

        // Check for chart canvases
        console.log('📊 Checking for chart elements...');
        const chartCanvases = await page.$$('canvas');
        console.log('Chart canvases found:', chartCanvases.length);

        for (let i = 0; i < chartCanvases.length; i++) {
            const canvasId = await chartCanvases[i].evaluate(el => el.id);
            const canvasVisible = await chartCanvases[i].isIntersectingViewport();
            console.log(`Canvas ${i}: ID="${canvasId}", Visible=${canvasVisible}`);
        }

        // Check for data display elements
        console.log('📋 Checking for data display elements...');
        const statsCards = await page.$$('.stat-card, .metric-card, .card');
        console.log('Stats cards found:', statsCards.length);

        // Check for error messages
        console.log('🚨 Checking for error messages...');
        const errorElements = await page.$$('.error, .alert-danger, [data-error]');
        console.log('Error elements found:', errorElements.length);

        for (let errorEl of errorElements) {
            const errorText = await errorEl.evaluate(el => el.textContent);
            console.log('Error message:', errorText);
        }

        // Check JavaScript execution
        console.log('🔧 Testing JavaScript functionality...');
        const jsTest = await page.evaluate(() => {
            // Check if Chart.js is loaded
            const chartJsLoaded = typeof Chart !== 'undefined';

            // Check if our custom functions exist
            const customFunctionsExist = typeof updateLLMChart === 'function' &&
                                       typeof updateSearchEngineChart === 'function';

            // Check if data loading function exists
            const dataLoadingExists = typeof loadStarReviews === 'function';

            return {
                chartJsLoaded,
                customFunctionsExist,
                dataLoadingExists,
                windowChart: !!window.Chart
            };
        });

        console.log('JavaScript test results:', jsTest);

        // Try to manually trigger data loading
        console.log('🎯 Attempting manual data loading...');
        const manualLoadResult = await page.evaluate(() => {
            if (typeof loadStarReviews === 'function') {
                try {
                    loadStarReviews();
                    return { success: true, message: 'Data loading triggered' };
                } catch (error) {
                    return { success: false, error: error.message };
                }
            } else {
                return { success: false, error: 'loadStarReviews function not found' };
            }
        });

        console.log('Manual load result:', manualLoadResult);

        // Wait a bit more for any delayed rendering
        await new Promise(resolve => setTimeout(resolve, 2000));

        // Take a screenshot for visual debugging
        console.log('📸 Taking screenshot...');
        await page.screenshot({
            path: '/home/martin/code/LDR2/local-deep-research/star_reviews_debug.png',
            fullPage: true
        });

        // Final check of page content
        console.log('🏁 Final content check...');
        const pageContent = await page.evaluate(() => {
            const body = document.body;
            return {
                hasContent: body.children.length > 0,
                bodyText: body.innerText.length,
                innerHTML: body.innerHTML.length
            };
        });

        console.log('Page content:', pageContent);

        console.log('✅ Debug test completed successfully!');

    } catch (error) {
        console.error('❌ Test failed:', error.message);
        console.error('Stack trace:', error.stack);
    } finally {
        console.log('🔚 Closing browser...');
        await browser.close();
    }
}

// Run the test
if (require.main === module) {
    debugStarReviews().catch(console.error);
}

module.exports = { debugStarReviews };
