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

test.describe('Events list page', () => {
  test('events list loads', async ({ page }) => {
    await page.goto('/events')
    await expect(page.locator('h1', { hasText: 'Events' })).toBeVisible()
  })

  test('filter bar has type filters', async ({ page }) => {
    await page.goto('/events')
    const filterBar = page.locator('.filter-bar')
    await expect(filterBar).toBeVisible()

    for (const label of ['All', 'Workshops', 'Community', 'Social', 'Showcase']) {
      await expect(filterBar.locator('button', { hasText: label })).toBeVisible()
    }
  })

  test('past events toggle exists and can be checked', async ({ page }) => {
    await page.goto('/events')
    await page.waitForLoadState('networkidle')
    const toggle = page.locator('.past-toggle')
    await expect(toggle).toBeVisible()
    await expect(toggle).toContainText('Show past events')

    await toggle.click()
    await expect(toggle).toHaveClass(/active/)

    // Page should still render without errors after toggling
    await expect(page.locator('h1', { hasText: 'Events' })).toBeVisible()
  })

  test('clicking a filter button activates it', async ({ page }) => {
    await page.goto('/events')
    await page.waitForLoadState('networkidle')
    // Wait for Vue hydration — the "All" filter should have the active class once reactive
    const allBtn = page.locator('.filter-btn', { hasText: 'All' })
    await expect(allBtn).toHaveClass(/active/, { timeout: 10000 })
    const workshopsBtn = page.locator('.filter-bar button', { hasText: 'Workshops' })
    await workshopsBtn.click()
    await expect(workshopsBtn).toHaveClass(/active/, { timeout: 5000 })
  })

  test('event links navigate to detail page', async ({ page }) => {
    await page.goto('/events')

    // Check the past events toggle so we see all events
    await page.locator('.past-toggle').click()

    const eventLinks = page.locator('.event-row a')
    const count = await eventLinks.count()

    if (count === 0) {
      // No events in the database — just verify the empty state renders
      await expect(page.locator('.empty', { hasText: 'No events found' })).toBeVisible()
      return
    }

    // Click the first event link and verify navigation
    const firstLink = eventLinks.first()
    const href = await firstLink.getAttribute('href')
    await firstLink.click()
    await page.waitForURL(/\/events\//)

    expect(page.url()).toContain('/events/')
    // Detail page should have an h1 with the event title
    await expect(page.locator('h1')).toBeVisible()
  })
})