#!/usr/bin/env node
/**
 * Comprehensive Page Mapper
 * 
 * This script fully maps the UDM Pro routing page to understand:
 * - All UI elements and their relationships
 * - Page state and how it changes
 * - Where buttons appear based on context
 * - How scrolling and interactions affect element visibility
 */

import { chromium } from 'playwright';
import { readFileSync, writeFileSync } from 'fs';
import { join } from 'path';
import { homedir } from 'os';

// Load environment variables
const envPath = join(homedir(), '.env');
function loadEnvFile(filePath) {
  try {
    const envFile = readFileSync(filePath, 'utf8');
    const envVars = envFile.split('\n').filter(
      (line) => line.includes('=') && !line.trim().startsWith('#')
    );
    for (const line of envVars) {
      const [key, ...values] = line.split('=');
      if (key && values.length > 0 && /^[A-Z_][A-Z0-9_]*$/.test(key.trim())) {
        let value = values.join('=').trim();
        if (
          (value.startsWith('"') && value.endsWith('"')) ||
          (value.startsWith("'") && value.endsWith("'"))
        ) {
          value = value.slice(1, -1);
        }
        process.env[key.trim()] = value;
      }
    }
    return true;
  } catch {
    return false;
  }
}

loadEnvFile(envPath);

const UDM_URL = process.env.UNIFI_UDM_URL || 'https://192.168.0.1';
const USERNAME = process.env.UNIFI_BROWSER_USERNAME || process.env.UNIFI_USERNAME || 'unifi_api';
const PASSWORD = process.env.UNIFI_BROWSER_PASSWORD || process.env.UNIFI_PASSWORD;

console.log('🗺️  Comprehensive UDM Pro Page Mapper');
console.log('=====================================\n');

if (!PASSWORD) {
  console.error('❌ UNIFI_PASSWORD must be set in ~/.env');
  process.exit(1);
}

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext({ ignoreHTTPSErrors: true });
  const page = await context.newPage();
  
  try {
    console.log('1. Logging in...');
    await page.goto(UDM_URL, { waitUntil: 'networkidle' });
    await page.waitForSelector('input[type="text"]');
    await page.fill('input[type="text"]', USERNAME);
    await page.fill('input[type="password"]', PASSWORD);
    await page.click('button[type="submit"]');
    await page.waitForTimeout(5000);
    
    console.log('2. Navigating to Routing page...');
    
    // First ensure we're logged in and on dashboard
    const currentUrl = page.url();
    if (currentUrl.includes('/login')) {
      console.log('   Still on login, waiting for redirect...');
      await page.waitForURL('**/network/**', { timeout: 15000 }).catch(() => {});
      await page.waitForTimeout(3000);
    }
    
    // Navigate to routing page
    console.log('   Navigating to routing settings...');
    await page.goto(`${UDM_URL}/network/default/settings/routing`, { waitUntil: 'domcontentloaded' });
    await page.waitForTimeout(3000);
    
    // Wait for URL to be correct (handle redirects)
    try {
      await page.waitForURL('**/settings/routing**', { timeout: 20000 });
      console.log('   ✅ On routing page');
    } catch (error) {
      console.log(`   ⚠️  URL check failed, current: ${page.url()}`);
      // Try navigating again
      await page.goto(`${UDM_URL}/network/default/settings/routing`, { waitUntil: 'networkidle' });
      await page.waitForTimeout(5000);
    }
    
    // Verify we're on the right page
    const pageText = await page.textContent('body').catch(() => '');
    if (!pageText.includes('Route') && !pageText.includes('routing') && !pageText.includes('Static')) {
      console.log('   ⚠️  Page may not be fully loaded, waiting more...');
      await page.waitForTimeout(10000);
    }
    
    console.log(`   Current URL: ${page.url()}`);
    
    // Wait for routes API
    try {
      await page.waitForResponse(response => 
        response.url().includes('/rest/routing') || response.url().includes('/trafficroutes'),
        { timeout: 15000 }
      );
      console.log('   Routes API loaded');
    } catch (error) {
      console.log('   Routes API not detected');
    }
    
    await page.waitForTimeout(5000);
    
    console.log('3. Comprehensive page mapping...\n');
    
    // Take full page screenshot
    await page.screenshot({ path: 'mapper-full-page.png', fullPage: true });
    console.log('   Screenshot saved: mapper-full-page.png');
    
    // Map page at different scroll positions
    const scrollPositions = [0, 500, 1000, 1500, 2000];
    const pageMaps = [];
    
    for (const scrollY of scrollPositions) {
      await page.evaluate((y) => window.scrollTo(0, y), scrollY);
      await page.waitForTimeout(2000);
      
      const map = await page.evaluate(() => {
        const result = {
          scrollY: window.scrollY,
          viewport: { width: window.innerWidth, height: window.innerHeight },
          elements: {
            buttons: [],
            links: [],
            inputs: [],
            tables: [],
            sections: [],
            text: [],
          },
        };
        
        // Get all buttons with full context
        const buttons = Array.from(document.querySelectorAll('button, [role="button"]'));
        buttons.forEach((btn, index) => {
          const rect = btn.getBoundingClientRect();
          const styles = window.getComputedStyle(btn);
          if (rect.width > 0 && rect.height > 0 && styles.display !== 'none') {
            // Check if in viewport
            const inViewport = rect.top >= 0 && rect.top < window.innerHeight &&
                              rect.left >= 0 && rect.left < window.innerWidth;
            
            if (inViewport) {
              // Get full parent hierarchy
              let parent = btn;
              const hierarchy = [];
              for (let i = 0; i < 5; i++) {
                parent = parent.parentElement;
                if (!parent || parent === document.body) break;
                const parentText = parent.textContent?.trim().substring(0, 100) || '';
                const parentClass = parent.className || '';
                hierarchy.push({
                  tag: parent.tagName,
                  class: parentClass.substring(0, 80),
                  text: parentText,
                  hasRoute: parentText.includes('Route') || parentText.includes('Static'),
                  hasTable: parent.tagName === 'TABLE' || parent.querySelector('table'),
                });
              }
              
              result.elements.buttons.push({
                index,
                text: btn.textContent?.trim() || '',
                className: btn.className || '',
                id: btn.id || '',
                ariaLabel: btn.getAttribute('aria-label') || '',
                dataTestId: btn.getAttribute('data-testid') || '',
                position: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
                iconOnly: !btn.textContent?.trim() && btn.querySelector('svg'),
                enabled: !btn.disabled,
                visible: styles.visibility !== 'hidden',
                hierarchy: hierarchy.slice(0, 3), // Top 3 parents
              });
            }
          }
        });
        
        // Get all tables
        const tables = Array.from(document.querySelectorAll('table'));
        tables.forEach((table, index) => {
          const rect = table.getBoundingClientRect();
          if (rect.width > 0 && rect.height > 0) {
            const inViewport = rect.top >= 0 && rect.top < window.innerHeight;
            if (inViewport) {
              const headers = Array.from(table.querySelectorAll('th')).map(th => th.textContent?.trim() || '');
              const rows = Array.from(table.querySelectorAll('tbody tr, tr')).length;
              const tableText = table.textContent || '';
              
              result.elements.tables.push({
                index,
                headers,
                rowCount: rows,
                hasRouteText: tableText.includes('Route') || tableText.includes('Static'),
                position: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
                buttonsInTable: Array.from(table.querySelectorAll('button')).length,
              });
            }
          }
        });
        
        // Get all text content that might indicate sections
        const routeTexts = [];
        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
        let node;
        while (node = walker.nextNode()) {
          const text = node.textContent?.trim() || '';
          if (text && (text.includes('Static Routes') || text.includes('Route') || text.includes('Add'))) {
            const parent = node.parentElement;
            if (parent) {
              routeTexts.push({
                text: text.substring(0, 100),
                tag: parent.tagName,
                className: parent.className?.substring(0, 80) || '',
                position: parent.getBoundingClientRect(),
              });
            }
          }
        }
        result.elements.text = routeTexts.slice(0, 20);
        
        return result;
      });
      
      pageMaps.push(map);
    }
    
    // Analyze results
    console.log('📊 Page Mapping Results:');
    console.log('='.repeat(80));
    
    // Combine all buttons found at different scroll positions
    const allButtons = new Map();
    pageMaps.forEach((map, scrollIndex) => {
      map.elements.buttons.forEach(btn => {
        const key = btn.id || btn.className || `${btn.position.x}-${btn.position.y}`;
        if (!allButtons.has(key)) {
          allButtons.set(key, { ...btn, foundAtScroll: [scrollIndex] });
        } else {
          allButtons.get(key).foundAtScroll.push(scrollIndex);
        }
      });
    });
    
    console.log(`\n🔘 Unique Buttons Found: ${allButtons.size}`);
    Array.from(allButtons.values()).forEach((btn, i) => {
      console.log(`\n${i + 1}. Button:`);
      console.log(`   Text: "${btn.text}"`);
      console.log(`   Class: ${btn.className.substring(0, 80)}`);
      console.log(`   ID: ${btn.id || 'none'}`);
      console.log(`   Position: (${btn.position.x}, ${btn.position.y})`);
      console.log(`   Icon Only: ${btn.iconOnly}`);
      console.log(`   Enabled: ${btn.enabled}`);
      console.log(`   Found at scroll positions: ${btn.foundAtScroll.join(', ')}`);
      if (btn.hierarchy.length > 0) {
        console.log(`   Parent Context:`);
        btn.hierarchy.forEach((parent, j) => {
          console.log(`     ${j + 1}. <${parent.tag}> ${parent.class} - "${parent.text.substring(0, 50)}"`);
          console.log(`        Has Route: ${parent.hasRoute}, Has Table: ${parent.hasTable}`);
        });
      }
    });
    
    // Find tables
    const allTables = [];
    pageMaps.forEach(map => {
      map.elements.tables.forEach(table => {
        if (!allTables.find(t => t.index === table.index)) {
          allTables.push(table);
        }
      });
    });
    
    console.log(`\n📋 Tables Found: ${allTables.length}`);
    allTables.forEach((table, i) => {
      console.log(`\n${i + 1}. Table ${table.index}:`);
      console.log(`   Headers: ${table.headers.join(', ')}`);
      console.log(`   Rows: ${table.rowCount}`);
      console.log(`   Has Route Text: ${table.hasRouteText}`);
      console.log(`   Buttons in Table: ${table.buttonsInTable}`);
      console.log(`   Position: (${table.position.x}, ${table.position.y})`);
    });
    
    // Find route-related text
    const routeTexts = [];
    pageMaps.forEach(map => {
      map.elements.text.forEach(text => {
        if (!routeTexts.find(t => t.text === text.text)) {
          routeTexts.push(text);
        }
      });
    });
    
    console.log(`\n📝 Route-Related Text Found: ${routeTexts.length}`);
    routeTexts.forEach((text, i) => {
      console.log(`\n${i + 1}. "${text.text}"`);
      console.log(`   Tag: ${text.tag}, Class: ${text.className}`);
      console.log(`   Position: (${text.position.x}, ${text.position.y})`);
    });
    
    // Save full map to file
    const mapData = {
      url: page.url(),
      timestamp: new Date().toISOString(),
      scrollMaps: pageMaps,
      allButtons: Array.from(allButtons.values()),
      allTables,
      routeTexts,
    };
    
    writeFileSync('page-map.json', JSON.stringify(mapData, null, 2));
    console.log('\n💾 Full page map saved to: page-map.json');
    
    // Identify most likely Add button
    console.log(`\n🎯 Most Likely Add Button Candidates:`);
    console.log('='.repeat(80));
    
    const candidates = Array.from(allButtons.values())
      .filter(btn => btn.iconOnly || btn.text.toLowerCase().includes('add') || btn.text.toLowerCase().includes('create'))
      .sort((a, b) => {
        // Prioritize buttons with route context
        const aHasRoute = a.hierarchy.some(p => p.hasRoute);
        const bHasRoute = b.hierarchy.some(p => p.hasRoute);
        if (aHasRoute && !bHasRoute) return -1;
        if (!aHasRoute && bHasRoute) return 1;
        
        // Then prioritize buttons near tables
        const aNearTable = a.hierarchy.some(p => p.hasTable);
        const bNearTable = b.hierarchy.some(p => p.hasTable);
        if (aNearTable && !bNearTable) return -1;
        if (!aNearTable && bNearTable) return 1;
        
        return 0;
      });
    
    candidates.slice(0, 5).forEach((btn, i) => {
      console.log(`\n${i + 1}. "${btn.text}" - ${btn.className.substring(0, 60)}`);
      console.log(`   ID: ${btn.id || 'none'}`);
      console.log(`   Has Route Context: ${btn.hierarchy.some(p => p.hasRoute)}`);
      console.log(`   Near Table: ${btn.hierarchy.some(p => p.hasTable)}`);
      console.log(`   Selector: ${btn.id ? `#${btn.id}` : `.${btn.className.split(' ')[0]}`}`);
    });
    
    console.log('\n\n⏸️  Page is open in browser. Inspect manually if needed.');
    console.log('Press Ctrl+C to close...\n');
    
    await page.waitForTimeout(60000);
    
  } catch (error) {
    console.error('❌ Error:', error.message);
    await page.screenshot({ path: 'mapper-error.png', fullPage: true });
  } finally {
    await browser.close();
  }
})();