// ❌ The pattern that causes all of the above problems
// shell/src/bootstrap.ts
window.__auth = { user: currentUser, token: accessToken }

// checkout/src/CartButton.tsx
function CartButton() {
  // Reads from window — no type safety, no change notification, no cleanup
  const user = (window as any).__auth?.user
  return <button>{user?.name}</button>
}

// catalog/src/SearchPage.tsx — Catalog remote writes state to URL
import { useSearchParams } from 'react-router-dom'

function SearchPage() {
  const [params, setParams] = useSearchParams()

  // State lives in the URL — not in React state, not in window
  const query    = params.get('q') ?? ''
  const category = params.get('category') ?? 'all'
  const page     = Number(params.get('page') ?? '1')

  function handleSearch(newQuery: string) {
    setParams({ q: newQuery, category, page: '1' })
    // URL becomes: /catalog/search?q=laptop&category=all&page=1
    // Any remote can read this. The user can share this link.
  }

  return <SearchUI query={query} category={category} page={page} onSearch={handleSearch} />
}

// shell/src/events.ts — shared event schema (published as an NPM package or shared remote)
// This is the ONLY contract between remotes — a strongly typed event schema

export interface AuthSignoutEvent extends CustomEvent {
  type: 'auth:signout'
  detail: { reason: 'user_action' | 'session_expired' | 'security_event' }
}

export interface CartUpdatedEvent extends CustomEvent {
  type: 'cart:updated'
  detail: { itemCount: number }
}

// Type-safe event dispatcher
export function dispatchAuthSignout(reason: AuthSignoutEvent['detail']['reason']) {
  window.dispatchEvent(
    new CustomEvent<AuthSignoutEvent['detail']>('auth:signout', {
      detail: { reason },
      bubbles: true,
      composed: true,  // crosses Shadow DOM boundaries — required for Web Component remotes
    })
  )
}

// Type-safe event listener
export function onCartUpdated(handler: (event: CartUpdatedEvent) => void) {
  const listener = (e: Event) => handler(e as CartUpdatedEvent)
  window.addEventListener('cart:updated', listener)
  return () => window.removeEventListener('cart:updated', listener)  // returns cleanup
}

// checkout/src/Cart.tsx — Checkout remote dispatches events
import { dispatchAuthSignout } from '@example/mfe-events'  // shared schema package

function Cart() {
  function handleCheckoutComplete() {
    window.dispatchEvent(
      new CustomEvent('cart:updated', { detail: { itemCount: 0 } })
    )
  }
}

// shell/src/Nav.tsx — Shell listens for cart updates
import { onCartUpdated } from '@example/mfe-events'

function CartIcon() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    // Returns cleanup function — no memory leak on unmount
    return onCartUpdated((event) => setCount(event.detail.itemCount))
  }, [])

  return <CartBadge count={count} />
}

// state-remote/src/store.ts — deployed as its own remote
import { create } from 'zustand'

interface GlobalStore {
  featureFlags: Record<string, boolean>
  userPreferences: { theme: 'light' | 'dark'; language: string }
  setFeatureFlag: (key: string, value: boolean) => void
}

export const useGlobalStore = create<GlobalStore>((set) => ({
  featureFlags: {},
  userPreferences: { theme: 'dark', language: 'en' },
  setFeatureFlag: (key, value) =>
    set((s) => ({ featureFlags: { ...s.featureFlags, [key]: value } })),
}))

// state-remote/rspack.config.js
exposes: {
  './useGlobalStore': './src/store',
}
shared: {
  react:    { singleton: true },
  zustand:  { singleton: true },  // CRITICAL — store must be a singleton
}

architecture:
  shell:    https://app.example.com
  checkout: https://cdn.checkout.example.com   (same eTLD+1: example.com)
  catalog:  https://cdn.catalog.example.com    (same eTLD+1: example.com)

auth cookie:
  Name:     session_token
  Domain:   .example.com          ← shared across all subdomains
  HttpOnly: true                  ← not readable by JavaScript
  Secure:   true                  ← HTTPS only
  SameSite: Lax                   ← sent on same-site navigation, not cross-site requests

// shell/src/pages/AuthCallback.tsx — Shell owns the /auth/callback route
import { useEffect } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'

export function AuthCallback() {
  const [params] = useSearchParams()
  const navigate = useNavigate()

  useEffect(() => {
    const code = params.get('code')
    const state = params.get('state')

    if (!code) {
      navigate('/error?reason=auth_failed')
      return
    }

    // Exchange code for tokens — server sets httpOnly cookie
    fetch('/api/auth/token', {
      method: 'POST',
      body: JSON.stringify({ code, code_verifier: sessionStorage.getItem('pkce_verifier') }),
      credentials: 'include',  // receives the Set-Cookie header
    })
      .then((res) => res.json())
      .then((user) => {
        // Broadcast authenticated state to all remotes via Custom Event
        window.dispatchEvent(
          new CustomEvent('auth:authenticated', { detail: { user } })
        )
        navigate(state ?? '/')  // redirect to original destination
      })
  }, [])

  return <AuthLoadingSpinner />
}

// shell/src/auth.ts — Shell handles signout
export function signOut() {
  // Clear the server-side session
  fetch('/api/auth/signout', { method: 'POST', credentials: 'include' })
    .then(() => {
      // Broadcast to all mounted remotes
      window.dispatchEvent(
        new CustomEvent('auth:signout', {
          detail: { reason: 'user_action' },
          bubbles: true,
          composed: true,
        })
      )
      // Shell navigates to login
      navigate('/login')
    })
}

// checkout/src/hooks/useAuth.ts — Checkout remote listens
export function useAuth() {
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    // Listen for auth events from the shell
    const handleAuth     = (e: CustomEvent) => setUser(e.detail.user)
    const handleSignout  = () => setUser(null)

    window.addEventListener('auth:authenticated', handleAuth)
    window.addEventListener('auth:signout', handleSignout)

    return () => {
      window.removeEventListener('auth:authenticated', handleAuth)
      window.removeEventListener('auth:signout', handleSignout)
    }
  }, [])

  return { user, isAuthenticated: user !== null }
}