const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch({ 
    headless: "new",
    args: ['--no-sandbox', '--disable-setuid-sandbox'] 
  });
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });

  console.log("Navigating to login page...");
  await page.goto('http://localhost:3000/admin/master-data', { waitUntil: 'networkidle2' });

  console.log("Filling login form...");
  await page.type('input[type="text"]', 'admin');
  await page.type('input[type="password"]', 'password');
  
  await page.screenshot({ path: 'test_step1_login_filled.png' });
  
  console.log("Clicking login...");
  await Promise.all([
    page.click('button[type="submit"]'),
    page.waitForNavigation({ waitUntil: 'networkidle0' }).catch(e => console.log('Navigation wait timeout/catch'))
  ]);

  // Wait a bit for React to render the stores table
  await new Promise(resolve => setTimeout(resolve, 2000));
  await page.screenshot({ path: 'test_step2_after_login.png' });

  // Add store
  console.log("Clicking Add Store...");
  await page.evaluate(() => {
    const btns = Array.from(document.querySelectorAll('button'));
    const addBtn = btns.find(b => b.textContent.includes('Add Store'));
    if (addBtn) addBtn.click();
  });
  await new Promise(resolve => setTimeout(resolve, 500));

  console.log("Filling new store form...");
  const inputs = await page.$$('input[placeholder]');
  for (const input of inputs) {
    const placeholder = await input.evaluate(el => el.getAttribute('placeholder'));
    if (placeholder === 'Kode Toko') await input.type('TEST99');
    if (placeholder === 'Nama Toko') await input.type('Toko Test 99');
    if (placeholder === 'Alamat') await input.type('Alamat Test');
  }

  await page.screenshot({ path: 'test_step3_store_filled.png' });

  console.log("Saving store...");
  await page.evaluate(() => {
    const btns = Array.from(document.querySelectorAll('button'));
    const saveBtn = btns.find(b => b.textContent === 'Save');
    if (saveBtn) saveBtn.click();
  });

  await new Promise(resolve => setTimeout(resolve, 2000));
  await page.screenshot({ path: 'test_step4_store_saved.png' });

  // Switch to SKUs tab
  console.log("Switching to SKUs tab...");
  await page.evaluate(() => {
    const btns = Array.from(document.querySelectorAll('button'));
    const skuBtn = btns.find(b => b.textContent === 'SKUs');
    if (skuBtn) skuBtn.click();
  });
  await new Promise(resolve => setTimeout(resolve, 1000));
  await page.screenshot({ path: 'test_step5_skus_tab.png' });

  console.log("Clicking Add SKU...");
  await page.evaluate(() => {
    const btns = Array.from(document.querySelectorAll('button'));
    const addBtn = btns.find(b => b.textContent.includes('Add SKU'));
    if (addBtn) addBtn.click();
  });
  await new Promise(resolve => setTimeout(resolve, 500));

  console.log("Filling new SKU form...");
  const skuInputs = await page.$$('input[placeholder]');
  for (const input of skuInputs) {
    const placeholder = await input.evaluate(el => el.getAttribute('placeholder'));
    if (placeholder === 'Kode Item') await input.type('SKU99');
    if (placeholder === 'Nama Item') await input.type('Item 99');
    if (placeholder === 'Barcode') await input.type('12345');
    if (placeholder === 'Jenis Outer (e.g. DUS)') await input.type('DUS');
  }

  await page.screenshot({ path: 'test_step6_sku_filled.png' });

  console.log("Saving SKU...");
  await page.evaluate(() => {
    const btns = Array.from(document.querySelectorAll('button'));
    const saveBtn = btns.find(b => b.textContent === 'Save');
    if (saveBtn) saveBtn.click();
  });

  await new Promise(resolve => setTimeout(resolve, 2000));
  await page.screenshot({ path: 'test_step7_sku_saved.png' });

  console.log("Done! Screenshots saved.");
  await browser.close();
})();