breakpilot-lehrer/website/app/admin/security/page.tsx

'use client'

/**
 * Security Dashboard Admin Page
 *
 * DevSecOps Dashboard with:
 * - Security scan results (Gitleaks, Semgrep, Bandit, Trivy, Grype)
 * - Vulnerability findings with severity levels
 * - Scan history and statistics
 * - Manual scan triggers
 */

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

interface Finding {
  id: string
  tool: string
  severity: string
  title: string
  message?: string
  file?: string
  line?: number
  found_at: string
}

interface SeveritySummary {
  critical: number
  high: number
  medium: number
  low: number
  info: number
  total: number
}

interface ToolStatus {
  name: string
  installed: boolean
  version?: string
  last_run?: string
  last_findings: number
}

interface HistoryItem {
  timestamp: string
  title: string
  description: string
  status: string
}

interface Metric {
  name: string
  value: number
  unit: string
  trend?: string
}

interface Container {
  name: string
  status: string
  health: string
  cpu_percent: number
  memory_mb: number
  uptime: string
}

type TabType = 'overview' | 'findings' | 'scans' | 'monitoring'

export default function SecurityPage() {
  const [activeTab, setActiveTab] = useState<TabType>('overview')
  const [summary, setSummary] = useState<SeveritySummary | null>(null)
  const [findings, setFindings] = useState<Finding[]>([])
  const [tools, setTools] = useState<ToolStatus[]>([])
  const [history, setHistory] = useState<HistoryItem[]>([])
  const [metrics, setMetrics] = useState<Metric[]>([])
  const [containers, setContainers] = useState<Container[]>([])
  const [loading, setLoading] = useState(true)
  const [scanLoading, setScanLoading] = useState(false)

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

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

  const loadData = async () => {
    setLoading(true)
    try {
      const [summaryRes, findingsRes, toolsRes, historyRes, metricsRes, containersRes] = await Promise.all([
        fetch(`${BACKEND_URL}/api/v1/security/summary`),
        fetch(`${BACKEND_URL}/api/v1/security/findings`),
        fetch(`${BACKEND_URL}/api/v1/security/tools`),
        fetch(`${BACKEND_URL}/api/v1/security/history`),
        fetch(`${BACKEND_URL}/api/v1/security/monitoring/metrics`),
        fetch(`${BACKEND_URL}/api/v1/security/monitoring/containers`),
      ])

      if (summaryRes.ok) setSummary(await summaryRes.json())
      if (findingsRes.ok) setFindings(await findingsRes.json())
      if (toolsRes.ok) setTools(await toolsRes.json())
      if (historyRes.ok) setHistory(await historyRes.json())
      if (metricsRes.ok) setMetrics(await metricsRes.json())
      if (containersRes.ok) setContainers(await containersRes.json())
    } catch (error) {
      console.error('Failed to load security data:', error)
    } finally {
      setLoading(false)
    }
  }

  const runScan = async (scanType: string) => {
    setScanLoading(true)
    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/security/scan/${scanType}`, {
        method: 'POST',
      })
      if (res.ok) {
        // Reload data after a short delay
        setTimeout(loadData, 2000)
      }
    } catch (error) {
      console.error('Scan failed:', error)
    } finally {
      setScanLoading(false)
    }
  }

  const getSeverityColor = (severity: string) => {
    switch (severity.toUpperCase()) {
      case 'CRITICAL': return 'bg-purple-100 text-purple-800 border-purple-200'
      case 'HIGH': return 'bg-red-100 text-red-800 border-red-200'
      case 'MEDIUM': return 'bg-yellow-100 text-yellow-800 border-yellow-200'
      case 'LOW': return 'bg-blue-100 text-blue-800 border-blue-200'
      default: return 'bg-gray-100 text-gray-800 border-gray-200'
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'success': return 'text-green-600'
      case 'warning': return 'text-yellow-600'
      case 'error': return 'text-red-600'
      default: return 'text-gray-600'
    }
  }

  const tabs = [
    { id: 'overview', name: 'Übersicht', icon: '📊' },
    { id: 'findings', name: 'Findings', icon: '🔍' },
    { id: 'scans', name: 'Scans', icon: '🛡️' },
    { id: 'monitoring', name: 'Monitoring', icon: '📈' },
  ]

  return (
    <AdminLayout title="Security Dashboard" description="DevSecOps & Vulnerability Management">
      {/* Tab Navigation */}
      <div className="mb-6 border-b border-gray-200">
        <nav className="flex gap-4">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id as TabType)}
              className={`py-3 px-4 text-sm font-medium border-b-2 transition-colors ${
                activeTab === tab.id
                  ? 'border-primary-600 text-primary-600'
                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
              }`}
            >
              <span className="mr-2">{tab.icon}</span>
              {tab.name}
            </button>
          ))}
        </nav>
      </div>

      {loading ? (
        <div className="flex items-center justify-center py-12">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-600"></div>
          <span className="ml-3 text-gray-600">Lade Sicherheitsdaten...</span>
        </div>
      ) : (
        <>
          {/* Overview Tab */}
          {activeTab === 'overview' && (
            <div className="space-y-6">
              {/* Severity Summary Cards */}
              <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                <div className="bg-purple-50 border border-purple-200 rounded-lg p-4">
                  <div className="text-3xl font-bold text-purple-700">{summary?.critical || 0}</div>
                  <div className="text-sm text-purple-600">Critical</div>
                </div>
                <div className="bg-red-50 border border-red-200 rounded-lg p-4">
                  <div className="text-3xl font-bold text-red-700">{summary?.high || 0}</div>
                  <div className="text-sm text-red-600">High</div>
                </div>
                <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
                  <div className="text-3xl font-bold text-yellow-700">{summary?.medium || 0}</div>
                  <div className="text-sm text-yellow-600">Medium</div>
                </div>
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <div className="text-3xl font-bold text-blue-700">{summary?.low || 0}</div>
                  <div className="text-sm text-blue-600">Low</div>
                </div>
                <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
                  <div className="text-3xl font-bold text-gray-700">{summary?.total || 0}</div>
                  <div className="text-sm text-gray-600">Total</div>
                </div>
              </div>

              {/* Tools Status */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-semibold mb-4">DevSecOps Tools</h3>
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                  {tools.map((tool) => (
                    <div key={tool.name} className={`p-4 rounded-lg border ${tool.installed ? 'bg-green-50 border-green-200' : 'bg-gray-50 border-gray-200'}`}>
                      <div className="flex items-center gap-2">
                        <span className={`w-2 h-2 rounded-full ${tool.installed ? 'bg-green-500' : 'bg-gray-400'}`}></span>
                        <span className="font-medium text-sm">{tool.name}</span>
                      </div>
                      {tool.version && <div className="text-xs text-gray-500 mt-1">{tool.version}</div>}
                    </div>
                  ))}
                </div>
              </div>

              {/* Recent History */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-semibold mb-4">Letzte Scans</h3>
                <div className="space-y-3">
                  {history.slice(0, 5).map((item, idx) => (
                    <div key={idx} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                      <div>
                        <div className={`font-medium ${getStatusColor(item.status)}`}>{item.title}</div>
                        <div className="text-sm text-gray-500">{item.description}</div>
                      </div>
                      <div className="text-sm text-gray-400">
                        {new Date(item.timestamp).toLocaleString('de-DE')}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* Findings Tab */}
          {activeTab === 'findings' && (
            <div className="bg-white rounded-lg shadow">
              <div className="p-4 border-b border-gray-200">
                <h3 className="text-lg font-semibold">Security Findings ({findings.length})</h3>
              </div>
              <div className="divide-y divide-gray-100">
                {findings.length === 0 ? (
                  <div className="p-8 text-center text-gray-500">
                    Keine Findings vorhanden. Starten Sie einen Scan.
                  </div>
                ) : (
                  findings.map((finding, idx) => (
                    <div key={idx} className="p-4 hover:bg-gray-50">
                      <div className="flex items-start gap-4">
                        <span className={`px-2 py-1 text-xs font-semibold rounded border ${getSeverityColor(finding.severity)}`}>
                          {finding.severity}
                        </span>
                        <div className="flex-1">
                          <div className="font-medium text-gray-900">{finding.title}</div>
                          <div className="text-sm text-gray-600 mt-1">{finding.message}</div>
                          <div className="flex gap-4 mt-2 text-xs text-gray-400">
                            <span>Tool: {finding.tool}</span>
                            {finding.file && <span>File: {finding.file}</span>}
                            {finding.line && <span>Line: {finding.line}</span>}
                          </div>
                        </div>
                      </div>
                    </div>
                  ))
                )}
              </div>
            </div>
          )}

          {/* Scans Tab */}
          {activeTab === 'scans' && (
            <div className="space-y-6">
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-semibold mb-4">Scan starten</h3>
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
                  {[
                    { type: 'secrets', name: 'Secrets', icon: '🔑', desc: 'Gitleaks' },
                    { type: 'sast', name: 'SAST', icon: '🔬', desc: 'Semgrep, Bandit' },
                    { type: 'deps', name: 'Dependencies', icon: '📦', desc: 'Trivy, Grype' },
                    { type: 'containers', name: 'Container', icon: '🐳', desc: 'Trivy Image' },
                    { type: 'sbom', name: 'SBOM', icon: '📋', desc: 'Syft' },
                    { type: 'all', name: 'Full Scan', icon: '🛡️', desc: 'Alle Tools' },
                  ].map((scan) => (
                    <button
                      key={scan.type}
                      onClick={() => runScan(scan.type)}
                      disabled={scanLoading}
                      className="p-4 border border-gray-200 rounded-lg hover:border-primary-400 hover:bg-primary-50 transition-colors disabled:opacity-50"
                    >
                      <div className="text-2xl mb-2">{scan.icon}</div>
                      <div className="font-medium text-sm">{scan.name}</div>
                      <div className="text-xs text-gray-500">{scan.desc}</div>
                    </button>
                  ))}
                </div>
                {scanLoading && (
                  <div className="mt-4 text-sm text-gray-600 flex items-center">
                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary-600 mr-2"></div>
                    Scan läuft...
                  </div>
                )}
              </div>

              {/* Scan History */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-semibold mb-4">Scan Historie</h3>
                <div className="space-y-3">
                  {history.map((item, idx) => (
                    <div key={idx} className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0">
                      <div className="flex items-center gap-3">
                        <span className={`w-2 h-2 rounded-full ${item.status === 'success' ? 'bg-green-500' : item.status === 'warning' ? 'bg-yellow-500' : 'bg-red-500'}`}></span>
                        <div>
                          <div className="font-medium">{item.title}</div>
                          <div className="text-sm text-gray-500">{item.description}</div>
                        </div>
                      </div>
                      <div className="text-sm text-gray-400">
                        {new Date(item.timestamp).toLocaleString('de-DE')}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* Monitoring Tab */}
          {activeTab === 'monitoring' && (
            <div className="space-y-6">
              {/* Metrics */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-semibold mb-4">System Metriken</h3>
                <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
                  {metrics.map((metric, idx) => (
                    <div key={idx} className="p-4 bg-gray-50 rounded-lg">
                      <div className="text-2xl font-bold text-gray-900">
                        {metric.value}{metric.unit && <span className="text-sm text-gray-500 ml-1">{metric.unit}</span>}
                      </div>
                      <div className="text-sm text-gray-600">{metric.name}</div>
                      {metric.trend && (
                        <div className={`text-xs mt-1 ${metric.trend === 'up' ? 'text-green-600' : metric.trend === 'down' ? 'text-red-600' : 'text-gray-500'}`}>
                          {metric.trend === 'up' ? '↑' : metric.trend === 'down' ? '↓' : '→'} {metric.trend}
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>

              {/* Containers */}
              <div className="bg-white rounded-lg shadow p-6">
                <h3 className="text-lg font-semibold mb-4">Container Status</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                  {containers.map((container, idx) => (
                    <div key={idx} className={`p-4 rounded-lg border-l-4 ${container.health === 'healthy' ? 'border-green-500 bg-green-50' : 'border-red-500 bg-red-50'}`}>
                      <div className="font-medium text-gray-900 truncate" title={container.name}>
                        {container.name.replace('breakpilot-pwa-', '')}
                      </div>
                      <div className="flex items-center gap-2 mt-2">
                        <span className={`w-2 h-2 rounded-full ${container.status === 'running' ? 'bg-green-500' : 'bg-red-500'}`}></span>
                        <span className="text-sm text-gray-600">{container.status}</span>
                      </div>
                      <div className="grid grid-cols-2 gap-2 mt-3 text-xs text-gray-500">
                        <div>CPU: {container.cpu_percent}%</div>
                        <div>RAM: {container.memory_mb}MB</div>
                      </div>
                      <div className="text-xs text-gray-400 mt-1">{container.uptime}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}
        </>
      )}

      {/* Refresh Button */}
      <div className="fixed bottom-6 right-6">
        <button
          onClick={loadData}
          className="bg-primary-600 text-white p-3 rounded-full shadow-lg hover:bg-primary-700 transition-colors"
          title="Daten aktualisieren"
        >
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
          </svg>
        </button>
      </div>
    </AdminLayout>
  )
}