import { chromium } from 'playwright';

const BROWSER = await chromium.launch({ headless: true });
const PAGE = await BROWSER.newPage();
const errors = [];
PAGE.on('pageerror', err => errors.push(err.message));

const BASE = 'https://gch3n.online/pindou/';

// STEP 1: Create test image and inject via sessionStorage
await PAGE.goto(BASE, { waitUntil: 'domcontentloaded', timeout: 15000 });

const imageDataUrl = await PAGE.evaluate(() => {
  const canvas = document.createElement('canvas');
  canvas.width = 100; canvas.height = 100;
  const ctx = canvas.getContext('2d');
  const g = ctx.createLinearGradient(0, 0, 100, 100);
  g.addColorStop(0, '#ff0000'); g.addColorStop(0.25, '#00ff00');
  g.addColorStop(0.5, '#0000ff'); g.addColorStop(0.75, '#ffff00');
  g.addColorStop(1, '#ff00ff');
  ctx.fillStyle = g; ctx.fillRect(0, 0, 100, 100);
  return canvas.toDataURL('image/png');
});

await PAGE.evaluate((img) => {
  sessionStorage.setItem('bead-process-state', JSON.stringify({
    sourceImage: img, extractedImage: null,
    canvasWidth: 29, canvasHeight: 29, fitMode: 'fit',
    grid: [], legend: [], totalBeads: 0, usedColors: 0, status: 'idle',
  }));
}, imageDataUrl);

// STEP 2: Navigate to editor, then processing
console.log('=== Navigating to processing ===');
await PAGE.goto(`${BASE}#/pages/processing/processing`, { waitUntil: 'networkidle', timeout: 15000 });
await PAGE.waitForTimeout(5000); // Wait for pipeline to run

let hash = await PAGE.evaluate(() => window.location.hash);
console.log('After processing:', hash);

if (!hash.includes('result')) {
  await PAGE.goto(`${BASE}#/pages/result/result`, { waitUntil: 'networkidle', timeout: 15000 });
  await PAGE.waitForTimeout(2000);
}

// STEP 3: Check result
const state = await PAGE.evaluate(() => {
  const canvasInner = document.querySelector('.canvas-inner');
  const allCanvases = document.querySelectorAll('canvas');
  const emptyState = document.querySelector('.empty-state');
  const infoBar = document.querySelector('.info-bar');
  return {
    emptyVisible: !!emptyState && emptyState.offsetParent !== null,
    infoBarText: infoBar?.textContent?.trim(),
    canvasCount: allCanvases.length,
    canvasSize: allCanvases[0] ? `${allCanvases[0].width}x${allCanvases[0].height}` : 'none',
    canvasInnerChildCount: canvasInner?.children?.length,
  };
});

console.log('\n=== Final Result ===');
console.log(JSON.stringify(state, null, 2));
console.log('Page errors:', errors.length, errors.slice(0, 3));

if (state.canvasCount > 0) {
  console.log('\n✅ SUCCESS: Canvas rendered correctly on production!');
} else if (state.emptyVisible) {
  console.log('\n⚠️  Empty state shown - pipeline may not have run');
} else {
  console.log('\n❌ FAILED: No canvas and no empty state');
}

await PAGE.screenshot({ path: '/Users/guchen/.openclaw/workspace/pindou-live-flow.png', fullPage: true });
await BROWSER.close();