#!/usr/bin/env node
/**
 * Debug: check Unit.aspx for hotspot overlays
 */
const puppeteer = require('puppeteer');

const QUICK_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 });

    // Step 1: go to QuickDetails to extract Unit.aspx link
    console.log('=== Loading QuickDetails ===');
    await page.goto(QUICK_URL, { waitUntil: 'networkidle2', timeout: 30000 });
    await new Promise(r => setTimeout(r, 2000));

    const unitUrl = await page.evaluate(() => {
        // Find Unit.aspx link
        const links = document.querySelectorAll('a[href*="Unit.aspx"]');
        if (links.length > 0) {
            return links[0].href;
        }
        return null;
    });
    console.log('Unit.aspx URL:', unitUrl);

    if (!unitUrl) {
        console.log('No Unit.aspx link found!');
        await browser.close();
        return;
    }

    // Step 2: navigate to Unit.aspx
    console.log('\n=== Loading Unit.aspx ===');
    await page.goto(unitUrl, { waitUntil: 'networkidle2', timeout: 30000 });
    await new Promise(r => setTimeout(r, 3000));

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

        // Hotspot divs
        const hotspotDivs = document.querySelectorAll('div.dragger.g_highlight');
        result.hotspotDivsCount = hotspotDivs.length;
        result.hotspotDivsSample = Array.from(hotspotDivs).slice(0, 5).map(d => ({
            name: d.getAttribute('name'),
            className: d.className,
            style: d.getAttribute('style'),
        }));

        // Any div with name + position:absolute
        const absDivs = document.querySelectorAll('div[name][style*="absolute"]');
        result.absoluteNamedDivs = absDivs.length;
        result.absoluteNamedDivsSample = Array.from(absDivs).slice(0, 5).map(d => ({
            name: d.getAttribute('name'),
            className: d.className,
            style: d.getAttribute('style'),
        }));

        // Named divs
        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, 150),
        }));

        // Images
        result.laximoImgs = Array.from(document.querySelectorAll('img[src*="laximo"]')).map(i => ({
            src: i.src,
            className: i.className,
            naturalWidth: i.naturalWidth,
            naturalHeight: i.naturalHeight,
        }));

        // Named TRs
        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,
        }));

        // Named TDs
        const pncCells = document.querySelectorAll('td[name="c_pnc"]');
        result.pncCellsCount = pncCells.length;
        result.pncValues = Array.from(pncCells).map(td => td.textContent.trim());

        // img.dragger specifically
        const draggerImgs = document.querySelectorAll('img.dragger');
        result.draggerImgsCount = draggerImgs.length;
        result.draggerImgs = Array.from(draggerImgs).map(i => ({
            src: i.src?.substring(0, 100),
            className: i.className,
            naturalWidth: i.naturalWidth,
            naturalHeight: i.naturalHeight,
        }));

        // g_highlight elements
        result.gHighlightAll = Array.from(document.querySelectorAll('.g_highlight')).slice(0, 10).map(el => ({
            tagName: el.tagName,
            name: el.getAttribute('name'),
            className: el.className,
        }));

        return result;
    });

    console.log(JSON.stringify(info, null, 2));
    await page.screenshot({ path: '/tmp/emex-unit-page.png', fullPage: true });
    console.log('\nScreenshot saved to /tmp/emex-unit-page.png');

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