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

async function debugFurni() {
  console.log('🔍 Debugging Furniture Editor Page...\n');

  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext({
    ignoreHTTPSErrors: true,
  });
  const page = await context.newPage();

  try {
    console.log('📍 Navigating to https://admin-panel.habland.orb.local/furni');
    await page.goto('https://admin-panel.habland.orb.local/furni', {
      waitUntil: 'networkidle',
      timeout: 15000
    });

    await page.waitForTimeout(2000);

    // Get page title
    const title = await page.title();
    console.log(`   Page title: "${title}"`);

    // Check for heading
    const heading = await page.locator('h1').textContent();
    console.log(`   H1 heading: "${heading}"`);

    // List all buttons on the page
    console.log('\n📋 All buttons on page:');
    const buttons = await page.locator('button').all();
    console.log(`   Found ${buttons.length} buttons:`);

    for (let i = 0; i < Math.min(buttons.length, 20); i++) {
      const text = await buttons[i].textContent();
      const visible = await buttons[i].isVisible();
      console.log(`      ${i + 1}. "${text.trim()}" (visible: ${visible})`);
    }

    // Check for the specific "Add New" button
    console.log('\n🔍 Searching for "Add New" button:');
    const addNewCount = await page.locator('button').filter({ hasText: 'Add New' }).count();
    console.log(`   Found ${addNewCount} button(s) with text containing "Add New"`);

    if (addNewCount > 0) {
      const addNewVisible = await page.locator('button').filter({ hasText: 'Add New' }).first().isVisible();
      console.log(`   First "Add New" button visible: ${addNewVisible}`);
    }

    // Check for Plus icon
    const plusCount = await page.getByText('Add New').count();
    console.log(`   Found ${plusCount} element(s) with text "Add New"`);

    // Take screenshot
    await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/furni-debug.png', fullPage: true });
    console.log('\n📸 Screenshot saved: furni-debug.png');

    // Check page HTML for button
    const html = await page.content();
    const hasAddNew = html.includes('Add New');
    console.log(`\n🔍 HTML contains "Add New": ${hasAddNew}`);

    if (hasAddNew) {
      const match = html.match(/.{50}Add New.{50}/);
      if (match) {
        console.log(`   Context: "...${match[0]}..."`);
      }
    }

  } catch (error) {
    console.error('\n❌ Debug failed:', error.message);
  } finally {
    await browser.close();
  }
}

debugFurni().catch(console.error);