import { chromium } from 'playwright';

async function testFilterFunctionality() {
  console.log('Starting filter functionality test...');

  const browser = await chromium.launch({
    headless: false,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });

  const page = await browser.newPage();

  // Collect console logs
  const logs: string[] = [];
  page.on('console', msg => {
    const text = msg.text();
    logs.push(`[${msg.type()}] ${text}`);
    if (text.includes('filter') || text.includes('Filter') || text.includes('node') || text.includes('Node')) {
      console.log(`RELEVANT: ${text}`);
    }
  });

  try {
    console.log('Navigating to VisionFlow...');
    await page.goto('http://192.168.0.51:3001', { waitUntil: 'domcontentloaded', timeout: 30000 });
    await page.waitForTimeout(5000);

    // Dismiss SpaceMouse dialog if present
    const dismissButton = await page.locator('button:has-text("Dismiss")').first();
    if (await dismissButton.isVisible().catch(() => false)) {
      await dismissButton.click();
      console.log('Dismissed SpaceMouse dialog');
      await page.waitForTimeout(500);
    }

    // Take initial screenshot
    await page.screenshot({ path: '/tmp/filter-func-1-initial.png' });
    console.log('Screenshot 1: Initial state');

    // Look for node count in System Status
    const nodeCountRegex = /(\d+)\s*nodes/i;
    const pageContent = await page.content();
    const nodeMatch = pageContent.match(nodeCountRegex);
    if (nodeMatch) {
      console.log(`Initial node count from page: ${nodeMatch[1]}`);
    }

    // Find the Enable Filtering toggle
    console.log('\n=== Looking for filter controls ===');

    // Look for "Enable Filtering" text/checkbox
    const filterToggle = await page.locator('text=Enable Filtering').first();
    if (await filterToggle.isVisible().catch(() => false)) {
      console.log('Found "Enable Filtering" label');

      // Find the associated checkbox/toggle - it might be a sibling or parent element
      const checkbox = await page.locator('input[type="checkbox"]').first();
      if (await checkbox.isVisible().catch(() => false)) {
        const isChecked = await checkbox.isChecked();
        console.log(`Checkbox found, checked: ${isChecked}`);

        if (!isChecked) {
          console.log('Enabling filtering...');
          await checkbox.click();
          await page.waitForTimeout(2000);
          await page.screenshot({ path: '/tmp/filter-func-2-enabled.png' });
          console.log('Screenshot 2: Filtering enabled');
        }
      }
    }

    // Look for Quality Threshold slider
    const qualitySlider = await page.locator('input[type="range"]').first();
    if (await qualitySlider.isVisible().catch(() => false)) {
      console.log('Found quality threshold slider');

      // Get current value
      const currentValue = await qualitySlider.inputValue();
      console.log(`Current slider value: ${currentValue}`);

      // Set to high value (0.8) to filter aggressively
      console.log('Setting quality threshold to 0.8 (aggressive filtering)...');
      await qualitySlider.fill('0.8');
      await page.waitForTimeout(2000);

      await page.screenshot({ path: '/tmp/filter-func-3-high-threshold.png' });
      console.log('Screenshot 3: High threshold set');

      // Check new node count
      const newPageContent = await page.content();
      const newNodeMatch = newPageContent.match(nodeCountRegex);
      if (newNodeMatch) {
        console.log(`Node count after filtering: ${newNodeMatch[1]}`);
      }
    }

    // Look for specific UI elements that might show filter status
    console.log('\n=== Checking for filter status indicators ===');

    // Look for "Filtered" text anywhere
    const filteredText = await page.locator('text=/filtered/i').first();
    if (await filteredText.isVisible().catch(() => false)) {
      const text = await filteredText.textContent();
      console.log(`Found filtered indicator: ${text}`);
    }

    // Look for node count display that might update
    const nodeDisplay = await page.locator('[class*="node"], [class*="count"], [class*="status"]').all();
    for (const el of nodeDisplay.slice(0, 5)) {
      const text = await el.textContent().catch(() => '');
      if (text && text.includes('node')) {
        console.log(`Node display element: ${text.trim().substring(0, 100)}`);
      }
    }

    // Print WebSocket activity from logs
    console.log('\n=== WebSocket Activity ===');
    const wsLogs = logs.filter(l => l.toLowerCase().includes('websocket') || l.toLowerCase().includes('ws') || l.toLowerCase().includes('socket'));
    wsLogs.slice(-10).forEach(l => console.log(l));

    // Print filter-related logs
    console.log('\n=== Filter-Related Logs ===');
    const filterLogs = logs.filter(l => l.toLowerCase().includes('filter'));
    filterLogs.slice(-10).forEach(l => console.log(l));

    // Final screenshot
    await page.screenshot({ path: '/tmp/filter-func-4-final.png', fullPage: true });
    console.log('Screenshot 4: Final state');

  } catch (error) {
    console.error('Test error:', error);
    await page.screenshot({ path: '/tmp/filter-func-error.png' });
  } finally {
    await browser.close();
  }

  console.log('\nTest completed. Check screenshots in /tmp/filter-func-*.png');
}

testFilterFunctionality().catch(console.error);