const { test } = require('@playwright/test');
const USER = process.env.FD_USER || 'e2e@flowdeck.local';
const PASS = process.env.FD_PASS || 'e2e-secret-123';
const WS = 'Workspace E2E ' + Date.now();

async function uiLogin(page) {
  await page.goto('/auth/login?provider=local');
  await page.fill('#email', USER);
  await page.fill('#password', PASS);
  await page.click('.btn-primary');
  await page.waitForTimeout(1500);
}

test('explore: créer workspace local + capturer UI création', async ({ page }) => {
  await uiLogin(page);
  // on /workspaces
  await page.waitForSelector('.ws-card.btn-new', { timeout: 8000 });
  await page.click('.ws-card.btn-new');
  await page.fill('.dialog-input', WS);
  await page.click('.dialog-box .btn-primary');
  await page.waitForTimeout(1200);
  console.log('URL après création WS:', page.url());

  // Now click the created workspace card to enter
  await page.click(`.ws-card:has-text("${WS}")`);
  await page.waitForTimeout(1500);
  console.log('URL après entrée WS:', page.url());
  console.log('TITLE WS:', await page.title());

  // Capture all editable/new elements visible
  const els = await page.evaluate(() =>
    [...document.querySelectorAll('button, a, textarea, [contenteditable], input')]
      .filter(e => e.offsetParent !== null)
      .map(e => ({
        tag: e.tagName, cls: (e.className||'').toString().slice(0,40),
        text: (e.innerText||e.value||'').trim().slice(0,20), ph: e.placeholder||'',
      }))
  );
  console.log('VISIBLE CREATE-ISH:', JSON.stringify(els.filter(x=>/new|creat|add|page|meet|database|\+|table/i.test(x.text+' '+x.cls+' '+x.ph)).slice(0,25), null, 1));
  await page.screenshot({ path: 'shots/ws_entered.png' });
});