From 35cc1b74d7bf51a54b16536173b559b23e2bd349 Mon Sep 17 00:00:00 2001
From: Kahhow Lee <44336310+ghostleek@users.noreply.github.com>
Date: Wed, 8 Oct 2025 19:53:26 +0800
Subject: [PATCH] Add production and staging config JSON files

Introduces environment-specific configuration files for production and staging, including API base URLs, Google client IDs, debug mode, and log level settings.
---
 js/config.js                  | 104 ++++++++++++++++++++++++++++++----
 public/config-production.json |   7 +++
 public/config-staging.json    |   7 +++
 3 files changed, 107 insertions(+), 11 deletions(-)
 create mode 100644 public/config-production.json
 create mode 100644 public/config-staging.json

diff --git a/js/config.js b/js/config.js
index 1829b4e..ad6babe 100644
--- a/js/config.js
+++ b/js/config.js
@@ -1,17 +1,99 @@
-// Helper function to safely access environment variables
-const getEnvVar = (key, defaultValue = undefined) => {
-    if (typeof import.meta !== 'undefined' && import.meta.env) {
-        return import.meta.env[key] || defaultValue;
+// Runtime configuration system
+class ConfigManager {
+    constructor() {
+        this.config = this.getDefaultConfig();
+        this.loaded = false;
     }
-    return defaultValue;
-};
 
-export const CONFIG = {
-    // Google OAuth Configuration
-    GOOGLE_CLIENT_ID: getEnvVar('VITE_GOOGLE_CLIENT_ID'),
+    getDefaultConfig() {
+        return {
+            // Default/fallback configuration
+            GOOGLE_CLIENT_ID: undefined,
+            API_BASE_URL: 'http://localhost:3000/api',
+            ENVIRONMENT: 'development',
+            DEBUG_MODE: true,
+            LOG_LEVEL: 'debug'
+        };
+    }
+
+    detectEnvironment() {
+        if (typeof window === 'undefined') return 'development';
+
+        const hostname = window.location.hostname;
+        if (hostname.includes('staging')) return 'staging';
+        if (hostname === 'bingo.string.sg') return 'production';
+        return 'development';
+    }
+
+    async loadConfig() {
+        if (this.loaded) return this.config;
+
+        try {
+            const environment = this.detectEnvironment();
+
+            // In development, use build-time env vars as fallback
+            if (environment === 'development') {
+                const getEnvVar = (key, defaultValue = undefined) => {
+                    if (typeof import.meta !== 'undefined' && import.meta.env) {
+                        return import.meta.env[key] || defaultValue;
+                    }
+                    return defaultValue;
+                };
+
+                this.config = {
+                    ...this.config,
+                    GOOGLE_CLIENT_ID: getEnvVar('VITE_GOOGLE_CLIENT_ID'),
+                    API_BASE_URL: getEnvVar('VITE_API_BASE_URL', 'http://localhost:3000/api'),
+                    ENVIRONMENT: 'development'
+                };
+                this.loaded = true;
+                return this.config;
+            }
+
+            // For staging/production, fetch runtime config
+            const configResponse = await fetch(`/config-${environment}.json`);
+            if (!configResponse.ok) {
+                throw new Error(`Failed to load config for ${environment}`);
+            }
+
+            const runtimeConfig = await configResponse.json();
 
-    // API Configuration (for future backend integration)
-    API_BASE_URL: getEnvVar('VITE_API_BASE_URL', 'http://localhost:3000/api'),
+            // Map runtime config to our internal format
+            this.config = {
+                ...this.config,
+                GOOGLE_CLIENT_ID: runtimeConfig.googleClientId,
+                API_BASE_URL: runtimeConfig.apiBaseUrl,
+                ENVIRONMENT: runtimeConfig.environment,
+                DEBUG_MODE: runtimeConfig.debugMode,
+                LOG_LEVEL: runtimeConfig.logLevel
+            };
+
+            this.loaded = true;
+            console.log(`✅ Loaded ${environment} configuration`);
+
+        } catch (error) {
+            console.warn('⚠️ Failed to load runtime config, using defaults:', error);
+        }
+
+        return this.config;
+    }
+
+    get(key) {
+        return this.config[key];
+    }
+}
+
+// Create global config manager
+const configManager = new ConfigManager();
+
+// Export async function to get config
+export const getConfig = () => configManager.loadConfig();
+
+// Export legacy CONFIG object for backward compatibility
+export const CONFIG = {
+    // Legacy getters that will be populated after config loads
+    get GOOGLE_CLIENT_ID() { return configManager.get('GOOGLE_CLIENT_ID'); },
+    get API_BASE_URL() { return configManager.get('API_BASE_URL'); },
 
     // Session Configuration
     SESSION_TIMEOUT: 24 * 60 * 60 * 1000, // 24 hours
diff --git a/public/config-production.json b/public/config-production.json
new file mode 100644
index 0000000..a0c58cf
--- /dev/null
+++ b/public/config-production.json
@@ -0,0 +1,7 @@
+{
+  "environment": "production",
+  "googleClientId": "124864716521-psk1222tjg1uq20kh5q8b4ovlipt1sgl.apps.googleusercontent.com",
+  "apiBaseUrl": "https://your-production-backend.com/api",
+  "debugMode": false,
+  "logLevel": "error"
+}
\ No newline at end of file
diff --git a/public/config-staging.json b/public/config-staging.json
new file mode 100644
index 0000000..6878ab0
--- /dev/null
+++ b/public/config-staging.json
@@ -0,0 +1,7 @@
+{
+  "environment": "staging",
+  "googleClientId": "124864716521-psk1222tjg1uq20kh5q8b4ovlipt1sgl.apps.googleusercontent.com",
+  "apiBaseUrl": "http://localhost:3000/api",
+  "debugMode": true,
+  "logLevel": "debug"
+}
\ No newline at end of file