┌────────────────────────────────────────────────────────────────────────┐
│                        Advanced Projects Suite                         │
├──────────────────────────────┬─────────────────────────────────────────┤
│ 1. Production-Grade SPA Engine│ 7. Headless Component Library           │
│ 2. Full-Stack SaaS Client    │ 8. Ultra-Fast JS Utility Library        │
│ 3. Enterprise Admin Dashboard│ 9. Reactive State-Management Store      │
│ 4. Real-Time Collaboration App│ 10. Type-Safe Auto-Generated API Client│
│ 5. Offline-First PWA (CRDTs) │ 11. Browser-Based Code IDE              │
│ 6. Enterprise Design System  │                                         │
└──────────────────────────────┴─────────────────────────────────────────┘

class SPARouter {
  constructor(routes = []) {
    this.routes = routes; // Array of { path, component, middleware }
    this.currentRoute = null;
    this.outlet = document.getElementById("app-root");
    this.init();
  }

  init() {
    window.addEventListener("popstate", () => this.handleRoute(window.location.pathname));
    document.body.addEventListener("click", (e) => {
      const link = e.target.closest("a[data-link]");
      if (link) {
        e.preventDefault();
        this.navigateTo(link.getAttribute("href"));
      }
    });
    this.handleRoute(window.location.pathname);
  }

  async navigateTo(url) {
    history.pushState(null, "", url);
    await this.handleRoute(url);
  }

  async handleRoute(pathname) {
    const route = this.routes.find(r => r.path === pathname) || this.routes.find(r => r.path === "/404");
    if (!route) return;

    // Execute middleware chain (Auth guards, telemetry)
    for (const middleware of route.middleware || []) {
      const allowed = await middleware(route);
      if (!allowed) return this.navigateTo("/login");
    }

    this.currentRoute = route;
    const viewHtml = await route.component();
    this.outlet.innerHTML = viewHtml;
  }
}

function createStore(initialState = {}, rootReducer) {
  let state = initialState;
  const listeners = new Set();
  const middlewares = [];

  function getState() {
    return Object.freeze({ ...state });
  }

  function subscribe(listener) {
    listeners.add(listener);
    return () => listeners.delete(listener);
  }

  function dispatch(action) {
    if (typeof action !== "object" || action === null || !action.type) {
      throw new Error("Actions must be plain objects with a 'type' property");
    }

    state = rootReducer(state, action);
    listeners.forEach(fn => fn(getState()));
    return action;
  }

  return { getState, dispatch, subscribe };
}

class CollaborativeCanvas {
  constructor(canvasEl, wsUrl) {
    this.canvas = canvasEl;
    this.ctx = canvasEl.getContext("2d");
    this.ws = new WebSocket(wsUrl);
    this.isDrawing = false;
    this.init();
  }

  init() {
    this.canvas.addEventListener("mousedown", (e) => { this.isDrawing = true; this.draw(e, true); });
    this.canvas.addEventListener("mouseup", () => { this.isDrawing = false; });
    this.canvas.addEventListener("mousemove", (e) => { if (this.isDrawing) this.draw(e, false); });

    this.ws.onmessage = (event) => {
      const { x0, y0, x1, y1, color } = JSON.parse(event.data);
      this.drawLine(x0, y0, x1, y1, color, false);
    };
  }

  draw(e, isStart) {
    const rect = this.canvas.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    if (!isStart && this.lastX !== undefined) {
      this.drawLine(this.lastX, this.lastY, x, y, "#3b82f6", true);
    }
    this.lastX = x;
    this.lastY = y;
  }

  drawLine(x0, y0, x1, y1, color, broadcast) {
    this.ctx.beginPath();
    this.ctx.moveTo(x0, y0);
    this.ctx.lineTo(x1, y1);
    this.ctx.strokeStyle = color;
    this.ctx.lineWidth = 2;
    this.ctx.stroke();

    if (broadcast && this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify({ x0, y0, x1, y1, color }));
    }
  }
}

class OfflineSyncEngine {
  constructor(dbService, apiService) {
    this.db = dbService;
    this.api = apiService;
    window.addEventListener("online", () => this.flushOutbox());
  }

  async queueMutation(mutation) {
    await this.db.save("outbox", {
      id: crypto.randomUUID(),
      mutation,
      createdAt: Date.now()
    });

    if (navigator.onLine) {
      this.flushOutbox();
    }
  }

  async flushOutbox() {
    const pending = await this.db.getAll("outbox");
    for (const item of pending) {
      try {
        await this.api.post("/api/sync", item.mutation);
        await this.db.delete("outbox", item.id);
      } catch (err) {
        console.warn(`Failed to sync item ${item.id}. Will retry later.`, err);
        break; // Stop on first network error
      }
    }
  }
}

class DesignSystemEngine {
  static tokens = {
    colors: { primary: "#3b82f6", success: "#10b981", danger: "#ef4444" },
    spacing: { sm: "8px", md: "16px", lg: "24px" },
    radius: { md: "8px", full: "9999px" }
  };

  static injectCSSVariables() {
    const root = document.documentElement;
    for (const [category, values] of Object.entries(this.tokens)) {
      for (const [key, val] of Object.entries(values)) {
        root.style.setProperty(`--ds-${category}-${key}`, val);
      }
    }
  }
}

class TypedApiClient {
  constructor(baseUrl) {
    this.baseUrl = baseUrl;
  }

  async fetchTyped(endpoint, schemaValidator, options = {}) {
    const response = await fetch(`${this.baseUrl}${endpoint}`, options);
    if (!response.ok) throw new Error(`API Error ${response.status}`);
    const rawData = await response.json();

    const validatedData = schemaValidator(rawData);
    return validatedData;
  }
}

class BrowserIDE {
  constructor(editorContainer, consoleContainer) {
    this.files = new Map([
      ["index.js", "console.log('Hello from Browser IDE!');"]
    ]);
    this.activeFile = "index.js";
    this.editorContainer = editorContainer;
    this.consoleContainer = consoleContainer;
    this.init();
  }

  init() {
    this.renderEditor();
  }

  runCode() {
    this.consoleContainer.innerHTML = "";
    const code = this.files.get(this.activeFile);

    const iframe = document.createElement("iframe");
    iframe.style.display = "none";
    document.body.appendChild(iframe);

    iframe.contentWindow.console.log = (...args) => {
      const p = document.createElement("p");
      p.textContent = args.join(" ");
      this.consoleContainer.appendChild(p);
    };

    try {
      iframe.contentWindow.eval(code);
    } catch (e) {
      const err = document.createElement("p");
      err.style.color = "red";
      err.textContent = e.toString();
      this.consoleContainer.appendChild(err);
    } finally {
      setTimeout(() => iframe.remove(), 100);
    }
  }

  renderEditor() {
    this.editorContainer.value = this.files.get(this.activeFile);
    this.editorContainer.oninput = (e) => {
      this.files.set(this.activeFile, e.target.value);
    };
  }
}