const { test } = require('@playwright/test');

const 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';

test('explore: login UI + home', async ({ page }) => {
  await page.goto(`${BASE}/auth/login?provider=local`);
  await page.waitForTimeout(800);
  console.log('LOGIN PAGE title:', await page.title());
  // List inputs / buttons on login page
  const inputs = await page.evaluate(() =>
    [...document.querySelectorAll('input')].map(i => ({
      id: i.id, name: i.name, type: i.type, placeholder: i.placeholder,
    }))
  );
  console.log('LOGIN INPUTS:', JSON.stringify(inputs));
  const btns = await page.evaluate(() =>
    [...document.querySelectorAll('button,[type=submit]')].map(b => ({
      text: (b.innerText||'').trim().slice(0,30), cls: b.className.slice(0,30),
    }))
  );
  console.log('LOGIN BUTTONS:', JSON.stringify(btns));
  await page.screenshot({ path: 'shots/login.png' });

  // Try login with UI
  await page.fill('input[type=email], input[name=email], #email', USER).catch(()=>{});
  // fallback: fill first text input
  await page.fill('input[type=password], input[name=password], #password', PASS).catch(()=>{});
  await page.screenshot({ path: 'shots/login_filled.png' });
  await page.waitForTimeout(300);
  console.log('AFTER FILL inputs value check:');
  console.log(await page.evaluate(() => [...document.querySelectorAll('input')].map(i=>[i.type, i.value])));
});