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

test.describe('Blog Enhancement Validation', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('http://localhost:3001/en/blog');
  });

  test('blog page loads and displays enhanced posts', async ({ page }) => {
    // Check if blog page loads
    await expect(page).toHaveTitle(/Blog/);
    
    // Check for blog posts
    const blogPosts = page.locator('[data-testid="blog-post-card"]');
    await expect(blogPosts.first()).toBeVisible();
    
    // Check for enhanced formatting elements
    const postTitles = page.locator('h2, h3');
    await expect(postTitles.first()).toBeVisible();
  });

  test('individual blog post displays enhanced formatting', async ({ page }) => {
    // Navigate to a specific blog post
    const firstPostLink = page.locator('a[href*="/blog/"]').first();
    await firstPostLink.click();
    
    // Wait for navigation
    await page.waitForLoadState('networkidle');
    
    // Check for enhanced elements
    const executiveSummary = page.locator('.bg-gradient-to-r');
    await expect(executiveSummary.first()).toBeVisible({ timeout: 10000 });
    
    // Check for data visualizations
    const statsCards = page.locator('.grid > .bg-white > .text-2xl');
    if (await statsCards.count() > 0) {
      await expect(statsCards.first()).toBeVisible();
    }
    
    // Check for GCC-specific content
    const gccContent = page.locator('text=/Saudi Arabia|UAE|Qatar|GCC/');
    await expect(gccContent.first()).toBeVisible();
  });

  test('blog posts contain professional formatting elements', async ({ page }) => {
    // Navigate to reducing no-shows post (enhanced post)
    await page.goto('http://localhost:3001/en/blog/reducing-no-shows-strategies');
    
    // Check for executive summary
    const execSummary = page.locator('text=/Executive Summary/');
    await expect(execSummary).toBeVisible();
    
    // Check for financial impact analysis
    const financialImpact = page.locator('text=/Financial Impact|ROI|SAR/');
    await expect(financialImpact).toBeVisible();
    
    // Check for strategy sections
    const strategies = page.locator('text=/Strategy|Impact:/');
    await expect(strategies.first()).toBeVisible();
    
    // Check for implementation timeline
    const timeline = page.locator('text=/Implementation|Timeline|Weeks/');
    await expect(timeline).toBeVisible();
  });

  test('blog posts display GCC-specific data correctly', async ({ page }) => {
    // Test multiple posts for GCC content
    const posts = [
      '/en/blog/reducing-no-shows-strategies',
      '/en/blog/healthcare-payment-automation-gcc',
      '/en/blog/multi-location-clinic-management'
    ];

    for (const postPath of posts) {
      await page.goto(`http://localhost:3001${postPath}`);
      
      // Check for GCC country mentions
      const gccCountries = page.locator('text=/Saudi Arabia|UAE|Qatar|Kuwait|Bahrain|Oman/');
      await expect(gccCountries.first()).toBeVisible();
      
      // Check for currency mentions (SAR, AED, QAR)
      const currencies = page.locator('text=/SAR|AED|QAR|KWD|BHD|OMR/');
      await expect(currencies.first()).toBeVisible();
    }
  });

  test('blog responsive design works correctly', async ({ page }) => {
    await page.goto('http://localhost:3001/en/blog');
    
    // Test desktop view
    await page.setViewportSize({ width: 1200, height: 800 });
    const desktopPosts = page.locator('[data-testid="blog-post-card"]');
    await expect(desktopPosts.first()).toBeVisible();
    
    // Test tablet view
    await page.setViewportSize({ width: 768, height: 1024 });
    const tabletPosts = page.locator('[data-testid="blog-post-card"]');
    await expect(tabletPosts.first()).toBeVisible();
    
    // Test mobile view
    await page.setViewportSize({ width: 375, height: 667 });
    const mobilePosts = page.locator('[data-testid="blog-post-card"]');
    await expect(mobilePosts.first()).toBeVisible();
  });

  test('enhanced styling elements render correctly', async ({ page }) => {
    await page.goto('http://localhost:3001/en/blog/reducing-no-shows-strategies');
    
    // Check for gradient backgrounds
    const gradients = page.locator('.bg-gradient-to-r, .bg-gradient-to-br');
    if (await gradients.count() > 0) {
      await expect(gradients.first()).toBeVisible();
    }
    
    // Check for card components
    const cards = page.locator('.bg-white.p-4.rounded-lg, .bg-white.p-6.rounded-xl');
    if (await cards.count() > 0) {
      await expect(cards.first()).toBeVisible();
    }
    
    // Check for colored sections
    const coloredSections = page.locator('[class*="bg-"][class*="50"]');
    if (await coloredSections.count() > 0) {
      await expect(coloredSections.first()).toBeVisible();
    }
  });

  test('blog navigation and metadata work correctly', async ({ page }) => {
    await page.goto('http://localhost:3001/en/blog');
    
    // Check blog title and description
    const blogTitle = page.locator('h1');
    await expect(blogTitle).toBeVisible();
    
    // Check post metadata (author, date, tags)
    const firstPost = page.locator('[data-testid="blog-post-card"]').first();
    await firstPost.scrollIntoViewIfNeeded();
    
    const author = firstPost.locator('text=/Dr\.|by/');
    const date = firstPost.locator('text=/2024|2023/');
    const tags = firstPost.locator('[data-testid="blog-tags"]');
    
    // These might not all be present, so check individually
    if (await author.count() > 0) {
      await expect(author.first()).toBeVisible();
    }
    if (await date.count() > 0) {
      await expect(date.first()).toBeVisible();
    }
    if (await tags.count() > 0) {
      await expect(tags.first()).toBeVisible();
    }
  });
});
