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

async function diagnose() {
  console.log('\n🔍 DIAGNOSTICS: Checking what\'s actually on the page\n');
  
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  
  try {
    // Go to home
    console.log('1️⃣  Navigating to http://localhost:4031...');
    await page.goto('http://localhost:4031', { timeout: 10000 });
    await page.waitForLoadState('networkidle');
    
    // Check what's visible
    const title = await page.title();
    const url = page.url();
    console.log(`   URL: ${url}`);
    console.log(`   Title: ${title}`);
    
    // Check inputs
    const inputs = await page.$$('input');
    console.log(`   Found ${inputs.length} input fields`);
    for (let i = 0; i < Math.min(5, inputs.length); i++) {
      const placeholder = await inputs[i].getAttribute('placeholder');
      const type = await inputs[i].getAttribute('type');
      console.log(`     Input ${i}: type="${type}" placeholder="${placeholder}"`);
    }
    
    // Check buttons
    const buttons = await page.$$('button');
    console.log(`   Found ${buttons.length} buttons`);
    for (let i = 0; i < Math.min(5, buttons.length); i++) {
      const text = await buttons[i].textContent();
      console.log(`     Button ${i}: "${text.trim()}"`);
    }
    
    // Try to login
    console.log('\n2️⃣  Attempting login with toemrer/REDACTED_AUTH...');
    const usernameInput = page.locator('input[type="text"]').first();
    const passwordInput = page.locator('input[type="password"]').first();
    const loginBtn = page.locator('button:has-text("Log ind")');
    
    await usernameInput.fill('toemrer');
    await passwordInput.fill('REDACTED_AUTH');
    await loginBtn.click();
    
    console.log('   Waiting for navigation...');
    await page.waitForNavigation({ timeout: 10000 }).catch(() => {
      console.log('   No navigation detected, continuing anyway');
    });
    await page.waitForLoadState('networkidle');
    
    const urlAfterLogin = page.url();
    console.log(`   URL after login: ${urlAfterLogin}`);
    
    // Check what's on page after login
    console.log('\n3️⃣  Content after login:');
    const titleAfter = await page.title();
    console.log(`   Title: ${titleAfter}`);
    
    const inputsAfter = await page.$$('input');
    console.log(`   Found ${inputsAfter.length} input fields`);
    for (let i = 0; i < Math.min(10, inputsAfter.length); i++) {
      const placeholder = await inputsAfter[i].getAttribute('placeholder');
      const type = await inputsAfter[i].getAttribute('type');
      console.log(`     Input ${i}: type="${type}" placeholder="${placeholder}"`);
    }
    
    const buttonsAfter = await page.$$('button');
    console.log(`   Found ${buttonsAfter.length} buttons`);
    for (let i = 0; i < Math.min(10, buttonsAfter.length); i++) {
      const text = await buttonsAfter[i].textContent();
      console.log(`     Button ${i}: "${text.trim()}"`);
    }
    
    // Try to navigate to /project-creation
    console.log('\n4️⃣  Navigating to /project-creation...');
    await page.goto('http://localhost:4031/project-creation', { timeout: 10000 });
    await page.waitForLoadState('networkidle');
    
    const urlProjCreation = page.url();
    console.log(`   URL: ${urlProjCreation}`);
    const titleProjCreation = await page.title();
    console.log(`   Title: ${titleProjCreation}`);
    
    const inputsProjCreation = await page.$$('input');
    console.log(`   Found ${inputsProjCreation.length} input fields`);
    for (let i = 0; i < Math.min(10, inputsProjCreation.length); i++) {
      const placeholder = await inputsProjCreation[i].getAttribute('placeholder');
      const type = await inputsProjCreation[i].getAttribute('type');
      console.log(`     Input ${i}: type="${type}" placeholder="${placeholder}"`);
    }
    
  } catch (err) {
    console.error('❌ Error:', err.message);
  } finally {
    await browser.close();
  }
}

diagnose();