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

test.describe('Internationalization (i18n)', () => {
  test.describe('Language Detection and Routing', () => {
    test('should redirect root to default language', async ({ page }) => {
      await page.goto('/');

      // Should redirect to a language version (ar or en)
      await expect(page).toHaveURL(/\/(ar|en)/);
    });

    test('should preserve path when redirecting language', async ({ page }) => {
      await page.goto('/pricing');

      // Should redirect to language version with path preserved
      await expect(page).toHaveURL(/\/(ar|en)\/pricing/);
    });

    test('should handle duplicate language prefix', async ({ page }) => {
      await page.goto('/en/en/pricing');

      // Should remove duplicate and redirect correctly
      await expect(page).toHaveURL('/en/pricing');
    });

    test('should normalize language prefix case', async ({ page }) => {
      await page.goto('/EN/pricing');

      // Should normalize to lowercase
      await expect(page).toHaveURL('/en/pricing');
    });
  });

  test.describe('Language Switching', () => {
    test('should switch from English to Arabic', async ({ page }) => {
      await page.goto('/en');

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

      await expect(page).toHaveURL('/ar');
      await expect(page.locator('nav')).toHaveAttribute('dir', 'rtl');
    });

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

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

      await expect(page).toHaveURL('/en');
      await expect(page.locator('nav')).toHaveAttribute('dir', 'ltr');
    });

    test('should preserve path when switching language', async ({ page }) => {
      await page.goto('/en/pricing');

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

      await expect(page).toHaveURL('/ar/pricing');
    });

    test('should preserve nested paths', async ({ page }) => {
      await page.goto('/en/industries/healthcare');

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

      await expect(page).toHaveURL('/ar/industries/healthcare');
    });
  });

  test.describe('Content Translation', () => {
    test('should display English content correctly', async ({ page }) => {
      await page.goto('/en');

      // Check key English phrases
      await expect(page.getByRole('heading', { level: 1 })).toContainText('WhatsApp');
      await expect(page.getByText(/GCC clinics/i)).toBeVisible();
      await expect(page.getByRole('link', { name: /Sign Up/i })).toBeVisible();
    });

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

      // Check key Arabic phrases
      await expect(page.getByRole('heading', { level: 1 })).toContainText('واتساب');
      await expect(page.getByText(/العيادات/i)).toBeVisible();
    });

    test('should translate navigation items', async ({ page }) => {
      await page.goto('/en');
      const enNav = await page.locator('nav').textContent();
      expect(enNav).toContain('Pricing');

      await page.goto('/ar');
      const arNav = await page.locator('nav').textContent();
      expect(arNav).toContain('الأسعار');
    });

    test('should translate CTA buttons', async ({ page }) => {
      await page.goto('/en');
      await expect(page.getByRole('link', { name: /Book a discovery call/i })).toBeVisible();

      await page.goto('/ar');
      await expect(page.getByRole('link', { name: /احجز جلسة تعريف/i })).toBeVisible();
    });
  });

  test.describe('RTL/LTR Support', () => {
    test('should have LTR direction for English', async ({ page }) => {
      await page.goto('/en');

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

      const mainContent = page.locator('main, section').first();
      const dir = await mainContent.evaluate((el) => window.getComputedStyle(el).direction);
      expect(dir).toBe('ltr');
    });

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

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

      const mainContent = page.locator('main, section').first();
      const dir = await mainContent.evaluate((el) => window.getComputedStyle(el).direction);
      expect(dir).toBe('rtl');
    });

    test('should align text correctly in RTL', async ({ page }) => {
      await page.goto('/ar');

      // Check that text is right-aligned in RTL
      const heading = page.getByRole('heading', { level: 1 });
      const textAlign = await heading.evaluate((el) => window.getComputedStyle(el).textAlign);

      // Should be either 'right' or 'start' in RTL context
      expect(['right', 'start']).toContain(textAlign);
    });

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

      const nav = page.locator('nav');
      const flexDirection = await nav.evaluate((el) => window.getComputedStyle(el).flexDirection);

      // Should use row-reverse for RTL
      expect(['row-reverse', 'row']).toContain(flexDirection);
    });
  });

  test.describe('Language-Specific Features', () => {
    test('should format numbers correctly per language', async ({ page }) => {
      await page.goto('/en/pricing');
      // English uses comma separators (1,000)
      await expect(page.locator('text=/\\d{1,3}(,\\d{3})*/').first()).toBeVisible();
    });

    test('should use correct date format per language', async ({ page }) => {
      await page.goto('/en/blog');
      // Check for date presence (format may vary)
      const dateElements = await page.locator('time, [datetime]').count();
      expect(dateElements).toBeGreaterThanOrEqual(0);
    });

    test('should handle Arabic-specific characters', async ({ page }) => {
      await page.goto('/ar');

      // Check for Arabic characters
      const content = await page.locator('body').textContent();
      const hasArabic = /[\u0600-\u06FF]/.test(content || '');
      expect(hasArabic).toBe(true);
    });
  });

  test.describe('URL Structure', () => {
    test('should have language prefix in all URLs', async ({ page }) => {
      await page.goto('/en');

      const links = await page.locator('a[href^="/"]').all();
      for (const link of links.slice(0, 10)) { // Check first 10 links
        const href = await link.getAttribute('href');
        if (href && !href.startsWith('/_next') && !href.includes('mailto:')) {
          expect(href).toMatch(/^\/(ar|en)/);
        }
      }
    });

    test('should maintain language in internal navigation', async ({ page }) => {
      await page.goto('/en');

      await page.getByRole('link', { name: /Pricing/i }).click();

      await expect(page).toHaveURL('/en/pricing');
    });

    test('should generate correct sitemap URLs', async ({ page }) => {
      const response = await page.goto('/sitemap.xml');

      expect(response?.status()).toBe(200);

      const content = await page.content();
      expect(content).toContain('/en/');
      expect(content).toContain('/ar/');
    });
  });

  test.describe('Mobile i18n', () => {
    test('should support language switching on mobile', async ({ page }) => {
      await page.setViewportSize({ width: 375, height: 667 });
      await page.goto('/en');

      // Open mobile menu
      await page.getByRole('button', { name: /menu/i }).click();

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

      await expect(page).toHaveURL('/ar');
    });

    test('should display RTL correctly on mobile', async ({ page }) => {
      await page.setViewportSize({ width: 375, height: 667 });
      await page.goto('/ar');

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

  test.describe('Browser Language Detection', () => {
    test('should detect English browser preference', async ({ page, context }) => {
      await context.addInitScript(() => {
        Object.defineProperty(navigator, 'language', {
          get: () => 'en-US',
        });
      });

      await page.goto('/');

      // Should redirect to English
      await expect(page).toHaveURL(/\/en/);
    });

    test('should detect Arabic browser preference', async ({ page, context }) => {
      await context.addInitScript(() => {
        Object.defineProperty(navigator, 'language', {
          get: () => 'ar-SA',
        });
      });

      await page.goto('/');

      // Should redirect to Arabic
      await expect(page).toHaveURL(/\/ar/);
    });
  });
});
