/** Screenshot the dashboard and the flow canvas as a user will find them. */
import { mkdir } from "node:fs/promises"
import { chromium } from "@playwright/test"

const APP_URL = process.env.APP_URL || "http://app.localhost"
const OUT = process.env.SCREENSHOT_DIR || "screenshots"
const browser = await chromium.launch()

for (const theme of ["light", "dark"]) {
  const dir = `${OUT}/${theme}`
  await mkdir(dir, { recursive: true })
  const context = await browser.newContext({
    viewport: { width: 1440, height: 900 },
    colorScheme: theme,
  })
  await context.addInitScript((t) => {
    localStorage.setItem("fluksio-ui-theme", t)
  }, theme)
  const page = await context.newPage()

  await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
  await page.getByTestId("email-input").fill(process.env.FIRST_SUPERUSER)
  await page
    .getByTestId("password-input")
    .fill(process.env.FIRST_SUPERUSER_PASSWORD)
  await page.getByRole("button", { name: /log in/i }).click()
  await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })

  await page.goto(`${APP_URL}/dashboards/aircon`, { waitUntil: "networkidle" })
  await page.waitForTimeout(2500)
  await page.screenshot({ path: `${dir}/live-dashboard.png` })

  await page.goto(`${APP_URL}/flows/aircon`, { waitUntil: "networkidle" })
  await page.keyboard.press("Escape")
  await page.waitForTimeout(2500)
  await page.screenshot({ path: `${dir}/live-flow.png` })

  console.log(`  ${theme}: done`)
  await context.close()
}
await browser.close()