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

test.describe('Home Page', () => {
  test.describe('English Version', () => {
    test('should load successfully', async ({ page }) => {
      await page.goto('/en');
      await expect(page).toHaveTitle(/Mawidi/);
    });

    test('should display hero section', async ({ page }) => {
      await page.goto('/en');

      // Check hero heading
      await expect(page.getByRole('heading', { level: 1 })).toContainText('Turn WhatsApp agents');

      // Check CTA buttons
      await expect(page.getByRole('link', { name: /Book a discovery call/i })).toBeVisible();
      await expect(page.getByRole('link', { name: /pricing/i })).toBeVisible();
    });

    test('should display navigation', async ({ page }) => {
      await page.goto('/en');

      // Check brand logo
      await expect(page.getByText('Mawidi').first()).toBeVisible();

      // Check main nav links
      await expect(page.getByRole('link', { name: 'How it works' })).toBeVisible();
      await expect(page.getByRole('link', { name: 'Pricing' })).toBeVisible();
    });

    test('should have working language switcher', async ({ page }) => {
      await page.goto('/en');

      // Click Arabic language
      await page.click('text=AR');

      // Should navigate to Arabic version
      await expect(page).toHaveURL(/\/ar/);
      await expect(page.getByRole('heading', { level: 1 })).toContainText('حوِّل وكلاء الواتساب');
    });

    test('should display logo scroller', async ({ page }) => {
      await page.goto('/en');

      await expect(page.getByText(/Trusted by many different companies/i)).toBeVisible();
    });

    test('should have proper meta tags', async ({ page }) => {
      await page.goto('/en');

      // Check meta description
      const metaDescription = await page.locator('meta[name="description"]').getAttribute('content');
      expect(metaDescription).toBeTruthy();

      // Check viewport
      const viewport = await page.locator('meta[name="viewport"]').getAttribute('content');
      expect(viewport).toContain('width=device-width');
    });
  });

  test.describe('Arabic Version', () => {
    test('should load successfully', async ({ page }) => {
      await page.goto('/ar');
      await expect(page).toHaveTitle(/Mawidi/);
    });

    test('should display RTL layout', async ({ page }) => {
      await page.goto('/ar');

      const nav = page.locator('nav');
      await expect(nav).toHaveAttribute('dir', 'rtl');
    });

    test('should display Arabic content', async ({ page }) => {
      await page.goto('/ar');

      await expect(page.getByRole('heading', { level: 1 })).toContainText('حوِّل وكلاء الواتساب');
      await expect(page.getByText(/وكلاء واتساب واستقبال صوتي/i)).toBeVisible();
    });

    test('should have Arabic navigation', async ({ page }) => {
      await page.goto('/ar');

      await expect(page.getByText('كيف يعمل')).toBeVisible();
      await expect(page.getByText('الأسعار')).toBeVisible();
    });

    test('should switch to English', async ({ page }) => {
      await page.goto('/ar');

      await page.click('text=EN');

      await expect(page).toHaveURL(/\/en/);
      await expect(page.getByRole('heading', { level: 1 })).toContainText('Turn WhatsApp agents');
    });
  });

  test.describe('Responsive Design', () => {
    test('should work on mobile', async ({ page }) => {
      await page.setViewportSize({ width: 375, height: 667 });
      await page.goto('/en');

      // Check mobile menu button
      const menuButton = page.getByRole('button', { name: /menu/i });
      await expect(menuButton).toBeVisible();

      // Open mobile menu
      await menuButton.click();

      // Check navigation links appear
      await expect(page.getByText('How it works')).toBeVisible();
    });

    test('should work on tablet', async ({ page }) => {
      await page.setViewportSize({ width: 768, height: 1024 });
      await page.goto('/en');

      await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
    });

    test('should work on desktop', async ({ page }) => {
      await page.setViewportSize({ width: 1920, height: 1080 });
      await page.goto('/en');

      await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
    });
  });

  test.describe('Navigation', () => {
    test('should navigate to pricing page', async ({ page }) => {
      await page.goto('/en');

      await page.click('text=Pricing');

      await expect(page).toHaveURL(/\/pricing/);
    });

    test('should navigate to contact page', async ({ page }) => {
      await page.goto('/en');

      await page.getByRole('link', { name: /Book a discovery call/i }).click();

      await expect(page).toHaveURL(/\/contact/);
    });

    test('should open features dropdown', async ({ page }) => {
      await page.goto('/en');

      // Hover over Features
      await page.hover('button:has-text("Features")');

      // Check dropdown appears
      await expect(page.getByText('Appointments')).toBeVisible();
    });
  });

  test.describe('Performance', () => {
    test('should load within acceptable time', async ({ page }) => {
      const startTime = Date.now();
      await page.goto('/en');
      const loadTime = Date.now() - startTime;

      // Should load within 3 seconds
      expect(loadTime).toBeLessThan(3000);
    });

    test('should have no console errors', async ({ page }) => {
      const errors: string[] = [];
      page.on('console', (msg) => {
        if (msg.type() === 'error') {
          errors.push(msg.text());
        }
      });

      await page.goto('/en');

      expect(errors).toHaveLength(0);
    });
  });

  test.describe('Accessibility', () => {
    test('should have proper heading structure', async ({ page }) => {
      await page.goto('/en');

      const h1 = await page.locator('h1').count();
      expect(h1).toBe(1);
    });

    test('should have alt text for images', async ({ page }) => {
      await page.goto('/en');

      const images = await page.locator('img').all();
      for (const img of images) {
        const alt = await img.getAttribute('alt');
        expect(alt).toBeTruthy();
      }
    });

    test('should support keyboard navigation', async ({ page }) => {
      await page.goto('/en');

      // Tab through interactive elements
      await page.keyboard.press('Tab');
      await page.keyboard.press('Tab');
      await page.keyboard.press('Tab');

      // Check focus is visible
      const focusedElement = await page.evaluate(() => document.activeElement?.tagName);
      expect(focusedElement).toBeTruthy();
    });
  });
});
