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

test.describe('Neo-Glassmorphism Landing Page', () => {
  test.beforeEach(async ({ page }) => {
    // Navigate to the landing page
    await page.goto('/')
  })

  test('should display sticky header with logo and button', async ({ page }) => {
    // Check sticky header exists
    const header = page.locator('header')
    await expect(header).toBeVisible()
    
    // Verify logo SVG icons are present
    const compassIcon = header.locator('svg').first()
    await expect(compassIcon).toBeVisible()
    
    // Verify "Garázs Nyitása" button
    const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
    await expect(openGarageBtn).toBeVisible()
    
    // Take screenshot of header
    await header.screenshot({ path: 'test-results/screenshots/header-sticky.png' })
  })

  test('should display three asymmetric floating cards', async ({ page }) => {
    // Wait for page to fully load
    await page.waitForLoadState('networkidle')
    
    // Card 1: HUD Costs (should contain "HUD Költségek" and "25.000 Ft")
    const hudCard = page.locator('text=HUD Költségek').locator('..')
    await expect(hudCard).toBeVisible()
    await expect(page.locator('text=25.000 Ft')).toBeVisible()
    
    // Card 2: Flotta Radar (should contain "Flotta Radar" and vehicle counts)
    const fleetCard = page.locator('text=Flotta Radar').locator('..')
    await expect(fleetCard).toBeVisible()
    await expect(page.locator('text=Aktív')).toBeVisible()
    
    // Card 3: Gamification (should contain "Gamifikáció" and "3450")
    const gamificationCard = page.locator('text=Gamifikáció').locator('..')
    await expect(gamificationCard).toBeVisible()
    await expect(page.locator('text=3450')).toBeVisible()
    await expect(page.locator('text=Usta Szerelő')).toBeVisible()
    
    // Take full page screenshot showing all cards
    await page.screenshot({ 
      path: 'test-results/screenshots/landing-floating-cards.png',
      fullPage: true 
    })
  })

  test('should display hero content with gradient background', async ({ page }) => {
    // Check main heading
    const heading = page.locator('h1')
    await expect(heading).toContainText('Digitális Flotta')
    await expect(heading).toContainText('Menedzsment')
    
    // Check subheading
    await expect(page.locator('text=Valós idejű költségkövetés')).toBeVisible()
    
    // Check CTA button
    const ctaButton = page.getByRole('button', { name: /Kezdjük el/i })
    await expect(ctaButton).toBeVisible()
    
    // Verify gradient background is applied (check computed styles)
    const mainContainer = page.locator('div').first()
    const bgColor = await mainContainer.evaluate((el) => 
      window.getComputedStyle(el).backgroundImage
    )
    expect(bgColor).toContain('gradient')
  })

  test('should open login modal when clicking "Garázs Nyitása"', async ({ page }) => {
    // Modal should not be visible initially
    const modal = page.locator('text=Lépj be a garázsodba').locator('..')
    await expect(modal).not.toBeVisible()
    
    // Click "Garázs Nyitása" button
    const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
    await openGarageBtn.click()
    
    // Wait for modal to appear
    await expect(modal).toBeVisible()
    
    // Verify modal content
    await expect(page.locator('text=Lépj be a garázsodba')).toBeVisible()
    await expect(page.getByLabel(/Email cím/i)).toBeVisible()
    await expect(page.getByLabel(/Jelszó/i)).toBeVisible()
    
    // Take screenshot of open modal
    await page.screenshot({ 
      path: 'test-results/screenshots/login-modal-open.png',
      fullPage: false 
    })
  })

  test('should close modal when clicking backdrop', async ({ page }) => {
    // Open modal
    const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
    await openGarageBtn.click()
    
    // Wait for modal
    const modal = page.locator('text=Lépj be a garázsodba').locator('..')
    await expect(modal).toBeVisible()
    
    // Click backdrop (outside modal)
    const backdrop = page.locator('.fixed.inset-0').first()
    await backdrop.click({ position: { x: 10, y: 10 } })
    
    // Modal should close
    await expect(modal).not.toBeVisible()
  })

  test('should close modal when clicking X button', async ({ page }) => {
    // Open modal
    const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
    await openGarageBtn.click()
    
    // Wait for modal
    const modal = page.locator('text=Lépj be a garázsodba').locator('..')
    await expect(modal).toBeVisible()
    
    // Click close button (X icon)
    const closeBtn = page.locator('button').filter({ has: page.locator('svg line[x1="18"]') }).first()
    await closeBtn.click()
    
    // Modal should close
    await expect(modal).not.toBeVisible()
  })

  test('should open modal when clicking hero CTA button', async ({ page }) => {
    // Click "Kezdjük el" button
    const ctaButton = page.getByRole('button', { name: /Kezdjük el/i })
    await ctaButton.click()
    
    // Modal should open
    const modal = page.locator('text=Lépj be a garázsodba').locator('..')
    await expect(modal).toBeVisible()
  })

  test('should have proper glassmorphism effects on cards', async ({ page }) => {
    await page.waitForLoadState('networkidle')
    
    // Check HUD card has backdrop-blur
    const hudCard = page.locator('text=HUD Költségek').locator('..')
    const backdropFilter = await hudCard.evaluate((el) => 
      window.getComputedStyle(el).backdropFilter || window.getComputedStyle(el).webkitBackdropFilter
    )
    expect(backdropFilter).toContain('blur')
    
    // Check card has border with turquoise color
    const borderColor = await hudCard.evaluate((el) => 
      window.getComputedStyle(el).borderColor
    )
    // Border should exist (not 'none')
    expect(borderColor).not.toBe('none')
  })

  test('should display CSS progress ring in gamification card', async ({ page }) => {
    await page.waitForLoadState('networkidle')
    
    // Find the SVG circle elements in the progress ring
    const progressRing = page.locator('svg circle[stroke="#65A5A0"]')
    await expect(progressRing).toBeVisible()
    
    // Verify trophy icons are present
    const trophies = page.locator('svg').filter({ hasText: '' }).locator('path[d*="M6 9H4.5"]')
    const trophyCount = await trophies.count()
    expect(trophyCount).toBeGreaterThanOrEqual(3)
  })

  test('should have responsive layout on mobile', async ({ page }) => {
    // Set mobile viewport
    await page.setViewportSize({ width: 375, height: 667 })
    
    // Check header is still visible
    const header = page.locator('header')
    await expect(header).toBeVisible()
    
    // Check cards are still visible (may stack differently)
    await expect(page.locator('text=HUD Költségek')).toBeVisible()
    await expect(page.locator('text=Flotta Radar')).toBeVisible()
    await expect(page.locator('text=Gamifikáció')).toBeVisible()
    
    // Take mobile screenshot
    await page.screenshot({ 
      path: 'test-results/screenshots/landing-mobile.png',
      fullPage: true 
    })
  })

  test('visual regression: full landing page', async ({ page }) => {
    await page.waitForLoadState('networkidle')
    
    // Take full page screenshot for visual comparison
    await page.screenshot({ 
      path: 'test-results/screenshots/landing-full-page.png',
      fullPage: true 
    })
  })

  test('visual regression: modal state', async ({ page }) => {
    // Open modal
    const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
    await openGarageBtn.click()
    
    // Wait for animation
    await page.waitForTimeout(500)
    
    // Take screenshot
    await page.screenshot({ 
      path: 'test-results/screenshots/modal-full-state.png',
      fullPage: false 
    })
  })
})