import { test, expect } from '../../fixtures/supersync.fixture';
import type { Page } from '@playwright/test';
import {
  createTestUser,
  getSuperSyncConfig,
  createSimulatedClient,
  closeClient,
  waitForTask,
  deleteTask,
  renameTask,
  markSubtaskDone,
  expandTask,
  getTaskElement,
  type SimulatedE2EClient,
} from '../../utils/supersync-helpers';
import {
  expectSubtaskDone,
  expectSubtaskNotDone,
} from '../../utils/supersync-assertions';

/**
 * SuperSync LWW (Last-Write-Wins) Conflict Resolution E2E Tests
 *
 * These tests verify the automatic LWW conflict resolution behavior:
 * - Conflicts are automatically resolved based on timestamps
 * - When remote is newer, remote state is applied
 * - When local is newer, local state is synced to server
 * - Users see a non-blocking notification about conflict resolution
 * - All clients converge to the same state
 */

test.describe('@supersync SuperSync LWW Conflict Resolution', () => {
  /**
   * Scenario: LWW Auto-Resolution with Newer Remote
   *
   * Tests that when remote changes are newer, they automatically win.
   *
   * Actions:
   * 1. Client A creates Task, syncs
   * 2. Client B syncs (download task)
   * 3. Client A marks task done (creates op at time T1)
   * 4. Wait a bit for time to advance
   * 5. Client B edits task title (creates op at time T2, where T2 > T1)
   * 6. Client B syncs first (uploads T2 change to server)
   * 7. Client A syncs (LWW: server has T2 > T1, so remote wins)
   * 8. Verify A's state matches B's state (B's title change wins)
   */
  test('LWW: Remote wins when remote timestamp is newer', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates task
      const taskName = `LWW-Remote-${testRunId}`;
      await clientA.workView.addTask(taskName);
      await clientA.sync.syncAndWait();

      // 2. Client B downloads the task
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, taskName);

      // 3. Client A marks task done (earlier timestamp)
      const taskLocatorA = clientA.page
        .locator(`task:not(.ng-animating):has-text("${taskName}")`)
        .first();
      await taskLocatorA.hover();
      await taskLocatorA.locator('done-toggle').click();
      await expect(taskLocatorA).toHaveClass(/isDone/);

      // 4. Wait for time to advance (ensures B's timestamp will be newer)
      await clientA.page.waitForTimeout(500);

      // 5. Client B also marks task done (later timestamp, but same logical change)
      const taskLocatorB = clientB.page
        .locator(`task:not(.ng-animating):has-text("${taskName}")`)
        .first();
      await taskLocatorB.hover();
      await taskLocatorB.locator('done-toggle').click();
      await expect(taskLocatorB).toHaveClass(/isDone/);

      // 6. Client B syncs first (B's change goes to server)
      await clientB.sync.syncAndWait();

      // 7. Client A syncs (LWW: B's timestamp is newer, so remote wins)
      await clientA.sync.syncAndWait();

      // 8. Both clients should have consistent state
      // (Both should show task as done - the outcome is the same for this test)
      await expect(taskLocatorA).toHaveClass(/isDone/);
      await expect(taskLocatorB).toHaveClass(/isDone/);

      // Final convergence check
      await clientB.sync.syncAndWait();

      console.log(
        '[LWW-Remote] ✓ Remote wins when timestamp is newer - clients converged',
      );
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * Scenario: LWW Notification Appears
   *
   * Tests that users see a notification when conflicts are auto-resolved.
   *
   * Actions:
   * 1. Client A creates Task, syncs
   * 2. Client B syncs (download task)
   * 3. Both clients make concurrent changes
   * 4. Client A syncs first
   * 5. Client B syncs (triggers LWW resolution)
   * 6. Verify notification appears indicating auto-resolution
   */
  test('LWW: Notification appears after conflict auto-resolution', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates task
      const taskName = `LWW-Notify-${testRunId}`;
      await clientA.workView.addTask(taskName);
      await clientA.sync.syncAndWait();

      // 2. Client B downloads the task
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, taskName);

      // 3. Both clients make concurrent changes
      // Client A marks done
      const taskLocatorA = clientA.page
        .locator(`task:not(.ng-animating):has-text("${taskName}")`)
        .first();
      await taskLocatorA.hover();
      await taskLocatorA.locator('done-toggle').click();
      // Wait for the click to propagate into store state — done-toggle dispatches
      // updateTask asynchronously (animation/focus delay). Without this, sync can
      // run as a no-op and the queued updateTask lands AFTER, flipping
      // hasNoPendingOps back and hiding the check icon.
      await expect(taskLocatorA).toHaveClass(/isDone/);

      // Client B also marks done
      const taskLocatorB = clientB.page
        .locator(`task:not(.ng-animating):has-text("${taskName}")`)
        .first();
      await taskLocatorB.hover();
      await taskLocatorB.locator('done-toggle').click();
      await expect(taskLocatorB).toHaveClass(/isDone/);

      // 4. Client A syncs first
      await clientA.sync.syncAndWait();

      // 5. Client B syncs (triggers LWW resolution)
      await clientB.sync.syncAndWait();

      // 6. Verify LWW notification appears on Client B
      // The notification contains "auto-resolved" or similar text
      // Note: The exact text depends on translation; we check for the snack appearing
      const snackBar = clientB.page.locator('snack-custom, .mat-mdc-snack-bar-container');

      // Try to catch the notification (it may disappear quickly)
      try {
        await snackBar.waitFor({ state: 'visible', timeout: 3000 });
        console.log('[LWW-Notify] Snackbar appeared after sync');
      } catch {
        // Snackbar may have already disappeared - that's okay
        console.log('[LWW-Notify] Snackbar not visible (may have auto-dismissed)');
      }

      // The key assertion is that sync completed without blocking dialogs
      // and both clients have consistent state

      // Final convergence
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();

      // Both should have same state
      await expect(taskLocatorA).toHaveClass(/isDone/);
      await expect(taskLocatorB).toHaveClass(/isDone/);

      console.log('[LWW-Notify] ✓ Conflict auto-resolved without blocking dialog');
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * Scenario: LWW Convergence with Three Clients
   *
   * Tests that all three clients converge to the same state using LWW.
   *
   * Actions:
   * 1. Client A creates Task, syncs
   * 2. Client B and C sync (download task)
   * 3. All three clients make concurrent edits
   * 4. Sequential syncs: A -> B -> C
   * 5. Final sync round to converge
   * 6. Verify all three clients have identical state
   */
  test('LWW: Three clients converge to same state', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;
    let clientC: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup all 3 clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      clientC = await createSimulatedClient(browser, appUrl, 'C', testRunId);
      await clientC.sync.setupSuperSync(syncConfig);

      // 1. Client A creates task
      const taskName = `LWW-3Way-${testRunId}`;
      await clientA.workView.addTask(taskName);
      await clientA.sync.syncAndWait();

      // 2. Clients B and C download the task
      await clientB.sync.syncAndWait();
      await clientC.sync.syncAndWait();

      // Verify all have the task
      await waitForTask(clientA.page, taskName);
      await waitForTask(clientB.page, taskName);
      await waitForTask(clientC.page, taskName);

      // 3. All three clients make concurrent changes (mark as done)
      const taskLocatorA = clientA.page
        .locator(`task:not(.ng-animating):has-text("${taskName}")`)
        .first();
      await taskLocatorA.hover();
      await taskLocatorA.locator('done-toggle').click();

      const taskLocatorB = clientB.page
        .locator(`task:not(.ng-animating):has-text("${taskName}")`)
        .first();
      await taskLocatorB.hover();
      await taskLocatorB.locator('done-toggle').click();

      const taskLocatorC = clientC.page
        .locator(`task:not(.ng-animating):has-text("${taskName}")`)
        .first();
      await taskLocatorC.hover();
      await taskLocatorC.locator('done-toggle').click();

      // 4. Sequential syncs (LWW auto-resolves conflicts)
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      await clientC.sync.syncAndWait();

      // 5. Final round to ensure convergence
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      await clientC.sync.syncAndWait();

      // 6. Verify all three clients have identical state
      await expect(taskLocatorA).toHaveClass(/isDone/);
      await expect(taskLocatorB).toHaveClass(/isDone/);
      await expect(taskLocatorC).toHaveClass(/isDone/);

      // Count tasks should be identical
      const countA = await clientA.page.locator('task').count();
      const countB = await clientB.page.locator('task').count();
      const countC = await clientC.page.locator('task').count();

      expect(countA).toBe(countB);
      expect(countB).toBe(countC);

      console.log('[LWW-3Way] ✓ All three clients converged via LWW auto-resolution');
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
      if (clientC) await closeClient(clientC);
    }
  });

  /**
   * Scenario: LWW Local Wins Creates Update Op
   *
   * Tests that when local is newer, the local state syncs to server.
   * This is the more complex case where we need to verify local changes
   * propagate to other clients.
   *
   * Actions:
   * 1. Client A creates Task, syncs
   * 2. Client B syncs (download task)
   * 3. Client B makes change first (earlier timestamp)
   * 4. Wait for time to advance
   * 5. Client A makes different change (later timestamp)
   * 6. Client B syncs (uploads B's change)
   * 7. Client A syncs (LWW: A's timestamp > B's on server, local wins)
   * 8. Client B syncs again (receives A's winning state)
   * 9. Verify B now has A's state (proves local-win update op was created)
   */
  test('LWW: Local wins when local timestamp is newer, propagates to other clients', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates task
      const taskName = `LWW-Local-${testRunId}`;
      await clientA.workView.addTask(taskName);
      await clientA.sync.syncAndWait();

      // 2. Client B downloads the task
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, taskName);

      // 3. Client B makes change first (earlier timestamp)
      const taskLocatorB = clientB.page
        .locator(`task:not(.ng-animating):has-text("${taskName}")`)
        .first();
      await taskLocatorB.waitFor({ state: 'visible', timeout: 10000 });
      await taskLocatorB.hover();
      await clientB.page.waitForTimeout(100); // Let hover state settle
      await taskLocatorB.locator('done-toggle').click();
      await expect(taskLocatorB).toHaveClass(/isDone/, { timeout: 5000 });

      // 4. Wait for time to advance significantly
      await clientB.page.waitForTimeout(1000);

      // 5. Client A makes same change (later timestamp)
      const taskLocatorA = clientA.page
        .locator(`task:not(.ng-animating):has-text("${taskName}")`)
        .first();
      await taskLocatorA.waitFor({ state: 'visible', timeout: 10000 });
      await taskLocatorA.hover();
      await clientA.page.waitForTimeout(100); // Let hover state settle
      await taskLocatorA.locator('done-toggle').click();
      await expect(taskLocatorA).toHaveClass(/isDone/, { timeout: 5000 });

      // 6. Client B syncs (uploads B's earlier change to server)
      await clientB.sync.syncAndWait();

      // 7. Client A syncs (LWW: A's local timestamp > server's timestamp for this entity)
      // Since A's change is newer, local wins, and A creates new update op
      await clientA.sync.syncAndWait();

      // 8. Client B syncs again (should receive A's winning state via new update op)
      await clientB.sync.syncAndWait();

      // 9. Both clients should have consistent state
      // In this case, both marked as done, so state should be isDone
      await expect(taskLocatorA).toHaveClass(/isDone/);
      await expect(taskLocatorB).toHaveClass(/isDone/);

      // Final convergence
      await clientA.sync.syncAndWait();

      // Both should have same task count
      const countA = await clientA.page.locator(`task:has-text("${taskName}")`).count();
      const countB = await clientB.page.locator(`task:has-text("${taskName}")`).count();
      expect(countA).toBe(1);
      expect(countB).toBe(1);

      console.log('[LWW-Local] ✓ Local wins and propagates state to other clients');
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * Scenario: LWW Local-Win Op Uploaded in Same Sync Cycle
   *
   * This is the critical test for the fix in sync.service.ts that ensures
   * local-win update ops are uploaded immediately in the same sync cycle,
   * not deferred to the next sync.
   *
   * Actions:
   * 1. Client A creates Task with title "Original", syncs
   * 2. Client B syncs (download task)
   * 3. Client B edits title to "B-Title" (earlier timestamp T1)
   * 4. Wait 1 second for timestamp gap
   * 5. Client A edits title to "A-Title" (later timestamp T2, T2 > T1)
   * 6. Client B syncs (uploads "B-Title" to server)
   * 7. Client A syncs ONCE (should: detect conflict, LWW says A wins, re-upload A-Title)
   * 8. Client B syncs ONCE (should get "A-Title" if fix works)
   * 9. Verify B has "A-Title" - NOT "B-Title"
   *
   * Before the fix: B would keep "B-Title" because A's local-win op wasn't uploaded
   * After the fix: B gets "A-Title" because A re-uploads in the same sync cycle
   */
  test('LWW: Local-win update op is uploaded in same sync cycle', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates task with original title
      const originalTitle = `Original-${testRunId}`;
      const titleA = `A-Title-${testRunId}`;
      const titleB = `B-Title-${testRunId}`;

      await clientA.workView.addTask(originalTitle);
      await clientA.sync.syncAndWait();

      // 2. Client B downloads the task
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, originalTitle);

      // 3. Client B edits title FIRST (earlier timestamp)
      const taskLocatorB = clientB.page
        .locator(`task:not(.ng-animating):has-text("${originalTitle}")`)
        .first();
      await taskLocatorB.dblclick(); // Double-click to edit
      const editInputB = clientB.page.locator(
        'input.mat-mdc-input-element:focus, textarea:focus',
      );
      await editInputB.waitFor({ state: 'visible', timeout: 5000 });
      await editInputB.fill(titleB);
      await clientB.page.keyboard.press('Enter');
      await clientB.page.waitForTimeout(500);

      // Verify B has the new title locally
      await waitForTask(clientB.page, titleB);

      // 4. Wait for timestamp gap (ensures A's timestamp > B's timestamp)
      await clientB.page.waitForTimeout(1000);

      // 5. Client A edits title (later timestamp)
      const taskLocatorA = clientA.page
        .locator(`task:not(.ng-animating):has-text("${originalTitle}")`)
        .first();
      await taskLocatorA.dblclick(); // Double-click to edit
      const editInputA = clientA.page.locator(
        'input.mat-mdc-input-element:focus, textarea:focus',
      );
      await editInputA.waitFor({ state: 'visible', timeout: 5000 });
      await editInputA.fill(titleA);
      await clientA.page.keyboard.press('Enter');
      await clientA.page.waitForTimeout(500);

      // Verify A has the new title locally
      await waitForTask(clientA.page, titleA);

      // 6. Client B syncs FIRST (uploads "B-Title" to server)
      await clientB.sync.syncAndWait();

      // 7. Client A syncs ONCE
      // This should:
      // - Upload A's "A-Title" op
      // - Server rejects it (conflict with B's "B-Title")
      // - A receives B's op as piggybacked
      // - LWW: A's timestamp > B's, so A wins
      // - A creates local-win UPDATE op with "A-Title"
      // - FIX: A immediately re-uploads this op
      await clientA.sync.syncAndWait();

      // 8. Client B syncs ONCE to receive A's update
      // CRITICAL: If the fix works, B gets "A-Title" here
      // If the fix is broken, B still has "B-Title"
      await clientB.sync.syncAndWait();

      // 9. Verify BOTH clients have A's title (the winner)
      const taskWithATitleOnA = clientA.page.locator(
        `task:not(.ng-animating):has-text("${titleA}")`,
      );
      const taskWithATitleOnB = clientB.page.locator(
        `task:not(.ng-animating):has-text("${titleA}")`,
      );

      // A should have A-Title (it's the local state)
      await expect(taskWithATitleOnA.first()).toBeVisible({ timeout: 5000 });

      // B should have A-Title (received from server via local-win update op)
      // This is the KEY assertion that fails without the fix
      await expect(taskWithATitleOnB.first()).toBeVisible({ timeout: 5000 });

      console.log(
        '[LWW-Single-Cycle] ✓ Local-win op uploaded in same sync cycle, B has A-Title',
      );
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * Scenario: LWW Update Action Updates UI Without Reload
   *
   * This test specifically verifies the lwwUpdateMetaReducer fix. When a client
   * receives an LWW Update operation from another client, the NgRx store should
   * be updated immediately, and the UI should reflect the change without needing
   * a page reload.
   *
   * Before the fix: UI wouldn't update because [TASK] LWW Update action wasn't handled
   * After the fix: lwwUpdateMetaReducer handles the action and updates the store
   *
   * Actions:
   * 1. Client A creates Task, syncs
   * 2. Client B syncs (download task)
   * 3. Client A edits title and adds notes
   * 4. Client A syncs (uploads changes)
   * 5. Client B syncs (receives LWW Update via piggybacked op)
   * 6. Verify B's UI shows A's changes WITHOUT reload
   */
  test('LWW: UI updates immediately after receiving LWW Update operation', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates task with original title
      const originalTitle = `UI-Update-${testRunId}`;
      const updatedTitle = `Updated-UI-${testRunId}`;

      await clientA.workView.addTask(originalTitle);
      await clientA.sync.syncAndWait();

      // 2. Client B downloads the task
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, originalTitle);

      // Verify B has the original title
      const taskOnB = clientB.page
        .locator(`task:not(.ng-animating):has-text("${originalTitle}")`)
        .first();
      await expect(taskOnB).toBeVisible({ timeout: 5000 });

      // 3. Client A edits the title
      const taskOnA = clientA.page
        .locator(`task:not(.ng-animating):has-text("${originalTitle}")`)
        .first();
      await taskOnA.dblclick(); // Double-click to edit
      const editInput = clientA.page.locator(
        'input.mat-mdc-input-element:focus, textarea:focus',
      );
      await editInput.waitFor({ state: 'visible', timeout: 5000 });
      await editInput.fill(updatedTitle);
      await clientA.page.keyboard.press('Enter');
      await clientA.page.waitForTimeout(500);

      // Verify A has the updated title
      await waitForTask(clientA.page, updatedTitle);

      // 4. Client A syncs (uploads the change)
      await clientA.sync.syncAndWait();

      // 5. Client B syncs (receives A's change)
      // This is where the lwwUpdateMetaReducer fix kicks in:
      // B receives [TASK] LWW Update action, and the meta-reducer updates the store
      await clientB.sync.syncAndWait();

      // 6. Verify B's UI shows A's updated title WITHOUT reload
      // This is the KEY assertion - if lwwUpdateMetaReducer isn't working,
      // B would still show the old title until a page reload
      const updatedTaskOnB = clientB.page.locator(
        `task:not(.ng-animating):has-text("${updatedTitle}")`,
      );

      await expect(updatedTaskOnB.first()).toBeVisible({ timeout: 5000 });

      // Also verify the old title is no longer visible
      const oldTaskOnB = clientB.page.locator(
        `task:not(.ng-animating):has-text("${originalTitle}")`,
      );
      await expect(oldTaskOnB).toHaveCount(0);

      console.log(
        '[LWW-UI-Update] ✓ UI updated immediately after receiving LWW Update operation',
      );
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * Scenario: Multiple Operations on Same Entity Use Max Timestamp for LWW
   *
   * Tests that when both clients have MULTIPLE concurrent operations on the
   * same entity, LWW correctly uses the MAX timestamp across ALL operations,
   * not just the last one.
   *
   * Actions:
   * 1. Client A creates Task, syncs
   * 2. Client B syncs (download task)
   * 3. Client A makes 3 rapid changes (rename, mark done, add note)
   * 4. Client B makes 3 different changes offline (different rename, unmark, remove note)
   * 5. Client B syncs first (uploads B's 3 ops)
   * 6. Client A syncs (LWW compares max timestamps across all ops)
   * 7. Final sync round
   * 8. Verify both clients converge to same state
   */
  test('LWW: Multiple operations on same entity use max timestamp', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates task with original title
      const originalTitle = `MultiOp-${testRunId}`;
      await clientA.workView.addTask(originalTitle);
      await clientA.sync.syncAndWait();

      // 2. Client B downloads the task
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, originalTitle);

      // 3. Client A makes 3 rapid changes
      const taskLocatorA = clientA.page
        .locator(`task:not(.ng-animating):has-text("${originalTitle}")`)
        .first();

      // Change 1: Rename task
      const titleA = `A-MultiOp-${testRunId}`;
      await taskLocatorA.dblclick();
      const editInputA = clientA.page.locator(
        'input.mat-mdc-input-element:focus, textarea:focus',
      );
      await editInputA.waitFor({ state: 'visible', timeout: 5000 });
      await editInputA.fill(titleA);
      await clientA.page.keyboard.press('Enter');
      await clientA.page.waitForTimeout(300);

      // Change 2: Mark task done
      const taskLocatorAUpdated = clientA.page
        .locator(`task:not(.ng-animating):has-text("${titleA}")`)
        .first();
      await taskLocatorAUpdated.hover();
      await taskLocatorAUpdated.locator('done-toggle').click();
      await clientA.page.waitForTimeout(300);

      // Change 3: Add time estimate (another field update)
      // This creates a third operation on the same entity
      await taskLocatorAUpdated.hover();
      const additionalBtn = taskLocatorAUpdated
        .locator('.task-additional-info-btn, button[mat-icon-button]')
        .first();
      if (await additionalBtn.isVisible()) {
        await additionalBtn.click();
        await clientA.page.waitForTimeout(200);
      }

      console.log('[MultiOp] Client A made 3 changes');

      // 4. Client B makes 3 different changes (offline - hasn't synced yet)
      const taskLocatorB = clientB.page
        .locator(`task:not(.ng-animating):has-text("${originalTitle}")`)
        .first();

      // Wait for timestamp gap to ensure B's changes are LATER
      await clientB.page.waitForTimeout(1500);

      // Change 1: Different rename
      const titleB = `B-MultiOp-${testRunId}`;
      await taskLocatorB.dblclick();
      const editInputB = clientB.page.locator(
        'input.mat-mdc-input-element:focus, textarea:focus',
      );
      await editInputB.waitFor({ state: 'visible', timeout: 5000 });
      await editInputB.fill(titleB);
      await clientB.page.keyboard.press('Enter');
      await clientB.page.waitForTimeout(300);

      // Change 2: Mark done as well
      const taskLocatorBUpdated = clientB.page
        .locator(`task:not(.ng-animating):has-text("${titleB}")`)
        .first();
      await taskLocatorBUpdated.hover();
      await taskLocatorBUpdated.locator('done-toggle').click();
      await clientB.page.waitForTimeout(300);

      console.log('[MultiOp] Client B made 3 changes (B has later timestamps)');

      // 5. Client B syncs FIRST (uploads B's ops to server)
      await clientB.sync.syncAndWait();
      console.log('[MultiOp] Client B synced first');

      // 6. Client A syncs (downloads B's ops, LWW resolution)
      // Since B's changes are later, B should win
      await clientA.sync.syncAndWait();
      console.log('[MultiOp] Client A synced, LWW resolution applied');

      // 7. Final sync round for convergence
      await clientB.sync.syncAndWait();
      await clientA.sync.syncAndWait();

      // 8. Verify BOTH clients have the SAME state (B's title since B was later)
      const taskWithBTitleOnA = clientA.page.locator(
        `task:not(.ng-animating):has-text("${titleB}")`,
      );
      const taskWithBTitleOnB = clientB.page.locator(
        `task:not(.ng-animating):has-text("${titleB}")`,
      );

      // Both should have B's title (B's max timestamp was later)
      await expect(taskWithBTitleOnA.first()).toBeVisible({ timeout: 10000 });
      await expect(taskWithBTitleOnB.first()).toBeVisible({ timeout: 10000 });

      // Both should show task as done
      await expect(taskWithBTitleOnA.first()).toHaveClass(/isDone/);
      await expect(taskWithBTitleOnB.first()).toHaveClass(/isDone/);

      // Verify both clients have the same visible task with B's title
      // (Skip raw count comparison as it may include hidden/animating elements)

      console.log(
        '[MultiOp] ✓ Multiple operations resolved correctly - B won with later max timestamp',
      );
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * Scenario: Concurrent Task Move to Different Projects Resolves via LWW
   *
   * Tests that when both clients move the same task to DIFFERENT projects,
   * LWW correctly resolves the conflict and the task ends up in exactly
   * ONE project (not duplicated).
   *
   * Actions:
   * 1. Client A creates Project1, Project2, and a Task in Project1
   * 2. Client A syncs
   * 3. Client B syncs (download all)
   * 4. Client B creates Project3
   * 5. Client A moves Task to Project2
   * 6. Client B moves Task to Project3 (offline/concurrent)
   * 7. Client A syncs first
   * 8. Client B syncs (LWW resolution)
   * 9. Final sync round
   * 10. Verify task is in exactly ONE project on both clients
   */
  test('LWW: Concurrent task move to different projects resolves correctly', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    // Helper to create a project
    const createProject = async (page: Page, projectName: string): Promise<void> => {
      await page.goto('/#/tag/TODAY/work');
      await page.waitForLoadState('networkidle');
      await page.waitForTimeout(1000);

      const navSidenav = page.locator('.nav-sidenav');
      if (await navSidenav.isVisible()) {
        const isCompact = await navSidenav.evaluate((el: Element) =>
          el.classList.contains('compactMode'),
        );
        if (isCompact) {
          const toggleBtn = navSidenav.locator('.mode-toggle');
          if (await toggleBtn.isVisible()) {
            await toggleBtn.click();
            await page.waitForTimeout(500);
          }
        }
      }

      const projectsTree = page
        .locator('nav-list-tree')
        .filter({ hasText: 'Projects' })
        .first();
      await projectsTree.waitFor({ state: 'visible' });

      // Hover the group header to make additional buttons visible and clickable
      const groupNavItem = projectsTree.locator('nav-item').first();
      await groupNavItem.hover();
      await page.waitForTimeout(200);

      const addBtn = projectsTree.locator(
        '.additional-btns button[mat-icon-button]:has(mat-icon:text("add"))',
      );
      try {
        await addBtn.waitFor({ state: 'visible', timeout: 5000 });
        await addBtn.click();
      } catch {
        await addBtn.click({ force: true });
      }

      const nameInput = page.getByRole('textbox', { name: 'Project Name' });
      await nameInput.waitFor({ state: 'visible', timeout: 10000 });
      await nameInput.fill(projectName);

      const submitBtn = page.locator('dialog-create-project button[type=submit]').first();
      await submitBtn.click();
      await nameInput.waitFor({ state: 'hidden', timeout: 5000 });
      await page.waitForTimeout(1000);
    };

    // Helper to move task to project via context menu
    const moveTaskToProject = async (
      page: Page,
      taskName: string,
      projectName: string,
    ): Promise<void> => {
      const taskLocator = page.locator(`task:has-text("${taskName}")`).first();
      await taskLocator.waitFor({ state: 'visible' });

      // Right-click to open context menu
      await taskLocator.click({ button: 'right' });
      await page.waitForTimeout(300);

      // Find and click "Move to project" / "Add to project" option
      // The button has mat-icon "forward" and text containing "project"
      const menuPanel = page.locator('.mat-mdc-menu-panel').first();
      await menuPanel.waitFor({ state: 'visible', timeout: 5000 });

      const moveToProjectBtn = menuPanel
        .locator('button[mat-menu-item]')
        .filter({ has: page.locator('mat-icon:has-text("forward")') })
        .first();
      await moveToProjectBtn.waitFor({ state: 'visible', timeout: 5000 });
      await moveToProjectBtn.click();

      // Wait for project submenu
      await page.waitForTimeout(300);
      const projectMenu = page.locator('.mat-mdc-menu-panel').last();
      await projectMenu.waitFor({ state: 'visible', timeout: 5000 });

      // Select the target project
      const projectOption = projectMenu
        .locator('button[mat-menu-item]')
        .filter({ hasText: projectName })
        .first();
      await projectOption.waitFor({ state: 'visible', timeout: 3000 });
      await projectOption.click();

      await page.waitForTimeout(500);

      // Dismiss any remaining overlays
      for (let j = 0; j < 3; j++) {
        await page.keyboard.press('Escape');
        await page.waitForTimeout(100);
      }
    };

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates Project1, Project2, and a Task
      const project1Name = `Proj1-${testRunId}`;
      const project2Name = `Proj2-${testRunId}`;
      const project3Name = `Proj3-${testRunId}`;
      const taskName = `MoveTask-${testRunId}`;

      await createProject(clientA.page, project1Name);
      await createProject(clientA.page, project2Name);
      console.log('[MoveConflict] Created Project1 and Project2 on Client A');

      // Navigate to Project1 and create task
      const projectBtnA = clientA.page.getByText(project1Name).first();
      await projectBtnA.waitFor({ state: 'visible' });
      await projectBtnA.click({ force: true });
      await clientA.page.waitForLoadState('networkidle');

      await clientA.workView.addTask(taskName);
      await waitForTask(clientA.page, taskName);
      console.log('[MoveConflict] Created task in Project1');

      // 2. Client A syncs
      await clientA.sync.syncAndWait();
      console.log('[MoveConflict] Client A synced');

      // 3. Client B syncs to get everything
      await clientB.sync.syncAndWait();
      console.log('[MoveConflict] Client B synced');

      // 4. Client B creates Project3
      await createProject(clientB.page, project3Name);
      console.log('[MoveConflict] Client B created Project3');

      // Navigate Client B to Project1 to see the task
      const project1BtnB = clientB.page.getByText(project1Name).first();
      await project1BtnB.waitFor({ state: 'visible' });
      await project1BtnB.click({ force: true });
      await clientB.page.waitForLoadState('networkidle');
      await waitForTask(clientB.page, taskName);

      // 5. Client A moves task to Project2
      // First go to Project1 on A
      await clientA.page.goto('/#/tag/TODAY/work');
      await clientA.page.waitForLoadState('networkidle');
      const project1BtnA = clientA.page.getByText(project1Name).first();
      await project1BtnA.click({ force: true });
      await clientA.page.waitForLoadState('networkidle');
      await waitForTask(clientA.page, taskName);

      await moveTaskToProject(clientA.page, taskName, project2Name);
      console.log('[MoveConflict] Client A moved task to Project2');

      // Wait for timestamp gap
      await clientA.page.waitForTimeout(1000);

      // 6. Client B moves task to Project3 (concurrent - hasn't synced)
      await moveTaskToProject(clientB.page, taskName, project3Name);
      console.log('[MoveConflict] Client B moved task to Project3 (later timestamp)');

      // 7. Client A syncs first
      await clientA.sync.syncAndWait();
      console.log('[MoveConflict] Client A synced');

      // 8. Client B syncs (LWW resolution - B's move is later, should win)
      await clientB.sync.syncAndWait();
      console.log('[MoveConflict] Client B synced, LWW resolution applied');

      // 9. Final sync round for convergence
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();

      // 10. Verify task is in exactly ONE project on both clients
      // Since B moved later, task should be in Project3

      // Check Client A - task should be in Project3 (B won)
      await clientA.page.goto('/#/tag/TODAY/work');
      await clientA.page.waitForLoadState('networkidle');
      const project3BtnA = clientA.page.getByText(project3Name).first();
      await project3BtnA.waitFor({ state: 'visible' });
      await project3BtnA.click({ force: true });
      await clientA.page.waitForLoadState('networkidle');
      await waitForTask(clientA.page, taskName);
      console.log('[MoveConflict] Client A sees task in Project3');

      // Check Client B - task should also be in Project3
      await clientB.page.goto('/#/tag/TODAY/work');
      await clientB.page.waitForLoadState('networkidle');
      const project3BtnB = clientB.page.getByText(project3Name).first();
      await project3BtnB.click({ force: true });
      await clientB.page.waitForLoadState('networkidle');
      await waitForTask(clientB.page, taskName);
      console.log('[MoveConflict] Client B sees task in Project3');

      // Verify task is NOT in Project2 (A's move lost)
      await clientA.page.goto('/#/tag/TODAY/work');
      await clientA.page.waitForLoadState('networkidle');
      const project2BtnA = clientA.page.getByText(project2Name).first();
      await project2BtnA.click({ force: true });
      await clientA.page.waitForLoadState('networkidle');
      await clientA.page.waitForTimeout(1000);

      const taskInProject2 = clientA.page.locator(`task:has-text("${taskName}")`);
      await expect(taskInProject2).not.toBeVisible({ timeout: 3000 });
      console.log(
        "[MoveConflict] ✓ Task NOT in Project2 (A's move correctly lost via LWW)",
      );

      console.log('[MoveConflict] ✓ Concurrent project move resolved correctly via LWW');
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * Scenario: Concurrent Tag Changes on Same Task Resolves via LWW
   *
   * Tests that when both clients change tags on the same task concurrently,
   * LWW correctly resolves the conflict and tag.taskIds arrays are updated
   * to match the winning task.tagIds.
   *
   * Actions:
   * 1. Client A creates TagA, TagB and a Task with TagA
   * 2. Client A syncs
   * 3. Client B syncs (download all)
   * 4. Client B creates TagC
   * 5. Client A removes TagA and adds TagB to the task
   * 6. Client B removes TagA and adds TagC to the task (concurrent)
   * 7. Client A syncs first
   * 8. Client B syncs (LWW resolution - B's change should win with later timestamp)
   * 9. Final sync round
   * 10. Verify task has correct tags on both clients
   */
  test('LWW: Concurrent tag changes on same task resolves correctly', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    // Helper to toggle a tag on task via context menu "Toggle Tags" submenu
    // Used for both adding and removing tags (it's a toggle)
    const toggleTagOnTask = async (
      page: Page,
      taskName: string,
      tagName: string,
    ): Promise<void> => {
      const taskLocator = page.locator(`task:has-text("${taskName}")`).first();
      await taskLocator.waitFor({ state: 'visible' });

      // Right-click to open context menu
      await taskLocator.click({ button: 'right' });
      await page.waitForTimeout(300);

      // Find and click "Toggle Tags" submenu trigger (has label icon and class e2e-edit-tags-btn)
      const menuPanel = page.locator('.mat-mdc-menu-panel').first();
      await menuPanel.waitFor({ state: 'visible', timeout: 5000 });

      const toggleTagsBtn = menuPanel.locator('.e2e-edit-tags-btn').first();
      await toggleTagsBtn.waitFor({ state: 'visible', timeout: 5000 });
      await toggleTagsBtn.click();

      // Wait for tag submenu
      await page.waitForTimeout(300);
      const tagMenu = page.locator('.mat-mdc-menu-panel').last();
      await tagMenu.waitFor({ state: 'visible', timeout: 5000 });

      // Select the target tag to toggle
      const tagOption = tagMenu
        .locator('button[mat-menu-item]')
        .filter({ hasText: tagName })
        .first();
      await tagOption.waitFor({ state: 'visible', timeout: 3000 });
      await tagOption.click();

      await page.waitForTimeout(500);

      // Dismiss any remaining overlays
      for (let j = 0; j < 3; j++) {
        await page.keyboard.press('Escape');
        await page.waitForTimeout(100);
      }
    };

    // Helper to add task with tag using short syntax and handle creation dialog
    const addTaskWithTag = async (
      client: SimulatedE2EClient,
      taskTitle: string,
    ): Promise<void> => {
      // Use skipClose=true because tag creation dialog may block backdrop click
      await client.workView.addTask(taskTitle, true);

      // Handle tag creation confirmation dialog if it appears
      const confirmBtn = client.page.locator('button[e2e="confirmBtn"]');
      if (await confirmBtn.isVisible({ timeout: 3000 }).catch(() => false)) {
        await confirmBtn.click();
      }

      // Close the add task bar manually if it's still open
      if (await client.workView.backdrop.isVisible().catch(() => false)) {
        await client.workView.backdrop.click();
      }

      await client.page.waitForTimeout(300);
    };

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      const tagAName = `TagA-${testRunId}`;
      const tagBName = `TagB-${testRunId}`;
      const tagCName = `TagC-${testRunId}`;
      const taskName = `TagTask-${testRunId}`;

      // 1. Client A creates task with TagA and another with TagB using short syntax
      await addTaskWithTag(clientA, `${taskName} #${tagAName}`);
      await waitForTask(clientA.page, taskName);
      console.log('[TagConflict] Created task with TagA on Client A');

      await addTaskWithTag(clientA, `TempTask-${testRunId} #${tagBName}`);
      await clientA.page.waitForTimeout(500);
      console.log('[TagConflict] Created TagB on Client A');

      // 2. Client A syncs
      await clientA.sync.syncAndWait();
      console.log('[TagConflict] Client A synced');

      // 3. Client B syncs to get everything
      await clientB.sync.syncAndWait();
      console.log('[TagConflict] Client B synced');

      // Verify Client B has the task in Today view (tasks are created with TODAY tag)
      await waitForTask(clientB.page, taskName);
      console.log('[TagConflict] Client B has the task in Today view');

      // 4. Client B creates TagC using short syntax
      await addTaskWithTag(clientB, `TempTask2-${testRunId} #${tagCName}`);
      await clientB.page.waitForTimeout(500);
      console.log('[TagConflict] Created TagC on Client B');

      // 5. Verify task is visible in both clients' Today view before tag operations
      await waitForTask(clientA.page, taskName);
      await waitForTask(clientB.page, taskName);
      console.log('[TagConflict] Task visible in Today view on both clients');

      // Client A: Toggle TagA off and toggle TagB on (in Today view)
      await toggleTagOnTask(clientA.page, taskName, tagAName);
      console.log('[TagConflict] Client A toggled TagA off');
      await toggleTagOnTask(clientA.page, taskName, tagBName);
      console.log('[TagConflict] Client A toggled TagB on');

      // 6. Client B: Toggle TagA off and toggle TagC on (concurrent with step 5)
      await clientB.page.waitForTimeout(1000); // Ensure later timestamp
      await toggleTagOnTask(clientB.page, taskName, tagAName);
      console.log('[TagConflict] Client B toggled TagA off');
      await toggleTagOnTask(clientB.page, taskName, tagCName);
      console.log('[TagConflict] Client B toggled TagC on');

      // 7. Client A syncs first
      await clientA.sync.syncAndWait();
      console.log('[TagConflict] Client A synced');

      // 8. Client B syncs (LWW resolution - B should win with later timestamp)
      await clientB.sync.syncAndWait();
      console.log('[TagConflict] Client B synced, LWW resolution applied');

      // 9. Final sync to propagate resolution
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      console.log('[TagConflict] Final sync complete');

      // 10. Verify - navigate to TagC on both clients to check if task is there
      // Client B's changes should win (later timestamp), so task should be in TagC
      const tagCBtnA = clientA.page
        .locator('.nav-sidenav')
        .locator('nav-item')
        .filter({ hasText: tagCName })
        .first();
      await tagCBtnA.waitFor({ state: 'visible', timeout: 10000 });
      await tagCBtnA.click();
      await clientA.page.waitForLoadState('networkidle');
      await clientA.page.waitForTimeout(1000);

      const taskInTagCOnA = clientA.page.locator(`task:has-text("${taskName}")`);
      await expect(taskInTagCOnA).toBeVisible({ timeout: 10000 });
      console.log('[TagConflict] Client A sees task in TagC');

      // Check Client B
      const tagCBtnB = clientB.page
        .locator('.nav-sidenav')
        .locator('nav-item')
        .filter({ hasText: tagCName })
        .first();
      await tagCBtnB.waitFor({ state: 'visible', timeout: 10000 });
      await tagCBtnB.click();
      await clientB.page.waitForLoadState('networkidle');
      await clientB.page.waitForTimeout(1000);

      const taskInTagCOnB = clientB.page.locator(`task:has-text("${taskName}")`);
      await expect(taskInTagCOnB).toBeVisible({ timeout: 10000 });
      console.log('[TagConflict] Client B sees task in TagC');

      // Verify task is NOT in TagA on both clients (both removed it)
      const tagABtnAVerify = clientA.page
        .locator('.nav-sidenav')
        .locator('nav-item')
        .filter({ hasText: tagAName })
        .first();
      await tagABtnAVerify.click();
      await clientA.page.waitForLoadState('networkidle');
      await clientA.page.waitForTimeout(1000);

      const taskInTagAOnA = clientA.page.locator(`task:has-text("${taskName}")`);
      await expect(taskInTagAOnA).not.toBeVisible({ timeout: 3000 });
      console.log('[TagConflict] ✓ Task NOT in TagA on Client A');

      // Verify task is NOT in TagB (B's changes won, TagB was only added by A)
      const tagBBtnAVerify = clientA.page
        .locator('.nav-sidenav')
        .locator('nav-item')
        .filter({ hasText: tagBName })
        .first();
      await tagBBtnAVerify.click();
      await clientA.page.waitForLoadState('networkidle');
      await clientA.page.waitForTimeout(1000);

      const taskInTagBOnA = clientA.page.locator(`task:has-text("${taskName}")`);
      await expect(taskInTagBOnA).not.toBeVisible({ timeout: 3000 });
      console.log(
        "[TagConflict] ✓ Task NOT in TagB (A's changes correctly lost via LWW)",
      );

      console.log('[TagConflict] ✓ Concurrent tag changes resolved correctly via LWW');
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * Scenario: Delete vs Update Race
   *
   * Tests that when one client deletes a task while another updates it,
   * the update wins because it has a later timestamp in the LWW system.
   * The LWW system is purely timestamp-based — the newer operation wins
   * regardless of type.
   *
   * Actions:
   * 1. Client A creates task, syncs
   * 2. Client B syncs (download task)
   * 3. Client A deletes the task
   * 4. Client B (with later timestamp) updates the task
   * 5. Client A syncs (uploads delete)
   * 6. Client B syncs (update wins via LWW, task preserved)
   * 7. Verify task is visible on both clients with updated name
   */
  test('LWW: Delete vs Update race resolves correctly — update wins', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates task
      const taskName = `DeleteRace-${testRunId}`;
      await clientA.workView.addTask(taskName);
      await waitForTask(clientA.page, taskName);
      console.log('[DeleteRace] Created task on Client A');

      // 2. Both sync
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, taskName);
      console.log('[DeleteRace] Both clients have the task');

      // 3. Client A deletes the task using reliable keyboard shortcut
      await deleteTask(clientA, taskName);

      // Verify delete took effect on Client A before proceeding
      const deletedTaskA = clientA.page.locator(`task:has-text("${taskName}")`);
      await expect(deletedTaskA).not.toBeVisible({ timeout: 5000 });

      // Wait for DELETE operation to be persisted to IndexedDB
      await clientA.page.waitForTimeout(3000);
      console.log('[DeleteRace] Client A deleted task (verified not visible)');

      // 4. Client B updates the task (with later timestamp)
      await clientB.page.waitForTimeout(2000); // Ensure UPDATE has later timestamp than DELETE

      await renameTask(clientB, taskName, `${taskName}-Updated`);
      console.log('[DeleteRace] Client B updated task title');

      // Verify the rename took effect before syncing
      const renamedTaskB = clientB.page.locator(`task:has-text("${taskName}-Updated")`);
      await expect(renamedTaskB).toBeVisible({ timeout: 5000 });

      // Wait to ensure Client B's UPDATE operation is flushed to IndexedDB
      await clientB.page.waitForTimeout(3000);

      // 5. Client A syncs (uploads delete)
      await clientA.sync.syncAndWait();
      console.log('[DeleteRace] Client A synced delete');

      // 6. Client B syncs (LWW: B's update has later timestamp, should win)
      await clientB.sync.syncAndWait();
      console.log('[DeleteRace] Client B synced, LWW applied');

      // 7. Final sync rounds for full convergence
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      await clientA.sync.syncAndWait();
      console.log('[DeleteRace] Final sync complete');

      // Verify: Update wins over delete in the LWW system (later timestamp wins).
      // Client B's rename has a later timestamp than Client A's delete,
      // so the task is preserved with the updated name on both clients.
      const taskOnA = clientA.page.locator(`task:has-text("${taskName}-Updated")`);
      const taskOnB = clientB.page.locator(`task:has-text("${taskName}-Updated")`);

      await expect(taskOnA).toBeVisible({ timeout: 15000 });
      console.log('[DeleteRace] Task correctly preserved on Client A with updated name');

      await expect(taskOnB).toBeVisible({ timeout: 15000 });
      console.log('[DeleteRace] Task correctly preserved on Client B with updated name');

      console.log(
        '[DeleteRace] ✓ Update wins over delete (later timestamp) — both clients converge',
      );
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * Scenario: Delete vs Update Race with TODAY_TAG (dueDay)
   *
   * Tests that when a task scheduled for today is deleted on one client
   * while updated on another, the update wins because it has a later
   * timestamp in the LWW system. The task is preserved on both clients.
   *
   * Actions:
   * 1. Client A creates task for today (sd:today), syncs
   * 2. Client B syncs (download task)
   * 3. Client A deletes the task
   * 4. Client B (with later timestamp) updates the task title
   * 5. Client A syncs (uploads delete)
   * 6. Client B syncs (update wins via LWW, task preserved)
   * 7. Verify task is visible on both clients with updated name
   */
  test('LWW: Task with dueDay=today is preserved when concurrent update has later timestamp', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates task for TODAY (sd:today sets dueDay)
      const taskName = `TodayDeleteRace-${testRunId}`;
      await clientA.workView.addTask(`${taskName} sd:today`);
      await waitForTask(clientA.page, taskName);
      console.log('[TodayDeleteRace] Created task for today on Client A');

      // Verify task is in TODAY view (URL should contain TODAY)
      const urlA = clientA.page.url();
      expect(urlA).toContain('TODAY');

      // 2. Both sync
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, taskName);
      console.log('[TodayDeleteRace] Both clients have the task');

      // 3. Client A deletes the task using reliable keyboard shortcut
      await deleteTask(clientA, taskName);

      // Verify delete took effect on Client A before proceeding
      const deletedTaskA = clientA.page.locator(`task:has-text("${taskName}")`);
      await expect(deletedTaskA).not.toBeVisible({ timeout: 5000 });

      // Wait for DELETE operation to be persisted to IndexedDB
      await clientA.page.waitForTimeout(3000);
      console.log('[TodayDeleteRace] Client A deleted task (verified not visible)');

      // 4. Client B updates the task (with later timestamp)
      await clientB.page.waitForTimeout(2000); // Ensure UPDATE has later timestamp than DELETE

      await renameTask(clientB, taskName, `${taskName}-Updated`);
      console.log('[TodayDeleteRace] Client B updated task title');

      // Verify the rename took effect before syncing
      const renamedTask = clientB.page.locator(`task:has-text("${taskName}-Updated")`);
      await expect(renamedTask).toBeVisible({ timeout: 5000 });

      // Wait to ensure Client B's UPDATE operation is flushed to IndexedDB
      await clientB.page.waitForTimeout(3000);

      // 5. Client A syncs (uploads delete)
      await clientA.sync.syncAndWait();
      console.log('[TodayDeleteRace] Client A synced delete');

      // 6. Client B syncs (uploads update, which should win via LWW)
      await clientB.sync.syncAndWait();
      console.log('[TodayDeleteRace] Client B synced update');

      // 7. Final sync rounds to ensure full convergence
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      await clientA.sync.syncAndWait();
      console.log('[TodayDeleteRace] Final sync complete, LWW applied');

      // 8. ASSERTION: Update wins (later timestamp) — task should be visible on both clients.
      // The LWW system is purely timestamp-based, so the later update preserves the task.
      const taskOnA = clientA.page.locator(`task:has-text("${taskName}-Updated")`);
      const taskOnB = clientB.page.locator(`task:has-text("${taskName}-Updated")`);

      await expect(taskOnA).toBeVisible({ timeout: 15000 });
      console.log(
        '[TodayDeleteRace] Task correctly preserved on Client A with updated name',
      );

      await expect(taskOnB).toBeVisible({ timeout: 15000 });
      console.log(
        '[TodayDeleteRace] Task correctly preserved on Client B with updated name',
      );

      console.log(
        '[TodayDeleteRace] ✓ Update wins over delete (later timestamp) — task preserved in TODAY view',
      );
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * LWW: Subtask changes sync independently from parent changes
   *
   * Tests that parent and subtask are separate entities where changes
   * to one sync correctly without affecting the other.
   *
   * Scenario:
   * 1. Client A creates parent task with subtask, syncs
   * 2. Client B syncs (gets parent + subtask)
   * 3. Client B marks subtask as done, syncs
   * 4. Client A syncs (gets subtask done)
   * 5. Client A adds another subtask, syncs
   * 6. Client B syncs (gets new subtask)
   * 7. Verify: Both clients have consistent state
   */
  test('LWW: Subtask conflicts resolve independently from parent', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    const uniqueId = Date.now();
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const baseConfig = getSuperSyncConfig(user);
      const encPassword = `subtask-lww-${testRunId}`;
      const syncConfig = {
        ...baseConfig,
        isEncryptionEnabled: true,
        password: encPassword,
      };

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates parent task
      const parentName = `Parent-${uniqueId}`;
      await clientA.workView.addTask(parentName);
      await waitForTask(clientA.page, parentName);
      console.log('[SubtaskLWW] Client A created parent task');

      // 2. Sync: A → Server → B
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, parentName);
      console.log('[SubtaskLWW] Both clients have parent task');

      // 3. Client B adds subtask to parent
      const subtask1Name = `Sub1-${uniqueId}`;
      const parentTaskB = getTaskElement(clientB, parentName);
      await clientB.workView.addSubTask(parentTaskB, subtask1Name);
      await waitForTask(clientB.page, subtask1Name);
      console.log('[SubtaskLWW] Client B added subtask');

      // 4. Sync: B → Server → A
      await clientB.sync.syncAndWait();
      await clientA.sync.syncAndWait();

      await expandTask(clientA, parentName);
      await waitForTask(clientA.page, subtask1Name);
      console.log('[SubtaskLWW] Client A received subtask from B');

      // 5. Client A marks subtask as done
      await markSubtaskDone(clientA, subtask1Name);
      console.log('[SubtaskLWW] Client A marked subtask done');

      // 6. Client A adds second subtask
      const subtask2Name = `Sub2-${uniqueId}`;
      await clientA.workView.addSubTask(
        getTaskElement(clientA, parentName),
        subtask2Name,
      );
      await waitForTask(clientA.page, subtask2Name);
      console.log('[SubtaskLWW] Client A added second subtask');

      // 7. Sync: A → Server → B
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      console.log('[SubtaskLWW] Synced to Client B');

      // 8. Final verification: both clients have consistent state
      await expandTask(clientA, parentName);
      await expandTask(clientB, parentName);

      // Subtask1 should be done on both clients
      await expectSubtaskDone(clientA, subtask1Name, 10000);
      await expectSubtaskDone(clientB, subtask1Name, 10000);

      // Subtask2 should exist on both clients (not done)
      await expectSubtaskNotDone(clientA, subtask2Name, 10000);
      await expectSubtaskNotDone(clientB, subtask2Name, 10000);

      console.log('[SubtaskLWW] ✓ Parent and subtask changes synced independently');
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });

  /**
   * LWW: Subtask deletion cascades with parent delete
   *
   * This tests that parent deletion properly cascades to subtasks even when
   * the subtask is edited concurrently on another client with a later timestamp.
   *
   * Parent deletion cascades to all subtasks to maintain data consistency.
   * Without this, orphaned subtasks with invalid parentIds would cause issues.
   *
   * Scenario:
   * 1. Client A creates parent task with subtask
   * 2. Both clients sync
   * 3. Client A deletes the parent task (cascades to subtask locally)
   * 4. Wait for timestamp gap
   * 5. Client B marks subtask as done (later timestamp, doesn't know parent is deleted)
   * 6. Client A syncs (uploads delete operations)
   * 7. Client B syncs (delete cascades to subtask despite later edit)
   * 8. Verify: Both parent and subtask are deleted on both clients
   */
  test('LWW: Subtask is deleted when parent is deleted concurrently (cascade delete)', async ({
    browser,
    baseURL,
    testRunId,
  }) => {
    const appUrl = baseURL || 'http://localhost:4242';
    let clientA: SimulatedE2EClient | null = null;
    let clientB: SimulatedE2EClient | null = null;

    try {
      const user = await createTestUser(testRunId);
      const syncConfig = getSuperSyncConfig(user);

      // Setup clients
      clientA = await createSimulatedClient(browser, appUrl, 'A', testRunId);
      await clientA.sync.setupSuperSync(syncConfig);

      clientB = await createSimulatedClient(browser, appUrl, 'B', testRunId);
      await clientB.sync.setupSuperSync(syncConfig);

      // 1. Client A creates parent task with subtask
      const parentName = `ParentDel-${testRunId}`;
      const subtaskName = `SubtaskSurvive-${testRunId}`;
      await clientA.workView.addTask(parentName);
      await waitForTask(clientA.page, parentName);

      // Add subtask using keyboard shortcut
      const parentTask = clientA.page.locator(`task:has-text("${parentName}")`).first();
      await parentTask.focus();
      await clientA.page.waitForTimeout(100);
      await parentTask.press('a'); // Add subtask shortcut

      // 'a' opens the inline subtask draft input; type + Enter to commit.
      const draftInput = clientA.page.locator('.e2e-add-subtask-input');
      await draftInput.waitFor({ state: 'visible', timeout: 5000 });
      await draftInput.fill(subtaskName);
      await clientA.page.keyboard.press('Enter');
      // The draft stays open for rapid entry; close it for a clean state.
      await clientA.page.keyboard.press('Escape');
      await draftInput.waitFor({ state: 'detached', timeout: 5000 });
      await waitForTask(clientA.page, subtaskName);
      await clientA.page.waitForTimeout(300);
      console.log('[OrphanSubtask] Created parent with subtask on Client A');

      // 2. Both sync
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();
      await waitForTask(clientB.page, parentName);
      console.log('[OrphanSubtask] Both clients have parent and subtask');

      // Expand parent on Client B to see subtask before we delete on A
      const parentLocatorB = clientB.page
        .locator(`task:not(.hasNoSubTasks):has-text("${parentName}")`)
        .first();
      await parentLocatorB.waitFor({ state: 'visible', timeout: 5000 });

      // Check if subtask is already visible, if not expand
      const subtaskVisibleB = await clientB.page
        .locator(`task.hasNoSubTasks:has-text("${subtaskName}")`)
        .first()
        .isVisible()
        .catch(() => false);

      if (!subtaskVisibleB) {
        const expandBtn = parentLocatorB.locator('.expand-btn').first();
        if (await expandBtn.isVisible().catch(() => false)) {
          await expandBtn.click();
        } else {
          await parentLocatorB.click();
        }
        await clientB.page.waitForTimeout(500);
      }

      // Verify subtask is visible on Client B
      const subtaskLocatorB = clientB.page
        .locator(`task.hasNoSubTasks:has-text("${subtaskName}")`)
        .first();
      await subtaskLocatorB.waitFor({ state: 'visible', timeout: 10000 });
      console.log('[OrphanSubtask] Subtask visible on Client B');

      // 3. Client A deletes the parent task
      // First, click elsewhere to clear any focus/selection
      await clientA.page.locator('body').click({ position: { x: 10, y: 10 } });
      await clientA.page.waitForTimeout(200);

      // Find the parent task - use more specific selector targeting the parent (not subtask)
      // Parent tasks have the parent name but subtasks don't
      const parentLocatorA = clientA.page
        .locator(`task:has-text("${parentName}")`)
        .first();
      await parentLocatorA.waitFor({ state: 'visible', timeout: 5000 });

      // Delete the parent task via context menu (more reliable for tasks with subtasks)
      await parentLocatorA.scrollIntoViewIfNeeded();
      await clientA.page.waitForTimeout(200);

      // Open context menu on the task title area
      await parentLocatorA.locator('task-title').first().click({ button: 'right' });
      await clientA.page.waitForTimeout(300);

      // Wait for context menu and click delete
      const menuPanel = clientA.page.locator('.mat-mdc-menu-panel');
      await menuPanel.waitFor({ state: 'visible', timeout: 5000 });
      const deleteBtn = clientA.page
        .locator('.mat-mdc-menu-item')
        .filter({ hasText: 'Delete' });
      await deleteBtn.waitFor({ state: 'visible', timeout: 5000 });
      await deleteBtn.click();
      await clientA.page.waitForTimeout(300);

      // Handle confirmation dialog if it appears
      const confirmBtn = clientA.page.locator(
        'mat-dialog-actions button:has-text("Delete")',
      );
      if (await confirmBtn.isVisible({ timeout: 1000 }).catch(() => false)) {
        await confirmBtn.click();
      }

      console.log('[OrphanSubtask] Client A deleted parent task');

      // Wait for parent task to be removed from DOM (animations may take time)
      const parentLocatorForCheck = clientA.page.locator(
        `task:has-text("${parentName}")`,
      );
      await parentLocatorForCheck.waitFor({ state: 'hidden', timeout: 5000 });
      console.log('[OrphanSubtask] Parent and subtasks gone from Client A');

      // 4. Wait for timestamp gap (ensures B's edit is later)
      await clientB.page.waitForTimeout(1500);

      // 5. Client B edits subtask (marks it done) - doesn't know parent was deleted
      // Subtask should still be visible on B
      await subtaskLocatorB.focus();
      await clientB.page.waitForTimeout(100);
      await subtaskLocatorB.press('d'); // Toggle done shortcut
      await clientB.page.waitForTimeout(300);

      // Verify subtask is marked done on B
      await expect(subtaskLocatorB).toHaveClass(/isDone/, { timeout: 5000 });
      console.log('[OrphanSubtask] Client B marked subtask done (later timestamp)');

      // 6. Client A syncs (uploads delete operations)
      await clientA.sync.syncAndWait();
      console.log('[OrphanSubtask] Client A synced delete');

      // 7. Client B syncs (LWW resolution happens)
      // B's subtask update has later timestamp, should win over A's delete
      await clientB.sync.syncAndWait();
      console.log('[OrphanSubtask] Client B synced, LWW applied');

      // 8. Final sync round
      await clientA.sync.syncAndWait();
      await clientB.sync.syncAndWait();

      // 9. Verify: Both parent and subtask are deleted on both clients
      // Parent deletion cascades to subtasks, even if subtask had later edits
      // Use visibility assertions since DOM may contain hidden elements during animations

      // On Client B: subtask should not be visible (cascade delete from parent)
      await expect(
        clientB.page.locator(`task:has-text("${subtaskName}")`).first(),
      ).not.toBeVisible({ timeout: 5000 });
      console.log('[CascadeDelete] Subtask deleted on Client B (cascade)');

      // On Client A: subtask should also not be visible
      await expect(
        clientA.page.locator(`task:has-text("${subtaskName}")`).first(),
      ).not.toBeVisible({ timeout: 5000 });
      console.log('[CascadeDelete] Subtask deleted on Client A');

      // Parent should not be visible on both clients
      await expect(
        clientA.page.locator(`task:has-text("${parentName}")`).first(),
      ).not.toBeVisible({ timeout: 5000 });
      await expect(
        clientB.page.locator(`task:has-text("${parentName}")`).first(),
      ).not.toBeVisible({ timeout: 5000 });

      console.log(
        '[CascadeDelete] ✓ Parent delete cascaded to subtask - data consistency maintained',
      );
    } finally {
      if (clientA) await closeClient(clientA);
      if (clientB) await closeClient(clientB);
    }
  });
});
