import type { DifyWorld } from '../../support/world'
import { Then, When } from '@cucumber/cucumber'
import { expect } from '@playwright/test'

When('I start creating a blank app', async function (this: DifyWorld) {
  const page = this.getPage()

  await expect(page.getByRole('button', { name: 'Create from Blank' })).toBeVisible()
  await page.getByRole('button', { name: 'Create from Blank' }).click()
})

When('I enter a unique E2E app name', async function (this: DifyWorld) {
  const appName = `E2E App ${Date.now()}`
  this.lastCreatedAppName = appName
  await this.getPage().getByPlaceholder('Give your app a name').fill(appName)
})

When('I confirm app creation', async function (this: DifyWorld) {
  const createButton = this.getPage()
    .getByRole('button', { name: /^Create(?:\s|$)/ })
    .last()

  await expect(createButton).toBeEnabled()
  await createButton.click()
})

When('I select the {string} app type', async function (this: DifyWorld, appType: string) {
  const dialog = this.getPage().getByRole('dialog')
  // The modal defaults to ADVANCED_CHAT, so the preview panel immediately renders
  // <h4>Chatflow</h4> alongside the card's <div>Chatflow</div>.
  // locator('div').getByText(...) would still match the <h4> because getByText
  // searches inside each div for any descendant. Use :text-is() instead, which
  // targets only <div> elements whose own normalised text equals appType exactly.
  const appTypeCard = dialog.locator(`div:text-is("${appType}")`)

  await expect(appTypeCard).toBeVisible()
  await appTypeCard.click()
})

When('I expand the beginner app types', async function (this: DifyWorld) {
  const page = this.getPage()
  const toggle = page.getByRole('button', { name: 'More basic app types' })

  await expect(toggle).toBeVisible()
  await toggle.click()
})

Then('I should land on the app editor', async function (this: DifyWorld) {
  await expect(this.getPage()).toHaveURL(/\/app\/[^/]+\/(workflow|configuration)(?:\?.*)?$/)
})

Then('I should land on the workflow editor', async function (this: DifyWorld) {
  await expect(this.getPage()).toHaveURL(/\/app\/[^/]+\/workflow(?:\?.*)?$/)
})

Then('I should land on the app configuration page', async function (this: DifyWorld) {
  await expect(this.getPage()).toHaveURL(/\/app\/[^/]+\/configuration(?:\?.*)?$/)
})