'use client'

import React, { useState, useEffect, useCallback } from 'react'
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
import TOMControlPanel from '@/components/sdk/obligations/TOMControlPanel'
import GapAnalysisView from '@/components/sdk/obligations/GapAnalysisView'
import { useSDK } from '@/lib/sdk'
import { buildAssessmentPayload } from '@/lib/sdk/scope-to-facts'
import type { ApplicableRegulation } from '@/lib/sdk/compliance-scope-types'

// =============================================================================
// Types
// =============================================================================

interface Obligation {
  id: string
  title: string
  description: string
  source: string
  source_article: string
  deadline: string | null
  status: 'pending' | 'in-progress' | 'completed' | 'overdue'
  priority: 'critical' | 'high' | 'medium' | 'low'
  responsible: string
  linked_systems: string[]
  assessment_id?: string
  rule_code?: string
  notes?: string
  created_at?: string
  updated_at?: string
}

interface ObligationStats {
  pending: number
  in_progress: number
  overdue: number
  completed: number
  total: number
  critical: number
  high: number
}

interface ObligationFormData {
  title: string
  description: string
  source: string
  source_article: string
  deadline: string
  status: string
  priority: string
  responsible: string
  linked_systems: string
  notes: string
}

const EMPTY_FORM: ObligationFormData = {
  title: '',
  description: '',
  source: 'DSGVO',
  source_article: '',
  deadline: '',
  status: 'pending',
  priority: 'medium',
  responsible: '',
  linked_systems: '',
  notes: '',
}

const API = '/api/sdk/v1/compliance/obligations'

// =============================================================================
// Status helpers
// =============================================================================

const PRIORITY_COLORS: Record<string, string> = {
  critical: 'bg-red-100 text-red-700',
  high:     'bg-orange-100 text-orange-700',
  medium:   'bg-yellow-100 text-yellow-700',
  low:      'bg-green-100 text-green-700',
}

const PRIORITY_LABELS: Record<string, string> = {
  critical: 'Kritisch',
  high:     'Hoch',
  medium:   'Mittel',
  low:      'Niedrig',
}

const STATUS_COLORS: Record<string, string> = {
  pending:      'bg-gray-100 text-gray-600',
  'in-progress':'bg-blue-100 text-blue-700',
  completed:    'bg-green-100 text-green-700',
  overdue:      'bg-red-100 text-red-700',
}

const STATUS_LABELS: Record<string, string> = {
  pending:      'Ausstehend',
  'in-progress':'In Bearbeitung',
  completed:    'Abgeschlossen',
  overdue:      'Ueberfaellig',
}

const STATUS_NEXT: Record<string, string> = {
  pending:      'in-progress',
  'in-progress':'completed',
  completed:    'pending',
  overdue:      'in-progress',
}

// =============================================================================
// Create/Edit Modal
// =============================================================================

function ObligationModal({
  initial,
  onClose,
  onSave,
}: {
  initial?: Partial<ObligationFormData>
  onClose: () => void
  onSave: (data: ObligationFormData) => Promise<void>
}) {
  const [form, setForm] = useState<ObligationFormData>({ ...EMPTY_FORM, ...initial })
  const [saving, setSaving] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const update = (field: keyof ObligationFormData, value: string) =>
    setForm(prev => ({ ...prev, [field]: value }))

  const handleSave = async () => {
    if (!form.title.trim()) { setError('Titel ist erforderlich'); return }
    setSaving(true)
    setError(null)
    try {
      await onSave(form)
      onClose()
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Fehler beim Speichern')
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
        <div className="flex items-center justify-between p-6 border-b">
          <h2 className="text-lg font-semibold text-gray-900">
            {initial?.title ? 'Pflicht bearbeiten' : 'Neue Pflicht erstellen'}
          </h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">✕</button>
        </div>
        <div className="p-6 space-y-4">
          {error && <div className="text-red-600 text-sm bg-red-50 rounded-lg p-3">{error}</div>}

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Titel *</label>
            <input
              type="text"
              value={form.title}
              onChange={e => update('title', e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
              placeholder="z.B. Datenschutz-Folgenabschaetzung durchfuehren"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Beschreibung</label>
            <textarea
              value={form.description}
              onChange={e => update('description', e.target.value)}
              rows={3}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
              placeholder="Detaillierte Beschreibung der Anforderung..."
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Rechtsquelle</label>
              <select
                value={form.source}
                onChange={e => update('source', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
              >
                {['DSGVO', 'AI Act', 'NIS2', 'BDSG', 'TTDSG', 'DSA', 'Data Act', 'DORA', 'EU-Maschinen', 'Sonstig'].map(s => (
                  <option key={s}>{s}</option>
                ))}
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Artikel/Paragraph</label>
              <input
                type="text"
                value={form.source_article}
                onChange={e => update('source_article', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                placeholder="z.B. Art. 35"
              />
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Prioritaet</label>
              <select
                value={form.priority}
                onChange={e => update('priority', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
              >
                <option value="critical">Kritisch</option>
                <option value="high">Hoch</option>
                <option value="medium">Mittel</option>
                <option value="low">Niedrig</option>
              </select>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
              <select
                value={form.status}
                onChange={e => update('status', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
              >
                <option value="pending">Ausstehend</option>
                <option value="in-progress">In Bearbeitung</option>
                <option value="completed">Abgeschlossen</option>
                <option value="overdue">Ueberfaellig</option>
              </select>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Faellig bis</label>
              <input
                type="date"
                value={form.deadline}
                onChange={e => update('deadline', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
              />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700 mb-1">Verantwortlich</label>
              <input
                type="text"
                value={form.responsible}
                onChange={e => update('responsible', e.target.value)}
                className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                placeholder="z.B. DSB, IT, Compliance"
              />
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Betroffene Systeme</label>
            <input
              type="text"
              value={form.linked_systems}
              onChange={e => update('linked_systems', e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
              placeholder="Kommagetrennt: CRM, ERP, Website"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Notizen</label>
            <textarea
              value={form.notes}
              onChange={e => update('notes', e.target.value)}
              rows={2}
              className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
              placeholder="Interne Hinweise..."
            />
          </div>
        </div>
        <div className="flex justify-end gap-3 p-6 border-t">
          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg">Abbrechen</button>
          <button
            onClick={handleSave}
            disabled={saving}
            className="px-5 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
          >
            {saving ? 'Speichern...' : 'Speichern'}
          </button>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// Detail Panel
// =============================================================================

function ObligationDetail({ obligation, onClose, onStatusChange, onEdit, onDelete }: {
  obligation: Obligation
  onClose: () => void
  onStatusChange: (id: string, status: string) => Promise<void>
  onEdit: () => void
  onDelete: (id: string) => Promise<void>
}) {
  const [saving, setSaving] = useState(false)

  const handleStatusCycle = async () => {
    setSaving(true)
    await onStatusChange(obligation.id, STATUS_NEXT[obligation.status])
    setSaving(false)
  }

  const handleDelete = async () => {
    if (!confirm('Pflicht wirklich loeschen?')) return
    await onDelete(obligation.id)
    onClose()
  }

  const daysUntil = obligation.deadline
    ? Math.ceil((new Date(obligation.deadline).getTime() - Date.now()) / 86400000)
    : null

  return (
    <div className="fixed inset-0 bg-black/40 z-50 flex items-end md:items-center justify-center p-4" onClick={e => e.target === e.currentTarget && onClose()}>
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg max-h-[85vh] overflow-y-auto">
        <div className="flex items-start justify-between p-6 border-b gap-4">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1 flex-wrap">
              <span className={`px-2 py-0.5 text-xs rounded-full ${PRIORITY_COLORS[obligation.priority]}`}>{PRIORITY_LABELS[obligation.priority]}</span>
              <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[obligation.status]}`}>{STATUS_LABELS[obligation.status]}</span>
              {obligation.source && (
                <span className="px-2 py-0.5 text-xs bg-purple-50 text-purple-700 rounded">{obligation.source} {obligation.source_article}</span>
              )}
            </div>
            <h2 className="text-base font-semibold text-gray-900">{obligation.title}</h2>
          </div>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 flex-shrink-0">✕</button>
        </div>

        <div className="p-6 space-y-4 text-sm">
          {obligation.description && (
            <p className="text-gray-700 whitespace-pre-wrap">{obligation.description}</p>
          )}

          <div className="grid grid-cols-2 gap-3">
            <div>
              <span className="text-gray-500">Verantwortlich</span>
              <p className="font-medium text-gray-900">{obligation.responsible || '—'}</p>
            </div>
            <div>
              <span className="text-gray-500">Frist</span>
              <p className={`font-medium ${daysUntil !== null && daysUntil < 0 ? 'text-red-600' : 'text-gray-900'}`}>
                {obligation.deadline
                  ? `${new Date(obligation.deadline).toLocaleDateString('de-DE')}${daysUntil !== null ? ` (${daysUntil < 0 ? `${Math.abs(daysUntil)}d ueberfaellig` : `${daysUntil}d`})` : ''}`
                  : '—'}
              </p>
            </div>
          </div>

          {obligation.linked_systems?.length > 0 && (
            <div>
              <span className="text-gray-500">Betroffene Systeme</span>
              <div className="flex flex-wrap gap-1 mt-1">
                {obligation.linked_systems.map(s => (
                  <span key={s} className="px-2 py-0.5 text-xs bg-gray-100 text-gray-600 rounded">{s}</span>
                ))}
              </div>
            </div>
          )}

          {obligation.notes && (
            <div>
              <span className="text-gray-500">Notizen</span>
              <p className="text-gray-700 mt-1">{obligation.notes}</p>
            </div>
          )}

          {obligation.rule_code && (
            <div className="bg-purple-50 rounded-lg p-3">
              <span className="text-xs text-purple-600">Aus UCCA Assessment abgeleitet · Regel {obligation.rule_code}</span>
            </div>
          )}

          {obligation.created_at && (
            <p className="text-xs text-gray-400">
              Erstellt: {new Date(obligation.created_at).toLocaleDateString('de-DE')}
              {obligation.updated_at && obligation.updated_at !== obligation.created_at
                ? ` · Geaendert: ${new Date(obligation.updated_at).toLocaleDateString('de-DE')}`
                : ''}
            </p>
          )}
        </div>

        <div className="flex items-center justify-between gap-2 p-6 border-t flex-wrap">
          <div className="flex gap-2">
            <button
              onClick={handleDelete}
              className="px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 rounded-lg border border-red-200"
            >
              Loeschen
            </button>
          </div>
          <div className="flex gap-2">
            <button onClick={onEdit} className="px-3 py-1.5 text-xs text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg">
              Bearbeiten
            </button>
            {obligation.status !== 'completed' && (
              <button
                onClick={handleStatusCycle}
                disabled={saving}
                className="px-4 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
              >
                {saving ? '...' : STATUS_NEXT[obligation.status] === 'completed' ? 'Als erledigt markieren' : `→ ${STATUS_LABELS[STATUS_NEXT[obligation.status]]}`}
              </button>
            )}
          </div>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// Obligation Card
// =============================================================================

function ObligationCard({
  obligation,
  onStatusChange,
  onDetails,
}: {
  obligation: Obligation
  onStatusChange: (id: string, status: string) => Promise<void>
  onDetails: () => void
}) {
  const [saving, setSaving] = useState(false)
  const [showTOM, setShowTOM] = useState(false)

  const daysUntil = obligation.deadline
    ? Math.ceil((new Date(obligation.deadline).getTime() - Date.now()) / 86400000)
    : null

  const handleMark = async (e: React.MouseEvent) => {
    e.stopPropagation()
    setSaving(true)
    await onStatusChange(obligation.id, STATUS_NEXT[obligation.status])
    setSaving(false)
  }

  return (
    <div
      className={`bg-white rounded-xl border-2 p-5 cursor-pointer hover:shadow-md transition-all ${
        obligation.status === 'overdue' ? 'border-red-200' :
        obligation.status === 'completed' ? 'border-green-200' :
        obligation.status === 'in-progress' ? 'border-blue-200' : 'border-gray-200'
      }`}
      onClick={onDetails}
    >
      <div className="flex items-start justify-between gap-4">
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1.5 flex-wrap">
            <span className={`px-2 py-0.5 text-xs rounded-full ${PRIORITY_COLORS[obligation.priority]}`}>
              {PRIORITY_LABELS[obligation.priority]}
            </span>
            <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_COLORS[obligation.status]}`}>
              {STATUS_LABELS[obligation.status]}
            </span>
            {obligation.source_article && (
              <span className="px-2 py-0.5 text-xs bg-purple-50 text-purple-700 rounded">
                {obligation.source} {obligation.source_article}
              </span>
            )}
          </div>
          <h3 className="font-semibold text-gray-900 text-sm">{obligation.title}</h3>
          {obligation.description && (
            <p className="text-xs text-gray-500 mt-1 line-clamp-2">{obligation.description}</p>
          )}
        </div>
      </div>

      <div className="mt-3 flex items-center justify-between text-xs text-gray-500">
        <div className="flex items-center gap-3">
          {obligation.responsible && <span>👤 {obligation.responsible}</span>}
          {obligation.deadline && (
            <span className={daysUntil !== null && daysUntil < 0 ? 'text-red-600 font-medium' : ''}>
              📅 {new Date(obligation.deadline).toLocaleDateString('de-DE')}
              {daysUntil !== null && ` (${daysUntil < 0 ? `${Math.abs(daysUntil)}d überfällig` : `${daysUntil}d`})`}
            </span>
          )}
        </div>
        <div className="flex items-center gap-2" onClick={e => e.stopPropagation()}>
          <button
            onClick={(e) => { e.stopPropagation(); setShowTOM(v => !v) }}
            className="px-2 py-1 text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
            title="TOM Controls anzeigen"
          >
            TOM
          </button>
          <button
            onClick={onDetails}
            className="text-purple-600 hover:text-purple-700 font-medium"
          >
            Details
          </button>
          {obligation.status !== 'completed' && (
            <button
              onClick={handleMark}
              disabled={saving}
              className="px-3 py-1 bg-purple-50 text-purple-700 rounded-lg hover:bg-purple-100 transition-colors disabled:opacity-50"
            >
              {saving ? '...' : STATUS_NEXT[obligation.status] === 'completed' ? 'Erledigt ✓' : `→ ${STATUS_LABELS[STATUS_NEXT[obligation.status]]}`}
            </button>
          )}
        </div>
      </div>

      {showTOM && (
        <div className="mt-3" onClick={e => e.stopPropagation()}>
          <TOMControlPanel obligationId={obligation.id} onClose={() => setShowTOM(false)} />
        </div>
      )}
    </div>
  )
}

// =============================================================================
// Main Page
// =============================================================================

function mapPriority(p: string): 'critical' | 'high' | 'medium' | 'low' {
  const map: Record<string, 'critical' | 'high' | 'medium' | 'low'> = {
    kritisch: 'critical', hoch: 'high', mittel: 'medium', niedrig: 'low',
    critical: 'critical', high: 'high', medium: 'medium', low: 'low',
  }
  return map[p?.toLowerCase()] || 'medium'
}

const REGULATION_CHIPS = [
  { key: 'all', label: 'Alle' },
  { key: 'DSGVO', label: 'DSGVO' },
  { key: 'AI Act', label: 'AI Act' },
  { key: 'NIS2', label: 'NIS2' },
  { key: 'BDSG', label: 'BDSG' },
  { key: 'TTDSG', label: 'TTDSG' },
  { key: 'DSA', label: 'DSA' },
  { key: 'Data Act', label: 'Data Act' },
  { key: 'DORA', label: 'DORA' },
  { key: 'EU-Maschinen', label: 'EU-Maschinen' },
]

const UCCA_API = '/api/sdk/v1/ucca/obligations'

export default function ObligationsPage() {
  const { state: sdkState } = useSDK()
  const [obligations, setObligations] = useState<Obligation[]>([])
  const [stats, setStats] = useState<ObligationStats | null>(null)
  const [filter, setFilter] = useState('all')
  const [regulationFilter, setRegulationFilter] = useState('all')
  const [searchQuery, setSearchQuery] = useState('')
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [showModal, setShowModal] = useState(false)
  const [editObligation, setEditObligation] = useState<Obligation | null>(null)
  const [detailObligation, setDetailObligation] = useState<Obligation | null>(null)
  const [showGapAnalysis, setShowGapAnalysis] = useState(false)
  const [profiling, setProfiling] = useState(false)
  const [applicableRegs, setApplicableRegs] = useState<ApplicableRegulation[]>([])

  const loadData = useCallback(async () => {
    setLoading(true)
    setError(null)
    try {
      const params = new URLSearchParams({ limit: '200' })
      if (filter !== 'all' && ['pending', 'in-progress', 'completed', 'overdue'].includes(filter)) {
        params.set('status', filter)
      }
      if (filter === 'critical' || filter === 'high') {
        params.set('priority', filter)
      }
      if (searchQuery) params.set('search', searchQuery)

      const [listRes, statsRes] = await Promise.all([
        fetch(`${API}?${params}`),
        fetch(`${API}/stats`),
      ])

      if (listRes.ok) {
        const data = await listRes.json()
        setObligations(data.obligations || [])
      }
      if (statsRes.ok) {
        setStats(await statsRes.json())
      }
    } catch {
      setError('Verbindung zum Backend fehlgeschlagen')
    } finally {
      setLoading(false)
    }
  }, [filter, searchQuery])

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

  const handleCreate = async (form: ObligationFormData) => {
    const res = await fetch(API, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: form.title,
        description: form.description || null,
        source: form.source,
        source_article: form.source_article || null,
        deadline: form.deadline || null,
        status: form.status,
        priority: form.priority,
        responsible: form.responsible || null,
        linked_systems: form.linked_systems ? form.linked_systems.split(',').map(s => s.trim()).filter(Boolean) : [],
        notes: form.notes || null,
      }),
    })
    if (!res.ok) throw new Error('Erstellen fehlgeschlagen')
    await loadData()
  }

  const handleUpdate = async (id: string, form: ObligationFormData) => {
    const res = await fetch(`${API}/${id}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        title: form.title,
        description: form.description || null,
        source: form.source,
        source_article: form.source_article || null,
        deadline: form.deadline || null,
        status: form.status,
        priority: form.priority,
        responsible: form.responsible || null,
        linked_systems: form.linked_systems ? form.linked_systems.split(',').map(s => s.trim()).filter(Boolean) : [],
        notes: form.notes || null,
      }),
    })
    if (!res.ok) throw new Error('Aktualisierung fehlgeschlagen')
    await loadData()
    // Refresh detail if open
    if (detailObligation?.id === id) {
      const updated = await fetch(`${API}/${id}`)
      if (updated.ok) setDetailObligation(await updated.json())
    }
  }

  const handleStatusChange = async (id: string, newStatus: string) => {
    const res = await fetch(`${API}/${id}/status`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status: newStatus }),
    })
    if (!res.ok) return
    const updated = await res.json()
    setObligations(prev => prev.map(o => o.id === id ? updated : o))
    if (detailObligation?.id === id) setDetailObligation(updated)
    // Refresh stats
    fetch(`${API}/stats`).then(r => r.json()).then(setStats).catch(() => {})
  }

  const handleDelete = async (id: string) => {
    const res = await fetch(`${API}/${id}`, { method: 'DELETE' })
    if (!res.ok && res.status !== 204) throw new Error('Loeschen fehlgeschlagen')
    setObligations(prev => prev.filter(o => o.id !== id))
    setDetailObligation(null)
    fetch(`${API}/stats`).then(r => r.json()).then(setStats).catch(() => {})
  }

  const handleAutoProfiling = async () => {
    setProfiling(true)
    setError(null)
    try {
      // Build payload from real CompanyProfile + Scope data
      const profile = sdkState.companyProfile
      const scopeState = sdkState.complianceScope
      const scopeAnswers = scopeState?.answers || []
      const scopeDecision = scopeState?.decision || null

      let payload: Record<string, unknown>
      if (profile) {
        payload = buildAssessmentPayload(profile, scopeAnswers, scopeDecision) as unknown as Record<string, unknown>
      } else {
        // Fallback: Minimaldaten wenn kein Profil vorhanden
        payload = {
          employee_count: 50,
          industry: 'technology',
          country: 'DE',
          processes_personal_data: true,
          is_controller: true,
          uses_processors: true,
          determined_level: scopeDecision?.determinedLevel || 'L2',
        }
      }

      const res = await fetch(`${UCCA_API}/assess-from-scope`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      })
      if (!res.ok) throw new Error(`HTTP ${res.status}`)
      const data = await res.json()

      // Store applicable regulations for the info box
      const regs: ApplicableRegulation[] = data.overview?.applicable_regulations || data.applicable_regulations || []
      setApplicableRegs(regs)

      // Extract obligations from response (can be nested under overview)
      const rawObls = data.overview?.obligations || data.obligations || []
      if (rawObls.length > 0) {
        const autoObls: Obligation[] = rawObls.map((o: Record<string, unknown>) => ({
          id: o.id as string,
          title: o.title as string,
          description: (o.description as string) || '',
          source: (o.regulation_id as string || '').toUpperCase(),
          source_article: '',
          deadline: null,
          status: 'pending' as const,
          priority: mapPriority(o.priority as string),
          responsible: (o.responsible as string) || '',
          linked_systems: [],
          rule_code: 'auto-profiled',
        }))
        setObligations(prev => {
          const existingIds = new Set(prev.map(p => p.id))
          const newOnes = autoObls.filter(a => !existingIds.has(a.id))
          return [...prev, ...newOnes]
        })
      }
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Auto-Profiling fehlgeschlagen')
    } finally {
      setProfiling(false)
    }
  }

  const stepInfo = STEP_EXPLANATIONS['obligations']

  const filteredObligations = obligations.filter(o => {
    // Status/priority filter
    if (filter === 'ai') {
      if (!o.source.toLowerCase().includes('ai')) return false
    }
    // Regulation filter
    if (regulationFilter !== 'all') {
      const src = o.source?.toLowerCase() || ''
      const key = regulationFilter.toLowerCase()
      if (!src.includes(key)) return false
    }
    return true
  })

  return (
    <div className="space-y-6">
      {/* Modals */}
      {(showModal || editObligation) && !detailObligation && (
        <ObligationModal
          initial={editObligation ? {
            title: editObligation.title,
            description: editObligation.description,
            source: editObligation.source,
            source_article: editObligation.source_article,
            deadline: editObligation.deadline ? editObligation.deadline.slice(0, 10) : '',
            status: editObligation.status,
            priority: editObligation.priority,
            responsible: editObligation.responsible,
            linked_systems: editObligation.linked_systems?.join(', ') || '',
            notes: editObligation.notes || '',
          } : undefined}
          onClose={() => { setShowModal(false); setEditObligation(null) }}
          onSave={async (form) => {
            if (editObligation) {
              await handleUpdate(editObligation.id, form)
              setEditObligation(null)
            } else {
              await handleCreate(form)
              setShowModal(false)
            }
          }}
        />
      )}

      {detailObligation && (
        <ObligationDetail
          obligation={detailObligation}
          onClose={() => setDetailObligation(null)}
          onStatusChange={handleStatusChange}
          onDelete={handleDelete}
          onEdit={() => {
            setEditObligation(detailObligation)
            setDetailObligation(null)
          }}
        />
      )}

      {/* Header */}
      <StepHeader
        stepId="obligations"
        title={stepInfo?.title || 'Pflichten-Management'}
        description={stepInfo?.description || 'DSGVO & AI-Act Compliance-Pflichten verwalten'}
        explanation={stepInfo?.explanation || ''}
        tips={stepInfo?.tips || []}
      >
        <div className="flex items-center gap-2">
          <button
            onClick={handleAutoProfiling}
            disabled={profiling}
            className="flex items-center gap-2 px-4 py-2 bg-white border border-purple-300 text-purple-700 rounded-lg hover:bg-purple-50 transition-colors text-sm disabled:opacity-50"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
            {profiling ? 'Profiling...' : 'Auto-Profiling'}
          </button>
          <button
            onClick={() => setShowGapAnalysis(v => !v)}
            className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors text-sm ${
              showGapAnalysis ? 'bg-purple-100 text-purple-700' : 'bg-white border border-gray-300 text-gray-700 hover:bg-gray-50'
            }`}
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
            </svg>
            Gap-Analyse
          </button>
          <button
            onClick={() => setShowModal(true)}
            className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors text-sm"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
            </svg>
            Pflicht hinzufuegen
          </button>
        </div>
      </StepHeader>

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

      {/* Applicable Regulations Info */}
      {applicableRegs.length > 0 && (
        <div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
          <h3 className="text-sm font-semibold text-blue-900 mb-2">Anwendbare Regulierungen (aus Auto-Profiling)</h3>
          <div className="flex flex-wrap gap-2">
            {applicableRegs.map(reg => (
              <span
                key={reg.id}
                className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium bg-white border border-blue-300 text-blue-800"
              >
                <svg className="w-3.5 h-3.5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                {reg.name}
                {reg.classification && <span className="text-blue-500">({reg.classification})</span>}
                <span className="text-blue-400">{reg.obligation_count} Pflichten</span>
              </span>
            ))}
          </div>
        </div>
      )}

      {/* No Profile Warning */}
      {!sdkState.companyProfile && (
        <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3 text-sm text-yellow-700">
          Kein Unternehmensprofil vorhanden. Auto-Profiling verwendet Beispieldaten.{' '}
          <a href="/sdk/company-profile" className="underline font-medium">Profil anlegen →</a>
        </div>
      )}

      {/* Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {[
          { label: 'Ausstehend',    value: stats?.pending     ?? 0, color: 'text-gray-600',  border: 'border-gray-200' },
          { label: 'In Bearbeitung',value: stats?.in_progress ?? 0, color: 'text-blue-600',  border: 'border-blue-200' },
          { label: 'Ueberfaellig',  value: stats?.overdue     ?? 0, color: 'text-red-600',   border: 'border-red-200'  },
          { label: 'Abgeschlossen', value: stats?.completed   ?? 0, color: 'text-green-600', border: 'border-green-200'},
        ].map(s => (
          <div key={s.label} className={`bg-white rounded-xl border ${s.border} p-5`}>
            <div className={`text-xs ${s.color}`}>{s.label}</div>
            <div className={`text-3xl font-bold mt-1 ${s.color}`}>{s.value}</div>
          </div>
        ))}
      </div>

      {/* Overdue alert */}
      {(stats?.overdue ?? 0) > 0 && (
        <div className="bg-red-50 border border-red-200 rounded-xl p-4 flex items-center gap-3">
          <div className="w-9 h-9 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
            <svg className="w-4 h-4 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
          </div>
          <div>
            <h4 className="font-medium text-red-800 text-sm">Achtung: {stats?.overdue} ueberfaellige Pflicht(en)</h4>
            <p className="text-xs text-red-600">Diese Pflichten erfordern sofortige Aufmerksamkeit.</p>
          </div>
        </div>
      )}

      {/* Gap Analysis View */}
      {showGapAnalysis && (
        <GapAnalysisView />
      )}

      {/* Regulation Filter Chips */}
      <div className="flex items-center gap-2 flex-wrap">
        <span className="text-xs text-gray-500 mr-1">Regulation:</span>
        {REGULATION_CHIPS.map(r => (
          <button
            key={r.key}
            onClick={() => setRegulationFilter(r.key)}
            className={`px-3 py-1 text-xs rounded-full transition-colors ${
              regulationFilter === r.key ? 'bg-purple-600 text-white' : 'bg-purple-50 text-purple-700 hover:bg-purple-100'
            }`}
          >
            {r.label}
          </button>
        ))}
      </div>

      {/* Search + Status Filter */}
      <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
        <input
          type="text"
          value={searchQuery}
          onChange={e => setSearchQuery(e.target.value)}
          placeholder="Suche nach Pflichten..."
          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-purple-500"
        />
        <div className="flex items-center gap-2 flex-wrap">
          {['all', 'overdue', 'pending', 'in-progress', 'completed', 'critical'].map(f => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className={`px-3 py-1.5 text-xs rounded-full transition-colors ${
                filter === f ? 'bg-purple-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
              }`}
            >
              {f === 'all' ? 'Alle' : f === 'in-progress' ? 'In Bearbeitung' : f === 'overdue' ? 'Ueberfaellig' : f === 'pending' ? 'Ausstehend' : f === 'completed' ? 'Abgeschlossen' : 'Kritisch'}
            </button>
          ))}
        </div>
      </div>

      {/* Loading */}
      {loading && <div className="text-center py-8 text-gray-500 text-sm">Lade Pflichten...</div>}

      {/* Obligations list */}
      {!loading && (
        <div className="space-y-3">
          {filteredObligations.map(o => (
            <ObligationCard
              key={o.id}
              obligation={o}
              onStatusChange={handleStatusChange}
              onDetails={() => setDetailObligation(o)}
            />
          ))}

          {filteredObligations.length === 0 && (
            <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
              <div className="w-14 h-14 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
                <svg className="w-7 h-7 text-gray-400" 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-base font-semibold text-gray-900">Keine Pflichten gefunden</h3>
              <p className="mt-2 text-sm text-gray-500">
                Klicken Sie auf "Pflicht hinzufuegen", um die erste Compliance-Pflicht zu erfassen.
              </p>
              <button
                onClick={() => setShowModal(true)}
                className="mt-4 px-5 py-2 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700"
              >
                Erste Pflicht erstellen
              </button>
            </div>
          )}
        </div>
      )}
    </div>
  )
}