'use client'

import React, { useState, useEffect, Suspense } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import Link from 'next/link'
import { useSDK } from '@/lib/sdk'
import { AssessmentResultCard } from '@/components/sdk/use-case-assessment/AssessmentResultCard'

// =============================================================================
// WIZARD STEPS CONFIG
// =============================================================================

const WIZARD_STEPS = [
  { id: 1, title: 'Grundlegendes', description: 'Titel, Beschreibung und KI-Kategorie' },
  { id: 2, title: 'Datenkategorien', description: 'Welche Daten werden verarbeitet?' },
  { id: 3, title: 'Verarbeitungszweck', description: 'Zweck der Datenverarbeitung' },
  { id: 4, title: 'Automatisierung', description: 'Grad der Automatisierung' },
  { id: 5, title: 'Hosting & Modell', description: 'Technische Details' },
  { id: 6, title: 'Datentransfer', description: 'Internationaler Datentransfer' },
  { id: 7, title: 'Datenhaltung', description: 'Aufbewahrung und Speicherung' },
  { id: 8, title: 'Vertraege', description: 'Compliance und Vereinbarungen' },
]

// =============================================================================
// KI-Anwendungskategorien als Auswahlkacheln
// =============================================================================

const AI_USE_CATEGORIES = [
  { value: 'content_generation', label: 'Content-Erstellung', icon: '✍️', desc: 'Texte, Berichte, E-Mails, Dokumentation automatisch erstellen' },
  { value: 'image_generation', label: 'Bilder erstellen', icon: '🎨', desc: 'KI-generierte Bilder, Grafiken, Produktfotos' },
  { value: 'marketing_material', label: 'Marketingmaterial', icon: '📢', desc: 'Werbetexte, Social Media Posts, Newsletter generieren' },
  { value: 'customer_service', label: 'Kundenservice / Chatbot', icon: '💬', desc: 'Automatisierte Kundenanfragen, FAQ-Bots, Support-Tickets' },
  { value: 'crm_analytics', label: 'CRM & Kundenanalyse', icon: '👥', desc: 'Kundensegmentierung, Churn-Vorhersage, Lead-Scoring' },
  { value: 'hr_recruiting', label: 'Bewerberauswahl / HR', icon: '🧑‍💼', desc: 'CV-Screening, Matching, Mitarbeiteranalysen' },
  { value: 'financial_analysis', label: 'Finanzdaten analysieren', icon: '📊', desc: 'Buchhaltung, Forecasting, Betrugs­erkennung, Risikobewertung' },
  { value: 'predictive_maintenance', label: 'Predictive Maintenance', icon: '🔧', desc: 'Vorausschauende Wartung, Ausfallvorhersage, IoT-Sensoranalyse' },
  { value: 'production_analytics', label: 'Produktionsdaten­auswertung', icon: '🏭', desc: 'Qualitaetskontrolle, Prozess­optimierung, OEE-Analyse' },
  { value: 'document_analysis', label: 'Dokumentenanalyse', icon: '📄', desc: 'Vertraege, Rechnungen, PDFs automatisch auswerten und klassifizieren' },
  { value: 'code_development', label: 'Softwareentwicklung', icon: '💻', desc: 'Code-Generierung, Code-Review, Test-Erstellung, Dokumentation' },
  { value: 'translation', label: 'Uebersetzung', icon: '🌍', desc: 'Automatische Uebersetzung von Texten, Dokumenten, Webinhalten' },
  { value: 'search_knowledge', label: 'Wissensmanagement / Suche', icon: '🔍', desc: 'Interne Wissensdatenbank, RAG-basierte Suche, FAQ-Systeme' },
  { value: 'data_extraction', label: 'Datenextraktion', icon: '⛏️', desc: 'OCR, Formularerkennung, strukturierte Daten aus Freitext' },
  { value: 'risk_compliance', label: 'Risiko & Compliance', icon: '⚖️', desc: 'Compliance-Pruefung, Risikobewertung, Audit-Unterstuetzung' },
  { value: 'supply_chain', label: 'Lieferkette & Logistik', icon: '🚛', desc: 'Bedarfsprognose, Routenoptimierung, Bestandsmanagement' },
  { value: 'medical_health', label: 'Medizin & Gesundheit', icon: '🏥', desc: 'Diagnoseunterstuetzung, Bildanalyse, Patientendaten' },
  { value: 'security_monitoring', label: 'Sicherheit & Monitoring', icon: '🛡️', desc: 'Anomalieerkennung, Bedrohungsanalyse, Zugriffskontrolle' },
  { value: 'personalization', label: 'Personalisierung', icon: '🎯', desc: 'Produktempfehlungen, dynamische Preisgestaltung, A/B-Testing' },
  { value: 'voice_speech', label: 'Sprache & Audio', icon: '🎙️', desc: 'Spracherkennung, Text-to-Speech, Meeting-Transkription' },
  { value: 'other', label: 'Sonstiges', icon: '➕', desc: 'Anderer KI-Anwendungsfall' },
]

// Map Profil-Branche to domain value for backend compatibility
function industryToDomain(industries: string[]): string {
  if (!industries || industries.length === 0) return 'general'
  const first = industries[0].toLowerCase()
  if (first.includes('gesundheit') || first.includes('pharma')) return 'healthcare'
  if (first.includes('finanz') || first.includes('versicherung')) return 'finance'
  if (first.includes('bildung')) return 'education'
  if (first.includes('handel') || first.includes('commerce')) return 'retail'
  if (first.includes('it') || first.includes('technologie')) return 'it_services'
  if (first.includes('beratung') || first.includes('consulting')) return 'consulting'
  if (first.includes('produktion') || first.includes('industrie') || first.includes('maschinenbau')) return 'manufacturing'
  if (first.includes('marketing') || first.includes('agentur')) return 'marketing'
  if (first.includes('recht')) return 'legal'
  return 'general'
}

// =============================================================================
// DATA CATEGORIES (Step 2) — grouped tile selection
// =============================================================================

const DATA_CATEGORY_GROUPS = [
  {
    group: 'Stamm- & Kontaktdaten',
    items: [
      { value: 'basic_identity', label: 'Name & Identitaet', icon: '👤', desc: 'Vor-/Nachname, Geburtsdatum, Geschlecht' },
      { value: 'contact_data', label: 'Kontaktdaten', icon: '📧', desc: 'E-Mail, Telefon, Fax' },
      { value: 'address_data', label: 'Adressdaten', icon: '🏠', desc: 'Wohn-/Meldeadresse, PLZ, Lieferadresse' },
      { value: 'government_ids', label: 'Ausweisdaten', icon: '🪪', desc: 'Personalausweis-Nr., Reisepass, Fuehrerschein' },
      { value: 'customer_ids', label: 'Kundennummern', icon: '🏷️', desc: 'Kunden-ID, Vertrags-Nr., Mitgliedsnummer' },
    ],
  },
  {
    group: 'Besondere Kategorien (Art. 9 DSGVO)',
    art9: true,
    items: [
      { value: 'health_data', label: 'Gesundheitsdaten', icon: '🏥', desc: 'Diagnosen, Medikation, AU, Pflegegrad' },
      { value: 'biometric_data', label: 'Biometrische Daten', icon: '🔐', desc: 'Fingerabdruck, Gesichtserkennung, Iris-Scan' },
      { value: 'genetic_data', label: 'Genetische Daten', icon: '🧬', desc: 'DNA-Profil, Genomsequenzen, Erbkrankheitstests' },
      { value: 'racial_ethnic', label: 'Ethnische Herkunft', icon: '🌍', desc: 'Rassische/ethnische Zugehoerigkeit' },
      { value: 'political_opinions', label: 'Politische Meinungen', icon: '🗳️', desc: 'Politische Ueberzeugungen, Parteizugehoerigkeit' },
      { value: 'religious_beliefs', label: 'Religion', icon: '🕊️', desc: 'Religionszugehoerigkeit, Weltanschauung' },
      { value: 'trade_union', label: 'Gewerkschaft', icon: '🤝', desc: 'Gewerkschaftsmitgliedschaft' },
      { value: 'sexual_orientation', label: 'Sexuelle Orientierung', icon: '🏳️‍🌈', desc: 'Sexualleben und Orientierung' },
    ],
  },
  {
    group: 'Finanz- & Steuerdaten',
    items: [
      { value: 'bank_account', label: 'Bankverbindung', icon: '🏦', desc: 'IBAN, BIC, Kontonummer' },
      { value: 'payment_card', label: 'Zahlungskarten', icon: '💳', desc: 'Kreditkarten-Nr., CVV (PCI-DSS)' },
      { value: 'transaction_data', label: 'Transaktionsdaten', icon: '🧾', desc: 'Zahlungshistorie, Ueberweisungen, Kaufhistorie' },
      { value: 'credit_score', label: 'Bonitaet / Schufa', icon: '📈', desc: 'Kreditwuerdigkeit, Schuldenhistorie' },
      { value: 'income_salary', label: 'Einkommen & Gehalt', icon: '💰', desc: 'Bruttogehalt, Nettolohn, Boni' },
      { value: 'tax_ids', label: 'Steuer-IDs', icon: '📋', desc: 'Steuer-ID, Steuernummer, USt-IdNr.' },
      { value: 'insurance_data', label: 'Versicherungsdaten', icon: '☂️', desc: 'Versicherungsnummern, Policen, Schadenmeldungen' },
    ],
  },
  {
    group: 'Fahrzeug- & Mobilitaetsdaten',
    items: [
      { value: 'vehicle_ids', label: 'Fahrzeug-IDs (VIN)', icon: '🚗', desc: 'Fahrgestellnummer (VIN/FIN), Fahrzeugschein' },
      { value: 'license_plates', label: 'Kennzeichen', icon: '🔢', desc: 'Amtliches Kennzeichen, Wunschkennzeichen' },
      { value: 'gps_tracking', label: 'GPS & Routen', icon: '📍', desc: 'Echtzeitposition, Fahrtenprotokolle' },
      { value: 'telematics', label: 'Telematikdaten', icon: '📡', desc: 'Fahrverhalten, Geschwindigkeit, Motordiagnose' },
      { value: 'fleet_data', label: 'Fuhrpark / Logistik', icon: '🚛', desc: 'Einsatzzeiten, Kilometerstand, Fahrerzuweisung' },
    ],
  },
  {
    group: 'Technische Identifikatoren',
    items: [
      { value: 'ip_address', label: 'IP-Adresse', icon: '🌐', desc: 'IPv4/IPv6 (EuGH: personenbezogen)' },
      { value: 'device_ids', label: 'Geraete-IDs', icon: '📱', desc: 'IMEI, UUID, Advertising-ID, Seriennummer' },
      { value: 'cookies_tracking', label: 'Cookies & Tracking', icon: '🍪', desc: 'Session-/Persistent Cookies, Pixel-Tags' },
      { value: 'browser_fingerprint', label: 'Browser-Fingerprint', icon: '🔎', desc: 'Browser-Typ, OS, Plugins, Canvas-Fingerprint' },
      { value: 'mac_address', label: 'MAC-Adresse', icon: '📶', desc: 'Netzwerkadapter-Kennung, WLAN-Praesenz' },
    ],
  },
  {
    group: 'Verhaltens- & Nutzungsdaten',
    items: [
      { value: 'clickstream', label: 'Klick- & Nutzungspfade', icon: '🖱️', desc: 'Klickpfade, Scrolltiefe, Verweildauer, Heatmaps' },
      { value: 'purchase_history', label: 'Kaufverhalten', icon: '🛒', desc: 'Bestellhistorie, Warenkorb, Wunschlisten' },
      { value: 'app_usage', label: 'App-Nutzung', icon: '📲', desc: 'Genutzte Apps, Nutzungsdauer, In-App-Aktivitaeten' },
      { value: 'profiling_scores', label: 'Profiling / Scoring', icon: '📊', desc: 'KI-generierte Profile, Segmente, Affinitaetsscores' },
    ],
  },
  {
    group: 'Kommunikation & Medien',
    items: [
      { value: 'email_content', label: 'E-Mail-Inhalte', icon: '✉️', desc: 'E-Mail-Texte, Anhaenge, Metadaten' },
      { value: 'chat_messages', label: 'Chat & Messaging', icon: '💬', desc: 'Textnachrichten, Messenger, Teams, Slack' },
      { value: 'call_recordings', label: 'Telefonaufzeichnungen', icon: '📞', desc: 'Gespraeche, Transkripte, Anrufmetadaten' },
      { value: 'video_conference', label: 'Videokonferenzen', icon: '📹', desc: 'Meeting-Aufzeichnungen, Teilnehmerlisten' },
      { value: 'photographs', label: 'Fotos & Bilder', icon: '📷', desc: 'Portraitfotos, Profilbilder, Produktfotos' },
      { value: 'cctv_surveillance', label: 'Videoueberwachung', icon: '📹', desc: 'CCTV-Aufnahmen, Zutrittskontrolle' },
      { value: 'voice_recordings', label: 'Sprachaufnahmen', icon: '🎙️', desc: 'Voicemails, Sprachmemos, Diktate' },
    ],
  },
  {
    group: 'HR & Beschaeftigung',
    items: [
      { value: 'employment_data', label: 'Beschaeftigungsdaten', icon: '💼', desc: 'Arbeitgeber, Berufsbezeichnung, Vertragsart' },
      { value: 'performance_data', label: 'Leistungsbeurteilungen', icon: '🏆', desc: 'Zielerreichung, Feedback, Abmahnungen' },
      { value: 'work_time', label: 'Arbeitszeit', icon: '⏰', desc: 'Zeiterfassung, Ueberstunden, Schichtplaene' },
      { value: 'candidate_data', label: 'Bewerberdaten', icon: '📝', desc: 'Lebenslaeufe, Interviews, Assessment-Ergebnisse' },
      { value: 'social_security', label: 'Sozialversicherungs-Nr.', icon: '🛡️', desc: 'RVNR (Art. 9 — kodiert Geburtsdatum/Geschlecht)' },
    ],
  },
  {
    group: 'IoT & Sensordaten',
    items: [
      { value: 'industrial_sensor', label: 'Industriesensoren', icon: '🏭', desc: 'Maschinendaten, Fehlerprotokolle, Produktionsmesswerte' },
      { value: 'wearable_data', label: 'Wearable-Daten', icon: '⌚', desc: 'Herzfrequenz, Schritte, Schlaf (Art. 9 — Gesundheit)' },
      { value: 'smart_home', label: 'Smart-Home', icon: '🏡', desc: 'Heizung, Licht, Bewegungsmelder, Nutzungszeiten' },
      { value: 'energy_data', label: 'Energieverbrauch', icon: '🔌', desc: 'Smart-Meter, Verbrauchsprofil (enthuellt Verhalten)' },
    ],
  },
  {
    group: 'Sonstige Kategorien',
    items: [
      { value: 'children_data', label: 'Kinderdaten (unter 16)', icon: '👶', desc: 'Besonderer Schutz, Eltern-Einwilligung erforderlich' },
      { value: 'criminal_data', label: 'Strafrechtliche Daten', icon: '⚖️', desc: 'Vorstrafen, Ermittlungsverfahren (Art. 10 DSGVO)' },
      { value: 'location_data', label: 'Standortdaten', icon: '📍', desc: 'GPS, Mobilfunk, WLAN-Ortung, Bewegungsprofile' },
      { value: 'social_media', label: 'Social-Media-Daten', icon: '📱', desc: 'Profile, Posts, Follower, Interaktionen' },
      { value: 'auth_credentials', label: 'Login & Zugangsdaten', icon: '🔑', desc: 'Passwoerter, 2FA, Session-Tokens, Zugriffsprotokolle' },
    ],
  },
]

// =============================================================================
// PROCESSING PURPOSES (Step 3) — tile selection
// =============================================================================

const PURPOSE_TILES = [
  { value: 'service_delivery', label: 'Serviceerbringung', icon: '⚙️', desc: 'Kernfunktion des Produkts oder Services' },
  { value: 'analytics', label: 'Analyse & BI', icon: '📊', desc: 'Statistische Auswertung, Business Intelligence, Reporting' },
  { value: 'marketing', label: 'Marketing & Werbung', icon: '📢', desc: 'Werbung, Personalisierung, Targeting, Newsletter' },
  { value: 'profiling', label: 'Profiling', icon: '🎯', desc: 'Automatisierte Analyse personenbezogener Aspekte' },
  { value: 'automated_decision', label: 'Automatisierte Entscheidung', icon: '🤖', desc: 'Art. 22 DSGVO — Entscheidung ohne menschliches Zutun' },
  { value: 'customer_support', label: 'Kundensupport', icon: '🎧', desc: 'Anfragenbearbeitung, Ticketsystem, Chatbot' },
  { value: 'quality_control', label: 'Qualitaetskontrolle', icon: '✅', desc: 'Produktpruefung, Fehleranalyse, Prozessoptimierung' },
  { value: 'hr_management', label: 'Personalverwaltung', icon: '👥', desc: 'Recruiting, Onboarding, Mitarbeiterentwicklung' },
  { value: 'fraud_detection', label: 'Betrugserkennung', icon: '🕵️', desc: 'Anomalieerkennung, Transaktionsueberwachung' },
  { value: 'research', label: 'Forschung & Entwicklung', icon: '🔬', desc: 'Wissenschaftliche Auswertung, Produktentwicklung' },
  { value: 'compliance_audit', label: 'Compliance & Audit', icon: '📜', desc: 'Regulatorische Pruefung, Dokumentation, Audit-Trail' },
  { value: 'communication', label: 'Kommunikation', icon: '💬', desc: 'Interne/externe Kommunikation, Uebersetzung' },
  { value: 'content_creation', label: 'Content-Erstellung', icon: '✍️', desc: 'Text-, Bild-, Video-Generierung' },
  { value: 'predictive', label: 'Vorhersage & Prognose', icon: '🔮', desc: 'Demand Forecasting, Predictive Analytics, Wartungsvorhersage' },
  { value: 'security', label: 'IT-Sicherheit', icon: '🛡️', desc: 'Bedrohungserkennung, Zugriffskontrolle, Monitoring' },
  { value: 'archiving', label: 'Archivierung', icon: '🗄️', desc: 'Gesetzliche Aufbewahrung, Dokumentenarchiv' },
]

// =============================================================================
// AUTOMATION LEVELS (Step 4) — single-select tiles
// =============================================================================

const AUTOMATION_TILES = [
  { value: 'assistive', label: 'Assistiv (Mensch entscheidet)', icon: '🧑‍💻', desc: 'KI liefert Vorschlaege, Mensch trifft Entscheidung', examples: 'Rechtschreibkorrektur, Suchvorschlaege, Zusammenfassungen' },
  { value: 'semi_automated', label: 'Teilautomatisiert (Mensch prueft)', icon: '🤝', desc: 'KI erstellt Ergebnisse, Mensch prueft und bestaetigt', examples: 'E-Mail-Entwuerfe mit Freigabe, KI-Vertraege mit juristischer Pruefung' },
  { value: 'fully_automated', label: 'Vollautomatisiert (KI entscheidet)', icon: '🤖', desc: 'KI trifft Entscheidungen eigenstaendig', examples: 'Automatische Kreditentscheidungen, autonome Chatbot-Antworten' },
]

// =============================================================================
// HOSTING & MODEL (Step 5) — tiles
// =============================================================================

const HOSTING_PROVIDER_TILES = [
  { value: 'self_hosted', label: 'Eigenes Hosting', icon: '🏢', desc: 'On-Premise oder eigene Server' },
  { value: 'hetzner', label: 'Hetzner (DE)', icon: '🇩🇪', desc: 'Deutsche Cloud-Infrastruktur' },
  { value: 'aws', label: 'AWS', icon: '☁️', desc: 'Amazon Web Services' },
  { value: 'azure', label: 'Microsoft Azure', icon: '🔷', desc: 'Microsoft Cloud' },
  { value: 'gcp', label: 'Google Cloud', icon: '🔵', desc: 'Google Cloud Platform' },
  { value: 'other', label: 'Anderer Anbieter', icon: '🌐', desc: 'Sonstiger Cloud-Anbieter' },
]

const HOSTING_REGION_TILES = [
  { value: 'de', label: 'Deutschland', icon: '🇩🇪', desc: 'Rechenzentrum in Deutschland' },
  { value: 'eu', label: 'EU / EWR', icon: '🇪🇺', desc: 'Innerhalb der Europaeischen Union' },
  { value: 'us', label: 'USA', icon: '🇺🇸', desc: 'Vereinigte Staaten' },
  { value: 'other', label: 'Andere Region', icon: '🌍', desc: 'Drittland ausserhalb EU/USA' },
]

const MODEL_USAGE_TILES = [
  { value: 'inference', label: 'Inferenz', icon: '⚡', desc: 'Fertiges Modell direkt nutzen (z.B. ChatGPT, Claude, DeepL)' },
  { value: 'rag', label: 'RAG', icon: '📚', desc: 'Modell erhaelt Kontext aus eigenen Dokumenten' },
  { value: 'finetune', label: 'Fine-Tuning', icon: '🎛️', desc: 'Bestehendes Modell mit eigenen Daten nachtrainieren' },
  { value: 'training', label: 'Eigenes Modell trainieren', icon: '🧠', desc: 'Komplett eigenes KI-Modell von Grund auf' },
]

// =============================================================================
// DATA TRANSFER (Step 6) — tiles
// =============================================================================

const TRANSFER_TARGET_TILES = [
  { value: 'no_transfer', label: 'Kein Drittlandtransfer', icon: '🇪🇺', desc: 'Daten verbleiben in der EU/EWR' },
  { value: 'usa', label: 'USA', icon: '🇺🇸', desc: 'Datentransfer in die USA' },
  { value: 'uk', label: 'Grossbritannien', icon: '🇬🇧', desc: 'Datentransfer nach UK (Angemessenheitsbeschluss)' },
  { value: 'switzerland', label: 'Schweiz', icon: '🇨🇭', desc: 'Datentransfer in die Schweiz (Angemessenheitsbeschluss)' },
  { value: 'other_adequate', label: 'Anderes Land (Angemessenheit)', icon: '✅', desc: 'Land mit Angemessenheitsbeschluss der EU' },
  { value: 'other_third', label: 'Sonstiges Drittland', icon: '🌍', desc: 'Land ohne Angemessenheitsbeschluss' },
]

const TRANSFER_MECHANISM_TILES = [
  { value: 'not_needed', label: 'Nicht erforderlich', icon: '✅', desc: 'Kein Drittlandtransfer oder Angemessenheit' },
  { value: 'scc', label: 'Standardvertragsklauseln', icon: '📝', desc: 'SCC nach Art. 46 Abs. 2c DSGVO' },
  { value: 'bcr', label: 'Binding Corporate Rules', icon: '🏛️', desc: 'BCR nach Art. 47 DSGVO' },
  { value: 'adequacy', label: 'Angemessenheitsbeschluss', icon: '🤝', desc: 'EU-Kommissionsbeschluss (z.B. EU-US DPF)' },
  { value: 'derogation', label: 'Ausnahme (Art. 49)', icon: '⚠️', desc: 'Einwilligung oder zwingende Interessen' },
]

// =============================================================================
// RETENTION (Step 7) — tiles
// =============================================================================

const RETENTION_TILES = [
  { value: 'session', label: 'Nur waehrend Session', icon: '⏱️', desc: 'Daten werden nach Sitzungsende geloescht' },
  { value: '30_days', label: '30 Tage', icon: '📅', desc: 'Kurzfristige Aufbewahrung' },
  { value: '90_days', label: '90 Tage', icon: '📅', desc: 'Standardaufbewahrung' },
  { value: '1_year', label: '1 Jahr', icon: '📆', desc: 'Jaehrliche Aufbewahrung' },
  { value: '3_years', label: '3 Jahre', icon: '📆', desc: 'Mittelfristige Aufbewahrung' },
  { value: '6_years', label: '6 Jahre', icon: '📆', desc: 'Handelsrechtliche Aufbewahrungsfrist' },
  { value: '10_years', label: '10 Jahre', icon: '📆', desc: 'Steuerrechtliche Aufbewahrungsfrist' },
  { value: 'indefinite', label: 'Unbefristet', icon: '♾️', desc: 'Keine zeitliche Begrenzung' },
]

// =============================================================================
// CONTRACTS (Step 8) — tiles
// =============================================================================

const CONTRACT_TILES = [
  { value: 'has_dpa', label: 'AVV / DPA vorhanden', icon: '📄', desc: 'Auftragsverarbeitungsvertrag nach Art. 28 DSGVO' },
  { value: 'has_aia_doc', label: 'AI Act Dokumentation', icon: '🤖', desc: 'Risikoklassifizierung und technische Doku nach EU AI Act' },
  { value: 'has_dsfa', label: 'DSFA durchgefuehrt', icon: '📋', desc: 'Datenschutz-Folgenabschaetzung nach Art. 35 DSGVO' },
  { value: 'has_tia', label: 'TIA durchgefuehrt', icon: '🌍', desc: 'Transfer Impact Assessment fuer Drittlandtransfers' },
  { value: 'has_tom', label: 'TOM dokumentiert', icon: '🔒', desc: 'Technisch-organisatorische Massnahmen nach Art. 32 DSGVO' },
  { value: 'has_vvt', label: 'Im VVT erfasst', icon: '📚', desc: 'Im Verzeichnis von Verarbeitungstaetigkeiten eingetragen' },
  { value: 'has_consent', label: 'Einwilligungen eingeholt', icon: '✅', desc: 'Nutzereinwilligungen vorhanden und dokumentiert' },
  { value: 'none', label: 'Noch keine Dokumente', icon: '⚠️', desc: 'Compliance-Dokumentation steht noch aus' },
]

// =============================================================================
// SHARED TILE TOGGLE HELPER
// =============================================================================

function toggleInArray(arr: string[], value: string): string[] {
  return arr.includes(value) ? arr.filter(v => v !== value) : [...arr, value]
}

// =============================================================================
// MAIN COMPONENT
// =============================================================================

function AdvisoryBoardPageInner() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const { state: sdkState } = useSDK()
  const editId = searchParams.get('edit')
  const isEditMode = !!editId

  const [currentStep, setCurrentStep] = useState(1)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [editLoading, setEditLoading] = useState(false)
  const [result, setResult] = useState<unknown>(null)
  const [error, setError] = useState<string | null>(null)

  // Derive domain from company profile industry
  const profileIndustry = sdkState.companyProfile?.industry
  const derivedDomain = industryToDomain(
    Array.isArray(profileIndustry) ? profileIndustry : profileIndustry ? [profileIndustry] : []
  )

  // Form state — tile-based multi-select via arrays
  const [form, setForm] = useState({
    title: '',
    use_case_text: '',
    domain: 'general',
    category: '' as string,
    // Data categories (multi-select tiles)
    data_categories: [] as string[],
    custom_data_types: [] as string[],
    // Purpose (multi-select tiles)
    purposes: [] as string[],
    // Automation (single-select tile)
    automation: '' as string,
    // Hosting (single-select tile)
    hosting_provider: '' as string,
    hosting_region: '' as string,
    // Model Usage (multi-select tiles)
    model_usage: [] as string[],
    // Data Transfer (Step 6 — tiles)
    transfer_targets: [] as string[],
    transfer_countries: [] as string[],
    transfer_mechanism: '' as string,
    // Retention (Step 7)
    retention_period: '' as string,
    retention_purpose: '',
    // Contracts (Step 8 — multi-select tiles)
    contracts: [] as string[],
    subprocessors: '',
  })

  const updateForm = (updates: Partial<typeof form>) => {
    setForm(prev => ({ ...prev, ...updates }))
  }

  // Auto-set domain from profile
  useEffect(() => {
    if (!isEditMode && derivedDomain !== 'general') {
      updateForm({ domain: derivedDomain })
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [derivedDomain])

  // Pre-fill form when in edit mode
  useEffect(() => {
    if (!editId) return
    setEditLoading(true)
    fetch(`/api/sdk/v1/ucca/assessments/${editId}`)
      .then(r => r.json())
      .then(data => {
        const intake = data.intake || {}
        setForm({
          title: data.title || '',
          use_case_text: intake.use_case_text || '',
          domain: data.domain || 'general',
          category: data.category || intake.category || '',
          data_categories: intake.data_categories || [],
          custom_data_types: intake.data_types?.custom_data_types || intake.custom_data_types || [],
          purposes: intake.purposes || [],
          automation: intake.automation || '',
          hosting_provider: intake.hosting?.provider || '',
          hosting_region: intake.hosting?.region || '',
          model_usage: intake.model_usage_list || [],
          transfer_targets: intake.transfer_targets || [],
          transfer_countries: intake.international_transfer?.countries || intake.transfer_countries || [],
          transfer_mechanism: intake.transfer_mechanism || intake.international_transfer?.mechanism || '',
          retention_period: intake.retention_period || '',
          retention_purpose: intake.retention?.purpose || intake.retention_purpose || '',
          contracts: intake.contracts_list || [],
          subprocessors: intake.contracts?.subprocessors || intake.subprocessors || '',
        })
      })
      .catch(() => {})
      .finally(() => setEditLoading(false))
  }, [editId])

  const handleSubmit = async () => {
    setIsSubmitting(true)
    setError(null)
    try {
      const intake = {
        title: form.title,
        use_case_text: form.use_case_text,
        domain: form.domain,
        category: form.category,
        data_categories: form.data_categories,
        custom_data_types: form.custom_data_types.filter(s => s.trim()),
        purposes: form.purposes,
        automation: form.automation,
        hosting: {
          provider: form.hosting_provider,
          region: form.hosting_region,
        },
        model_usage_list: form.model_usage,
        transfer_targets: form.transfer_targets,
        transfer_countries: form.transfer_countries,
        transfer_mechanism: form.transfer_mechanism,
        retention_period: form.retention_period,
        retention_purpose: form.retention_purpose,
        contracts_list: form.contracts,
        subprocessors: form.subprocessors,
        store_raw_text: true,
      }

      const url = isEditMode
        ? `/api/sdk/v1/ucca/assessments/${editId}`
        : '/api/sdk/v1/ucca/assess'
      const method = isEditMode ? 'PUT' : 'POST'

      const response = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(intake),
      })

      if (!response.ok) {
        const errData = await response.json().catch(() => null)
        throw new Error(errData?.error || `HTTP ${response.status}`)
      }

      if (isEditMode) {
        router.push(`/sdk/use-cases/${editId}`)
        return
      }

      const data = await response.json()
      setResult(data)
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Fehler bei der Bewertung')
    } finally {
      setIsSubmitting(false)
    }
  }

  // If we have a result, show it
  if (result) {
    const r = result as { assessment?: { id: string }; result?: Record<string, unknown> }
    return (
      <div className="max-w-4xl mx-auto space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold text-gray-900">Assessment Ergebnis</h1>
          <div className="flex gap-2">
            {r.assessment?.id && (
              <button
                onClick={() => router.push(`/sdk/use-cases/${r.assessment!.id}`)}
                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
              >
                Zum Assessment
              </button>
            )}
            <button
              onClick={() => router.push('/sdk/use-cases')}
              className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200"
            >
              Zur Uebersicht
            </button>
          </div>
        </div>
        {r.result && (
          <AssessmentResultCard result={r.result as unknown as Parameters<typeof AssessmentResultCard>[0]['result']} />
        )}
      </div>
    )
  }

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">
            {isEditMode ? 'Assessment bearbeiten' : 'Use Case Workshop'}
          </h1>
          <p className="mt-1 text-gray-500">
            {isEditMode
              ? 'Angaben anpassen und Assessment neu bewerten'
              : 'Erfassen Sie Ihren KI-Anwendungsfall Schritt fuer Schritt'}
          </p>
        </div>
        <Link
          href="/sdk/advisory-board/documentation"
          className="inline-flex items-center gap-2 px-4 py-2 text-sm text-purple-600 hover:text-purple-700 hover:bg-purple-50 border border-purple-300 rounded-lg transition-colors"
        >
          UCCA-Dokumentation
        </Link>
      </div>

      {/* Edit loading indicator */}
      {editLoading && (
        <div className="bg-purple-50 border border-purple-200 rounded-lg p-4 text-purple-700 text-sm">
          Lade Assessment-Daten...
        </div>
      )}

      {/* Step Indicator */}
      <div className="flex items-center gap-2">
        {WIZARD_STEPS.map((step, idx) => (
          <React.Fragment key={step.id}>
            <button
              onClick={() => setCurrentStep(step.id)}
              className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors ${
                currentStep === step.id
                  ? 'bg-purple-600 text-white'
                  : currentStep > step.id
                  ? 'bg-green-100 text-green-700'
                  : 'bg-gray-100 text-gray-500'
              }`}
            >
              <span className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center text-xs font-bold">
                {currentStep > step.id ? '✓' : step.id}
              </span>
              <span className="hidden md:inline">{step.title}</span>
            </button>
            {idx < WIZARD_STEPS.length - 1 && <div className="flex-1 h-px bg-gray-200" />}
          </React.Fragment>
        ))}
      </div>

      {/* Error */}
      {error && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-red-700">{error}</div>
      )}

      {/* Step Content */}
      <div className="bg-white rounded-xl border border-gray-200 p-6">
        {/* Step 1: Grundlegendes */}
        {currentStep === 1 && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">Grundlegende Informationen</h2>

            {/* Branche aus Profil (nur Anzeige) */}
            {profileIndustry && (Array.isArray(profileIndustry) ? profileIndustry.length > 0 : true) && (
              <div className="bg-gray-50 rounded-lg border border-gray-200 px-4 py-3">
                <span className="text-xs font-medium text-gray-500 uppercase tracking-wide">Branche (aus Unternehmensprofil)</span>
                <p className="text-sm text-gray-900 mt-0.5">
                  {Array.isArray(profileIndustry) ? profileIndustry.join(', ') : profileIndustry}
                </p>
              </div>
            )}

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Titel des Anwendungsfalls</label>
              <input
                type="text"
                value={form.title}
                onChange={e => updateForm({ title: e.target.value })}
                placeholder="z.B. Chatbot fuer Kundenservice"
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
              <textarea
                value={form.use_case_text}
                onChange={e => updateForm({ use_case_text: e.target.value })}
                rows={4}
                placeholder="Beschreiben Sie den Anwendungsfall..."
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>

            {/* KI-Anwendungskategorie als Kacheln */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                In welchem Bereich kommt KI zum Einsatz?
              </label>
              <p className="text-sm text-gray-500 mb-3">Waehlen Sie die passende Kategorie fuer Ihren Anwendungsfall.</p>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                {AI_USE_CATEGORIES.map(cat => (
                  <button
                    key={cat.value}
                    type="button"
                    onClick={() => updateForm({ category: cat.value })}
                    className={`p-3 rounded-xl border-2 text-left transition-all ${
                      form.category === cat.value
                        ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                        : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                    }`}
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-lg">{cat.icon}</span>
                      <span className="text-sm font-medium text-gray-900">{cat.label}</span>
                    </div>
                    <p className="text-xs text-gray-500 leading-tight">{cat.desc}</p>
                  </button>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* Step 2: Datenkategorien */}
        {currentStep === 2 && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">Welche Daten werden verarbeitet?</h2>
            <p className="text-sm text-gray-500">Waehlen Sie alle Datenkategorien, die in diesem Use Case verarbeitet werden.</p>

            {DATA_CATEGORY_GROUPS.map(group => (
              <div key={group.group}>
                <h3 className={`text-sm font-semibold mb-2 ${group.art9 ? 'text-orange-700' : 'text-gray-700'}`}>
                  {group.art9 && '⚠️ '}{group.group}
                </h3>
                {group.art9 && (
                  <p className="text-xs text-orange-600 mb-2">Besonders schutzwuerdig — erhoehte Anforderungen an Rechtsgrundlage und TOM</p>
                )}
                <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mb-4">
                  {group.items.map(item => (
                    <button
                      key={item.value}
                      type="button"
                      onClick={() => updateForm({ data_categories: toggleInArray(form.data_categories, item.value) })}
                      className={`p-3 rounded-xl border-2 text-left transition-all ${
                        form.data_categories.includes(item.value)
                          ? group.art9
                            ? 'border-orange-500 bg-orange-50 ring-1 ring-orange-300'
                            : 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                          : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                      }`}
                    >
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-lg">{item.icon}</span>
                        <span className="text-sm font-medium text-gray-900">{item.label}</span>
                      </div>
                      <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
                    </button>
                  ))}
                </div>
              </div>
            ))}

            {/* Sonstige Datentypen */}
            <div className="border border-gray-200 rounded-lg p-4 space-y-3">
              <div className="font-medium text-gray-900">Sonstige Datentypen</div>
              <p className="text-sm text-gray-500">
                Falls Ihre Datenkategorie oben nicht aufgefuehrt ist, koennen Sie sie hier ergaenzen.
              </p>
              {form.custom_data_types.map((dt, idx) => (
                <div key={idx} className="flex items-center gap-2">
                  <input
                    type="text"
                    value={dt}
                    onChange={e => {
                      const updated = [...form.custom_data_types]
                      updated[idx] = e.target.value
                      updateForm({ custom_data_types: updated })
                    }}
                    placeholder="Datentyp eingeben..."
                    className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  />
                  <button
                    onClick={() => updateForm({ custom_data_types: form.custom_data_types.filter((_, i) => i !== idx) })}
                    className="p-2 text-red-500 hover:bg-red-50 rounded-lg"
                    title="Entfernen"
                  >
                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
                  </button>
                </div>
              ))}
              <button
                onClick={() => updateForm({ custom_data_types: [...form.custom_data_types, ''] })}
                className="flex items-center gap-1 text-sm text-purple-600 hover:text-purple-700 font-medium"
              >
                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
                Weiteren Datentyp hinzufuegen
              </button>
            </div>

            {form.data_categories.length > 0 && (
              <div className="bg-purple-50 border border-purple-200 rounded-lg px-4 py-3 text-sm text-purple-800">
                <span className="font-medium">{form.data_categories.length}</span> Datenkategorie{form.data_categories.length !== 1 ? 'n' : ''} ausgewaehlt
                {form.data_categories.some(c => DATA_CATEGORY_GROUPS.find(g => g.art9)?.items.some(i => i.value === c)) && (
                  <span className="ml-2 text-orange-700 font-medium">— inkl. besonderer Kategorien (Art. 9)</span>
                )}
              </div>
            )}
          </div>
        )}

        {/* Step 3: Verarbeitungszweck */}
        {currentStep === 3 && (
          <div className="space-y-4">
            <h2 className="text-lg font-semibold text-gray-900">Zweck der Verarbeitung</h2>
            <p className="text-sm text-gray-500">Waehlen Sie alle zutreffenden Verarbeitungszwecke. Die passende Rechtsgrundlage wird vom SDK automatisch ermittelt.</p>

            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
              {PURPOSE_TILES.map(item => (
                <button
                  key={item.value}
                  type="button"
                  onClick={() => updateForm({ purposes: toggleInArray(form.purposes, item.value) })}
                  className={`p-3 rounded-xl border-2 text-left transition-all ${
                    form.purposes.includes(item.value)
                      ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                      : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                  }`}
                >
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-lg">{item.icon}</span>
                    <span className="text-sm font-medium text-gray-900">{item.label}</span>
                  </div>
                  <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
                </button>
              ))}
            </div>

            {form.purposes.includes('profiling') && (
              <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800">
                <div className="font-medium mb-1">Hinweis: Profiling</div>
                <p>Profiling unterliegt besonderen Anforderungen nach Art. 22 DSGVO. Betroffene haben das Recht auf Information und Widerspruch.</p>
              </div>
            )}
            {form.purposes.includes('automated_decision') && (
              <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-sm text-red-800">
                <div className="font-medium mb-1">Achtung: Automatisierte Entscheidung</div>
                <p>Art. 22 DSGVO: Vollautomatisierte Entscheidungen mit rechtlicher Wirkung erfordern besondere Schutzmassnahmen, Informationspflichten und das Recht auf menschliche Ueberpruefung.</p>
              </div>
            )}
          </div>
        )}

        {/* Step 4: Automatisierung */}
        {currentStep === 4 && (
          <div className="space-y-4">
            <h2 className="text-lg font-semibold text-gray-900">Grad der Automatisierung</h2>
            <p className="text-sm text-gray-600">
              Wie stark greift die KI in Entscheidungen ein? Je hoeher der Automatisierungsgrad, desto strenger die regulatorischen Anforderungen.
            </p>

            <div className="grid grid-cols-1 gap-3">
              {AUTOMATION_TILES.map(item => (
                <button
                  key={item.value}
                  type="button"
                  onClick={() => updateForm({ automation: item.value })}
                  className={`p-4 rounded-xl border-2 text-left transition-all ${
                    form.automation === item.value
                      ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                      : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                  }`}
                >
                  <div className="flex items-center gap-3 mb-1">
                    <span className="text-2xl">{item.icon}</span>
                    <span className="text-sm font-semibold text-gray-900">{item.label}</span>
                  </div>
                  <p className="text-sm text-gray-500 ml-11">{item.desc}</p>
                  <p className="text-xs text-gray-400 ml-11 mt-1">Beispiele: {item.examples}</p>
                </button>
              ))}
            </div>

            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 text-sm text-blue-800">
              <div className="font-medium mb-1">Warum ist das wichtig?</div>
              <p>
                Art. 22 DSGVO regelt automatisierte Einzelentscheidungen. Vollautomatisierte Systeme, die Personen
                erheblich beeinflussen (z.B. Kreditvergabe, Bewerbungsauswahl), unterliegen strengen Auflagen:
                Informationspflicht, Recht auf menschliche Ueberpruefung und Anfechtungsmoeglichkeit.
              </p>
            </div>
          </div>
        )}

        {/* Step 5: Hosting & Modell */}
        {currentStep === 5 && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">Technische Details</h2>

            {/* Hosting Provider */}
            <div>
              <h3 className="text-sm font-medium text-gray-700 mb-2">Hosting-Anbieter</h3>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                {HOSTING_PROVIDER_TILES.map(item => (
                  <button
                    key={item.value}
                    type="button"
                    onClick={() => updateForm({ hosting_provider: item.value })}
                    className={`p-3 rounded-xl border-2 text-left transition-all ${
                      form.hosting_provider === item.value
                        ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                        : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                    }`}
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-lg">{item.icon}</span>
                      <span className="text-sm font-medium text-gray-900">{item.label}</span>
                    </div>
                    <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
                  </button>
                ))}
              </div>
            </div>

            {/* Hosting Region */}
            <div>
              <h3 className="text-sm font-medium text-gray-700 mb-2">Hosting-Region</h3>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                {HOSTING_REGION_TILES.map(item => (
                  <button
                    key={item.value}
                    type="button"
                    onClick={() => updateForm({ hosting_region: item.value })}
                    className={`p-3 rounded-xl border-2 text-left transition-all ${
                      form.hosting_region === item.value
                        ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                        : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                    }`}
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-lg">{item.icon}</span>
                      <span className="text-sm font-medium text-gray-900">{item.label}</span>
                    </div>
                    <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
                  </button>
                ))}
              </div>
            </div>

            {/* Model Usage */}
            <div>
              <h3 className="text-sm font-medium text-gray-700 mb-1">Wie wird das KI-Modell genutzt?</h3>
              <p className="text-sm text-gray-500 mb-3">Waehlen Sie alle zutreffenden Optionen.</p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                {MODEL_USAGE_TILES.map(item => (
                  <button
                    key={item.value}
                    type="button"
                    onClick={() => updateForm({ model_usage: toggleInArray(form.model_usage, item.value) })}
                    className={`p-3 rounded-xl border-2 text-left transition-all ${
                      form.model_usage.includes(item.value)
                        ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                        : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                    }`}
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-lg">{item.icon}</span>
                      <span className="text-sm font-medium text-gray-900">{item.label}</span>
                    </div>
                    <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
                  </button>
                ))}
              </div>
            </div>

            {/* Info-Box: Begriffe erklaert */}
            <details className="bg-amber-50 border border-amber-200 rounded-lg overflow-hidden">
              <summary className="px-4 py-3 text-sm font-medium text-amber-800 cursor-pointer hover:bg-amber-100">
                Begriffe erklaert: ML, DL, NLP, LLM &mdash; Was bedeutet das?
              </summary>
              <div className="px-4 pb-4 space-y-3 text-sm text-amber-900">
                <div><span className="font-semibold">ML (Machine Learning)</span> &mdash; Computer lernt Muster aus Daten. Beispiel: Spam-Filter.</div>
                <div><span className="font-semibold">DL (Deep Learning)</span> &mdash; ML mit neuronalen Netzen. Beispiel: Bilderkennung, Spracherkennung.</div>
                <div><span className="font-semibold">NLP (Natural Language Processing)</span> &mdash; KI versteht Sprache. Beispiel: ChatGPT, DeepL.</div>
                <div><span className="font-semibold">LLM (Large Language Model)</span> &mdash; Grosses Sprachmodell. Beispiel: GPT-4, Claude, Llama.</div>
                <div><span className="font-semibold">RAG</span> &mdash; LLM erhaelt Kontext aus eigener Datenbank. Vorteil: Aktuelle, firmenspezifische Antworten.</div>
                <div><span className="font-semibold">Fine-Tuning</span> &mdash; Bestehendes Modell mit eigenen Daten weitertrainieren. Achtung: Daten werden Teil des Modells.</div>
              </div>
            </details>
          </div>
        )}

        {/* Step 6: Internationaler Datentransfer */}
        {currentStep === 6 && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">Internationaler Datentransfer</h2>
            <p className="text-sm text-gray-500">Wohin werden die Daten uebermittelt? Waehlen Sie alle zutreffenden Ziellaender/-regionen.</p>

            {/* Transfer Targets */}
            <div>
              <h3 className="text-sm font-medium text-gray-700 mb-2">Datentransfer-Ziele</h3>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                {TRANSFER_TARGET_TILES.map(item => (
                  <button
                    key={item.value}
                    type="button"
                    onClick={() => updateForm({ transfer_targets: toggleInArray(form.transfer_targets, item.value) })}
                    className={`p-3 rounded-xl border-2 text-left transition-all ${
                      form.transfer_targets.includes(item.value)
                        ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                        : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                    }`}
                  >
                    <div className="flex items-center gap-2 mb-1">
                      <span className="text-lg">{item.icon}</span>
                      <span className="text-sm font-medium text-gray-900">{item.label}</span>
                    </div>
                    <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
                  </button>
                ))}
              </div>
            </div>

            {/* Transfer Mechanism — only if not "no_transfer" only */}
            {form.transfer_targets.length > 0 && !form.transfer_targets.every(t => t === 'no_transfer') && (
              <div>
                <h3 className="text-sm font-medium text-gray-700 mb-2">Transfer-Mechanismus</h3>
                <p className="text-sm text-gray-500 mb-3">Welche Schutzgarantie nutzen Sie fuer den Drittlandtransfer?</p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  {TRANSFER_MECHANISM_TILES.map(item => (
                    <button
                      key={item.value}
                      type="button"
                      onClick={() => updateForm({ transfer_mechanism: item.value })}
                      className={`p-3 rounded-xl border-2 text-left transition-all ${
                        form.transfer_mechanism === item.value
                          ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                          : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                      }`}
                    >
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-lg">{item.icon}</span>
                        <span className="text-sm font-medium text-gray-900">{item.label}</span>
                      </div>
                      <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
                    </button>
                  ))}
                </div>
              </div>
            )}

            {/* Specific countries text input */}
            {form.transfer_targets.some(t => !['no_transfer'].includes(t)) && (
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Konkrete Ziellaender (optional)</label>
                <input
                  type="text"
                  value={form.transfer_countries.join(', ')}
                  onChange={e => updateForm({ transfer_countries: e.target.value.split(',').map(s => s.trim()).filter(Boolean) })}
                  placeholder="z.B. USA, UK, Schweiz, Japan"
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                />
                <p className="text-xs text-gray-500 mt-1">Kommagetrennte Laendernamen oder -kuerzel</p>
              </div>
            )}
          </div>
        )}

        {/* Step 7: Datenhaltung */}
        {currentStep === 7 && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">Datenhaltung & Aufbewahrung</h2>
            <p className="text-sm text-gray-500">Wie lange sollen die Daten gespeichert werden?</p>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
              {RETENTION_TILES.map(item => (
                <button
                  key={item.value}
                  type="button"
                  onClick={() => updateForm({ retention_period: item.value })}
                  className={`p-3 rounded-xl border-2 text-left transition-all ${
                    form.retention_period === item.value
                      ? 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                      : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                  }`}
                >
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-lg">{item.icon}</span>
                    <span className="text-sm font-medium text-gray-900">{item.label}</span>
                  </div>
                  <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
                </button>
              ))}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">
                Zweck der Aufbewahrung (optional)
              </label>
              <textarea
                value={form.retention_purpose}
                onChange={e => updateForm({ retention_purpose: e.target.value })}
                rows={2}
                placeholder="z.B. Vertragliche Pflichten, gesetzliche Aufbewahrungsfristen..."
                className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>

            {form.retention_period === 'indefinite' && (
              <div className="bg-amber-50 border border-amber-200 rounded-lg p-4 text-sm text-amber-800">
                <div className="font-medium mb-1">Hinweis: Unbefristete Speicherung</div>
                <p>Die DSGVO fordert Datenminimierung und Speicherbegrenzung (Art. 5 Abs. 1e). Unbefristete Speicherung muss besonders gut begruendet sein.</p>
              </div>
            )}
          </div>
        )}

        {/* Step 8: Vertraege & Compliance */}
        {currentStep === 8 && (
          <div className="space-y-6">
            <h2 className="text-lg font-semibold text-gray-900">Vertraege & Compliance-Dokumentation</h2>
            <p className="text-sm text-gray-500">Welche Compliance-Dokumente liegen bereits vor? (Mehrfachauswahl moeglich)</p>

            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
              {CONTRACT_TILES.map(item => (
                <button
                  key={item.value}
                  type="button"
                  onClick={() => updateForm({ contracts: toggleInArray(form.contracts, item.value) })}
                  className={`p-3 rounded-xl border-2 text-left transition-all ${
                    form.contracts.includes(item.value)
                      ? item.value === 'none'
                        ? 'border-amber-500 bg-amber-50 ring-1 ring-amber-300'
                        : 'border-purple-500 bg-purple-50 ring-1 ring-purple-300'
                      : 'border-gray-200 hover:border-purple-300 hover:bg-gray-50'
                  }`}
                >
                  <div className="flex items-center gap-2 mb-1">
                    <span className="text-lg">{item.icon}</span>
                    <span className="text-sm font-medium text-gray-900">{item.label}</span>
                  </div>
                  <p className="text-xs text-gray-500 leading-tight">{item.desc}</p>
                </button>
              ))}
            </div>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Subprozessoren (optional)</label>
              <textarea
                value={form.subprocessors}
                onChange={e => updateForm({ subprocessors: e.target.value })}
                rows={2}
                placeholder="z.B. OpenAI (USA, SCC), Hetzner Cloud (DE)..."
                className="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>
          </div>
        )}
      </div>

      {/* Navigation Buttons */}
      <div className="flex items-center justify-between">
        <button
          onClick={() => currentStep > 1 ? setCurrentStep(currentStep - 1) : router.push('/sdk/use-cases')}
          className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
        >
          {currentStep === 1 ? 'Abbrechen' : 'Zurueck'}
        </button>

        {currentStep < 8 ? (
          <button
            onClick={() => setCurrentStep(currentStep + 1)}
            disabled={currentStep === 1 && !form.title}
            className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
          >
            Weiter
          </button>
        ) : (
          <button
            onClick={handleSubmit}
            disabled={isSubmitting || !form.title}
            className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 flex items-center gap-2"
          >
            {isSubmitting ? (
              <>
                <svg className="w-5 h-5 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>
                Bewerte...
              </>
            ) : (
              isEditMode ? 'Speichern & neu bewerten' : 'Assessment starten'
            )}
          </button>
        )}
      </div>
    </div>
  )
}

export default function AdvisoryBoardPage() {
  return (
    <Suspense fallback={<div className="flex items-center justify-center h-64 text-gray-500">Lade...</div>}>
      <AdvisoryBoardPageInner />
    </Suspense>
  )
}
