'use client'

import React, { useState } from 'react'
import Link from 'next/link'
import { useSDK, UseCaseAssessment, UseCaseIntake } from '@/lib/sdk'

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

const WIZARD_STEPS = [
  { id: 1, name: 'Grunddaten', description: 'Name, Beschreibung, Kategorie und Branche' },
  { id: 2, name: 'Datenkategorien', description: 'Welche Daten werden verarbeitet?' },
  { id: 3, name: 'Verarbeitungszweck', description: 'Rechtsgrundlage und Zweck' },
  { id: 4, name: 'Technologie & Modell', description: 'KI-Technologien und Modell-Nutzung' },
  { id: 5, name: 'Automatisierung', description: 'Grad der Automatisierung' },
  { id: 6, name: 'Hosting & Transfer', description: 'Hosting und Datentransfer' },
  { id: 7, name: 'Datenhaltung', description: 'Aufbewahrung und Vertraege' },
  { id: 8, name: 'Zusammenfassung', description: 'Ueberpruefung und Abschluss' },
]

const TOTAL_STEPS = WIZARD_STEPS.length

const DOMAINS = [
  { value: 'healthcare', label: 'Gesundheit' },
  { value: 'finance', label: 'Finanzen' },
  { value: 'education', label: 'Bildung' },
  { value: 'retail', label: 'Handel' },
  { value: 'it_services', label: 'IT-Dienstleistungen' },
  { value: 'consulting', label: 'Beratung' },
  { value: 'manufacturing', label: 'Produktion' },
  { value: 'hr', label: 'Personalwesen' },
  { value: 'marketing', label: 'Marketing' },
  { value: 'legal', label: 'Recht' },
  { value: 'public', label: 'Oeffentlicher Sektor' },
  { value: 'general', label: 'Allgemein' },
]

// =============================================================================
// RISK CALCULATION (client-side)
// =============================================================================

function calculateRiskScore(form: WizardFormData): { score: number; level: 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'; dsfaRequired: boolean } {
  let score = 0
  if (form.processesPersonalData) score += 10
  if (form.specialCategories) score += 25
  if (form.biometricData) score += 20
  if (form.healthData) score += 15
  if (form.minorsData) score += 15
  if (form.financialData) score += 5
  if (form.purposeProfiling) score += 15
  if (form.purposeAutomatedDecision) score += 20
  if (form.automation === 'fully_automated') score += 25
  else if (form.automation === 'semi_automated') score += 10
  if (form.internationalTransfer) score += 10
  if (form.modelTraining) score += 10
  if (form.modelFinetune) score += 5

  let level: 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL'
  if (score >= 60) level = 'CRITICAL'
  else if (score >= 40) level = 'HIGH'
  else if (score >= 20) level = 'MEDIUM'
  else level = 'LOW'

  const dsfaRequired = score >= 40 || form.specialCategories || (form.purposeAutomatedDecision && form.automation === 'fully_automated')

  return { score, level, dsfaRequired }
}

// =============================================================================
// USE CASE CARD
// =============================================================================

function UseCaseCard({
  useCase,
  isActive,
  onSelect,
  onDelete,
}: {
  useCase: UseCaseAssessment
  isActive: boolean
  onSelect: () => void
  onDelete: () => void
}) {
  const completionPercent = Math.round((useCase.stepsCompleted / TOTAL_STEPS) * 100)

  return (
    <div
      className={`relative bg-white rounded-xl border-2 p-6 transition-all cursor-pointer ${
        isActive ? 'border-purple-500 shadow-lg' : 'border-gray-200 hover:border-purple-300'
      }`}
      onClick={onSelect}
    >
      {/* Delete Button */}
      <button
        onClick={e => {
          e.stopPropagation()
          onDelete()
        }}
        className="absolute top-4 right-4 p-1 text-gray-400 hover:text-red-500 transition-colors"
      >
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
        </svg>
      </button>

      <div className="flex items-start gap-4">
        <div
          className={`w-12 h-12 rounded-xl flex items-center justify-center ${
            completionPercent === 100
              ? 'bg-green-100 text-green-600'
              : 'bg-purple-100 text-purple-600'
          }`}
        >
          {completionPercent === 100 ? (
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
          ) : (
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
            </svg>
          )}
        </div>
        <div className="flex-1 min-w-0">
          <h3 className="text-lg font-semibold text-gray-900 truncate">{useCase.name}</h3>
          <p className="text-sm text-gray-500 line-clamp-2">{useCase.description}</p>
          <div className="mt-3">
            <div className="flex items-center justify-between text-sm mb-1">
              <span className="text-gray-500">Fortschritt</span>
              <span className="font-medium">{completionPercent}%</span>
            </div>
            <div className="h-2 bg-gray-100 rounded-full overflow-hidden">
              <div
                className={`h-full rounded-full transition-all ${
                  completionPercent === 100 ? 'bg-green-500' : 'bg-purple-600'
                }`}
                style={{ width: `${completionPercent}%` }}
              />
            </div>
          </div>
          {useCase.assessmentResult && (
            <div className="mt-3 flex items-center gap-2">
              <span
                className={`px-2 py-1 text-xs rounded-full ${
                  useCase.assessmentResult.riskLevel === 'CRITICAL'
                    ? 'bg-red-100 text-red-700'
                    : useCase.assessmentResult.riskLevel === 'HIGH'
                    ? 'bg-orange-100 text-orange-700'
                    : useCase.assessmentResult.riskLevel === 'MEDIUM'
                    ? 'bg-yellow-100 text-yellow-700'
                    : 'bg-green-100 text-green-700'
                }`}
              >
                Risiko: {useCase.assessmentResult.riskLevel}
              </span>
              {useCase.assessmentResult.dsfaRequired && (
                <span className="px-2 py-1 text-xs bg-purple-100 text-purple-700 rounded-full">
                  DSFA erforderlich
                </span>
              )}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// WIZARD FORM DATA
// =============================================================================

interface WizardFormData {
  // Step 1: Grunddaten
  name: string
  description: string
  category: string
  domain: string
  // Step 2: Datenkategorien
  dataCategories: string[]
  processesPersonalData: boolean
  specialCategories: boolean
  healthData: boolean
  biometricData: boolean
  minorsData: boolean
  financialData: boolean
  customDataTypes: string[]
  // Step 3: Verarbeitungszweck
  legalBasis: string
  purposeProfiling: boolean
  purposeAutomatedDecision: boolean
  purposeMarketing: boolean
  purposeAnalytics: boolean
  purposeServiceDelivery: boolean
  // Step 4: Technologie & Modell
  aiTechnologies: string[]
  modelInference: boolean
  modelRag: boolean
  modelFinetune: boolean
  modelTraining: boolean
  // Step 5: Automatisierung
  automation: 'assistive' | 'semi_automated' | 'fully_automated'
  // Step 6: Hosting & Transfer
  hostingProvider: string
  hostingRegion: string
  internationalTransfer: boolean
  transferCountries: string[]
  transferMechanism: string
  // Step 7: Datenhaltung & Vertraege
  retentionDays: number
  retentionPurpose: string
  hasDpa: boolean
  hasAiaDocumentation: boolean
  hasRiskAssessment: boolean
  subprocessors: string
  // Notes
  notes: string
}

// =============================================================================
// WIZARD COMPONENT
// =============================================================================

function UseCaseWizard({
  onComplete,
  onCancel,
}: {
  onComplete: (useCase: UseCaseAssessment) => void
  onCancel: () => void
}) {
  const [currentStep, setCurrentStep] = useState(1)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [uccaError, setUccaError] = useState<string | null>(null)
  const [formData, setFormData] = useState<WizardFormData>({
    name: '',
    description: '',
    category: '',
    domain: 'general',
    dataCategories: [],
    processesPersonalData: false,
    specialCategories: false,
    healthData: false,
    biometricData: false,
    minorsData: false,
    financialData: false,
    customDataTypes: [],
    legalBasis: 'consent',
    purposeProfiling: false,
    purposeAutomatedDecision: false,
    purposeMarketing: false,
    purposeAnalytics: false,
    purposeServiceDelivery: false,
    aiTechnologies: [],
    modelInference: true,
    modelRag: false,
    modelFinetune: false,
    modelTraining: false,
    automation: 'assistive',
    hostingProvider: 'self_hosted',
    hostingRegion: 'eu',
    internationalTransfer: false,
    transferCountries: [],
    transferMechanism: 'none',
    retentionDays: 90,
    retentionPurpose: '',
    hasDpa: false,
    hasAiaDocumentation: false,
    hasRiskAssessment: false,
    subprocessors: '',
    notes: '',
  })

  const updateFormData = (updates: Partial<WizardFormData>) => {
    setFormData(prev => ({ ...prev, ...updates }))
  }

  const buildIntake = (): UseCaseIntake => ({
    domain: formData.domain,
    dataCategories: formData.dataCategories,
    processesPersonalData: formData.processesPersonalData,
    specialCategories: formData.specialCategories,
    healthData: formData.healthData,
    biometricData: formData.biometricData,
    minorsData: formData.minorsData,
    financialData: formData.financialData,
    customDataTypes: formData.customDataTypes.filter(s => s.trim()),
    legalBasis: formData.legalBasis,
    purposes: {
      profiling: formData.purposeProfiling,
      automatedDecision: formData.purposeAutomatedDecision,
      marketing: formData.purposeMarketing,
      analytics: formData.purposeAnalytics,
      serviceDelivery: formData.purposeServiceDelivery,
    },
    automation: formData.automation,
    hosting: {
      provider: formData.hostingProvider,
      region: formData.hostingRegion,
    },
    modelUsage: {
      inference: formData.modelInference,
      rag: formData.modelRag,
      finetune: formData.modelFinetune,
      training: formData.modelTraining,
    },
    aiTechnologies: formData.aiTechnologies,
    internationalTransfer: {
      enabled: formData.internationalTransfer,
      countries: formData.transferCountries,
      mechanism: formData.transferMechanism,
    },
    retention: {
      days: formData.retentionDays,
      purpose: formData.retentionPurpose,
    },
    contracts: {
      hasDpa: formData.hasDpa,
      hasAiaDocumentation: formData.hasAiaDocumentation,
      hasRiskAssessment: formData.hasRiskAssessment,
      subprocessors: formData.subprocessors,
    },
  })

  const handleNext = async () => {
    if (currentStep < TOTAL_STEPS) {
      setCurrentStep(prev => prev + 1)
      return
    }

    // Final step — create use case + call UCCA API
    setIsSubmitting(true)
    setUccaError(null)

    const risk = calculateRiskScore(formData)
    const intake = buildIntake()

    const newUseCase: UseCaseAssessment = {
      id: `uc-${Date.now()}`,
      name: formData.name,
      description: formData.description,
      category: formData.category,
      stepsCompleted: TOTAL_STEPS,
      steps: WIZARD_STEPS.map(s => ({
        id: `step-${s.id}`,
        name: s.name,
        completed: true,
        data: {},
      })),
      assessmentResult: {
        riskLevel: risk.level,
        applicableRegulations: ['DSGVO', 'AI Act'],
        recommendedControls: buildRecommendations(formData, risk),
        dsfaRequired: risk.dsfaRequired,
        aiActClassification: formData.aiTechnologies.length > 0
          ? (risk.level === 'CRITICAL' || risk.level === 'HIGH' ? 'HIGH' : 'LIMITED')
          : 'MINIMAL',
      },
      intake,
      createdAt: new Date(),
      updatedAt: new Date(),
    }

    // Call UCCA API in background
    try {
      const uccaIntake = {
        title: formData.name,
        use_case_text: formData.description,
        domain: formData.domain,
        data_types: {
          personal_data: formData.processesPersonalData,
          special_categories: formData.specialCategories,
          health_data: formData.healthData,
          biometric_data: formData.biometricData,
          minors_data: formData.minorsData,
          financial_data: formData.financialData,
          custom_data_types: formData.customDataTypes.filter(s => s.trim()),
        },
        purpose: {
          profiling: formData.purposeProfiling,
          automated_decision: formData.purposeAutomatedDecision,
          marketing: formData.purposeMarketing,
          analytics: formData.purposeAnalytics,
          service_delivery: formData.purposeServiceDelivery,
        },
        automation: formData.automation,
        hosting: { provider: formData.hostingProvider, region: formData.hostingRegion },
        model_usage: {
          inference: formData.modelInference,
          rag: formData.modelRag,
          finetune: formData.modelFinetune,
          training: formData.modelTraining,
        },
        legal_basis: formData.legalBasis,
        international_transfer: {
          enabled: formData.internationalTransfer,
          countries: formData.transferCountries,
          mechanism: formData.transferMechanism,
        },
        retention: { days: formData.retentionDays, purpose: formData.retentionPurpose },
        contracts: {
          has_dpa: formData.hasDpa,
          has_aia_documentation: formData.hasAiaDocumentation,
          has_risk_assessment: formData.hasRiskAssessment,
          subprocessors: formData.subprocessors,
        },
        store_raw_text: true,
      }

      const resp = await fetch('/api/sdk/v1/ucca/assess', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(uccaIntake),
      })

      if (resp.ok) {
        const data = await resp.json()
        // Merge UCCA result if available
        if (data.assessment?.id) {
          newUseCase.uccaAssessmentId = data.assessment.id
        }
        if (data.result) {
          newUseCase.assessmentResult = {
            ...newUseCase.assessmentResult!,
            riskLevel: data.result.risk_level || newUseCase.assessmentResult!.riskLevel,
            dsfaRequired: data.result.dsfa_required ?? newUseCase.assessmentResult!.dsfaRequired,
          }
        }
      } else {
        setUccaError('UCCA-API nicht erreichbar — lokale Risikobewertung wird verwendet.')
      }
    } catch {
      setUccaError('UCCA-API nicht erreichbar — lokale Risikobewertung wird verwendet.')
    }

    setIsSubmitting(false)
    onComplete(newUseCase)
  }

  const handleBack = () => {
    if (currentStep > 1) setCurrentStep(prev => prev - 1)
  }

  const risk = calculateRiskScore(formData)

  return (
    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
      {/* Header */}
      <div className="px-6 py-4 border-b border-gray-200 bg-gray-50">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-gray-900">Neuer Use Case</h2>
          <button onClick={onCancel} className="text-gray-400 hover:text-gray-600">
            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
        {/* Progress */}
        <div className="mt-4 flex items-center gap-1">
          {WIZARD_STEPS.map((step, index) => (
            <React.Fragment key={step.id}>
              <div
                className={`w-7 h-7 rounded-full flex items-center justify-center text-xs font-medium shrink-0 ${
                  step.id < currentStep
                    ? 'bg-green-500 text-white'
                    : step.id === currentStep
                    ? 'bg-purple-600 text-white'
                    : 'bg-gray-200 text-gray-500'
                }`}
                title={step.name}
              >
                {step.id < currentStep ? (
                  <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                ) : (
                  step.id
                )}
              </div>
              {index < WIZARD_STEPS.length - 1 && (
                <div
                  className={`flex-1 h-1 rounded ${
                    step.id < currentStep ? 'bg-green-500' : 'bg-gray-200'
                  }`}
                />
              )}
            </React.Fragment>
          ))}
        </div>
        <p className="mt-2 text-sm text-gray-500">
          Schritt {currentStep} von {TOTAL_STEPS}: {WIZARD_STEPS[currentStep - 1].description}
        </p>
      </div>

      {/* Content */}
      <div className="p-6">
        {/* ============================================ */}
        {/* STEP 1: Grunddaten */}
        {/* ============================================ */}
        {currentStep === 1 && (
          <div className="space-y-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Name des Use Cases *</label>
              <input
                type="text"
                value={formData.name}
                onChange={e => updateFormData({ name: e.target.value })}
                placeholder="z.B. Marketing-KI fuer Kundensegmentierung"
                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={formData.description}
                onChange={e => updateFormData({ description: e.target.value })}
                placeholder="Beschreiben Sie den Anwendungsfall und den Geschaeftszweck..."
                rows={4}
                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">Kategorie</label>
              <select
                value={formData.category}
                onChange={e => updateFormData({ category: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              >
                <option value="">Kategorie waehlen...</option>
                <option value="marketing">Marketing & Vertrieb</option>
                <option value="hr">Personal & HR</option>
                <option value="finance">Finanzen & Controlling</option>
                <option value="operations">Betrieb & Produktion</option>
                <option value="customer">Kundenservice</option>
                <option value="other">Sonstiges</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Branche</label>
              <select
                value={formData.domain}
                onChange={e => updateFormData({ domain: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              >
                {DOMAINS.map(d => (
                  <option key={d.value} value={d.value}>{d.label}</option>
                ))}
              </select>
            </div>
          </div>
        )}

        {/* ============================================ */}
        {/* STEP 2: Datenkategorien */}
        {/* ============================================ */}
        {currentStep === 2 && (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-900">Welche Daten werden verarbeitet?</h3>

            {/* Personenbezogene Daten Ja/Nein */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Werden personenbezogene Daten verarbeitet?
              </label>
              <div className="flex items-center gap-4">
                <label className="flex items-center gap-2">
                  <input
                    type="radio"
                    checked={formData.processesPersonalData}
                    onChange={() => updateFormData({ processesPersonalData: true })}
                    className="w-4 h-4 text-purple-600"
                  />
                  <span>Ja</span>
                </label>
                <label className="flex items-center gap-2">
                  <input
                    type="radio"
                    checked={!formData.processesPersonalData}
                    onChange={() => updateFormData({ processesPersonalData: false })}
                    className="w-4 h-4 text-purple-600"
                  />
                  <span>Nein</span>
                </label>
              </div>
            </div>

            {formData.processesPersonalData && (
              <>
                {/* Standard-Datenkategorien */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Welche Datenkategorien? (Mehrfachauswahl)
                  </label>
                  <div className="grid grid-cols-2 gap-2">
                    {['Name/Kontakt', 'E-Mail', 'Adresse', 'Telefon', 'Geburtsdatum', 'Finanzdaten', 'Standort', 'Nutzungsverhalten'].map(
                      cat => (
                        <label key={cat} className="flex items-center gap-2 p-2 border rounded-lg hover:bg-gray-50">
                          <input
                            type="checkbox"
                            checked={formData.dataCategories.includes(cat)}
                            onChange={e => {
                              if (e.target.checked) {
                                updateFormData({ dataCategories: [...formData.dataCategories, cat] })
                              } else {
                                updateFormData({ dataCategories: formData.dataCategories.filter(c => c !== cat) })
                              }
                            }}
                            className="w-4 h-4 text-purple-600"
                          />
                          <span className="text-sm">{cat}</span>
                        </label>
                      )
                    )}
                  </div>
                </div>

                {/* Art. 9 + besondere Kategorien */}
                <div>
                  <label className="flex items-center gap-2 mb-2">
                    <input
                      type="checkbox"
                      checked={formData.specialCategories}
                      onChange={e => updateFormData({ specialCategories: e.target.checked })}
                      className="w-4 h-4 text-purple-600"
                    />
                    <span className="text-sm font-medium text-gray-700">
                      Besondere Kategorien (Art. 9 DSGVO): Gesundheit, Biometrie, Religion, etc.
                    </span>
                  </label>
                  {formData.specialCategories && (
                    <p className="text-sm text-amber-600 bg-amber-50 p-3 rounded-lg">
                      Bei besonderen Kategorien ist eine DSFA in der Regel erforderlich!
                    </p>
                  )}
                </div>

                {/* Spezifische sensitive Daten */}
                {[
                  { key: 'healthData' as const, label: 'Gesundheitsdaten', desc: 'Diagnosen, Medikation, Fitness' },
                  { key: 'biometricData' as const, label: 'Biometrische Daten', desc: 'Gesichtserkennung, Fingerabdruck, Stimme' },
                  { key: 'minorsData' as const, label: 'Daten von Minderjaehrigen', desc: 'Unter 16 Jahren' },
                  { key: 'financialData' as const, label: 'Finanzdaten', desc: 'Kontodaten, Transaktionen, Kreditwuerdigkeit' },
                ].map(item => (
                  <label key={item.key} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
                    <input
                      type="checkbox"
                      checked={formData[item.key]}
                      onChange={e => updateFormData({ [item.key]: e.target.checked })}
                      className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                    />
                    <div>
                      <div className="font-medium text-gray-900">{item.label}</div>
                      <div className="text-sm text-gray-500">{item.desc}</div>
                    </div>
                  </label>
                ))}

                {/* 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">
                    z.B. Kennzeichen, Fahrzeug-Identifikationsnummer (VIN), Geraete-IDs, IP-Adressen
                  </p>
                  {formData.customDataTypes.map((dt, idx) => (
                    <div key={idx} className="flex items-center gap-2">
                      <input
                        type="text"
                        value={dt}
                        onChange={e => {
                          const updated = [...formData.customDataTypes]
                          updated[idx] = e.target.value
                          updateFormData({ customDataTypes: 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={() => {
                          updateFormData({ customDataTypes: formData.customDataTypes.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={() => updateFormData({ customDataTypes: [...formData.customDataTypes, ''] })}
                    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>
              </>
            )}
          </div>
        )}

        {/* ============================================ */}
        {/* STEP 3: Verarbeitungszweck */}
        {/* ============================================ */}
        {currentStep === 3 && (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-900">Verarbeitungszweck & Rechtsgrundlage</h3>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Rechtsgrundlage (Art. 6 DSGVO)</label>
              <select
                value={formData.legalBasis}
                onChange={e => updateFormData({ legalBasis: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              >
                <option value="consent">Einwilligung (Art. 6 Abs. 1a)</option>
                <option value="contract">Vertragserfullung (Art. 6 Abs. 1b)</option>
                <option value="legal_obligation">Rechtliche Verpflichtung (Art. 6 Abs. 1c)</option>
                <option value="vital_interest">Lebenswichtige Interessen (Art. 6 Abs. 1d)</option>
                <option value="public_interest">Oeffentliches Interesse (Art. 6 Abs. 1e)</option>
                <option value="legitimate_interest">Berechtigtes Interesse (Art. 6 Abs. 1f)</option>
              </select>
            </div>

            <h4 className="text-sm font-medium text-gray-700 mt-4">Zweck der Verarbeitung</h4>
            {[
              { key: 'purposeProfiling' as const, label: 'Profiling', desc: 'Automatisierte Analyse personenbezogener Aspekte' },
              { key: 'purposeAutomatedDecision' as const, label: 'Automatisierte Entscheidung', desc: 'Art. 22 DSGVO — Entscheidung ohne menschliches Zutun' },
              { key: 'purposeMarketing' as const, label: 'Marketing', desc: 'Werbung, Personalisierung, Targeting' },
              { key: 'purposeAnalytics' as const, label: 'Analytics', desc: 'Statistische Auswertung, Business Intelligence' },
              { key: 'purposeServiceDelivery' as const, label: 'Serviceerbringung', desc: 'Kernfunktion des Produkts/Services' },
            ].map(item => (
              <label key={item.key} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
                <input
                  type="checkbox"
                  checked={formData[item.key]}
                  onChange={e => updateFormData({ [item.key]: e.target.checked })}
                  className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                />
                <div>
                  <div className="font-medium text-gray-900">{item.label}</div>
                  <div className="text-sm text-gray-500">{item.desc}</div>
                </div>
              </label>
            ))}
          </div>
        )}

        {/* ============================================ */}
        {/* STEP 4: Technologie & Modell */}
        {/* ============================================ */}
        {currentStep === 4 && (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-900">Technologie & Modell-Nutzung</h3>

            {/* KI-Technologien */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-2">
                Eingesetzte KI-Technologien (Mehrfachauswahl)
              </label>
              <div className="grid grid-cols-2 gap-2">
                {[
                  'Machine Learning',
                  'Deep Learning',
                  'Natural Language Processing',
                  'Computer Vision',
                  'Generative AI (LLM)',
                  'Empfehlungssysteme',
                  'Predictive Analytics',
                  'Chatbots/Assistenten',
                ].map(tech => (
                  <label key={tech} className="flex items-center gap-2 p-2 border rounded-lg hover:bg-gray-50">
                    <input
                      type="checkbox"
                      checked={formData.aiTechnologies.includes(tech)}
                      onChange={e => {
                        if (e.target.checked) {
                          updateFormData({ aiTechnologies: [...formData.aiTechnologies, tech] })
                        } else {
                          updateFormData({ aiTechnologies: formData.aiTechnologies.filter(t => t !== tech) })
                        }
                      }}
                      className="w-4 h-4 text-purple-600"
                    />
                    <span className="text-sm">{tech}</span>
                  </label>
                ))}
              </div>
            </div>

            {/* Modell-Nutzung mit Erklaerungen */}
            <h4 className="text-sm font-medium text-gray-700 mt-4">Wie wird das KI-Modell genutzt?</h4>
            <p className="text-sm text-gray-500">Waehlen Sie alle zutreffenden Optionen.</p>

            {[
              {
                key: 'modelInference' as const,
                label: 'Inferenz',
                desc: 'Ein fertiges, vortrainiertes Modell wird direkt genutzt — z.B. ChatGPT, Claude, DeepL. Das Modell wird nicht veraendert.',
                example: 'Sie nutzen die OpenAI API, um Texte zusammenzufassen.',
              },
              {
                key: 'modelRag' as const,
                label: 'RAG (Retrieval-Augmented Generation)',
                desc: 'Das Modell erhaelt zusaetzlichen Kontext aus Ihren eigenen Dokumenten. Das Modell selbst wird nicht veraendert.',
                example: 'Ein Chatbot durchsucht Ihre Firmen-FAQ und beantwortet Fragen basierend auf den gefundenen Dokumenten.',
              },
              {
                key: 'modelFinetune' as const,
                label: 'Fine-Tuning',
                desc: 'Ein bestehendes Modell wird mit Ihren eigenen Daten nachtrainiert. Die Originaldaten fliessen ins Modell ein.',
                example: 'Sie trainieren GPT-3.5 mit 1.000 Ihrer Support-Tickets, damit es Ihren Kommunikationsstil uebernimmt.',
              },
              {
                key: 'modelTraining' as const,
                label: 'Training (eigenes Modell)',
                desc: 'Sie trainieren ein komplett eigenes KI-Modell von Grund auf. Hoechster Kontrollgrad, aber auch hoechstes Datenrisiko.',
                example: 'Sie trainieren ein eigenes Bilderkennungsmodell fuer Qualitaetskontrolle in der Produktion.',
              },
            ].map(item => (
              <div key={item.key} className="bg-gray-50 rounded-lg border border-gray-200 overflow-hidden">
                <label className="flex items-start gap-3 p-3 cursor-pointer hover:bg-gray-100">
                  <input
                    type="checkbox"
                    checked={formData[item.key]}
                    onChange={e => updateFormData({ [item.key]: e.target.checked })}
                    className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                  />
                  <div>
                    <div className="font-medium text-gray-900">{item.label}</div>
                    <div className="text-sm text-gray-500">{item.desc}</div>
                    <div className="text-xs text-purple-600 mt-1 bg-purple-50 inline-block px-2 py-0.5 rounded">
                      Beispiel: {item.example}
                    </div>
                  </div>
                </label>
              </div>
            ))}

            {/* Glossar */}
            <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">
                Glossar: ML, DL, NLP, LLM, RAG, Fine-Tuning — 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> —
                  Computer lernt Muster aus Daten, statt explizit programmiert zu werden.
                  Beispiel: Spam-Filter, der aus markierten E-Mails lernt.
                </div>
                <div>
                  <span className="font-semibold">DL (Deep Learning)</span> —
                  Spezielle Form von ML mit kuenstlichen neuronalen Netzen (viele Schichten).
                  Beispiel: Bilderkennung, Spracherkennung, Textgenerierung.
                </div>
                <div>
                  <span className="font-semibold">NLP (Natural Language Processing)</span> —
                  KI, die menschliche Sprache versteht und verarbeitet.
                  Beispiel: ChatGPT, DeepL, Sentiment-Analyse von Kundenbewertungen.
                </div>
                <div>
                  <span className="font-semibold">LLM (Large Language Model)</span> —
                  Sehr grosses Sprachmodell, trainiert auf riesigen Textmengen.
                  Beispiel: GPT-4, Claude, Llama, Gemini.
                </div>
                <div>
                  <span className="font-semibold">RAG (Retrieval-Augmented Generation)</span> —
                  Das LLM erhaelt vor der Antwort relevante Dokumente aus einer Datenbank als Kontext.
                  Vorteil: Aktuelle und firmenspezifische Antworten, ohne das Modell neu zu trainieren.
                </div>
                <div>
                  <span className="font-semibold">Fine-Tuning</span> —
                  Ein bestehendes Modell wird mit eigenen Daten weiter trainiert, um es zu spezialisieren.
                  Achtung: Ihre Trainingsdaten werden Teil des Modells.
                </div>
              </div>
            </details>
          </div>
        )}

        {/* ============================================ */}
        {/* STEP 5: Automatisierung */}
        {/* ============================================ */}
        {currentStep === 5 && (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-900">Grad der Automatisierung</h3>
            <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>

            {[
              {
                value: 'assistive' as const,
                label: 'Assistiv (Mensch entscheidet)',
                desc: 'Die KI liefert Informationen oder Vorschlaege, aber ein Mensch trifft immer die finale Entscheidung.',
                examples: 'Rechtschreibkorrektur, Suchvorschlaege, Zusammenfassungen, Uebersetzungshilfe',
              },
              {
                value: 'semi_automated' as const,
                label: 'Teilautomatisiert (Mensch prueft)',
                desc: 'Die KI erstellt Ergebnisse oder Entwuerfe, die ein Mensch vor der Ausfuehrung prueft und bestaetigt.',
                examples: 'E-Mail-Entwuerfe mit manueller Freigabe, vorgeschlagene Diagnosen mit Arztbestaetigung, KI-generierte Vertraege mit juristischer Pruefung',
              },
              {
                value: 'fully_automated' as const,
                label: 'Vollautomatisiert (KI entscheidet)',
                desc: 'Die KI trifft Entscheidungen eigenstaendig. Ein Mensch ueberwacht nur stichprobenartig oder bei Ausnahmen.',
                examples: 'Automatische Kreditentscheidungen, automatisierte Bewerbungs-Vorauswahl, autonome Chatbot-Antworten ohne Pruefung',
              },
            ].map(item => (
              <label
                key={item.value}
                className={`flex items-start gap-3 p-4 rounded-lg border-2 cursor-pointer transition-all ${
                  formData.automation === item.value
                    ? 'border-purple-500 bg-purple-50'
                    : 'border-gray-200 hover:border-gray-300'
                }`}
              >
                <input
                  type="radio"
                  name="automation"
                  value={item.value}
                  checked={formData.automation === item.value}
                  onChange={e => updateFormData({ automation: e.target.value as typeof formData.automation })}
                  className="mt-1 text-purple-600 focus:ring-purple-500"
                />
                <div>
                  <div className="font-medium text-gray-900">{item.label}</div>
                  <div className="text-sm text-gray-500">{item.desc}</div>
                  <div className="text-xs text-gray-400 mt-1">Beispiele: {item.examples}</div>
                </div>
              </label>
            ))}

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

        {/* ============================================ */}
        {/* STEP 6: Hosting & Transfer */}
        {/* ============================================ */}
        {currentStep === 6 && (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-900">Hosting & Datentransfer</h3>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Hosting-Provider</label>
              <select
                value={formData.hostingProvider}
                onChange={e => updateFormData({ hostingProvider: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              >
                <option value="self_hosted">Eigenes Hosting</option>
                <option value="aws">AWS</option>
                <option value="azure">Microsoft Azure</option>
                <option value="gcp">Google Cloud</option>
                <option value="hetzner">Hetzner (DE)</option>
                <option value="other">Anderer Anbieter</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Region</label>
              <select
                value={formData.hostingRegion}
                onChange={e => updateFormData({ hostingRegion: e.target.value })}
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              >
                <option value="eu">EU</option>
                <option value="de">Deutschland</option>
                <option value="us">USA</option>
                <option value="other">Andere</option>
              </select>
            </div>

            <hr className="my-4" />

            <h4 className="text-sm font-medium text-gray-700">Internationaler Datentransfer</h4>
            <label className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
              <input
                type="checkbox"
                checked={formData.internationalTransfer}
                onChange={e => updateFormData({ internationalTransfer: e.target.checked })}
                className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
              />
              <div>
                <div className="font-medium text-gray-900">Daten werden in Drittlaender uebermittelt</div>
                <div className="text-sm text-gray-500">Ausserhalb des EWR (z.B. USA, UK, Schweiz)</div>
              </div>
            </label>

            {formData.internationalTransfer && (
              <>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Ziellaender</label>
                  <input
                    type="text"
                    value={formData.transferCountries.join(', ')}
                    onChange={e => updateFormData({ transferCountries: e.target.value.split(',').map(s => s.trim()).filter(Boolean) })}
                    placeholder="z.B. USA, UK, CH"
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  />
                  <p className="text-xs text-gray-500 mt-1">Kommagetrennte Laenderkuerzel</p>
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Transfer-Mechanismus</label>
                  <select
                    value={formData.transferMechanism}
                    onChange={e => updateFormData({ transferMechanism: e.target.value })}
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  >
                    <option value="none">Noch nicht festgelegt</option>
                    <option value="adequacy">Angemessenheitsbeschluss</option>
                    <option value="scc">Standardvertragsklauseln (SCC)</option>
                    <option value="bcr">Binding Corporate Rules (BCR)</option>
                    <option value="derogation">Ausnahmeregelung (Art. 49 DSGVO)</option>
                  </select>
                </div>
              </>
            )}
          </div>
        )}

        {/* ============================================ */}
        {/* STEP 7: Datenhaltung & Vertraege */}
        {/* ============================================ */}
        {currentStep === 7 && (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold text-gray-900">Datenhaltung & Vertraege</h3>

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Aufbewahrungsdauer (Tage)</label>
              <input
                type="number"
                min={0}
                value={formData.retentionDays}
                onChange={e => updateFormData({ retentionDays: parseInt(e.target.value) || 0 })}
                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">Zweck der Aufbewahrung</label>
              <textarea
                value={formData.retentionPurpose}
                onChange={e => updateFormData({ retentionPurpose: e.target.value })}
                rows={3}
                placeholder="z.B. Vertragliche Pflichten, gesetzliche Aufbewahrungsfristen..."
                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
              />
            </div>

            <hr className="my-4" />

            <h4 className="text-sm font-medium text-gray-700">Compliance-Dokumentation</h4>
            {[
              { key: 'hasDpa' as const, label: 'Auftragsverarbeitungsvertrag (AVV/DPA)', desc: 'Vertrag mit KI-Anbieter / Subprozessor nach Art. 28 DSGVO' },
              { key: 'hasAiaDocumentation' as const, label: 'AI Act Dokumentation', desc: 'Risikoklassifizierung und technische Dokumentation nach EU AI Act' },
              { key: 'hasRiskAssessment' as const, label: 'Risikobewertung / DSFA', desc: 'Datenschutz-Folgenabschaetzung nach Art. 35 DSGVO' },
            ].map(item => (
              <label key={item.key} className="flex items-start gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
                <input
                  type="checkbox"
                  checked={formData[item.key]}
                  onChange={e => updateFormData({ [item.key]: e.target.checked })}
                  className="mt-1 rounded border-gray-300 text-purple-600 focus:ring-purple-500"
                />
                <div>
                  <div className="font-medium text-gray-900">{item.label}</div>
                  <div className="text-sm text-gray-500">{item.desc}</div>
                </div>
              </label>
            ))}

            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Subprozessoren</label>
              <textarea
                value={formData.subprocessors}
                onChange={e => updateFormData({ subprocessors: e.target.value })}
                rows={3}
                placeholder="z.B. OpenAI (USA, SCC), Hetzner Cloud (DE)..."
                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>
        )}

        {/* ============================================ */}
        {/* STEP 8: Zusammenfassung */}
        {/* ============================================ */}
        {currentStep === 8 && (
          <div className="space-y-6">
            <h3 className="text-lg font-semibold text-gray-900">Zusammenfassung</h3>

            {/* Risiko-Vorschau */}
            <div className={`rounded-lg p-4 border-2 ${
              risk.level === 'CRITICAL' ? 'bg-red-50 border-red-300' :
              risk.level === 'HIGH' ? 'bg-orange-50 border-orange-300' :
              risk.level === 'MEDIUM' ? 'bg-yellow-50 border-yellow-300' :
              'bg-green-50 border-green-300'
            }`}>
              <div className="flex items-center justify-between">
                <div>
                  <div className="text-sm font-medium text-gray-700">Automatische Risikobewertung</div>
                  <div className="text-2xl font-bold mt-1">
                    <span className={
                      risk.level === 'CRITICAL' ? 'text-red-700' :
                      risk.level === 'HIGH' ? 'text-orange-700' :
                      risk.level === 'MEDIUM' ? 'text-yellow-700' :
                      'text-green-700'
                    }>
                      {risk.level}
                    </span>
                    <span className="text-sm font-normal text-gray-500 ml-2">(Score: {risk.score})</span>
                  </div>
                </div>
                {risk.dsfaRequired && (
                  <span className="px-3 py-1 text-sm bg-purple-100 text-purple-700 rounded-full font-medium">
                    DSFA empfohlen
                  </span>
                )}
              </div>
            </div>

            {/* Zusammenfassung der Eingaben */}
            <div className="bg-gray-50 rounded-lg p-6">
              <dl className="space-y-3">
                <SummaryRow label="Name" value={formData.name || '-'} />
                <SummaryRow label="Kategorie" value={formData.category || '-'} />
                <SummaryRow label="Branche" value={DOMAINS.find(d => d.value === formData.domain)?.label || formData.domain} />
                <SummaryRow label="Personenbezogene Daten" value={formData.processesPersonalData ? 'Ja' : 'Nein'} />
                {formData.processesPersonalData && (
                  <>
                    <SummaryRow label="Datenkategorien" value={formData.dataCategories.join(', ') || '-'} />
                    <SummaryRow label="Art. 9 Kategorien" value={formData.specialCategories ? 'Ja' : 'Nein'} />
                    {formData.healthData && <SummaryRow label="Gesundheitsdaten" value="Ja" />}
                    {formData.biometricData && <SummaryRow label="Biometrische Daten" value="Ja" />}
                    {formData.minorsData && <SummaryRow label="Daten Minderjaehriger" value="Ja" />}
                    {formData.financialData && <SummaryRow label="Finanzdaten" value="Ja" />}
                    {formData.customDataTypes.filter(s => s.trim()).length > 0 && (
                      <SummaryRow label="Sonstige Datentypen" value={formData.customDataTypes.filter(s => s.trim()).join(', ')} />
                    )}
                  </>
                )}
                <SummaryRow label="Rechtsgrundlage" value={formatLegalBasis(formData.legalBasis)} />
                <SummaryRow
                  label="Verarbeitungszwecke"
                  value={formatPurposes(formData)}
                />
                <SummaryRow label="KI-Technologien" value={formData.aiTechnologies.join(', ') || '-'} />
                <SummaryRow
                  label="Modell-Nutzung"
                  value={formatModelUsage(formData)}
                />
                <SummaryRow
                  label="Automatisierung"
                  value={
                    formData.automation === 'assistive' ? 'Assistiv' :
                    formData.automation === 'semi_automated' ? 'Teilautomatisiert' :
                    'Vollautomatisiert'
                  }
                />
                <SummaryRow label="Hosting" value={`${formData.hostingProvider} (${formData.hostingRegion})`} />
                <SummaryRow label="Datentransfer" value={formData.internationalTransfer ? `Ja (${formData.transferCountries.join(', ') || 'k.A.'})` : 'Nein'} />
                <SummaryRow label="Aufbewahrung" value={`${formData.retentionDays} Tage`} />
                <SummaryRow label="AVV/DPA" value={formData.hasDpa ? 'Vorhanden' : 'Nicht vorhanden'} />
                <SummaryRow label="AI Act Doku" value={formData.hasAiaDocumentation ? 'Vorhanden' : 'Nicht vorhanden'} />
                <SummaryRow label="DSFA" value={formData.hasRiskAssessment ? 'Vorhanden' : 'Nicht vorhanden'} />
              </dl>
            </div>

            {/* DSFA Warnung */}
            {risk.dsfaRequired && (
              <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
                <div className="flex items-start gap-3">
                  <svg className="w-5 h-5 text-amber-600 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                  </svg>
                  <div>
                    <h4 className="font-medium text-amber-800">Datenschutz-Folgenabschaetzung empfohlen</h4>
                    <p className="text-sm text-amber-700 mt-1">
                      Basierend auf Ihren Angaben wird eine DSFA nach Art. 35 DSGVO empfohlen.
                      Sie koennen diese im DSFA-Modul erstellen, nachdem der Use Case angelegt wurde.
                    </p>
                  </div>
                </div>
              </div>
            )}

            {/* UCCA Error */}
            {uccaError && (
              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-700">
                {uccaError}
              </div>
            )}

            {/* Notizen */}
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Notizen (optional)</label>
              <textarea
                value={formData.notes}
                onChange={e => updateFormData({ notes: e.target.value })}
                placeholder="Zusaetzliche Anmerkungen..."
                rows={3}
                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>
        )}
      </div>

      {/* Footer */}
      <div className="px-6 py-4 border-t border-gray-200 bg-gray-50 flex items-center justify-between">
        <button
          onClick={currentStep === 1 ? onCancel : handleBack}
          className="px-4 py-2 text-gray-600 hover:text-gray-900"
        >
          {currentStep === 1 ? 'Abbrechen' : 'Zurueck'}
        </button>
        <button
          onClick={handleNext}
          disabled={(currentStep === 1 && !formData.name) || isSubmitting}
          className={`px-6 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${
            (currentStep === 1 && !formData.name) || isSubmitting
              ? 'bg-gray-200 text-gray-400 cursor-not-allowed'
              : currentStep === TOTAL_STEPS
              ? 'bg-green-600 text-white hover:bg-green-700'
              : 'bg-purple-600 text-white hover:bg-purple-700'
          }`}
        >
          {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...
            </>
          ) : currentStep === TOTAL_STEPS ? (
            'Abschliessen'
          ) : (
            'Weiter'
          )}
        </button>
      </div>
    </div>
  )
}

// =============================================================================
// HELPER COMPONENTS & FUNCTIONS
// =============================================================================

function SummaryRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="flex justify-between gap-4">
      <dt className="text-gray-500 shrink-0">{label}:</dt>
      <dd className="font-medium text-gray-900 text-right">{value}</dd>
    </div>
  )
}

function formatLegalBasis(basis: string): string {
  const map: Record<string, string> = {
    consent: 'Einwilligung (Art. 6.1a)',
    contract: 'Vertragserfullung (Art. 6.1b)',
    legal_obligation: 'Rechtliche Verpflichtung (Art. 6.1c)',
    vital_interest: 'Lebenswichtige Interessen (Art. 6.1d)',
    public_interest: 'Oeffentliches Interesse (Art. 6.1e)',
    legitimate_interest: 'Berechtigtes Interesse (Art. 6.1f)',
  }
  return map[basis] || basis
}

function formatPurposes(form: WizardFormData): string {
  const purposes: string[] = []
  if (form.purposeProfiling) purposes.push('Profiling')
  if (form.purposeAutomatedDecision) purposes.push('Autom. Entscheidung')
  if (form.purposeMarketing) purposes.push('Marketing')
  if (form.purposeAnalytics) purposes.push('Analytics')
  if (form.purposeServiceDelivery) purposes.push('Serviceerbringung')
  return purposes.join(', ') || '-'
}

function formatModelUsage(form: WizardFormData): string {
  const usage: string[] = []
  if (form.modelInference) usage.push('Inferenz')
  if (form.modelRag) usage.push('RAG')
  if (form.modelFinetune) usage.push('Fine-Tuning')
  if (form.modelTraining) usage.push('Training')
  return usage.join(', ') || '-'
}

function buildRecommendations(form: WizardFormData, risk: { dsfaRequired: boolean }): string[] {
  const recs: string[] = []
  if (risk.dsfaRequired) recs.push('Datenschutz-Folgenabschaetzung (DSFA)')
  if (form.processesPersonalData) recs.push('Technische und organisatorische Massnahmen (TOM)')
  if (form.internationalTransfer) recs.push('Datentransfer-Vereinbarung pruefen')
  if (form.purposeAutomatedDecision) recs.push('Human-in-the-Loop Prozess einrichten')
  if (form.modelTraining || form.modelFinetune) recs.push('Trainingsdaten-Dokumentation')
  if (!form.hasDpa && form.hostingProvider !== 'self_hosted') recs.push('Auftragsverarbeitungsvertrag (AVV) abschliessen')
  if (form.specialCategories) recs.push('Explizite Einwilligung fuer Art. 9 Daten')
  if (form.minorsData) recs.push('Einwilligung der Erziehungsberechtigten')
  if (recs.length === 0) recs.push('Standard-Compliance-Massnahmen')
  return recs
}

// =============================================================================
// MAIN PAGE
// =============================================================================

export default function AdvisoryBoardPage() {
  const { state, dispatch } = useSDK()
  const [showWizard, setShowWizard] = useState(false)

  const handleCreateUseCase = (useCase: UseCaseAssessment) => {
    dispatch({ type: 'ADD_USE_CASE', payload: useCase })
    dispatch({ type: 'SET_ACTIVE_USE_CASE', payload: useCase.id })
    setShowWizard(false)
  }

  const handleDeleteUseCase = (id: string) => {
    if (confirm('Moechten Sie diesen Use Case wirklich loeschen?')) {
      dispatch({ type: 'DELETE_USE_CASE', payload: id })
    }
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Use Case Workshop</h1>
          <p className="mt-1 text-gray-500">
            Erfassen Sie Ihre KI-Anwendungsfaelle und erhalten Sie eine erste Compliance-Bewertung
          </p>
        </div>
        <div className="flex items-center gap-3">
          <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-System Dokumentation ansehen
          </Link>
          {!showWizard && (
            <button
              onClick={() => setShowWizard(true)}
              className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
              Neuer Use Case
            </button>
          )}
        </div>
      </div>

      {/* Wizard or List */}
      {showWizard ? (
        <UseCaseWizard onComplete={handleCreateUseCase} onCancel={() => setShowWizard(false)} />
      ) : state.useCases.length === 0 ? (
        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
          <div className="w-16 h-16 mx-auto bg-purple-100 rounded-full flex items-center justify-center mb-4">
            <svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
              />
            </svg>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">Noch keine Use Cases</h3>
          <p className="mt-2 text-gray-500 max-w-md mx-auto">
            Erstellen Sie Ihren ersten Use Case, um mit dem Compliance Assessment zu beginnen.
          </p>
          <button
            onClick={() => setShowWizard(true)}
            className="mt-6 px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
          >
            Ersten Use Case erstellen
          </button>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {state.useCases.map(useCase => (
            <UseCaseCard
              key={useCase.id}
              useCase={useCase}
              isActive={state.activeUseCase === useCase.id}
              onSelect={() => dispatch({ type: 'SET_ACTIVE_USE_CASE', payload: useCase.id })}
              onDelete={() => handleDeleteUseCase(useCase.id)}
            />
          ))}
        </div>
      )}
    </div>
  )
}