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

test.describe('Rewards Pages Verification', () => {
  test('Home page loads without getting stuck', async ({ page }) => {
    await page.goto('http://localhost:5173/')

    // Wait for page to load - should not be stuck on spinner
    await expect(page.locator('h1:has-text("H2H")')).toBeVisible({ timeout: 10000 })

    // The page should show content, not just a spinner
    // Look for navigation links which indicate the page loaded
    await expect(page.locator('text=Sports').first()).toBeVisible()
    await expect(page.locator('text=Live').first()).toBeVisible()
  })

  test('Header Rewards dropdown works', async ({ page }) => {
    await page.goto('http://localhost:5173/')

    // Find and click the Rewards dropdown
    const rewardsButton = page.locator('button:has-text("Rewards")')
    await expect(rewardsButton).toBeVisible()
    await rewardsButton.click()

    // Verify dropdown menu appears with all options
    await expect(page.locator('a[href="/rewards"]:has-text("Overview")')).toBeVisible()
    await expect(page.locator('a[href="/rewards/leaderboard"]')).toBeVisible()
    await expect(page.locator('a[href="/rewards/achievements"]')).toBeVisible()
    await expect(page.locator('a[href="/rewards/loot-boxes"]')).toBeVisible()
    await expect(page.locator('a[href="/rewards/activity"]')).toBeVisible()
  })

  test('Rewards Overview page loads with Header', async ({ page }) => {
    await page.goto('http://localhost:5173/rewards')

    // Check Header is present
    await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()

    // Check page title
    await expect(page.locator('h1:has-text("Rewards")')).toBeVisible()

    // Check page has light theme (white/light backgrounds)
    const mainContent = page.locator('.bg-white').first()
    await expect(mainContent).toBeVisible()
  })

  test('Leaderboard page loads', async ({ page }) => {
    await page.goto('http://localhost:5173/rewards/leaderboard')

    // Check Header is present
    await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()

    // Check page content
    await expect(page.locator('h1:has-text("Leaderboard")')).toBeVisible()
  })

  test('Achievements page shows login prompt when not authenticated', async ({ page }) => {
    await page.goto('http://localhost:5173/rewards/achievements')

    // Check Header is present
    await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()

    // Should show sign in required message
    await expect(page.locator('text=Sign In Required')).toBeVisible()
    // Use more specific selector for the sign in link in the content area
    await expect(page.locator('.bg-white a[href="/login"]:has-text("Sign In")')).toBeVisible()
  })

  test('Loot Boxes page shows login prompt when not authenticated', async ({ page }) => {
    await page.goto('http://localhost:5173/rewards/loot-boxes')

    // Check Header is present
    await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()

    // Should show sign in required message
    await expect(page.locator('text=Sign In Required')).toBeVisible()
  })

  test('Activity page loads', async ({ page }) => {
    await page.goto('http://localhost:5173/rewards/activity')

    // Check Header is present
    await expect(page.locator('header h1:has-text("H2H")')).toBeVisible()

    // Check page title
    await expect(page.locator('h1:has-text("Activity")')).toBeVisible()
  })

  test('Navigate between rewards pages via sub-nav', async ({ page }) => {
    await page.goto('http://localhost:5173/rewards')

    // Click on Leaderboard in sub-nav
    await page.locator('nav a[href="/rewards/leaderboard"]').click()
    await expect(page).toHaveURL(/\/rewards\/leaderboard/)

    // Click on Activity in sub-nav
    await page.locator('nav a[href="/rewards/activity"]').click()
    await expect(page).toHaveURL(/\/rewards\/activity/)
  })

  test('All rewards pages have consistent light theme', async ({ page }) => {
    const pages = [
      '/rewards',
      '/rewards/leaderboard',
      '/rewards/achievements',
      '/rewards/loot-boxes',
      '/rewards/activity'
    ]

    for (const pagePath of pages) {
      await page.goto(`http://localhost:5173${pagePath}`)

      // Verify light gray background (bg-gray-50)
      const body = page.locator('.min-h-screen.bg-gray-50')
      await expect(body).toBeVisible()

      // Verify white content boxes exist
      const whiteBox = page.locator('.bg-white').first()
      await expect(whiteBox).toBeVisible()
    }
  })
})