'use client'

/**
 * RAG & Legal Corpus Management
 *
 * Verwaltet das Legal Corpus RAG System fuer Compliance.
 * Zeigt Status aller 19 Regulierungen, Chunks und ermoeglicht Suche.
 */

import React, { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import { PagePurpose } from '@/components/common/PagePurpose'
import { AIModuleSidebarResponsive } from '@/components/ai/AIModuleSidebar'

// API uses local proxy route to klausur-service
const API_PROXY = '/api/legal-corpus'

// Types
interface RegulationStatus {
  code: string
  name: string
  fullName: string
  type: string
  chunkCount: number
  expectedRequirements: number
  sourceUrl: string
  status: 'ready' | 'empty' | 'error'
}

interface CollectionStatus {
  collection: string
  totalPoints: number
  vectorSize: number
  status: string
  regulations: Record<string, number>
}

interface SearchResult {
  text: string
  regulation_code: string
  regulation_name: string
  article: string | null
  paragraph: string | null
  source_url: string
  score: number
}

// Tab definitions
type TabId = 'overview' | 'regulations' | 'map' | 'search' | 'data' | 'ingestion' | 'pipeline'

// Custom document type
interface CustomDocument {
  id: string
  code: string
  title: string
  filename?: string
  url?: string
  document_type: string
  uploaded_at: string
  status: 'uploaded' | 'queued' | 'fetching' | 'processing' | 'indexed' | 'error'
  chunk_count: number
  error?: string
}

// Pipeline types
interface Validation {
  name: string
  status: 'passed' | 'warning' | 'failed' | 'not_run'
  expected: any
  actual: any
  message: string
}

interface PipelineCheckpoint {
  phase: string
  name: string
  status: 'pending' | 'running' | 'completed' | 'failed' | 'skipped'
  started_at: string | null
  completed_at: string | null
  duration_seconds: number | null
  metrics: Record<string, any>
  validations: Validation[]
  error: string | null
}

interface PipelineState {
  status: string
  pipeline_id: string | null
  started_at: string | null
  completed_at: string | null
  current_phase: string | null
  checkpoints: PipelineCheckpoint[]
  summary: Record<string, any>
  validation_summary?: {
    passed: number
    warning: number
    failed: number
    total: number
  }
}

// All regulations with descriptions
const REGULATIONS = [
  {
    code: 'GDPR',
    name: 'DSGVO',
    fullName: 'Datenschutz-Grundverordnung (GDPR)',
    type: 'eu_regulation',
    expected: 99,
    description: 'Die DSGVO ist das zentrale Datenschutzgesetz der EU. Sie regelt die Verarbeitung personenbezogener Daten und gibt Betroffenen umfangreiche Rechte (Auskunft, Loeschung, Datenportabilitaet). Gilt fuer alle Unternehmen, die Daten von EU-Buergern verarbeiten.',
    relevantFor: ['Alle Unternehmen mit EU-Kunden', 'Datenverarbeiter', 'Auftragsverarbeiter'],
    keyTopics: ['Einwilligung', 'Betroffenenrechte', 'Datenschutz-Folgenabschaetzung', 'Auftragsverarbeitung', 'Bussgelder bis 4% Umsatz'],
    effectiveDate: '25. Mai 2018'
  },
  {
    code: 'EPRIVACY',
    name: 'ePrivacy-Richtlinie',
    fullName: 'Richtlinie 2002/58/EG (ePrivacy)',
    type: 'eu_directive',
    expected: 25,
    description: 'Ergaenzt die DSGVO speziell fuer elektronische Kommunikation. Regelt Cookies, Tracking, Direktmarketing und Vertraulichkeit der Kommunikation. Wird durch nationale Gesetze wie das TDDDG umgesetzt.',
    relevantFor: ['Website-Betreiber', 'App-Entwickler', 'Marketing-Abteilungen', 'Telekommunikationsanbieter'],
    keyTopics: ['Cookie-Consent', 'Tracking', 'E-Mail-Marketing', 'Vertraulichkeit'],
    effectiveDate: '31. Juli 2002'
  },
  {
    code: 'TDDDG',
    name: 'TDDDG',
    fullName: 'Telekommunikation-Digitale-Dienste-Datenschutz-Gesetz',
    type: 'de_law',
    expected: 30,
    description: 'Deutsches Umsetzungsgesetz der ePrivacy-Richtlinie. Regelt den Datenschutz bei Telemedien und Telekommunikation. Enthaelt die strengen deutschen Cookie-Consent-Anforderungen.',
    relevantFor: ['Deutsche Unternehmen', 'Website-Betreiber mit deutschen Nutzern', 'App-Anbieter'],
    keyTopics: ['Cookie-Banner', 'Einwilligung fuer Endgeraetezugriff', 'Tracking-Consent', 'Bestandsdaten'],
    effectiveDate: '1. Dezember 2021'
  },
  {
    code: 'SCC',
    name: 'Standardvertragsklauseln',
    fullName: 'EU-Standardvertragsklauseln (2021/914/EU)',
    type: 'eu_regulation',
    expected: 18,
    description: 'Vorgefertigte Vertragsklauseln fuer den internationalen Datentransfer. Erforderlich, wenn personenbezogene Daten in Drittlaender ohne Angemessenheitsbeschluss uebermittelt werden (z.B. USA vor DPF).',
    relevantFor: ['Unternehmen mit Drittland-Transfers', 'Cloud-Nutzer', 'Internationale Konzerne'],
    keyTopics: ['Drittlandtransfer', 'Controller-to-Controller', 'Controller-to-Processor', 'TIA (Transfer Impact Assessment)'],
    effectiveDate: '27. Juni 2021'
  },
  {
    code: 'DPF',
    name: 'EU-US Data Privacy Framework',
    fullName: 'EU-US Data Privacy Framework',
    type: 'eu_regulation',
    expected: 12,
    description: 'Angemessenheitsbeschluss fuer Datentransfers in die USA. Nachfolger des gekippten Privacy Shield. Ermoeglicht Datenuebermittlungen an zertifizierte US-Unternehmen ohne zusaetzliche Garantien.',
    relevantFor: ['Unternehmen mit US-Dienstleistern', 'Cloud-Nutzer (AWS, Google, Microsoft)', 'SaaS-Anwender'],
    keyTopics: ['US-Datentransfer', 'Zertifizierung', 'Redress-Mechanismus', 'Privacy Shield Nachfolger'],
    effectiveDate: '10. Juli 2023'
  },
  {
    code: 'AIACT',
    name: 'EU AI Act',
    fullName: 'Verordnung (EU) 2024/1689 - KI-Verordnung',
    type: 'eu_regulation',
    expected: 85,
    description: 'Weltweit erste umfassende KI-Regulierung. Klassifiziert KI-Systeme nach Risiko (verboten, hoch, begrenzt, minimal) und stellt entsprechende Anforderungen. Hochrisiko-KI benoetigt CE-Kennzeichnung.',
    relevantFor: ['KI-Entwickler', 'KI-Anwender', 'Hersteller von KI-Produkten', 'Importeure'],
    keyTopics: ['Risikoklassifizierung', 'Hochrisiko-KI', 'Verbotene KI', 'Transparenzpflichten', 'CE-Kennzeichnung'],
    effectiveDate: '1. August 2024 (gestaffelt bis 2027)'
  },
  {
    code: 'CRA',
    name: 'Cyber Resilience Act',
    fullName: 'Verordnung (EU) 2024/2847 - Cyber Resilience Act',
    type: 'eu_regulation',
    expected: 45,
    description: 'Cybersicherheitsanforderungen fuer Produkte mit digitalen Elementen. Verpflichtet Hersteller zu Security-by-Design, Schwachstellenmanagement und Security-Updates ueber den Lebenszyklus.',
    relevantFor: ['IoT-Hersteller', 'Software-Entwickler', 'Hardware-Hersteller', 'Importeure'],
    keyTopics: ['Security by Design', 'Schwachstellenmanagement', 'SBOM', 'CE-Kennzeichnung', 'Security Updates'],
    effectiveDate: '2024 (Uebergangsfristen bis 2027)'
  },
  {
    code: 'NIS2',
    name: 'NIS2-Richtlinie',
    fullName: 'Richtlinie (EU) 2022/2555 - Network and Information Security',
    type: 'eu_directive',
    expected: 46,
    description: 'Cybersicherheitsrichtlinie fuer kritische und wichtige Einrichtungen. Erweitert NIS1 erheblich auf mehr Sektoren. Fordert Risikomanagement, Incident Reporting und Lieferkettensicherheit.',
    relevantFor: ['Kritische Infrastrukturen (KRITIS)', 'Gesundheitswesen', 'Energie', 'Transport', 'Digitale Dienste', 'Oeffentliche Verwaltung'],
    keyTopics: ['Cybersicherheits-Risikomanagement', 'Incident Reporting (24h)', 'Lieferkettensicherheit', 'Geschaeftsfuehrer-Haftung'],
    effectiveDate: '17. Oktober 2024 (nationale Umsetzung)'
  },
  {
    code: 'EUCSA',
    name: 'EU Cybersecurity Act',
    fullName: 'Verordnung (EU) 2019/881 - EU Cybersecurity Act',
    type: 'eu_regulation',
    expected: 35,
    description: 'Schafft den EU-Rahmen fuer Cybersicherheitszertifizierung und staerkt die ENISA. Ermoeglicht EU-weite Zertifizierungsschemata fuer IT-Produkte, -Dienste und -Prozesse.',
    relevantFor: ['IT-Produkthersteller', 'Cloud-Anbieter', 'Zertifizierungsstellen', 'Oeffentliche Auftraggeber'],
    keyTopics: ['Cybersicherheitszertifizierung', 'ENISA', 'Vertrauensstufen (basic/substantial/high)', 'EUCC Schema'],
    effectiveDate: '27. Juni 2019'
  },
  {
    code: 'DATAACT',
    name: 'Data Act',
    fullName: 'Verordnung (EU) 2023/2854 - Data Act',
    type: 'eu_regulation',
    expected: 42,
    description: 'Regelt den Zugang zu und die Nutzung von Daten. Gibt Nutzern Rechte an Daten, die durch vernetzte Produkte erzeugt werden. Ermoeglicht Datenweitergabe und Cloud-Wechsel.',
    relevantFor: ['IoT-Hersteller', 'Cloud-Anbieter', 'Dateninhaber', 'Datennutzer', 'Oeffentliche Stellen'],
    keyTopics: ['Datenzugang', 'Datenportabilitaet', 'Cloud-Switching', 'B2B-Datenteilung', 'IoT-Daten'],
    effectiveDate: '12. September 2025'
  },
  {
    code: 'DGA',
    name: 'Data Governance Act',
    fullName: 'Verordnung (EU) 2022/868 - Data Governance Act',
    type: 'eu_regulation',
    expected: 35,
    description: 'Schafft Rahmenbedingungen fuer Datenmaerkte und Datenaltruismus. Regelt Datenvermittlungsdienste und die Weiterverwendung geschuetzter oeffentlicher Daten.',
    relevantFor: ['Datenvermittler', 'Oeffentliche Stellen', 'Forschungseinrichtungen', 'Datenaltruismus-Organisationen'],
    keyTopics: ['Datenvermittlung', 'Datenaltruismus', 'Oeffentliche Daten', 'Datentreuhaender'],
    effectiveDate: '24. September 2023'
  },
  {
    code: 'DSA',
    name: 'Digital Services Act',
    fullName: 'Verordnung (EU) 2022/2065 - Digital Services Act',
    type: 'eu_regulation',
    expected: 93,
    description: 'Reguliert digitale Dienste und Plattformen. Schafft Pflichten fuer Online-Vermittler, Hosting-Dienste und Plattformen. Sehr grosse Plattformen (VLOPs) haben erweiterte Pflichten.',
    relevantFor: ['Online-Plattformen', 'Marktplaetze', 'Social Media', 'Hosting-Anbieter', 'Suchmaschinen'],
    keyTopics: ['Notice-and-Action', 'Transparenz', 'Illegale Inhalte', 'VLOP-Pflichten', 'Algorithmen-Transparenz'],
    effectiveDate: '17. Februar 2024'
  },
  {
    code: 'EAA',
    name: 'European Accessibility Act',
    fullName: 'Richtlinie (EU) 2019/882 - Barrierefreiheitsanforderungen',
    type: 'eu_directive',
    expected: 25,
    description: 'Barrierefreiheitsanforderungen fuer Produkte und Dienstleistungen. Betrifft Computer, Smartphones, Bankdienstleistungen, E-Commerce, E-Books und mehr.',
    relevantFor: ['E-Commerce', 'Banken', 'Telekommunikation', 'Verkehrsdienste', 'Medienanbieter'],
    keyTopics: ['Barrierefreiheit', 'WCAG', 'Assistive Technologien', 'Ausnahmen fuer KMU'],
    effectiveDate: '28. Juni 2025'
  },
  {
    code: 'DSM',
    name: 'DSM-Urheberrechtsrichtlinie',
    fullName: 'Richtlinie (EU) 2019/790 - Digital Single Market Copyright',
    type: 'eu_directive',
    expected: 22,
    description: 'Modernisiert das EU-Urheberrecht fuer das digitale Zeitalter. Enthaelt kontroverse Artikel zu Uploadfiltern (Art. 17) und Leistungsschutzrecht fuer Presseverleger (Art. 15).',
    relevantFor: ['Content-Plattformen', 'Nachrichtenaggregatoren', 'Bildungseinrichtungen', 'Kulturerbe-Einrichtungen'],
    keyTopics: ['Upload-Filter (Art. 17)', 'Leistungsschutzrecht', 'Text-und-Data-Mining', 'Verguetungsansprueche'],
    effectiveDate: '7. Juni 2021'
  },
  {
    code: 'PLD',
    name: 'Produkthaftungsrichtlinie',
    fullName: 'Richtlinie 85/374/EWG (aktualisiert) - Produkthaftung',
    type: 'eu_directive',
    expected: 18,
    description: 'Regelt die Haftung fuer fehlerhafte Produkte. Aktualisierte Version umfasst auch Software und KI. Hersteller haften verschuldensunabhaengig fuer Produktfehler.',
    relevantFor: ['Produkthersteller', 'Software-Entwickler', 'KI-Anbieter', 'Importeure'],
    keyTopics: ['Verschuldensunabhaengige Haftung', 'Software als Produkt', 'KI-Haftung', 'Beweislast'],
    effectiveDate: 'Ueberarbeitung 2024'
  },
  {
    code: 'GPSR',
    name: 'General Product Safety',
    fullName: 'Verordnung (EU) 2023/988 - Allgemeine Produktsicherheit',
    type: 'eu_regulation',
    expected: 30,
    description: 'Ersetzt die alte Produktsicherheitsrichtlinie. Stellt sicher, dass nur sichere Verbraucherprodukte auf den EU-Markt gelangen. Gilt auch fuer Online-Marktplaetze.',
    relevantFor: ['Produkthersteller', 'Importeure', 'Online-Marktplaetze', 'Haendler'],
    keyTopics: ['Produktsicherheit', 'Marktplatzhaftung', 'Rueckrufe', 'Safety Gate'],
    effectiveDate: '13. Dezember 2024'
  },
  {
    code: 'BSI-TR-03161-1',
    name: 'BSI-TR Teil 1',
    fullName: 'BSI TR-03161 Teil 1 - Sicherheitsanforderungen an Digitale Gesundheitsanwendungen (DiGA) - Mobile Anwendungen',
    type: 'bsi_standard',
    expected: 45,
    description: 'Deutsche Technische Richtlinie fuer die Sicherheit mobiler Gesundheits-Apps (DiGA). Definiert Pruefverfahren und Sicherheitsanforderungen fuer die DiGA-Zulassung.',
    relevantFor: ['DiGA-Hersteller', 'Mobile-App-Entwickler im Gesundheitswesen', 'Pruefstellen'],
    keyTopics: ['Mobile App Security', 'Authentifizierung', 'Datenverschluesselung', 'Secure Coding'],
    effectiveDate: 'Version 1.0: 2020'
  },
  {
    code: 'BSI-TR-03161-2',
    name: 'BSI-TR Teil 2',
    fullName: 'BSI TR-03161 Teil 2 - Sicherheitsanforderungen an Digitale Gesundheitsanwendungen (DiGA) - Web-Anwendungen',
    type: 'bsi_standard',
    expected: 40,
    description: 'Technische Richtlinie fuer die Sicherheit von Web-Anwendungen im Gesundheitswesen. Ergaenzt Teil 1 um spezifische Anforderungen fuer Web-Frontends.',
    relevantFor: ['DiGA-Hersteller mit Web-Apps', 'Web-Entwickler im Gesundheitswesen', 'Pruefstellen'],
    keyTopics: ['Web Application Security', 'OWASP Top 10', 'Session Management', 'TLS'],
    effectiveDate: 'Version 1.0: 2020'
  },
  {
    code: 'BSI-TR-03161-3',
    name: 'BSI-TR Teil 3',
    fullName: 'BSI TR-03161 Teil 3 - Sicherheitsanforderungen an Digitale Gesundheitsanwendungen (DiGA) - Hintergrundsysteme',
    type: 'bsi_standard',
    expected: 35,
    description: 'Technische Richtlinie fuer Backend-Systeme von Gesundheitsanwendungen. Deckt Server, APIs, Datenbanken und Cloud-Infrastruktur ab.',
    relevantFor: ['DiGA-Backend-Entwickler', 'Cloud-Architekten im Gesundheitswesen', 'DevOps-Teams'],
    keyTopics: ['Backend Security', 'API Security', 'Datenbanksicherheit', 'Cloud Security', 'Logging'],
    effectiveDate: 'Version 1.0: 2020'
  },
  // Financial Sector Regulations
  {
    code: 'DORA',
    name: 'DORA',
    fullName: 'Verordnung (EU) 2022/2554 - Digital Operational Resilience Act',
    type: 'eu_regulation',
    expected: 64,
    description: 'Digitale operationale Resilienz fuer den Finanzsektor. Verpflichtet Finanzunternehmen zu umfassendem IKT-Risikomanagement, Vorfallmeldung, Resilienz-Tests und Drittanbieter-Management.',
    relevantFor: ['Banken', 'Versicherungen', 'Wertpapierfirmen', 'Zahlungsdienstleister', 'Krypto-Anbieter', 'IKT-Drittanbieter'],
    keyTopics: ['IKT-Risikomanagement', 'Incident Reporting', 'Resilience Testing', 'Third-Party Risk', 'Threat-Led Penetration Testing'],
    effectiveDate: '17. Januar 2025'
  },
  {
    code: 'PSD2',
    name: 'PSD2',
    fullName: 'Richtlinie (EU) 2015/2366 - Zahlungsdiensterichtlinie',
    type: 'eu_directive',
    expected: 117,
    description: 'Reguliert Zahlungsdienste im EU-Binnenmarkt. Fuehrt Open Banking ein, verpflichtet zu starker Kundenauthentifizierung (SCA) und ermoeglicht Drittanbieterzugang zu Bankkonten.',
    relevantFor: ['Banken', 'Zahlungsdienstleister', 'FinTechs', 'E-Commerce-Anbieter', 'Kontoinformationsdienste'],
    keyTopics: ['Strong Customer Authentication (SCA)', 'Open Banking APIs', 'PSD2-Schnittstellen', 'Kontoinformationsdienste', 'Zahlungsauslösedienste'],
    effectiveDate: '13. Januar 2018'
  },
  {
    code: 'AMLR',
    name: 'AML-Verordnung',
    fullName: 'Verordnung (EU) 2024/1624 - Anti-Money Laundering Regulation',
    type: 'eu_regulation',
    expected: 89,
    description: 'EU-weite Verordnung zur Bekaempfung von Geldwaesche und Terrorismusfinanzierung. Ersetzt die bisherigen Richtlinien durch direkt anwendbare Vorschriften. Schafft einheitliche Sorgfaltspflichten.',
    relevantFor: ['Banken', 'Finanzdienstleister', 'Krypto-Anbieter', 'Immobilienmakler', 'Wirtschaftspruefer', 'Notare'],
    keyTopics: ['Sorgfaltspflichten (KYC)', 'Verdachtsmeldungen', 'Wirtschaftlich Berechtigte', 'Risikobewertung', 'AMLA (neue EU-Behoerde)'],
    effectiveDate: '2027 (gestaffelt)'
  },
  {
    code: 'MiCA',
    name: 'MiCA',
    fullName: 'Verordnung (EU) 2023/1114 - Markets in Crypto-Assets',
    type: 'eu_regulation',
    expected: 149,
    description: 'Umfassende Regulierung fuer Kryptowerte, Stablecoins und Crypto-Asset-Dienstleister. Schafft EU-weiten Rechtsrahmen fuer Krypto-Maerkte mit Zulassungspflichten und Verbraucherschutz.',
    relevantFor: ['Krypto-Boersen', 'Wallet-Anbieter', 'Stablecoin-Emittenten', 'Token-Herausgeber', 'Krypto-Verwahrer', 'FinTechs'],
    keyTopics: ['Krypto-Zulassung', 'Stablecoin-Regulierung', 'Whitepaper-Pflicht', 'Marktmissbrauch', 'Verwahrung'],
    effectiveDate: '30. Dezember 2024'
  },
  {
    code: 'EHDS',
    name: 'EHDS',
    fullName: 'Verordnung (EU) 2025/327 - Europaeischer Gesundheitsdatenraum',
    type: 'eu_regulation',
    expected: 95,
    description: 'Schafft den Europaeischen Raum fuer Gesundheitsdaten. Ermoeglicht Primaernutzung (Patientenrechte) und Sekundaernutzung (Forschung, KI-Training) von Gesundheitsdaten unter strengen Auflagen.',
    relevantFor: ['Krankenhaeuser', 'Aerzte', 'Gesundheits-Apps', 'Pharma', 'Forschungseinrichtungen', 'Versicherungen'],
    keyTopics: ['Patientenakte (MyHealth@EU)', 'Sekundaernutzung', 'Datenzugangsorgane', 'Gesundheitsdatenstandards', 'Forschungszugang'],
    effectiveDate: '2025 (gestaffelt bis 2029)'
  },
]

const TYPE_COLORS: Record<string, string> = {
  eu_regulation: 'bg-blue-100 text-blue-700',
  eu_directive: 'bg-purple-100 text-purple-700',
  de_law: 'bg-yellow-100 text-yellow-700',
  bsi_standard: 'bg-green-100 text-green-700',
}

const TYPE_LABELS: Record<string, string> = {
  eu_regulation: 'EU-VO',
  eu_directive: 'EU-RL',
  de_law: 'DE-Gesetz',
  bsi_standard: 'BSI',
}

// Industry/Sector definitions for the regulation map
const INDUSTRIES = [
  { id: 'all', name: 'Alle Unternehmen', icon: '🏢', description: 'Grundlegende Anforderungen fuer alle' },
  { id: 'health', name: 'Gesundheitswesen', icon: '🏥', description: 'Krankenhaeuser, DiGA, Medizintechnik' },
  { id: 'finance', name: 'Finanzsektor', icon: '🏦', description: 'Banken, Versicherungen, Zahlungsdienstleister' },
  { id: 'ecommerce', name: 'E-Commerce', icon: '🛒', description: 'Online-Shops, Marktplaetze' },
  { id: 'tech', name: 'Technologie/Software', icon: '💻', description: 'Software-Entwickler, SaaS, Cloud' },
  { id: 'iot', name: 'IoT/Hardware', icon: '📱', description: 'Geraetehersteller, Smart Devices' },
  { id: 'ai', name: 'KI-Anbieter', icon: '🤖', description: 'KI-Entwickler und -Anwender' },
  { id: 'kritis', name: 'Kritische Infrastruktur', icon: '⚡', description: 'Energie, Wasser, Transport' },
  { id: 'media', name: 'Medien/Plattformen', icon: '📺', description: 'Social Media, Content-Plattformen' },
  { id: 'public', name: 'Oeffentlicher Sektor', icon: '🏛️', description: 'Behoerden, Verwaltung' },
]

// Mapping: Which regulations apply to which industries
const INDUSTRY_REGULATION_MAP: Record<string, string[]> = {
  all: ['GDPR', 'EPRIVACY', 'TDDDG'],
  health: ['GDPR', 'TDDDG', 'BSI-TR-03161-1', 'BSI-TR-03161-2', 'BSI-TR-03161-3', 'NIS2', 'AIACT', 'PLD', 'EHDS'],
  finance: ['GDPR', 'TDDDG', 'NIS2', 'EUCSA', 'DSA', 'AIACT', 'DPF', 'DORA', 'PSD2', 'AMLR', 'MiCA'],
  ecommerce: ['GDPR', 'TDDDG', 'DSA', 'GPSR', 'EAA', 'PLD', 'DPF', 'PSD2'],
  tech: ['GDPR', 'TDDDG', 'CRA', 'AIACT', 'DPF', 'SCC', 'DATAACT', 'DSM', 'MiCA'],
  iot: ['GDPR', 'CRA', 'GPSR', 'PLD', 'DATAACT', 'AIACT'],
  ai: ['GDPR', 'AIACT', 'PLD', 'DSM', 'DATAACT'],
  kritis: ['GDPR', 'NIS2', 'EUCSA', 'CRA', 'AIACT', 'DORA'],
  media: ['GDPR', 'TDDDG', 'DSA', 'DSM', 'EAA', 'AIACT'],
  public: ['GDPR', 'NIS2', 'EUCSA', 'EAA', 'DGA', 'AIACT', 'EHDS'],
}

// Thematic groupings showing overlaps
const THEMATIC_GROUPS = [
  {
    id: 'datenschutz',
    name: 'Datenschutz & Privacy',
    color: 'bg-blue-500',
    regulations: ['GDPR', 'EPRIVACY', 'TDDDG', 'SCC', 'DPF'],
    description: 'Schutz personenbezogener Daten, Einwilligung, Betroffenenrechte'
  },
  {
    id: 'cybersecurity',
    name: 'Cybersicherheit',
    color: 'bg-red-500',
    regulations: ['NIS2', 'EUCSA', 'CRA', 'BSI-TR-03161-1', 'BSI-TR-03161-2', 'BSI-TR-03161-3', 'DORA'],
    description: 'IT-Sicherheit, Risikomanagement, Incident Response'
  },
  {
    id: 'ai',
    name: 'Kuenstliche Intelligenz',
    color: 'bg-purple-500',
    regulations: ['AIACT', 'PLD', 'GPSR'],
    description: 'KI-Regulierung, Hochrisiko-Systeme, Haftung'
  },
  {
    id: 'digital-markets',
    name: 'Digitale Maerkte & Plattformen',
    color: 'bg-green-500',
    regulations: ['DSA', 'DGA', 'DATAACT', 'DSM'],
    description: 'Plattformregulierung, Datenzugang, Urheberrecht'
  },
  {
    id: 'product-safety',
    name: 'Produktsicherheit & Haftung',
    color: 'bg-orange-500',
    regulations: ['CRA', 'PLD', 'GPSR', 'EAA'],
    description: 'Sicherheitsanforderungen, CE-Kennzeichnung, Barrierefreiheit'
  },
  {
    id: 'finance',
    name: 'Finanzmarktregulierung',
    color: 'bg-emerald-500',
    regulations: ['DORA', 'PSD2', 'AMLR', 'MiCA'],
    description: 'Zahlungsdienste, Krypto-Assets, Geldwaeschebekaempfung, digitale Resilienz'
  },
  {
    id: 'health',
    name: 'Gesundheitsdaten',
    color: 'bg-pink-500',
    regulations: ['EHDS', 'BSI-TR-03161-1', 'BSI-TR-03161-2', 'BSI-TR-03161-3'],
    description: 'Gesundheitsdatenraum, DiGA-Sicherheit, Patientenrechte'
  },
]

// Key overlaps and intersections
const KEY_INTERSECTIONS = [
  {
    regulations: ['GDPR', 'AIACT'],
    topic: 'KI und personenbezogene Daten',
    description: 'Automatisierte Entscheidungen, Profiling, Erklaerbarkeit'
  },
  {
    regulations: ['NIS2', 'CRA'],
    topic: 'Cybersicherheit von Produkten',
    description: 'Sicherheitsanforderungen ueber den gesamten Lebenszyklus'
  },
  {
    regulations: ['AIACT', 'PLD'],
    topic: 'KI-Haftung',
    description: 'Wer haftet, wenn KI Schaeden verursacht?'
  },
  {
    regulations: ['DSA', 'GDPR'],
    topic: 'Plattform-Transparenz',
    description: 'Inhaltsmoderation und Datenschutz'
  },
  {
    regulations: ['DATAACT', 'GDPR'],
    topic: 'Datenzugang vs. Datenschutz',
    description: 'Balance zwischen Datenteilung und Privacy'
  },
  {
    regulations: ['CRA', 'GPSR'],
    topic: 'Digitale Produktsicherheit',
    description: 'Hardware mit Software-Komponenten'
  },
]

// Future outlook - proposed and discussed regulations
const FUTURE_OUTLOOK = [
  {
    id: 'digital-omnibus',
    name: 'EU Digital Omnibus',
    status: 'proposed',
    statusLabel: 'Vorgeschlagen Nov 2025',
    expectedDate: '2026/2027',
    description: 'Umfassendes Vereinfachungspaket fuer AI Act, DSGVO und Cybersicherheit. Ziel: 5 Mrd. EUR Einsparung bei Verwaltungskosten.',
    keyChanges: [
      'AI Act: Verschiebung Hochrisiko-Pflichten um bis zu 16 Monate (bis Dez 2027)',
      'AI Act: Vereinfachte Dokumentation fuer KMU und Small Midcaps',
      'AI Act: EU-weite regulatorische Sandbox fuer KI-Tests',
      'DSGVO: Cookie-Banner-Reform - Berechtigtes Interesse statt nur Einwilligung',
      'DSGVO: Automatische Privacy-Signale via Browser statt Pop-ups',
      'Cybersecurity: Single Entry Point fuer Meldepflichten'
    ],
    affectedRegulations: ['AIACT', 'GDPR', 'NIS2', 'CRA', 'EUCSA'],
    source: 'https://digital-strategy.ec.europa.eu/en/library/digital-omnibus-ai-regulation-proposal'
  },
  {
    id: 'sustainability-omnibus',
    name: 'EU Nachhaltigkeits-Omnibus',
    status: 'agreed',
    statusLabel: 'Einigung Dez 2025',
    expectedDate: 'Q1 2026',
    description: 'Drastische Reduzierung der Nachhaltigkeits-Berichtspflichten. Anwendungsbereich wird stark eingeschraenkt.',
    keyChanges: [
      'CSRD: Nur noch Unternehmen >1.000 MA und >450 Mio EUR Umsatz berichtspflichtig',
      'CSRD: Betroffene Unternehmen sinken von 50.000 auf ca. 5.000 in der EU',
      'CSRD: Verschiebung Welle 2+3 um 2 Jahre (auf Geschaeftsjahr 2027)',
      'CSDDD: Nur noch Unternehmen >5.000 MA und >1,5 Mrd EUR Umsatz',
      'CSDDD: Sorgfaltspflichten nur noch fuer Tier-1-Lieferanten',
      'CSDDD: Pruefung nur noch alle 5 Jahre statt jaehrlich'
    ],
    affectedRegulations: ['CSRD', 'CSDDD', 'EU-Taxonomie'],
    source: 'https://kpmg-law.de/erste-omnibus-verordnung-soll-die-pflichten-der-csddd-csrd-und-eu-taxonomie-lockern/'
  },
  {
    id: 'eprivacy-withdrawal',
    name: 'ePrivacy-Verordnung',
    status: 'withdrawn',
    statusLabel: 'Zurueckgezogen Feb 2025',
    expectedDate: 'Unbekannt',
    description: 'Nach 9 Jahren Verhandlung hat die EU-Kommission den Vorschlag zurueckgezogen. Die ePrivacy-Richtlinie bleibt in Kraft, Cookie-Reform kommt via DSGVO/Digital Omnibus.',
    keyChanges: [
      'Urspruenglicher Vorschlag: Einheitliche EU-Cookie-Regeln',
      'Urspruenglicher Vorschlag: Strikte Tracking-Einwilligung',
      'Status: ePrivacy-Richtlinie + TDDDG bleiben gueltig',
      'Zukunft: Cookie-Reform wird Teil der DSGVO-Aenderungen'
    ],
    affectedRegulations: ['EPRIVACY', 'TDDDG', 'GDPR'],
    source: 'https://netzpolitik.org/2025/cookie-banner-und-online-tracking-eu-kommission-beerdigt-plaene-fuer-eprivacy-verordnung/'
  },
  {
    id: 'ai-liability',
    name: 'KI-Haftungsrichtlinie',
    status: 'pending',
    statusLabel: 'In Verhandlung',
    expectedDate: '2026',
    description: 'Ergaenzt den AI Act um zivilrechtliche Haftungsregeln. Erleichtert Geschaedigten die Beweisfuehrung bei KI-Schaeden.',
    keyChanges: [
      'Beweislasterleichterung bei KI-verursachten Schaeden',
      'Offenlegungspflichten fuer KI-Anbieter im Schadensfall',
      'Verknuepfung mit Produkthaftungsrichtlinie'
    ],
    affectedRegulations: ['AIACT', 'PLD'],
    source: 'https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX:52022PC0496'
  },
]

// Additional regulations that could be added to RAG (publicly available, commercial use permitted)
// Regulations now integrated in main RAG (previously listed as candidates)
const INTEGRATED_REGULATIONS = [
  {
    code: 'DORA',
    name: 'Digital Operational Resilience Act',
    status: 'integrated',
    addedDate: 'Januar 2025',
    description: 'Jetzt im RAG verfuegbar - Finanzsektor IT-Resilienz'
  },
  {
    code: 'MiCA',
    name: 'Markets in Crypto-Assets',
    status: 'integrated',
    addedDate: 'Januar 2025',
    description: 'Jetzt im RAG verfuegbar - Krypto-Regulierung'
  },
  {
    code: 'PSD2',
    name: 'Payment Services Directive 2',
    status: 'integrated',
    addedDate: 'Januar 2025',
    description: 'Jetzt im RAG verfuegbar - Zahlungsdienste'
  },
  {
    code: 'AMLR',
    name: 'AML-Verordnung',
    status: 'integrated',
    addedDate: 'Januar 2025',
    description: 'Jetzt im RAG verfuegbar - Geldwaeschebekaempfung'
  },
  {
    code: 'EHDS',
    name: 'European Health Data Space',
    status: 'integrated',
    addedDate: 'Januar 2025',
    description: 'Jetzt im RAG verfuegbar - Gesundheitsdatenraum'
  },
]

// Potential future regulations (not yet integrated)
const ADDITIONAL_REGULATIONS = [
  {
    code: 'PSD3',
    name: 'Payment Services Directive 3',
    fullName: 'Richtlinie zur dritten Zahlungsdiensterichtlinie (Entwurf)',
    type: 'eu_directive',
    status: 'proposed',
    effectiveDate: 'Voraussichtlich 2026',
    description: 'Modernisierung der Zahlungsdienste-Regulierung. Staerkerer Verbraucherschutz, Open Banking 2.0, Betrugsbekaempfung. Ersetzt dann PSD2.',
    relevantFor: ['Banken', 'Zahlungsdienstleister', 'Fintechs', 'E-Commerce'],
    celex: '52023PC0366',
    priority: 'medium'
  },
  {
    code: 'AMLD6',
    name: 'AML-Richtlinie 6',
    fullName: 'Richtlinie (EU) 2024/1640 - 6. Geldwaescherichtlinie',
    type: 'eu_directive',
    status: 'active',
    effectiveDate: '10. Juli 2027 (Umsetzung)',
    description: 'Ergaenzt die AML-Verordnung. Nationale Umsetzungsvorschriften, strafrechtliche Sanktionen, AMLA-Behoerde.',
    relevantFor: ['Banken', 'Krypto-Anbieter', 'Immobilienmakler', 'Gluecksspielanbieter'],
    celex: '32024L1640',
    priority: 'medium'
  },
  {
    code: 'FIDA',
    name: 'Financial Data Access',
    fullName: 'Verordnung zum Zugang zu Finanzdaten (Entwurf)',
    type: 'eu_regulation',
    status: 'proposed',
    effectiveDate: 'Voraussichtlich 2027',
    description: 'Open Finance Framework - erweitert PSD2-Open-Banking auf Versicherungen, Investitionen, Kredite.',
    relevantFor: ['Banken', 'Versicherungen', 'Fintechs', 'Datenaggregatoren'],
    celex: '52023PC0360',
    priority: 'medium'
  },
]

// Legal basis for using EUR-Lex content
const LEGAL_BASIS_INFO = {
  title: 'Rechtliche Grundlage fuer RAG-Nutzung',
  summary: 'EU-Rechtstexte auf EUR-Lex sind oeffentliche amtliche Dokumente und duerfen frei verwendet werden.',
  details: [
    {
      aspect: 'EUR-Lex Dokumente',
      status: 'Erlaubt',
      explanation: 'Offizielle EU-Gesetzestexte, Richtlinien und Verordnungen sind gemeinfrei (Public Domain) und duerfen frei reproduziert und kommerziell genutzt werden.'
    },
    {
      aspect: 'Text-und-Data-Mining (TDM)',
      status: 'Erlaubt',
      explanation: 'Art. 4 der DSM-Richtlinie (2019/790) erlaubt TDM fuer kommerzielle Zwecke, sofern kein Opt-out des Rechteinhabers vorliegt. Fuer amtliche Texte gilt kein Opt-out.'
    },
    {
      aspect: 'AI Act Anforderungen',
      status: 'Beachten',
      explanation: 'Art. 53 AI Act verlangt von GPAI-Anbietern die Einhaltung des Urheberrechts. Fuer oeffentliche Rechtstexte unproblematisch.'
    },
    {
      aspect: 'BSI-Richtlinien',
      status: 'Erlaubt',
      explanation: 'BSI-Publikationen sind oeffentlich zugaenglich und duerfen fuer Compliance-Zwecke verwendet werden.'
    },
  ]
}

export default function RAGPage() {
  const [activeTab, setActiveTab] = useState<TabId>('overview')
  const [collectionStatus, setCollectionStatus] = useState<CollectionStatus | null>(null)
  const [loading, setLoading] = useState(true)
  const [searchQuery, setSearchQuery] = useState('')
  const [searchResults, setSearchResults] = useState<SearchResult[]>([])
  const [searching, setSearching] = useState(false)
  const [selectedRegulations, setSelectedRegulations] = useState<string[]>([])
  const [ingestionRunning, setIngestionRunning] = useState(false)
  const [ingestionLog, setIngestionLog] = useState<string[]>([])
  const [pipelineState, setPipelineState] = useState<PipelineState | null>(null)
  const [pipelineLoading, setPipelineLoading] = useState(false)
  const [pipelineStarting, setPipelineStarting] = useState(false)
  const [expandedRegulation, setExpandedRegulation] = useState<string | null>(null)
  const [autoRefresh, setAutoRefresh] = useState(true)
  const [elapsedTime, setElapsedTime] = useState<string>('')

  // Data tab state
  const [customDocuments, setCustomDocuments] = useState<CustomDocument[]>([])
  const [uploadFile, setUploadFile] = useState<File | null>(null)
  const [uploadTitle, setUploadTitle] = useState('')
  const [uploadCode, setUploadCode] = useState('')
  const [uploading, setUploading] = useState(false)
  const [linkUrl, setLinkUrl] = useState('')
  const [linkTitle, setLinkTitle] = useState('')
  const [linkCode, setLinkCode] = useState('')
  const [addingLink, setAddingLink] = useState(false)

  const fetchStatus = useCallback(async () => {
    setLoading(true)
    try {
      const res = await fetch(`${API_PROXY}?action=status`)
      if (res.ok) {
        const data = await res.json()
        setCollectionStatus(data)
      }
    } catch (error) {
      console.error('Failed to fetch status:', error)
    } finally {
      setLoading(false)
    }
  }, [])

  const fetchPipeline = useCallback(async () => {
    setPipelineLoading(true)
    try {
      const res = await fetch(`${API_PROXY}?action=pipeline-checkpoints`)
      if (res.ok) {
        const data = await res.json()
        setPipelineState(data)
      }
    } catch (error) {
      console.error('Failed to fetch pipeline:', error)
    } finally {
      setPipelineLoading(false)
    }
  }, [])

  const fetchCustomDocuments = useCallback(async () => {
    try {
      const res = await fetch(`${API_PROXY}?action=custom-documents`)
      if (res.ok) {
        const data = await res.json()
        setCustomDocuments(data.documents || [])
      }
    } catch (error) {
      console.error('Failed to fetch custom documents:', error)
    }
  }, [])

  const handleUpload = async () => {
    if (!uploadFile || !uploadTitle || !uploadCode) return

    setUploading(true)
    try {
      const formData = new FormData()
      formData.append('file', uploadFile)
      formData.append('title', uploadTitle)
      formData.append('code', uploadCode)
      formData.append('document_type', 'custom')

      const res = await fetch(`${API_PROXY}?action=upload`, {
        method: 'POST',
        body: formData,
      })

      if (res.ok) {
        setUploadFile(null)
        setUploadTitle('')
        setUploadCode('')
        fetchCustomDocuments()
        fetchStatus()
      }
    } catch (error) {
      console.error('Upload failed:', error)
    } finally {
      setUploading(false)
    }
  }

  const handleAddLink = async () => {
    if (!linkUrl || !linkTitle || !linkCode) return

    setAddingLink(true)
    try {
      const res = await fetch(`${API_PROXY}?action=add-link`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          url: linkUrl,
          title: linkTitle,
          code: linkCode,
          document_type: 'custom',
        }),
      })

      if (res.ok) {
        setLinkUrl('')
        setLinkTitle('')
        setLinkCode('')
        fetchCustomDocuments()
      }
    } catch (error) {
      console.error('Add link failed:', error)
    } finally {
      setAddingLink(false)
    }
  }

  const handleDeleteDocument = async (docId: string) => {
    try {
      const res = await fetch(`${API_PROXY}?action=delete-document&docId=${docId}`, {
        method: 'DELETE',
      })
      if (res.ok) {
        fetchCustomDocuments()
        fetchStatus()
      }
    } catch (error) {
      console.error('Delete failed:', error)
    }
  }

  const handleStartPipeline = async (skipIngestion: boolean = false) => {
    setPipelineStarting(true)
    try {
      const res = await fetch(`${API_PROXY}?action=start-pipeline`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          force_reindex: false,
          skip_ingestion: skipIngestion,
        }),
      })

      if (res.ok) {
        // Wait a moment then refresh pipeline status
        setTimeout(() => {
          fetchPipeline()
          setPipelineStarting(false)
        }, 2000)
      } else {
        setPipelineStarting(false)
      }
    } catch (error) {
      console.error('Failed to start pipeline:', error)
      setPipelineStarting(false)
    }
  }

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

  useEffect(() => {
    if (activeTab === 'pipeline') {
      fetchPipeline()
    }
  }, [activeTab, fetchPipeline])

  useEffect(() => {
    if (activeTab === 'data') {
      fetchCustomDocuments()
    }
  }, [activeTab, fetchCustomDocuments])

  // Auto-refresh pipeline status when running
  useEffect(() => {
    if (activeTab !== 'pipeline' || !autoRefresh) return

    const isRunning = pipelineState?.status === 'running'

    if (isRunning) {
      const interval = setInterval(() => {
        fetchPipeline()
        fetchStatus() // Also refresh chunk counts
      }, 5000) // Every 5 seconds

      return () => clearInterval(interval)
    }
  }, [activeTab, autoRefresh, pipelineState?.status, fetchPipeline, fetchStatus])

  // Update elapsed time
  useEffect(() => {
    if (!pipelineState?.started_at || pipelineState?.status !== 'running') {
      setElapsedTime('')
      return
    }

    const updateElapsed = () => {
      const start = new Date(pipelineState.started_at!).getTime()
      const now = Date.now()
      const diff = Math.floor((now - start) / 1000)

      const hours = Math.floor(diff / 3600)
      const minutes = Math.floor((diff % 3600) / 60)
      const seconds = diff % 60

      if (hours > 0) {
        setElapsedTime(`${hours}h ${minutes}m ${seconds}s`)
      } else if (minutes > 0) {
        setElapsedTime(`${minutes}m ${seconds}s`)
      } else {
        setElapsedTime(`${seconds}s`)
      }
    }

    updateElapsed()
    const interval = setInterval(updateElapsed, 1000)
    return () => clearInterval(interval)
  }, [pipelineState?.started_at, pipelineState?.status])

  const handleSearch = async () => {
    if (!searchQuery.trim()) return

    setSearching(true)
    try {
      const params = new URLSearchParams({
        action: 'search',
        query: searchQuery,
        top_k: '5',
      })
      if (selectedRegulations.length > 0) {
        params.append('regulations', selectedRegulations.join(','))
      }

      const res = await fetch(`${API_PROXY}?${params}`)
      if (res.ok) {
        const data = await res.json()
        setSearchResults(data.results || [])
      }
    } catch (error) {
      console.error('Search failed:', error)
    } finally {
      setSearching(false)
    }
  }

  const triggerIngestion = async () => {
    setIngestionRunning(true)
    setIngestionLog(['Starte Re-Ingestion aller 19 Regulierungen...'])

    try {
      const res = await fetch(`${API_PROXY}?action=ingest`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ force: true }),
      })

      if (res.ok) {
        const data = await res.json()
        setIngestionLog((prev) => [...prev, 'Ingestion gestartet. Job-ID: ' + (data.job_id || 'N/A')])
        // Poll for status
        const checkStatus = setInterval(async () => {
          try {
            const statusRes = await fetch(`${API_PROXY}?action=ingestion-status`)
            if (statusRes.ok) {
              const statusData = await statusRes.json()
              if (statusData.completed) {
                clearInterval(checkStatus)
                setIngestionRunning(false)
                setIngestionLog((prev) => [...prev, 'Ingestion abgeschlossen!'])
                fetchStatus()
              } else if (statusData.current_regulation) {
                setIngestionLog((prev) => [
                  ...prev,
                  `Verarbeite: ${statusData.current_regulation} (${statusData.processed}/${statusData.total})`,
                ])
              }
            }
          } catch {
            // Ignore polling errors
          }
        }, 5000)
      } else {
        setIngestionLog((prev) => [...prev, 'Fehler: ' + res.statusText])
        setIngestionRunning(false)
      }
    } catch (error) {
      setIngestionLog((prev) => [...prev, 'Fehler: ' + String(error)])
      setIngestionRunning(false)
    }
  }

  const getRegulationChunks = (code: string): number => {
    return collectionStatus?.regulations?.[code] || 0
  }

  const getTotalChunks = (): number => {
    return collectionStatus?.totalPoints || 0
  }

  const tabs = [
    { id: 'overview' as TabId, name: 'Uebersicht', icon: '📊' },
    { id: 'regulations' as TabId, name: 'Regulierungen', icon: '📜' },
    { id: 'map' as TabId, name: 'Landkarte', icon: '🗺️' },
    { id: 'search' as TabId, name: 'Suche', icon: '🔍' },
    { id: 'data' as TabId, name: 'Daten', icon: '📁' },
    { id: 'ingestion' as TabId, name: 'Ingestion', icon: '⚙️' },
    { id: 'pipeline' as TabId, name: 'Pipeline', icon: '🔄' },
  ]

  return (
    <div className="min-h-screen bg-slate-50">
      {/* Header */}
      <div className="bg-white border-b px-6 py-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold text-slate-900">Daten & RAG</h1>
            <p className="text-slate-600">Legal Corpus Management fuer Compliance</p>
          </div>
          <Link
            href="/ai"
            className="flex items-center gap-2 text-slate-600 hover:text-slate-800"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
            KI & Automatisierung
          </Link>
        </div>
      </div>

      <div className="p-6">
        {/* Page Purpose */}
        <PagePurpose
          title="Daten & RAG"
          purpose="Verwalten und durchsuchen Sie indexierte Dokumente im RAG-System. Das Legal Corpus enthält 19+ Regulierungen (DSGVO, AI Act, CRA, BSI TR-03161, etc.) für semantische Suche. Teil der KI-Daten-Pipeline: Empfängt Embeddings von der RAG Pipeline und liefert Suchergebnisse an die Klausur-Korrektur."
          audience={['DSB', 'Compliance Officer', 'Entwickler']}
          gdprArticles={['§5 UrhG (Amtliche Werke)', 'Art. 5 DSGVO (Rechenschaftspflicht)']}
          architecture={{
            services: ['klausur-service (Python)', 'embedding-service (BGE-M3)', 'Qdrant (Vector DB)'],
            databases: ['Qdrant Collections: bp_legal_corpus, bp_nibis_eh, bp_eh'],
          }}
          relatedPages={[
            { name: 'RAG Pipeline', href: '/ai/rag-pipeline', description: 'Neue Dokumente indexieren' },
            { name: 'Klausur-Korrektur', href: '/ai/klausur-korrektur', description: 'RAG-Suche nutzen' },
            { name: 'OCR-Labeling', href: '/ai/ocr-labeling', description: 'Ground Truth erstellen' },
            { name: 'Compliance Hub', href: '/compliance/hub', description: 'Compliance-Dashboard' },
          ]}
        />

        {/* AI Module Sidebar - Desktop: Fixed, Mobile: FAB + Drawer */}
        <AIModuleSidebarResponsive currentModule="rag" />

        {/* Stats Cards */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
          <div className="bg-white rounded-xl p-4 border border-slate-200">
            <p className="text-sm text-slate-500">Regulierungen</p>
            <p className="text-2xl font-bold text-slate-900">{REGULATIONS.length}</p>
          </div>
          <div className="bg-white rounded-xl p-4 border border-slate-200">
            <p className="text-sm text-slate-500">Chunks Total</p>
            <p className="text-2xl font-bold text-teal-600">{loading ? '-' : getTotalChunks().toLocaleString()}</p>
          </div>
          <div className="bg-white rounded-xl p-4 border border-slate-200">
            <p className="text-sm text-slate-500">Vector Size</p>
            <p className="text-2xl font-bold text-slate-700">{collectionStatus?.vectorSize || 1024}</p>
          </div>
          <div className={`bg-white rounded-xl p-4 border ${
            collectionStatus?.status === 'green' ? 'border-green-200' : 'border-slate-200'
          }`}>
            <p className="text-sm text-slate-500">Status</p>
            <p className={`text-2xl font-bold ${
              collectionStatus?.status === 'green' ? 'text-green-600' : 'text-slate-600'
            }`}>
              {collectionStatus?.status === 'green' ? '✓ Ready' : loading ? '-' : collectionStatus?.status || 'N/A'}
            </p>
          </div>
        </div>

        {/* Tabs */}
        <div className="flex gap-1 mb-6 border-b border-slate-200">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors ${
                activeTab === tab.id
                  ? 'border-teal-600 text-teal-600'
                  : 'border-transparent text-slate-500 hover:text-slate-700'
              }`}
            >
              <span className="mr-2">{tab.icon}</span>
              {tab.name}
            </button>
          ))}
        </div>

        {/* Tab Content */}
        {activeTab === 'overview' && (
          <div className="space-y-6">
            {/* Quick Stats per Type */}
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              {Object.entries(TYPE_LABELS).map(([type, label]) => {
                const regs = REGULATIONS.filter((r) => r.type === type)
                const totalChunks = regs.reduce((sum, r) => sum + getRegulationChunks(r.code), 0)
                return (
                  <div key={type} className="bg-white rounded-xl p-4 border border-slate-200">
                    <div className="flex items-center gap-2 mb-2">
                      <span className={`px-2 py-0.5 text-xs rounded ${TYPE_COLORS[type]}`}>{label}</span>
                      <span className="text-slate-500 text-sm">{regs.length} Dok.</span>
                    </div>
                    <p className="text-xl font-bold text-slate-900">{totalChunks.toLocaleString()} Chunks</p>
                  </div>
                )
              })}
            </div>

            {/* Top Regulations */}
            <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
              <div className="px-4 py-3 border-b bg-slate-50">
                <h3 className="font-semibold text-slate-900">Top Regulierungen (nach Chunks)</h3>
              </div>
              <div className="divide-y">
                {REGULATIONS.sort((a, b) => getRegulationChunks(b.code) - getRegulationChunks(a.code))
                  .slice(0, 5)
                  .map((reg) => {
                    const chunks = getRegulationChunks(reg.code)
                    return (
                      <div key={reg.code} className="px-4 py-3 flex items-center justify-between">
                        <div className="flex items-center gap-3">
                          <span className={`px-2 py-0.5 text-xs rounded ${TYPE_COLORS[reg.type]}`}>
                            {TYPE_LABELS[reg.type]}
                          </span>
                          <span className="font-medium text-slate-900">{reg.name}</span>
                          <span className="text-slate-500 text-sm">({reg.code})</span>
                        </div>
                        <span className="font-bold text-teal-600">{chunks.toLocaleString()} Chunks</span>
                      </div>
                    )
                  })}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'regulations' && (
          <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
            <div className="px-4 py-3 border-b bg-slate-50 flex items-center justify-between">
              <h3 className="font-semibold text-slate-900">Alle {REGULATIONS.length} Regulierungen</h3>
              <button
                onClick={fetchStatus}
                className="text-sm text-teal-600 hover:text-teal-700"
              >
                Aktualisieren
              </button>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead className="bg-slate-50 border-b">
                  <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">Typ</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-right text-xs font-medium text-slate-500 uppercase">Chunks</th>
                    <th className="px-4 py-3 text-right text-xs font-medium text-slate-500 uppercase">Erwartet</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">
                  {REGULATIONS.map((reg) => {
                    const chunks = getRegulationChunks(reg.code)
                    const ratio = chunks / (reg.expected * 10) // Rough estimate: 10 chunks per requirement
                    let statusColor = 'text-red-500'
                    let statusIcon = '❌'
                    if (ratio > 0.5) {
                      statusColor = 'text-green-500'
                      statusIcon = '✓'
                    } else if (ratio > 0.1) {
                      statusColor = 'text-yellow-500'
                      statusIcon = '⚠'
                    }
                    const isExpanded = expandedRegulation === reg.code

                    return (
                      <React.Fragment key={reg.code}>
                        <tr
                          onClick={() => setExpandedRegulation(isExpanded ? null : reg.code)}
                          className="hover:bg-slate-50 cursor-pointer transition-colors"
                        >
                          <td className="px-4 py-3 font-mono font-medium text-teal-600">
                            <span className="inline-flex items-center gap-2">
                              <span className={`transform transition-transform ${isExpanded ? 'rotate-90' : ''}`}>▶</span>
                              {reg.code}
                            </span>
                          </td>
                          <td className="px-4 py-3">
                            <span className={`px-2 py-0.5 text-xs rounded ${TYPE_COLORS[reg.type]}`}>
                              {TYPE_LABELS[reg.type]}
                            </span>
                          </td>
                          <td className="px-4 py-3 text-slate-900">{reg.name}</td>
                          <td className="px-4 py-3 text-right font-bold">{chunks.toLocaleString()}</td>
                          <td className="px-4 py-3 text-right text-slate-500">{reg.expected}</td>
                          <td className={`px-4 py-3 text-center ${statusColor}`}>{statusIcon}</td>
                        </tr>
                        {isExpanded && (
                          <tr key={`${reg.code}-detail`} className="bg-slate-50">
                            <td colSpan={6} className="px-4 py-4">
                              <div className="bg-white rounded-lg border border-slate-200 p-4 space-y-3">
                                <div>
                                  <h4 className="font-semibold text-slate-900 mb-1">{reg.fullName}</h4>
                                  <p className="text-sm text-slate-600">{reg.description}</p>
                                </div>
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2 border-t border-slate-100">
                                  <div>
                                    <p className="text-xs font-medium text-slate-500 uppercase mb-1">Relevant fuer</p>
                                    <div className="flex flex-wrap gap-1">
                                      {reg.relevantFor.map((item, idx) => (
                                        <span key={idx} className="px-2 py-0.5 text-xs bg-slate-100 text-slate-600 rounded">
                                          {item}
                                        </span>
                                      ))}
                                    </div>
                                  </div>
                                  <div>
                                    <p className="text-xs font-medium text-slate-500 uppercase mb-1">Kernthemen</p>
                                    <div className="flex flex-wrap gap-1">
                                      {reg.keyTopics.map((topic, idx) => (
                                        <span key={idx} className="px-2 py-0.5 text-xs bg-teal-50 text-teal-700 rounded">
                                          {topic}
                                        </span>
                                      ))}
                                    </div>
                                  </div>
                                </div>
                                <div className="flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500">
                                  <span>In Kraft seit: {reg.effectiveDate}</span>
                                  <button
                                    onClick={(e) => {
                                      e.stopPropagation()
                                      setSearchQuery(reg.name)
                                      setActiveTab('search')
                                    }}
                                    className="text-teal-600 hover:text-teal-700 font-medium"
                                  >
                                    In Chunks suchen →
                                  </button>
                                </div>
                              </div>
                            </td>
                          </tr>
                        )}
                      </React.Fragment>
                    )
                  })}
                </tbody>
              </table>
            </div>
          </div>
        )}

        {activeTab === 'map' && (
          <div className="space-y-6">
            {/* Industry Filter */}
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <h3 className="font-semibold text-slate-900 mb-4">Regulierungen nach Branche</h3>
              <p className="text-sm text-slate-500 mb-4">
                Waehlen Sie Ihre Branche, um relevante Regulierungen zu sehen.
              </p>
              <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
                {INDUSTRIES.map((industry) => {
                  const regs = INDUSTRY_REGULATION_MAP[industry.id] || []
                  return (
                    <button
                      key={industry.id}
                      onClick={() => {
                        setExpandedRegulation(industry.id === expandedRegulation ? null : industry.id)
                      }}
                      className={`p-4 rounded-lg border text-left transition-all ${
                        expandedRegulation === industry.id
                          ? 'border-teal-500 bg-teal-50 ring-2 ring-teal-200'
                          : 'border-slate-200 hover:border-slate-300 hover:bg-slate-50'
                      }`}
                    >
                      <div className="text-2xl mb-2">{industry.icon}</div>
                      <div className="font-medium text-slate-900 text-sm">{industry.name}</div>
                      <div className="text-xs text-slate-500 mt-1">{regs.length} Regulierungen</div>
                    </button>
                  )
                })}
              </div>

              {/* Selected Industry Details */}
              {expandedRegulation && INDUSTRIES.find(i => i.id === expandedRegulation) && (
                <div className="mt-6 p-4 bg-slate-50 rounded-lg">
                  {(() => {
                    const industry = INDUSTRIES.find(i => i.id === expandedRegulation)!
                    const regCodes = INDUSTRY_REGULATION_MAP[industry.id] || []
                    const regs = REGULATIONS.filter(r => regCodes.includes(r.code))
                    return (
                      <>
                        <div className="flex items-center gap-3 mb-4">
                          <span className="text-3xl">{industry.icon}</span>
                          <div>
                            <h4 className="font-semibold text-slate-900">{industry.name}</h4>
                            <p className="text-sm text-slate-500">{industry.description}</p>
                          </div>
                        </div>
                        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                          {regs.map((reg) => (
                            <div
                              key={reg.code}
                              className="bg-white p-3 rounded-lg border border-slate-200"
                            >
                              <div className="flex items-center gap-2 mb-1">
                                <span className={`px-2 py-0.5 text-xs rounded ${TYPE_COLORS[reg.type]}`}>
                                  {reg.code}
                                </span>
                              </div>
                              <div className="font-medium text-sm text-slate-900">{reg.name}</div>
                              <div className="text-xs text-slate-500 mt-1 line-clamp-2">{reg.description}</div>
                            </div>
                          ))}
                        </div>
                      </>
                    )
                  })()}
                </div>
              )}
            </div>

            {/* Thematic Groups */}
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <h3 className="font-semibold text-slate-900 mb-4">Thematische Cluster</h3>
              <p className="text-sm text-slate-500 mb-4">
                Regulierungen gruppiert nach Themenbereichen - zeigt Ueberschneidungen.
              </p>
              <div className="space-y-4">
                {THEMATIC_GROUPS.map((group) => (
                  <div key={group.id} className="border border-slate-200 rounded-lg overflow-hidden">
                    <div className={`${group.color} px-4 py-2 text-white font-medium flex items-center justify-between`}>
                      <span>{group.name}</span>
                      <span className="text-sm opacity-80">{group.regulations.length} Regulierungen</span>
                    </div>
                    <div className="p-4">
                      <p className="text-sm text-slate-600 mb-3">{group.description}</p>
                      <div className="flex flex-wrap gap-2">
                        {group.regulations.map((code) => {
                          const reg = REGULATIONS.find(r => r.code === code)
                          return (
                            <span
                              key={code}
                              className="px-3 py-1.5 bg-slate-100 rounded-full text-sm font-medium text-slate-700 hover:bg-slate-200 cursor-pointer"
                              onClick={() => {
                                setActiveTab('regulations')
                                setExpandedRegulation(code)
                              }}
                              title={reg?.fullName || code}
                            >
                              {code}
                            </span>
                          )
                        })}
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Key Intersections */}
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <h3 className="font-semibold text-slate-900 mb-4">Wichtige Schnittstellen</h3>
              <p className="text-sm text-slate-500 mb-4">
                Bereiche, in denen sich mehrere Regulierungen ueberschneiden und zusammenwirken.
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {KEY_INTERSECTIONS.map((intersection, idx) => (
                  <div key={idx} className="bg-gradient-to-br from-slate-50 to-slate-100 rounded-lg p-4 border border-slate-200">
                    <div className="flex flex-wrap gap-1 mb-2">
                      {intersection.regulations.map((code) => (
                        <span
                          key={code}
                          className="px-2 py-0.5 text-xs font-medium bg-teal-100 text-teal-700 rounded"
                        >
                          {code}
                        </span>
                      ))}
                    </div>
                    <div className="font-medium text-slate-900 text-sm mb-1">{intersection.topic}</div>
                    <div className="text-xs text-slate-500">{intersection.description}</div>
                  </div>
                ))}
              </div>
            </div>

            {/* Regulation Matrix */}
            <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
              <div className="px-4 py-3 border-b bg-slate-50">
                <h3 className="font-semibold text-slate-900">Branchen-Regulierungs-Matrix</h3>
                <p className="text-sm text-slate-500">Welche Regulierungen in welchen Branchen gelten</p>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-xs">
                  <thead className="bg-slate-50 border-b">
                    <tr>
                      <th className="px-2 py-2 text-left font-medium text-slate-500 sticky left-0 bg-slate-50">Regulierung</th>
                      {INDUSTRIES.filter(i => i.id !== 'all').map((industry) => (
                        <th key={industry.id} className="px-2 py-2 text-center font-medium text-slate-500 min-w-[60px]">
                          <div className="flex flex-col items-center">
                            <span className="text-lg">{industry.icon}</span>
                            <span className="text-[10px] leading-tight">{industry.name.split('/')[0]}</span>
                          </div>
                        </th>
                      ))}
                    </tr>
                  </thead>
                  <tbody className="divide-y">
                    {REGULATIONS.map((reg) => (
                      <tr key={reg.code} className="hover:bg-slate-50">
                        <td className="px-2 py-2 font-medium text-teal-600 sticky left-0 bg-white">
                          {reg.code}
                        </td>
                        {INDUSTRIES.filter(i => i.id !== 'all').map((industry) => {
                          const applies = INDUSTRY_REGULATION_MAP[industry.id]?.includes(reg.code)
                          return (
                            <td key={industry.id} className="px-2 py-2 text-center">
                              {applies ? (
                                <span className="inline-flex items-center justify-center w-5 h-5 bg-teal-100 text-teal-600 rounded-full">✓</span>
                              ) : (
                                <span className="inline-flex items-center justify-center w-5 h-5 text-slate-300">–</span>
                              )}
                            </td>
                          )
                        })}
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Future Outlook Section */}
            <div className="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-xl border border-indigo-200 p-6">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-2xl">🔮</span>
                <div>
                  <h3 className="font-semibold text-slate-900">Zukunftsaussicht</h3>
                  <p className="text-sm text-slate-500">Geplante Aenderungen und neue Regulierungen</p>
                </div>
              </div>

              <div className="space-y-4">
                {FUTURE_OUTLOOK.map((item) => (
                  <div key={item.id} className="bg-white rounded-lg border border-slate-200 overflow-hidden">
                    <div className="px-4 py-3 flex items-center justify-between bg-slate-50 border-b">
                      <div className="flex items-center gap-3">
                        <span className={`px-2 py-1 text-xs font-medium rounded ${
                          item.status === 'proposed' ? 'bg-yellow-100 text-yellow-700' :
                          item.status === 'agreed' ? 'bg-green-100 text-green-700' :
                          item.status === 'withdrawn' ? 'bg-red-100 text-red-700' :
                          'bg-blue-100 text-blue-700'
                        }`}>
                          {item.statusLabel}
                        </span>
                        <h4 className="font-semibold text-slate-900">{item.name}</h4>
                      </div>
                      <span className="text-sm text-slate-500">Erwartet: {item.expectedDate}</span>
                    </div>
                    <div className="p-4">
                      <p className="text-sm text-slate-600 mb-3">{item.description}</p>
                      <div className="mb-3">
                        <p className="text-xs font-medium text-slate-500 uppercase mb-2">Wichtige Aenderungen:</p>
                        <ul className="text-sm text-slate-600 space-y-1">
                          {item.keyChanges.slice(0, 4).map((change, idx) => (
                            <li key={idx} className="flex items-start gap-2">
                              <span className="text-teal-500 mt-1">•</span>
                              <span>{change}</span>
                            </li>
                          ))}
                          {item.keyChanges.length > 4 && (
                            <li className="text-slate-400 text-xs">+ {item.keyChanges.length - 4} weitere...</li>
                          )}
                        </ul>
                      </div>
                      <div className="flex items-center justify-between">
                        <div className="flex flex-wrap gap-1">
                          {item.affectedRegulations.map((code) => (
                            <span key={code} className="px-2 py-0.5 text-xs bg-slate-100 text-slate-600 rounded">
                              {code}
                            </span>
                          ))}
                        </div>
                        <a
                          href={item.source}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-xs text-teal-600 hover:underline"
                        >
                          Quelle →
                        </a>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Integrated Regulations */}
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-2xl">✅</span>
                <div>
                  <h3 className="font-semibold text-slate-900">Neu integrierte Regulierungen</h3>
                  <p className="text-sm text-slate-500">Jetzt im RAG-System verfuegbar (Stand: Januar 2025)</p>
                </div>
              </div>

              <div className="grid grid-cols-2 md:grid-cols-5 gap-3">
                {INTEGRATED_REGULATIONS.map((reg) => (
                  <div key={reg.code} className="rounded-lg border border-green-200 bg-green-50 p-3 text-center">
                    <span className="px-2 py-1 text-sm font-bold bg-green-100 text-green-700 rounded">
                      {reg.code}
                    </span>
                    <p className="text-xs text-slate-600 mt-2">{reg.name}</p>
                    <p className="text-xs text-green-600 mt-1">Im RAG</p>
                  </div>
                ))}
              </div>
            </div>

            {/* Potential Future Regulations */}
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-2xl">🔮</span>
                <div>
                  <h3 className="font-semibold text-slate-900">Zukuenftige Regulierungen</h3>
                  <p className="text-sm text-slate-500">Noch nicht verabschiedet oder zur Erweiterung vorgesehen</p>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                {ADDITIONAL_REGULATIONS.map((reg) => (
                  <div key={reg.code} className={`rounded-lg border p-4 ${
                    reg.status === 'active' ? 'border-green-200 bg-green-50' : 'border-yellow-200 bg-yellow-50'
                  }`}>
                    <div className="flex items-center justify-between mb-2">
                      <div className="flex items-center gap-2">
                        <span className={`px-2 py-0.5 text-xs font-bold rounded ${
                          reg.type === 'eu_regulation' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700'
                        }`}>
                          {reg.code}
                        </span>
                        <span className={`px-2 py-0.5 text-xs rounded ${
                          reg.status === 'active' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
                        }`}>
                          {reg.status === 'active' ? 'In Kraft' : 'Vorgeschlagen'}
                        </span>
                      </div>
                      <span className={`px-2 py-0.5 text-xs rounded ${
                        reg.priority === 'high' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-600'
                      }`}>
                        {reg.priority === 'high' ? 'Hohe Prioritaet' : 'Mittel'}
                      </span>
                    </div>
                    <h4 className="font-medium text-slate-900 text-sm mb-1">{reg.name}</h4>
                    <p className="text-xs text-slate-600 mb-2">{reg.description}</p>
                    <div className="flex items-center justify-between text-xs">
                      <span className="text-slate-500">Ab: {reg.effectiveDate}</span>
                      {reg.celex && (
                        <a
                          href={`https://eur-lex.europa.eu/legal-content/DE/TXT/?uri=CELEX:${reg.celex}`}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-teal-600 hover:underline"
                        >
                          EUR-Lex →
                        </a>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Legal Basis Info */}
            <div className="bg-emerald-50 rounded-xl border border-emerald-200 p-6">
              <div className="flex items-center gap-3 mb-4">
                <span className="text-2xl">⚖️</span>
                <div>
                  <h3 className="font-semibold text-slate-900">{LEGAL_BASIS_INFO.title}</h3>
                  <p className="text-sm text-emerald-700">{LEGAL_BASIS_INFO.summary}</p>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {LEGAL_BASIS_INFO.details.map((detail, idx) => (
                  <div key={idx} className="bg-white rounded-lg border border-emerald-100 p-3">
                    <div className="flex items-center gap-2 mb-1">
                      <span className={`px-2 py-0.5 text-xs font-medium rounded ${
                        detail.status === 'Erlaubt' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
                      }`}>
                        {detail.status}
                      </span>
                      <span className="font-medium text-sm text-slate-900">{detail.aspect}</span>
                    </div>
                    <p className="text-xs text-slate-600">{detail.explanation}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

        {activeTab === 'search' && (
          <div className="space-y-6">
            {/* Search Box */}
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <h3 className="font-semibold text-slate-900 mb-4">Semantische Suche</h3>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Suchanfrage</label>
                  <textarea
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                    placeholder="z.B. 'Welche Anforderungen gibt es fuer KI-Systeme mit hohem Risiko?'"
                    rows={3}
                    className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Filter (optional)</label>
                  <div className="flex flex-wrap gap-2">
                    {['GDPR', 'AIACT', 'CRA', 'NIS2', 'BSI-TR-03161-1'].map((code) => (
                      <button
                        key={code}
                        onClick={() => {
                          setSelectedRegulations((prev) =>
                            prev.includes(code) ? prev.filter((c) => c !== code) : [...prev, code]
                          )
                        }}
                        className={`px-3 py-1 text-sm rounded-full border transition-colors ${
                          selectedRegulations.includes(code)
                            ? 'bg-teal-100 border-teal-300 text-teal-700'
                            : 'bg-white border-slate-200 text-slate-600 hover:border-slate-300'
                        }`}
                      >
                        {code}
                      </button>
                    ))}
                  </div>
                </div>
                <button
                  onClick={handleSearch}
                  disabled={searching || !searchQuery.trim()}
                  className="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50"
                >
                  {searching ? 'Suche...' : 'Suchen'}
                </button>
              </div>
            </div>

            {/* Search Results */}
            {searchResults.length > 0 && (
              <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                <div className="px-4 py-3 border-b bg-slate-50">
                  <h3 className="font-semibold text-slate-900">{searchResults.length} Ergebnisse</h3>
                </div>
                <div className="divide-y">
                  {searchResults.map((result, i) => (
                    <div key={i} className="p-4">
                      <div className="flex items-center gap-2 mb-2">
                        <span className="px-2 py-0.5 text-xs rounded bg-teal-100 text-teal-700">
                          {result.regulation_code}
                        </span>
                        {result.article && (
                          <span className="text-sm text-slate-500">Art. {result.article}</span>
                        )}
                        <span className="ml-auto text-sm text-slate-400">
                          Score: {(result.score * 100).toFixed(1)}%
                        </span>
                      </div>
                      <p className="text-slate-700 text-sm">{result.text}</p>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {activeTab === 'data' && (
          <div className="space-y-6">
            {/* Upload Document */}
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <h3 className="font-semibold text-slate-900 mb-4">Dokument hochladen (PDF)</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">PDF-Datei</label>
                  <input
                    type="file"
                    accept=".pdf"
                    onChange={(e) => setUploadFile(e.target.files?.[0] || null)}
                    className="w-full px-3 py-2 border rounded-lg text-sm"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Titel</label>
                  <input
                    type="text"
                    value={uploadTitle}
                    onChange={(e) => setUploadTitle(e.target.value)}
                    placeholder="z.B. Firmen-Datenschutzrichtlinie"
                    className="w-full px-3 py-2 border rounded-lg"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Code (eindeutig)</label>
                  <input
                    type="text"
                    value={uploadCode}
                    onChange={(e) => setUploadCode(e.target.value.toUpperCase())}
                    placeholder="z.B. CUSTOM-DSR-01"
                    className="w-full px-3 py-2 border rounded-lg font-mono"
                  />
                </div>
              </div>
              <button
                onClick={handleUpload}
                disabled={uploading || !uploadFile || !uploadTitle || !uploadCode}
                className="mt-4 px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50"
              >
                {uploading ? 'Wird hochgeladen...' : 'Hochladen & Indexieren'}
              </button>
            </div>

            {/* Add Link */}
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <h3 className="font-semibold text-slate-900 mb-4">Link hinzufuegen (Webseite/PDF)</h3>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">URL</label>
                  <input
                    type="url"
                    value={linkUrl}
                    onChange={(e) => setLinkUrl(e.target.value)}
                    placeholder="https://example.com/document.pdf"
                    className="w-full px-3 py-2 border rounded-lg"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Titel</label>
                  <input
                    type="text"
                    value={linkTitle}
                    onChange={(e) => setLinkTitle(e.target.value)}
                    placeholder="z.B. BSI IT-Grundschutz"
                    className="w-full px-3 py-2 border rounded-lg"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-2">Code (eindeutig)</label>
                  <input
                    type="text"
                    value={linkCode}
                    onChange={(e) => setLinkCode(e.target.value.toUpperCase())}
                    placeholder="z.B. BSI-GRUNDSCHUTZ"
                    className="w-full px-3 py-2 border rounded-lg font-mono"
                  />
                </div>
              </div>
              <button
                onClick={handleAddLink}
                disabled={addingLink || !linkUrl || !linkTitle || !linkCode}
                className="mt-4 px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50"
              >
                {addingLink ? 'Wird hinzugefuegt...' : 'Link hinzufuegen & Indexieren'}
              </button>
            </div>

            {/* Custom Documents List */}
            <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
              <div className="px-4 py-3 border-b bg-slate-50 flex items-center justify-between">
                <h3 className="font-semibold text-slate-900">Eigene Dokumente ({customDocuments.length})</h3>
                <button
                  onClick={fetchCustomDocuments}
                  className="text-sm text-teal-600 hover:text-teal-700"
                >
                  Aktualisieren
                </button>
              </div>
              {customDocuments.length === 0 ? (
                <div className="p-8 text-center text-slate-500">
                  Noch keine eigenen Dokumente hinzugefuegt.
                </div>
              ) : (
                <div className="divide-y">
                  {customDocuments.map((doc) => (
                    <div key={doc.id} className="px-4 py-3 flex items-center justify-between">
                      <div className="flex items-center gap-3">
                        <span className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-lg">
                          {doc.url ? '🔗' : '📄'}
                        </span>
                        <div>
                          <p className="font-medium text-slate-900">{doc.title}</p>
                          <p className="text-sm text-slate-500">
                            <span className="font-mono text-teal-600">{doc.code}</span>
                            {' • '}
                            {doc.filename || doc.url}
                          </p>
                        </div>
                      </div>
                      <div className="flex items-center gap-4">
                        <span className={`px-2 py-1 rounded text-xs font-medium ${
                          doc.status === 'indexed' ? 'bg-green-100 text-green-700' :
                          doc.status === 'error' ? 'bg-red-100 text-red-700' :
                          doc.status === 'processing' || doc.status === 'fetching' ? 'bg-blue-100 text-blue-700' :
                          'bg-slate-100 text-slate-700'
                        }`}>
                          {doc.status === 'indexed' ? `${doc.chunk_count} Chunks` :
                           doc.status === 'error' ? 'Fehler' :
                           doc.status === 'processing' ? 'Verarbeitung...' :
                           doc.status === 'fetching' ? 'Abruf...' :
                           doc.status}
                        </span>
                        <button
                          onClick={() => handleDeleteDocument(doc.id)}
                          className="text-red-500 hover:text-red-700 text-sm"
                        >
                          Loeschen
                        </button>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

            {/* Info Box */}
            <div className="bg-teal-50 border border-teal-200 rounded-xl p-6">
              <h4 className="font-semibold text-teal-800 flex items-center gap-2">
                <span>ℹ️</span>
                Hinweis zur Verwendung
              </h4>
              <p className="text-sm text-teal-700 mt-2">
                Laden Sie eigene Dokumente (z.B. interne Datenschutzrichtlinien, Vertraege) oder
                externe Links hoch. Diese werden automatisch in Chunks aufgeteilt und indexiert.
                Nach dem Hinzufuegen koennen Sie im <strong>Pipeline</strong>-Tab die vollstaendige
                Compliance-Analyse starten.
              </p>
            </div>
          </div>
        )}

        {activeTab === 'ingestion' && (
          <div className="space-y-6">
            {/* Ingestion Control */}
            <div className="bg-white rounded-xl border border-slate-200 p-6">
              <h3 className="font-semibold text-slate-900 mb-4">Legal Corpus Re-Ingestion</h3>
              <p className="text-slate-600 mb-4">
                Startet die Neuindexierung aller 19 Regulierungen. Die Dokumente werden von EUR-Lex,
                gesetze-im-internet.de und BSI heruntergeladen, in semantische Chunks aufgeteilt und
                mit BGE-M3 Embeddings in Qdrant indexiert.
              </p>
              <div className="flex items-center gap-4">
                <button
                  onClick={triggerIngestion}
                  disabled={ingestionRunning}
                  className="px-6 py-2 bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50"
                >
                  {ingestionRunning ? 'Laeuft...' : 'Re-Ingestion starten'}
                </button>
                {ingestionRunning && (
                  <span className="flex items-center gap-2 text-teal-600">
                    <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                    </svg>
                    Ingestion laeuft...
                  </span>
                )}
              </div>
            </div>

            {/* Ingestion Log */}
            {ingestionLog.length > 0 && (
              <div className="bg-slate-900 rounded-xl p-4">
                <h4 className="text-slate-400 text-sm mb-2">Log</h4>
                <div className="font-mono text-sm text-green-400 space-y-1 max-h-64 overflow-y-auto">
                  {ingestionLog.map((line, i) => (
                    <div key={i}>{line}</div>
                  ))}
                </div>
              </div>
            )}

            {/* Info Box */}
            <div className="bg-teal-50 border border-teal-200 rounded-xl p-6">
              <h4 className="font-semibold text-teal-800 flex items-center gap-2">
                <span>💡</span>
                Hinweis zur Datenquelle
              </h4>
              <p className="text-sm text-teal-700 mt-2">
                Alle indexierten Dokumente sind amtliche Werke (§5 UrhG) und damit urheberrechtsfrei.
                Sie werden nur fuer RAG/Retrieval verwendet, nicht fuer Modell-Training.
                Die Daten werden lokal auf dem Mac Mini verarbeitet und nicht an externe Dienste gesendet.
              </p>
            </div>
          </div>
        )}

        {activeTab === 'pipeline' && (
          <div className="space-y-6">
            {/* Pipeline Header */}
            <div className="flex items-center justify-between flex-wrap gap-4">
              <div className="flex items-center gap-4">
                <h3 className="text-lg font-semibold text-slate-900">Compliance Pipeline Status</h3>
                {/* Running Time Indicator */}
                {pipelineState?.status === 'running' && elapsedTime && (
                  <div className="flex items-center gap-2 px-3 py-1.5 bg-blue-50 border border-blue-200 rounded-full">
                    <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
                    <span className="text-sm font-medium text-blue-700">Laufzeit: {elapsedTime}</span>
                  </div>
                )}
              </div>
              <div className="flex items-center gap-3">
                {/* Auto-Refresh Toggle */}
                <label className="flex items-center gap-2 text-sm text-slate-600 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={autoRefresh}
                    onChange={(e) => setAutoRefresh(e.target.checked)}
                    className="w-4 h-4 text-teal-600 rounded border-slate-300 focus:ring-teal-500"
                  />
                  Auto-Refresh
                </label>
                {/* Start Pipeline Button */}
                {(!pipelineState || pipelineState.status !== 'running') && (
                  <button
                    onClick={() => handleStartPipeline(false)}
                    disabled={pipelineStarting}
                    className="flex items-center gap-2 px-4 py-2 text-sm bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
                  >
                    {pipelineStarting ? (
                      <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                      </svg>
                    ) : (
                      <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>
                )}
                <button
                  onClick={fetchPipeline}
                  disabled={pipelineLoading}
                  className="flex items-center gap-2 px-4 py-2 text-sm bg-teal-600 text-white rounded-lg hover:bg-teal-700 disabled:opacity-50"
                >
                  {pipelineLoading ? (
                    <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                    </svg>
                  ) : (
                    <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>
                  )}
                  Aktualisieren
                </button>
              </div>
            </div>

            {/* No Data */}
            {(!pipelineState || pipelineState.status === 'no_data') && !pipelineLoading && (
              <div className="bg-white rounded-xl border border-slate-200 p-8 text-center">
                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-100 flex items-center justify-center">
                  <svg className="w-8 h-8 text-slate-400" 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>
                <h4 className="text-lg font-semibold text-slate-900 mb-2">Keine Pipeline-Daten</h4>
                <p className="text-slate-600 mb-4">
                  Es wurde noch keine Pipeline ausgefuehrt. Starten Sie die Compliance-Pipeline um Checkpoint-Daten zu sehen.
                </p>
                <button
                  onClick={() => handleStartPipeline(false)}
                  disabled={pipelineStarting}
                  className="inline-flex items-center gap-2 px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 disabled:opacity-50"
                >
                  {pipelineStarting ? (
                    <>
                      <svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                      </svg>
                      Startet...
                    </>
                  ) : (
                    <>
                      <svg className="w-5 h-5" 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 jetzt starten
                    </>
                  )}
                </button>
              </div>
            )}

            {/* Pipeline Status */}
            {pipelineState && pipelineState.status !== 'no_data' && (
              <>
                {/* Status Card */}
                <div className="bg-white rounded-xl border border-slate-200 p-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-4">
                      <div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
                        pipelineState.status === 'completed' ? 'bg-green-100' :
                        pipelineState.status === 'running' ? 'bg-blue-100' :
                        pipelineState.status === 'failed' ? 'bg-red-100' : 'bg-slate-100'
                      }`}>
                        {pipelineState.status === 'completed' && (
                          <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                          </svg>
                        )}
                        {pipelineState.status === 'running' && (
                          <svg className="w-6 h-6 text-blue-600 animate-spin" fill="none" viewBox="0 0 24 24">
                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                          </svg>
                        )}
                        {pipelineState.status === 'failed' && (
                          <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        )}
                      </div>
                      <div>
                        <h4 className="font-semibold text-slate-900">Pipeline {pipelineState.pipeline_id}</h4>
                        <p className="text-sm text-slate-500">
                          Gestartet: {pipelineState.started_at ? new Date(pipelineState.started_at).toLocaleString('de-DE') : '-'}
                          {pipelineState.completed_at && ` | Beendet: ${new Date(pipelineState.completed_at).toLocaleString('de-DE')}`}
                        </p>
                      </div>
                    </div>
                    <span className={`px-3 py-1 rounded-full text-sm font-medium ${
                      pipelineState.status === 'completed' ? 'bg-green-100 text-green-700' :
                      pipelineState.status === 'running' ? 'bg-blue-100 text-blue-700' :
                      pipelineState.status === 'failed' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-700'
                    }`}>
                      {pipelineState.status === 'completed' ? 'Abgeschlossen' :
                       pipelineState.status === 'running' ? 'Laeuft' :
                       pipelineState.status === 'failed' ? 'Fehlgeschlagen' : pipelineState.status}
                    </span>
                  </div>
                </div>

                {/* Current Progress - only when running */}
                {pipelineState.status === 'running' && pipelineState.current_phase && (
                  <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200 p-6">
                    <div className="flex items-center justify-between mb-4">
                      <h4 className="font-semibold text-blue-900 flex items-center gap-2">
                        <svg className="w-5 h-5 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                        Aktuelle Verarbeitung
                      </h4>
                      <span className="text-sm text-blue-600">Phase: {pipelineState.current_phase}</span>
                    </div>

                    {/* Phase Progress Indicator */}
                    <div className="flex items-center gap-2 mb-4">
                      {['ingestion', 'extraction', 'controls', 'measures'].map((phase, idx) => (
                        <div key={phase} className="flex-1 flex items-center">
                          <div className={`flex-1 h-2 rounded-full ${
                            pipelineState.current_phase === phase ? 'bg-blue-500 animate-pulse' :
                            pipelineState.checkpoints?.some((c: PipelineCheckpoint) => c.phase === phase && c.status === 'completed') ? 'bg-green-500' :
                            'bg-slate-200'
                          }`} />
                          {idx < 3 && <div className="w-2" />}
                        </div>
                      ))}
                    </div>
                    <div className="flex justify-between text-xs text-slate-500 mb-4">
                      <span>Ingestion</span>
                      <span>Extraktion</span>
                      <span>Controls</span>
                      <span>Massnahmen</span>
                    </div>

                    {/* Current checkpoint details */}
                    {pipelineState.checkpoints?.filter((c: PipelineCheckpoint) => c.status === 'running').map((checkpoint: PipelineCheckpoint, idx: number) => (
                      <div key={idx} className="bg-white/60 rounded-lg p-4 mt-2">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-3">
                            <div className="w-3 h-3 bg-blue-500 rounded-full animate-pulse" />
                            <span className="font-medium text-slate-900">{checkpoint.name}</span>
                          </div>
                          {checkpoint.metrics && Object.keys(checkpoint.metrics).length > 0 && (
                            <div className="flex gap-2">
                              {Object.entries(checkpoint.metrics).slice(0, 3).map(([key, value]) => (
                                <span key={key} className="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">
                                  {key.replace(/_/g, ' ')}: {typeof value === 'number' ? value.toLocaleString() : String(value)}
                                </span>
                              ))}
                            </div>
                          )}
                        </div>
                      </div>
                    ))}

                    {/* Live chunk count */}
                    <div className="mt-4 flex items-center justify-between text-sm">
                      <span className="text-slate-600">Chunks in Qdrant:</span>
                      <span className="font-bold text-blue-700">{collectionStatus?.totalPoints?.toLocaleString() || '-'}</span>
                    </div>
                  </div>
                )}

                {/* Validation Summary */}
                {pipelineState.validation_summary && (
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div className="bg-white rounded-xl border border-green-200 p-4">
                      <p className="text-sm text-slate-500">Bestanden</p>
                      <p className="text-2xl font-bold text-green-600">{pipelineState.validation_summary.passed}</p>
                    </div>
                    <div className="bg-white rounded-xl border border-yellow-200 p-4">
                      <p className="text-sm text-slate-500">Warnungen</p>
                      <p className="text-2xl font-bold text-yellow-600">{pipelineState.validation_summary.warning}</p>
                    </div>
                    <div className="bg-white rounded-xl border border-red-200 p-4">
                      <p className="text-sm text-slate-500">Fehlgeschlagen</p>
                      <p className="text-2xl font-bold text-red-600">{pipelineState.validation_summary.failed}</p>
                    </div>
                    <div className="bg-white rounded-xl border border-slate-200 p-4">
                      <p className="text-sm text-slate-500">Gesamt</p>
                      <p className="text-2xl font-bold text-slate-700">{pipelineState.validation_summary.total}</p>
                    </div>
                  </div>
                )}

                {/* Checkpoints */}
                <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
                  <div className="px-4 py-3 border-b bg-slate-50">
                    <h3 className="font-semibold text-slate-900">Checkpoints ({pipelineState.checkpoints?.length || 0})</h3>
                  </div>
                  <div className="divide-y">
                    {pipelineState.checkpoints?.map((checkpoint, idx) => (
                      <div key={idx} className="p-4">
                        <div className="flex items-center justify-between mb-2">
                          <div className="flex items-center gap-3">
                            <span className={`w-3 h-3 rounded-full ${
                              checkpoint.phase === 'ingestion' ? 'bg-blue-500' :
                              checkpoint.phase === 'extraction' ? 'bg-purple-500' :
                              checkpoint.phase === 'controls' ? 'bg-green-500' : 'bg-orange-500'
                            }`} />
                            <span className="font-medium text-slate-900">{checkpoint.name}</span>
                            <span className="text-sm text-slate-500">
                              ({checkpoint.phase}) |
                              {checkpoint.duration_seconds ? ` ${checkpoint.duration_seconds.toFixed(1)}s` : ' -'}
                            </span>
                          </div>
                          <span className={`px-2 py-0.5 rounded text-xs font-medium ${
                            checkpoint.status === 'completed' ? 'bg-green-100 text-green-700' :
                            checkpoint.status === 'running' ? 'bg-blue-100 text-blue-700' :
                            checkpoint.status === 'failed' ? 'bg-red-100 text-red-700' : 'bg-slate-100 text-slate-700'
                          }`}>
                            {checkpoint.status}
                          </span>
                        </div>

                        {/* Metrics */}
                        {Object.keys(checkpoint.metrics || {}).length > 0 && (
                          <div className="flex flex-wrap gap-2 mt-2">
                            {Object.entries(checkpoint.metrics).map(([key, value]) => (
                              <span key={key} className="px-2 py-1 bg-slate-100 rounded text-xs text-slate-600">
                                {key.replace(/_/g, ' ')}: <strong>{typeof value === 'number' ? value.toLocaleString() : String(value)}</strong>
                              </span>
                            ))}
                          </div>
                        )}

                        {/* Validations */}
                        {checkpoint.validations?.length > 0 && (
                          <div className="mt-3 space-y-1">
                            {checkpoint.validations.map((v, vIdx) => (
                              <div key={vIdx} className="flex items-center gap-2 text-sm">
                                <span className={`w-4 h-4 flex items-center justify-center ${
                                  v.status === 'passed' ? 'text-green-500' :
                                  v.status === 'warning' ? 'text-yellow-500' : 'text-red-500'
                                }`}>
                                  {v.status === 'passed' ? '✓' : v.status === 'warning' ? '⚠' : '✗'}
                                </span>
                                <span className="text-slate-700">{v.name}:</span>
                                <span className="text-slate-500">{v.message}</span>
                              </div>
                            ))}
                          </div>
                        )}

                        {/* Error */}
                        {checkpoint.error && (
                          <div className="mt-2 p-2 bg-red-50 border border-red-200 rounded text-sm text-red-700">
                            {checkpoint.error}
                          </div>
                        )}
                      </div>
                    ))}
                    {(!pipelineState.checkpoints || pipelineState.checkpoints.length === 0) && (
                      <div className="p-4 text-center text-slate-500">
                        Noch keine Checkpoints vorhanden.
                      </div>
                    )}
                  </div>
                </div>

                {/* Summary */}
                {Object.keys(pipelineState.summary || {}).length > 0 && (
                  <div className="bg-white rounded-xl border border-slate-200 p-4">
                    <h4 className="font-semibold text-slate-900 mb-3">Zusammenfassung</h4>
                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
                      {Object.entries(pipelineState.summary).map(([key, value]) => (
                        <div key={key}>
                          <p className="text-sm text-slate-500">{key.replace(/_/g, ' ')}</p>
                          <p className="font-bold text-slate-900">
                            {typeof value === 'number' ? value.toLocaleString() : String(value)}
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </>
            )}
          </div>
        )}
      </div>
    </div>
  )
}
