#!/usr/bin/env node

/**
 * Debug script to inspect the floating menu structure
 */

const fs = require('fs');
const { JSDOM } = require('jsdom');

// Load the generated HTML file
const htmlContent = fs.readFileSync('/tmp/test_section_click_fixed.html', 'utf8');

// Create JSDOM environment
const dom = new JSDOM(htmlContent, {
    runScripts: "dangerously",
    resources: "usable",
    pretendToBeVisual: true
});

const { window } = dom;
const { document } = window;

// Add console methods to window for debugging
window.console = console;

// Wait for DOM to load and components to initialize
setTimeout(() => {
    try {
        console.log('🔍 Debugging floating menu structure...');

        const components = window.markitectComponents;
        if (!components) {
            console.error('❌ Components not initialized');
            return;
        }

        const { sectionManager, domRenderer } = components;

        // Find first section and click it
        const renderedSections = document.querySelectorAll('.ui-edit-section');
        if (renderedSections.length > 0) {
            const firstSectionElement = renderedSections[0];
            const sectionId = firstSectionElement.getAttribute('data-section-id');

            // Simulate click
            const clickEvent = new window.MouseEvent('click', {
                bubbles: true,
                cancelable: true,
                view: window
            });

            firstSectionElement.dispatchEvent(clickEvent);

            setTimeout(() => {
                // Inspect the floating menu
                const floatingMenu = document.querySelector('.ui-edit-floating-menu');
                if (floatingMenu) {
                    console.log('📋 Floating menu found!');
                    console.log('   innerHTML:', floatingMenu.innerHTML.substring(0, 200) + '...');

                    // Find all buttons
                    const buttons = floatingMenu.querySelectorAll('button');
                    console.log(`   Found ${buttons.length} buttons:`);

                    buttons.forEach((button, index) => {
                        console.log(`   Button ${index + 1}:`);
                        console.log(`     Text: "${button.textContent}"`);
                        console.log(`     Style: ${button.style.cssText}`);
                        console.log(`     Background: ${button.style.background}`);
                    });

                    // Check for specific selectors
                    console.log('\n🔍 Testing button selectors:');

                    const acceptByText = Array.from(buttons).find(btn => btn.textContent.includes('Accept'));
                    const cancelByText = Array.from(buttons).find(btn => btn.textContent.includes('Cancel'));

                    console.log(`   Accept button by text: ${acceptByText ? 'Found' : 'Not found'}`);
                    console.log(`   Cancel button by text: ${cancelByText ? 'Found' : 'Not found'}`);

                    const acceptByStyle = floatingMenu.querySelector('button[style*="#28a745"]');
                    const cancelByStyle = floatingMenu.querySelector('button[style*="#dc3545"]');

                    console.log(`   Accept button by style (#28a745): ${acceptByStyle ? 'Found' : 'Not found'}`);
                    console.log(`   Cancel button by style (#dc3545): ${cancelByStyle ? 'Found' : 'Not found'}`);

                    if (acceptByText) {
                        console.log(`   Accept button actual style: ${acceptByText.style.cssText}`);
                    }
                    if (cancelByText) {
                        console.log(`   Cancel button actual style: ${cancelByText.style.cssText}`);
                    }

                } else {
                    console.log('❌ Floating menu not found');
                }
            }, 300);
        }

    } catch (error) {
        console.error('❌ Debug failed:', error.message);
    }
}, 1000);