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);
}

async function enterWorkspace(page, wsName) {
  await uiLogin(page);
  await page.waitForSelector('.ws-card.btn-new');
  await page.click('.ws-card.btn-new');
  await page.fill('.dialog-input', wsName);
  await page.click('.dialog-box .btn-primary');
  await page.waitForTimeout(1200);
  await page.click(`.ws-card:has-text("${wsName}")`);
  await page.waitForTimeout(1500);
}

test('explore: cliquer + (nouveau) dans workspace', async ({ page }) => {
  await enterWorkspace(page, WS);
  console.log('URL workspace:', page.url());

  // Click the + button (new page)
  await page.click('.fd-ap-add');
  await page.waitForTimeout(800);

  // Capture modal/dialog content
  const modal = await page.evaluate(() => {
    const dialogs = [...document.querySelectorAll('[role=dialog], .modal, .dialog, .popover, .dropdown-menu, [x-show]')]
      .filter(e => e.offsetParent !== null);
    return dialogs.map(d => ({
      cls: d.className?.slice(0,50),
      html: d.innerHTML?.slice(0,500),
    }));
  });
  console.log('MODALS OPEN:', JSON.stringify(modal, null, 1));

  // Also check for any new elements after click
  const newEls = await page.evaluate(() =>
    [...document.querySelectorAll('button, a, li, div[role=menuitem], [data-action]')]
      .filter(e => e.offsetParent !== null)
      .map(e => ({
        tag: e.tagName, cls: (e.className||'').slice(0,40),
        text: (e.innerText||'').trim().slice(0,30),
      }))
      .filter(x => /page|meet|database|note|template|create|new|blank/i.test(x.text+' '+x.cls))
  );
  console.log('NEW CREATION OPTIONS:', JSON.stringify(newEls, null, 1));
  await page.screenshot({ path: 'shots/after_plus.png' });
});