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

test('shows the generation workspace and handles an empty library', async ({ page }) => {
  await page.goto('/')
  await expect(page.getByRole('heading', { name: 'Generated audio' })).toBeVisible()
  await expect(page.getByText('Your next favorite take starts here.')).toBeVisible()
  await expect(page.getByRole('tab', { name: /record/i })).toBeVisible()
})

test('records a browser microphone sample and offers a preview', async ({ page }) => {
  await page.addInitScript(() => {
    Object.defineProperty(navigator, 'mediaDevices', {
      configurable: true,
      value: { getUserMedia: async () => ({ getTracks: () => [{ stop() {} }] }) },
    })
    class TestMediaRecorder {
      state = 'inactive'
      mimeType = 'audio/webm'
      ondataavailable: ((event: { data: Blob }) => void) | null = null
      onstop: (() => void) | null = null
      static isTypeSupported() { return true }
      constructor(_: unknown) {}
      start() { this.state = 'recording' }
      stop() {
        this.state = 'inactive'
        this.ondataavailable?.({ data: new Blob(['fake audio'], { type: this.mimeType }) })
        this.onstop?.()
      }
    }
    Object.defineProperty(window, 'MediaRecorder', { configurable: true, value: TestMediaRecorder })
  })
  await page.goto('/')
  await page.getByRole('tab', { name: /record/i }).click()
  await page.getByRole('button', { name: /start recording/i }).click()
  await expect(page.getByText('Recording in progress')).toBeVisible()
  await page.waitForTimeout(700)
  await page.getByRole('button', { name: /stop recording/i }).click()
  await expect(page.getByLabel('Recording preview')).toBeVisible()
})

test('cancels a queued generation from the library', async ({ page }) => {
  const job = { id: 'job-1', text: 'A queued sample', reference_id: 'ref-1', status: 'queued', error: null, created_at: '2026-10-27T12:00:00Z', updated_at: '2026-10-27T12:00:00Z', audio_url: null }
  await page.route('**/api/references', (route) => route.fulfill({ json: [] }))
  await page.route('**/api/generations*', (route) => route.fulfill({ json: { items: [job], page: 1, page_size: 50, total: 1, pages: 1 } }))
  await page.route('**/api/generations/job-1/cancel', async (route) => route.fulfill({ json: { ...job, status: 'cancelled' } }))
  await page.goto('/')
  await expect(page.getByText('A queued sample')).toBeVisible()
  await page.getByRole('button', { name: /cancel generation/i }).click()
  await expect(page.getByText('CANCELLED', { exact: true })).toBeVisible()
})