breakpilot-pwa/website/app/admin/middleware/page.tsx

'use client'

/**
 * Middleware Configuration Admin Page
 *
 * Manage middleware settings for BreakPilot:
 * - Enable/disable middlewares
 * - Configure rate limits
 * - Manage IP whitelist/blacklist
 * - View middleware events and statistics
 */

import { useState, useEffect } from 'react'
import AdminLayout from '@/components/admin/AdminLayout'
import SystemInfoSection, { SYSTEM_INFO_CONFIGS } from '@/components/admin/SystemInfoSection'

interface MiddlewareConfig {
  id: string
  middleware_name: string
  enabled: boolean
  config: Record<string, any>
  updated_at: string | null
}

interface RateLimitIP {
  id: string
  ip_address: string
  list_type: 'whitelist' | 'blacklist'
  reason: string | null
  expires_at: string | null
  created_at: string
}

interface MiddlewareEvent {
  id: string
  middleware_name: string
  event_type: string
  ip_address: string | null
  user_id: string | null
  request_path: string | null
  request_method: string | null
  details: Record<string, any> | null
  created_at: string
}

interface MiddlewareStats {
  middleware_name: string
  total_events: number
  events_last_hour: number
  events_last_24h: number
  top_event_types: Array<{ event_type: string; count: number }>
  top_ips: Array<{ ip_address: string; count: number }>
}

type TabType = 'overview' | 'rate-limiting' | 'security' | 'logging' | 'events'

const MIDDLEWARE_INFO: Record<string, { name: string; description: string; icon: string }> = {
  request_id: {
    name: 'Request-ID',
    description: 'Generates unique identifiers for request tracing',
    icon: '🔑',
  },
  security_headers: {
    name: 'Security Headers',
    description: 'Adds security headers (HSTS, CSP, X-Frame-Options)',
    icon: '🛡️',
  },
  cors: {
    name: 'CORS',
    description: 'Cross-Origin Resource Sharing configuration',
    icon: '🌐',
  },
  rate_limiter: {
    name: 'Rate Limiter',
    description: 'Protects against abuse with request limits',
    icon: '⏱️',
  },
  pii_redactor: {
    name: 'PII Redactor',
    description: 'Redacts sensitive data from logs (DSGVO)',
    icon: '🔒',
  },
  input_gate: {
    name: 'Input Gate',
    description: 'Validates request body size and content types',
    icon: '🚧',
  },
  sdk_protection: {
    name: 'SDK Protection',
    description: 'Protects SDK endpoints from systematic enumeration (Anomaly-Score, Diversity, Burst, Sequential Detection)',
    icon: '🔰',
  },
}

export default function MiddlewarePage() {
  const [activeTab, setActiveTab] = useState<TabType>('overview')
  const [configs, setConfigs] = useState<MiddlewareConfig[]>([])
  const [ipList, setIpList] = useState<RateLimitIP[]>([])
  const [events, setEvents] = useState<MiddlewareEvent[]>([])
  const [stats, setStats] = useState<MiddlewareStats[]>([])
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [editingConfig, setEditingConfig] = useState<string | null>(null)
  const [newIP, setNewIP] = useState({ ip_address: '', list_type: 'whitelist', reason: '' })

  const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'

  useEffect(() => {
    loadData()
  }, [])

  const loadData = async () => {
    setLoading(true)
    try {
      const [configsRes, ipListRes, eventsRes, statsRes] = await Promise.all([
        fetch(`${BACKEND_URL}/api/admin/middleware`),
        fetch(`${BACKEND_URL}/api/admin/middleware/rate-limit/ip-list`),
        fetch(`${BACKEND_URL}/api/admin/middleware/events?limit=50`),
        fetch(`${BACKEND_URL}/api/admin/middleware/stats`),
      ])

      if (configsRes.ok) setConfigs(await configsRes.json())
      if (ipListRes.ok) setIpList(await ipListRes.json())
      if (eventsRes.ok) setEvents(await eventsRes.json())
      if (statsRes.ok) setStats(await statsRes.json())
    } catch (error) {
      console.error('Failed to load middleware data:', error)
    } finally {
      setLoading(false)
    }
  }

  const toggleMiddleware = async (name: string, enabled: boolean) => {
    setSaving(true)
    try {
      const res = await fetch(`${BACKEND_URL}/api/admin/middleware/${name}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ enabled }),
      })
      if (res.ok) {
        setConfigs(configs.map(c => c.middleware_name === name ? { ...c, enabled } : c))
      }
    } catch (error) {
      console.error('Failed to update middleware:', error)
    } finally {
      setSaving(false)
    }
  }

  const updateConfig = async (name: string, config: Record<string, any>) => {
    setSaving(true)
    try {
      const res = await fetch(`${BACKEND_URL}/api/admin/middleware/${name}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ config }),
      })
      if (res.ok) {
        const updated = await res.json()
        setConfigs(configs.map(c => c.middleware_name === name ? updated : c))
        setEditingConfig(null)
      }
    } catch (error) {
      console.error('Failed to update config:', error)
    } finally {
      setSaving(false)
    }
  }

  const addIP = async () => {
    if (!newIP.ip_address) return
    setSaving(true)
    try {
      const res = await fetch(`${BACKEND_URL}/api/admin/middleware/rate-limit/ip-list`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newIP),
      })
      if (res.ok) {
        const added = await res.json()
        setIpList([added, ...ipList])
        setNewIP({ ip_address: '', list_type: 'whitelist', reason: '' })
      }
    } catch (error) {
      console.error('Failed to add IP:', error)
    } finally {
      setSaving(false)
    }
  }

  const removeIP = async (id: string) => {
    setSaving(true)
    try {
      const res = await fetch(`${BACKEND_URL}/api/admin/middleware/rate-limit/ip-list/${id}`, {
        method: 'DELETE',
      })
      if (res.ok) {
        setIpList(ipList.filter(ip => ip.id !== id))
      }
    } catch (error) {
      console.error('Failed to remove IP:', error)
    } finally {
      setSaving(false)
    }
  }

  const getConfig = (name: string) => configs.find(c => c.middleware_name === name)
  const getStats = (name: string) => stats.find(s => s.middleware_name === name)

  const tabs = [
    { id: 'overview', label: 'Overview', icon: '📊' },
    { id: 'rate-limiting', label: 'Rate Limiting', icon: '⏱️' },
    { id: 'security', label: 'Security', icon: '🛡️' },
    { id: 'logging', label: 'Logging', icon: '📝' },
    { id: 'events', label: 'Events', icon: '📋' },
  ]

  return (
    <AdminLayout title="Middleware Configuration" description="Manage middleware settings for BreakPilot">
      {/* Tab Navigation */}
      <div className="border-b border-gray-200 mb-6">
        <nav className="-mb-px flex space-x-8">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as TabType)}
              className={`py-2 px-1 border-b-2 font-medium text-sm ${
                activeTab === tab.id
                  ? 'border-blue-500 text-blue-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <span className="mr-2">{tab.icon}</span>
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      {/* Test Wizard Link */}
      <div className="bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg p-4 mb-6 flex items-center justify-between">
        <div className="flex items-center">
          <span className="text-2xl mr-3">🧪</span>
          <div>
            <h3 className="font-medium text-blue-800">UI Test Wizard</h3>
            <p className="text-sm text-blue-600">
              Interaktives Testing mit Lernmaterial - Testen Sie alle Middleware-Komponenten Schritt fuer Schritt
            </p>
          </div>
        </div>
        <a
          href="/admin/middleware/test-wizard"
          className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium"
        >
          Wizard starten →
        </a>
      </div>

      {loading ? (
        <div className="text-center py-12">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
          <p className="mt-4 text-gray-500">Loading middleware configuration...</p>
        </div>
      ) : (
        <>
          {/* Overview Tab */}
          {activeTab === 'overview' && (
            <div className="space-y-6">
              <h3 className="text-lg font-medium">Middleware Status</h3>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {Object.entries(MIDDLEWARE_INFO).map(([key, info]) => {
                  const config = getConfig(key)
                  const mwStats = getStats(key)
                  return (
                    <div key={key} className="bg-white rounded-lg shadow p-4">
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center">
                          <span className="text-2xl mr-2">{info.icon}</span>
                          <h4 className="font-medium">{info.name}</h4>
                        </div>
                        <button
                          onClick={() => config && toggleMiddleware(key, !config.enabled)}
                          disabled={saving || !config}
                          className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
                            config?.enabled ? 'bg-green-500' : 'bg-gray-200'
                          }`}
                        >
                          <span
                            className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
                              config?.enabled ? 'translate-x-5' : 'translate-x-0'
                            }`}
                          />
                        </button>
                      </div>
                      <p className="text-sm text-gray-500 mb-3">{info.description}</p>
                      {mwStats && (
                        <div className="text-xs text-gray-400">
                          <span className="mr-3">Last hour: {mwStats.events_last_hour} events</span>
                          <span>24h: {mwStats.events_last_24h} events</span>
                        </div>
                      )}
                    </div>
                  )
                })}
              </div>

              {/* Quick Stats */}
              <div className="mt-8">
                <h3 className="text-lg font-medium mb-4">Activity Summary (24h)</h3>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                  {stats.map((s) => (
                    <div key={s.middleware_name} className="bg-gray-50 rounded-lg p-4">
                      <p className="text-sm text-gray-500">{MIDDLEWARE_INFO[s.middleware_name]?.name || s.middleware_name}</p>
                      <p className="text-2xl font-bold">{s.events_last_24h}</p>
                      <p className="text-xs text-gray-400">{s.events_last_hour} in last hour</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* Rate Limiting Tab */}
          {activeTab === 'rate-limiting' && (
            <div className="space-y-6">
              {/* Rate Limit Config */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium mb-4">Rate Limit Settings</h3>
                {(() => {
                  const config = getConfig('rate_limiter')
                  if (!config) return <p>Loading...</p>
                  return (
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700">IP Limit (req/min)</label>
                        <input
                          type="number"
                          value={config.config.ip_limit || 100}
                          onChange={(e) => {
                            const newConfig = { ...config.config, ip_limit: parseInt(e.target.value) }
                            updateConfig('rate_limiter', newConfig)
                          }}
                          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700">User Limit (req/min)</label>
                        <input
                          type="number"
                          value={config.config.user_limit || 500}
                          onChange={(e) => {
                            const newConfig = { ...config.config, user_limit: parseInt(e.target.value) }
                            updateConfig('rate_limiter', newConfig)
                          }}
                          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700">Auth Limit (req/min)</label>
                        <input
                          type="number"
                          value={config.config.auth_limit || 20}
                          onChange={(e) => {
                            const newConfig = { ...config.config, auth_limit: parseInt(e.target.value) }
                            updateConfig('rate_limiter', newConfig)
                          }}
                          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                        />
                      </div>
                    </div>
                  )
                })()}
              </div>

              {/* IP Whitelist/Blacklist */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium mb-4">IP Whitelist / Blacklist</h3>

                {/* Add IP Form */}
                <div className="flex gap-2 mb-4">
                  <input
                    type="text"
                    placeholder="IP Address (e.g., 192.168.1.1)"
                    value={newIP.ip_address}
                    onChange={(e) => setNewIP({ ...newIP, ip_address: e.target.value })}
                    className="flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                  />
                  <select
                    value={newIP.list_type}
                    onChange={(e) => setNewIP({ ...newIP, list_type: e.target.value as 'whitelist' | 'blacklist' })}
                    className="rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                  >
                    <option value="whitelist">Whitelist</option>
                    <option value="blacklist">Blacklist</option>
                  </select>
                  <input
                    type="text"
                    placeholder="Reason (optional)"
                    value={newIP.reason}
                    onChange={(e) => setNewIP({ ...newIP, reason: e.target.value })}
                    className="flex-1 rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                  />
                  <button
                    onClick={addIP}
                    disabled={saving || !newIP.ip_address}
                    className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
                  >
                    Add
                  </button>
                </div>

                {/* IP List Table */}
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">IP Address</th>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Reason</th>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Created</th>
                      <th className="px-4 py-2"></th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {ipList.length === 0 ? (
                      <tr>
                        <td colSpan={5} className="px-4 py-4 text-center text-gray-500">
                          No IPs in whitelist/blacklist
                        </td>
                      </tr>
                    ) : (
                      ipList.map((ip) => (
                        <tr key={ip.id}>
                          <td className="px-4 py-2 font-mono text-sm">{ip.ip_address}</td>
                          <td className="px-4 py-2">
                            <span className={`px-2 py-1 text-xs rounded-full ${
                              ip.list_type === 'whitelist' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                            }`}>
                              {ip.list_type}
                            </span>
                          </td>
                          <td className="px-4 py-2 text-sm text-gray-500">{ip.reason || '-'}</td>
                          <td className="px-4 py-2 text-sm text-gray-500">
                            {new Date(ip.created_at).toLocaleDateString()}
                          </td>
                          <td className="px-4 py-2">
                            <button
                              onClick={() => removeIP(ip.id)}
                              disabled={saving}
                              className="text-red-600 hover:text-red-800"
                            >
                              Remove
                            </button>
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* Security Tab */}
          {activeTab === 'security' && (
            <div className="space-y-6">
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium mb-4">Security Headers Configuration</h3>
                {(() => {
                  const config = getConfig('security_headers')
                  if (!config) return <p>Loading...</p>
                  return (
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-medium">HSTS (Strict-Transport-Security)</p>
                          <p className="text-sm text-gray-500">Force HTTPS connections</p>
                        </div>
                        <input
                          type="checkbox"
                          checked={config.config.hsts_enabled ?? true}
                          onChange={(e) => {
                            const newConfig = { ...config.config, hsts_enabled: e.target.checked }
                            updateConfig('security_headers', newConfig)
                          }}
                          className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                        />
                      </div>
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-medium">CSP (Content-Security-Policy)</p>
                          <p className="text-sm text-gray-500">Control resource loading</p>
                        </div>
                        <input
                          type="checkbox"
                          checked={config.config.csp_enabled ?? true}
                          onChange={(e) => {
                            const newConfig = { ...config.config, csp_enabled: e.target.checked }
                            updateConfig('security_headers', newConfig)
                          }}
                          className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                        />
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700">CSP Policy</label>
                        <textarea
                          value={config.config.csp_policy || "default-src 'self'"}
                          onChange={(e) => {
                            const newConfig = { ...config.config, csp_policy: e.target.value }
                            updateConfig('security_headers', newConfig)
                          }}
                          rows={3}
                          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
                        />
                      </div>
                    </div>
                  )
                })()}
              </div>

              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium mb-4">Input Gate Configuration</h3>
                {(() => {
                  const config = getConfig('input_gate')
                  if (!config) return <p>Loading...</p>
                  return (
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-sm font-medium text-gray-700">Max Body Size (bytes)</label>
                        <input
                          type="number"
                          value={config.config.max_body_size || 10485760}
                          onChange={(e) => {
                            const newConfig = { ...config.config, max_body_size: parseInt(e.target.value) }
                            updateConfig('input_gate', newConfig)
                          }}
                          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                        />
                        <p className="text-xs text-gray-500 mt-1">
                          {((config.config.max_body_size || 10485760) / 1024 / 1024).toFixed(1)} MB
                        </p>
                      </div>
                      <div>
                        <label className="block text-sm font-medium text-gray-700">Max File Size (bytes)</label>
                        <input
                          type="number"
                          value={config.config.max_file_size || 52428800}
                          onChange={(e) => {
                            const newConfig = { ...config.config, max_file_size: parseInt(e.target.value) }
                            updateConfig('input_gate', newConfig)
                          }}
                          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                        />
                        <p className="text-xs text-gray-500 mt-1">
                          {((config.config.max_file_size || 52428800) / 1024 / 1024).toFixed(1)} MB
                        </p>
                      </div>
                    </div>
                  )
                })()}
              </div>
            </div>
          )}

          {/* Logging Tab */}
          {activeTab === 'logging' && (
            <div className="space-y-6">
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium mb-4">PII Redaction Settings</h3>
                {(() => {
                  const config = getConfig('pii_redactor')
                  if (!config) return <p>Loading...</p>
                  const patterns = config.config.patterns || ['email', 'ip_v4', 'ip_v6', 'phone_de']
                  const allPatterns = ['email', 'ip_v4', 'ip_v6', 'phone_de', 'phone_intl', 'iban', 'uuid', 'name_prefix', 'student_id']
                  return (
                    <div className="space-y-4">
                      <p className="text-sm text-gray-500">
                        Select which PII patterns to redact from logs (DSGVO compliance)
                      </p>
                      <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                        {allPatterns.map((pattern) => (
                          <label key={pattern} className="flex items-center space-x-2">
                            <input
                              type="checkbox"
                              checked={patterns.includes(pattern)}
                              onChange={(e) => {
                                const newPatterns = e.target.checked
                                  ? [...patterns, pattern]
                                  : patterns.filter((p: string) => p !== pattern)
                                updateConfig('pii_redactor', { ...config.config, patterns: newPatterns })
                              }}
                              className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                            />
                            <span className="text-sm">{pattern.replace('_', ' ')}</span>
                          </label>
                        ))}
                      </div>
                    </div>
                  )
                })()}
              </div>

              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-medium mb-4">Request-ID Configuration</h3>
                {(() => {
                  const config = getConfig('request_id')
                  if (!config) return <p>Loading...</p>
                  return (
                    <div>
                      <label className="block text-sm font-medium text-gray-700">Header Name</label>
                      <input
                        type="text"
                        value={config.config.header_name || 'X-Request-ID'}
                        onChange={(e) => {
                          updateConfig('request_id', { ...config.config, header_name: e.target.value })
                        }}
                        className="mt-1 block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                      />
                    </div>
                  )
                })()}
              </div>
            </div>
          )}

          {/* Events Tab */}
          {activeTab === 'events' && (
            <div className="space-y-6">
              <div className="bg-white rounded-lg shadow overflow-hidden">
                <div className="px-4 py-3 border-b border-gray-200 flex justify-between items-center">
                  <h3 className="text-lg font-medium">Recent Middleware Events</h3>
                  <button
                    onClick={loadData}
                    className="text-sm text-blue-600 hover:text-blue-800"
                  >
                    Refresh
                  </button>
                </div>
                <table className="min-w-full divide-y divide-gray-200">
                  <thead className="bg-gray-50">
                    <tr>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Time</th>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Middleware</th>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Event</th>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Path</th>
                    </tr>
                  </thead>
                  <tbody className="bg-white divide-y divide-gray-200">
                    {events.length === 0 ? (
                      <tr>
                        <td colSpan={5} className="px-4 py-4 text-center text-gray-500">
                          No events recorded yet
                        </td>
                      </tr>
                    ) : (
                      events.map((event) => (
                        <tr key={event.id}>
                          <td className="px-4 py-2 text-sm text-gray-500">
                            {new Date(event.created_at).toLocaleString()}
                          </td>
                          <td className="px-4 py-2">
                            <span className="text-sm font-medium">
                              {MIDDLEWARE_INFO[event.middleware_name]?.name || event.middleware_name}
                            </span>
                          </td>
                          <td className="px-4 py-2">
                            <span className={`px-2 py-1 text-xs rounded-full ${
                              event.event_type.includes('blocked') || event.event_type.includes('exceeded')
                                ? 'bg-red-100 text-red-800'
                                : event.event_type.includes('add') || event.event_type.includes('changed')
                                ? 'bg-blue-100 text-blue-800'
                                : 'bg-gray-100 text-gray-800'
                            }`}>
                              {event.event_type}
                            </span>
                          </td>
                          <td className="px-4 py-2 font-mono text-sm text-gray-500">
                            {event.ip_address || '-'}
                          </td>
                          <td className="px-4 py-2 text-sm text-gray-500 truncate max-w-xs">
                            {event.request_path || '-'}
                          </td>
                        </tr>
                      ))
                    )}
                  </tbody>
                </table>
              </div>
            </div>
          )}
        </>
      )}

      {/* System Info Section - For Internal/External Audits */}
      <div className="mt-8 border-t border-slate-200 pt-8">
        <SystemInfoSection config={SYSTEM_INFO_CONFIGS.middleware} />
      </div>
    </AdminLayout>
  )
}