#!/usr/bin/env node
/**
 * Knowledge Graph Cache Fix - Manual Test Script
 * 
 * This script uses Playwright to test that the Knowledge Graph visualization
 * works correctly on both fresh API responses AND cached responses.
 * 
 * Run with: npx playwright test tests/knowledge-graph-cache.spec.ts
 * Or: node tests/knowledge-graph-cache-manual.mjs
 * 
 * Prerequisites:
 *   npm install playwright @playwright/test
 *   npx playwright install chromium
 */

import { chromium } from 'playwright';

const BASE_URL = 'https://archief.support';
const TEST_QUERY = 'Welke archieven zijn er in Den Haag?';
const LOGIN_EMAIL = 'scott@bronhouder.nl';
const LOGIN_PASSWORD = 'Olivi@1985';

async function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function runTest() {
  console.log('🚀 Starting Knowledge Graph Cache Test\n');
  
  const browser = await chromium.launch({ 
    headless: false,  // Set to true for CI
    slowMo: 100       // Slow down for visibility
  });
  
  const context = await browser.newContext();
  const page = await context.newPage();
  
  // Capture console logs
  const consoleLogs = [];
  page.on('console', msg => {
    const text = msg.text();
    consoleLogs.push(text);
    if (text.includes('[ChatPage]') || text.includes('Knowledge Graph') || text.includes('Cache')) {
      console.log(`  📝 Browser: ${text}`);
    }
  });
  
  try {
    // Step 1: Navigate to archief.support
    console.log('Step 1: Navigating to archief.support...');
    await page.goto(BASE_URL);
    await page.waitForLoadState('networkidle');
    console.log('  ✅ Page loaded\n');
    
    // Check if login is needed
    const loginButton = page.locator('button:has-text("Inloggen")');
    if (await loginButton.isVisible({ timeout: 3000 }).catch(() => false)) {
      console.log('Step 1b: Login required...');
      await loginButton.click();
      await sleep(1000);
      
      // Fill login form
      await page.fill('input[type="email"], input[name="email"]', LOGIN_EMAIL);
      await page.fill('input[type="password"], input[name="password"]', LOGIN_PASSWORD);
      await page.click('button[type="submit"]');
      await page.waitForLoadState('networkidle');
      console.log('  ✅ Logged in\n');
    }
    
    // Step 2: Clear the cache
    console.log('Step 2: Clearing cache...');
    const clearCacheButton = page.locator('button:has-text("Cache wissen")');
    if (await clearCacheButton.isVisible({ timeout: 2000 }).catch(() => false)) {
      await clearCacheButton.click();
      await sleep(1000);
      console.log('  ✅ Cache cleared\n');
    } else {
      console.log('  ⚠️ Cache clear button not found, continuing...\n');
    }
    
    // Step 3: Submit query (fresh API call)
    console.log('Step 3: Submitting query (fresh API call)...');
    console.log(`  Query: "${TEST_QUERY}"`);
    
    // Find the input field
    const inputField = page.locator('textarea').first();
    await inputField.fill(TEST_QUERY);
    
    // Find and click send button
    const sendButton = page.locator('button[type="submit"]').first();
    await sendButton.click();
    
    console.log('  ⏳ Waiting for RAG response (this may take 30-60 seconds)...');
    
    // Wait for response
    await page.waitForSelector('[data-role="assistant"], .message-content', { timeout: 90000 });
    await sleep(3000); // Extra time for processing
    console.log('  ✅ Response received\n');
    
    // Step 4: Open Debug Panel and check Knowledge Graph
    console.log('Step 4: Opening Debug Panel...');
    
    // Look for debug toggle button
    const debugToggle = page.locator('button').filter({ hasText: /debug/i }).first();
    if (await debugToggle.isVisible({ timeout: 2000 }).catch(() => false)) {
      await debugToggle.click();
      await sleep(500);
    }
    
    // Click Kennisgraaf tab
    const knowledgeGraphTab = page.locator('button').filter({ hasText: 'Kennisgraaf' }).first();
    if (await knowledgeGraphTab.isVisible({ timeout: 2000 }).catch(() => false)) {
      await knowledgeGraphTab.click();
      await sleep(1000);
    }
    
    // Check for "no data" message
    const noDataMessage = page.locator('text="Geen graafdata beschikbaar"');
    const hasNoDataFresh = await noDataMessage.isVisible({ timeout: 2000 }).catch(() => false);
    
    if (hasNoDataFresh) {
      console.log('  ❌ FRESH RESPONSE: "No graph data available" - This should have data!');
    } else {
      console.log('  ✅ FRESH RESPONSE: Knowledge Graph has data');
    }
    console.log('');
    
    // Step 5: Clear conversation (keep cache)
    console.log('Step 5: Clearing conversation (keeping cache)...');
    const newChatButton = page.locator('button').filter({ hasText: /nieuw|wis gesprek/i }).first();
    if (await newChatButton.isVisible({ timeout: 2000 }).catch(() => false)) {
      await newChatButton.click();
      await sleep(1000);
      console.log('  ✅ Conversation cleared\n');
    } else {
      // Try refreshing the page
      await page.reload();
      await page.waitForLoadState('networkidle');
      console.log('  ✅ Page refreshed\n');
    }
    
    // Step 6: Submit SAME query again (should hit cache)
    console.log('Step 6: Submitting same query (should hit cache)...');
    consoleLogs.length = 0; // Clear console logs
    
    await inputField.fill(TEST_QUERY);
    await sendButton.click();
    
    // Wait for cached response (should be much faster)
    await page.waitForSelector('[data-role="assistant"], .message-content', { timeout: 15000 });
    await sleep(2000);
    
    // Check for cache hit in console logs
    const hasCacheHit = consoleLogs.some(log => log.includes('Cache HIT'));
    const hasRestoredResults = consoleLogs.some(log => log.includes('Restored') && log.includes('cached results'));
    
    if (hasCacheHit) {
      console.log('  ✅ Cache HIT detected');
    } else {
      console.log('  ⚠️ No cache hit detected (may be a cache miss)');
    }
    
    if (hasRestoredResults) {
      console.log('  ✅ Results restored from cache for Knowledge Graph');
    } else if (hasCacheHit) {
      console.log('  ❌ Cache hit but NO restored results - FIX MAY NOT BE WORKING');
    }
    console.log('');
    
    // Step 7: Check for Gecached badge
    console.log('Step 7: Checking for cached badge...');
    const cachedBadge = page.locator('text="Gecached"');
    const hasCachedBadge = await cachedBadge.isVisible({ timeout: 3000 }).catch(() => false);
    
    if (hasCachedBadge) {
      console.log('  ✅ "Gecached" badge visible');
    } else {
      console.log('  ⚠️ "Gecached" badge not found');
    }
    console.log('');
    
    // Step 8: Check Knowledge Graph on cached response
    console.log('Step 8: Checking Knowledge Graph on CACHED response...');
    
    // Ensure debug panel is open and on Kennisgraaf tab
    if (await debugToggle.isVisible({ timeout: 1000 }).catch(() => false)) {
      await debugToggle.click();
      await sleep(500);
    }
    if (await knowledgeGraphTab.isVisible({ timeout: 1000 }).catch(() => false)) {
      await knowledgeGraphTab.click();
      await sleep(1000);
    }
    
    // THE KEY TEST: Check for "no data" message on cached response
    const hasNoDataCached = await noDataMessage.isVisible({ timeout: 2000 }).catch(() => false);
    
    console.log('');
    console.log('═══════════════════════════════════════════════════════════');
    console.log('                    TEST RESULTS                           ');
    console.log('═══════════════════════════════════════════════════════════');
    
    if (hasNoDataCached) {
      console.log('');
      console.log('  ❌ FAILED: Cached response shows "Geen graafdata beschikbaar"');
      console.log('');
      console.log('  The Knowledge Graph cache fix is NOT working correctly.');
      console.log('  Check that:');
      console.log('    1. retrievedResults is being stored in cache');
      console.log('    2. setDebugResults() is called on cache hit');
      console.log('    3. The deployed build includes the latest changes');
      console.log('');
    } else {
      console.log('');
      console.log('  ✅ PASSED: Cached response shows Knowledge Graph data!');
      console.log('');
      console.log('  The Knowledge Graph cache fix is working correctly.');
      console.log('');
    }
    
    console.log('═══════════════════════════════════════════════════════════');
    console.log('');
    
    // Print relevant console logs
    console.log('Relevant browser console logs:');
    consoleLogs
      .filter(log => 
        log.includes('[ChatPage]') || 
        log.includes('Knowledge Graph') ||
        log.includes('extractGraphData') ||
        log.includes('graphData')
      )
      .forEach(log => console.log(`  ${log}`));
    
    // Keep browser open for manual inspection
    console.log('\n📌 Browser will stay open for 30 seconds for manual inspection...');
    await sleep(30000);
    
  } catch (error) {
    console.error('❌ Test failed with error:', error.message);
  } finally {
    await browser.close();
  }
}

runTest();