'use client'

/**
 * CI/CD Dashboard
 *
 * Zentrale Uebersicht fuer:
 * - Gitea Actions Pipelines
 * - Runner Status
 * - Container Deployments
 * - Pipeline Konfiguration
 */

import { useState, useEffect, useCallback } from 'react'
import { PagePurpose } from '@/components/common/PagePurpose'
import { DevOpsPipelineSidebarResponsive } from '@/components/infrastructure/DevOpsPipelineSidebar'

// ============================================================================
// Types
// ============================================================================

interface PipelineStatus {
  gitea_connected: boolean
  gitea_url: string
  last_sbom_update: string | null
  total_runs: number
  successful_runs: number
  failed_runs: number
}

interface PipelineRun {
  id: string
  workflow: string
  branch: string
  commit_sha: string
  status: 'success' | 'failed' | 'running' | 'pending'
  started_at: string
  finished_at: string | null
  duration_seconds: number | null
}

interface ContainerInfo {
  id: string
  name: string
  image: string
  status: string
  state: string
  created: string
  ports: string[]
  cpu_percent: number
  memory_usage: string
  memory_limit: string
  memory_percent: number
  network_rx: string
  network_tx: string
}

interface SystemStats {
  hostname: string
  platform: string
  arch: string
  uptime: number
  cpu: {
    model: string
    cores: number
    usage_percent: number
  }
  memory: {
    total: string
    used: string
    free: string
    usage_percent: number
  }
  disk: {
    total: string
    used: string
    free: string
    usage_percent: number
  }
}

interface DockerStats {
  containers: ContainerInfo[]
  total_containers: number
  running_containers: number
  stopped_containers: number
}

type TabType = 'overview' | 'woodpecker' | 'pipelines' | 'deployments' | 'setup' | 'scheduler'

// Woodpecker Types
interface WoodpeckerStep {
  name: string
  state: 'pending' | 'running' | 'success' | 'failure' | 'skipped'
  exit_code: number
  error?: string
}

interface WoodpeckerPipeline {
  id: number
  number: number
  status: 'pending' | 'running' | 'success' | 'failure' | 'error'
  event: string
  branch: string
  commit: string
  message: string
  author: string
  created: number
  started: number
  finished: number
  steps: WoodpeckerStep[]
  errors?: string[]
}

interface WoodpeckerStatus {
  status: 'online' | 'offline'
  pipelines: WoodpeckerPipeline[]
  lastUpdate: string
  error?: string
}

// ============================================================================
// Helper Components
// ============================================================================

function ProgressBar({ percent, color = 'blue' }: { percent: number; color?: string }) {
  const getColor = () => {
    if (percent > 90) return 'bg-red-500'
    if (percent > 70) return 'bg-yellow-500'
    if (color === 'green') return 'bg-green-500'
    if (color === 'purple') return 'bg-purple-500'
    return 'bg-blue-500'
  }

  return (
    <div className="w-full bg-slate-200 rounded-full h-2">
      <div
        className={`h-2 rounded-full transition-all duration-300 ${getColor()}`}
        style={{ width: `${Math.min(percent, 100)}%` }}
      />
    </div>
  )
}

function formatUptime(seconds: number): string {
  const days = Math.floor(seconds / 86400)
  const hours = Math.floor((seconds % 86400) / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  if (days > 0) return `${days}d ${hours}h ${minutes}m`
  if (hours > 0) return `${hours}h ${minutes}m`
  return `${minutes}m`
}

// ============================================================================
// Main Component
// ============================================================================

export default function CICDPage() {
  const [activeTab, setActiveTab] = useState<TabType>('overview')

  // Pipeline State
  const [pipelineStatus, setPipelineStatus] = useState<PipelineStatus | null>(null)
  const [pipelineHistory, setPipelineHistory] = useState<PipelineRun[]>([])
  const [triggeringPipeline, setTriggeringPipeline] = useState(false)

  // Container State
  const [systemStats, setSystemStats] = useState<SystemStats | null>(null)
  const [dockerStats, setDockerStats] = useState<DockerStats | null>(null)
  const [containerFilter, setContainerFilter] = useState<'all' | 'running' | 'stopped'>('all')
  const [actionLoading, setActionLoading] = useState<string | null>(null)

  // Woodpecker State
  const [woodpeckerStatus, setWoodpeckerStatus] = useState<WoodpeckerStatus | null>(null)
  const [triggeringWoodpecker, setTriggeringWoodpecker] = useState(false)

  // General State
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [message, setMessage] = useState<string | null>(null)

  const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || ''

  // ============================================================================
  // Data Loading
  // ============================================================================

  const loadPipelineData = useCallback(async () => {
    try {
      const [statusRes, historyRes] = await Promise.all([
        fetch(`${BACKEND_URL}/api/v1/security/sbom/pipeline/status`),
        fetch(`${BACKEND_URL}/api/v1/security/sbom/pipeline/history`),
      ])

      if (statusRes.ok) {
        setPipelineStatus(await statusRes.json())
      }
      if (historyRes.ok) {
        setPipelineHistory(await historyRes.json())
      }
    } catch (err) {
      console.error('Failed to load pipeline data:', err)
    }
  }, [BACKEND_URL])

  const loadContainerData = useCallback(async () => {
    try {
      const response = await fetch('/api/admin/infrastructure/mac-mini')
      if (response.ok) {
        const data = await response.json()
        setSystemStats(data.system)
        setDockerStats(data.docker)
      }
    } catch (err) {
      console.error('Failed to load container data:', err)
    }
  }, [])

  const loadWoodpeckerData = useCallback(async () => {
    try {
      const response = await fetch('/api/admin/infrastructure/woodpecker?limit=10')
      if (response.ok) {
        const data = await response.json()
        setWoodpeckerStatus(data)
      }
    } catch (err) {
      console.error('Failed to load Woodpecker data:', err)
      setWoodpeckerStatus({
        status: 'offline',
        pipelines: [],
        lastUpdate: new Date().toISOString(),
        error: 'Verbindung fehlgeschlagen'
      })
    }
  }, [])

  const triggerWoodpeckerPipeline = async () => {
    setTriggeringWoodpecker(true)
    setMessage(null)
    try {
      const response = await fetch('/api/admin/infrastructure/woodpecker', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ branch: 'main' })
      })
      if (response.ok) {
        const result = await response.json()
        setMessage(`Woodpecker Pipeline #${result.pipeline?.number || '?'} gestartet!`)
        setTimeout(loadWoodpeckerData, 2000)
        setTimeout(loadWoodpeckerData, 5000)
      } else {
        setError('Pipeline-Start fehlgeschlagen')
      }
    } catch (err) {
      setError('Pipeline konnte nicht gestartet werden')
    } finally {
      setTriggeringWoodpecker(false)
    }
  }

  const loadAllData = useCallback(async () => {
    setLoading(true)
    setError(null)
    await Promise.all([loadPipelineData(), loadContainerData(), loadWoodpeckerData()])
    setLoading(false)
  }, [loadPipelineData, loadContainerData, loadWoodpeckerData])

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

  // Auto-refresh every 30 seconds
  useEffect(() => {
    const interval = setInterval(loadAllData, 30000)
    return () => clearInterval(interval)
  }, [loadAllData])

  // ============================================================================
  // Actions
  // ============================================================================

  const triggerPipeline = async () => {
    setTriggeringPipeline(true)
    try {
      const response = await fetch(`${BACKEND_URL}/api/v1/security/sbom/pipeline/trigger`, {
        method: 'POST',
      })
      if (response.ok) {
        setMessage('Pipeline gestartet!')
        setTimeout(loadPipelineData, 2000)
        setTimeout(loadPipelineData, 5000)
      }
    } catch (err) {
      setError('Pipeline-Trigger fehlgeschlagen')
    } finally {
      setTriggeringPipeline(false)
    }
  }

  const containerAction = async (containerId: string, action: 'start' | 'stop' | 'restart') => {
    setActionLoading(`${containerId}-${action}`)
    setMessage(null)

    try {
      const response = await fetch('/api/admin/infrastructure/mac-mini', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ container_id: containerId, action }),
      })

      if (!response.ok) {
        throw new Error('Aktion fehlgeschlagen')
      }

      setMessage(`Container ${action} erfolgreich`)
      setTimeout(loadContainerData, 1000)
      setTimeout(loadContainerData, 3000)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Fehler')
    } finally {
      setActionLoading(null)
    }
  }

  // ============================================================================
  // Helpers
  // ============================================================================

  const getStateColor = (state: string) => {
    switch (state) {
      case 'running': return 'bg-green-100 text-green-800'
      case 'exited':
      case 'dead': return 'bg-red-100 text-red-800'
      case 'paused': return 'bg-yellow-100 text-yellow-800'
      case 'restarting': return 'bg-blue-100 text-blue-800'
      default: return 'bg-slate-100 text-slate-600'
    }
  }

  const filteredContainers = dockerStats?.containers.filter(c => {
    if (containerFilter === 'all') return true
    if (containerFilter === 'running') return c.state === 'running'
    if (containerFilter === 'stopped') return c.state !== 'running'
    return true
  }) || []

  // ============================================================================
  // Render
  // ============================================================================

  return (
    <div>
      <PagePurpose
        title="CI/CD Dashboard"
        purpose="Zentrale Uebersicht fuer Gitea Actions Pipelines, Runner-Status und Container-Deployments. Starten Sie Pipelines manuell und verwalten Sie Docker-Container."
        audience={['DevOps', 'Entwickler']}
        architecture={{
          services: ['Gitea Actions', 'act_runner', 'Docker'],
          databases: [],
        }}
        relatedPages={[
          { name: 'SBOM', href: '/infrastructure/sbom', description: 'Software Bill of Materials' },
          { name: 'Security', href: '/infrastructure/security', description: 'DevSecOps Dashboard' },
          { name: 'Test Quality', href: '/ai/test-quality', description: 'BQAS Test Dashboard' },
        ]}
        collapsible={true}
        defaultCollapsed={true}
      />

      {/* DevOps Pipeline Sidebar */}
      <DevOpsPipelineSidebarResponsive currentTool="ci-cd" />

      {/* Messages */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-xl p-4 mb-6">
          <div className="flex items-center gap-2 text-red-800">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span className="font-medium">{error}</span>
          </div>
        </div>
      )}

      {message && (
        <div className="bg-green-50 border border-green-200 rounded-xl p-4 mb-6">
          <div className="flex items-center gap-2 text-green-800">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            <span className="font-medium">{message}</span>
          </div>
        </div>
      )}

      {/* Main Content */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        {/* Tabs */}
        <div className="flex border-b border-slate-200">
          <nav className="flex">
            {[
              { id: 'overview', name: 'Uebersicht', icon: (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
              )},
              { id: 'woodpecker', name: 'Woodpecker CI', icon: (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
              )},
              { id: 'pipelines', name: 'Gitea Pipelines', icon: (
                <svg className="w-5 h-5" 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>
              )},
              { id: 'deployments', name: 'Deployments', icon: (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
                </svg>
              )},
              { id: 'setup', name: 'Konfiguration', icon: (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
              )},
              { id: 'scheduler', name: 'BQAS Scheduler', icon: (
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              )},
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id as TabType)}
                className={`px-6 py-4 text-sm font-medium border-b-2 transition-colors flex items-center gap-2 ${
                  activeTab === tab.id
                    ? 'border-orange-500 text-orange-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                {tab.icon}
                {tab.name}
              </button>
            ))}
          </nav>
        </div>

        {/* Tab Content */}
        <div className="p-6">
          {loading ? (
            <div className="flex justify-center py-12">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-orange-600" />
            </div>
          ) : (
            <>
              {/* ================================================================ */}
              {/* Overview Tab */}
              {/* ================================================================ */}
              {activeTab === 'overview' && (
                <div className="space-y-6">
                  {/* Woodpecker CI Status - Prominent */}
                  <div className={`p-4 rounded-xl border-2 ${
                    woodpeckerStatus?.status === 'online'
                      ? woodpeckerStatus.pipelines?.[0]?.status === 'success'
                        ? 'border-green-300 bg-green-50'
                        : woodpeckerStatus.pipelines?.[0]?.status === 'failure' || woodpeckerStatus.pipelines?.[0]?.status === 'error'
                        ? 'border-red-300 bg-red-50'
                        : woodpeckerStatus.pipelines?.[0]?.status === 'running'
                        ? 'border-blue-300 bg-blue-50'
                        : 'border-slate-300 bg-slate-50'
                      : 'border-red-300 bg-red-50'
                  }`}>
                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-4">
                        <div className={`p-3 rounded-lg ${
                          woodpeckerStatus?.status === 'online'
                            ? woodpeckerStatus.pipelines?.[0]?.status === 'success'
                              ? 'bg-green-100'
                              : woodpeckerStatus.pipelines?.[0]?.status === 'failure' || woodpeckerStatus.pipelines?.[0]?.status === 'error'
                              ? 'bg-red-100'
                              : 'bg-blue-100'
                            : 'bg-red-100'
                        }`}>
                          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                          </svg>
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            <h3 className="font-semibold text-slate-900">Woodpecker CI</h3>
                            <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${
                              woodpeckerStatus?.status === 'online' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
                            }`}>
                              {woodpeckerStatus?.status === 'online' ? 'Online' : 'Offline'}
                            </span>
                          </div>
                          {woodpeckerStatus?.pipelines?.[0] && (
                            <p className="text-sm text-slate-600 mt-1">
                              Pipeline #{woodpeckerStatus.pipelines[0].number}: {' '}
                              <span className={`font-medium ${
                                woodpeckerStatus.pipelines[0].status === 'success' ? 'text-green-600' :
                                woodpeckerStatus.pipelines[0].status === 'failure' || woodpeckerStatus.pipelines[0].status === 'error' ? 'text-red-600' :
                                woodpeckerStatus.pipelines[0].status === 'running' ? 'text-blue-600' : 'text-slate-600'
                              }`}>
                                {woodpeckerStatus.pipelines[0].status}
                              </span>
                              {' '}auf {woodpeckerStatus.pipelines[0].branch}
                            </p>
                          )}
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <button
                          onClick={() => setActiveTab('woodpecker')}
                          className="px-3 py-1.5 text-sm border border-slate-300 text-slate-700 rounded-lg hover:bg-white"
                        >
                          Details
                        </button>
                        <button
                          onClick={triggerWoodpeckerPipeline}
                          disabled={triggeringWoodpecker}
                          className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 flex items-center gap-1"
                        >
                          {triggeringWoodpecker ? (
                            <div className="animate-spin rounded-full h-3 w-3 border-b-2 border-white" />
                          ) : (
                            <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                            </svg>
                          )}
                          Starten
                        </button>
                      </div>
                    </div>
                    {/* Failed steps preview */}
                    {woodpeckerStatus?.pipelines?.[0]?.steps?.some(s => s.state === 'failure') && (
                      <div className="mt-3 pt-3 border-t border-red-200">
                        <p className="text-xs font-medium text-red-700 mb-2">Fehlgeschlagene Steps:</p>
                        <div className="flex flex-wrap gap-2">
                          {woodpeckerStatus.pipelines[0].steps.filter(s => s.state === 'failure').map((step, i) => (
                            <span key={i} className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded">
                              {step.name}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>

                  {/* Status Cards */}
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div className={`p-4 rounded-lg ${pipelineStatus?.gitea_connected ? 'bg-green-50' : 'bg-yellow-50'}`}>
                      <div className="flex items-center gap-2 mb-2">
                        <span className={`w-3 h-3 rounded-full ${pipelineStatus?.gitea_connected ? 'bg-green-500' : 'bg-yellow-500'}`}></span>
                        <span className="text-sm font-medium">Gitea Status</span>
                      </div>
                      <p className={`text-lg font-bold ${pipelineStatus?.gitea_connected ? 'text-green-700' : 'text-yellow-700'}`}>
                        {pipelineStatus?.gitea_connected ? 'Verbunden' : 'Nicht verbunden'}
                      </p>
                      <p className="text-xs text-slate-500">http://macmini:3003</p>
                    </div>

                    <div className="bg-blue-50 p-4 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <svg className="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                        </svg>
                        <span className="text-sm font-medium">Pipeline Runs</span>
                      </div>
                      <p className="text-lg font-bold text-blue-700">{pipelineStatus?.total_runs || 0}</p>
                      <p className="text-xs text-slate-500">{pipelineStatus?.successful_runs || 0} erfolgreich</p>
                    </div>

                    <div className="bg-purple-50 p-4 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <svg className="w-4 h-4 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
                        </svg>
                        <span className="text-sm font-medium">Container</span>
                      </div>
                      <p className="text-lg font-bold text-purple-700">{dockerStats?.running_containers || 0}</p>
                      <p className="text-xs text-slate-500">von {dockerStats?.total_containers || 0} laufend</p>
                    </div>

                    <div className="bg-slate-50 p-4 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <svg className="w-4 h-4 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span className="text-sm font-medium">Letztes Update</span>
                      </div>
                      <p className="text-lg font-bold text-slate-700">
                        {pipelineStatus?.last_sbom_update ? new Date(pipelineStatus.last_sbom_update).toLocaleDateString('de-DE') : 'Nie'}
                      </p>
                      <p className="text-xs text-slate-500">
                        {pipelineStatus?.last_sbom_update ? new Date(pipelineStatus.last_sbom_update).toLocaleTimeString('de-DE') : '-'}
                      </p>
                    </div>
                  </div>

                  {/* System Resources */}
                  {systemStats && (
                    <div className="bg-slate-50 rounded-lg p-4">
                      <h3 className="font-medium text-slate-800 mb-4 flex items-center gap-2">
                        <svg className="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
                        </svg>
                        Server Ressourcen ({systemStats.hostname})
                      </h3>
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div className="bg-white rounded-lg p-3">
                          <div className="flex justify-between mb-2">
                            <span className="text-sm text-slate-600">CPU</span>
                            <span className={`font-bold ${systemStats.cpu.usage_percent > 80 ? 'text-red-600' : 'text-slate-900'}`}>
                              {systemStats.cpu.usage_percent.toFixed(1)}%
                            </span>
                          </div>
                          <ProgressBar percent={systemStats.cpu.usage_percent} />
                        </div>
                        <div className="bg-white rounded-lg p-3">
                          <div className="flex justify-between mb-2">
                            <span className="text-sm text-slate-600">RAM</span>
                            <span className={`font-bold ${systemStats.memory.usage_percent > 80 ? 'text-red-600' : 'text-slate-900'}`}>
                              {systemStats.memory.usage_percent.toFixed(1)}%
                            </span>
                          </div>
                          <ProgressBar percent={systemStats.memory.usage_percent} color="purple" />
                        </div>
                        <div className="bg-white rounded-lg p-3">
                          <div className="flex justify-between mb-2">
                            <span className="text-sm text-slate-600">Disk</span>
                            <span className={`font-bold ${systemStats.disk.usage_percent > 80 ? 'text-red-600' : 'text-slate-900'}`}>
                              {systemStats.disk.usage_percent.toFixed(1)}%
                            </span>
                          </div>
                          <ProgressBar percent={systemStats.disk.usage_percent} color="green" />
                        </div>
                      </div>
                    </div>
                  )}

                  {/* Recent Pipeline Runs */}
                  {pipelineHistory.length > 0 && (
                    <div className="bg-slate-50 rounded-lg p-4">
                      <h3 className="font-medium text-slate-800 mb-3">Letzte Pipeline Runs</h3>
                      <div className="space-y-2">
                        {pipelineHistory.slice(0, 5).map((run) => (
                          <div key={run.id} className="flex items-center justify-between bg-white p-3 rounded-lg">
                            <div className="flex items-center gap-3">
                              <span className={`w-2 h-2 rounded-full ${
                                run.status === 'success' ? 'bg-green-500' :
                                run.status === 'failed' ? 'bg-red-500' :
                                run.status === 'running' ? 'bg-yellow-500 animate-pulse' : 'bg-slate-400'
                              }`}></span>
                              <div>
                                <p className="text-sm font-medium text-slate-800">{run.workflow || 'SBOM Pipeline'}</p>
                                <p className="text-xs text-slate-500">{run.branch} - {run.commit_sha.substring(0, 8)}</p>
                              </div>
                            </div>
                            <div className="text-right">
                              <p className={`text-sm font-medium ${
                                run.status === 'success' ? 'text-green-600' :
                                run.status === 'failed' ? 'text-red-600' :
                                run.status === 'running' ? 'text-yellow-600' : 'text-slate-600'
                              }`}>
                                {run.status === 'success' ? 'Erfolgreich' :
                                 run.status === 'failed' ? 'Fehlgeschlagen' :
                                 run.status === 'running' ? 'Laeuft...' : run.status}
                              </p>
                              <p className="text-xs text-slate-500">
                                {new Date(run.started_at).toLocaleString('de-DE')}
                              </p>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              )}

              {/* ================================================================ */}
              {/* Woodpecker Tab */}
              {/* ================================================================ */}
              {activeTab === 'woodpecker' && (
                <div className="space-y-6">
                  {/* Woodpecker Status Header */}
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-3">
                      <h3 className="text-lg font-semibold text-slate-800">Woodpecker CI Pipeline</h3>
                      <span className={`flex items-center gap-1.5 px-2 py-1 rounded-full text-xs font-medium ${
                        woodpeckerStatus?.status === 'online'
                          ? 'bg-green-100 text-green-800'
                          : 'bg-red-100 text-red-800'
                      }`}>
                        <span className={`w-2 h-2 rounded-full ${
                          woodpeckerStatus?.status === 'online' ? 'bg-green-500' : 'bg-red-500'
                        }`} />
                        {woodpeckerStatus?.status === 'online' ? 'Online' : 'Offline'}
                      </span>
                    </div>
                    <div className="flex items-center gap-2">
                      <a
                        href="http://macmini:8090"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="px-3 py-2 text-sm border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 flex items-center gap-2"
                      >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                        Woodpecker UI
                      </a>
                      <button
                        onClick={triggerWoodpeckerPipeline}
                        disabled={triggeringWoodpecker}
                        className="px-4 py-2 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors flex items-center gap-2"
                      >
                        {triggeringWoodpecker ? (
                          <>
                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white" />
                            Startet...
                          </>
                        ) : (
                          <>
                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            Pipeline starten
                          </>
                        )}
                      </button>
                    </div>
                  </div>

                  {/* Pipeline Stats */}
                  <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div className="bg-blue-50 p-4 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <svg className="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                        </svg>
                        <span className="text-sm font-medium">Gesamt</span>
                      </div>
                      <p className="text-2xl font-bold text-blue-700">{woodpeckerStatus?.pipelines?.length || 0}</p>
                    </div>
                    <div className="bg-green-50 p-4 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <svg className="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                        </svg>
                        <span className="text-sm font-medium">Erfolgreich</span>
                      </div>
                      <p className="text-2xl font-bold text-green-700">
                        {woodpeckerStatus?.pipelines?.filter(p => p.status === 'success').length || 0}
                      </p>
                    </div>
                    <div className="bg-red-50 p-4 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <svg className="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                        </svg>
                        <span className="text-sm font-medium">Fehlgeschlagen</span>
                      </div>
                      <p className="text-2xl font-bold text-red-700">
                        {woodpeckerStatus?.pipelines?.filter(p => p.status === 'failure' || p.status === 'error').length || 0}
                      </p>
                    </div>
                    <div className="bg-yellow-50 p-4 rounded-lg">
                      <div className="flex items-center gap-2 mb-2">
                        <svg className="w-4 h-4 text-yellow-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span className="text-sm font-medium">Laufend</span>
                      </div>
                      <p className="text-2xl font-bold text-yellow-700">
                        {woodpeckerStatus?.pipelines?.filter(p => p.status === 'running' || p.status === 'pending').length || 0}
                      </p>
                    </div>
                  </div>

                  {/* Pipeline List */}
                  {woodpeckerStatus?.pipelines && woodpeckerStatus.pipelines.length > 0 ? (
                    <div className="bg-slate-50 rounded-lg p-4">
                      <h4 className="font-medium text-slate-800 mb-4">Pipeline Historie</h4>
                      <div className="space-y-3">
                        {woodpeckerStatus.pipelines.map((pipeline) => (
                          <div
                            key={pipeline.id}
                            className={`border rounded-xl p-4 transition-colors ${
                              pipeline.status === 'success'
                                ? 'border-green-200 bg-green-50/30'
                                : pipeline.status === 'failure' || pipeline.status === 'error'
                                ? 'border-red-200 bg-red-50/30'
                                : pipeline.status === 'running'
                                ? 'border-blue-200 bg-blue-50/30'
                                : 'border-slate-200 bg-white'
                            }`}
                          >
                            <div className="flex items-start justify-between gap-4">
                              <div className="flex-1">
                                <div className="flex items-center gap-2 mb-2">
                                  <span className={`w-3 h-3 rounded-full ${
                                    pipeline.status === 'success' ? 'bg-green-500' :
                                    pipeline.status === 'failure' || pipeline.status === 'error' ? 'bg-red-500' :
                                    pipeline.status === 'running' ? 'bg-blue-500 animate-pulse' : 'bg-slate-400'
                                  }`} />
                                  <span className="font-semibold text-slate-900">Pipeline #{pipeline.number}</span>
                                  <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${
                                    pipeline.status === 'success' ? 'bg-green-100 text-green-800' :
                                    pipeline.status === 'failure' || pipeline.status === 'error' ? 'bg-red-100 text-red-800' :
                                    pipeline.status === 'running' ? 'bg-blue-100 text-blue-800' :
                                    'bg-slate-100 text-slate-600'
                                  }`}>
                                    {pipeline.status}
                                  </span>
                                </div>
                                <div className="text-sm text-slate-600 mb-2">
                                  <span className="font-mono">{pipeline.branch}</span>
                                  <span className="mx-2 text-slate-400">•</span>
                                  <span className="font-mono text-slate-500">{pipeline.commit}</span>
                                  <span className="mx-2 text-slate-400">•</span>
                                  <span>{pipeline.event}</span>
                                </div>
                                {pipeline.message && (
                                  <p className="text-sm text-slate-500 mb-2 truncate max-w-xl">{pipeline.message}</p>
                                )}

                                {/* Steps Progress */}
                                {pipeline.steps && pipeline.steps.length > 0 && (
                                  <div className="mt-3">
                                    <div className="flex gap-1 mb-2">
                                      {pipeline.steps.map((step, i) => (
                                        <div
                                          key={i}
                                          className={`h-2 flex-1 rounded-full ${
                                            step.state === 'success' ? 'bg-green-500' :
                                            step.state === 'failure' ? 'bg-red-500' :
                                            step.state === 'running' ? 'bg-blue-500 animate-pulse' :
                                            step.state === 'skipped' ? 'bg-slate-200' : 'bg-slate-300'
                                          }`}
                                          title={`${step.name}: ${step.state}`}
                                        />
                                      ))}
                                    </div>
                                    <div className="flex flex-wrap gap-2 text-xs">
                                      {pipeline.steps.map((step, i) => (
                                        <span
                                          key={i}
                                          className={`px-2 py-1 rounded ${
                                            step.state === 'success' ? 'bg-green-100 text-green-700' :
                                            step.state === 'failure' ? 'bg-red-100 text-red-700' :
                                            step.state === 'running' ? 'bg-blue-100 text-blue-700' :
                                            'bg-slate-100 text-slate-600'
                                          }`}
                                        >
                                          {step.name}
                                        </span>
                                      ))}
                                    </div>
                                  </div>
                                )}

                                {/* Errors */}
                                {pipeline.errors && pipeline.errors.length > 0 && (
                                  <div className="mt-3 p-3 bg-red-50 border border-red-200 rounded-lg">
                                    <h5 className="text-sm font-medium text-red-800 mb-1">Fehler:</h5>
                                    <ul className="text-xs text-red-700 space-y-1">
                                      {pipeline.errors.map((err, i) => (
                                        <li key={i} className="font-mono">{err}</li>
                                      ))}
                                    </ul>
                                  </div>
                                )}
                              </div>

                              <div className="text-right text-sm text-slate-500">
                                <p>{new Date(pipeline.created * 1000).toLocaleDateString('de-DE')}</p>
                                <p className="text-xs">{new Date(pipeline.created * 1000).toLocaleTimeString('de-DE')}</p>
                                {pipeline.started && pipeline.finished && (
                                  <p className="text-xs mt-1">
                                    Dauer: {Math.round((pipeline.finished - pipeline.started) / 60)}m
                                  </p>
                                )}
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <div className="bg-slate-50 rounded-lg p-8 text-center">
                      <svg className="w-12 h-12 text-slate-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                      </svg>
                      <p className="text-slate-500">Keine Pipelines gefunden</p>
                      <p className="text-sm text-slate-400 mt-1">Starte eine neue Pipeline oder pruefe die Woodpecker-Konfiguration</p>
                    </div>
                  )}

                  {/* Pipeline Configuration Info */}
                  <div className="bg-slate-50 rounded-lg p-4">
                    <h4 className="font-medium text-slate-800 mb-3">Pipeline Konfiguration</h4>
                    <pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
{`Woodpecker CI Pipeline (.woodpecker/main.yml)
     │
     ├── 1. go-lint          → Go Linting (PR only)
     ├── 2. python-lint      → Python Linting (PR only)
     ├── 3. secrets-scan     → GitLeaks Secrets Scan
     │
     ├── 4. test-go-consent  → Go Unit Tests
     ├── 5. test-go-billing  → Billing Service Tests
     ├── 6. test-go-school   → School Service Tests
     ├── 7. test-python      → Python Backend Tests
     │
     ├── 8. build-images     → Docker Image Build
     ├── 9. generate-sbom    → SBOM Generation (Syft)
     ├── 10. vuln-scan       → Vulnerability Scan (Grype)
     ├── 11. container-scan  → Container Scan (Trivy)
     │
     ├── 12. sign-images     → Cosign Image Signing
     ├── 13. attest-sbom     → SBOM Attestation
     ├── 14. provenance      → SLSA Provenance
     │
     └── 15. deploy-prod     → Production Deployment`}
                    </pre>
                  </div>

                  {/* Workflow Anleitung */}
                  <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                    <h4 className="font-medium text-blue-800 mb-3 flex items-center gap-2">
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      Workflow-Anleitung
                    </h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                      <div>
                        <h5 className="font-medium text-blue-700 mb-2">🤖 Automatisch (bei jedem Push/PR):</h5>
                        <ul className="space-y-1 text-blue-600">
                          <li>• <strong>Linting</strong> - Code-Qualitaet pruefen (nur PRs)</li>
                          <li>• <strong>Unit Tests</strong> - Go & Python Tests</li>
                          <li>• <strong>Test-Dashboard</strong> - Ergebnisse werden gesendet</li>
                          <li>• <strong>Backlog</strong> - Fehlgeschlagene Tests werden erfasst</li>
                        </ul>
                      </div>
                      <div>
                        <h5 className="font-medium text-blue-700 mb-2">👆 Manuell (Button oder Tag):</h5>
                        <ul className="space-y-1 text-blue-600">
                          <li>• <strong>Docker Builds</strong> - Container erstellen</li>
                          <li>• <strong>SBOM/Scans</strong> - Sicherheitsanalyse</li>
                          <li>• <strong>Deployment</strong> - In Produktion deployen</li>
                          <li>• <strong>Pipeline starten</strong> - Diesen Button verwenden</li>
                        </ul>
                      </div>
                    </div>
                    <div className="mt-4 pt-3 border-t border-blue-200">
                      <h5 className="font-medium text-blue-700 mb-2">⚙️ Setup: API Token konfigurieren</h5>
                      <p className="text-blue-600 text-sm">
                        Um Pipelines ueber das Dashboard zu starten, muss ein <strong>WOODPECKER_TOKEN</strong> konfiguriert werden:
                      </p>
                      <ol className="mt-2 space-y-1 text-blue-600 text-sm list-decimal list-inside">
                        <li>Woodpecker UI oeffnen: <a href="http://macmini:8090" target="_blank" rel="noopener noreferrer" className="underline hover:text-blue-800">http://macmini:8090</a></li>
                        <li>Mit Gitea-Account einloggen</li>
                        <li>Klick auf Profil → <strong>User Settings</strong> → <strong>Personal Access Tokens</strong></li>
                        <li>Neues Token erstellen und in <code className="bg-blue-100 px-1 rounded">.env</code> eintragen: <code className="bg-blue-100 px-1 rounded">WOODPECKER_TOKEN=...</code></li>
                        <li>Container neu starten: <code className="bg-blue-100 px-1 rounded">docker compose up -d admin-v2</code></li>
                      </ol>
                    </div>
                  </div>
                </div>
              )}

              {/* ================================================================ */}
              {/* Pipelines Tab */}
              {/* ================================================================ */}
              {activeTab === 'pipelines' && (
                <div className="space-y-6">
                  {/* Pipeline Controls */}
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="text-lg font-semibold text-slate-800">Gitea Actions Pipelines</h3>
                      <p className="text-sm text-slate-600">Workflows werden bei Push auf main/develop automatisch ausgefuehrt</p>
                    </div>
                    <button
                      onClick={triggerPipeline}
                      disabled={triggeringPipeline}
                      className="px-4 py-2 bg-orange-600 text-white rounded-lg font-medium hover:bg-orange-700 disabled:opacity-50 transition-colors flex items-center gap-2"
                    >
                      {triggeringPipeline ? (
                        <>
                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
                          Laeuft...
                        </>
                      ) : (
                        <>
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                          Pipeline starten
                        </>
                      )}
                    </button>
                  </div>

                  {/* Available Pipelines */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="bg-green-50 border border-green-200 rounded-lg p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="w-2 h-2 rounded-full bg-green-500"></span>
                        <span className="font-medium text-green-800">SBOM Pipeline</span>
                      </div>
                      <p className="text-sm text-green-700 mb-2">Generiert Software Bill of Materials</p>
                      <p className="text-xs text-green-600">5 Jobs: generate, scan, license, upload, summary</p>
                    </div>
                    <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 opacity-60">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="w-2 h-2 rounded-full bg-slate-400"></span>
                        <span className="font-medium text-slate-600">Test Pipeline</span>
                      </div>
                      <p className="text-sm text-slate-500 mb-2">Unit & Integration Tests</p>
                      <p className="text-xs text-slate-400">Geplant</p>
                    </div>
                    <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 opacity-60">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="w-2 h-2 rounded-full bg-slate-400"></span>
                        <span className="font-medium text-slate-600">Security Pipeline</span>
                      </div>
                      <p className="text-sm text-slate-500 mb-2">SAST, SCA, Secrets Scan</p>
                      <p className="text-xs text-slate-400">Geplant</p>
                    </div>
                  </div>

                  {/* Pipeline History */}
                  <div className="bg-slate-50 rounded-lg p-4">
                    <h4 className="font-medium text-slate-800 mb-4">Pipeline Historie</h4>
                    {pipelineHistory.length === 0 ? (
                      <div className="text-center py-8 text-slate-500">
                        Keine Pipeline-Runs vorhanden. Starten Sie die erste Pipeline!
                      </div>
                    ) : (
                      <div className="overflow-x-auto">
                        <table className="w-full">
                          <thead>
                            <tr className="border-b border-slate-200">
                              <th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Status</th>
                              <th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Workflow</th>
                              <th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Branch</th>
                              <th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Commit</th>
                              <th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Gestartet</th>
                              <th className="text-left py-2 px-3 text-xs font-semibold text-slate-500 uppercase">Dauer</th>
                            </tr>
                          </thead>
                          <tbody className="divide-y divide-slate-100">
                            {pipelineHistory.map((run) => (
                              <tr key={run.id} className="hover:bg-white">
                                <td className="py-2 px-3">
                                  <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${
                                    run.status === 'success' ? 'bg-green-100 text-green-800' :
                                    run.status === 'failed' ? 'bg-red-100 text-red-800' :
                                    run.status === 'running' ? 'bg-yellow-100 text-yellow-800' : 'bg-slate-100 text-slate-600'
                                  }`}>
                                    <span className={`w-1.5 h-1.5 rounded-full ${
                                      run.status === 'success' ? 'bg-green-500' :
                                      run.status === 'failed' ? 'bg-red-500' :
                                      run.status === 'running' ? 'bg-yellow-500 animate-pulse' : 'bg-slate-400'
                                    }`}></span>
                                    {run.status}
                                  </span>
                                </td>
                                <td className="py-2 px-3 text-sm text-slate-900">{run.workflow || 'SBOM Pipeline'}</td>
                                <td className="py-2 px-3 text-sm text-slate-600">{run.branch}</td>
                                <td className="py-2 px-3 text-sm font-mono text-slate-500">{run.commit_sha.substring(0, 8)}</td>
                                <td className="py-2 px-3 text-sm text-slate-500">{new Date(run.started_at).toLocaleString('de-DE')}</td>
                                <td className="py-2 px-3 text-sm text-slate-500">
                                  {run.duration_seconds ? `${run.duration_seconds}s` : '-'}
                                </td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    )}
                  </div>

                  {/* Pipeline Architecture */}
                  <div className="bg-slate-50 rounded-lg p-4">
                    <h4 className="font-medium text-slate-800 mb-3">SBOM Pipeline Architektur</h4>
                    <pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
{`Gitea Actions Pipeline (.gitea/workflows/sbom.yaml)
     │
     ├── 1. generate-sbom     → Syft generiert CycloneDX SBOM
     │
     ├── 2. vulnerability-scan → Grype scannt auf CVEs
     │
     ├── 3. license-check     → Prueft GPL/AGPL Lizenzen
     │
     ├── 4. upload-dashboard  → POST /api/v1/security/sbom/upload
     │
     └── 5. summary           → Job Summary generieren`}
                    </pre>
                  </div>
                </div>
              )}

              {/* ================================================================ */}
              {/* Deployments Tab */}
              {/* ================================================================ */}
              {activeTab === 'deployments' && (
                <div className="space-y-6">
                  {/* Header */}
                  <div className="flex items-center justify-between">
                    <div>
                      <h3 className="text-lg font-semibold text-slate-800">Docker Container</h3>
                      {dockerStats && (
                        <p className="text-sm text-slate-600">
                          {dockerStats.running_containers} laufend, {dockerStats.stopped_containers} gestoppt, {dockerStats.total_containers} gesamt
                        </p>
                      )}
                    </div>
                    <div className="flex items-center gap-2">
                      <select
                        value={containerFilter}
                        onChange={(e) => setContainerFilter(e.target.value as typeof containerFilter)}
                        className="px-3 py-1.5 text-sm border border-slate-300 rounded-lg bg-white"
                      >
                        <option value="all">Alle</option>
                        <option value="running">Laufend</option>
                        <option value="stopped">Gestoppt</option>
                      </select>
                      <button
                        onClick={loadContainerData}
                        className="px-3 py-1.5 text-sm border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50"
                      >
                        Aktualisieren
                      </button>
                    </div>
                  </div>

                  {/* Container List */}
                  {filteredContainers.length === 0 ? (
                    <div className="text-center py-8 text-slate-500">Keine Container gefunden</div>
                  ) : (
                    <div className="space-y-3">
                      {filteredContainers.map((container) => (
                        <div
                          key={container.id}
                          className={`border rounded-xl p-4 transition-colors ${
                            container.state === 'running'
                              ? 'border-green-200 bg-green-50/30'
                              : 'border-slate-200 bg-slate-50/50'
                          }`}
                        >
                          <div className="flex items-start justify-between gap-4">
                            <div className="flex-1 min-w-0">
                              <div className="flex items-center gap-2 mb-1">
                                <span className="font-semibold text-slate-900 truncate">{container.name}</span>
                                <span className={`px-2 py-0.5 text-xs font-medium rounded-full ${getStateColor(container.state)}`}>
                                  {container.state}
                                </span>
                              </div>
                              <div className="text-sm text-slate-500 mb-2">
                                <span className="font-mono">{container.image}</span>
                                {container.ports.length > 0 && (
                                  <span className="ml-2 text-slate-400">
                                    | {container.ports.slice(0, 2).join(', ')}
                                    {container.ports.length > 2 && ` +${container.ports.length - 2}`}
                                  </span>
                                )}
                              </div>

                              {container.state === 'running' && (
                                <div className="flex flex-wrap gap-4 text-sm">
                                  <div className="flex items-center gap-1">
                                    <span className="text-slate-500">CPU:</span>
                                    <span className={`font-medium ${container.cpu_percent > 80 ? 'text-red-600' : 'text-slate-700'}`}>
                                      {container.cpu_percent.toFixed(1)}%
                                    </span>
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <span className="text-slate-500">RAM:</span>
                                    <span className={`font-medium ${container.memory_percent > 80 ? 'text-red-600' : 'text-slate-700'}`}>
                                      {container.memory_usage}
                                    </span>
                                    <span className="text-slate-400">({container.memory_percent.toFixed(1)}%)</span>
                                  </div>
                                  <div className="flex items-center gap-1">
                                    <span className="text-slate-500">Net:</span>
                                    <span className="text-slate-700">{container.network_rx} / {container.network_tx}</span>
                                  </div>
                                </div>
                              )}
                            </div>

                            <div className="flex items-center gap-2 flex-shrink-0">
                              {container.state === 'running' ? (
                                <>
                                  <button
                                    onClick={() => containerAction(container.id, 'restart')}
                                    disabled={actionLoading !== null}
                                    className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
                                  >
                                    {actionLoading === `${container.id}-restart` ? '...' : 'Restart'}
                                  </button>
                                  <button
                                    onClick={() => containerAction(container.id, 'stop')}
                                    disabled={actionLoading !== null}
                                    className="px-3 py-1.5 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 disabled:opacity-50 transition-colors"
                                  >
                                    {actionLoading === `${container.id}-stop` ? '...' : 'Stop'}
                                  </button>
                                </>
                              ) : (
                                <button
                                  onClick={() => containerAction(container.id, 'start')}
                                  disabled={actionLoading !== null}
                                  className="px-3 py-1.5 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50 transition-colors"
                                >
                                  {actionLoading === `${container.id}-start` ? '...' : 'Start'}
                                </button>
                              )}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              )}

              {/* ================================================================ */}
              {/* Setup Tab */}
              {/* ================================================================ */}
              {activeTab === 'setup' && (
                <div className="space-y-6">
                  <div>
                    <h3 className="text-lg font-semibold text-slate-800 mb-2">Erstkonfiguration - Gitea CI/CD</h3>
                    <p className="text-slate-600">
                      Anleitung zur Einrichtung der CI/CD Pipeline mit Gitea Actions auf dem Mac Mini Server.
                    </p>
                  </div>

                  {/* Gitea Server Info */}
                  <div className="bg-blue-50 p-4 rounded-lg">
                    <h4 className="font-medium text-blue-800 mb-3 flex items-center gap-2">
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2" />
                      </svg>
                      Gitea Server
                    </h4>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                      <div className="bg-white p-3 rounded-lg">
                        <p className="text-sm text-slate-500">Web-URL</p>
                        <p className="font-mono text-blue-700">http://macmini:3003</p>
                      </div>
                      <div className="bg-white p-3 rounded-lg">
                        <p className="text-sm text-slate-500">SSH</p>
                        <p className="font-mono text-blue-700">macmini:2222</p>
                      </div>
                      <div className="bg-white p-3 rounded-lg">
                        <p className="text-sm text-slate-500">Status</p>
                        <p className={`font-medium ${pipelineStatus?.gitea_connected ? 'text-green-600' : 'text-yellow-600'}`}>
                          {pipelineStatus?.gitea_connected ? 'Verbunden' : 'Konfiguration erforderlich'}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Implementierte Komponenten */}
                  <div className="bg-slate-50 p-4 rounded-lg">
                    <h4 className="font-medium text-slate-800 mb-3">Implementierte Komponenten</h4>
                    <div className="overflow-x-auto">
                      <table className="min-w-full text-sm">
                        <thead>
                          <tr className="border-b border-slate-200">
                            <th className="text-left py-2 px-3 font-medium text-slate-600">Komponente</th>
                            <th className="text-left py-2 px-3 font-medium text-slate-600">Pfad</th>
                            <th className="text-left py-2 px-3 font-medium text-slate-600">Beschreibung</th>
                          </tr>
                        </thead>
                        <tbody className="divide-y divide-slate-100">
                          <tr>
                            <td className="py-2 px-3 font-medium">Gitea Service</td>
                            <td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">docker-compose.yml</code></td>
                            <td className="py-2 px-3 text-slate-600">Gitea 1.22 mit Actions enabled</td>
                          </tr>
                          <tr>
                            <td className="py-2 px-3 font-medium">Gitea Runner</td>
                            <td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">docker-compose.yml</code></td>
                            <td className="py-2 px-3 text-slate-600">act_runner fuer Job-Ausfuehrung</td>
                          </tr>
                          <tr>
                            <td className="py-2 px-3 font-medium">SBOM Workflow</td>
                            <td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">.gitea/workflows/sbom.yaml</code></td>
                            <td className="py-2 px-3 text-slate-600">5 Jobs: generate, scan, license, upload, summary</td>
                          </tr>
                          <tr>
                            <td className="py-2 px-3 font-medium">Backend API</td>
                            <td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">backend/security_api.py</code></td>
                            <td className="py-2 px-3 text-slate-600">SBOM Upload, Pipeline Status, History</td>
                          </tr>
                          <tr>
                            <td className="py-2 px-3 font-medium">Runner Config</td>
                            <td className="py-2 px-3"><code className="bg-slate-200 px-1 rounded text-xs">gitea/runner-config.yaml</code></td>
                            <td className="py-2 px-3 text-slate-600">Labels: ubuntu-latest, self-hosted</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>

                  {/* Setup Steps */}
                  <div className="bg-orange-50 p-4 rounded-lg">
                    <h4 className="font-medium text-orange-800 mb-3 flex items-center gap-2">
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
                      </svg>
                      Setup-Schritte
                    </h4>
                    <div className="space-y-3">
                      <div className="bg-white p-3 rounded-lg">
                        <h5 className="font-medium text-slate-800 mb-1">1. Gitea oeffnen</h5>
                        <code className="text-sm bg-slate-100 px-2 py-1 rounded">http://macmini:3003</code>
                      </div>
                      <div className="bg-white p-3 rounded-lg">
                        <h5 className="font-medium text-slate-800 mb-1">2. Admin-Account erstellen</h5>
                        <p className="text-sm text-slate-600">Username: admin, Email: admin@breakpilot.de</p>
                      </div>
                      <div className="bg-white p-3 rounded-lg">
                        <h5 className="font-medium text-slate-800 mb-1">3. Repository erstellen</h5>
                        <p className="text-sm text-slate-600">Name: breakpilot-pwa, Visibility: Private</p>
                      </div>
                      <div className="bg-white p-3 rounded-lg">
                        <h5 className="font-medium text-slate-800 mb-1">4. Actions aktivieren</h5>
                        <p className="text-sm text-slate-600">Repository Settings → Actions → Enable Repository Actions</p>
                      </div>
                      <div className="bg-white p-3 rounded-lg">
                        <h5 className="font-medium text-slate-800 mb-1">5. Runner Token erstellen & starten</h5>
                        <pre className="text-xs bg-slate-100 p-2 rounded mt-1 overflow-x-auto">
{`export GITEA_RUNNER_TOKEN=<token>
docker compose up -d gitea-runner`}
                        </pre>
                      </div>
                      <div className="bg-white p-3 rounded-lg">
                        <h5 className="font-medium text-slate-800 mb-1">6. Repository pushen</h5>
                        <pre className="text-xs bg-slate-100 p-2 rounded mt-1 overflow-x-auto">
{`git remote add gitea http://macmini:3003/admin/breakpilot-pwa.git
git push gitea main`}
                        </pre>
                      </div>
                    </div>
                  </div>

                  {/* Quick Links */}
                  <div className="bg-purple-50 p-4 rounded-lg">
                    <h4 className="font-medium text-purple-800 mb-3">Quick Links</h4>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                      <a
                        href="http://macmini:3003"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center justify-between bg-white p-3 rounded-lg hover:bg-purple-100 transition-colors"
                      >
                        <div>
                          <p className="font-medium text-purple-800">Gitea</p>
                          <p className="text-xs text-slate-500">Git Server & CI/CD</p>
                        </div>
                        <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                      </a>
                      <a
                        href="http://macmini:3003/admin/breakpilot-pwa/actions"
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center justify-between bg-white p-3 rounded-lg hover:bg-purple-100 transition-colors"
                      >
                        <div>
                          <p className="font-medium text-purple-800">Pipeline Actions</p>
                          <p className="text-xs text-slate-500">Workflow Runs</p>
                        </div>
                        <svg className="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                      </a>
                    </div>
                  </div>
                </div>
              )}

              {/* ================================================================ */}
              {/* Scheduler Tab (BQAS) */}
              {/* ================================================================ */}
              {activeTab === 'scheduler' && (
                <div className="space-y-6">
                  {/* Status Overview */}
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="rounded-xl border p-5 bg-emerald-100 border-emerald-200 text-emerald-700">
                      <div className="flex items-start gap-4">
                        <div className="flex-shrink-0">
                          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            <h4 className="font-semibold">launchd Job</h4>
                            <span className="w-2 h-2 rounded-full bg-emerald-500" />
                          </div>
                          <p className="text-sm mt-1 opacity-80">Taeglich um 07:00 Uhr automatisch</p>
                        </div>
                      </div>
                    </div>
                    <div className="rounded-xl border p-5 bg-emerald-100 border-emerald-200 text-emerald-700">
                      <div className="flex items-start gap-4">
                        <div className="flex-shrink-0">
                          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                          </svg>
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            <h4 className="font-semibold">Git Hook</h4>
                            <span className="w-2 h-2 rounded-full bg-emerald-500" />
                          </div>
                          <p className="text-sm mt-1 opacity-80">Quick Tests bei voice-service Aenderungen</p>
                        </div>
                      </div>
                    </div>
                    <div className="rounded-xl border p-5 bg-emerald-100 border-emerald-200 text-emerald-700">
                      <div className="flex items-start gap-4">
                        <div className="flex-shrink-0">
                          <svg className="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                          </svg>
                        </div>
                        <div className="flex-1">
                          <div className="flex items-center gap-2">
                            <h4 className="font-semibold">Benachrichtigungen</h4>
                            <span className="w-2 h-2 rounded-full bg-emerald-500" />
                          </div>
                          <p className="text-sm mt-1 opacity-80">Desktop-Alerts bei Fehlern aktiviert</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Quick Actions */}
                  <div className="bg-slate-50 rounded-lg p-4">
                    <h3 className="font-medium text-slate-800 mb-4">Quick Actions (BQAS)</h3>
                    <div className="flex flex-wrap gap-3">
                      <a
                        href="/ai/test-quality"
                        className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center gap-2"
                      >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        Test Dashboard oeffnen
                      </a>
                      <span className="text-sm text-slate-500 self-center">
                        Starte Tests direkt im BQAS Dashboard
                      </span>
                    </div>
                  </div>

                  {/* GitHub Actions vs Local - Comparison */}
                  <div className="bg-slate-50 rounded-lg p-4">
                    <h3 className="font-medium text-slate-800 mb-4">GitHub Actions Alternative</h3>
                    <p className="text-slate-600 mb-4">
                      Der lokale BQAS Scheduler ersetzt GitHub Actions und bietet DSGVO-konforme, vollstaendig lokale Test-Ausfuehrung.
                    </p>

                    <div className="overflow-x-auto">
                      <table className="w-full text-sm">
                        <thead>
                          <tr className="border-b border-slate-200 bg-white">
                            <th className="text-left py-3 px-4 font-medium text-slate-700">Feature</th>
                            <th className="text-center py-3 px-4 font-medium text-slate-700">GitHub Actions</th>
                            <th className="text-center py-3 px-4 font-medium text-slate-700">Lokaler Scheduler</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr className="border-b border-slate-100">
                            <td className="py-3 px-4 text-slate-600">Taegliche Tests (07:00)</td>
                            <td className="py-3 px-4 text-center">
                              <span className="text-slate-600">schedule: cron</span>
                            </td>
                            <td className="py-3 px-4 text-center">
                              <span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">macOS launchd</span>
                            </td>
                          </tr>
                          <tr className="border-b border-slate-100">
                            <td className="py-3 px-4 text-slate-600">Push-basierte Tests</td>
                            <td className="py-3 px-4 text-center">
                              <span className="text-slate-600">on: push</span>
                            </td>
                            <td className="py-3 px-4 text-center">
                              <span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">Git post-commit Hook</span>
                            </td>
                          </tr>
                          <tr className="border-b border-slate-100">
                            <td className="py-3 px-4 text-slate-600">PR-basierte Tests</td>
                            <td className="py-3 px-4 text-center">
                              <span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">on: pull_request</span>
                            </td>
                            <td className="py-3 px-4 text-center">
                              <span className="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-medium">Nicht moeglich</span>
                            </td>
                          </tr>
                          <tr className="border-b border-slate-100">
                            <td className="py-3 px-4 text-slate-600">DSGVO-Konformitaet</td>
                            <td className="py-3 px-4 text-center">
                              <span className="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-medium">Daten bei GitHub (US)</span>
                            </td>
                            <td className="py-3 px-4 text-center">
                              <span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">100% lokal</span>
                            </td>
                          </tr>
                          <tr>
                            <td className="py-3 px-4 text-slate-600">Offline-Faehig</td>
                            <td className="py-3 px-4 text-center">
                              <span className="px-2 py-1 bg-red-100 text-red-700 rounded text-xs font-medium">Nein</span>
                            </td>
                            <td className="py-3 px-4 text-center">
                              <span className="px-2 py-1 bg-emerald-100 text-emerald-700 rounded text-xs font-medium">Ja</span>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>

                  {/* Configuration Details */}
                  <div className="bg-slate-50 rounded-lg p-4">
                    <h3 className="font-medium text-slate-800 mb-4">Konfiguration</h3>

                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                      {/* launchd Configuration */}
                      <div>
                        <h4 className="font-medium text-slate-700 mb-3">launchd Job</h4>
                        <div className="bg-slate-900 rounded-lg p-4 font-mono text-sm text-slate-100 overflow-x-auto">
                          <pre>{`# ~/Library/LaunchAgents/com.breakpilot.bqas.plist
Label: com.breakpilot.bqas
Schedule: 07:00 taeglich
Script: /voice-service/scripts/run_bqas.sh
Logs: /var/log/bqas/`}</pre>
                        </div>
                      </div>

                      {/* Environment Variables */}
                      <div>
                        <h4 className="font-medium text-slate-700 mb-3">Umgebungsvariablen</h4>
                        <div className="space-y-2 text-sm">
                          <div className="flex justify-between p-2 bg-white rounded">
                            <span className="font-mono text-slate-600">BQAS_SERVICE_URL</span>
                            <span className="text-slate-900">http://localhost:8091</span>
                          </div>
                          <div className="flex justify-between p-2 bg-white rounded">
                            <span className="font-mono text-slate-600">BQAS_REGRESSION_THRESHOLD</span>
                            <span className="text-slate-900">0.1</span>
                          </div>
                          <div className="flex justify-between p-2 bg-white rounded">
                            <span className="font-mono text-slate-600">BQAS_NOTIFY_DESKTOP</span>
                            <span className="text-emerald-600 font-medium">true</span>
                          </div>
                          <div className="flex justify-between p-2 bg-white rounded">
                            <span className="font-mono text-slate-600">BQAS_NOTIFY_SLACK</span>
                            <span className="text-slate-400">false</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Detailed Explanation */}
                  <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-6">
                    <h3 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
                      <svg className="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                      Detaillierte Erklaerung
                    </h3>

                    <div className="prose prose-sm max-w-none text-slate-700">
                      <h4 className="text-base font-semibold mt-4 mb-2">Warum ein lokaler Scheduler?</h4>
                      <p className="mb-4">
                        Der lokale BQAS Scheduler wurde entwickelt, um die gleiche Funktionalitaet wie GitHub Actions zu bieten,
                        aber mit dem entscheidenden Vorteil, dass <strong>alle Daten zu 100% auf dem lokalen Mac Mini verbleiben</strong>.
                        Dies ist besonders wichtig fuer DSGVO-Konformitaet, da keine Schuelerdaten oder Testergebnisse an externe Server uebertragen werden.
                      </p>

                      <h4 className="text-base font-semibold mt-4 mb-2">Komponenten</h4>
                      <ul className="list-disc list-inside space-y-2 mb-4">
                        <li>
                          <strong>run_bqas.sh</strong> - Hauptscript das pytest ausfuehrt, Regression-Checks macht und Benachrichtigungen versendet
                        </li>
                        <li>
                          <strong>launchd Job</strong> - macOS-nativer Scheduler der das Script taeglich um 07:00 Uhr startet
                        </li>
                        <li>
                          <strong>Git Hook</strong> - post-commit Hook der bei Aenderungen im voice-service automatisch Quick-Tests startet
                        </li>
                        <li>
                          <strong>Notifier</strong> - Python-Modul das Desktop-, Slack- und E-Mail-Benachrichtigungen versendet
                        </li>
                      </ul>

                      <h4 className="text-base font-semibold mt-4 mb-2">Installation</h4>
                      <div className="bg-slate-900 rounded-lg p-3 font-mono text-sm text-slate-100 mb-4">
                        <code>./voice-service/scripts/install_bqas_scheduler.sh install</code>
                      </div>

                      <h4 className="text-base font-semibold mt-4 mb-2">Vorteile gegenueber GitHub Actions</h4>
                      <ul className="list-disc list-inside space-y-1">
                        <li>100% DSGVO-konform - alle Daten bleiben lokal</li>
                        <li>Keine Internet-Abhaengigkeit - funktioniert auch offline</li>
                        <li>Keine GitHub-Kosten fuer private Repositories</li>
                        <li>Schnellere Ausfuehrung ohne Cloud-Overhead</li>
                        <li>Volle Kontrolle ueber Scheduling und Benachrichtigungen</li>
                      </ul>
                    </div>
                  </div>
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  )
}