breakpilot-compliance/admin-compliance/app/sdk/control-library/components/ControlDetail.tsx

'use client'

import { useState, useEffect, useCallback } from 'react'
import {
  ArrowLeft, ExternalLink, BookOpen, Scale, FileText,
  Eye, CheckCircle2, Trash2, Pencil, Clock,
  ChevronLeft, SkipForward, GitMerge, Search, Landmark,
} from 'lucide-react'
import {
  CanonicalControl, EFFORT_LABELS, BACKEND_URL,
  SeverityBadge, StateBadge, LicenseRuleBadge, VerificationMethodBadge, CategoryBadge, EvidenceTypeBadge, TargetAudienceBadge,
  ObligationTypeBadge, GenerationStrategyBadge, isEigenentwicklung,
  ExtractionMethodBadge, RegulationCountBadge,
  VERIFICATION_METHODS, CATEGORY_OPTIONS, EVIDENCE_TYPE_OPTIONS,
  ObligationInfo, DocumentReference, MergedDuplicate, RegulationSummary,
} from './helpers'

interface SimilarControl {
  control_id: string
  title: string
  severity: string
  release_state: string
  tags: string[]
  license_rule: number | null
  verification_method: string | null
  category: string | null
  similarity: number
}

interface ParentLink {
  parent_control_id: string
  parent_title: string
  link_type: string
  confidence: number
  source_regulation: string | null
  source_article: string | null
  parent_citation: Record<string, string> | null
  obligation: {
    text: string
    action: string
    object: string
    normative_strength: string
  } | null
}

interface TraceabilityData {
  control_id: string
  title: string
  is_atomic: boolean
  parent_links: ParentLink[]
  children: Array<{
    control_id: string
    title: string
    category: string
    severity: string
    decomposition_method: string
  }>
  source_count: number
  // Extended provenance fields
  obligations?: ObligationInfo[]
  obligation_count?: number
  document_references?: DocumentReference[]
  merged_duplicates?: MergedDuplicate[]
  merged_duplicates_count?: number
  regulations_summary?: RegulationSummary[]
}

interface V1Match {
  matched_control_id: string
  matched_title: string
  matched_objective: string
  matched_severity: string
  matched_category: string
  matched_source: string | null
  matched_article: string | null
  matched_source_citation: Record<string, string> | null
  similarity_score: number
  match_rank: number
  match_method: string
}

interface ControlDetailProps {
  ctrl: CanonicalControl
  onBack: () => void
  onEdit: () => void
  onDelete: (controlId: string) => void
  onReview: (controlId: string, action: string) => void
  onRefresh?: () => void
  onNavigateToControl?: (controlId: string) => void
  onCompare?: (ctrl: CanonicalControl, matches: V1Match[]) => void
  // Review mode navigation
  reviewMode?: boolean
  reviewIndex?: number
  reviewTotal?: number
  onReviewPrev?: () => void
  onReviewNext?: () => void
}

export function ControlDetail({
  ctrl,
  onBack,
  onEdit,
  onDelete,
  onReview,
  onRefresh,
  onNavigateToControl,
  onCompare,
  reviewMode,
  reviewIndex = 0,
  reviewTotal = 0,
  onReviewPrev,
  onReviewNext,
}: ControlDetailProps) {
  const [similarControls, setSimilarControls] = useState<SimilarControl[]>([])
  const [loadingSimilar, setLoadingSimilar] = useState(false)
  const [selectedDuplicates, setSelectedDuplicates] = useState<Set<string>>(new Set())
  const [merging, setMerging] = useState(false)
  const [traceability, setTraceability] = useState<TraceabilityData | null>(null)
  const [loadingTrace, setLoadingTrace] = useState(false)
  const [v1Matches, setV1Matches] = useState<V1Match[]>([])
  const [loadingV1, setLoadingV1] = useState(false)
  const eigenentwicklung = isEigenentwicklung(ctrl)

  const loadTraceability = useCallback(async () => {
    setLoadingTrace(true)
    try {
      // Try provenance first (extended data), fall back to traceability
      let res = await fetch(`${BACKEND_URL}?endpoint=provenance&id=${ctrl.control_id}`)
      if (!res.ok) {
        res = await fetch(`${BACKEND_URL}?endpoint=traceability&id=${ctrl.control_id}`)
      }
      if (res.ok) {
        setTraceability(await res.json())
      }
    } catch { /* ignore */ }
    finally { setLoadingTrace(false) }
  }, [ctrl.control_id])

  const loadV1Matches = useCallback(async () => {
    if (!eigenentwicklung) { setV1Matches([]); return }
    setLoadingV1(true)
    try {
      const res = await fetch(`${BACKEND_URL}?endpoint=v1-matches&id=${ctrl.control_id}`)
      if (res.ok) setV1Matches(await res.json())
      else setV1Matches([])
    } catch { setV1Matches([]) }
    finally { setLoadingV1(false) }
  }, [ctrl.control_id, eigenentwicklung])

  useEffect(() => {
    loadSimilarControls()
    loadTraceability()
    loadV1Matches()
    setSelectedDuplicates(new Set())
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ctrl.control_id])

  const loadSimilarControls = async () => {
    setLoadingSimilar(true)
    try {
      const res = await fetch(`${BACKEND_URL}?endpoint=similar&id=${ctrl.control_id}`)
      if (res.ok) {
        setSimilarControls(await res.json())
      }
    } catch { /* ignore */ }
    finally { setLoadingSimilar(false) }
  }

  const toggleDuplicate = (controlId: string) => {
    setSelectedDuplicates(prev => {
      const next = new Set(prev)
      if (next.has(controlId)) next.delete(controlId)
      else next.add(controlId)
      return next
    })
  }

  const handleMergeDuplicates = async () => {
    if (selectedDuplicates.size === 0) return
    if (!confirm(`${selectedDuplicates.size} Controls als Duplikate markieren und Tags/Anchors in ${ctrl.control_id} zusammenfuehren?`)) return

    setMerging(true)
    try {
      // For each duplicate: mark as deprecated
      for (const dupId of selectedDuplicates) {
        await fetch(`${BACKEND_URL}?endpoint=update-control&id=${dupId}`, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ release_state: 'deprecated' }),
        })
      }
      // Refresh to show updated state
      if (onRefresh) onRefresh()
      setSelectedDuplicates(new Set())
      loadSimilarControls()
    } catch {
      alert('Fehler beim Zusammenfuehren')
    } finally {
      setMerging(false)
    }
  }

  return (
    <div className="flex flex-col h-full">
      {/* Header */}
      <div className="border-b border-gray-200 bg-white px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3">
          <button onClick={onBack} className="text-gray-400 hover:text-gray-600">
            <ArrowLeft className="w-5 h-5" />
          </button>
          <div>
            <div className="flex items-center gap-2">
              <span className="text-sm font-mono text-purple-600 bg-purple-50 px-2 py-0.5 rounded">{ctrl.control_id}</span>
              <SeverityBadge severity={ctrl.severity} />
              <StateBadge state={ctrl.release_state} />
              <LicenseRuleBadge rule={ctrl.license_rule} />
              <VerificationMethodBadge method={ctrl.verification_method} />
              <CategoryBadge category={ctrl.category} />
              <EvidenceTypeBadge type={ctrl.evidence_type} />
              <TargetAudienceBadge audience={ctrl.target_audience} />
              <GenerationStrategyBadge strategy={ctrl.generation_strategy} pipelineInfo={ctrl} />
              <ObligationTypeBadge type={ctrl.generation_metadata?.obligation_type as string} />
            </div>
            <h2 className="text-lg font-semibold text-gray-900 mt-1">{ctrl.title}</h2>
          </div>
        </div>
        <div className="flex items-center gap-2">
          {reviewMode && (
            <div className="flex items-center gap-1 mr-3">
              <button onClick={onReviewPrev} disabled={reviewIndex === 0} className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">
                <ChevronLeft className="w-4 h-4" />
              </button>
              <span className="text-xs text-gray-500 font-medium">{reviewIndex + 1} / {reviewTotal}</span>
              <button onClick={onReviewNext} disabled={reviewIndex >= reviewTotal - 1} className="p-1 text-gray-400 hover:text-gray-600 disabled:opacity-30">
                <SkipForward className="w-4 h-4" />
              </button>
            </div>
          )}
          <button onClick={onEdit} className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50">
            <Pencil className="w-3.5 h-3.5 inline mr-1" />Bearbeiten
          </button>
          <button onClick={() => onDelete(ctrl.control_id)} className="px-3 py-1.5 text-sm text-red-600 border border-red-300 rounded-lg hover:bg-red-50">
            <Trash2 className="w-3.5 h-3.5 inline mr-1" />Loeschen
          </button>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-y-auto p-6 max-w-4xl mx-auto w-full space-y-6">
        {/* Objective */}
        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Ziel</h3>
          <p className="text-sm text-gray-700 leading-relaxed">{ctrl.objective}</p>
        </section>

        {/* Rationale */}
        <section>
          <h3 className="text-sm font-semibold text-gray-900 mb-2">Begruendung</h3>
          <p className="text-sm text-gray-700 leading-relaxed">{ctrl.rationale}</p>
        </section>

        {/* Quellennachweis (Rule 1 + 2) — dynamic label based on source_type */}
        {ctrl.source_citation && (
          <section className={`border rounded-lg p-4 ${
            ctrl.source_citation.source_type === 'law' ? 'bg-blue-50 border-blue-200' :
            ctrl.source_citation.source_type === 'guideline' ? 'bg-indigo-50 border-indigo-200' :
            'bg-teal-50 border-teal-200'
          }`}>
            <div className="flex items-center gap-2 mb-3">
              <Scale className={`w-4 h-4 ${
                ctrl.source_citation.source_type === 'law' ? 'text-blue-600' :
                ctrl.source_citation.source_type === 'guideline' ? 'text-indigo-600' :
                'text-teal-600'
              }`} />
              <h3 className={`text-sm font-semibold ${
                ctrl.source_citation.source_type === 'law' ? 'text-blue-900' :
                ctrl.source_citation.source_type === 'guideline' ? 'text-indigo-900' :
                'text-teal-900'
              }`}>{
                ctrl.source_citation.source_type === 'law' ? 'Gesetzliche Grundlage' :
                ctrl.source_citation.source_type === 'guideline' ? 'Behoerdliche Leitlinie' :
                'Standard / Best Practice'
              }</h3>
              {ctrl.source_citation.source_type === 'law' && (
                <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">Direkte gesetzliche Pflicht</span>
              )}
              {ctrl.source_citation.source_type === 'guideline' && (
                <span className="text-xs bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded-full">Aufsichtsbehoerdliche Empfehlung</span>
              )}
              {(ctrl.source_citation.source_type === 'standard' || (!ctrl.source_citation.source_type && ctrl.license_rule === 2)) && (
                <span className="text-xs bg-teal-100 text-teal-700 px-2 py-0.5 rounded-full">Freiwilliger Standard</span>
              )}
              {(!ctrl.source_citation.source_type && ctrl.license_rule === 1) && (
                <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">Noch nicht klassifiziert</span>
              )}
            </div>
            <div className="flex items-start gap-3">
              <div className="flex-1">
                {ctrl.source_citation.source ? (
                  <p className="text-sm font-medium text-blue-900 mb-1">
                    {ctrl.source_citation.source}
                    {ctrl.source_citation.article && ` — ${ctrl.source_citation.article}`}
                    {ctrl.source_citation.paragraph && ` ${ctrl.source_citation.paragraph}`}
                  </p>
                ) : ctrl.generation_metadata?.source_regulation ? (
                  <p className="text-sm font-medium text-blue-900 mb-1">{String(ctrl.generation_metadata.source_regulation)}</p>
                ) : null}
                {ctrl.source_citation.license && (
                  <p className="text-xs text-blue-600">Lizenz: {ctrl.source_citation.license}</p>
                )}
                {ctrl.source_citation.license_notice && (
                  <p className="text-xs text-blue-600 mt-0.5">{ctrl.source_citation.license_notice}</p>
                )}
              </div>
              {ctrl.source_citation.url && (
                <a
                  href={ctrl.source_citation.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="flex items-center gap-1 text-xs text-blue-600 hover:text-blue-800 whitespace-nowrap"
                >
                  <ExternalLink className="w-3.5 h-3.5" />Quelle
                </a>
              )}
            </div>
            {ctrl.source_original_text && (
              <details className="mt-3">
                <summary className="text-xs text-blue-600 cursor-pointer hover:text-blue-800">Originaltext anzeigen</summary>
                <p className="text-xs text-gray-600 mt-2 p-2 bg-white rounded border border-blue-100 leading-relaxed max-h-40 overflow-y-auto whitespace-pre-wrap">
                  {ctrl.source_original_text}
                </p>
              </details>
            )}
          </section>
        )}

        {/* Regulatorische Abdeckung (Eigenentwicklung) */}
        {eigenentwicklung && (
          <section className="bg-orange-50 border border-orange-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <Scale className="w-4 h-4 text-orange-600" />
              <h3 className="text-sm font-semibold text-orange-900">
                Regulatorische Abdeckung
              </h3>
              {loadingV1 && <span className="text-xs text-orange-400">Laden...</span>}
            </div>
            {v1Matches.length > 0 ? (
              <div className="space-y-2">
                {v1Matches.map((match, i) => (
                  <div key={i} className="bg-white/60 border border-orange-100 rounded-lg p-3">
                    <div className="flex items-start justify-between gap-2">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-2 flex-wrap mb-1">
                          {match.matched_source && (
                            <span className="text-xs font-semibold text-blue-800 bg-blue-100 px-1.5 py-0.5 rounded">
                              {match.matched_source}
                            </span>
                          )}
                          {match.matched_article && (
                            <span className="text-xs text-blue-700 bg-blue-50 px-1.5 py-0.5 rounded">
                              {match.matched_article}
                            </span>
                          )}
                          <span className={`text-xs font-medium px-1.5 py-0.5 rounded ${
                            match.similarity_score >= 0.85 ? 'bg-green-100 text-green-700' :
                            match.similarity_score >= 0.80 ? 'bg-yellow-100 text-yellow-700' :
                            'bg-gray-100 text-gray-600'
                          }`}>
                            {(match.similarity_score * 100).toFixed(0)}%
                          </span>
                        </div>
                        <p className="text-sm text-gray-800">
                          {onNavigateToControl ? (
                            <button
                              onClick={() => onNavigateToControl(match.matched_control_id)}
                              className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded hover:bg-purple-100 hover:underline mr-1.5"
                            >
                              {match.matched_control_id}
                            </button>
                          ) : (
                            <span className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded mr-1.5">
                              {match.matched_control_id}
                            </span>
                          )}
                          {match.matched_title}
                        </p>
                      </div>
                      {onCompare && (
                        <button
                          onClick={() => onCompare(ctrl, v1Matches)}
                          className="text-xs text-orange-600 border border-orange-300 rounded px-2 py-1 hover:bg-orange-100 whitespace-nowrap flex-shrink-0"
                        >
                          Vergleichen
                        </button>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            ) : !loadingV1 ? (
              <p className="text-sm text-orange-600">Keine regulatorische Abdeckung gefunden. Dieses Control ist eine reine Eigenentwicklung.</p>
            ) : null}
          </section>
        )}

        {/* Rechtsgrundlagen / Traceability (atomic controls) */}
        {traceability && traceability.parent_links.length > 0 && (
          <section className="bg-violet-50 border border-violet-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <Landmark className="w-4 h-4 text-violet-600" />
              <h3 className="text-sm font-semibold text-violet-900">
                Rechtsgrundlagen ({traceability.source_count} {traceability.source_count === 1 ? 'Quelle' : 'Quellen'})
              </h3>
              <ObligationTypeBadge type={ctrl.generation_metadata?.obligation_type as string} />
              {traceability.regulations_summary && traceability.regulations_summary.map(rs => (
                <span key={rs.regulation_code} className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-violet-200 text-violet-800">
                  {rs.regulation_code}
                </span>
              ))}
              {loadingTrace && <span className="text-xs text-violet-400">Laden...</span>}
            </div>
            <div className="space-y-3">
              {traceability.parent_links.map((link, i) => (
                <div key={i} className="bg-white/60 border border-violet-100 rounded-lg p-3">
                  <div className="flex items-start gap-2">
                    <Scale className="w-4 h-4 text-violet-500 mt-0.5 flex-shrink-0" />
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2 flex-wrap">
                        {link.source_regulation && (
                          <span className="text-sm font-semibold text-violet-900">{link.source_regulation}</span>
                        )}
                        {link.source_article && (
                          <span className="text-sm text-violet-700">{link.source_article}</span>
                        )}
                        {!link.source_regulation && link.parent_citation?.source && (
                          <span className="text-sm font-semibold text-violet-900">
                            {link.parent_citation.source}
                            {link.parent_citation.article && ` — ${link.parent_citation.article}`}
                          </span>
                        )}
                        <span className={`text-xs px-1.5 py-0.5 rounded ${
                          link.link_type === 'decomposition' ? 'bg-violet-100 text-violet-600' :
                          link.link_type === 'dedup_merge' ? 'bg-blue-100 text-blue-600' :
                          'bg-gray-100 text-gray-600'
                        }`}>
                          {link.link_type === 'decomposition' ? 'Ableitung' :
                           link.link_type === 'dedup_merge' ? 'Dedup' :
                           link.link_type}
                        </span>
                      </div>
                      <p className="text-xs text-violet-600 mt-1">
                        via{' '}
                        {onNavigateToControl ? (
                          <button
                            onClick={() => onNavigateToControl(link.parent_control_id)}
                            className="font-mono font-medium text-purple-700 bg-purple-50 px-1 py-0.5 rounded hover:bg-purple-100 hover:underline"
                          >
                            {link.parent_control_id}
                          </button>
                        ) : (
                          <span className="font-mono font-medium text-purple-700 bg-purple-50 px-1 py-0.5 rounded">
                            {link.parent_control_id}
                          </span>
                        )}
                        {link.parent_title && (
                          <span className="text-violet-500 ml-1">— {link.parent_title}</span>
                        )}
                      </p>
                      {link.obligation && (
                        <p className="text-xs text-violet-500 mt-1.5 bg-violet-50 rounded p-2">
                          <span className={`inline-block mr-1.5 px-1.5 py-0.5 rounded text-xs font-medium ${
                            link.obligation.normative_strength === 'must' ? 'bg-red-100 text-red-700' :
                            link.obligation.normative_strength === 'should' ? 'bg-amber-100 text-amber-700' :
                            'bg-green-100 text-green-700'
                          }`}>
                            {link.obligation.normative_strength === 'must' ? 'MUSS' :
                             link.obligation.normative_strength === 'should' ? 'SOLL' : 'KANN'}
                          </span>
                          {link.obligation.text.slice(0, 200)}
                          {link.obligation.text.length > 200 ? '...' : ''}
                        </p>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Fallback: simple parent display when traceability not loaded yet */}
        {ctrl.parent_control_uuid && (!traceability || traceability.parent_links.length === 0) && !loadingTrace && (
          <section className="bg-violet-50 border border-violet-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-1">
              <GitMerge className="w-4 h-4 text-violet-600" />
              <h3 className="text-sm font-semibold text-violet-900">Atomares Control</h3>
              <ObligationTypeBadge type={ctrl.generation_metadata?.obligation_type as string} />
            </div>
            <p className="text-sm text-violet-800">
              Abgeleitet aus Eltern-Control{' '}
              <span className="font-mono font-semibold text-purple-700 bg-purple-100 px-1.5 py-0.5 rounded">
                {ctrl.parent_control_id || ctrl.parent_control_uuid}
              </span>
              {ctrl.parent_control_title && (
                <span className="text-violet-700 ml-1">— {ctrl.parent_control_title}</span>
              )}
            </p>
          </section>
        )}

        {/* Document References (atomic controls) */}
        {traceability && traceability.is_atomic && traceability.document_references && traceability.document_references.length > 0 && (
          <section className="bg-indigo-50 border border-indigo-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <FileText className="w-4 h-4 text-indigo-600" />
              <h3 className="text-sm font-semibold text-indigo-900">
                Original-Dokumente ({traceability.document_references.length})
              </h3>
            </div>
            <div className="space-y-2">
              {traceability.document_references.map((dr, i) => (
                <div key={i} className="flex items-center gap-2 text-sm bg-white/60 border border-indigo-100 rounded-lg p-2">
                  <span className="font-semibold text-indigo-900">{dr.regulation_code}</span>
                  {dr.article && <span className="text-indigo-700">{dr.article}</span>}
                  {dr.paragraph && <span className="text-indigo-600 text-xs">{dr.paragraph}</span>}
                  <span className="ml-auto flex items-center gap-1.5">
                    <ExtractionMethodBadge method={dr.extraction_method} />
                    {dr.confidence !== null && (
                      <span className="text-xs text-gray-500">{(dr.confidence * 100).toFixed(0)}%</span>
                    )}
                  </span>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Obligations (rich controls) */}
        {traceability && !traceability.is_atomic && traceability.obligations && traceability.obligations.length > 0 && (
          <section className="bg-amber-50 border border-amber-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <Scale className="w-4 h-4 text-amber-600" />
              <h3 className="text-sm font-semibold text-amber-900">
                Abgeleitete Pflichten ({traceability.obligation_count ?? traceability.obligations.length})
              </h3>
            </div>
            <div className="space-y-2">
              {traceability.obligations.map((ob) => (
                <div key={ob.candidate_id} className="bg-white/60 border border-amber-100 rounded-lg p-3">
                  <div className="flex items-center gap-2 mb-1 flex-wrap">
                    <span className="font-mono text-xs text-amber-700 bg-amber-100 px-1.5 py-0.5 rounded">{ob.candidate_id}</span>
                    <span className={`inline-block px-1.5 py-0.5 rounded text-xs font-medium ${
                      ob.normative_strength === 'must' ? 'bg-red-100 text-red-700' :
                      ob.normative_strength === 'should' ? 'bg-amber-100 text-amber-700' :
                      'bg-green-100 text-green-700'
                    }`}>
                      {ob.normative_strength === 'must' ? 'MUSS' :
                       ob.normative_strength === 'should' ? 'SOLL' : 'KANN'}
                    </span>
                    {ob.action && <span className="text-xs text-amber-600">{ob.action}</span>}
                    {ob.object && <span className="text-xs text-amber-500">→ {ob.object}</span>}
                  </div>
                  <p className="text-xs text-gray-700 leading-relaxed">
                    {ob.obligation_text.slice(0, 300)}
                    {ob.obligation_text.length > 300 ? '...' : ''}
                  </p>
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Merged Duplicates */}
        {traceability && traceability.merged_duplicates && traceability.merged_duplicates.length > 0 && (
          <section className="bg-slate-50 border border-slate-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <GitMerge className="w-4 h-4 text-slate-600" />
              <h3 className="text-sm font-semibold text-slate-900">
                Zusammengefuehrte Duplikate ({traceability.merged_duplicates_count ?? traceability.merged_duplicates.length})
              </h3>
            </div>
            <div className="space-y-1.5">
              {traceability.merged_duplicates.map((dup) => (
                <div key={dup.control_id} className="flex items-center gap-2 text-sm">
                  {onNavigateToControl ? (
                    <button
                      onClick={() => onNavigateToControl(dup.control_id)}
                      className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded hover:bg-purple-100 hover:underline"
                    >
                      {dup.control_id}
                    </button>
                  ) : (
                    <span className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{dup.control_id}</span>
                  )}
                  <span className="text-gray-700 flex-1 truncate">{dup.title}</span>
                  {dup.source_regulation && (
                    <span className="text-xs text-slate-500 bg-slate-100 px-1.5 py-0.5 rounded">{dup.source_regulation}</span>
                  )}
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Child controls (rich controls that have atomic children) */}
        {traceability && traceability.children.length > 0 && (
          <section className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <GitMerge className="w-4 h-4 text-emerald-600" />
              <h3 className="text-sm font-semibold text-emerald-900">
                Abgeleitete Controls ({traceability.children.length})
              </h3>
            </div>
            <div className="space-y-1.5">
              {traceability.children.map((child) => (
                <div key={child.control_id} className="flex items-center gap-2 text-sm">
                  {onNavigateToControl ? (
                    <button
                      onClick={() => onNavigateToControl(child.control_id)}
                      className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded hover:bg-purple-100 hover:underline"
                    >
                      {child.control_id}
                    </button>
                  ) : (
                    <span className="font-mono text-xs text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{child.control_id}</span>
                  )}
                  <span className="text-gray-700 flex-1 truncate">{child.title}</span>
                  <SeverityBadge severity={child.severity} />
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Impliziter Gesetzesbezug (Rule 3 — reformuliert, kein Originaltext) */}
        {!ctrl.source_citation && ctrl.open_anchors.length > 0 && (
          <section className="bg-amber-50 border border-amber-200 rounded-lg p-3">
            <div className="flex items-center gap-2">
              <Scale className="w-4 h-4 text-amber-600" />
              <div className="flex-1">
                <p className="text-xs text-amber-800 font-medium">Abgeleitet aus regulatorischen Anforderungen</p>
                <p className="text-xs text-amber-700 mt-0.5">
                  Dieser Control wurde aus geschuetzten Quellen reformuliert (z.B. BSI Grundschutz, ISO 27001).
                  Die konkreten Massnahmen leiten sich aus den Open-Source-Referenzen unten ab.
                </p>
              </div>
            </div>
          </section>
        )}

        {/* Scope */}
        {(ctrl.scope.platforms?.length || ctrl.scope.components?.length || ctrl.scope.data_classes?.length) ? (
          <section>
            <h3 className="text-sm font-semibold text-gray-900 mb-2">Geltungsbereich</h3>
            <div className="grid grid-cols-3 gap-4 text-xs">
              {ctrl.scope.platforms?.length ? (
                <div><span className="text-gray-500">Plattformen:</span> <span className="text-gray-700">{ctrl.scope.platforms.join(', ')}</span></div>
              ) : null}
              {ctrl.scope.components?.length ? (
                <div><span className="text-gray-500">Komponenten:</span> <span className="text-gray-700">{ctrl.scope.components.join(', ')}</span></div>
              ) : null}
              {ctrl.scope.data_classes?.length ? (
                <div><span className="text-gray-500">Datenklassen:</span> <span className="text-gray-700">{ctrl.scope.data_classes.join(', ')}</span></div>
              ) : null}
            </div>
          </section>
        ) : null}

        {/* Requirements */}
        {ctrl.requirements.length > 0 && (
          <section>
            <h3 className="text-sm font-semibold text-gray-900 mb-2">Anforderungen</h3>
            <ol className="list-decimal list-inside space-y-1">
              {ctrl.requirements.map((r, i) => (
                <li key={i} className="text-sm text-gray-700">{r}</li>
              ))}
            </ol>
          </section>
        )}

        {/* Test Procedure */}
        {ctrl.test_procedure.length > 0 && (
          <section>
            <h3 className="text-sm font-semibold text-gray-900 mb-2">Pruefverfahren</h3>
            <ol className="list-decimal list-inside space-y-1">
              {ctrl.test_procedure.map((s, i) => (
                <li key={i} className="text-sm text-gray-700">{s}</li>
              ))}
            </ol>
          </section>
        )}

        {/* Evidence — handles both {type, description} objects and plain strings */}
        {ctrl.evidence.length > 0 && (
          <section>
            <h3 className="text-sm font-semibold text-gray-900 mb-2">Nachweise</h3>
            <div className="space-y-2">
              {ctrl.evidence.map((ev, i) => (
                <div key={i} className="flex items-start gap-2 text-sm text-gray-700">
                  <FileText className="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" />
                  {typeof ev === 'string' ? (
                    <div>{ev}</div>
                  ) : (
                    <div><span className="font-medium">{ev.type}:</span> {ev.description}</div>
                  )}
                </div>
              ))}
            </div>
          </section>
        )}

        {/* Meta */}
        <section className="grid grid-cols-3 gap-4 text-xs text-gray-500">
          {ctrl.risk_score !== null && <div>Risiko-Score: <span className="text-gray-700 font-medium">{ctrl.risk_score}</span></div>}
          {ctrl.implementation_effort && <div>Aufwand: <span className="text-gray-700 font-medium">{EFFORT_LABELS[ctrl.implementation_effort] || ctrl.implementation_effort}</span></div>}
          {ctrl.tags.length > 0 && (
            <div className="col-span-3 flex items-center gap-1 flex-wrap">
              {ctrl.tags.map(t => (
                <span key={t} className="px-2 py-0.5 bg-gray-100 text-gray-600 rounded text-xs">{t}</span>
              ))}
            </div>
          )}
        </section>

        {/* Open Anchors */}
        <section className="bg-green-50 border border-green-200 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-3">
            <BookOpen className="w-4 h-4 text-green-700" />
            <h3 className="text-sm font-semibold text-green-900">Open-Source-Referenzen ({ctrl.open_anchors.length})</h3>
          </div>
          {ctrl.open_anchors.length > 0 ? (
            <div className="space-y-2">
              {ctrl.open_anchors.map((anchor, i) => (
                <div key={i} className="flex items-center gap-2 text-sm">
                  <ExternalLink className="w-3.5 h-3.5 text-green-600 flex-shrink-0" />
                  <span className="font-medium text-green-800">{anchor.framework}</span>
                  <span className="text-green-700">{anchor.ref}</span>
                  {anchor.url && (
                    <a href={anchor.url} target="_blank" rel="noopener noreferrer" className="text-green-600 hover:text-green-800 underline text-xs ml-auto">
                      Link
                    </a>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <p className="text-sm text-green-600">Keine Referenzen vorhanden.</p>
          )}
        </section>

        {/* Generation Metadata (internal) */}
        {ctrl.generation_metadata && (
          <section className="bg-gray-50 border border-gray-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-2">
              <Clock className="w-4 h-4 text-gray-500" />
              <h3 className="text-sm font-semibold text-gray-700">Generierungsdetails (intern)</h3>
            </div>
            <div className="text-xs text-gray-600 space-y-1">
              {ctrl.generation_metadata.processing_path && (
                <p>Pfad: {String(ctrl.generation_metadata.processing_path)}</p>
              )}
              {ctrl.generation_metadata.decomposition_method && (
                <p>Methode: {String(ctrl.generation_metadata.decomposition_method)}</p>
              )}
              {ctrl.generation_metadata.pass0b_model && (
                <p>LLM: {String(ctrl.generation_metadata.pass0b_model)}</p>
              )}
              {ctrl.generation_metadata.obligation_type && (
                <p>Obligation-Typ: {String(ctrl.generation_metadata.obligation_type)}</p>
              )}
              {ctrl.generation_metadata.similarity_status && (
                <p className="text-red-600">Similarity: {String(ctrl.generation_metadata.similarity_status)}</p>
              )}
              {Array.isArray(ctrl.generation_metadata.similar_controls) && (
                <div>
                  <p className="font-medium">Aehnliche Controls:</p>
                  {(ctrl.generation_metadata.similar_controls as Array<Record<string, unknown>>).map((s, i) => (
                    <p key={i} className="ml-2">{String(s.control_id)} — {String(s.title)} ({String(s.similarity)})</p>
                  ))}
                </div>
              )}
            </div>
          </section>
        )}

        {/* Similar Controls (Dedup) */}
        <section className="bg-gray-50 border border-gray-200 rounded-lg p-4">
          <div className="flex items-center gap-2 mb-3">
            <Search className="w-4 h-4 text-gray-600" />
            <h3 className="text-sm font-semibold text-gray-800">Aehnliche Controls</h3>
            {loadingSimilar && <span className="text-xs text-gray-400">Laden...</span>}
          </div>

          {similarControls.length > 0 ? (
            <>
              <div className="mb-3 p-2 bg-white border border-gray-100 rounded flex items-center gap-2">
                <input type="radio" checked readOnly className="text-purple-600" />
                <span className="text-sm font-medium text-purple-700">{ctrl.control_id} — {ctrl.title}</span>
                <span className="text-xs text-gray-400 ml-auto">Behalten (Haupt-Control)</span>
              </div>

              <div className="space-y-2">
                {similarControls.map(sim => (
                  <div key={sim.control_id} className="p-2 bg-white border border-gray-100 rounded flex items-center gap-2">
                    <input
                      type="checkbox"
                      checked={selectedDuplicates.has(sim.control_id)}
                      onChange={() => toggleDuplicate(sim.control_id)}
                      className="text-red-600"
                    />
                    <span className="text-xs font-mono text-purple-600 bg-purple-50 px-1.5 py-0.5 rounded">{sim.control_id}</span>
                    <span className="text-sm text-gray-700 flex-1">{sim.title}</span>
                    <span className="text-xs font-medium text-amber-600 bg-amber-50 px-1.5 py-0.5 rounded">
                      {(sim.similarity * 100).toFixed(1)}%
                    </span>
                    <LicenseRuleBadge rule={sim.license_rule} />
                    <VerificationMethodBadge method={sim.verification_method} />
                  </div>
                ))}
              </div>

              {selectedDuplicates.size > 0 && (
                <button
                  onClick={handleMergeDuplicates}
                  disabled={merging}
                  className="mt-3 flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700 disabled:opacity-50"
                >
                  <GitMerge className="w-3.5 h-3.5" />
                  {merging ? 'Zusammenfuehren...' : `${selectedDuplicates.size} Duplikat(e) zusammenfuehren`}
                </button>
              )}
            </>
          ) : (
            <p className="text-sm text-gray-500">
              {loadingSimilar ? 'Suche aehnliche Controls...' : 'Keine aehnlichen Controls gefunden.'}
            </p>
          )}
        </section>

        {/* Review Actions */}
        {['needs_review', 'too_close', 'duplicate'].includes(ctrl.release_state) && (
          <section className="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <Eye className="w-4 h-4 text-yellow-700" />
              <h3 className="text-sm font-semibold text-yellow-900">Review erforderlich</h3>
              {reviewMode && (
                <span className="text-xs text-yellow-600 ml-auto">Review-Modus aktiv</span>
              )}
            </div>
            <div className="flex items-center gap-2">
              <button
                onClick={() => onReview(ctrl.control_id, 'approve')}
                className="px-3 py-1.5 text-sm text-white bg-green-600 rounded-lg hover:bg-green-700"
              >
                <CheckCircle2 className="w-3.5 h-3.5 inline mr-1" />
                Akzeptieren
              </button>
              <button
                onClick={() => onReview(ctrl.control_id, 'reject')}
                className="px-3 py-1.5 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700"
              >
                <Trash2 className="w-3.5 h-3.5 inline mr-1" />
                Ablehnen
              </button>
              <button
                onClick={onEdit}
                className="px-3 py-1.5 text-sm text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50"
              >
                <Pencil className="w-3.5 h-3.5 inline mr-1" />
                Ueberarbeiten
              </button>
            </div>
          </section>
        )}
      </div>
    </div>
  )
}