import { chromium } from 'playwright';

const BROWSER = await chromium.launch({ headless: true });
const PAGE = await BROWSER.newPage();

// Capture ALL console output
const logs = [];
PAGE.on('console', msg => {
  logs.push(`[${msg.type()}] ${msg.text()}`);
});
PAGE.on('pageerror', err => {
  logs.push(`[PAGE_ERROR] ${err.message}`);
});

// Go to result page directly and inject grid data
const BASE = 'http://localhost:5174/pindou/';

// First: go to hash route with result page
await PAGE.goto(`${BASE}#/pages/result/result`, { waitUntil: 'networkidle', timeout: 15000 });
await PAGE.waitForTimeout(2000);

// Check what's on the page
const domInfo = await PAGE.evaluate(() => {
  const canvasInner = document.querySelector('.canvas-inner');
  const canvasWrapper = document.querySelector('.canvas-wrapper');
  const beadPattern = document.querySelector('.bead-pattern');
  const pageResult = document.querySelector('.page-result');
  const patternSection = document.querySelector('.pattern-section');
  const emptyState = document.querySelector('.empty-state');
  
  return {
    canvasInnerHTML: canvasInner?.innerHTML?.substring(0, 200),
    canvasInnerChildCount: canvasInner?.children?.length,
    canvasInnerTagName: canvasInner?.tagName,
    canvasWrapperExists: !!canvasWrapper,
    beadPatternExists: !!beadPattern,
    pageResultExists: !!pageResult,
    patternSectionExists: !!patternSection,
    emptyStateExists: !!emptyState,
    emptyStateText: emptyState?.textContent?.substring(0, 100),
    // Check all canvases
    allCanvases: Array.from(document.querySelectorAll('canvas')).map(c => ({
      width: c.width,
      height: c.height,
      parent: c.parentElement?.className,
    })),
  };
});

console.log('=== DOM State ===');
console.log(JSON.stringify(domInfo, null, 2));

// Print relevant console logs
console.log('\n=== Console Logs ===');
const relevant = logs.filter(l => 
  l.includes('BeadPattern') || 
  l.includes('result.vue') || 
  l.includes('processStore') || 
  l.includes('GridRenderer') ||
  l.includes('renderCanvas') ||
  l.includes('PAGE_ERROR') ||
  l.includes('restoreFromStorage') ||
  l.includes('hasValidData') ||
  l.includes('canvas') ||
  l.includes('Canvas')
);
relevant.forEach(l => console.log(l));

if (relevant.length === 0) {
  console.log('(No relevant BeadPattern/result logs found. Showing all logs:)');
  logs.forEach(l => console.log(l));
}

// Try to access the store directly
const storeInfo = await PAGE.evaluate(() => {
  // Try accessing Pinia store through the Vue app
  const app = document.querySelector('#app');
  const vm = app?.__vue_app__;
  return {
    hasApp: !!app,
    hasVueApp: !!vm,
    localStorage: {
      'bead-process-state': localStorage.getItem('bead-process-state')?.substring(0, 200),
    },
    sessionStorage: {
      'bead-process-state': sessionStorage.getItem('bead-process-state')?.substring(0, 200),
    },
  };
});

console.log('\n=== Store Info ===');
console.log(JSON.stringify(storeInfo, null, 2));

await BROWSER.close();