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

test('R12 creates a portable LaTeX project from a free template', async ({ page }) => {
  const workspaceName = `template-r12-${Date.now()}`;
  await page.goto('/');
  if (await page.getByRole('dialog').isVisible()) await page.keyboard.press('Escape');

  await page.getByRole('button', { name: 'Browse Templates' }).click();
  const dialog = page.getByTestId('interactive-template-dialog');
  await expect(dialog).toBeVisible();
  await dialog.getByRole('button', { name: /Research Paper/ }).click();
  await dialog.getByLabel('Project name').fill(workspaceName);
  await dialog.getByRole('button', { name: 'Create Project' }).click();

  const source = page.getByLabel('LaTeX source editor');
  await expect(source).toBeVisible();
  await expect(source).toContainText('\\input{sections/introduction}');
  await expect(page.getByRole('link', { name: /^references\.bib$/ })).toBeVisible();
  await expect(page.getByRole('treeitem', { name: /^sections/ })).toBeVisible();

  await page.reload({ waitUntil: 'domcontentloaded' });
  await expect(page.getByLabel('LaTeX source editor')).toContainText(
    '\\input{sections/introduction}',
  );
});

test('R12 allows legacy Pro-tier templates to be created without a plan gate', async ({ page }) => {
  const workspaceName = `template-r12-pro-${Date.now()}`;
  await page.goto('/');
  if (await page.getByRole('dialog').isVisible()) await page.keyboard.press('Escape');

  await page.getByRole('button', { name: 'Browse Templates' }).click();
  const dialog = page.getByTestId('interactive-template-dialog');
  await dialog.getByRole('button', { name: /Modern Thesis/ }).click();
  await dialog.getByLabel('Project name').fill(workspaceName);
  await expect(dialog.getByRole('button', { name: 'Create Project' })).toBeEnabled();
  await dialog.getByRole('button', { name: 'Create Project' }).click();
  await expect(page.getByLabel('LaTeX source editor')).toBeVisible();
  await expect(page.getByTestId('interactive-pro-dialog')).toHaveCount(0);
});

test('R12 app shell reloads offline after the service worker has activated', async ({
  page,
  context,
}) => {
  await page.goto('/');
  await page.evaluate(async () => {
    if (!('serviceWorker' in navigator)) return;
    const registration = await navigator.serviceWorker.ready;
    if (!navigator.serviceWorker.controller) {
      registration.active?.postMessage({ type: 'claim' });
      await new Promise<void>((resolve) => {
        const timer = window.setTimeout(resolve, 2_000);
        navigator.serviceWorker.addEventListener(
          'controllerchange',
          () => {
            window.clearTimeout(timer);
            resolve();
          },
          { once: true },
        );
      });
    }
  });

  await context.setOffline(true);
  try {
    await page.reload({ waitUntil: 'domcontentloaded' });
    await expect(page.getByText(/Welcome (to Learnitive|back!)/)).toBeVisible();
  } finally {
    await context.setOffline(false);
  }
});


test('R12 exposes browser storage persistence and backup health', async ({ page }) => {
  await page.addInitScript(() => {
    let persistent = false;
    Object.defineProperty(navigator.storage, 'persisted', {
      configurable: true,
      value: async () => persistent,
    });
    Object.defineProperty(navigator.storage, 'persist', {
      configurable: true,
      value: async () => {
        persistent = true;
        return true;
      },
    });
    Object.defineProperty(navigator.storage, 'estimate', {
      configurable: true,
      value: async () => ({ usage: 10, quota: 100 }),
    });
  });

  await createBrowserWorkspace(page, { workspaceName: `storage-r12-${Date.now()}` });
  await page.getByRole('button', { name: 'Project menu' }).click();
  await page.getByRole('menuitem', { name: 'Storage…' }).click();
  const storage = page.getByRole('dialog', { name: 'Project storage' });
  await expect(storage).toContainText('Not guaranteed');
  await expect(storage).toContainText('10%');
  await expect(storage).toContainText('No project ZIP backup exported yet.');

  await storage.getByRole('button', { name: 'Request persistent storage' }).click();
  await expect(storage).toContainText('Persistent');
});