'use client'

/**
 * Compliance & Audit Framework Dashboard
 *
 * Tabs:
 * - Uebersicht: Dashboard mit Score, Stats, Quick Actions
 * - Architektur: Systemarchitektur und Datenfluss
 * - Roadmap: Implementierungsfortschritt und Backlog
 * - Technisch: API-Dokumentation und Datenmodell
 * - Audit: Export und Audit-Historie
 * - Dokumentation: Handbuecher und Guides
 */

import { useState, useEffect } from 'react'
import Link from 'next/link'
import AdminLayout from '@/components/admin/AdminLayout'
import LanguageSwitch from '@/components/compliance/LanguageSwitch'
import LLMProviderToggle from '@/components/compliance/LLMProviderToggle'
import { Language } from '@/lib/compliance-i18n'

// Types
interface DashboardData {
  compliance_score: number
  total_regulations: number
  total_requirements: number
  total_controls: number
  controls_by_status: Record<string, number>
  controls_by_domain: Record<string, Record<string, number>>
  total_evidence: number
  evidence_by_status: Record<string, number>
  total_risks: number
  risks_by_level: Record<string, number>
}

interface AIStatus {
  provider: string
  model: string
  is_available: boolean
  is_mock: boolean
}

interface Regulation {
  id: string
  code: string
  name: string
  full_name: string
  regulation_type: string
  effective_date: string | null
  description: string
  requirement_count: number
}

// Tab definitions
type TabId = 'executive' | 'uebersicht' | 'architektur' | 'roadmap' | 'technisch' | 'audit' | 'dokumentation'

const tabs: { id: TabId; name: string; icon: JSX.Element }[] = [
  {
    id: 'executive',
    name: 'Executive',
    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: 'uebersicht',
    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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
      </svg>
    ),
  },
  {
    id: 'architektur',
    name: 'Architektur',
    icon: (
      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
      </svg>
    ),
  },
  {
    id: 'roadmap',
    name: 'Roadmap',
    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 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>
    ),
  },
  {
    id: 'technisch',
    name: 'Technisch',
    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 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
      </svg>
    ),
  },
  {
    id: 'audit',
    name: 'Audit',
    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 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
      </svg>
    ),
  },
  {
    id: 'dokumentation',
    name: 'Dokumentation',
    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 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
      </svg>
    ),
  },
]

const DOMAIN_LABELS: Record<string, string> = {
  gov: 'Governance',
  priv: 'Datenschutz',
  iam: 'Identity & Access',
  crypto: 'Kryptografie',
  sdlc: 'Secure Dev',
  ops: 'Operations',
  ai: 'KI-spezifisch',
  cra: 'Supply Chain',
  aud: 'Audit',
}

const STATUS_COLORS: Record<string, string> = {
  pass: 'bg-green-500',
  partial: 'bg-yellow-500',
  fail: 'bg-red-500',
  planned: 'bg-slate-400',
  'n/a': 'bg-slate-300',
}

// Backlog items for Roadmap - Updated 2026-01-17
const BACKLOG_ITEMS = [
  { id: 1, title: 'EU-Lex Live-Fetch (19 Regulations)', priority: 'high', status: 'completed', category: 'Integration' },
  { id: 2, title: 'BSI-TR-03161 PDF Parser (3 PDFs)', priority: 'high', status: 'completed', category: 'Data Import' },
  { id: 3, title: 'AI-Interpretation fuer Requirements', priority: 'high', status: 'completed', category: 'AI' },
  { id: 4, title: 'Auto-Mapping Controls zu Requirements (474)', priority: 'high', status: 'completed', category: 'Automation' },
  { id: 5, title: 'Service-Modul-Registry (30 Module)', priority: 'high', status: 'completed', category: 'Architecture' },
  { id: 6, title: 'Audit Trail fuer alle Aenderungen', priority: 'high', status: 'completed', category: 'Audit' },
  { id: 7, title: 'Automatische Evidence-Sammlung aus CI/CD', priority: 'high', status: 'planned', category: 'Automation' },
  { id: 8, title: 'Control-Review Workflow mit Benachrichtigungen', priority: 'medium', status: 'planned', category: 'Workflow' },
  { id: 9, title: 'Risk Treatment Plan Tracking', priority: 'medium', status: 'planned', category: 'Risk Management' },
  { id: 10, title: 'Compliance Score Trend-Analyse', priority: 'low', status: 'planned', category: 'Analytics' },
  { id: 11, title: 'SBOM Integration fuer CRA Compliance', priority: 'medium', status: 'planned', category: 'Integration' },
  { id: 12, title: 'Multi-Mandanten Compliance Trennung', priority: 'medium', status: 'planned', category: 'Architecture' },
  { id: 13, title: 'Compliance Report PDF Generator', priority: 'medium', status: 'planned', category: 'Export' },
]

// Executive Dashboard Types
interface ExecutiveDashboardData {
  traffic_light_status: 'green' | 'yellow' | 'red'
  overall_score: number
  score_trend: { date: string; score: number; label: string }[]
  previous_score: number | null
  score_change: number | null
  total_regulations: number
  total_requirements: number
  total_controls: number
  open_risks: number
  top_risks: {
    id: string
    risk_id: string
    title: string
    risk_level: string
    owner: string | null
    status: string
    category: string
    impact: number
    likelihood: number
  }[]
  upcoming_deadlines: {
    id: string
    title: string
    deadline: string
    days_remaining: number
    type: string
    status: string
    owner: string | null
  }[]
  team_workload: {
    name: string
    pending_tasks: number
    in_progress_tasks: number
    completed_tasks: number
    total_tasks: number
    completion_rate: number
  }[]
  last_updated: string
}

// Main Component
export default function CompliancePage() {
  const [activeTab, setActiveTab] = useState<TabId>('executive')
  const [dashboard, setDashboard] = useState<DashboardData | null>(null)
  const [regulations, setRegulations] = useState<Regulation[]>([])
  const [aiStatus, setAiStatus] = useState<AIStatus | null>(null)
  const [loading, setLoading] = useState(true)
  const [seeding, setSeeding] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [language, setLanguage] = useState<Language>('de')

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

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

  const loadData = async () => {
    setLoading(true)
    setError(null)
    try {
      const [dashboardRes, regulationsRes, aiStatusRes] = await Promise.all([
        fetch(`${BACKEND_URL}/api/v1/compliance/dashboard`),
        fetch(`${BACKEND_URL}/api/v1/compliance/regulations`),
        fetch(`${BACKEND_URL}/api/v1/compliance/ai/status`),
      ])

      if (dashboardRes.ok) {
        setDashboard(await dashboardRes.json())
      }
      if (regulationsRes.ok) {
        const data = await regulationsRes.json()
        setRegulations(data.regulations || [])
      }
      if (aiStatusRes.ok) {
        setAiStatus(await aiStatusRes.json())
      }
    } catch (err) {
      console.error('Failed to load compliance data:', err)
      setError('Verbindung zum Backend fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }

  const seedDatabase = async () => {
    setSeeding(true)
    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/seed`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ force: false }),
      })

      if (res.ok) {
        const result = await res.json()
        alert(`Datenbank erfolgreich initialisiert!\n\nRegulations: ${result.counts.regulations}\nControls: ${result.counts.controls}\nRequirements: ${result.counts.requirements}\nMappings: ${result.counts.mappings}`)
        loadData()
      } else {
        const error = await res.text()
        alert(`Fehler beim Seeding: ${error}`)
      }
    } catch (err) {
      console.error('Seeding failed:', err)
      alert('Fehler beim Initialisieren der Datenbank')
    } finally {
      setSeeding(false)
    }
  }

  return (
    <AdminLayout title="Compliance & Audit" description="Regulatory Compliance Framework">
      {/* Error Banner */}
      {error && (
        <div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4 flex items-center gap-3">
          <svg className="w-5 h-5 text-red-500 flex-shrink-0" 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="text-red-700">{error}</span>
          <button onClick={loadData} className="ml-auto text-red-600 hover:text-red-800 text-sm font-medium">
            Erneut versuchen
          </button>
        </div>
      )}

      {/* Action Bar */}
      <div className="mb-6 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Link
            href="/admin/compliance/scraper"
            className="inline-flex items-center gap-2 px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition-colors"
          >
            <svg className="w-4 h-4" 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>
            Scraper oeffnen
          </Link>
          <Link
            href="/admin/compliance/audit-workspace"
            className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            <svg className="w-4 h-4" 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>
            Audit Workspace
          </Link>
        </div>
        <div className="flex items-center gap-3">
          <LLMProviderToggle aiStatus={aiStatus} onStatusChange={loadData} />
          <LanguageSwitch onChange={setLanguage} />
          <button
            onClick={loadData}
            className="inline-flex items-center gap-2 px-3 py-2 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors"
          >
            <svg className="w-4 h-4" 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>
            {language === 'de' ? 'Aktualisieren' : 'Refresh'}
          </button>
        </div>
      </div>

      {/* Seed Button if no data */}
      {!loading && (dashboard?.total_controls || 0) === 0 && (
        <div className="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
          <div className="flex items-center justify-between">
            <div>
              <p className="font-medium text-yellow-800">Keine Compliance-Daten vorhanden</p>
              <p className="text-sm text-yellow-700">Initialisieren Sie die Datenbank mit den Seed-Daten.</p>
            </div>
            <button
              onClick={seedDatabase}
              disabled={seeding}
              className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 disabled:opacity-50"
            >
              {seeding ? 'Initialisiere...' : 'Datenbank initialisieren'}
            </button>
          </div>
        </div>
      )}

      {/* Tab Navigation */}
      <div className="border-b border-slate-200 mb-6">
        <nav className="-mb-px flex space-x-8 overflow-x-auto">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`
                flex items-center gap-2 py-4 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap
                ${activeTab === tab.id
                  ? 'border-primary-500 text-primary-600'
                  : 'border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300'
                }
              `}
            >
              {tab.icon}
              {tab.name}
            </button>
          ))}
        </nav>
      </div>

      {/* Tab Content */}
      {activeTab === 'executive' && (
        <ExecutiveTab loading={loading} onRefresh={loadData} />
      )}
      {activeTab === 'uebersicht' && (
        <UebersichtTab
          dashboard={dashboard}
          regulations={regulations}
          aiStatus={aiStatus}
          loading={loading}
          onRefresh={loadData}
        />
      )}
      {activeTab === 'architektur' && <ArchitekturTab />}
      {activeTab === 'roadmap' && <RoadmapTab />}
      {activeTab === 'technisch' && <TechnischTab />}
      {activeTab === 'audit' && <AuditTab />}
      {activeTab === 'dokumentation' && <DokumentationTab />}
    </AdminLayout>
  )
}

// ============================================================================
// Uebersicht Tab
// ============================================================================

function UebersichtTab({
  dashboard,
  regulations,
  aiStatus,
  loading,
  onRefresh,
}: {
  dashboard: DashboardData | null
  regulations: Regulation[]
  aiStatus: AIStatus | null
  loading: boolean
  onRefresh: () => void
}) {
  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600" />
      </div>
    )
  }

  const score = dashboard?.compliance_score || 0
  const scoreColor = score >= 80 ? 'text-green-600' : score >= 60 ? 'text-yellow-600' : 'text-red-600'

  return (
    <div className="space-y-6">
      {/* AI Status Banner */}
      {aiStatus && (
        <div className={`rounded-lg p-4 flex items-center justify-between ${
          aiStatus.is_available && !aiStatus.is_mock
            ? 'bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-200'
            : aiStatus.is_mock
            ? 'bg-yellow-50 border border-yellow-200'
            : 'bg-red-50 border border-red-200'
        }`}>
          <div className="flex items-center gap-3">
            <span className="text-2xl">🤖</span>
            <div>
              <div className="font-medium text-slate-900">
                AI-Compliance-Assistent {aiStatus.is_available ? 'aktiv' : 'nicht verfuegbar'}
              </div>
              <div className="text-sm text-slate-600">
                {aiStatus.is_mock ? (
                  <span className="text-yellow-700">Mock-Modus (kein API-Key konfiguriert)</span>
                ) : (
                  <>Provider: <span className="font-mono">{aiStatus.provider}</span> | Modell: <span className="font-mono">{aiStatus.model}</span></>
                )}
              </div>
            </div>
          </div>
          <div className={`px-3 py-1 rounded-full text-sm font-medium ${
            aiStatus.is_available && !aiStatus.is_mock
              ? 'bg-green-100 text-green-700'
              : aiStatus.is_mock
              ? 'bg-yellow-100 text-yellow-700'
              : 'bg-red-100 text-red-700'
          }`}>
            {aiStatus.is_available && !aiStatus.is_mock ? 'Online' : aiStatus.is_mock ? 'Mock' : 'Offline'}
          </div>
        </div>
      )}

      {/* Score and Stats Row */}
      <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
        {/* Score Card */}
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-sm font-medium text-slate-500 mb-4">Compliance Score</h3>
          <div className={`text-5xl font-bold ${scoreColor}`}>
            {score.toFixed(0)}%
          </div>
          <div className="mt-4 h-2 bg-slate-200 rounded-full overflow-hidden">
            <div
              className={`h-full transition-all duration-500 ${score >= 80 ? 'bg-green-500' : score >= 60 ? 'bg-yellow-500' : 'bg-red-500'}`}
              style={{ width: `${score}%` }}
            />
          </div>
          <p className="mt-2 text-sm text-slate-500">
            {dashboard?.controls_by_status?.pass || 0} von {dashboard?.total_controls || 0} Controls bestanden
          </p>
        </div>

        {/* Stats Cards */}
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-slate-500">Verordnungen</p>
              <p className="text-2xl font-bold text-slate-900">{dashboard?.total_regulations || 0}</p>
            </div>
            <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
              <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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </div>
          </div>
          <p className="mt-2 text-sm text-slate-500">{dashboard?.total_requirements || 0} Anforderungen</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-slate-500">Controls</p>
              <p className="text-2xl font-bold text-slate-900">{dashboard?.total_controls || 0}</p>
            </div>
            <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
              <svg className="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
          </div>
          <p className="mt-2 text-sm text-slate-500">{dashboard?.controls_by_status?.pass || 0} bestanden</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-slate-500">Nachweise</p>
              <p className="text-2xl font-bold text-slate-900">{dashboard?.total_evidence || 0}</p>
            </div>
            <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
              <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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
              </svg>
            </div>
          </div>
          <p className="mt-2 text-sm text-slate-500">{dashboard?.evidence_by_status?.valid || 0} aktiv</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-slate-500">Risiken</p>
              <p className="text-2xl font-bold text-slate-900">{dashboard?.total_risks || 0}</p>
            </div>
            <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
              <svg className="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
            </div>
          </div>
          <p className="mt-2 text-sm text-slate-500">
            {(dashboard?.risks_by_level?.high || 0) + (dashboard?.risks_by_level?.critical || 0)} kritisch
          </p>
        </div>
      </div>

      {/* Domain Chart and Quick Actions */}
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Domain Chart */}
        <div className="lg:col-span-2 bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-lg font-semibold text-slate-900 mb-4">Controls nach Domain</h3>
          <div className="space-y-4">
            {Object.entries(dashboard?.controls_by_domain || {}).map(([domain, stats]) => {
              const total = stats.total || 0
              const pass = stats.pass || 0
              const partial = stats.partial || 0
              const passPercent = total > 0 ? ((pass + partial * 0.5) / total) * 100 : 0

              return (
                <div key={domain}>
                  <div className="flex justify-between text-sm mb-1">
                    <span className="font-medium text-slate-700">
                      {DOMAIN_LABELS[domain] || domain.toUpperCase()}
                    </span>
                    <span className="text-slate-500">
                      {pass}/{total} ({passPercent.toFixed(0)}%)
                    </span>
                  </div>
                  <div className="h-2 bg-slate-200 rounded-full overflow-hidden flex">
                    <div className="bg-green-500 h-full" style={{ width: `${(pass / total) * 100}%` }} />
                    <div className="bg-yellow-500 h-full" style={{ width: `${(partial / total) * 100}%` }} />
                  </div>
                </div>
              )
            })}
          </div>
        </div>

        {/* Quick Actions */}
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-lg font-semibold text-slate-900 mb-4">Schnellaktionen</h3>
          <div className="grid grid-cols-2 gap-3">
            <Link
              href="/admin/compliance/controls"
              className="p-4 rounded-lg border border-slate-200 hover:border-primary-500 hover:bg-primary-50 transition-colors"
            >
              <div className="text-primary-600 mb-2">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
              </div>
              <p className="font-medium text-slate-900 text-sm">Controls</p>
            </Link>

            <Link
              href="/admin/compliance/evidence"
              className="p-4 rounded-lg border border-slate-200 hover:border-primary-500 hover:bg-primary-50 transition-colors"
            >
              <div className="text-purple-600 mb-2">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
              </div>
              <p className="font-medium text-slate-900 text-sm">Evidence</p>
            </Link>

            <Link
              href="/admin/compliance/risks"
              className="p-4 rounded-lg border border-slate-200 hover:border-primary-500 hover:bg-primary-50 transition-colors"
            >
              <div className="text-red-600 mb-2">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                </svg>
              </div>
              <p className="font-medium text-slate-900 text-sm">Risiken</p>
            </Link>

            <Link
              href="/admin/compliance/scraper"
              className="p-4 rounded-lg border border-slate-200 hover:border-orange-500 hover:bg-orange-50 transition-colors"
            >
              <div className="text-orange-600 mb-2">
                <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>
              </div>
              <p className="font-medium text-slate-900 text-sm">Scraper</p>
            </Link>

            <Link
              href="/admin/compliance/export"
              className="p-4 rounded-lg border border-slate-200 hover:border-primary-500 hover:bg-primary-50 transition-colors"
            >
              <div className="text-green-600 mb-2">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
              </div>
              <p className="font-medium text-slate-900 text-sm">Export</p>
            </Link>

            <Link
              href="/admin/compliance/audit-workspace"
              className="p-4 rounded-lg border border-slate-200 hover:border-blue-500 hover:bg-blue-50 transition-colors"
            >
              <div className="text-blue-600 mb-2">
                <svg className="w-6 h-6" 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>
              </div>
              <p className="font-medium text-slate-900 text-sm">Audit Workspace</p>
            </Link>

            <Link
              href="/admin/compliance/modules"
              className="p-4 rounded-lg border border-slate-200 hover:border-pink-500 hover:bg-pink-50 transition-colors"
            >
              <div className="text-pink-600 mb-2">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
                </svg>
              </div>
              <p className="font-medium text-slate-900 text-sm">Service Module Registry</p>
            </Link>
          </div>
        </div>
      </div>

      {/* Regulations Table */}
      <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
        <div className="p-4 border-b flex items-center justify-between">
          <h3 className="text-lg font-semibold text-slate-900">Verordnungen & Standards</h3>
          <button onClick={onRefresh} className="text-sm text-primary-600 hover:text-primary-700">
            Aktualisieren
          </button>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-slate-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Code</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Name</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Typ</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Anforderungen</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200">
              {regulations.slice(0, 10).map((reg) => (
                <tr key={reg.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3">
                    <span className="font-mono font-medium text-primary-600">{reg.code}</span>
                  </td>
                  <td className="px-4 py-3">
                    <p className="font-medium text-slate-900">{reg.name}</p>
                  </td>
                  <td className="px-4 py-3">
                    <span className={`px-2 py-1 text-xs rounded-full ${
                      reg.regulation_type === 'eu_regulation' ? 'bg-blue-100 text-blue-700' :
                      reg.regulation_type === 'eu_directive' ? 'bg-purple-100 text-purple-700' :
                      reg.regulation_type === 'bsi_standard' ? 'bg-green-100 text-green-700' :
                      'bg-slate-100 text-slate-700'
                    }`}>
                      {reg.regulation_type === 'eu_regulation' ? 'EU-VO' :
                       reg.regulation_type === 'eu_directive' ? 'EU-RL' :
                       reg.regulation_type === 'bsi_standard' ? 'BSI' :
                       reg.regulation_type === 'de_law' ? 'DE' : reg.regulation_type}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <span className="font-medium">{reg.requirement_count}</span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

// ============================================================================
// Executive Tab (Phase 3 - Sprint 1)
// ============================================================================

import dynamic from 'next/dynamic'

// Dynamically import Recharts components to avoid SSR issues
const ComplianceTrendChart = dynamic(
  () => import('@/components/compliance/charts/ComplianceTrendChart'),
  { ssr: false, loading: () => <div className="h-48 bg-slate-100 animate-pulse rounded" /> }
)

function ExecutiveTab({
  loading,
  onRefresh,
}: {
  loading: boolean
  onRefresh: () => void
}) {
  const [executiveData, setExecutiveData] = useState<ExecutiveDashboardData | null>(null)
  const [execLoading, setExecLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

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

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

  const loadExecutiveData = async () => {
    setExecLoading(true)
    setError(null)
    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/dashboard/executive`)
      if (res.ok) {
        setExecutiveData(await res.json())
      } else {
        setError('Executive Dashboard konnte nicht geladen werden')
      }
    } catch (err) {
      console.error('Failed to load executive dashboard:', err)
      setError('Verbindung zum Backend fehlgeschlagen')
    } finally {
      setExecLoading(false)
    }
  }

  if (execLoading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600" />
      </div>
    )
  }

  if (error || !executiveData) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
        <p className="text-red-700">{error || 'Keine Daten verfuegbar'}</p>
        <button
          onClick={loadExecutiveData}
          className="mt-4 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
        >
          Erneut versuchen
        </button>
      </div>
    )
  }

  const { traffic_light_status, overall_score, score_trend, score_change, top_risks, upcoming_deadlines, team_workload } = executiveData

  const trafficLightColors = {
    green: { bg: 'bg-green-500', ring: 'ring-green-200', text: 'text-green-700', label: 'Gut' },
    yellow: { bg: 'bg-yellow-500', ring: 'ring-yellow-200', text: 'text-yellow-700', label: 'Achtung' },
    red: { bg: 'bg-red-500', ring: 'ring-red-200', text: 'text-red-700', label: 'Kritisch' },
  }

  const tlConfig = trafficLightColors[traffic_light_status]

  return (
    <div className="space-y-6">
      {/* Header Row: Traffic Light + Key Metrics */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Traffic Light Status */}
        <div className="bg-white rounded-xl shadow-sm border p-6 flex flex-col items-center justify-center">
          <div
            className={`w-28 h-28 rounded-full flex items-center justify-center ${tlConfig.bg} ring-8 ${tlConfig.ring} shadow-lg mb-4`}
          >
            <span className="text-4xl font-bold text-white">{overall_score.toFixed(0)}%</span>
          </div>
          <p className={`text-lg font-semibold ${tlConfig.text}`}>{tlConfig.label}</p>
          <p className="text-sm text-slate-500 mt-1">Erfuellungsgrad</p>
          {score_change !== null && (
            <p className={`text-sm mt-2 ${score_change >= 0 ? 'text-green-600' : 'text-red-600'}`}>
              {score_change >= 0 ? '↑' : '↓'} {Math.abs(score_change).toFixed(1)}% zum Vormonat
            </p>
          )}
        </div>

        {/* Metric Cards */}
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm text-slate-500">Verordnungen</p>
            <span className="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center">
              <svg className="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
            </span>
          </div>
          <p className="text-3xl font-bold text-slate-900">{executiveData.total_regulations}</p>
          <p className="text-sm text-slate-500 mt-1">{executiveData.total_requirements} Anforderungen</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm border p-6">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm text-slate-500">Massnahmen</p>
            <span className="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center">
              <svg className="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </span>
          </div>
          <p className="text-3xl font-bold text-slate-900">{executiveData.total_controls}</p>
          <p className="text-sm text-slate-500 mt-1">Technische Controls</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm border p-6">
          <div className="flex items-center justify-between mb-2">
            <p className="text-sm text-slate-500">Offene Risiken</p>
            <span className="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center">
              <svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
            </span>
          </div>
          <p className="text-3xl font-bold text-slate-900">{executiveData.open_risks}</p>
          <p className="text-sm text-slate-500 mt-1">Unmitigiert</p>
        </div>
      </div>

      {/* Charts Row */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Trend Chart */}
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-slate-900">Compliance-Trend (12 Monate)</h3>
            <button onClick={loadExecutiveData} className="text-sm text-primary-600 hover:text-primary-700">
              Aktualisieren
            </button>
          </div>
          <div className="h-48">
            <ComplianceTrendChart data={score_trend} lang="de" height={180} />
          </div>
        </div>

        {/* Top Risks */}
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-lg font-semibold text-slate-900 mb-4">Top 5 Risiken</h3>
          {top_risks.length === 0 ? (
            <p className="text-slate-500 text-center py-8">Keine offenen Risiken</p>
          ) : (
            <div className="space-y-3">
              {top_risks.map((risk) => {
                const riskColors = {
                  critical: 'bg-red-100 text-red-700 border-red-200',
                  high: 'bg-orange-100 text-orange-700 border-orange-200',
                  medium: 'bg-yellow-100 text-yellow-700 border-yellow-200',
                  low: 'bg-green-100 text-green-700 border-green-200',
                }
                return (
                  <div key={risk.id} className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                    <span className={`px-2 py-1 text-xs font-medium rounded border ${riskColors[risk.risk_level as keyof typeof riskColors] || riskColors.medium}`}>
                      {risk.risk_level.toUpperCase()}
                    </span>
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-slate-900 truncate">{risk.title}</p>
                      <p className="text-xs text-slate-500">{risk.owner || 'Kein Owner'}</p>
                    </div>
                    <span className="text-xs text-slate-400">{risk.risk_id}</span>
                  </div>
                )
              })}
            </div>
          )}
        </div>
      </div>

      {/* Bottom Row: Deadlines + Workload */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Upcoming Deadlines */}
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-lg font-semibold text-slate-900 mb-4">Naechste Fristen</h3>
          {upcoming_deadlines.length === 0 ? (
            <p className="text-slate-500 text-center py-8">Keine anstehenden Fristen</p>
          ) : (
            <div className="space-y-2">
              {upcoming_deadlines.slice(0, 5).map((deadline) => {
                const statusColors = {
                  overdue: 'bg-red-100 text-red-700',
                  at_risk: 'bg-yellow-100 text-yellow-700',
                  on_track: 'bg-green-100 text-green-700',
                }
                return (
                  <div key={deadline.id} className="flex items-center gap-3 p-3 bg-slate-50 rounded-lg">
                    <span className={`px-2 py-1 text-xs font-medium rounded ${statusColors[deadline.status as keyof typeof statusColors] || statusColors.on_track}`}>
                      {deadline.days_remaining < 0
                        ? `${Math.abs(deadline.days_remaining)}d ueberfaellig`
                        : deadline.days_remaining === 0
                        ? 'Heute'
                        : `${deadline.days_remaining}d`}
                    </span>
                    <div className="flex-1 min-w-0">
                      <p className="text-sm font-medium text-slate-900 truncate">{deadline.title}</p>
                      <p className="text-xs text-slate-500">{new Date(deadline.deadline).toLocaleDateString('de-DE')}</p>
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </div>

        {/* Team Workload */}
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-lg font-semibold text-slate-900 mb-4">Team-Auslastung</h3>
          {team_workload.length === 0 ? (
            <p className="text-slate-500 text-center py-8">Keine Daten verfuegbar</p>
          ) : (
            <div className="space-y-3">
              {team_workload.slice(0, 5).map((member) => (
                <div key={member.name}>
                  <div className="flex justify-between text-sm mb-1">
                    <span className="font-medium text-slate-700">{member.name}</span>
                    <span className="text-slate-500">
                      {member.completed_tasks}/{member.total_tasks} ({member.completion_rate.toFixed(0)}%)
                    </span>
                  </div>
                  <div className="h-2 bg-slate-200 rounded-full overflow-hidden flex">
                    <div
                      className="bg-green-500 h-full"
                      style={{ width: `${(member.completed_tasks / member.total_tasks) * 100}%` }}
                    />
                    <div
                      className="bg-yellow-500 h-full"
                      style={{ width: `${(member.in_progress_tasks / member.total_tasks) * 100}%` }}
                    />
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Last Updated */}
      <div className="text-right text-sm text-slate-400">
        Zuletzt aktualisiert: {new Date(executiveData.last_updated).toLocaleString('de-DE')}
      </div>
    </div>
  )
}

// ============================================================================
// Architektur Tab
// ============================================================================

function ArchitekturTab() {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h2 className="text-xl font-semibold text-slate-900 mb-4">Systemarchitektur</h2>
        <p className="text-slate-600 mb-6">
          Das Compliance & Audit Framework ist modular aufgebaut und integriert sich nahtlos in die bestehende Breakpilot-Infrastruktur.
        </p>

        {/* Architecture Diagram */}
        <div className="bg-slate-50 rounded-lg p-6 mb-6">
          <pre className="text-sm text-slate-700 font-mono whitespace-pre overflow-x-auto">{`
┌─────────────────────────────────────────────────────────────────────────┐
│                        COMPLIANCE FRAMEWORK                              │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   ┌─────────────┐    ┌─────────────┐    ┌─────────────┐                │
│   │   Next.js   │    │   FastAPI   │    │  PostgreSQL │                │
│   │  Frontend   │───▶│   Backend   │───▶│   Database  │                │
│   │  (Port 3000)│    │  (Port 8000)│    │  (Port 5432)│                │
│   └─────────────┘    └─────────────┘    └─────────────┘                │
│         │                  │                   │                        │
│         │                  │                   │                        │
│   ┌─────▼─────┐      ┌─────▼─────┐      ┌─────▼─────┐                  │
│   │  Admin UI │      │ Compliance │      │  7 Tables │                  │
│   │  /admin/  │      │   Module   │      │ compliance_│                  │
│   │compliance/│      │ /backend/  │      │ regulations│                  │
│   └───────────┘      │compliance/ │      │ _controls  │                  │
│                      └───────────┘      │ _evidence  │                  │
│                                         │ _risks     │                  │
│                                         │ ...        │                  │
│                                         └───────────┘                  │
└─────────────────────────────────────────────────────────────────────────┘
          `}</pre>
        </div>

        {/* Component Details */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="border rounded-lg p-4">
            <h3 className="font-semibold text-slate-900 mb-2">Frontend (Next.js)</h3>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- Dashboard mit Compliance Score</li>
              <li>- Control Catalogue mit Filtern</li>
              <li>- Evidence Upload & Management</li>
              <li>- Risk Matrix Visualisierung</li>
              <li>- Audit Export Wizard</li>
            </ul>
          </div>

          <div className="border rounded-lg p-4">
            <h3 className="font-semibold text-slate-900 mb-2">Backend (FastAPI)</h3>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- REST API Endpoints</li>
              <li>- Repository Pattern</li>
              <li>- Pydantic Schemas</li>
              <li>- Seeder Service</li>
              <li>- Export Generator</li>
            </ul>
          </div>

          <div className="border rounded-lg p-4">
            <h3 className="font-semibold text-slate-900 mb-2">Datenbank (PostgreSQL)</h3>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- compliance_regulations</li>
              <li>- compliance_requirements</li>
              <li>- compliance_controls</li>
              <li>- compliance_control_mappings</li>
              <li>- compliance_evidence</li>
              <li>- compliance_risks</li>
              <li>- compliance_audit_exports</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Data Flow */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Datenfluss</h3>
        <div className="space-y-4">
          <div className="flex items-center gap-4 p-4 bg-blue-50 rounded-lg">
            <div className="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold">1</div>
            <div>
              <p className="font-medium text-slate-900">Regulations & Requirements</p>
              <p className="text-sm text-slate-600">EU-Verordnungen, BSI-Standards werden als Seed-Daten geladen</p>
            </div>
          </div>
          <div className="flex items-center gap-4 p-4 bg-green-50 rounded-lg">
            <div className="w-8 h-8 bg-green-500 text-white rounded-full flex items-center justify-center font-bold">2</div>
            <div>
              <p className="font-medium text-slate-900">Controls & Mappings</p>
              <p className="text-sm text-slate-600">Technische Controls werden Requirements zugeordnet</p>
            </div>
          </div>
          <div className="flex items-center gap-4 p-4 bg-purple-50 rounded-lg">
            <div className="w-8 h-8 bg-purple-500 text-white rounded-full flex items-center justify-center font-bold">3</div>
            <div>
              <p className="font-medium text-slate-900">Evidence Collection</p>
              <p className="text-sm text-slate-600">Nachweise werden manuell oder automatisiert erfasst</p>
            </div>
          </div>
          <div className="flex items-center gap-4 p-4 bg-orange-50 rounded-lg">
            <div className="w-8 h-8 bg-orange-500 text-white rounded-full flex items-center justify-center font-bold">4</div>
            <div>
              <p className="font-medium text-slate-900">Audit Export</p>
              <p className="text-sm text-slate-600">ZIP-Pakete fuer externe Pruefer generieren</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// ============================================================================
// Roadmap Tab
// ============================================================================

function RoadmapTab() {
  const completedCount = BACKLOG_ITEMS.filter(i => i.status === 'completed').length
  const inProgressCount = BACKLOG_ITEMS.filter(i => i.status === 'in_progress').length
  const plannedCount = BACKLOG_ITEMS.filter(i => i.status === 'planned').length

  return (
    <div className="space-y-6">
      {/* Progress Overview */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-green-50 border border-green-200 rounded-xl p-6">
          <p className="text-sm text-green-600 font-medium">Abgeschlossen</p>
          <p className="text-3xl font-bold text-green-700">{completedCount}</p>
        </div>
        <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6">
          <p className="text-sm text-yellow-600 font-medium">In Bearbeitung</p>
          <p className="text-3xl font-bold text-yellow-700">{inProgressCount}</p>
        </div>
        <div className="bg-slate-50 border border-slate-200 rounded-xl p-6">
          <p className="text-sm text-slate-600 font-medium">Geplant</p>
          <p className="text-3xl font-bold text-slate-700">{plannedCount}</p>
        </div>
      </div>

      {/* Implemented Features */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Implementierte Features (v2.0 - Stand: 2026-01-17)</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            '558 Requirements aus 19 Regulations extrahiert',
            '44 Controls in 9 Domains mit Auto-Mapping',
            '474 Control-Mappings automatisch generiert',
            '30 Service-Module in Registry kartiert',
            'AI-Interpretation fuer alle Requirements',
            'EU-Lex Scraper fuer Live-Regulation-Fetch',
            'BSI-TR-03161 PDF Parser (alle 3 Teile)',
            'Evidence Management mit File Upload',
            'Risk Matrix (5x5 Likelihood x Impact)',
            'Audit Export Wizard (ZIP Generator)',
            'Compliance Score Berechnung',
            'Dashboard mit Echtzeit-Statistiken',
          ].map((feature, idx) => (
            <div key={idx} className="flex items-center gap-2">
              <svg className="w-5 h-5 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-slate-700">{feature}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Backlog */}
      <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
        <div className="p-4 border-b">
          <h3 className="text-lg font-semibold text-slate-900">Backlog</h3>
        </div>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead className="bg-slate-50">
              <tr>
                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Titel</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Kategorie</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Prioritaet</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-slate-500 uppercase">Status</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-200">
              {BACKLOG_ITEMS.map((item) => (
                <tr key={item.id} className="hover:bg-slate-50">
                  <td className="px-4 py-3">
                    <span className="font-medium text-slate-900">{item.title}</span>
                  </td>
                  <td className="px-4 py-3">
                    <span className="text-sm text-slate-600">{item.category}</span>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <span className={`px-2 py-1 text-xs rounded-full ${
                      item.priority === 'high' ? 'bg-red-100 text-red-700' :
                      item.priority === 'medium' ? 'bg-yellow-100 text-yellow-700' :
                      'bg-slate-100 text-slate-700'
                    }`}>
                      {item.priority}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-center">
                    <span className={`px-2 py-1 text-xs rounded-full ${
                      item.status === 'completed' ? 'bg-green-100 text-green-700' :
                      item.status === 'in_progress' ? 'bg-blue-100 text-blue-700' :
                      'bg-slate-100 text-slate-700'
                    }`}>
                      {item.status === 'completed' ? 'Fertig' :
                       item.status === 'in_progress' ? 'In Arbeit' : 'Geplant'}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

// ============================================================================
// Technisch Tab
// ============================================================================

function TechnischTab() {
  return (
    <div className="space-y-6">
      {/* API Endpoints */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">API Endpoints</h3>
        <div className="space-y-3">
          {[
            { method: 'GET', path: '/api/v1/compliance/regulations', desc: 'Liste aller Verordnungen' },
            { method: 'GET', path: '/api/v1/compliance/controls', desc: 'Control Catalogue' },
            { method: 'PUT', path: '/api/v1/compliance/controls/{id}/review', desc: 'Control Review' },
            { method: 'GET', path: '/api/v1/compliance/evidence', desc: 'Evidence Liste' },
            { method: 'POST', path: '/api/v1/compliance/evidence/upload', desc: 'Evidence Upload' },
            { method: 'GET', path: '/api/v1/compliance/risks', desc: 'Risk Register' },
            { method: 'GET', path: '/api/v1/compliance/risks/matrix', desc: 'Risk Matrix' },
            { method: 'GET', path: '/api/v1/compliance/dashboard', desc: 'Dashboard Stats' },
            { method: 'POST', path: '/api/v1/compliance/export', desc: 'Audit Export erstellen' },
            { method: 'POST', path: '/api/v1/compliance/seed', desc: 'Datenbank seeden' },
          ].map((ep, idx) => (
            <div key={idx} className="flex items-center gap-4 p-3 bg-slate-50 rounded-lg font-mono text-sm">
              <span className={`px-2 py-1 rounded text-xs font-bold ${
                ep.method === 'GET' ? 'bg-green-100 text-green-700' :
                ep.method === 'POST' ? 'bg-blue-100 text-blue-700' :
                'bg-yellow-100 text-yellow-700'
              }`}>
                {ep.method}
              </span>
              <span className="text-slate-700 flex-1">{ep.path}</span>
              <span className="text-slate-500 text-xs">{ep.desc}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Database Schema */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Datenmodell</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {[
            { table: 'compliance_regulations', fields: 'id, code, name, regulation_type, source_url, effective_date' },
            { table: 'compliance_requirements', fields: 'id, regulation_id, article, title, description, is_applicable' },
            { table: 'compliance_controls', fields: 'id, control_id, domain, title, status, is_automated, owner' },
            { table: 'compliance_control_mappings', fields: 'id, requirement_id, control_id, coverage_level' },
            { table: 'compliance_evidence', fields: 'id, control_id, evidence_type, title, artifact_path, status' },
            { table: 'compliance_risks', fields: 'id, risk_id, title, likelihood, impact, inherent_risk, status' },
            { table: 'compliance_audit_exports', fields: 'id, export_type, status, file_path, file_hash' },
          ].map((t, idx) => (
            <div key={idx} className="border rounded-lg p-4">
              <h4 className="font-mono font-semibold text-primary-600 mb-2">{t.table}</h4>
              <p className="text-xs text-slate-500 font-mono">{t.fields}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Enums */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Enums</h3>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="border rounded-lg p-4">
            <h4 className="font-semibold text-slate-900 mb-2">ControlDomainEnum</h4>
            <div className="flex flex-wrap gap-1">
              {['gov', 'priv', 'iam', 'crypto', 'sdlc', 'ops', 'ai', 'cra', 'aud'].map((d) => (
                <span key={d} className="px-2 py-0.5 bg-slate-100 text-slate-700 text-xs rounded">{d}</span>
              ))}
            </div>
          </div>
          <div className="border rounded-lg p-4">
            <h4 className="font-semibold text-slate-900 mb-2">ControlStatusEnum</h4>
            <div className="flex flex-wrap gap-1">
              {['pass', 'partial', 'fail', 'planned', 'n/a'].map((s) => (
                <span key={s} className="px-2 py-0.5 bg-slate-100 text-slate-700 text-xs rounded">{s}</span>
              ))}
            </div>
          </div>
          <div className="border rounded-lg p-4">
            <h4 className="font-semibold text-slate-900 mb-2">RiskLevelEnum</h4>
            <div className="flex flex-wrap gap-1">
              {['low', 'medium', 'high', 'critical'].map((l) => (
                <span key={l} className="px-2 py-0.5 bg-slate-100 text-slate-700 text-xs rounded">{l}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// ============================================================================
// Audit Tab
// ============================================================================

function AuditTab() {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <div className="flex items-center justify-between mb-4">
          <h3 className="text-lg font-semibold text-slate-900">Audit Export</h3>
          <Link
            href="/admin/compliance/export"
            className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 text-sm"
          >
            Export Wizard oeffnen
          </Link>
        </div>
        <p className="text-slate-600 mb-6">
          Erstellen Sie ZIP-Pakete mit allen relevanten Compliance-Daten fuer externe Pruefer.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="border rounded-lg p-4">
            <h4 className="font-semibold text-slate-900 mb-2">Vollstaendiger Export</h4>
            <p className="text-sm text-slate-600">Alle Daten inkl. Regulations, Controls, Evidence, Risks</p>
          </div>
          <div className="border rounded-lg p-4">
            <h4 className="font-semibold text-slate-900 mb-2">Nur Controls</h4>
            <p className="text-sm text-slate-600">Control Catalogue mit Mappings</p>
          </div>
          <div className="border rounded-lg p-4">
            <h4 className="font-semibold text-slate-900 mb-2">Nur Evidence</h4>
            <p className="text-sm text-slate-600">Evidence-Dateien und Metadaten</p>
          </div>
        </div>
      </div>

      {/* Export Format */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Export Format</h3>
        <div className="bg-slate-50 rounded-lg p-4 font-mono text-sm">
          <pre className="whitespace-pre overflow-x-auto">{`
audit_export_2026-01-16/
├── index.html                    # Navigations-Uebersicht
├── summary.json                  # Maschinenlesbare Zusammenfassung
├── regulations/
│   ├── gdpr.json
│   ├── aiact.json
│   └── ...
├── controls/
│   ├── control_catalogue.json
│   └── control_catalogue.xlsx
├── evidence/
│   ├── scan_reports/
│   ├── policies/
│   └── configs/
├── risks/
│   └── risk_register.json
└── README.md                     # Erklaerung fuer Pruefer
          `}</pre>
        </div>
      </div>

      {/* Audit Quick Links */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <Link
          href="/admin/compliance/controls"
          className="bg-white rounded-xl shadow-sm border p-6 hover:border-primary-500 transition-colors"
        >
          <h4 className="font-semibold text-slate-900 mb-2">Control Reviews</h4>
          <p className="text-sm text-slate-600">Controls ueberpruefen und Status aktualisieren</p>
        </Link>
        <Link
          href="/admin/compliance/evidence"
          className="bg-white rounded-xl shadow-sm border p-6 hover:border-primary-500 transition-colors"
        >
          <h4 className="font-semibold text-slate-900 mb-2">Evidence Management</h4>
          <p className="text-sm text-slate-600">Nachweise hochladen und verwalten</p>
        </Link>
      </div>
    </div>
  )
}

// ============================================================================
// Dokumentation Tab
// ============================================================================

function DokumentationTab() {
  return (
    <div className="space-y-6">
      {/* Quick Start Guide */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Quick Start Guide</h3>
        <div className="space-y-4">
          <div className="flex gap-4">
            <div className="w-8 h-8 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center font-bold flex-shrink-0">1</div>
            <div>
              <p className="font-medium text-slate-900">Datenbank initialisieren</p>
              <p className="text-sm text-slate-600">Klicken Sie auf "Datenbank initialisieren" im Dashboard, um die Seed-Daten zu laden.</p>
            </div>
          </div>
          <div className="flex gap-4">
            <div className="w-8 h-8 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center font-bold flex-shrink-0">2</div>
            <div>
              <p className="font-medium text-slate-900">Controls reviewen</p>
              <p className="text-sm text-slate-600">Gehen Sie zum Control Catalogue und bewerten Sie den Status jedes Controls.</p>
            </div>
          </div>
          <div className="flex gap-4">
            <div className="w-8 h-8 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center font-bold flex-shrink-0">3</div>
            <div>
              <p className="font-medium text-slate-900">Evidence hochladen</p>
              <p className="text-sm text-slate-600">Laden Sie Nachweise (Scan-Reports, Policies, Screenshots) fuer Ihre Controls hoch.</p>
            </div>
          </div>
          <div className="flex gap-4">
            <div className="w-8 h-8 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center font-bold flex-shrink-0">4</div>
            <div>
              <p className="font-medium text-slate-900">Risiken bewerten</p>
              <p className="text-sm text-slate-600">Dokumentieren Sie identifizierte Risiken in der Risk Matrix.</p>
            </div>
          </div>
          <div className="flex gap-4">
            <div className="w-8 h-8 bg-primary-100 text-primary-600 rounded-full flex items-center justify-center font-bold flex-shrink-0">5</div>
            <div>
              <p className="font-medium text-slate-900">Audit Export</p>
              <p className="text-sm text-slate-600">Generieren Sie ein ZIP-Paket fuer externe Pruefer.</p>
            </div>
          </div>
        </div>
      </div>

      {/* Regulatory Framework */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Abgedeckte Verordnungen</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <h4 className="font-medium text-slate-900 mb-2">EU-Verordnungen & Richtlinien</h4>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- DSGVO (Datenschutz-Grundverordnung)</li>
              <li>- AI Act (KI-Verordnung)</li>
              <li>- CRA (Cyber Resilience Act)</li>
              <li>- NIS2 (Netzwerk- und Informationssicherheit)</li>
              <li>- DSA (Digital Services Act)</li>
              <li>- Data Act (Datenverordnung)</li>
              <li>- DGA (Data Governance Act)</li>
              <li>- ePrivacy-Richtlinie</li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium text-slate-900 mb-2">Deutsche Standards</h4>
            <ul className="text-sm text-slate-600 space-y-1">
              <li>- BSI-TR-03161-1 (Mobile Anwendungen Teil 1)</li>
              <li>- BSI-TR-03161-2 (Mobile Anwendungen Teil 2)</li>
              <li>- BSI-TR-03161-3 (Mobile Anwendungen Teil 3)</li>
              <li>- TDDDG (Telekommunikation-Digitale-Dienste-Datenschutz)</li>
            </ul>
          </div>
        </div>
      </div>

      {/* Control Domains */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Control Domains</h3>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
          {Object.entries(DOMAIN_LABELS).map(([key, label]) => (
            <div key={key} className="border rounded-lg p-4">
              <span className="font-mono text-xs text-primary-600 bg-primary-50 px-2 py-0.5 rounded">{key}</span>
              <p className="font-medium text-slate-900 mt-2">{label}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Links */}
      <div className="bg-white rounded-xl shadow-sm border p-6">
        <h3 className="text-lg font-semibold text-slate-900 mb-4">Externe Ressourcen</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <a
            href="https://eur-lex.europa.eu/eli/reg/2016/679/oj/eng"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 p-3 border rounded-lg hover:bg-slate-50"
          >
            <svg className="w-5 h-5 text-slate-400" 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>
            <span className="text-sm text-slate-700">DSGVO - EUR-Lex</span>
          </a>
          <a
            href="https://eur-lex.europa.eu/eli/reg/2024/1689/oj/eng"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 p-3 border rounded-lg hover:bg-slate-50"
          >
            <svg className="w-5 h-5 text-slate-400" 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>
            <span className="text-sm text-slate-700">AI Act - EUR-Lex</span>
          </a>
          <a
            href="https://eur-lex.europa.eu/eli/reg/2024/2847/oj/eng"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 p-3 border rounded-lg hover:bg-slate-50"
          >
            <svg className="w-5 h-5 text-slate-400" 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>
            <span className="text-sm text-slate-700">CRA - EUR-Lex</span>
          </a>
          <a
            href="https://www.bsi.bund.de/DE/Themen/Unternehmen-und-Organisationen/Standards-und-Zertifizierung/Technische-Richtlinien/TR-nach-Thema-sortiert/tr03161/tr-03161.html"
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 p-3 border rounded-lg hover:bg-slate-50"
          >
            <svg className="w-5 h-5 text-slate-400" 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>
            <span className="text-sm text-slate-700">BSI-TR-03161 - BSI</span>
          </a>
        </div>
      </div>
    </div>
  )
}