JavaScript Browser Object Model (BOM): Window · Screen · Location · History · Navigator · Popups · Timing · Cookies

// These are all equivalent:
var myVar = 42;
console.log(myVar);           // Output: 42
console.log(window.myVar);    // Output: 42  ← same thing

function greet() { return "Hello"; }
console.log(greet());         // Output: Hello
console.log(window.greet());  // Output: Hello  ← same thing

// Built-in globals are also window properties:
console.log(window.document === document);   // Output: true
console.log(window.console  === console);    // Output: true
console.log(window.Math     === Math);       // Output: true
console.log(window.JSON     === JSON);       // Output: true

var   a = 1;  console.log(window.a);  // Output: 1     ← attached
let   b = 2;  console.log(window.b);  // Output: undefined
const c = 3;  console.log(window.c);  // Output: undefined

// Inner dimensions — the viewport (excluding toolbars, scrollbars):
console.log(window.innerWidth);    // e.g., Output: 1280  (pixels)
console.log(window.innerHeight);   // e.g., Output: 720   (pixels)

// Outer dimensions — the entire browser window including chrome:
console.log(window.outerWidth);    // e.g., Output: 1360
console.log(window.outerHeight);   // e.g., Output: 840

function checkLayout() {
  if (window.innerWidth < 768) {
    document.body.classList.add("mobile");
    document.body.classList.remove("desktop");
  } else {
    document.body.classList.add("desktop");
    document.body.classList.remove("mobile");
  }
}

window.addEventListener("resize", checkLayout);
checkLayout();   // Run on load too

// Position of the window on the screen:
console.log(window.screenX);   // Pixels from left of screen
console.log(window.screenY);   // Pixels from top of screen

// How far the page has been scrolled:
console.log(window.scrollX);   // Horizontal scroll position
console.log(window.scrollY);   // Vertical scroll position

// Scroll to a specific position:
window.scrollTo(0, 500);        // Scroll to x=0, y=500 pixels from top

// Scroll by a relative amount:
window.scrollBy(0, 100);        // Scroll down 100px from current position

// Smooth scroll to top:
window.scrollTo({ top: 0, behavior: "smooth" });

// Scroll to a specific element:
document.getElementById("section-3").scrollIntoView({ behavior: "smooth" });

// Open a new window or tab:
const newWindow = window.open(
  "https://example.com",  // URL
  "_blank",               // Target: "_blank" = new tab, "_self" = same tab
  "width=600,height=400"  // Window features (only relevant for popup windows)
);

// Close the opened window programmatically:
newWindow.close();

// Close the current window (only works if JS opened it):
window.close();

const popup = window.open(
  "https://example.com",
  "myPopup",
  "width=800,height=600,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=no"
);

// Resize the window to a specific size:
window.resizeTo(1024, 768);

// Resize by a relative amount:
window.resizeBy(100, 50);

// Move the window to a specific screen position:
window.moveTo(0, 0);

// Move by a relative amount:
window.moveBy(50, 50);

// Open the browser's print dialog:
document.getElementById("print-btn").addEventListener("click", () => {
  window.print();
});

// Total screen size (the physical monitor):
console.log(screen.width);         // e.g., Output: 1920
console.log(screen.height);        // e.g., Output: 1080

// Available screen area (excluding taskbar, dock, etc.):
console.log(screen.availWidth);    // e.g., Output: 1920
console.log(screen.availHeight);   // e.g., Output: 1040  (1080 - 40px taskbar)

┌─────────────────────────────────────┐ ← screen.height (e.g., 1080px)
│                                     │
│         Browser / App Area          │ ← screen.availHeight (e.g., 1040px)
│                                     │
├─────────────────────────────────────┤
│         Taskbar / Dock              │ ← taken by OS (40px)
└─────────────────────────────────────┘

// Bits used to represent colour per pixel:
console.log(screen.colorDepth);   // Output: 24  (standard 24-bit colour)
console.log(screen.pixelDepth);   // Output: 24  (almost always same as colorDepth)

// The Screen Orientation API:
console.log(screen.orientation.type);   // e.g., "landscape-primary"
// Possible values: "portrait-primary", "portrait-secondary",
//                 "landscape-primary", "landscape-secondary"

// Lock orientation (mobile — requires fullscreen):
screen.orientation.lock("portrait").catch(err => {
  console.log("Orientation lock failed:", err.message);
});

// Listen for orientation changes:
screen.orientation.addEventListener("change", () => {
  console.log("Orientation changed to:", screen.orientation.type);
});

function getDeviceClass() {
  const w = screen.width;
  if (w < 480)  return "phone";
  if (w < 1024) return "tablet";
  return "desktop";
}

function centerWindow(width, height) {
  const left = Math.round((screen.availWidth  - width)  / 2);
  const top  = Math.round((screen.availHeight - height) / 2);
  return `width=${width},height=${height},left=${left},top=${top}`;
}

const popup = window.open(
  "https://example.com/login",
  "login",
  centerWindow(500, 600)
);

https://shop.example.com:8080/products/shoes?size=42&color=red#reviews
│      │                  │   │               │                 │
│      └── hostname        │   └── pathname    └── search        └── hash
└── protocol              └── port

// Full URL: https://shop.example.com:8080/products/shoes?size=42&color=red#reviews

console.log(location.href);      // "https://shop.example.com:8080/products/shoes?size=42&color=red#reviews"
console.log(location.protocol);  // "https:"
console.log(location.host);      // "shop.example.com:8080"  (hostname + port)
console.log(location.hostname);  // "shop.example.com"  (without port)
console.log(location.port);      // "8080"
console.log(location.pathname);  // "/products/shoes"
console.log(location.search);    // "?size=42&color=red"
console.log(location.hash);      // "#reviews"
console.log(location.origin);    // "https://shop.example.com:8080"

// Navigate to a new page:
location.href = "https://www.example.com";

// Relative navigation:
location.href = "/dashboard";

// Navigate within the same site:
location.href = location.origin + "/checkout";

// Identical effect to setting href — keeps history entry:
location.assign("https://www.example.com/login");

// Use case: redirect after login (don't want user to go "back" to login page)
location.replace("/dashboard");

// Use case: redirect from old URL to new URL
if (location.pathname === "/old-page") {
  location.replace("/new-page");
}

// Reload the current page:
location.reload();

// Force reload from server (bypass cache):
location.reload(true);   // Note: the parameter is non-standard and ignored in modern browsers

// Parse query string parameters with URLSearchParams:
// URL: /search?query=javascript&sort=recent&page=2

const params = new URLSearchParams(location.search);

console.log(params.get("query"));   // Output: javascript
console.log(params.get("sort"));    // Output: recent
console.log(params.get("page"));    // Output: 2  (string, not number)
console.log(params.get("missing")); // Output: null

// Check if a parameter exists:
console.log(params.has("query"));   // Output: true

// Iterate all parameters:
params.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// Output:
// query: javascript
// sort: recent
// page: 2

// Build a new query string:
const newParams = new URLSearchParams({ topic: "dom", level: "advanced" });
const newUrl = location.pathname + "?" + newParams.toString();
console.log(newUrl);   // Output: /search?topic=dom&level=advanced

// Read the current hash (anchor):
console.log(location.hash);   // e.g., "#section-2"

// Change the hash without full page reload:
location.hash = "#contact";   // Scrolls to element with id="contact"

// Listen for hash changes:
window.addEventListener("hashchange", () => {
  const section = location.hash.slice(1);   // Remove the "#"
  console.log("Navigated to section:", section);
  loadContent(section);   // Simple SPA router
});

// Change URL to /products/42 without reloading:
history.pushState(
  { productId: 42 },   // State object (available in popstate handler)
  "",                  // Title (mostly ignored by browsers)
  "/products/42"       // New URL
);

console.log(location.pathname);   // Output: /products/42  (URL updated!)
// Page did NOT reload — this is client-side routing

console.log(history.length);   // Output: e.g., 5 (entries in the history stack)

// Go back one page (same as clicking the browser Back button):
history.back();

// Go forward one page (same as clicking the browser Forward button):
history.forward();

// Go a specific number of steps back or forward:
history.go(-1);    // One step back (same as back())
history.go(-2);    // Two steps back
history.go(1);     // One step forward (same as forward())
history.go(0);     // Reload current page

document.getElementById("back-btn").addEventListener("click", () => {
  if (history.length > 1) {
    history.back();
  } else {
    location.href = "/home";   // No history — go to home
  }
});

// Navigate to a "virtual" page:
history.pushState(
  { page: "about" },  // State: any serialisable data
  "About Us",         // Title: usually ignored by browsers
  "/about"            // URL: what the address bar should show
);

// Navigation to /about happened "virtually":
console.log(location.pathname);  // Output: /about
// But the page did NOT reload — the DOM is unchanged

window.addEventListener("popstate", function(event) {
  console.log("User navigated back/forward");
  console.log("State:", event.state);   // The state object you pushed

  if (event.state && event.state.page) {
    renderPage(event.state.page);   // Re-render the correct view
  }
});

// Update URL to reflect current filter without creating a new history entry:
function applyFilter(category) {
  const url = `/products?category=${category}`;
  history.replaceState({ category }, "", url);
  renderProducts(category);
}

const routes = {
  "/":        () => "<h1>Home</h1>",
  "/about":   () => "<h1>About</h1>",
  "/contact": () => "<h1>Contact</h1>"
};

function navigate(path) {
  const render = routes[path] || (() => "<h1>404 Not Found</h1>");
  document.getElementById("app").innerHTML = render();
  history.pushState({ path }, "", path);
}

// Handle browser back/forward:
window.addEventListener("popstate", e => {
  const path = e.state?.path ?? location.pathname;
  const render = routes[path] || (() => "<h1>404 Not Found</h1>");
  document.getElementById("app").innerHTML = render();
});

// Intercept internal links:
document.addEventListener("click", e => {
  const link = e.target.closest("a[href]");
  if (link && link.origin === location.origin) {
    e.preventDefault();
    navigate(link.pathname);
  }
});

// Initial render:
navigate(location.pathname);

// Full user-agent string (less useful nowadays — often spoofed):
console.log(navigator.userAgent);
// e.g., "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36..."

// Application name (usually "Netscape" for historical reasons — useless):
console.log(navigator.appName);     // Output: Netscape

// Application code name (always "Mozilla" — useless):
console.log(navigator.appCodeName); // Output: Mozilla

// Browser version string (complex, not reliable):
console.log(navigator.appVersion);

// Browser name from Brands API (modern, reliable):
if (navigator.userAgentData) {
  navigator.userAgentData.brands.forEach(b => {
    console.log(b.brand, b.version);
  });
  console.log("Mobile:", navigator.userAgentData.mobile);
}

// ❌ Bad — browser detection:
if (navigator.userAgent.includes("Chrome")) {
  doChromeThing();
}

// ✅ Good — feature detection:
if ("geolocation" in navigator) {
  doGeolocationThing();
}

if (typeof IntersectionObserver !== "undefined") {
  setupLazyLoading();
}

// User's preferred language:
console.log(navigator.language);     // e.g., "en-US", "fr-FR", "zh-CN"

// All preferred languages (ordered by preference):
console.log(navigator.languages);    // e.g., ["en-US", "en", "fr"]

function getPreferredLocale() {
  return navigator.language || navigator.languages[0] || "en-US";
}

function formatPrice(amount) {
  return new Intl.NumberFormat(getPreferredLocale(), {
    style:    "currency",
    currency: "USD"
  }).format(amount);
}

console.log(formatPrice(1234.56));   // Output depends on locale
// en-US: "$1,234.56"
// fr-FR: "1 234,56 $US"

console.log(navigator.onLine);   // Output: true  (if connected)

// Listen for connection changes:
window.addEventListener("online", () => {
  console.log("Connection restored!");
  document.getElementById("status").textContent = "Online";
  syncPendingData();
});

window.addEventListener("offline", () => {
  console.log("Connection lost.");
  document.getElementById("status").textContent = "Offline — changes will sync when reconnected";
});

// Check if geolocation is available:
if (!("geolocation" in navigator)) {
  console.log("Geolocation is not supported.");
}

// Get current position:
navigator.geolocation.getCurrentPosition(
  function(position) {
    const { latitude, longitude, accuracy } = position.coords;
    console.log(`Lat: ${latitude}, Lon: ${longitude}, Accuracy: ±${accuracy}m`);
  },
  function(error) {
    switch (error.code) {
      case error.PERMISSION_DENIED:
        console.log("User denied geolocation request.");
        break;
      case error.POSITION_UNAVAILABLE:
        console.log("Location information unavailable.");
        break;
      case error.TIMEOUT:
        console.log("Location request timed out.");
        break;
    }
  },
  {
    enableHighAccuracy: true,   // GPS-level accuracy (battery cost)
    timeout:            10000,  // Max milliseconds to wait
    maximumAge:         0       // Don't use cached position
  }
);

// Watch position continuously (e.g., for turn-by-turn navigation):
const watchId = navigator.geolocation.watchPosition(
  position => updateMapPosition(position.coords),
  error => console.error("Watch error:", error.message)
);

// Stop watching:
navigator.geolocation.clearWatch(watchId);

// Operating system / CPU platform:
console.log(navigator.platform);          // e.g., "Win32", "MacIntel", "Linux x86_64"

// CPU cores (hardware concurrency):
console.log(navigator.hardwareConcurrency); // e.g., 8  (logical CPU cores)
// Used for deciding how many Web Workers to spawn

// Device memory (GB, approximate):
console.log(navigator.deviceMemory);       // e.g., 8  (GB)
// Low values (<= 1) suggest adjusting content quality

console.log(navigator.cookieEnabled);  // Output: true/false
// Use before trying to set cookies

// Copy text to clipboard (modern API):
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log("Copied to clipboard!");
  } catch (err) {
    console.error("Copy failed:", err);
  }
}

// Paste text from clipboard:
async function pasteFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log("Pasted:", text);
    return text;
  } catch (err) {
    console.error("Paste failed:", err.message);
    return null;
  }
}

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js")
    .then(registration => {
      console.log("Service Worker registered, scope:", registration.scope);
    })
    .catch(error => {
      console.error("Service Worker registration failed:", error);
    });
}

alert("Your session has expired. Please log in again.");

// With window prefix (identical):
window.alert("File saved successfully.");

const confirmed = confirm("Are you sure you want to delete this item? This cannot be undone.");

if (confirmed) {
  deleteItem();
  console.log("Item deleted.");
} else {
  console.log("Deletion cancelled.");
}

function logout() {
  if (confirm("Log out of your account?")) {
    if (confirm("Save your work first?")) {
      saveWork();
    }
    performLogout();
  }
}

const name = prompt("What is your name?");

if (name === null) {
  console.log("User cancelled the prompt.");
} else if (name.trim() === "") {
  console.log("User entered nothing.");
} else {
  console.log("Hello, " + name + "!");
}

const city = prompt("Enter your city:", "London");
// "London" is pre-filled in the input field

// Safe pattern:
const input = prompt("Enter a number:");
if (input !== null) {
  const num = parseFloat(input);
  if (!isNaN(num)) {
    console.log("You entered:", num);
  }
}

// Custom confirm dialog — styled, non-blocking, fully controllable:
function customConfirm(message) {
  return new Promise((resolve) => {
    const overlay = document.createElement("div");
    overlay.className = "modal-overlay";
    overlay.innerHTML = `
      <div class="modal">
        <p>${message}</p>
        <button id="modal-ok">OK</button>
        <button id="modal-cancel">Cancel</button>
      </div>
    `;
    document.body.appendChild(overlay);

    overlay.querySelector("#modal-ok").addEventListener("click", () => {
      overlay.remove();
      resolve(true);
    });
    overlay.querySelector("#modal-cancel").addEventListener("click", () => {
      overlay.remove();
      resolve(false);
    });
  });
}

// Usage:
const confirmed = await customConfirm("Delete this file?");
if (confirmed) deleteFile();

const timerId = setTimeout(function() {
  console.log("This runs after 2 seconds");
}, 2000);

// Cancel before it fires:
clearTimeout(timerId);

function greet(name, greeting) {
  console.log(`${greeting}, ${name}!`);
}

setTimeout(greet, 1000, "Alice", "Good morning");
// After 1 second → Output: Good morning, Alice!

let count = 0;
const intervalId = setInterval(function() {
  count++;
  console.log("Tick", count);
  if (count >= 5) {
    clearInterval(intervalId);
    console.log("Done!");
  }
}, 1000);

// Always store the ID if you might need to cancel:
let toastTimer = null;

function showToast(message) {
  const toast = document.getElementById("toast");
  toast.textContent = message;
  toast.classList.add("visible");

  clearTimeout(toastTimer);   // Cancel any previous hide-toast timer

  toastTimer = setTimeout(() => {
    toast.classList.remove("visible");
  }, 3000);
}

function debounce(fn, delay) {
  let timerId = null;
  return function(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => fn.apply(this, args), delay);
  };
}

const debouncedSearch = debounce(function(query) {
  console.log("Searching for:", query);
  fetchResults(query);
}, 400);

document.getElementById("search-input").addEventListener("input", e => {
  debouncedSearch(e.target.value);
});

function throttle(fn, interval) {
  let lastRun = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastRun >= interval) {
      lastRun = now;
      fn.apply(this, args);
    }
  };
}

const throttledScroll = throttle(() => {
  console.log("Scroll position:", window.scrollY);
}, 100);   // At most once every 100ms

window.addEventListener("scroll", throttledScroll);

function startCountdown(seconds, onTick, onComplete) {
  let remaining = seconds;

  onTick(remaining);

  const id = setInterval(() => {
    remaining--;
    onTick(remaining);

    if (remaining <= 0) {
      clearInterval(id);
      onComplete();
    }
  }, 1000);

  return id;   // Return id so caller can cancel if needed
}

startCountdown(
  10,
  seconds => document.getElementById("timer").textContent = seconds,
  ()      => document.getElementById("timer").textContent = "Time's up!"
);

let pollId = null;

function startPolling(url, interval = 5000) {
  async function check() {
    try {
      const res  = await fetch(url);
      const data = await res.json();
      updateUI(data);
    } catch (e) {
      console.warn("Poll failed:", e.message);
    }
  }

  check();   // Run immediately
  pollId = setInterval(check, interval);
}

function stopPolling() {
  clearInterval(pollId);
  pollId = null;
}

startPolling("/api/notifications");

function scheduleCheck() {
  setTimeout(async () => {
    await doWork();
    scheduleCheck();  // Only schedule next after current completes
  }, 5000);
}

scheduleCheck();

let position = 0;
const box = document.getElementById("moving-box");

function animate(timestamp) {
  position += 2;
  box.style.left = position + "px";

  if (position < 400) {
    requestAnimationFrame(animate);   // Request next frame
  }
}

requestAnimationFrame(animate);   // Start animation

// Cancel:
const frameId = requestAnimationFrame(animate);
cancelAnimationFrame(frameId);

// Reading: returns ALL cookies as a single string:
console.log(document.cookie);
// Output: "username=Alice; theme=dark; sessionId=abc123"

// Writing: sets ONE cookie (does NOT overwrite all others):
document.cookie = "username=Bob";
console.log(document.cookie);
// Output: "username=Bob; theme=dark; sessionId=abc123"
// ↑ Only username changed — other cookies unaffected

// Full cookie syntax:
document.cookie = "name=value; expires=DATE; path=/; domain=example.com; Secure; SameSite=Strict";

function setCookie(name, value, daysToExpire) {
  let cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);

  if (daysToExpire) {
    const expires = new Date();
    expires.setTime(expires.getTime() + daysToExpire * 24 * 60 * 60 * 1000);
    cookieStr += "; expires=" + expires.toUTCString();
  }

  cookieStr += "; path=/";   // Accessible from all paths on the domain
  document.cookie = cookieStr;
}

// Set a cookie that expires in 30 days:
setCookie("theme", "dark", 30);

// Set a session cookie (expires when browser closes):
setCookie("temp_token", "xyz789");

// Set a cookie with max-age:
document.cookie = "preference=compact; max-age=3600; path=/";
// Expires in 3600 seconds (1 hour)

function getCookie(name) {
  const cookieName = encodeURIComponent(name) + "=";
  const cookies    = document.cookie.split("; ");

  for (const cookie of cookies) {
    if (cookie.startsWith(cookieName)) {
      return decodeURIComponent(cookie.slice(cookieName.length));
    }
  }
  return null;   // Cookie not found
}

console.log(getCookie("theme"));       // Output: dark
console.log(getCookie("nonExistent")); // Output: null

function deleteCookie(name) {
  // Set expiry to epoch (1 Jan 1970) — browser immediately discards it:
  document.cookie = encodeURIComponent(name) + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}

deleteCookie("theme");
console.log(getCookie("theme"));   // Output: null  ← gone

const CookieManager = {
  set(name, value, options = {}) {
    const {
      days    = null,
      path    = "/",
      domain  = "",
      secure  = location.protocol === "https:",
      sameSite = "Lax"
    } = options;

    let cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;

    if (days !== null) {
      const d = new Date();
      d.setTime(d.getTime() + days * 86400000);
      cookie += `; expires=${d.toUTCString()}`;
    }

    cookie += `; path=${path}`;
    if (domain)   cookie += `; domain=${domain}`;
    if (secure)   cookie += "; Secure";
    cookie += `; SameSite=${sameSite}`;

    document.cookie = cookie;
  },

  get(name) {
    const key   = encodeURIComponent(name) + "=";
    const found = document.cookie.split("; ").find(c => c.startsWith(key));
    return found ? decodeURIComponent(found.slice(key.length)) : null;
  },

  delete(name, path = "/") {
    this.set(name, "", { days: -1, path });
  },

  exists(name) {
    return this.get(name) !== null;
  },

  getAll() {
    if (!document.cookie) return {};
    return document.cookie.split("; ").reduce((acc, cookie) => {
      const [key, ...valueParts] = cookie.split("=");
      acc[decodeURIComponent(key)] = decodeURIComponent(valueParts.join("="));
      return acc;
    }, {});
  },

  deleteAll() {
    Object.keys(this.getAll()).forEach(name => this.delete(name));
  }
};

// Usage:
CookieManager.set("username", "Alice", { days: 7 });
CookieManager.set("theme",    "dark",  { days: 365 });

console.log(CookieManager.get("username"));   // Output: Alice
console.log(CookieManager.getAll());
// Output: { username: 'Alice', theme: 'dark' }

CookieManager.delete("username");
console.log(CookieManager.exists("username")); // Output: false

function hasCookieConsent() {
  return CookieManager.get("cookie_consent") === "accepted";
}

function requestCookieConsent() {
  const banner = document.getElementById("cookie-banner");
  banner.style.display = "block";

  document.getElementById("accept-cookies").addEventListener("click", () => {
    CookieManager.set("cookie_consent", "accepted", { days: 365 });
    banner.style.display = "none";
    initAnalytics();        // Now safe to start analytics
    initMarketingCookies(); // And marketing cookies
  });

  document.getElementById("reject-cookies").addEventListener("click", () => {
    CookieManager.set("cookie_consent", "rejected", { days: 365 });
    banner.style.display = "none";
    // Do NOT set analytics or marketing cookies
  });
}

// On page load:
if (!hasCookieConsent()) {
  requestCookieConsent();
} else if (CookieManager.get("cookie_consent") === "accepted") {
  initAnalytics();
}

// --- App-wide configuration ---
const AppConfig = Object.freeze({
  name:        "MyApp",
  version:     "2.1.0",
  cookiePrefix: "myapp_",
  sessionCookieName: "session_token",
  preferenceKeys: ["theme", "fontSize", "language", "notifications"],
  routes: {
    "/":           { title: "Home",     component: "HomePage"     },
    "/dashboard":  { title: "Dashboard",component: "DashboardPage"},
    "/settings":   { title: "Settings", component: "SettingsPage" },
    "/profile":    { title: "Profile",  component: "ProfilePage"  },
  }
});

// --- Device profiling using screen + navigator ---
const DeviceProfile = (function() {
  function getBreakpoint() {
    const w = window.innerWidth;
    if (w < 480)  return "xs";
    if (w < 768)  return "sm";
    if (w < 1024) return "md";
    if (w < 1440) return "lg";
    return "xl";
  }

  function getDeviceType() {
    const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
    const bp       = getBreakpoint();
    if (bp === "xs" || bp === "sm") return "mobile";
    if (bp === "md" && hasTouch)    return "tablet";
    return "desktop";
  }

  return {
    get breakpoint()    { return getBreakpoint(); },
    get deviceType()    { return getDeviceType(); },
    get screenWidth()   { return screen.width; },
    get screenHeight()  { return screen.height; },
    get viewportWidth() { return window.innerWidth; },
    get viewportHeight(){ return window.innerHeight; },
    get colorDepth()    { return screen.colorDepth; },
    get language()      { return navigator.language; },
    get onLine()        { return navigator.onLine; },
    get cpuCores()      { return navigator.hardwareConcurrency || 1; },
    get deviceMemory()  { return navigator.deviceMemory || null; },
    get isLowEnd()      { return (navigator.deviceMemory || 4) <= 1 || navigator.hardwareConcurrency <= 2; },

    summary() {
      return {
        breakpoint:  this.breakpoint,
        deviceType:  this.deviceType,
        screen:      `${this.screenWidth}×${this.screenHeight}`,
        viewport:    `${this.viewportWidth}×${this.viewportHeight}`,
        language:    this.language,
        onLine:      this.onLine,
        cpuCores:    this.cpuCores,
        deviceMemory: this.deviceMemory,
        isLowEnd:    this.isLowEnd
      };
    }
  };
})();

console.log("Device Profile:", DeviceProfile.summary());

// --- Namespaced cookie manager (uses AppConfig.cookiePrefix) ---
const SessionManager = {
  _key(name) { return AppConfig.cookiePrefix + name; },

  // Session token (no expiry = session cookie):
  setSession(token) {
    CookieManager.set(this._key("session"), token, { secure: true, sameSite: "Strict" });
  },
  getSession() { return CookieManager.get(this._key("session")); },
  clearSession(){ CookieManager.delete(this._key("session")); },
  isLoggedIn()  { return !!this.getSession(); },

  // Persistent user preferences (365 days):
  setPreference(key, value) {
    if (!AppConfig.preferenceKeys.includes(key)) {
      throw new Error(`Unknown preference key: "${key}"`);
    }
    CookieManager.set(this._key("pref_" + key), value, { days: 365 });
  },

  getPreference(key, defaultValue = null) {
    return CookieManager.get(this._key("pref_" + key)) ?? defaultValue;
  },

  getAllPreferences() {
    return AppConfig.preferenceKeys.reduce((acc, key) => {
      acc[key] = this.getPreference(key);
      return acc;
    }, {});
  },

  // Apply all saved preferences to the document:
  applyPreferences() {
    const theme    = this.getPreference("theme",    "light");
    const fontSize = this.getPreference("fontSize", "medium");
    const lang     = this.getPreference("language", navigator.language.split("-")[0]);

    document.documentElement.setAttribute("data-theme",    theme);
    document.documentElement.setAttribute("data-fontsize", fontSize);
    document.documentElement.lang = lang;

    console.log(`Applied preferences: theme=${theme}, fontSize=${fontSize}, lang=${lang}`);
  }
};

// Apply preferences immediately — before first render (prevents FOUC):
SessionManager.applyPreferences();

// --- Router ---
const Router = {
  _currentState: null,
  _beforeEachHooks: [],

  beforeEach(hook) {
    this._beforeEachHooks.push(hook);
  },

  async navigate(path, state = {}, replace = false) {
    const route = AppConfig.routes[path];

    if (!route) {
      console.warn("No route for:", path);
      this.navigate("/", {}, true);
      return;
    }

    // Run beforeEach hooks (e.g., auth guard):
    for (const hook of this._beforeEachHooks) {
      const allowed = await hook(path, this._currentState);
      if (!allowed) return;
    }

    this._currentState = { path, ...state };

    if (replace) {
      history.replaceState(this._currentState, route.title, path);
    } else {
      history.pushState(this._currentState, route.title, path);
    }

    document.title = `${route.title} — ${AppConfig.name}`;
    this._render(route);
  },

  _render(route) {
    const app = document.getElementById("app");
    app.innerHTML = `
      <div class="page" data-component="${route.component}">
        <h1>${route.title}</h1>
        <p>Component: ${route.component}</p>
        <p>Path: ${location.pathname}</p>
      </div>
    `;
    // In a real app: instantiate and mount route.component here
    console.log("Rendered:", route.title, "at", location.pathname);
  },

  init() {
    // Handle browser back/forward:
    window.addEventListener("popstate", (event) => {
      const state = event.state;
      if (state?.path) {
        const route = AppConfig.routes[state.path];
        if (route) {
          this._currentState = state;
          document.title = `${route.title} — ${AppConfig.name}`;
          this._render(route);
        }
      }
    });

    // Intercept internal link clicks:
    document.addEventListener("click", (event) => {
      const link = event.target.closest("a[href]");
      if (link && new URL(link.href).origin === location.origin) {
        event.preventDefault();
        this.navigate(link.pathname);
      }
    });

    // Render the initial route:
    const initialPath  = location.pathname;
    const initialRoute = AppConfig.routes[initialPath];
    if (initialRoute) {
      this._currentState = { path: initialPath };
      this._render(initialRoute);
    } else {
      this.navigate("/", {}, true);
    }
  }
};

// Auth guard example:
Router.beforeEach((path, prevState) => {
  if (path === "/dashboard" && !SessionManager.isLoggedIn()) {
    console.log("Auth guard: redirecting to home");
    Router.navigate("/", {}, true);
    return false;
  }
  return true;
});

// --- In-app notification system using setTimeout ---
const NotificationManager = {
  _queue: [],
  _activeTimer: null,
  _container: null,

  init() {
    this._container = document.createElement("div");
    this._container.id = "notification-container";
    document.body.appendChild(this._container);
  },

  show(message, type = "info", duration = 4000) {
    const toast = document.createElement("div");
    toast.className   = `notification notification-${type}`;
    toast.textContent = message;
    toast.setAttribute("role", "alert");

    this._container.appendChild(toast);

    // Trigger transition (needs a tick for CSS):
    setTimeout(() => toast.classList.add("visible"), 10);

    // Auto-dismiss:
    setTimeout(() => {
      toast.classList.remove("visible");
      setTimeout(() => toast.remove(), 300);   // Wait for CSS transition
    }, duration);
  },

  success(msg, dur) { this.show(msg, "success", dur); },
  error(msg,   dur) { this.show(msg, "error",   dur); },
  warning(msg, dur) { this.show(msg, "warning", dur); },

  // Scheduled reminder (uses setTimeout):
  scheduleReminder(message, delayMs) {
    const id = setTimeout(() => {
      this.show("⏰ Reminder: " + message, "info", 8000);
    }, delayMs);
    console.log(`Reminder scheduled in ${delayMs / 1000}s (ID: ${id})`);
    return id;
  }
};

// --- Connectivity status using navigator.onLine ---
const ConnectivityMonitor = {
  _pollId: null,
  _wasOffline: false,

  init() {
    this._update();

    window.addEventListener("online",  () => this._onOnline());
    window.addEventListener("offline", () => this._onOffline());

    // Periodic health-check (belt-and-suspenders):
    this._pollId = setInterval(() => this._check(), 30000);
  },

  _update() {
    const statusEl = document.getElementById("connection-status");
    if (statusEl) {
      statusEl.textContent = navigator.onLine ? "🟢 Online" : "🔴 Offline";
      statusEl.className   = navigator.onLine ? "status-online" : "status-offline";
    }
  },

  _onOnline() {
    this._update();
    if (this._wasOffline) {
      NotificationManager.success("Connection restored! Syncing changes...");
      this._wasOffline = false;
      AutoSave.flush();   // Push any pending saves
    }
  },

  _onOffline() {
    this._update();
    this._wasOffline = true;
    NotificationManager.warning("You are offline. Changes will be saved locally.");
  },

  async _check() {
    try {
      await fetch("/api/ping", { method: "HEAD", cache: "no-store" });
    } catch {
      if (navigator.onLine) {
        // navigator.onLine said "online" but request failed — server might be down:
        NotificationManager.error("Server unreachable. Check your connection.");
      }
    }
  },

  destroy() { clearInterval(this._pollId); }
};

// --- Debounced auto-save ---
const AutoSave = {
  _pendingData: null,
  _saveTimer:   null,
  _lastSaved:   null,
  DEBOUNCE_MS:  2000,

  schedule(data) {
    this._pendingData = data;
    clearTimeout(this._saveTimer);

    document.getElementById("save-status").textContent = "Unsaved changes...";

    this._saveTimer = setTimeout(() => this._save(), this.DEBOUNCE_MS);
  },

  async _save() {
    if (!this._pendingData) return;

    if (!navigator.onLine) {
      // Store in cookie for later (small data only):
      CookieManager.set("pending_save", JSON.stringify(this._pendingData));
      document.getElementById("save-status").textContent = "Saved offline — will sync when online";
      return;
    }

    try {
      await fetch("/api/save", {
        method:  "POST",
        headers: { "Content-Type": "application/json" },
        body:    JSON.stringify(this._pendingData)
      });

      this._pendingData = null;
      this._lastSaved   = new Date();
      document.getElementById("save-status").textContent =
        "Saved at " + this._lastSaved.toLocaleTimeString();
      CookieManager.delete("pending_save");   // Clear any offline backup

    } catch (err) {
      NotificationManager.error("Save failed: " + err.message);
    }
  },

  flush() {
    clearTimeout(this._saveTimer);
    this._save();
  }
};

// --- Cookie consent banner ---
const ConsentManager = {
  CONSENT_COOKIE: "myapp_consent",
  CONSENT_VERSION: "v2",  // Bump to re-ask after policy changes

  hasConsent() {
    return CookieManager.get(this.CONSENT_COOKIE) === this.CONSENT_VERSION;
  },

  showBanner() {
    const banner = document.createElement("div");
    banner.id = "cookie-banner";
    banner.innerHTML = `
      <p>${AppConfig.name} uses cookies to remember your preferences and keep you logged in.</p>
      <button id="consent-accept">Accept All</button>
      <button id="consent-essential">Essential Only</button>
      <a href="/privacy">Privacy Policy</a>
    `;
    document.body.appendChild(banner);

    document.getElementById("consent-accept").addEventListener("click", () => {
      CookieManager.set(this.CONSENT_COOKIE, this.CONSENT_VERSION, { days: 365 });
      banner.remove();
      this._onConsented("all");
    });

    document.getElementById("consent-essential").addEventListener("click", () => {
      CookieManager.set(this.CONSENT_COOKIE, this.CONSENT_VERSION + "-essential", { days: 365 });
      banner.remove();
      this._onConsented("essential");
    });
  },

  _onConsented(level) {
    console.log("Cookie consent level:", level);
    if (level === "all") {
      // Now safe to initialise analytics, marketing, etc.
    }
    App.init();
  }
};

// --- Main application bootstrap ---
const App = {
  init() {
    console.log(`${AppConfig.name} v${AppConfig.version} initialising...`);
    console.log("Device:", DeviceProfile.summary());

    // Initialise systems:
    NotificationManager.init();
    ConnectivityMonitor.init();
    Router.init();

    // Respond to window resize with debounce:
    window.addEventListener("resize", debounce(() => {
      document.body.dataset.breakpoint = DeviceProfile.breakpoint;
      document.body.dataset.device     = DeviceProfile.deviceType;
    }, 200));

    // Set initial breakpoint:
    document.body.dataset.breakpoint = DeviceProfile.breakpoint;
    document.body.dataset.device     = DeviceProfile.deviceType;

    // Recovery: restore any pending save from offline cookie:
    const pending = CookieManager.get("myapp_pending_save");
    if (pending) {
      NotificationManager.warning("Restoring unsaved changes from last session...");
      AutoSave.schedule(JSON.parse(pending));
    }

    NotificationManager.success(`Welcome to ${AppConfig.name}!`, 2000);
    console.log("App ready.");
  },

  start() {
    if (!ConsentManager.hasConsent()) {
      // Show banner — init will be called after consent:
      ConsentManager.showBanner();
    } else {
      this.init();
    }
  }
};

// --- Entry point ---
App.start();

const params = new URLSearchParams(location.search);
const size   = params.get("size");   // Output: "42"

function setUserCookie(value) {
  const expires = new Date();
  expires.setTime(expires.getTime() + 7 * 24 * 60 * 60 * 1000);
  document.cookie = `user=${encodeURIComponent(value)}; expires=${expires.toUTCString()}; path=/`;
}
setUserCookie("Alice");