#!/usr/bin/env node
/**
 * Debug script: dump actual DOM structure of an EMEX QuickDetails page
 */
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.goto(URL, { waitUntil: 'networkidle2', timeout: 30000 });
    await new Promise(r => setTimeout(r, 3000));

    const info = await page.evaluate(() => {
        const result = {};

        // 1. Check for hotspot divs
        const hotspotDivs = document.querySelectorAll('div.dragger.g_highlight');
        result.hotspotDivsCount = hotspotDivs.length;
        result.hotspotDivsSample = Array.from(hotspotDivs).slice(0, 3).map(d => ({
            name: d.getAttribute('name'),
            className: d.className,
            style: d.getAttribute('style'),
            outerHTML: d.outerHTML.substring(0, 200),
        }));

        // 2. Check for any divs with name attr and dragger class
        const allDraggerDivs = document.querySelectorAll('div.dragger');
        result.allDraggerDivsCount = allDraggerDivs.length;
        result.allDraggerSample = Array.from(allDraggerDivs).slice(0, 5).map(d => ({
            name: d.getAttribute('name'),
            className: d.className,
            tagName: d.tagName,
            outerHTML: d.outerHTML.substring(0, 200),
        }));

        // 3. Check for named divs generally
        const namedDivs = document.querySelectorAll('div[name]');
        result.namedDivsCount = namedDivs.length;
        result.namedDivsSample = Array.from(namedDivs).slice(0, 5).map(d => ({
            name: d.getAttribute('name'),
            className: d.className,
            style: d.getAttribute('style')?.substring(0, 100),
        }));

        // 4. Check for named table rows
        const namedTRs = document.querySelectorAll('tr[name]');
        result.namedTRsCount = namedTRs.length;
        result.namedTRsSample = Array.from(namedTRs).slice(0, 3).map(tr => ({
            name: tr.getAttribute('name'),
            className: tr.className,
            innerHTML: tr.innerHTML.substring(0, 300),
        }));

        // 5. Check for td with name attributes (c_pnc, c_oem, etc.)
        const namedTDs = document.querySelectorAll('td[name]');
        result.namedTDsCount = namedTDs.length;
        result.namedTDsSample = Array.from(namedTDs).slice(0, 10).map(td => ({
            name: td.getAttribute('name'),
            text: td.textContent.trim().substring(0, 50),
            display: td.style.display,
        }));

        // 6. Check images
        const imgs = document.querySelectorAll('img');
        result.allImgsCount = imgs.length;
        result.laximoImgs = Array.from(imgs)
            .filter(i => (i.src || '').includes('laximo'))
            .map(i => ({
                src: i.src,
                className: i.className,
                naturalWidth: i.naturalWidth,
                naturalHeight: i.naturalHeight,
            }));

        // 7. Check for iframes
        const iframes = document.querySelectorAll('iframe');
        result.iframeCount = iframes.length;
        result.iframeSrcs = Array.from(iframes).map(f => f.src?.substring(0, 200));

        // 8. All table rows summary
        const allTRs = document.querySelectorAll('table tr');
        result.allTRsCount = allTRs.length;
        // Show first few with >= 2 cells
        result.sampleTRs = Array.from(allTRs)
            .filter(tr => tr.querySelectorAll('td').length >= 2)
            .slice(0, 3)
            .map(tr => ({
                name: tr.getAttribute('name'),
                className: tr.className,
                onmouseover: tr.getAttribute('onmouseover'),
                cellTexts: Array.from(tr.querySelectorAll('td')).map(td => td.textContent.trim().substring(0, 50)),
            }));

        // 9. Check g_highlight class on any element
        const gHighlight = document.querySelectorAll('.g_highlight');
        result.gHighlightCount = gHighlight.length;
        result.gHighlightSample = Array.from(gHighlight).slice(0, 5).map(el => ({
            tagName: el.tagName,
            name: el.getAttribute('name'),
            className: el.className,
        }));

        return result;
    });

    console.log(JSON.stringify(info, null, 2));

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