'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 AdminLayout from '@/components/admin/AdminLayout'
import SystemInfoSection, { SYSTEM_INFO_CONFIGS } from '@/components/admin/SystemInfoSection'
import { useMiddleware } from './_components/useMiddleware'
import { TABS } from './_components/types'
import type { TabType } from './_components/types'
import OverviewTab from './_components/OverviewTab'
import RateLimitingTab from './_components/RateLimitingTab'
import SecurityTab from './_components/SecurityTab'
import LoggingTab from './_components/LoggingTab'
import EventsTab from './_components/EventsTab'

export default function MiddlewarePage() {
  const hook = useMiddleware()

  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={() => hook.setActiveTab(tab.id as TabType)}
              className={`py-2 px-1 border-b-2 font-medium text-sm ${
                hook.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>

      {hook.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>
      ) : (
        <>
          {hook.activeTab === 'overview' && <OverviewTab hook={hook} />}
          {hook.activeTab === 'rate-limiting' && <RateLimitingTab hook={hook} />}
          {hook.activeTab === 'security' && <SecurityTab hook={hook} />}
          {hook.activeTab === 'logging' && <LoggingTab hook={hook} />}
          {hook.activeTab === 'events' && <EventsTab hook={hook} />}
        </>
      )}

      {/* 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>
  )
}