/** Diag temporaire : navigation partielle vers l'éditeur, erreurs par phase */
const { test } = require('@playwright/test');
const FD_BASE = process.env.FD_BASE_URL || 'http://localhost:8080';
const USER = process.env.FD_USER || 'e2e@flowdeck.local';
const PASS = process.env.FD_PASS || 'e2e-secret-123';

async function login(page) {
  await page.goto(`${FD_BASE}/auth/login?provider=local`, { waitUntil: 'domcontentloaded' });
  await page.fill('#email', USER);
  await page.fill('#password', PASS);
  await page.click('.btn-primary');
  const ok = await page.waitForURL('**/workspaces', { timeout: 8000 }).then(() => true).catch(() => false);
  if (!ok) {
    await page.request.post(`${FD_BASE}/auth/register`, { data: { email: USER, password: PASS, name: 'E2E' } });
    await page.goto(`${FD_BASE}/workspaces`, { waitUntil: 'domcontentloaded' });
    await page.waitForURL('**/workspaces', { timeout: 15000 });
  }
}

function alpineErrs(msgs) {
  return msgs.filter((m) => m.includes('Alpine Expression Error') || m.includes('PAGEERROR'));
}

async function partialClick(page, pid) {
  await page.evaluate((id) => {
    const a = document.createElement('a');
    a.href = '/pages/' + id;
    a.textContent = 'x';
    document.body.appendChild(a);
    a.click();
  }, pid);
}

test('diag phases', async ({ page }) => {
  test.setTimeout(90000);
  const msgs = [];
  page.on('console', (m) => msgs.push(m.type() + ' | ' + m.text().slice(0, 160).replace(/\s+/g, ' ')));
  page.on('pageerror', (e) => msgs.push('PAGEERROR | ' + String(e).slice(0, 200)));

  await login(page);
  const pid = await page.evaluate(async () => {
    const csrf = (document.cookie.match(/csrf_token=([^;]+)/) || [])[1] || '';
    const r = await fetch('/api/local-workspace/items', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify({ name: 'Diag2', type: 'page' }),
    });
    const d = await r.json();
    return d.id || (d.item && d.item.id);
  });

  await page.goto(`${FD_BASE}/workspaces`, { waitUntil: 'domcontentloaded' });
  await page.waitForTimeout(800);
  msgs.length = 0;

  // PHASE A : navigation partielle (clic intercepte par fdLoad)
  await partialClick(page, pid);
  await page.waitForTimeout(4000);
  const stackA = await page.evaluate(() => {
    const el = document.querySelector('[x-data="editorState()"]');
    const st = el && el._x_dataStack;
    return { stack: st ? st.map((o) => (o ? Object.keys(o).length : -1)) : 'none', refreshed: !!(el && el.__fdRefreshed) };
  });
  const trace = await page.evaluate(() => window.__fdTrace || []);
  stackA.trace = trace;
  console.log('PHASE A (partielle): alpineErrs=', alpineErrs(msgs).length, 'total=', msgs.length, JSON.stringify(stackA));
  console.log('TRACE:', JSON.stringify(trace));
  alpineErrs(msgs).slice(0, 6).forEach((m) => console.log('  A>', m));
  msgs.filter((m) => !m.includes('Alpine Expression')).slice(0, 5).forEach((m) => console.log('  A-other>', m));

  // A2 : les erreurs s'arretent-elles apres le montage (fenetre transitoire) ?
  const a1 = alpineErrs(msgs).length;
  await page.waitForTimeout(3000);
  const a2 = alpineErrs(msgs).length;
  const ui = await page.evaluate(() => ({
    title: !!document.getElementById('_titleEl'),
    blocks: document.querySelectorAll('[data-bid]').length,
    editorVisible: !!document.querySelector('.page-editor-wrapper, .editor-wrap, [x-data^="editorState"]'),
  }));
  console.log('PHASE A2: erreurs a t0=', a1, '-> apres +3s=', a2, 'UI=', JSON.stringify(ui));

  // PHASE B : rechargement complet de la meme page
  msgs.length = 0;
  await page.goto(`${FD_BASE}/pages/${pid}`, { waitUntil: 'domcontentloaded' });
  await page.waitForTimeout(3000);
  console.log('PHASE B (complet): alpineErrs=', alpineErrs(msgs).length, 'total=', msgs.length);
  alpineErrs(msgs).slice(0, 6).forEach((m) => console.log('  B>', m));

  // PHASE C : deuxieme navigation partielle vers la meme page
  await page.goto(`${FD_BASE}/workspaces`, { waitUntil: 'domcontentloaded' });
  await page.waitForTimeout(600);
  msgs.length = 0;
  await partialClick(page, pid);
  await page.waitForTimeout(3500);
  console.log('PHASE C (2e partielle): alpineErrs=', alpineErrs(msgs).length, 'total=', msgs.length);
  alpineErrs(msgs).slice(0, 6).forEach((m) => console.log('  C>', m));
});