server.ts

// =============================================================================
// MINI API GATEWAY SERVER
// =============================================================================
// A lightweight API Gateway with proxy, authentication, and rate limiting
// Features:
//   - JWT/Bearer token authentication middleware
//   - IP-based rate limiting (configurable requests per minute)
//   - Request/Response transformation (field injection)
//   - Real-time monitoring dashboard with Tailwind CSS
//   - Request history and statistics tracking
//
// Technology Stack:
//   - Runtime: Node.js (via @elysiajs/node adapter)
//   - Framework: Elysia.js
//   - Frontend: Tailwind CSS (CDN)
//   - Target API: JSONPlaceholder (demo REST API)
// =============================================================================

import { Elysia } from 'elysia'
import { node } from '@elysiajs/node'
import { html } from '@elysiajs/html'

// =============================================================================
// CONFIGURATION
// =============================================================================

/**
 * Server port configuration
 * Can be overridden via PORT environment variable
 */
const PORT = Number(process.env.PORT) || 8080

/**
 * Rate limit threshold
 * Maximum number of requests allowed per IP per minute
 */
const RATE_LIMIT = 20

/**
 * Target API base URL
 * All /proxy/* requests will be forwarded to this endpoint
 */
const TARGET_API = 'https://jsonplaceholder.typicode.com'

/**
 * Authentication token for protected routes
 * In production, use proper JWT validation with secrets from env
 */
const AUTH_TOKEN = 'Bearer secret-token'

// =============================================================================
// IN-MEMORY DATA STORES
// =============================================================================
// Note: In production, use Redis for distributed rate limiting and persistence

/**
 * IP-based rate limiting store
 * Tracks request count and window start time per IP address
 */
interface RateLimitRecord {
  count: number
  ts: number
}
const ipMap = new Map<string, RateLimitRecord>()

/**
 * Request history for monitoring dashboard
 * Stores last N requests with metadata
 */
interface RequestLogEntry {
  id: number
  method: string
  path: string
  status: number
  duration: number
  timestamp: number
  ip: string
}
const requestHistory: RequestLogEntry[] = []
let requestIdCounter = 0

/**
 * Gateway statistics
 * Aggregated metrics for monitoring
 */
interface GatewayStats {
  totalRequests: number
  successCount: number
  errorCount: number
  rateLimitedCount: number
  avgResponseTime: number
  startTime: number
}
const stats: GatewayStats = {
  totalRequests: 0,
  successCount: 0,
  errorCount: 0,
  rateLimitedCount: 0,
  avgResponseTime: 0,
  startTime: Date.now()
}

// =============================================================================
// HELPER FUNCTIONS
// =============================================================================

/**
 * Extracts client IP address from request headers
 * Handles X-Forwarded-For header for proxied requests
 * 
 * @param request - Incoming request object
 * @returns Client IP address string
 */
const getClientIp = (request: Request): string => {
  const forwarded = request.headers.get('x-forwarded-for')
  return forwarded?.split(',')[0]?.trim() || 'localhost'
}

/**
 * Checks rate limit for given IP address
 * Implements sliding window rate limiting
 * 
 * @param ip - Client IP address
 * @returns Object with allowed status and remaining requests
 */
const checkRateLimit = (ip: string): { allowed: boolean; remaining: number; resetIn: number } => {
  const now = Date.now()
  const record = ipMap.get(ip) || { count: 0, ts: now }
  
  // Reset window if 60 seconds have passed
  if (now - record.ts > 60_000) {
    record.count = 0
    record.ts = now
  }
  
  const remaining = Math.max(0, RATE_LIMIT - record.count)
  const resetIn = Math.max(0, 60 - Math.floor((now - record.ts) / 1000))
  
  return {
    allowed: record.count < RATE_LIMIT,
    remaining,
    resetIn
  }
}

/**
 * Logs a request to history and updates statistics
 * 
 * @param entry - Request log entry to record
 */
const logRequest = (entry: Omit<RequestLogEntry, 'id'>): void => {
  // Add to history with unique ID
  requestHistory.unshift({ ...entry, id: ++requestIdCounter })
  
  // Keep only last 50 entries
  if (requestHistory.length > 50) {
    requestHistory.pop()
  }
  
  // Update statistics
  stats.totalRequests++
  if (entry.status >= 200 && entry.status < 400) {
    stats.successCount++
  } else if (entry.status === 429) {
    stats.rateLimitedCount++
  } else {
    stats.errorCount++
  }
  
  // Update average response time (rolling average)
  stats.avgResponseTime = Math.round(
    (stats.avgResponseTime * (stats.totalRequests - 1) + entry.duration) / stats.totalRequests
  )
}

// =============================================================================
// UI HTML TEMPLATE
// =============================================================================

/**
 * Dashboard UI HTML
 * Modern dark-themed interface with Tailwind CSS
 * Features: preset buttons, live stats, request history, cURL generator
 */
const dashboardHTML = `
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>API Gateway Dashboard</title>
  
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  
  <!-- Tailwind Configuration -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            dark: {
              800: '#1e293b',
              900: '#0f172a',
              950: '#020617'
            }
          }
        }
      }
    }
  </script>
  
  <!-- Custom Styles -->
  <style>
    .gradient-bg {
      background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    }
    .glass {
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(10px);
    }
    .method-GET { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
    .method-POST { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
    .method-PUT { background: rgba(234, 179, 8, 0.2); color: #eab308; }
    .method-PATCH { background: rgba(168, 85, 247, 0.2); color: #a855f7; }
    .method-DELETE { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
    .scrollbar-thin::-webkit-scrollbar { width: 6px; }
    .scrollbar-thin::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; }
    .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
  </style>
</head>
<body class="gradient-bg min-h-screen text-slate-200">
  
  <!-- ===================================================================== -->
  <!-- HEADER -->
  <!-- ===================================================================== -->
  <header class="border-b border-slate-800">
    <div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
      <div class="flex items-center gap-3">
        <span class="text-3xl">📡</span>
        <div>
          <h1 class="text-xl font-bold text-white">API Gateway</h1>
          <p class="text-sm text-slate-500">Proxy & Rate Limiter</p>
        </div>
      </div>
      <div class="flex items-center gap-4">
        <!-- Rate Limit Indicator -->
        <div id="rateLimitIndicator" class="flex items-center gap-2 px-3 py-1.5 bg-slate-800 rounded-full text-sm">
          <span class="text-slate-400">Rate Limit:</span>
          <span id="rateLimitCount" class="text-emerald-400 font-mono">${RATE_LIMIT}/${RATE_LIMIT}</span>
        </div>
        <!-- Status Badge -->
        <span class="flex items-center gap-2 px-3 py-1.5 bg-emerald-500/10 text-emerald-400 rounded-full text-sm">
          <span class="w-2 h-2 bg-emerald-400 rounded-full animate-pulse"></span>
          Online
        </span>
      </div>
    </div>
  </header>

  <!-- ===================================================================== -->
  <!-- MAIN CONTENT -->
  <!-- ===================================================================== -->
  <main class="max-w-7xl mx-auto px-6 py-8">
    
    <!-- Target API Info Banner -->
    <div class="mb-6 p-4 rounded-xl bg-indigo-500/10 border border-indigo-500/20">
      <div class="flex flex-wrap items-center gap-4 text-sm">
        <div class="flex items-center gap-2">
          <span class="text-slate-400">Target API:</span>
          <code class="text-indigo-300">${TARGET_API}</code>
        </div>
        <div class="text-slate-600">|</div>
        <div class="flex items-center gap-2">
          <span class="text-slate-400">Proxy Endpoint:</span>
          <code class="text-indigo-300">/proxy/*</code>
        </div>
        <div class="text-slate-600">|</div>
        <div class="flex items-center gap-2">
          <span class="text-slate-400">Auth:</span>
          <code class="text-indigo-300">Bearer secret-token</code>
        </div>
      </div>
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
      
      <!-- ================================================================= -->
      <!-- LEFT COLUMN: REQUEST BUILDER -->
      <!-- ================================================================= -->
      <div class="lg:col-span-2 space-y-6">
        
        <!-- Request Builder Card -->
        <div class="glass rounded-2xl border border-slate-800 p-6">
          <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <span>🚀</span> Send Request
          </h2>
          
          <!-- Quick Presets -->
          <div class="mb-5">
            <label class="block text-sm text-slate-500 mb-3">Quick Presets</label>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-2">
              <button onclick="loadPreset('getPosts')" 
                class="preset-btn px-3 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-all hover:scale-[1.02] text-left">
                <span class="method-GET px-1.5 py-0.5 rounded text-xs font-bold mr-1">GET</span>
                /posts
              </button>
              <button onclick="loadPreset('getPost')" 
                class="preset-btn px-3 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-all hover:scale-[1.02] text-left">
                <span class="method-GET px-1.5 py-0.5 rounded text-xs font-bold mr-1">GET</span>
                /posts/1
              </button>
              <button onclick="loadPreset('getUsers')" 
                class="preset-btn px-3 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-all hover:scale-[1.02] text-left">
                <span class="method-GET px-1.5 py-0.5 rounded text-xs font-bold mr-1">GET</span>
                /users
              </button>
              <button onclick="loadPreset('getComments')" 
                class="preset-btn px-3 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-all hover:scale-[1.02] text-left">
                <span class="method-GET px-1.5 py-0.5 rounded text-xs font-bold mr-1">GET</span>
                /posts/1/comments
              </button>
              <button onclick="loadPreset('createPost')" 
                class="preset-btn px-3 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-all hover:scale-[1.02] text-left">
                <span class="method-POST px-1.5 py-0.5 rounded text-xs font-bold mr-1">POST</span>
                /posts
              </button>
              <button onclick="loadPreset('updatePost')" 
                class="preset-btn px-3 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-all hover:scale-[1.02] text-left">
                <span class="method-PUT px-1.5 py-0.5 rounded text-xs font-bold mr-1">PUT</span>
                /posts/1
              </button>
              <button onclick="loadPreset('patchPost')" 
                class="preset-btn px-3 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-all hover:scale-[1.02] text-left">
                <span class="method-PATCH px-1.5 py-0.5 rounded text-xs font-bold mr-1">PATCH</span>
                /posts/1
              </button>
              <button onclick="loadPreset('deletePost')" 
                class="preset-btn px-3 py-2 text-sm bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-all hover:scale-[1.02] text-left">
                <span class="method-DELETE px-1.5 py-0.5 rounded text-xs font-bold mr-1">DEL</span>
                /posts/1
              </button>
            </div>
          </div>

          <!-- Method & Path Selection -->
          <div class="grid md:grid-cols-4 gap-4 mb-4">
            <div>
              <label class="block text-sm text-slate-500 mb-2">Method</label>
              <select id="method" onchange="updateCurlExample()"
                class="w-full px-4 py-2.5 bg-slate-900/50 border border-slate-700 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all">
                <option value="GET">GET</option>
                <option value="POST">POST</option>
                <option value="PUT">PUT</option>
                <option value="PATCH">PATCH</option>
                <option value="DELETE">DELETE</option>
              </select>
            </div>
            <div class="md:col-span-3">
              <label class="block text-sm text-slate-500 mb-2">Path</label>
              <div class="flex">
                <span class="px-4 py-2.5 bg-slate-800 border border-r-0 border-slate-700 rounded-l-xl text-slate-500 text-sm">/proxy/</span>
                <input type="text" id="path" value="posts" oninput="updateCurlExample()"
                  class="flex-1 px-4 py-2.5 bg-slate-900/50 border border-slate-700 rounded-r-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all font-mono">
              </div>
            </div>
          </div>

          <!-- Request Body -->
          <div class="mb-4" id="bodySection">
            <label class="block text-sm text-slate-500 mb-2">Request Body (JSON)</label>
            <textarea id="body" rows="4" oninput="updateCurlExample()"
              class="w-full px-4 py-3 bg-slate-900/50 border border-slate-700 rounded-xl text-white font-mono text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-all resize-none scrollbar-thin"
              placeholder="Optional JSON body for POST/PUT/PATCH requests"></textarea>
          </div>

          <!-- Action Buttons -->
          <div class="flex gap-3">
            <button onclick="sendRequest()" id="sendBtn"
              class="flex-1 py-3 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-indigo-600 hover:to-purple-600 text-white font-semibold rounded-xl transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-indigo-500/25 flex items-center justify-center gap-2">
              <span id="sendBtnText">Send Request</span>
              <span id="sendBtnSpinner" class="hidden">
                <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                </svg>
              </span>
            </button>
            <button onclick="clearAll()" 
              class="px-6 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl transition-colors">
              Clear
            </button>
          </div>
        </div>

        <!-- Response Panel -->
        <div id="responsePanel" class="glass rounded-2xl border border-slate-800 p-6 hidden">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-white flex items-center gap-2">
              <span>📥</span> Response
            </h2>
            <div class="flex items-center gap-3">
              <span id="responseDuration" class="text-sm text-slate-500"></span>
              <span id="statusBadge" class="px-3 py-1 rounded-full text-sm font-medium"></span>
            </div>
          </div>
          <pre id="responseBody" class="p-4 bg-slate-900/70 rounded-xl text-sm font-mono overflow-auto max-h-96 text-slate-300 scrollbar-thin"></pre>
        </div>
      </div>

      <!-- ================================================================= -->
      <!-- RIGHT COLUMN: STATS & TOOLS -->
      <!-- ================================================================= -->
      <div class="space-y-6">
        
        <!-- Statistics Card -->
        <div class="glass rounded-2xl border border-slate-800 p-6">
          <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <span>📊</span> Statistics
          </h2>
          <div class="grid grid-cols-2 gap-3">
            <div class="p-3 bg-slate-900/50 rounded-xl text-center">
              <div id="statTotal" class="text-2xl font-bold text-indigo-400">0</div>
              <div class="text-xs text-slate-500">Total</div>
            </div>
            <div class="p-3 bg-slate-900/50 rounded-xl text-center">
              <div id="statSuccess" class="text-2xl font-bold text-emerald-400">0</div>
              <div class="text-xs text-slate-500">Success</div>
            </div>
            <div class="p-3 bg-slate-900/50 rounded-xl text-center">
              <div id="statErrors" class="text-2xl font-bold text-red-400">0</div>
              <div class="text-xs text-slate-500">Errors</div>
            </div>
            <div class="p-3 bg-slate-900/50 rounded-xl text-center">
              <div id="statAvgTime" class="text-2xl font-bold text-amber-400">0</div>
              <div class="text-xs text-slate-500">Avg ms</div>
            </div>
          </div>
          <button onclick="refreshStats()" 
            class="w-full mt-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-sm transition-colors">
            ↻ Refresh Stats
          </button>
        </div>

        <!-- Request History -->
        <div class="glass rounded-2xl border border-slate-800 p-6">
          <h2 class="text-lg font-semibold text-white mb-4 flex items-center gap-2">
            <span>📋</span> Recent Requests
          </h2>
          <div id="historyList" class="space-y-2 max-h-48 overflow-y-auto scrollbar-thin">
            <div class="text-slate-500 text-sm text-center py-4">No requests yet</div>
          </div>
        </div>

        <!-- cURL Example -->
        <div class="glass rounded-2xl border border-slate-800 p-6">
          <h2 class="text-lg font-semibold text-white mb-3 flex items-center gap-2">
            <span>💻</span> cURL
            <span class="text-xs text-slate-500 font-normal ml-auto">Live Preview</span>
          </h2>
          <div class="relative">
            <pre id="curlExample" class="p-3 bg-slate-900/70 rounded-xl text-xs font-mono text-slate-400 overflow-x-auto whitespace-pre-wrap break-all max-h-40 scrollbar-thin"></pre>
            <button onclick="copyCurl()" id="copyBtn"
              class="absolute top-2 right-2 p-1.5 bg-slate-800 hover:bg-slate-700 rounded-lg text-slate-400 hover:text-white transition-colors text-sm">
              📋
            </button>
          </div>
        </div>

        <!-- Gateway Info -->
        <div class="glass rounded-2xl border border-slate-800 p-6">
          <h2 class="text-lg font-semibold text-white mb-3 flex items-center gap-2">
            <span>⚙️</span> Gateway Config
          </h2>
          <div class="space-y-2 text-sm">
            <div class="flex justify-between">
              <span class="text-slate-500">Rate Limit</span>
              <span class="text-slate-300">${RATE_LIMIT} req/min</span>
            </div>
            <div class="flex justify-between">
              <span class="text-slate-500">Target API</span>
              <span class="text-slate-300 truncate ml-2">jsonplaceholder</span>
            </div>
            <div class="flex justify-between">
              <span class="text-slate-500">Field Injection</span>
              <span class="text-emerald-400">Enabled</span>
            </div>
            <div class="flex justify-between">
              <span class="text-slate-500">Auth Required</span>
              <span class="text-emerald-400">Yes</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- ===================================================================== -->
  <!-- FOOTER -->
  <!-- ===================================================================== -->
  <footer class="border-t border-slate-800 mt-12">
    <div class="max-w-7xl mx-auto px-6 py-4 text-center text-sm text-slate-600">
      API Gateway • Built with Elysia + Node.js
    </div>
  </footer>

  <!-- ===================================================================== -->
  <!-- JAVASCRIPT -->
  <!-- ===================================================================== -->
  <script>
    // =========================================================================
    // PRESET CONFIGURATIONS
    // =========================================================================
    const presets = {
      // GET requests
      getPosts: { 
        method: 'GET', 
        path: 'posts', 
        body: null,
        description: 'Get all posts'
      },
      getPost: { 
        method: 'GET', 
        path: 'posts/1', 
        body: null,
        description: 'Get single post'
      },
      getUsers: { 
        method: 'GET', 
        path: 'users', 
        body: null,
        description: 'Get all users'
      },
      getComments: { 
        method: 'GET', 
        path: 'posts/1/comments',  // ✅ Fixed: proper nested resource path
        body: null,
        description: 'Get comments for post 1'
      },
      // POST request
      createPost: { 
        method: 'POST', 
        path: 'posts', 
        body: {
          title: 'Hello World',
          body: 'This is a test post created via API Gateway',
          userId: 1
        },
        description: 'Create new post'
      },
      // PUT request (full update)
      updatePost: { 
        method: 'PUT', 
        path: 'posts/1', 
        body: {
          id: 1,
          title: 'Updated Title',
          body: 'This post has been fully updated',
          userId: 1
        },
        description: 'Update entire post'
      },
      // PATCH request (partial update)
      patchPost: { 
        method: 'PATCH', 
        path: 'posts/1', 
        body: {
          title: 'Patched Title Only'
        },
        description: 'Partial post update'
      },
      // DELETE request
      deletePost: { 
        method: 'DELETE', 
        path: 'posts/1', 
        body: null,
        description: 'Delete post'
      }
    };

    // =========================================================================
    // UI FUNCTIONS
    // =========================================================================
    
    /**
     * Loads a preset configuration into the form
     */
    function loadPreset(name) {
      const preset = presets[name];
      document.getElementById('method').value = preset.method;
      document.getElementById('path').value = preset.path;
      document.getElementById('body').value = preset.body ? JSON.stringify(preset.body, null, 2) : '';
      updateBodyVisibility();
      updateCurlExample();
    }

    /**
     * Shows/hides body textarea based on HTTP method
     */
    function updateBodyVisibility() {
      const method = document.getElementById('method').value;
      const bodySection = document.getElementById('bodySection');
      const hasBody = ['POST', 'PUT', 'PATCH'].includes(method);
      bodySection.style.display = hasBody ? 'block' : 'none';
    }

    /**
     * Updates the cURL example based on current form values
     */
    function updateCurlExample() {
      const method = document.getElementById('method').value;
      const path = document.getElementById('path').value;
      const bodyText = document.getElementById('body').value.trim();
      
      // Methods that support request body
      const bodyMethods = ['POST', 'PUT', 'PATCH'];
      const hasBody = bodyMethods.includes(method);

      // Use origin for universal URL (works on localhost, render.com, etc.)
      const baseUrl = window.location.origin;
      
      // Start building cURL command
      let curl = \`curl -X \${method} \${baseUrl}/proxy/\${path}\`;
      
      // Only add Content-Type for methods with body
      if (hasBody) {
        curl += \` \\
      -H "Content-Type: application/json"\`;
      }
      
      // Always add Authorization
      curl += \` \\
      -H "Authorization: Bearer secret-token"\`;
      
      // Add body only for POST/PUT/PATCH with valid JSON
      if (hasBody && bodyText) {
        try {
          const body = JSON.parse(bodyText);
          curl += \` \\
      -d '\${JSON.stringify(body)}'\`;
        } catch {
          // Invalid JSON - don't add body
        }
      }
      
      document.getElementById('curlExample').textContent = curl;
    }

    /**
     * Sends the request to the API gateway
     */
    async function sendRequest() {
      const method = document.getElementById('method').value;
      const path = document.getElementById('path').value.trim();
      const bodyText = document.getElementById('body').value.trim();
      
      // Show loading state
      document.getElementById('sendBtnText').textContent = 'Sending...';
      document.getElementById('sendBtnSpinner').classList.remove('hidden');
      document.getElementById('sendBtn').disabled = true;
      
      // Methods that support request body
      const bodyMethods = ['POST', 'PUT', 'PATCH'];
      const hasBody = bodyMethods.includes(method);
      
      let body = null;
      if (hasBody && bodyText) {
        try {
          body = JSON.parse(bodyText);
        } catch (e) {
          showResponse(400, { error: 'Invalid JSON in request body' }, 0, false);
          resetSendButton();
          return;
        }
      }
      
      const startTime = performance.now();
      
      // Build headers - only add Content-Type if we have a body
      const headers = {
        'Authorization': 'Bearer secret-token'
      };
      
      if (hasBody && body) {
        headers['Content-Type'] = 'application/json';
      }
      
      try {
        const res = await fetch('/proxy/' + path, {
          method,
          headers,
          body: body ? JSON.stringify(body) : undefined
        });
        
        const duration = Math.round(performance.now() - startTime);
        const data = await res.json();
        showResponse(res.status, data, duration, res.ok);
        
        // Refresh stats and history
        setTimeout(() => {
          refreshStats();
          refreshHistory();
          updateRateLimitDisplay();
        }, 300);
        
      } catch (err) {
        showResponse(500, { error: err.message }, 0, false);
      }
      
      resetSendButton();
    }

    /**
     * Resets the send button state
     */
    function resetSendButton() {
      document.getElementById('sendBtnText').textContent = 'Send Request';
      document.getElementById('sendBtnSpinner').classList.add('hidden');
      document.getElementById('sendBtn').disabled = false;
    }

    /**
     * Displays the API response
     */
    function showResponse(status, data, duration, success) {
      document.getElementById('responsePanel').classList.remove('hidden');
      
      const badge = document.getElementById('statusBadge');
      badge.textContent = status;
      badge.className = 'px-3 py-1 rounded-full text-sm font-medium ' + 
        (success ? 'bg-emerald-500/20 text-emerald-400' : 'bg-red-500/20 text-red-400');
      
      document.getElementById('responseDuration').textContent = duration + 'ms';
      document.getElementById('responseBody').textContent = JSON.stringify(data, null, 2);
    }

    /**
     * Clears the form and response
     */
    function clearAll() {
      document.getElementById('responsePanel').classList.add('hidden');
      document.getElementById('path').value = 'posts';
      document.getElementById('method').value = 'GET';
      document.getElementById('body').value = '';
      updateBodyVisibility();
      updateCurlExample();
    }

    /**
     * Copies cURL to clipboard
     */
    function copyCurl() {
      const curl = document.getElementById('curlExample').textContent;
      navigator.clipboard.writeText(curl).then(() => {
        const btn = document.getElementById('copyBtn');
        btn.textContent = '✓';
        setTimeout(() => btn.textContent = '📋', 1500);
      });
    }

    // =========================================================================
    // DATA FETCHING
    // =========================================================================
    
    async function refreshStats() {
      try {
        const res = await fetch('/api/stats');
        const data = await res.json();
        document.getElementById('statTotal').textContent = data.totalRequests;
        document.getElementById('statSuccess').textContent = data.successCount;
        document.getElementById('statErrors').textContent = data.errorCount;
        document.getElementById('statAvgTime').textContent = data.avgResponseTime;
      } catch {}
    }

    async function refreshHistory() {
      try {
        const res = await fetch('/api/history');
        const data = await res.json();
        const list = document.getElementById('historyList');
        
        if (data.length === 0) {
          list.innerHTML = '<div class="text-slate-500 text-sm text-center py-4">No requests yet</div>';
          return;
        }
        
        list.innerHTML = data.slice(0, 10).map(req => \`
          <div class="flex items-center justify-between p-2 bg-slate-900/50 rounded-lg text-sm">
            <div class="flex items-center gap-2">
              <span class="method-\${req.method} px-1.5 py-0.5 rounded text-xs font-bold">\${req.method}</span>
              <span class="text-slate-400 truncate max-w-[100px]">/\${req.path}</span>
            </div>
            <div class="flex items-center gap-2">
              <span class="text-slate-500">\${req.duration}ms</span>
              <span class="\${req.status < 400 ? 'text-emerald-400' : 'text-red-400'}">\${req.status}</span>
            </div>
          </div>
        \`).join('');
      } catch {}
    }

    async function updateRateLimitDisplay() {
      try {
        const res = await fetch('/api/rate-limit');
        const data = await res.json();
        document.getElementById('rateLimitCount').textContent = \`\${data.remaining}/\${data.limit}\`;
        document.getElementById('rateLimitCount').className = 
          data.remaining < 5 ? 'text-red-400 font-mono' : 'text-emerald-400 font-mono';
      } catch {}
    }

    // =========================================================================
    // INITIALIZATION
    // =========================================================================
    
    // Set up event listeners
    document.getElementById('method').addEventListener('change', () => {
      updateBodyVisibility();
      updateCurlExample();
    });
    
    // Initial state
    updateBodyVisibility();
    updateCurlExample();
    refreshStats();
    refreshHistory();
    updateRateLimitDisplay();
    
    // Auto-refresh every 5 seconds
    setInterval(() => {
      refreshStats();
      refreshHistory();
      updateRateLimitDisplay();
    }, 5000);
  </script>
</body>
</html>
`

// =============================================================================
// APPLICATION SETUP
// =============================================================================

const app = new Elysia({ adapter: node() })
  .use(html())

  // ===========================================================================
  // PUBLIC ROUTES (No Authentication)
  // ===========================================================================
  
  /**
   * GET /
   * Dashboard UI - serves the monitoring and testing interface
   */
  .get('/', () => dashboardHTML)

  /**
   * GET /api/stats
   * Returns gateway statistics for the dashboard
   */
  .get('/api/stats', () => ({
    totalRequests: stats.totalRequests,
    successCount: stats.successCount,
    errorCount: stats.errorCount,
    rateLimitedCount: stats.rateLimitedCount,
    avgResponseTime: stats.avgResponseTime,
    uptime: Math.floor((Date.now() - stats.startTime) / 1000)
  }))

  /**
   * GET /api/history
   * Returns recent request history for the dashboard
   */
  .get('/api/history', () => requestHistory.slice(0, 20))

  /**
   * GET /api/rate-limit
   * Returns current rate limit status for the requesting IP
   */
  .get('/api/rate-limit', ({ request }) => {
    const ip = getClientIp(request)
    const status = checkRateLimit(ip)
    return {
      limit: RATE_LIMIT,
      remaining: status.remaining,
      resetIn: status.resetIn
    }
  })

  /**
   * GET /health
   * Health check endpoint for load balancers and monitoring
   */
  .get('/health', () => ({
    status: 'ok',
    uptime: process.uptime(),
    timestamp: new Date().toISOString()
  }))

  // ===========================================================================
  // PROTECTED PROXY ROUTES
  // ===========================================================================
  
  .group('/proxy', (app) =>
    app
      // -----------------------------------------------------------------------
      // Authentication Middleware
      // -----------------------------------------------------------------------
      // Validates Bearer token in Authorization header
      // Returns 401 Unauthorized if token is missing or invalid
      .onBeforeHandle(({ headers, set, request }) => {
        const token = headers['authorization']
        
        if (!token || token !== AUTH_TOKEN) {
          // Log failed auth attempt
          logRequest({
            method: request.method,
            path: 'auth-failed',
            status: 401,
            duration: 0,
            timestamp: Date.now(),
            ip: getClientIp(request)
          })
          
          set.status = 401
          return { error: 'Unauthorized', message: 'Valid Bearer token required' }
        }
      })

      // -----------------------------------------------------------------------
      // Rate Limiting Middleware
      // -----------------------------------------------------------------------
      // Implements sliding window rate limiting per IP address
      // Returns 429 Too Many Requests when limit exceeded
      .onBeforeHandle(({ request, set }) => {
        const ip = getClientIp(request)
        const now = Date.now()
        const record = ipMap.get(ip) || { count: 0, ts: now }

        // Reset counter if window has passed (60 seconds)
        if (now - record.ts > 60_000) {
          record.count = 0
          record.ts = now
        }

        // Increment request count
        record.count++
        ipMap.set(ip, record)

        // Check if rate limit exceeded
        if (record.count > RATE_LIMIT) {
          logRequest({
            method: request.method,
            path: 'rate-limited',
            status: 429,
            duration: 0,
            timestamp: Date.now(),
            ip
          })
          
          set.status = 429
          set.headers = {
            'X-RateLimit-Limit': String(RATE_LIMIT),
            'X-RateLimit-Remaining': '0',
            'X-RateLimit-Reset': String(Math.ceil((record.ts + 60_000) / 1000))
          }
          return { 
            error: 'Rate limit exceeded', 
            message: `Maximum ${RATE_LIMIT} requests per minute`,
            retryAfter: Math.ceil((record.ts + 60_000 - now) / 1000)
          }
        }
      })

      // -----------------------------------------------------------------------
      // Proxy Handler
      // -----------------------------------------------------------------------
      // Forwards all HTTP methods to target API
      // Safely handles any response type
      .all('/*', async ({ params, request, body, set }) => {
        const startTime = Date.now()
        const path = params['*']
        const url = `${TARGET_API}/${path}`
        const method = request.method
        const ip = getClientIp(request)

        // Methods that should NOT have a body or Content-Type header
        const noBodyMethods = ['GET', 'HEAD', 'OPTIONS', 'DELETE']
        const hasBody = !noBodyMethods.includes(method)

        // Prepare fetch options
        const fetchOptions: RequestInit = {
          method,
          headers: {
            'User-Agent': 'API-Gateway/1.0'
          }
        }

        // Only add Content-Type and body for methods that support it
        if (hasBody && body) {
          (fetchOptions.headers as Record<string, string>)['Content-Type'] = 'application/json'
          
          const enrichedBody = typeof body === 'object'
            ? { 
                ...(body as object), 
                _gateway: {
                  injected: true,
                  timestamp: new Date().toISOString(),
                  source: 'api-gateway'
                }
              }
            : body
          fetchOptions.body = JSON.stringify(enrichedBody)
        }

        let res: Response
        let responseText: string
        let duration: number

        try {
          // Forward request to target API
          res = await fetch(url, fetchOptions)
          duration = Date.now() - startTime
          
          // Always read as text first - safe for any response
          responseText = await res.text()
          
        } catch (error) {
          // Network error - target API unreachable
          duration = Date.now() - startTime
          const errorMessage = error instanceof Error ? error.message : 'Unknown error'
          
          logRequest({
            method,
            path,
            status: 502,
            duration,
            timestamp: Date.now(),
            ip
          })

          set.status = 502
          return { 
            error: 'Bad Gateway', 
            message: 'Failed to reach target API',
            details: errorMessage,
            target: url
          }
        }

        // Set rate limit headers
        const record = ipMap.get(ip)
        if (record) {
          set.headers = {
            'X-RateLimit-Limit': String(RATE_LIMIT),
            'X-RateLimit-Remaining': String(Math.max(0, RATE_LIMIT - record.count)),
            'X-Proxy-Duration': String(duration)
          }
        }

        // Parse response safely
        let data: any

        if (!responseText || responseText.trim() === '' || responseText.trim() === '{}') {
          // Empty or empty object response (common for DELETE)
          data = { 
            success: res.ok, 
            message: `${method} request completed successfully`,
            status: res.status,
            _gateway: { 
              empty: true,
              duration: `${duration}ms` 
            }
          }
        } else {
          // Try to parse as JSON
          try {
            data = JSON.parse(responseText)
          } catch {
            // Not valid JSON
            data = {
              success: res.ok,
              status: res.status,
              message: res.ok ? responseText : `Target API error: ${res.status}`,
              rawResponse: responseText.substring(0, 200),
              _gateway: { 
                jsonParseFailed: true,
                duration: `${duration}ms` 
              }
            }
          }
        }

        // Log request
        logRequest({
          method,
          path,
          status: res.status,
          duration,
          timestamp: Date.now(),
          ip
        })

        set.status = res.status
        return data
      })
  )

// =============================================================================
// SERVER STARTUP
// =============================================================================

app.listen(PORT, () => {
  console.log('')
  console.log('='.repeat(65))
  console.log('  📡 MINI API GATEWAY SERVER')
  console.log('='.repeat(65))
  console.log('')
  console.log('  🌐 SERVER')
  console.log('  ─'.repeat(32))
  console.log(`  URL:              http://localhost:${PORT}`)
  console.log('  Runtime:          Node.js via @elysiajs/node adapter')
  console.log('')
  console.log('  📍 ROUTES')
  console.log('  ─'.repeat(32))
  console.log('  GET  /                Dashboard UI (testing interface)')
  console.log('  GET  /health          Health check for load balancers')
  console.log('  GET  /api/stats       Gateway statistics (JSON)')
  console.log('  GET  /api/history     Recent request history (JSON)')
  console.log('  GET  /api/rate-limit  Current rate limit status (JSON)')
  console.log('  ALL  /proxy/*         Proxy to target API (protected)')
  console.log('')
  console.log('  ⚙️  CONFIGURATION')
  console.log('  ─'.repeat(32))
  console.log(`  Target API:       ${TARGET_API}`)
  console.log(`  Rate Limit:       ${RATE_LIMIT} requests/minute per IP`)
  console.log('  Auth Token:       Bearer secret-token')
  console.log('  Field Injection:  Enabled (_gateway object)')
  console.log('')
  console.log('  🔒 AUTHENTICATION')
  console.log('  ─'.repeat(32))
  console.log('  Header:           Authorization: Bearer secret-token')
  console.log('  Protected:        /proxy/* routes only')
  console.log('  Public:           /, /health, /api/* routes')
  console.log('')
  console.log('='.repeat(65))
  console.log('  Press Ctrl+C to stop')
  console.log('='.repeat(65))
  console.log('')
})