// shell/src/App.tsx — the complete responsibility surface of a correct shell
export function App() {
  return (
    <AuthBootstrap>        {/* Initializes auth state — does NOT own business logic */}
      <GlobalLayout>       {/* Nav, Footer — pure chrome, zero domain logic */}
        <Router>           {/* Top-level route-to-remote mapping */}
          <RemoteRoutes /> {/* Dynamically loads remote applications */}
        </Router>
      </GlobalLayout>
    </AuthBootstrap>
  )
}

// ❌ Business logic in the shell — each of these is a coupling point

// Don't: domain-specific state
const [cartItemCount, setCartItemCount] = useState(0)  // Checkout owns this

// Don't: domain-specific checks
const isSubscribed = user?.subscription?.tier === 'pro'  // Profile owns this

// Don't: feature flags owned by a specific team
const showNewCheckoutFlow = featureFlags.get('checkout-v2')  // Checkout owns this

// Don't: domain API calls
const { data: products } = useFetch('/api/catalog/featured')  // Catalog owns this

Shell owns:    /checkout       → loads Checkout remote
               /catalog        → loads Catalog remote
               /profile        → loads Profile remote

Checkout owns: /checkout/cart
               /checkout/confirm
               /checkout/gift-cards

Catalog owns:  /catalog/search
               /catalog/product/:id
               /catalog/category/:slug

// shell/src/routes.tsx — shell only knows prefixes
import { lazy, Suspense } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'

// Each remote is a single lazy-loaded module that exposes its own router
const CheckoutApp = lazy(() => import('checkout/App'))
const CatalogApp  = lazy(() => import('catalog/App'))
const ProfileApp  = lazy(() => import('profile/App'))

export function ShellRoutes() {
  return (
    <Suspense fallback={<GlobalLoadingSpinner />}>
      <Routes>
        <Route path="/"          element={<Navigate to="/catalog" replace />} />
        {/* /* — the shell passes all sub-routing to the remote */}
        <Route path="/checkout/*" element={<CheckoutApp />} />
        <Route path="/catalog/*"  element={<CatalogApp />} />
        <Route path="/profile/*"  element={<ProfileApp />} />
      </Routes>
    </Suspense>
  )
}

// checkout/src/App.tsx — Checkout remote owns all /checkout/* routes
import { Routes, Route } from 'react-router-dom'

export default function CheckoutApp() {
  return (
    <Routes>
      {/* These routes are relative — /checkout prefix is stripped by the shell */}
      <Route index          element={<CartPage />} />
      <Route path="confirm" element={<ConfirmPage />} />
      <Route path="gift-cards" element={<GiftCardsPage />} />
    </Routes>
  )
}

// shell/src/RemoteBoundary.tsx
import { Component, ReactNode, ErrorInfo } from 'react'

interface Props {
  remoteName: string       // For error attribution — which remote crashed
  fallback: ReactNode      // What to show when the remote fails
  children: ReactNode
}

interface State {
  hasError: boolean
  error: Error | null
}

export class RemoteBoundary extends Component<Props, State> {
  state: State = { hasError: false, error: null }

  static getDerivedStateFromError(error: Error): State {
    return { hasError: true, error }
  }

  componentDidCatch(error: Error, info: ErrorInfo) {
    // Tag the error with the remote name for observability (Part 9)
    console.error(`[RemoteBoundary:${this.props.remoteName}]`, error)

    // Report to error tracking — remote attribution is critical
    errorTracker.captureException(error, {
      tags: {
        'remote.name': this.props.remoteName,
        'remote.boundary': true,
      },
      extra: { componentStack: info.componentStack },
    })
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback
    }
    return this.props.children
  }
}

// shell/src/routes.tsx — complete boundary composition
function RemoteRoute({
  remoteName,
  loader,
  fallback,
}: {
  remoteName: string
  loader: () => Promise<{ default: ComponentType }>
  fallback: ReactNode
}) {
  const RemoteApp = lazy(loader)

  return (
    <RemoteBoundary
      remoteName={remoteName}
      fallback={fallback}
    >
      <Suspense fallback={<RemoteLoadingState remoteName={remoteName} />}>
        <RemoteApp />
      </Suspense>
    </RemoteBoundary>
  )
}

// Usage — one boundary per remote, fallback is a composed UI not a blank zone
<Routes>
  <Route
    path="/checkout/*"
    element={
      <RemoteRoute
        remoteName="checkout"
        loader={() => import('checkout/App')}
        fallback={<CheckoutUnavailableFallback />}
      />
    }
  />
  <Route
    path="/catalog/*"
    element={
      <RemoteRoute
        remoteName="catalog"
        loader={() => import('catalog/App')}
        fallback={<CatalogUnavailableFallback />}
      />
    }
  />
</Routes>

// shell/src/RemoteRoute.tsx — lazy loading with timeout and retry
function createTimedRemoteLoader(
  loader: () => Promise<{ default: ComponentType }>,
  timeoutMs = 10_000,
) {
  return () =>
    Promise.race([
      loader(),
      new Promise<never>((_, reject) =>
        setTimeout(() => reject(new Error('Remote load timeout')), timeoutMs),
      ),
    ])
}

// Usage — 10 second timeout before the Error Boundary catches the timeout error
const CheckoutApp = lazy(
  createTimedRemoteLoader(() => import('checkout/App'), 10_000)
)

Remote request → CircuitBreakerPlugin.beforeRequest()
                        ↓
              Circuit open? → return null → import() rejects
                        ↓
              Circuit closed? → proceed with fetch
                        ↓
              fetch fails? → CircuitBreakerPlugin.afterResolve() records failure
                        ↓
              Error propagates → RemoteBoundary.getDerivedStateFromError()
                        ↓
              Fallback UI renders — user sees degraded, not broken

Checkout Remote → GET /bff/checkout/cart
Catalog Remote  → GET /bff/catalog/products
Profile Remote  → GET /bff/profile/account