debug-admin-page.js

const { chromium } = require('playwright');

async function debugAdminPage() {
  console.log('🔍 Starting Comprehensive Admin Page Debug\n');

  const browser = await chromium.launch({
    headless: false,
    slowMo: 50 // Slow down for better debugging
  });

  const context = await browser.newContext({
    viewport: { width: 1920, height: 1080 }
  });

  const page = await context.newPage();

  // Enable detailed console logging
  page.on('console', msg => {
    const type = msg.type();
    const text = msg.text();

    if (type === 'error') {
      console.log('❌ [ERROR]', text);
    } else if (type === 'warning') {
      console.log('⚠️  [WARN]', text);
    } else if (text.includes('Error') || text.includes('Failed') || text.includes('❌')) {
      console.log('🔴 [ISSUE]', text);
    } else if (text.includes('✅') || text.includes('Success')) {
      console.log('✅ [SUCCESS]', text);
    } else {
      console.log('ℹ️  [INFO]', text);
    }
  });

  // Listen for page errors
  page.on('pageerror', error => {
    console.error('💥 [PAGE ERROR]', error.message);
    console.error('   Stack:', error.stack);
  });

  // Listen for request failures
  page.on('requestfailed', request => {
    const failure = request.failure();
    if (failure && !failure.errorText.includes('favicon')) {
      console.log('🌐 [REQUEST FAILED]', request.url(), '-', failure.errorText);
    }
  });

  // Listen for responses
  page.on('response', response => {
    if (response.status() >= 400) {
      console.log('⚠️  [HTTP ' + response.status() + ']', response.url());
    }
  });

  try {
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('STEP 1: Loading Admin Page');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    const startTime = Date.now();
    await page.goto('http://localhost:4000/admin.html', {
      waitUntil: 'networkidle',
      timeout: 15000
    });
    const loadTime = Date.now() - startTime;

    console.log('✅ Page loaded successfully');
    console.log('   Load time:', loadTime, 'ms');
    console.log('   URL:', page.url());
    console.log('   Title:', await page.title(), '\n');

    // Wait a bit for everything to settle
    await page.waitForTimeout(3000);

    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('STEP 2: Checking Page Structure');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    // Check if main elements exist
    const structureCheck = await page.evaluate(() => {
      const checks = {
        header: !!document.querySelector('header'),
        statsGrid: !!document.querySelector('.stats-grid'),
        section: !!document.querySelector('.section'),
        tabs: !!document.querySelector('.tabs'),
        platformCards: document.querySelectorAll('.platform-card').length,
        taskForm: !!document.getElementById('task-platform'),
        refreshBtns: document.querySelectorAll('.refresh-btn').length
      };
      return checks;
    });

    console.log('📋 Structure Check:');
    console.log('   Header:', structureCheck.header ? '✅' : '❌');
    console.log('   Stats Grid:', structureCheck.statsGrid ? '✅' : '❌');
    console.log('   Sections:', structureCheck.section ? '✅' : '❌');
    console.log('   Tabs:', structureCheck.tabs ? '✅' : '❌');
    console.log('   Platform Cards:', structureCheck.platformCards, '(expected: 5)');
    console.log('   Task Form:', structureCheck.taskForm ? '✅' : '❌');
    console.log('   Refresh Buttons:', structureCheck.refreshBtns, '(expected: 3+)\n');

    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('STEP 3: Testing API Connections');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    // Test API connections
    const apiTests = await page.evaluate(async () => {
      const API_BASE = 'http://localhost:4000/api/v1';
      const API_KEY = 'sk-test-integration-1234567890';

      const tests = {
        platforms: false,
        tasks: false,
        results: false
      };

      try {
        // Test platforms endpoint
        const platformsRes = await fetch(`${API_BASE}/scraping/platforms`, {
          headers: { 'X-API-Key': API_KEY }
        });
        tests.platforms = platformsRes.ok;
        if (platformsRes.ok) {
          const data = await platformsRes.json();
          tests.platformsCount = data.platforms?.length || 0;
        }
      } catch (e) {
        tests.platformsError = e.message;
      }

      try {
        // Test tasks endpoint
        const tasksRes = await fetch(`${API_BASE}/scraping/tasks/pending`, {
          headers: { 'X-API-Key': API_KEY }
        });
        tests.tasks = tasksRes.ok;
        if (tasksRes.ok) {
          const data = await tasksRes.json();
          tests.tasksCount = data.count || 0;
        }
      } catch (e) {
        tests.tasksError = e.message;
      }

      try {
        // Test results endpoint
        const resultsRes = await fetch(`${API_BASE}/scraping/results`, {
          headers: { 'X-API-Key': API_KEY }
        });
        tests.results = resultsRes.ok;
        if (resultsRes.ok) {
          const data = await resultsRes.json();
          tests.resultsCount = data.results?.length || 0;
        }
      } catch (e) {
        tests.resultsError = e.message;
      }

      return tests;
    });

    console.log('🌐 API Connection Tests:');
    console.log('   Platforms API:', apiTests.platforms ? '✅ Connected' : '❌ Failed');
    if (apiTests.platformsCount !== undefined) {
      console.log('   └─ Platforms count:', apiTests.platformsCount);
    }
    if (apiTests.platformsError) {
      console.log('   └─ Error:', apiTests.platformsError);
    }

    console.log('   Tasks API:', apiTests.tasks ? '✅ Connected' : '❌ Failed');
    if (apiTests.tasksCount !== undefined) {
      console.log('   └─ Pending tasks:', apiTests.tasksCount);
    }
    if (apiTests.tasksError) {
      console.log('   └─ Error:', apiTests.tasksError);
    }

    console.log('   Results API:', apiTests.results ? '✅ Connected' : '❌ Failed');
    if (apiTests.resultsCount !== undefined) {
      console.log('   └─ Results count:', apiTests.resultsCount);
    }
    if (apiTests.resultsError) {
      console.log('   └─ Error:', apiTests.resultsError);
    }
    console.log('');

    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('STEP 4: Testing Statistics Display');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    // Check statistics
    const stats = await page.evaluate(() => {
      return {
        platforms: document.getElementById('stat-platforms')?.textContent,
        pending: document.getElementById('stat-pending')?.textContent,
        completed: document.getElementById('stat-completed')?.textContent,
        results: document.getElementById('stat-results')?.textContent
      };
    });

    console.log('📊 Statistics:');
    console.log('   Platforms:', stats.platforms, '(expected: 5)');
    console.log('   Pending:', stats.pending, '(expected: 0-2)');
    console.log('   Completed:', stats.completed, '(expected: >= 1)');
    console.log('   Results:', stats.results, '(expected: >= 1)');

    const statsValid =
      stats.platforms !== '-' &&
      stats.pending !== '-' &&
      stats.completed !== '-' &&
      stats.results !== '-';

    console.log('');
    console.log('   Stats loaded:', statsValid ? '✅ Yes' : '❌ No (still loading)');
    console.log('');

    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('STEP 5: Testing Tab Switching');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    // Test tab switching
    const tabs = ['platforms', 'tasks', 'results'];
    for (const tab of tabs) {
      console.log(`🔄 Switching to "${tab}" tab...`);
      await page.click(`button[data-tab="${tab}"]`);
      await page.waitForTimeout(500);

      const isActive = await page.evaluate((tabName) => {
        const tabEl = document.querySelector(`button[data-tab="${tabName}"]`);
        const contentEl = document.getElementById(`${tabName}-tab`);
        return tabEl?.classList.contains('active') &&
               contentEl?.classList.contains('active');
      }, tab);

      console.log(`   Tab active: ${isActive ? '✅ Yes' : '❌ No'}`);
    }
    console.log('');

    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('STEP 6: Testing Task Creation');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    // Test task creation
    console.log('📝 Filling task creation form...');

    // Select platform
    await page.selectOption('#task-platform', 'tiktok');
    const platformValue = await page.evaluate(() => document.getElementById('task-platform').value);
    console.log('   Platform selected:', platformValue, '✅');

    // Select action
    await page.selectOption('#task-action', 'scrape-list');
    const actionValue = await page.evaluate(() => document.getElementById('task-action').value);
    console.log('   Action selected:', actionValue, '✅');

    // Enter URL
    const testUrl = 'https://www.tiktok.com/@testuser-' + Date.now();
    await page.fill('#task-url', testUrl);
    const urlValue = await page.evaluate(() => document.getElementById('task-url').value);
    console.log('   URL entered:', urlValue, '✅');

    // Click create button
    console.log('   🎯 Clicking Create Task button...');

    // Handle the alert dialog
    const dialogPromise = page.waitForEvent('dialog').catch(() => null);

    await page.click('button[onclick="createTask()"]');

    // Wait a bit for the request to complete
    await page.waitForTimeout(2000);

    const dialog = await dialogPromise;
    if (dialog) {
      const message = dialog.message();
      console.log('   📢 Alert dialog:', message);
      await dialog.accept();
    } else {
      console.log('   ⚠️  No alert dialog (might have created task silently)');
    }

    console.log('');

    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('STEP 7: Testing Refresh Buttons');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    // Test refresh button on platforms tab
    await page.click('button[data-tab="platforms"]');
    await page.waitForTimeout(500);

    console.log('🔄 Testing Platforms refresh...');
    const beforeRefresh = await page.evaluate(() => {
      return document.querySelectorAll('.platform-card').length;
    });
    console.log('   Platform cards before:', beforeRefresh);

    await page.click('.refresh-btn');
    await page.waitForTimeout(1500);

    const afterRefresh = await page.evaluate(() => {
      return document.querySelectorAll('.platform-card').length;
    });
    console.log('   Platform cards after:', afterRefresh);
    console.log('   Refresh:', afterRefresh >= beforeRefresh ? '✅ Working' : '⚠️ Issue', '\n');

    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('STEP 8: Taking Screenshots');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    // Take screenshots
    await page.screenshot({
      path: '/tmp/admin-debug-fullpage.png',
      fullPage: true
    });
    console.log('📸 Full page screenshot: /tmp/admin-debug-fullpage.png');

    await page.screenshot({
      path: '/tmp/admin-debug-viewport.png'
    });
    console.log('📸 Viewport screenshot: /tmp/admin-debug-viewport.png');

    console.log('');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('FINAL DIAGNOSTICS');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    // Final diagnostics
    const diagnostics = await page.evaluate(() => {
      const getComputedStyle = (el) => {
        return window.getComputedStyle(el);
      };

      return {
        title: document.title,
        url: window.location.href,
        platformCards: document.querySelectorAll('.platform-card').length,
        taskFormExists: !!document.getElementById('task-platform'),
        tabsActive: document.querySelectorAll('.tab.active').length,
        errorMessages: Array.from(document.querySelectorAll('.error')).map(el => el.textContent),
        loadingSpinners: document.querySelectorAll('.spinner').length,
        emptyStates: document.querySelectorAll('.empty-state').length,
        buttons: document.querySelectorAll('button').length,
        inputs: document.querySelectorAll('input').length,
        hasData: document.querySelector('.stat-platforms')?.textContent !== '-'
      };
    });

    console.log('📋 Final Diagnostics:');
    console.log('   Title:', diagnostics.title);
    console.log('   URL:', diagnostics.url);
    console.log('   Platform Cards:', diagnostics.platformCards, '/ 5');
    console.log('   Task Form:', diagnostics.taskFormExists ? '✅' : '❌');
    console.log('   Active Tabs:', diagnostics.tabsActive, '/ 1');
    console.log('   Error Messages:', diagnostics.errorMessages.length);
    console.log('   Loading Spinners:', diagnostics.loadingSpinners);
    console.log('   Empty States:', diagnostics.emptyStates);
    console.log('   Buttons:', diagnostics.buttons);
    console.log('   Inputs:', diagnostics.inputs);
    console.log('   Has Data:', diagnostics.hasData ? '✅ Yes' : '❌ No');

    if (diagnostics.errorMessages.length > 0) {
      console.log('\n❌ Error Messages Found:');
      diagnostics.errorMessages.forEach((msg, i) => {
        console.log(`   ${i + 1}. ${msg}`);
      });
    } else {
      console.log('\n✅ No error messages found');
    }

    console.log('\n━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
    console.log('DEBUGGING COMPLETE');
    console.log('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\n');

    // Overall assessment
    const issues = [];

    if (!structureCheck.header) issues.push('Header not found');
    if (!structureCheck.statsGrid) issues.push('Stats grid not found');
    if (!structureCheck.tabs) issues.push('Tabs not found');
    if (diagnostics.platformCards !== 5) issues.push(`Expected 5 platform cards, found ${diagnostics.platformCards}`);
    if (!statsValid) issues.push('Statistics not loaded');
    if (!structureCheck.taskForm) issues.push('Task form not found');
    if (diagnostics.errorMessages.length > 0) issues.push('Error messages present');

    if (issues.length === 0) {
      console.log('🎉 SUCCESS: All checks passed!');
      console.log('✅ Admin page is working perfectly!');
    } else {
      console.log('⚠️  ISSUES FOUND:');
      issues.forEach((issue, i) => {
        console.log(`   ${i + 1}. ${issue}`);
      });
    }

    console.log('\n🔍 Keeping browser open for 10 seconds for manual inspection...');
    await page.waitForTimeout(10000);

  } catch (error) {
    console.error('\n❌ FATAL ERROR:', error.message);
    console.error('Stack trace:', error.stack);
  } finally {
    await browser.close();
    console.log('\n✅ Browser closed');
    console.log('📸 Screenshots saved to /tmp/admin-debug-*.png');
  }
}

debugAdminPage().catch(error => {
  console.error('❌ Test failed:', error);
  process.exit(1);
});