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

test('Hebrew default page renders RTL with translated greeting', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('html')).toHaveAttribute('dir', 'rtl');
  await expect(page.getByTestId('greeting-text')).toContainText('שלום');
});

test('English page renders LTR with translated greeting', async ({ page }) => {
  await page.goto('/en/');
  await expect(page.locator('html')).toHaveAttribute('dir', 'ltr');
  await expect(page.getByTestId('greeting-text')).toContainText('Hello');
});

test('client-side language switch updates greeting via I18nProvider context', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByTestId('greeting-text')).toContainText('שלום');
  await expect(page.locator('html')).toHaveAttribute('dir', 'rtl');

  await page.getByTestId('lang-en').click();

  // multiple independent context-derived outputs (text, tagline, data-locale, html dir) all flip from one setState → only a real I18nProvider re-render produces this; an imperative DOM rewrite could not.
  await expect(page).toHaveURL(/\/$/);
  await expect(page.getByTestId('greeting-text')).toContainText('Hello');
  await expect(page.getByTestId('greeting-tagline')).toContainText('Rendered through context');
  await expect(page.getByTestId('greeting')).toHaveAttribute('data-locale', 'en');
  await expect(page.locator('html')).toHaveAttribute('dir', 'ltr');
});

// Pattern 1 default: per-locale SSR routing — clicking the routing switcher NAVIGATES to the locale URL and the server re-renders in that locale (no React, no client context). Complements the within-island context test and the cross-island negative.
test('Pattern 1 — per-locale SSR routing switch', async ({ page }) => {
  await page.goto('/');
  await expect(page.getByTestId('route-en')).toHaveAttribute('href', '/en');
  await expect(page.locator('html')).toHaveAttribute('dir', 'rtl');

  await page.getByTestId('route-en').click();

  await expect(page).toHaveURL(/\/en\/?$/);
  await expect(page.locator('html')).toHaveAttribute('dir', 'ltr');
  await expect(page.getByTestId('greeting-text')).toContainText('Hello');
});

test('cross-island language switch does NOT update sibling content island', async ({ page }) => {
  await page.goto('/multi');
  const content = page.getByTestId('multi-content');
  const switcher = page.locator('nav[data-hydrated]');
  await expect(content).toContainText('שלום');
  await expect(content).toHaveAttribute('data-locale', 'he');
  await expect(switcher).toHaveAttribute('data-hydrated', 'true');

  await page.getByTestId('multi-lang-en').click();

  // positive control — the switcher's OWN root flips aria-pressed (proves the click fired post-hydration) while the sibling Content island does NOT update → discriminating proof of the island boundary, not a dead-click artifact.
  await expect(page.getByTestId('multi-lang-en')).toHaveAttribute('aria-pressed', 'true');
  await expect(page.getByTestId('multi-lang-he')).toHaveAttribute('aria-pressed', 'false');

  await expect(content).toContainText('שלום');
  await expect(content).toHaveAttribute('data-locale', 'he');
});