breakpilot-pwa/admin-v2/app/(sdk)/sdk/dsfa/[id]/page.tsx

'use client'

import React, { useState, useEffect, useCallback } from 'react'
import Link from 'next/link'
import { useParams, useRouter } from 'next/navigation'
import {
  DSFA,
  DSFARisk,
  DSFAMitigation,
  DSFA_SECTIONS,
  DSFA_STATUS_LABELS,
  DSFA_RISK_LEVEL_LABELS,
  DSFA_LEGAL_BASES,
  DSFA_AFFECTED_RIGHTS,
  calculateRiskLevel,
} from '@/lib/sdk/dsfa/types'
import {
  getDSFA,
  updateDSFASection,
  addDSFARisk,
  removeDSFARisk,
  addDSFAMitigation,
  updateDSFAMitigationStatus,
  updateDSFA,
} from '@/lib/sdk/dsfa/api'
import {
  RiskMatrix,
  ApprovalPanel,
  DSFASidebar,
  ThresholdAnalysisSection,
  StakeholderConsultationSection,
  Art36Warning,
  ReviewScheduleSection,
} from '@/components/sdk/dsfa'

// =============================================================================
// SECTION EDITORS
// =============================================================================

interface SectionProps {
  dsfa: DSFA
  onUpdate: (data: Record<string, unknown>) => Promise<void>
  isSubmitting: boolean
}

// Section 1: Systematische Beschreibung (Art. 35 Abs. 7 lit. a)
function Section1Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
  const [formData, setFormData] = useState({
    processing_description: dsfa.processing_description || '',
    processing_purpose: dsfa.processing_purpose || '',
    data_categories: dsfa.data_categories || [],
    data_subjects: dsfa.data_subjects || [],
    recipients: dsfa.recipients || [],
    legal_basis: dsfa.legal_basis || '',
    legal_basis_details: dsfa.legal_basis_details || '',
  })
  const [newCategory, setNewCategory] = useState('')
  const [newSubject, setNewSubject] = useState('')
  const [newRecipient, setNewRecipient] = useState('')

  const handleSave = () => {
    onUpdate(formData)
  }

  const addItem = (field: 'data_categories' | 'data_subjects' | 'recipients', value: string, setter: (v: string) => void) => {
    if (value.trim()) {
      setFormData(prev => ({
        ...prev,
        [field]: [...prev[field], value.trim()]
      }))
      setter('')
    }
  }

  const removeItem = (field: 'data_categories' | 'data_subjects' | 'recipients', index: number) => {
    setFormData(prev => ({
      ...prev,
      [field]: prev[field].filter((_, i) => i !== index)
    }))
  }

  return (
    <div className="space-y-6">
      {/* Processing Purpose */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Verarbeitungszweck *
        </label>
        <textarea
          value={formData.processing_purpose}
          onChange={(e) => setFormData(prev => ({ ...prev, processing_purpose: e.target.value }))}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          rows={3}
          placeholder="Beschreiben Sie den Zweck der Datenverarbeitung..."
        />
      </div>

      {/* Processing Description */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Beschreibung der Verarbeitung *
        </label>
        <textarea
          value={formData.processing_description}
          onChange={(e) => setFormData(prev => ({ ...prev, processing_description: e.target.value }))}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          rows={4}
          placeholder="Detaillierte Beschreibung der Verarbeitungsvorgaenge..."
        />
      </div>

      {/* Data Categories */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Datenkategorien *
        </label>
        <div className="flex flex-wrap gap-2 mb-2">
          {formData.data_categories.map((cat, idx) => (
            <span key={idx} className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm flex items-center gap-2">
              {cat}
              <button onClick={() => removeItem('data_categories', idx)} className="hover:text-blue-900">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </span>
          ))}
        </div>
        <div className="flex gap-2">
          <input
            type="text"
            value={newCategory}
            onChange={(e) => setNewCategory(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && addItem('data_categories', newCategory, setNewCategory)}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            placeholder="Kategorie hinzufuegen..."
          />
          <button
            onClick={() => addItem('data_categories', newCategory, setNewCategory)}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
          >
            +
          </button>
        </div>
      </div>

      {/* Data Subjects */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Betroffene Personen *
        </label>
        <div className="flex flex-wrap gap-2 mb-2">
          {formData.data_subjects.map((subj, idx) => (
            <span key={idx} className="px-3 py-1 bg-green-100 text-green-700 rounded-full text-sm flex items-center gap-2">
              {subj}
              <button onClick={() => removeItem('data_subjects', idx)} className="hover:text-green-900">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </span>
          ))}
        </div>
        <div className="flex gap-2">
          <input
            type="text"
            value={newSubject}
            onChange={(e) => setNewSubject(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && addItem('data_subjects', newSubject, setNewSubject)}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            placeholder="z.B. Kunden, Mitarbeiter..."
          />
          <button
            onClick={() => addItem('data_subjects', newSubject, setNewSubject)}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
          >
            +
          </button>
        </div>
      </div>

      {/* Recipients */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Empfaenger
        </label>
        <div className="flex flex-wrap gap-2 mb-2">
          {formData.recipients.map((rec, idx) => (
            <span key={idx} className="px-3 py-1 bg-orange-100 text-orange-700 rounded-full text-sm flex items-center gap-2">
              {rec}
              <button onClick={() => removeItem('recipients', idx)} className="hover:text-orange-900">
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </span>
          ))}
        </div>
        <div className="flex gap-2">
          <input
            type="text"
            value={newRecipient}
            onChange={(e) => setNewRecipient(e.target.value)}
            onKeyPress={(e) => e.key === 'Enter' && addItem('recipients', newRecipient, setNewRecipient)}
            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            placeholder="Empfaenger hinzufuegen..."
          />
          <button
            onClick={() => addItem('recipients', newRecipient, setNewRecipient)}
            className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
          >
            +
          </button>
        </div>
      </div>

      {/* Legal Basis */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Rechtsgrundlage *
        </label>
        <select
          value={formData.legal_basis}
          onChange={(e) => setFormData(prev => ({ ...prev, legal_basis: e.target.value }))}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
        >
          <option value="">Bitte waehlen...</option>
          {Object.entries(DSFA_LEGAL_BASES).map(([key, label]) => (
            <option key={key} value={key}>{label}</option>
          ))}
        </select>
      </div>

      {/* Legal Basis Details */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Begruendung der Rechtsgrundlage
        </label>
        <textarea
          value={formData.legal_basis_details}
          onChange={(e) => setFormData(prev => ({ ...prev, legal_basis_details: e.target.value }))}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          rows={3}
          placeholder="Erlaeutern Sie, warum diese Rechtsgrundlage anwendbar ist..."
        />
      </div>

      {/* Save Button */}
      <div className="flex justify-end pt-4 border-t border-gray-200">
        <button
          onClick={handleSave}
          disabled={isSubmitting}
          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
        >
          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
        </button>
      </div>
    </div>
  )
}

// Section 2: Notwendigkeit & Verhaeltnismaessigkeit (Art. 35 Abs. 7 lit. b)
function Section2Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
  const [formData, setFormData] = useState({
    necessity_assessment: dsfa.necessity_assessment || '',
    proportionality_assessment: dsfa.proportionality_assessment || '',
    data_minimization: dsfa.data_minimization || '',
    alternatives_considered: dsfa.alternatives_considered || '',
    retention_justification: dsfa.retention_justification || '',
  })

  const handleSave = () => {
    onUpdate(formData)
  }

  return (
    <div className="space-y-6">
      {/* Necessity */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Notwendigkeit der Verarbeitung *
        </label>
        <p className="text-xs text-gray-500 mb-2">
          Erklaeren Sie, warum die Verarbeitung fuer den angegebenen Zweck notwendig ist.
        </p>
        <textarea
          value={formData.necessity_assessment}
          onChange={(e) => setFormData(prev => ({ ...prev, necessity_assessment: e.target.value }))}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          rows={4}
          placeholder="Beschreiben Sie die Notwendigkeit..."
        />
      </div>

      {/* Proportionality */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Verhaeltnismaessigkeit *
        </label>
        <p className="text-xs text-gray-500 mb-2">
          Begruenden Sie, warum der Eingriff in die Rechte der Betroffenen verhaeltnismaessig ist.
        </p>
        <textarea
          value={formData.proportionality_assessment}
          onChange={(e) => setFormData(prev => ({ ...prev, proportionality_assessment: e.target.value }))}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          rows={4}
          placeholder="Beschreiben Sie die Verhaeltnismaessigkeit..."
        />
      </div>

      {/* Data Minimization */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Datenminimierung
        </label>
        <p className="text-xs text-gray-500 mb-2">
          Welche Massnahmen wurden ergriffen, um nur die notwendigen Daten zu erheben?
        </p>
        <textarea
          value={formData.data_minimization}
          onChange={(e) => setFormData(prev => ({ ...prev, data_minimization: e.target.value }))}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          rows={3}
          placeholder="Beschreiben Sie die Datenminimierungsmassnahmen..."
        />
      </div>

      {/* Alternatives */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Gepruefe Alternativen
        </label>
        <p className="text-xs text-gray-500 mb-2">
          Welche weniger eingriffsintensiven Alternativen wurden geprueft?
        </p>
        <textarea
          value={formData.alternatives_considered}
          onChange={(e) => setFormData(prev => ({ ...prev, alternatives_considered: e.target.value }))}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          rows={3}
          placeholder="Beschreiben Sie gepruefe Alternativen..."
        />
      </div>

      {/* Retention */}
      <div>
        <label className="block text-sm font-medium text-gray-700 mb-2">
          Speicherdauer / Loeschfristen
        </label>
        <textarea
          value={formData.retention_justification}
          onChange={(e) => setFormData(prev => ({ ...prev, retention_justification: e.target.value }))}
          className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
          rows={3}
          placeholder="Begruenden Sie die geplante Speicherdauer..."
        />
      </div>

      {/* Save Button */}
      <div className="flex justify-end pt-4 border-t border-gray-200">
        <button
          onClick={handleSave}
          disabled={isSubmitting}
          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
        >
          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
        </button>
      </div>
    </div>
  )
}

// Section 3: Risikobewertung (Art. 35 Abs. 7 lit. c)
function Section3Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
  const [selectedRisk, setSelectedRisk] = useState<DSFARisk | null>(null)
  const [showAddRiskModal, setShowAddRiskModal] = useState(false)
  const [newRiskLikelihood, setNewRiskLikelihood] = useState<'low' | 'medium' | 'high'>('medium')
  const [newRiskImpact, setNewRiskImpact] = useState<'low' | 'medium' | 'high'>('medium')
  const [affectedRights, setAffectedRights] = useState<string[]>(dsfa.affected_rights || [])

  const handleAddRisk = (likelihood: 'low' | 'medium' | 'high', impact: 'low' | 'medium' | 'high') => {
    setNewRiskLikelihood(likelihood)
    setNewRiskImpact(impact)
    setShowAddRiskModal(true)
  }

  const toggleAffectedRight = (rightId: string) => {
    setAffectedRights(prev =>
      prev.includes(rightId)
        ? prev.filter(r => r !== rightId)
        : [...prev, rightId]
    )
  }

  const handleSaveSection = () => {
    onUpdate({
      affected_rights: affectedRights,
      overall_risk_level: dsfa.overall_risk_level,
    })
  }

  return (
    <div className="space-y-6">
      {/* Risk Matrix */}
      <div className="bg-gray-50 rounded-xl p-6">
        <RiskMatrix
          risks={dsfa.risks || []}
          onRiskSelect={(risk) => setSelectedRisk(risk)}
          onAddRisk={handleAddRisk}
          selectedRiskId={selectedRisk?.id}
          readOnly={dsfa.status !== 'draft' && dsfa.status !== 'needs_update'}
        />
      </div>

      {/* Triggered Rules from UCCA */}
      {dsfa.triggered_rule_codes && dsfa.triggered_rule_codes.length > 0 && (
        <div className="bg-red-50 border border-red-200 rounded-xl p-4">
          <h4 className="text-sm font-medium text-red-800 mb-2">
            DSFA-ausloesende Regeln (aus UCCA)
          </h4>
          <div className="flex flex-wrap gap-2">
            {dsfa.triggered_rule_codes.map(code => (
              <span key={code} className="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">
                {code}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Risk List */}
      <div>
        <h4 className="text-sm font-medium text-gray-700 mb-3">Identifizierte Risiken ({(dsfa.risks || []).length})</h4>
        {(dsfa.risks || []).length === 0 ? (
          <div className="text-center py-8 text-gray-500">
            <svg className="w-12 h-12 mx-auto text-gray-300 mb-3" 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>
            <p>Noch keine Risiken erfasst</p>
            <p className="text-sm mt-1">Klicken Sie in der Matrix auf eine Zelle, um ein Risiko hinzuzufuegen.</p>
          </div>
        ) : (
          <div className="space-y-3">
            {(dsfa.risks || []).map(risk => {
              const { level } = calculateRiskLevel(risk.likelihood, risk.impact)
              const levelColors = {
                low: 'bg-green-100 text-green-700 border-green-200',
                medium: 'bg-yellow-100 text-yellow-700 border-yellow-200',
                high: 'bg-orange-100 text-orange-700 border-orange-200',
                very_high: 'bg-red-100 text-red-700 border-red-200',
              }
              return (
                <div
                  key={risk.id}
                  className={`p-4 rounded-xl border cursor-pointer transition-all ${
                    selectedRisk?.id === risk.id ? 'ring-2 ring-purple-500' : ''
                  } ${levelColors[level]}`}
                  onClick={() => setSelectedRisk(risk)}
                >
                  <div className="flex items-start justify-between">
                    <div className="flex-1">
                      <div className="font-medium">{risk.description}</div>
                      <div className="text-sm mt-1 opacity-75">
                        Kategorie: {risk.category === 'confidentiality' ? 'Vertraulichkeit' :
                                    risk.category === 'integrity' ? 'Integritaet' :
                                    risk.category === 'availability' ? 'Verfuegbarkeit' :
                                    'Rechte & Freiheiten'}
                      </div>
                      <div className="text-sm opacity-75">
                        Eintrittswahrscheinlichkeit: {risk.likelihood === 'low' ? 'Niedrig' : risk.likelihood === 'medium' ? 'Mittel' : 'Hoch'} |
                        Auswirkung: {risk.impact === 'low' ? 'Niedrig' : risk.impact === 'medium' ? 'Mittel' : 'Hoch'}
                      </div>
                    </div>
                    <span className={`px-2 py-1 rounded text-xs font-medium ${levelColors[level]}`}>
                      {DSFA_RISK_LEVEL_LABELS[level]}
                    </span>
                  </div>
                </div>
              )
            })}
          </div>
        )}
      </div>

      {/* Affected Rights */}
      <div>
        <h4 className="text-sm font-medium text-gray-700 mb-3">Betroffene Rechte & Freiheiten</h4>
        <div className="grid grid-cols-2 gap-2">
          {DSFA_AFFECTED_RIGHTS.map(right => (
            <label
              key={right.id}
              className={`flex items-center gap-2 p-3 rounded-lg border cursor-pointer transition-colors ${
                affectedRights.includes(right.id)
                  ? 'bg-purple-50 border-purple-300'
                  : 'bg-white border-gray-200 hover:bg-gray-50'
              }`}
            >
              <input
                type="checkbox"
                checked={affectedRights.includes(right.id)}
                onChange={() => toggleAffectedRight(right.id)}
                className="rounded border-gray-300 text-purple-600 focus:ring-purple-500"
              />
              <span className="text-sm">{right.label}</span>
            </label>
          ))}
        </div>
      </div>

      {/* Save Button */}
      <div className="flex justify-end pt-4 border-t border-gray-200">
        <button
          onClick={handleSaveSection}
          disabled={isSubmitting}
          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
        >
          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
        </button>
      </div>

      {/* Add Risk Modal */}
      {showAddRiskModal && (
        <AddRiskModal
          likelihood={newRiskLikelihood}
          impact={newRiskImpact}
          onClose={() => setShowAddRiskModal(false)}
          onAdd={async (riskData) => {
            // This would call the API
            setShowAddRiskModal(false)
          }}
        />
      )}
    </div>
  )
}

// Section 4: Abhilfemassnahmen (Art. 35 Abs. 7 lit. d)
function Section4Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
  const [showAddMitigation, setShowAddMitigation] = useState(false)

  const mitigationsByType = {
    technical: (dsfa.mitigations || []).filter(m => m.type === 'technical'),
    organizational: (dsfa.mitigations || []).filter(m => m.type === 'organizational'),
    legal: (dsfa.mitigations || []).filter(m => m.type === 'legal'),
  }

  const getStatusBadge = (status: string) => {
    const styles = {
      planned: 'bg-gray-100 text-gray-600',
      in_progress: 'bg-yellow-100 text-yellow-700',
      implemented: 'bg-blue-100 text-blue-700',
      verified: 'bg-green-100 text-green-700',
    }
    const labels = {
      planned: 'Geplant',
      in_progress: 'In Umsetzung',
      implemented: 'Umgesetzt',
      verified: 'Verifiziert',
    }
    return (
      <span className={`px-2 py-1 rounded text-xs font-medium ${styles[status as keyof typeof styles] || styles.planned}`}>
        {labels[status as keyof typeof labels] || status}
      </span>
    )
  }

  const renderMitigationSection = (
    title: string,
    icon: React.ReactNode,
    mitigations: DSFAMitigation[],
    bgColor: string
  ) => (
    <div>
      <div className="flex items-center gap-2 mb-3">
        {icon}
        <h4 className="text-sm font-medium text-gray-700">{title} ({mitigations.length})</h4>
      </div>
      {mitigations.length === 0 ? (
        <div className={`p-4 rounded-lg ${bgColor} text-center text-sm text-gray-500`}>
          Keine Massnahmen definiert
        </div>
      ) : (
        <div className="space-y-2">
          {mitigations.map(m => (
            <div key={m.id} className={`p-4 rounded-lg ${bgColor} border border-gray-200`}>
              <div className="flex items-start justify-between">
                <div className="flex-1">
                  <div className="font-medium text-gray-900">{m.description}</div>
                  <div className="text-sm text-gray-500 mt-1">
                    Verantwortlich: {m.responsible_party || '-'}
                    {m.tom_reference && ` | TOM: ${m.tom_reference}`}
                  </div>
                </div>
                <div className="flex items-center gap-2">
                  {getStatusBadge(m.status)}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )

  return (
    <div className="space-y-6">
      {/* Add Mitigation Button */}
      <div className="flex justify-end">
        <button
          onClick={() => setShowAddMitigation(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 4v16m8-8H4" />
          </svg>
          Massnahme hinzufuegen
        </button>
      </div>

      {/* Technical Measures */}
      {renderMitigationSection(
        'Technische Massnahmen',
        <svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
        </svg>,
        mitigationsByType.technical,
        'bg-blue-50'
      )}

      {/* Organizational Measures */}
      {renderMitigationSection(
        'Organisatorische Massnahmen',
        <svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>,
        mitigationsByType.organizational,
        'bg-green-50'
      )}

      {/* Legal Measures */}
      {renderMitigationSection(
        'Rechtliche Massnahmen',
        <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
        </svg>,
        mitigationsByType.legal,
        'bg-purple-50'
      )}

      {/* TOM References */}
      {dsfa.tom_references && dsfa.tom_references.length > 0 && (
        <div className="bg-gray-50 rounded-xl p-4">
          <h4 className="text-sm font-medium text-gray-700 mb-2">Verknuepfte TOM-Eintraege</h4>
          <div className="flex flex-wrap gap-2">
            {dsfa.tom_references.map((ref, idx) => (
              <span key={idx} className="px-3 py-1 bg-white border border-gray-200 rounded-full text-sm text-gray-600">
                {ref}
              </span>
            ))}
          </div>
        </div>
      )}

      {/* Add Mitigation Modal */}
      {showAddMitigation && (
        <AddMitigationModal
          risks={dsfa.risks || []}
          onClose={() => setShowAddMitigation(false)}
          onAdd={async (mitigationData) => {
            // This would call the API
            setShowAddMitigation(false)
          }}
        />
      )}
    </div>
  )
}

// Section 5: Stellungnahme DSB (Art. 35 Abs. 2 + Art. 36)
function Section5Editor({ dsfa, onUpdate, isSubmitting }: SectionProps) {
  const [formData, setFormData] = useState({
    dpo_consulted: dsfa.dpo_consulted || false,
    dpo_name: dsfa.dpo_name || '',
    dpo_opinion: dsfa.dpo_opinion || '',
    authority_consulted: dsfa.authority_consulted || false,
    authority_reference: dsfa.authority_reference || '',
    authority_decision: dsfa.authority_decision || '',
  })

  const handleSave = () => {
    onUpdate(formData)
  }

  return (
    <div className="space-y-6">
      {/* DPO Consultation */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-6">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center flex-shrink-0">
            <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
          <div className="flex-1">
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                checked={formData.dpo_consulted}
                onChange={(e) => setFormData(prev => ({ ...prev, dpo_consulted: e.target.checked }))}
                className="w-5 h-5 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
              />
              <span className="font-medium text-blue-800">
                Datenschutzbeauftragter wurde konsultiert
              </span>
            </label>
            <p className="text-sm text-blue-600 mt-2">
              Gemaess Art. 35 Abs. 2 DSGVO muss bei einer DSFA der Rat des DSB eingeholt werden.
            </p>
          </div>
        </div>

        {formData.dpo_consulted && (
          <div className="mt-4 space-y-4 pt-4 border-t border-blue-200">
            <div>
              <label className="block text-sm font-medium text-blue-800 mb-2">
                Name des DSB
              </label>
              <input
                type="text"
                value={formData.dpo_name}
                onChange={(e) => setFormData(prev => ({ ...prev, dpo_name: e.target.value }))}
                className="w-full px-4 py-2 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
                placeholder="Name des Datenschutzbeauftragten"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-blue-800 mb-2">
                Stellungnahme des DSB
              </label>
              <textarea
                value={formData.dpo_opinion}
                onChange={(e) => setFormData(prev => ({ ...prev, dpo_opinion: e.target.value }))}
                className="w-full px-4 py-3 border border-blue-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-white"
                rows={4}
                placeholder="Stellungnahme und Empfehlungen des DSB..."
              />
            </div>
          </div>
        )}
      </div>

      {/* Authority Consultation */}
      <div className="bg-orange-50 border border-orange-200 rounded-xl p-6">
        <div className="flex items-start gap-4">
          <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center flex-shrink-0">
            <svg className="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
            </svg>
          </div>
          <div className="flex-1">
            <label className="flex items-center gap-3">
              <input
                type="checkbox"
                checked={formData.authority_consulted}
                onChange={(e) => setFormData(prev => ({ ...prev, authority_consulted: e.target.checked }))}
                className="w-5 h-5 rounded border-gray-300 text-orange-600 focus:ring-orange-500"
              />
              <span className="font-medium text-orange-800">
                Aufsichtsbehoerde wurde konsultiert (Art. 36)
              </span>
            </label>
            <p className="text-sm text-orange-600 mt-2">
              Falls nach Durchfuehrung der Massnahmen weiterhin ein hohes Risiko besteht, ist die Aufsichtsbehoerde zu konsultieren.
            </p>
          </div>
        </div>

        {formData.authority_consulted && (
          <div className="mt-4 space-y-4 pt-4 border-t border-orange-200">
            <div>
              <label className="block text-sm font-medium text-orange-800 mb-2">
                Aktenzeichen / Referenz
              </label>
              <input
                type="text"
                value={formData.authority_reference}
                onChange={(e) => setFormData(prev => ({ ...prev, authority_reference: e.target.value }))}
                className="w-full px-4 py-2 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
                placeholder="Aktenzeichen der Behoerde"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-orange-800 mb-2">
                Entscheidung der Behoerde
              </label>
              <textarea
                value={formData.authority_decision}
                onChange={(e) => setFormData(prev => ({ ...prev, authority_decision: e.target.value }))}
                className="w-full px-4 py-3 border border-orange-300 rounded-lg focus:ring-2 focus:ring-orange-500 bg-white"
                rows={4}
                placeholder="Entscheidung und Auflagen der Aufsichtsbehoerde..."
              />
            </div>
          </div>
        )}
      </div>

      {/* Info Box */}
      <div className="bg-gray-50 border border-gray-200 rounded-xl p-4">
        <div className="flex items-start gap-3">
          <svg className="w-5 h-5 text-gray-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <div className="text-sm text-gray-600">
            <p className="font-medium text-gray-700 mb-1">Hinweis zur Konsultation</p>
            <p>
              Die Konsultation der Aufsichtsbehoerde ist nur erforderlich, wenn nach Umsetzung der
              geplanten Massnahmen weiterhin ein hohes Risiko fuer die Rechte und Freiheiten der
              betroffenen Personen besteht.
            </p>
          </div>
        </div>
      </div>

      {/* Save Button */}
      <div className="flex justify-end pt-4 border-t border-gray-200">
        <button
          onClick={handleSave}
          disabled={isSubmitting}
          className="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50 transition-colors"
        >
          {isSubmitting ? 'Speichern...' : 'Abschnitt speichern'}
        </button>
      </div>
    </div>
  )
}

// =============================================================================
// MODALS
// =============================================================================

function AddRiskModal({
  likelihood,
  impact,
  onClose,
  onAdd,
}: {
  likelihood: 'low' | 'medium' | 'high'
  impact: 'low' | 'medium' | 'high'
  onClose: () => void
  onAdd: (data: { category: string; description: string }) => void
}) {
  const [category, setCategory] = useState('confidentiality')
  const [description, setDescription] = useState('')

  const { level } = calculateRiskLevel(likelihood, impact)

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl p-6 max-w-lg w-full mx-4">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Risiko hinzufuegen</h3>

        <div className="mb-4 p-3 rounded-lg bg-gray-50">
          <div className="text-sm text-gray-500">
            Eintrittswahrscheinlichkeit: <span className="font-medium text-gray-700">{likelihood === 'low' ? 'Niedrig' : likelihood === 'medium' ? 'Mittel' : 'Hoch'}</span>
            {' | '}
            Auswirkung: <span className="font-medium text-gray-700">{impact === 'low' ? 'Niedrig' : impact === 'medium' ? 'Mittel' : 'Hoch'}</span>
            {' | '}
            Risikostufe: <span className="font-medium">{DSFA_RISK_LEVEL_LABELS[level]}</span>
          </div>
        </div>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Kategorie</label>
            <select
              value={category}
              onChange={(e) => setCategory(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            >
              <option value="confidentiality">Vertraulichkeit</option>
              <option value="integrity">Integritaet</option>
              <option value="availability">Verfuegbarkeit</option>
              <option value="rights_freedoms">Rechte & Freiheiten</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
              rows={4}
              placeholder="Beschreiben Sie das Risiko..."
            />
          </div>
        </div>

        <div className="flex gap-3 mt-6">
          <button
            onClick={onClose}
            className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
          >
            Abbrechen
          </button>
          <button
            onClick={() => onAdd({ category, description })}
            disabled={!description.trim()}
            className="flex-1 py-2 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50"
          >
            Hinzufuegen
          </button>
        </div>
      </div>
    </div>
  )
}

function AddMitigationModal({
  risks,
  onClose,
  onAdd,
}: {
  risks: DSFARisk[]
  onClose: () => void
  onAdd: (data: { risk_id: string; description: string; type: string; responsible_party: string }) => void
}) {
  const [riskId, setRiskId] = useState(risks[0]?.id || '')
  const [type, setType] = useState('technical')
  const [description, setDescription] = useState('')
  const [responsibleParty, setResponsibleParty] = useState('')

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white rounded-xl p-6 max-w-lg w-full mx-4">
        <h3 className="text-lg font-semibold text-gray-900 mb-4">Massnahme hinzufuegen</h3>

        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Zugehoeriges Risiko</label>
            <select
              value={riskId}
              onChange={(e) => setRiskId(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            >
              {risks.map(risk => (
                <option key={risk.id} value={risk.id}>
                  {risk.description.substring(0, 50)}...
                </option>
              ))}
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Typ</label>
            <select
              value={type}
              onChange={(e) => setType(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
            >
              <option value="technical">Technisch</option>
              <option value="organizational">Organisatorisch</option>
              <option value="legal">Rechtlich</option>
            </select>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Beschreibung</label>
            <textarea
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
              rows={3}
              placeholder="Beschreiben Sie die Massnahme..."
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-2">Verantwortlich</label>
            <input
              type="text"
              value={responsibleParty}
              onChange={(e) => setResponsibleParty(e.target.value)}
              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500"
              placeholder="Name oder Rolle..."
            />
          </div>
        </div>

        <div className="flex gap-3 mt-6">
          <button
            onClick={onClose}
            className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
          >
            Abbrechen
          </button>
          <button
            onClick={() => onAdd({ risk_id: riskId, description, type, responsible_party: responsibleParty })}
            disabled={!description.trim()}
            className="flex-1 py-2 px-4 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 disabled:opacity-50"
          >
            Hinzufuegen
          </button>
        </div>
      </div>
    </div>
  )
}

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

export default function DSFAEditorPage() {
  const params = useParams()
  const router = useRouter()
  const dsfaId = params.id as string

  const [dsfa, setDSFA] = useState<DSFA | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [isSaving, setIsSaving] = useState(false)
  const [activeSection, setActiveSection] = useState(0) // Start at Section 0: Threshold Analysis
  const [saveMessage, setSaveMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)

  // Load DSFA data
  useEffect(() => {
    const loadDSFA = async () => {
      setIsLoading(true)
      try {
        const data = await getDSFA(dsfaId)
        setDSFA(data)
      } catch (error) {
        console.error('Failed to load DSFA:', error)
      } finally {
        setIsLoading(false)
      }
    }
    loadDSFA()
  }, [dsfaId])

  const handleSectionUpdate = useCallback(async (sectionNumber: number, data: Record<string, unknown>) => {
    if (!dsfa) return

    setIsSaving(true)
    setSaveMessage(null)

    try {
      const updated = await updateDSFASection(dsfaId, sectionNumber, data)
      setDSFA(updated)
      setSaveMessage({ type: 'success', text: 'Abschnitt gespeichert' })
      setTimeout(() => setSaveMessage(null), 3000)
    } catch (error) {
      console.error('Failed to update section:', error)
      setSaveMessage({ type: 'error', text: 'Fehler beim Speichern' })
    } finally {
      setIsSaving(false)
    }
  }, [dsfa, dsfaId])

  const handleSubmitForReview = async () => {
    // Implementation would call submitDSFAForReview
    alert('Zur Pruefung einreichen - Coming soon')
  }

  const handleApprove = async (opinion: string) => {
    // Implementation would call approveDSFA
    alert('Genehmigen - Coming soon')
  }

  const handleReject = async (reason: string) => {
    // Implementation would call approveDSFA with approved: false
    alert('Ablehnen - Coming soon')
  }

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <svg className="animate-spin w-8 h-8 text-purple-600" 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>
      </div>
    )
  }

  if (!dsfa) {
    return (
      <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
        <div className="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center mb-4">
          <svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </div>
        <h3 className="text-lg font-semibold text-gray-900">DSFA nicht gefunden</h3>
        <p className="mt-2 text-gray-500">
          Die angeforderte DSFA existiert nicht oder wurde geloescht.
        </p>
        <Link
          href="/sdk/dsfa"
          className="mt-4 inline-flex items-center gap-2 px-4 py-2 text-purple-600 hover:bg-purple-50 rounded-lg 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="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Zurueck zur Uebersicht
        </Link>
      </div>
    )
  }

  const sectionConfig = DSFA_SECTIONS.find(s => s.number === activeSection)
  const statusColors: Record<string, string> = {
    draft: 'bg-gray-100 text-gray-600',
    in_review: 'bg-yellow-100 text-yellow-700',
    approved: 'bg-green-100 text-green-700',
    rejected: 'bg-red-100 text-red-700',
    needs_update: 'bg-orange-100 text-orange-700',
  }

  // Handler for generic DSFA updates (used by new section components)
  const handleGenericUpdate = useCallback(async (data: Record<string, unknown>) => {
    if (!dsfa) return

    setIsSaving(true)
    setSaveMessage(null)

    try {
      const updated = await updateDSFA(dsfaId, data as Partial<DSFA>)
      setDSFA(updated)
      setSaveMessage({ type: 'success', text: 'Abschnitt gespeichert' })
      setTimeout(() => setSaveMessage(null), 3000)
    } catch (error) {
      console.error('Failed to update DSFA:', error)
      setSaveMessage({ type: 'error', text: 'Fehler beim Speichern' })
    } finally {
      setIsSaving(false)
    }
  }, [dsfa, dsfaId])

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Link
            href="/sdk/dsfa"
            className="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg 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="M10 19l-7-7m0 0l7-7m-7 7h18" />
            </svg>
          </Link>
          <div>
            <div className="flex items-center gap-2">
              <span className={`px-2 py-1 text-xs rounded-full ${statusColors[dsfa.status]}`}>
                {DSFA_STATUS_LABELS[dsfa.status]}
              </span>
              <span className={`px-2 py-1 text-xs rounded-full ${
                dsfa.overall_risk_level === 'low' ? 'bg-green-100 text-green-700' :
                dsfa.overall_risk_level === 'medium' ? 'bg-yellow-100 text-yellow-700' :
                dsfa.overall_risk_level === 'high' ? 'bg-orange-100 text-orange-700' :
                'bg-red-100 text-red-700'
              }`}>
                Risiko: {DSFA_RISK_LEVEL_LABELS[dsfa.overall_risk_level]}
              </span>
              {dsfa.assessment_id && (
                <span className="px-2 py-1 text-xs rounded-full bg-purple-100 text-purple-700">
                  UCCA-verknuepft
                </span>
              )}
            </div>
            <h1 className="text-2xl font-bold text-gray-900 mt-1">{dsfa.name}</h1>
            {dsfa.description && (
              <p className="text-sm text-gray-500 mt-1">{dsfa.description}</p>
            )}
          </div>
        </div>

        {/* Save Message */}
        {saveMessage && (
          <div className={`px-4 py-2 rounded-lg text-sm ${
            saveMessage.type === 'success'
              ? 'bg-green-100 text-green-700'
              : 'bg-red-100 text-red-700'
          }`}>
            {saveMessage.text}
          </div>
        )}
      </div>

      {/* Main Content: Sidebar + Content Layout */}
      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Left Column - Sidebar (1/4) */}
        <div className="lg:col-span-1">
          <DSFASidebar
            dsfa={dsfa}
            activeSection={activeSection}
            onSectionChange={setActiveSection}
          />
        </div>

        {/* Right Column - Content (3/4) */}
        <div className="lg:col-span-3 space-y-6">
          {/* Section Content Card */}
          <div className="bg-white rounded-xl border border-gray-200">
            {/* Section Header */}
            {sectionConfig && (
              <div className="p-4 bg-gray-50 border-b border-gray-200 rounded-t-xl">
                <div className="flex items-start justify-between">
                  <div>
                    <h2 className="text-lg font-semibold text-gray-900">
                      {sectionConfig.number}. {sectionConfig.titleDE}
                    </h2>
                    <p className="text-sm text-gray-500 mt-1">{sectionConfig.description}</p>
                  </div>
                  <span className="px-2 py-1 bg-blue-50 text-blue-600 rounded text-xs">
                    {sectionConfig.gdprRef}
                  </span>
                </div>
              </div>
            )}

            {/* Section Content */}
            <div className="p-6">
              {/* Section 0: Threshold Analysis (NEW) */}
              {activeSection === 0 && (
                <ThresholdAnalysisSection
                  dsfa={dsfa}
                  onUpdate={handleGenericUpdate}
                  isSubmitting={isSaving}
                />
              )}

              {/* Sections 1-4: Existing */}
              {activeSection === 1 && (
                <Section1Editor
                  dsfa={dsfa}
                  onUpdate={(data) => handleSectionUpdate(1, data)}
                  isSubmitting={isSaving}
                />
              )}
              {activeSection === 2 && (
                <Section2Editor
                  dsfa={dsfa}
                  onUpdate={(data) => handleSectionUpdate(2, data)}
                  isSubmitting={isSaving}
                />
              )}
              {activeSection === 3 && (
                <Section3Editor
                  dsfa={dsfa}
                  onUpdate={(data) => handleSectionUpdate(3, data)}
                  isSubmitting={isSaving}
                />
              )}
              {activeSection === 4 && (
                <Section4Editor
                  dsfa={dsfa}
                  onUpdate={(data) => handleSectionUpdate(4, data)}
                  isSubmitting={isSaving}
                />
              )}

              {/* Section 5: Stakeholder Consultation (NEW) */}
              {activeSection === 5 && (
                <StakeholderConsultationSection
                  dsfa={dsfa}
                  onUpdate={handleGenericUpdate}
                  isSubmitting={isSaving}
                />
              )}

              {/* Section 6: DPO & Authority Consultation */}
              {activeSection === 6 && (
                <div className="space-y-6">
                  {/* Original Section 5 Editor (DPO Opinion) */}
                  <Section5Editor
                    dsfa={dsfa}
                    onUpdate={(data) => handleSectionUpdate(5, data)}
                    isSubmitting={isSaving}
                  />

                  {/* Art. 36 Warning (NEW) */}
                  <div className="border-t border-gray-200 pt-6">
                    <h3 className="text-lg font-semibold text-gray-900 mb-4">
                      Art. 36 Behoerdenkonsultation
                    </h3>
                    <Art36Warning
                      dsfa={dsfa}
                      onUpdate={handleGenericUpdate}
                      isSubmitting={isSaving}
                    />
                  </div>
                </div>
              )}

              {/* Section 7: Review & Maintenance (NEW) */}
              {activeSection === 7 && (
                <ReviewScheduleSection
                  dsfa={dsfa}
                  onUpdate={handleGenericUpdate}
                  isSubmitting={isSaving}
                />
              )}
            </div>
          </div>

          {/* Bottom Actions Row */}
          <div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 p-4">
            {/* Navigation */}
            <div className="flex items-center gap-2">
              {activeSection > 0 && (
                <button
                  onClick={() => setActiveSection(activeSection - 1)}
                  className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg 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="M15 19l-7-7 7-7" />
                  </svg>
                  Zurueck
                </button>
              )}
              {activeSection < 7 && (
                <button
                  onClick={() => setActiveSection(activeSection + 1)}
                  className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors"
                >
                  Weiter
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                  </svg>
                </button>
              )}
            </div>

            {/* Quick Info */}
            <div className="flex items-center gap-4 text-sm text-gray-500">
              <span>Risiken: {(dsfa.risks || []).length}</span>
              <span>Massnahmen: {(dsfa.mitigations || []).length}</span>
              <span>Version: {dsfa.version || 1}</span>
            </div>

            {/* Export */}
            <div className="flex items-center gap-2">
              <button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                <svg className="w-5 h-5 text-red-500" fill="currentColor" viewBox="0 0 24 24">
                  <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/>
                  <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
                </svg>
                PDF
              </button>
              <button className="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors">
                <svg className="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                </svg>
                JSON
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}