Archive/admin-panel/test-theme-system.js

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

async function testThemeSystem() {
  console.log('🎨 Starting Playwright test for theme system...\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 settings page...');
    await page.goto('https://admin-panel.habland.orb.local/settings', {
      waitUntil: 'networkidle',
      timeout: 10000
    });

    console.log('✅ Settings page loaded\n');

    // Check current theme variables
    console.log('🔍 Checking current CSS variables...');
    const currentVars = await page.evaluate(() => {
      const root = document.documentElement;
      const computed = getComputedStyle(root);
      return {
        gradientStart: computed.getPropertyValue('--gradient-start').trim(),
        gradientEnd: computed.getPropertyValue('--gradient-end').trim(),
        primaryColor: computed.getPropertyValue('--primary-color').trim(),
        secondaryColor: computed.getPropertyValue('--secondary-color').trim(),
        accentColor: computed.getPropertyValue('--accent-color').trim(),
        borderRadius: computed.getPropertyValue('--border-radius').trim(),
      };
    });

    console.log('Current CSS Variables:');
    Object.entries(currentVars).forEach(([key, value]) => {
      console.log(`   ${key}: ${value || '(not set)'}`);
    });

    // Find theme preset buttons - they're gradient boxes with preset names
    console.log('\n🔘 Looking for theme preset buttons...');
    const presetButtons = await page.locator('button:has-text("Orange Fury"), button:has-text("Purple Dream"), button:has-text("Ocean Blue"), button:has-text("Emerald Green"), button:has-text("Sunset"), button:has-text("Midnight")').all();
    console.log(`✅ Found ${presetButtons.length} preset buttons\n`);

    if (presetButtons.length === 0) {
      console.log('⚠️  No preset buttons found!');
      // Try to find any buttons on the page for debugging
      const allButtons = await page.locator('button').count();
      console.log(`   Total buttons on page: ${allButtons}`);
      return;
    }

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

    // Try clicking the second preset (Purple Dream)
    console.log('\n🎨 Clicking "Purple Dream" preset...');

    // Look for the Purple Dream button more specifically
    const purpleButton = page.locator('button:has-text("Purple Dream")');
    await purpleButton.click();
    console.log('✅ Clicked Purple Dream preset');

    // Wait for any animations/updates
    await page.waitForTimeout(1000);

    // Check if CSS variables changed
    console.log('\n🔍 Checking CSS variables after theme change...');
    const newVars = await page.evaluate(() => {
      const root = document.documentElement;
      const computed = getComputedStyle(root);
      return {
        gradientStart: computed.getPropertyValue('--gradient-start').trim(),
        gradientEnd: computed.getPropertyValue('--gradient-end').trim(),
        primaryColor: computed.getPropertyValue('--primary-color').trim(),
        secondaryColor: computed.getPropertyValue('--secondary-color').trim(),
        accentColor: computed.getPropertyValue('--accent-color').trim(),
        borderRadius: computed.getPropertyValue('--border-radius').trim(),
      };
    });

    console.log('New CSS Variables:');
    Object.entries(newVars).forEach(([key, value]) => {
      console.log(`   ${key}: ${value || '(not set)'}`);
    });

    // Compare
    console.log('\n📊 Comparison:');
    let changed = false;
    Object.keys(currentVars).forEach(key => {
      const before = currentVars[key];
      const after = newVars[key];
      if (before !== after) {
        console.log(`   ${key}: ${before} → ${after} ✅`);
        changed = true;
      } else {
        console.log(`   ${key}: No change ❌`);
      }
    });

    if (!changed) {
      console.log('\n⚠️  ISSUE: CSS variables did NOT change after clicking preset!');
    } else {
      console.log('\n✅ CSS variables changed successfully!');
    }

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

    // Check if there's a save button
    console.log('\n💾 Looking for Save button...');
    const saveButton = await page.locator('button:has-text("Save")').count();
    console.log(`   Save buttons found: ${saveButton}`);

    // Monitor API calls
    const apiCalls = [];
    page.on('response', async response => {
      if (response.url().includes('/api/settings')) {
        const status = response.status();
        let body = null;
        try {
          body = await response.json();
        } catch (e) {
          body = await response.text();
        }
        apiCalls.push({ url: response.url(), status, body });
      }
    });

    // If there's a save button, click it
    if (saveButton > 0) {
      console.log('\n💾 Clicking Save button...');
      await page.locator('button:has-text("Save")').first().click();
      await page.waitForTimeout(2000);
    }

    if (apiCalls.length > 0) {
      console.log('\n📡 API calls made:');
      apiCalls.forEach((call, i) => {
        console.log(`\n   Call ${i + 1}:`);
        console.log(`      URL: ${call.url}`);
        console.log(`      Status: ${call.status}`);
        console.log(`      Response:`, typeof call.body === 'object' ? JSON.stringify(call.body, null, 8) : call.body);
      });
    } else {
      console.log('\n⚠️  No API calls to /api/settings detected');
    }

    // Check localStorage and document attributes
    console.log('\n🔍 Checking theme storage...');
    const themeData = await page.evaluate(() => {
      return {
        localStorage: localStorage.getItem('theme'),
        htmlDataTheme: document.documentElement.getAttribute('data-theme'),
        htmlClass: document.documentElement.className,
        bodyClass: document.body.className,
      };
    });
    console.log('Theme Data:');
    Object.entries(themeData).forEach(([key, value]) => {
      console.log(`   ${key}: ${value || '(not set)'}`);
    });

  } catch (error) {
    console.error('\n❌ Test failed:', error.message);
    await page.screenshot({ path: '/Users/matt/DEV/habland/admin-panel/theme-error.png' });
    console.log('📸 Error screenshot saved: theme-error.png');
  } finally {
    await browser.close();
    console.log('\n✅ Test completed');
  }
}

testThemeSystem().catch(console.error);