/**
 * Visual verification for the integrated local stack (root `make verify`).
 *
 * Logs into the dashboard with the bootstrap superuser and captures the app
 * shell plus the website hero in both themes. This is the standard "did the
 * change actually work" gate — look at the PNGs, do not just trust the build.
 *
 * Env (all set by the root Makefile):
 *   APP_URL, WEBSITE_URL, FIRST_SUPERUSER, FIRST_SUPERUSER_PASSWORD
 *   SCREENSHOT_DIR (default: ./screenshots)
 */
import { mkdir } from "node:fs/promises"
import { chromium } from "@playwright/test"

const APP_URL = process.env.APP_URL || "http://app.localhost"
const WEBSITE_URL = process.env.WEBSITE_URL || "http://localhost"
const EMAIL = process.env.FIRST_SUPERUSER
const PASSWORD = process.env.FIRST_SUPERUSER_PASSWORD
const OUT = process.env.SCREENSHOT_DIR || "screenshots"

if (!EMAIL || !PASSWORD) {
  console.error(
    "FIRST_SUPERUSER / FIRST_SUPERUSER_PASSWORD are unset — run from the root `make verify`.",
  )
  process.exit(1)
}

/** Force the theme through the same storage key the pre-paint script reads. */
async function withTheme(browser, theme) {
  const context = await browser.newContext({
    viewport: { width: 1440, height: 900 },
    colorScheme: theme,
  })
  await context.addInitScript((t) => {
    localStorage.setItem("fluksio-ui-theme", t)
  }, theme)
  return context
}

const browser = await chromium.launch()

for (const theme of ["light", "dark"]) {
  const dir = `${OUT}/${theme}`
  await mkdir(dir, { recursive: true })
  const context = await withTheme(browser, theme)
  const page = await context.newPage()

  await page.goto(`${WEBSITE_URL}/`, { waitUntil: "networkidle" })
  await page.screenshot({ path: `${dir}/website-hero.png` })

  await page.goto(`${APP_URL}/login`, { waitUntil: "networkidle" })
  await page.screenshot({ path: `${dir}/app-login.png` })

  await page.getByPlaceholder(/email/i).fill(EMAIL)
  await page.getByPlaceholder(/password/i).fill(PASSWORD)
  await page.getByRole("button", { name: /log in/i }).click()
  await page.waitForURL(`${APP_URL}/`, { timeout: 15000 })
  await page.waitForLoadState("networkidle")
  await page.screenshot({ path: `${dir}/app-dashboard.png` })

  await context.close()
  console.log(`  wrote ${dir}/{website-hero,app-login,app-dashboard}.png`)
}

await browser.close()