import { expect, test } from 'playwright/test'

test.describe('Botonic Publish E2E', () => {
  test.beforeEach(async ({ page }) => {
    page.on('console', msg => {
      if (msg.type() === 'error') {
        console.log(`[BROWSER ERROR] ${msg.text()}`)
      }
    })

    page.on('pageerror', error => {
      console.log(`[PAGE ERROR] ${error.message}`)
    })

    await page.goto('/')
    await page.waitForLoadState('networkidle')
    await page.waitForSelector('[data-testid="webchat-trigger"]', {
      timeout: 3000,
    })
  })

  async function ensureWebchatOpen(page: any) {
    const trigger = page.getByTestId('webchat-trigger')
    await expect(trigger).toBeVisible({ timeout: 10000 })

    const ariaExpanded = await trigger.getAttribute('aria-expanded')
    if (ariaExpanded === 'false') {
      await trigger.click()
      await page.waitForTimeout(300)
    }

    const container = page.getByTestId('webchat-container')
    await expect(container).toBeVisible({ timeout: 5000 })

    return { trigger, container }
  }

  test('webchat trigger renders and opens webchat', async ({ page }) => {
    const trigger = page.getByTestId('webchat-trigger')
    await expect(trigger).toBeVisible({ timeout: 10000 })

    const ariaExpanded = await trigger.getAttribute('aria-expanded')
    if (ariaExpanded === 'false') {
      await trigger.click()
      await page.waitForTimeout(300)
    }

    const container = page.getByTestId('webchat-container')
    await expect(container).toBeVisible({ timeout: 5000 })
  })

  test('bot responds to user message', async ({ page }) => {
    await ensureWebchatOpen(page)

    const input = page.locator('textarea').first()
    await expect(input).toBeVisible({ timeout: 5000 })

    await input.fill('hello')
    await input.press('Enter')

    const messages = page.locator('[data-testid^="webchat-message-"]')
    await expect(messages.first()).toBeVisible({ timeout: 15000 })
  })

  test('send button works', async ({ page }) => {
    await ensureWebchatOpen(page)

    const input = page.locator('textarea').first()
    await expect(input).toBeVisible({ timeout: 5000 })

    await input.fill('test message')

    const sendButton = page.getByRole('button', { name: 'Send message' })
    await expect(sendButton).toBeVisible()
    await sendButton.click()

    const messages = page.locator('[data-testid^="webchat-message-"]')
    await expect(messages.first()).toBeVisible({ timeout: 15000 })
  })
})