#!/usr/bin/env node
/**
 * Debug: try clicking the image to expand it and check for hotspot divs
 */
const puppeteer = require('puppeteer');

const URL = process.argv[2] || 'https://emexdwc.ae/QuickDetails.aspx?c=SUBARU201802&gid=11884&vid=0&ssd=$*KwGdqbit1suR0ubYx-jFj8XR8fbomJ-emYinlNza6f7m4Nf0houS7-TvmejqkOewy9Ponp-Rlp6c1YC4n43Hi5KN5O-asbzd4-ian-ien5LPyNGNgovNjZSYmsXOyI3Xi5KN6IvWAAAAAHBDYDE=$';

(async () => {
    const browser = await puppeteer.launch({ headless: 'new', args: ['--no-sandbox'] });
    const page = await browser.newPage();
    await page.setViewport({ width: 1400, height: 900 });
    await page.goto(URL, { waitUntil: 'networkidle2', timeout: 30000 });
    await new Promise(r => setTimeout(r, 2000));

    // Check initial state
    let info = await page.evaluate(() => ({
        hotspotDivs: document.querySelectorAll('div.dragger.g_highlight').length,
        allDivWithName: document.querySelectorAll('div[name]').length,
        imgSrc: document.querySelector('img[src*="laximo"]')?.src,
        imgClass: document.querySelector('img[src*="laximo"]')?.className,
        imgParent: document.querySelector('img[src*="laximo"]')?.parentElement?.tagName,
        imgParentClass: document.querySelector('img[src*="laximo"]')?.parentElement?.className,
        // Check for any onclick or expandable behavior
        imgOnClick: document.querySelector('img[src*="laximo"]')?.getAttribute('onclick'),
        imgParentOnClick: document.querySelector('img[src*="laximo"]')?.parentElement?.getAttribute('onclick'),
        // Look for collapsed/expandable sections
        gCollapsed: document.querySelectorAll('.g_collapsed').length,
        // Look for "openedimage" variable
        bodyScripts: Array.from(document.querySelectorAll('script')).map(s => s.textContent?.substring(0, 200)).filter(t => t && t.includes('open')),
        // Check for a[href] around image
        imgAncestor: document.querySelector('img[src*="laximo"]')?.closest('a')?.href,
    }));
    console.log('=== INITIAL STATE ===');
    console.log(JSON.stringify(info, null, 2));

    // Try to find and click the image or its container
    const img = await page.$('img[src*="laximo"]');
    if (img) {
        console.log('\n=== CLICKING IMAGE ===');
        await img.click();
        await new Promise(r => setTimeout(r, 3000));

        info = await page.evaluate(() => ({
            hotspotDivs: document.querySelectorAll('div.dragger.g_highlight').length,
            allDivWithName: document.querySelectorAll('div[name]').length,
            namedDivSample: Array.from(document.querySelectorAll('div[name]')).slice(0, 3).map(d => ({
                name: d.getAttribute('name'),
                className: d.className,
                style: d.getAttribute('style')?.substring(0, 150),
                tagName: d.tagName,
            })),
            // Check for new images
            laximoImgs: Array.from(document.querySelectorAll('img[src*="laximo"]')).map(i => ({
                src: i.src,
                naturalWidth: i.naturalWidth,
                naturalHeight: i.naturalHeight,
                className: i.className,
            })),
            // Any position:absolute divs
            absoluteDivs: Array.from(document.querySelectorAll('div[style*="position:absolute"], div[style*="position: absolute"]')).slice(0, 5).map(d => ({
                name: d.getAttribute('name'),
                className: d.className,
                style: d.getAttribute('style')?.substring(0, 200),
            })),
            gHighlightAll: Array.from(document.querySelectorAll('.g_highlight')).map(el => ({
                tagName: el.tagName,
                name: el.getAttribute('name'),
                className: el.className,
            })),
        }));
        console.log('=== AFTER CLICK ===');
        console.log(JSON.stringify(info, null, 2));
    }

    // Also try the "expand" link that EMEX pages sometimes have
    const expandLink = await page.$('a[href*="openimage"], .expand, [onclick*="openimage"], [onclick*="open_image"]');
    if (expandLink) {
        console.log('\n=== CLICKING EXPAND LINK ===');
        await expandLink.click();
        await new Promise(r => setTimeout(r, 3000));
    }

    // Screenshot after interactions
    await page.screenshot({ path: '/tmp/emex-debug-after-click.png', fullPage: true });
    console.log('\nScreenshot saved to /tmp/emex-debug-after-click.png');

    // Get full page HTML snippet around the image area
    const imageAreaHTML = await page.evaluate(() => {
        const img = document.querySelector('img[src*="laximo"]');
        if (!img) return 'NO IMAGE FOUND';
        // Get the containing div/table
        let container = img.parentElement;
        for (let i = 0; i < 5 && container; i++) {
            if (container.querySelectorAll('div[name], .g_highlight').length > 0) break;
            container = container.parentElement;
        }
        return container?.innerHTML?.substring(0, 2000) || 'NO CONTAINER';
    });
    console.log('\n=== IMAGE AREA HTML ===');
    console.log(imageAreaHTML);

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