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

test.describe('Landing Page - Clean Garage & Bento HUD', () => {
  test.beforeEach(async ({ page }) => {
    // Navigate to the landing page and wait for network to be idle (background image loaded)
    await page.goto('/')
    await page.waitForLoadState('networkidle')
  })

  test('should display sticky header with CSS logo and button', async ({ page }) => {
    // Check sticky header exists
    const header = page.locator('header')
    await expect(header).toBeVisible()
    
    // Verify Compass + Search logo SVG icons are present
    const compassIcon = header.locator('svg').first()
    await expect(compassIcon).toBeVisible()
    
    // Verify "SERVICEFINDER" text
    await expect(header.locator('text=SERVICE')).toBeVisible()
    await expect(header.locator('text=FINDER')).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-with-logo.png' })
  })

  test('should display 2-column hero layout with text and Bento cards', async ({ page }) => {
    // Check main heading (Left column)
    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 in left column
    const ctaButton = page.getByRole('button', { name: /Garázs Nyitása/i }).first()
    await expect(ctaButton).toBeVisible()
    
    // Take full page screenshot showing 2-column layout
    await page.screenshot({ 
      path: 'test-results/screenshots/landing-two-column-layout.png',
      fullPage: true 
    })
  })

  test('should display Bento-Grid with 5 HUD cards on the right', async ({ page }) => {
    // Card 1: Statistics (Full width, top)
    await expect(page.locator('text=Rendszerünkben kezelt járművek')).toBeVisible()
    await expect(page.locator('text=1,245')).toBeVisible()
    
    // Card 2: Fuel Cost (Middle left)
    await expect(page.locator('text=Üzemanyag (E havi)')).toBeVisible()
    await expect(page.locator('text=32.500')).toBeVisible()
    
    // Card 3: Service Cost (Middle right)
    await expect(page.locator('text=Várható Szerviz')).toBeVisible()
    await expect(page.locator('text=48.000')).toBeVisible()
    
    // Card 4: Security Badge (Bottom left)
    await expect(page.locator('text=Security by Design')).toBeVisible()
    await expect(page.locator('text=100% E2E titkosítás')).toBeVisible()
    
    // Card 5: Fleet Radar (Bottom right)
    await expect(page.locator('text=Flotta Radar')).toBeVisible()
    await expect(page.locator('text=Aktív')).toBeVisible()
    await expect(page.locator('text=Inaktív')).toBeVisible()
    
    // Take screenshot of the Bento-Grid cards area
    const bentoGrid = page.locator('.grid.grid-cols-2').last()
    await bentoGrid.screenshot({ path: 'test-results/screenshots/bento-grid-cards.png' })
  })

  test('should have clean garage background with asymmetric overlay', async ({ page }) => {
    // Check that the background image is loaded
    const bgContainer = page.locator('div.fixed.inset-0').first()
    await expect(bgContainer).toBeVisible()
    
    // Verify background image URL contains 'garage_clean.png'
    const bgStyle = await bgContainer.evaluate((el) => 
      window.getComputedStyle(el).backgroundImage
    )
    expect(bgStyle).toContain('garage_clean.png')
    
    // Take screenshot to verify background
    await page.screenshot({ 
      path: 'test-results/screenshots/clean-garage-background.png',
      fullPage: true 
    })
  })

  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')
    await expect(modal).not.toBeVisible()
    
    // Click "Garázs Nyitása" button in header
    const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i }).first()
    await openGarageBtn.click()
    
    // Wait for modal to appear
    await expect(modal).toBeVisible()
    
    // Verify modal content
    await expect(page.locator('text=SERVICEFINDER')).toHaveCount(2) // Header + Modal
    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-with-logo.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 }).first()
    await openGarageBtn.click()
    
    // Verify modal is open
    const modal = page.locator('text=Lépj be a garázsodba')
    await expect(modal).toBeVisible()
    
    // Click backdrop (outside modal)
    await page.locator('.fixed.inset-0.z-\\[100\\]').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 }).first()
    await openGarageBtn.click()
    
    // Verify modal is open
    const modal = page.locator('text=Lépj be a garázsodba')
    await expect(modal).toBeVisible()
    
    // Click close button (X)
    const closeBtn = page.locator('button').filter({ has: page.locator('svg line[x1="18"][y1="6"]') })
    await closeBtn.click()
    
    // Modal should close
    await expect(modal).not.toBeVisible()
  })

  test('should have proper card styling with glassmorphism', async ({ page }) => {
    // Check one of the Bento cards for glassmorphism styles
    const fuelCard = page.locator('text=Üzemanyag (E havi)').locator('..')
    
    // Verify card is visible
    await expect(fuelCard).toBeVisible()
    
    // Check computed styles for backdrop-blur and transparency
    const backdropFilter = await fuelCard.evaluate((el) => 
      window.getComputedStyle(el).backdropFilter || window.getComputedStyle(el).webkitBackdropFilter
    )
    
    // Should have blur effect
    expect(backdropFilter).toContain('blur')
    
    // Take close-up screenshot of a card
    await fuelCard.screenshot({ path: 'test-results/screenshots/card-glassmorphism-detail.png' })
  })

  test('should display all Lucide icons correctly', async ({ page }) => {
    // Count SVG icons in the Bento cards
    const svgIcons = page.locator('.grid.grid-cols-2 svg')
    const iconCount = await svgIcons.count()
    
    // Should have multiple icons (trending up, fuel, wrench, shield, car icons)
    expect(iconCount).toBeGreaterThan(5)
    
    // Verify specific icons are visible
    await expect(page.locator('svg').filter({ has: page.locator('polyline[points*="22 7"]') })).toBeVisible() // TrendingUp
    await expect(page.locator('svg').filter({ has: page.locator('path[d*="M14 22V4"]') })).toBeVisible() // Fuel
    await expect(page.locator('svg').filter({ has: page.locator('path[d*="M12 22s8-4"]') })).toBeVisible() // Shield
  })

  test('should be responsive on mobile viewport', async ({ page }) => {
    // Set mobile viewport
    await page.setViewportSize({ width: 375, height: 667 })
    
    // Wait for layout to adjust
    await page.waitForTimeout(500)
    
    // Header should still be visible
    const header = page.locator('header')
    await expect(header).toBeVisible()
    
    // Main heading should be visible
    await expect(page.locator('h1')).toBeVisible()
    
    // Cards should stack vertically on mobile
    await expect(page.locator('text=Rendszerünkben kezelt járművek')).toBeVisible()
    
    // Take mobile screenshot
    await page.screenshot({ 
      path: 'test-results/screenshots/landing-mobile-view.png',
      fullPage: true 
    })
  })

  test('should have proper color scheme (turquoise and dark blue)', async ({ page }) => {
    // Check turquoise color (#65A5A0) is used
    const turquoiseElements = page.locator('[class*="65A5A0"]')
    const turquoiseCount = await turquoiseElements.count()
    expect(turquoiseCount).toBeGreaterThan(0)
    
    // Check dark blue color (#062535) is used
    const darkBlueElements = page.locator('[class*="062535"]')
    const darkBlueCount = await darkBlueElements.count()
    expect(darkBlueCount).toBeGreaterThan(0)
    
    // Verify button has turquoise background
    const button = page.getByRole('button', { name: /Garázs Nyitása/i }).first()
    const bgColor = await button.evaluate((el) => 
      window.getComputedStyle(el).backgroundColor
    )
    
    // RGB equivalent of #65A5A0 is approximately rgb(101, 165, 160)
    expect(bgColor).toMatch(/rgb\(101,\s*165,\s*160\)/)
  })
})