// ❌ Entangled state — these three variables must always be consistent
const [shapes, setShapes] = useState<ShapeData[]>([]);
const [selectedId, setSelectedId] = useState<string | null>(null);
const [selectionBounds, setSelectionBounds] = useState<Rect | null>(null);

// The invariant: selectionBounds must always reflect the bounding box of the selectedId shape.
// React cannot enforce this. Every caller must remember to update all three.

const selectShape = useCallback((id: string) => {
  setSelectedId(id);
  const shape = shapes.find(s => s.id === id);
  if (shape) setSelectionBounds(computeBounds(shape)); // ← Easy to forget
  // If a caller forgets setSelectionBounds, the UI shows stale selection bounds
}, [shapes]);

const moveShape = useCallback((id: string, dx: number, dy: number) => {
  setShapes(prev => prev.map(s => s.id === id ? { ...s, x: s.x + dx, y: s.y + dy } : s));
  // ← Did you remember to update selectionBounds? The shape moved — bounds are stale now.
  // There is no mechanism to enforce this. It is a convention, not a guarantee.
}, []);

// ✅ Invariant enforced structurally — selection bounds are computed, not stored
class CanvasDocument {
  #shapes: Map<ShapeId, Shape> = new Map();
  #selectedId: ShapeId | null = null;

  // selectionBounds is a derived computation — it CANNOT be stale
  get selectionBounds(): Rect | null {
    if (!this.#selectedId) return null;
    const shape = this.#shapes.get(this.#selectedId);
    return shape ? shape.getBounds() : null;
  }

  moveShape(id: ShapeId, dx: number, dy: number): void {
    const shape = this.#shapes.get(id);
    if (!shape) throw new DomainError(`Shape ${id} not found`);
    shape.move(dx, dy);
    // selectionBounds automatically reflects the new position — no synchronization needed
    this.emit('changed');
  }
}

// ❌ The useEffect cascade — three effects that chain on each other
useEffect(() => {
  // Effect 1: When selectedId changes, compute bounds
  if (selectedId) {
    const shape = shapes.find(s => s.id === selectedId);
    if (shape) setSelectionBounds(computeBounds(shape));
  } else {
    setSelectionBounds(null);
  }
}, [selectedId, shapes]); // ← Both selectedId AND shapes are dependencies

useEffect(() => {
  // Effect 2: When selectionBounds changes, update toolbar state
  if (selectionBounds) {
    setToolbarPosition({ x: selectionBounds.x, y: selectionBounds.y - 40 });
  }
}, [selectionBounds]);

useEffect(() => {
  // Effect 3: When toolbarPosition changes, check if it's off-screen and adjust
  if (toolbarPosition) {
    const adjusted = clampToViewport(toolbarPosition, viewportBounds);
    if (!isEqual(adjusted, toolbarPosition)) {
      setToolbarPosition(adjusted); // ← Triggers Effect 2 again if bounds change
    }
  }
}, [toolbarPosition, viewportBounds]);

// ✅ No effects — all derived state is computed synchronously in domain methods
class CanvasDocument {
  // The toolbar position is computed during a single getSnapshot() call
  getSnapshot(): CanvasSnapshot {
    const selectedShape = this.#selectedId ? this.#shapes.get(this.#selectedId) : null;
    const selectionBounds = selectedShape?.getBounds() ?? null;
    const toolbarPosition = selectionBounds
      ? clampToViewport({ x: selectionBounds.x, y: selectionBounds.y - 40 }, this.#viewport)
      : null;

    return {
      shapes: Array.from(this.#shapes.values()).map(s => s.toData()),
      selectedId: this.#selectedId,
      selectionBounds,
      toolbarPosition, // Computed once, consistent, no cascade
    };
  }
}

// ❌ Stale closure — deleteShape captures 'shapes' at render N
const deleteShape = useCallback((id: string) => {
  // 'shapes' here is the value from the render when this callback was created
  const newShapes = shapes.filter(s => s.id !== id);
  setShapes(newShapes);
  // If shapes was updated between renders (e.g., by an async operation),
  // this filter runs against stale data — a shape that was deleted in the meantime
  // may appear to be re-added, or a shape that was added may be lost
}, [shapes]); // ← Updating this dep array triggers recreation of deleteShape,
              //   which cascades to all consumers via useMemo/useCallback

// Adding 'shapes' to the dep array is correct but triggers recreation of deleteShape
// on EVERY shapes update — which means every child that receives deleteShape via prop
// re-renders even if its own shapes haven't changed

// ✅ Domain methods always read current state — no closures, no staleness
class CanvasDocument {
  deleteShape(id: ShapeId): void {
    // this.#shapes is always current — read at the moment the method is called
    if (!this.#shapes.has(id)) throw new DomainError(`Shape ${id} not found`);
    if (this.#shapes.size === 1) throw new DomainError('Cannot delete the last shape');
    this.#shapes.delete(id);
    if (this.#selectedId === id) this.#selectedId = null;
    this.emit('changed');
  }
}

// ❌ Testing this requires mounting a component
test('undo restores selection', async () => {
  const { result } = renderHook(() => useCanvasDocument());
  await act(async () => { result.current.addShape(mockShape); });
  await act(async () => { result.current.selectShape(mockShape.id); });
  await act(async () => { result.current.moveShape(mockShape.id, 10, 10); });
  await act(async () => { result.current.undo(); });
  expect(result.current.shapes[0].x).toBe(mockShape.x);
  expect(result.current.selectedId).toBe(mockShape.id); // Is selection restored?
});

// ✅ Testing domain logic requires zero React infrastructure
test('undo restores selection and position', () => {
  const doc = new CanvasDocument();
  const id = doc.addShape({ type: 'rect', x: 0, y: 0, width: 100, height: 100 });
  doc.selectShape(id);
  doc.moveShape(id, 10, 10);
  doc.undo();

  const snap = doc.getSnapshot();
  expect(snap.shapes[0].x).toBe(0);
  expect(snap.selectedId).toBe(id);
});

// ❌ Context explosion — splitting one logical state into multiple contexts to avoid re-renders
const ShapesContext = createContext<ShapeData[]>([]);
const SelectionContext = createContext<string | null>(null);
const ToolContext = createContext<ToolType>('select');
const HistoryContext = createContext<HistoryState>({ canUndo: false, canRedo: false });
const ViewportContext = createContext<ViewportState>({ zoom: 1, pan: { x: 0, y: 0 } });

// Five providers wrapping the app — and they must be in the right order
function App() {
  return (
    <ShapesProvider>
      <SelectionProvider>
        <ToolProvider>
          <HistoryProvider>
            <ViewportProvider>
              <CanvasEditor />
            </ViewportProvider>
          </HistoryProvider>
        </ToolProvider>
      </SelectionProvider>
    </ShapesProvider>
  );
}

// ✅ One domain object, subscribed to via useSyncExternalStore
// No context needed — components receive what they need via props from the subscribed root
function App() {
  const [doc] = useState(() => new CanvasDocument());
  const snapshot = useCanvasDocument(doc); // Single subscription

  return (
    <CanvasEditor
      shapes={snapshot.shapes}
      selectedId={snapshot.selectedId}
      activeTool={snapshot.activeTool}
      canUndo={snapshot.canUndo}
      viewport={snapshot.viewport}
      doc={doc}
    />
  );
}

// ✅ Refactoring a domain object: extract a class, delegate methods
class SelectionManager {
  #selectedId: ShapeId | null = null;
  #multiSelectedIds: Set<ShapeId> = new Set();

  select(id: ShapeId): void { this.#selectedId = id; this.#multiSelectedIds.clear(); }
  addToSelection(id: ShapeId): void { this.#multiSelectedIds.add(id); }
  clearSelection(): void { this.#selectedId = null; this.#multiSelectedIds.clear(); }

  get selectedId(): ShapeId | null { return this.#selectedId; }
  get isMultiSelect(): boolean { return this.#multiSelectedIds.size > 1; }
}

class CanvasDocument {
  #selection = new SelectionManager(); // Delegate
  selectShape(id: ShapeId): void { this.#selection.select(id); this.emit('changed'); }
}