'use client'

/**
 * Audit Workspace - Collaborative Audit Management
 *
 * Features:
 * - View all requirements with original text from regulations
 * - Document implementation details for each requirement
 * - Link to source documents (PDFs, EUR-Lex)
 * - Track audit status (pending, in_review, approved, rejected)
 * - Add code references and evidence
 * - Auditor notes and sign-off
 */

import { useState, useEffect } from 'react'
import Link from 'next/link'
import AdminLayout from '@/components/admin/AdminLayout'

// Types
interface Regulation {
  id: string
  code: string
  name: string
  full_name: string
  regulation_type: string
  source_url: string | null
  local_pdf_path: string | null
  requirement_count: number
}

interface Requirement {
  id: string
  regulation_id: string
  regulation_code?: string
  article: string
  paragraph: string | null
  title: string
  description: string | null
  requirement_text: string | null
  breakpilot_interpretation: string | null
  implementation_status: string
  implementation_details: string | null
  code_references: Array<{ file: string; line?: number; description: string }> | null
  evidence_description: string | null
  audit_status: string
  auditor_notes: string | null
  is_applicable: boolean
  applicability_reason: string | null
  priority: number
  source_page: number | null
  source_section: string | null
}

interface RequirementUpdate {
  implementation_status?: string
  implementation_details?: string
  code_references?: Array<{ file: string; line?: number; description: string }>
  evidence_description?: string
  audit_status?: string
  auditor_notes?: string
  is_applicable?: boolean
  applicability_reason?: string
}

const IMPLEMENTATION_STATUS = {
  not_started: { label: 'Nicht gestartet', color: 'bg-slate-400' },
  in_progress: { label: 'In Arbeit', color: 'bg-yellow-500' },
  implemented: { label: 'Implementiert', color: 'bg-blue-500' },
  verified: { label: 'Verifiziert', color: 'bg-green-500' },
}

const AUDIT_STATUS = {
  pending: { label: 'Ausstehend', color: 'bg-slate-400' },
  in_review: { label: 'In Pruefung', color: 'bg-yellow-500' },
  approved: { label: 'Genehmigt', color: 'bg-green-500' },
  rejected: { label: 'Abgelehnt', color: 'bg-red-500' },
}

const PRIORITY_LABELS: Record<number, { label: string; color: string }> = {
  1: { label: 'Kritisch', color: 'text-red-600' },
  2: { label: 'Hoch', color: 'text-orange-600' },
  3: { label: 'Mittel', color: 'text-yellow-600' },
}

export default function AuditWorkspacePage() {
  const [regulations, setRegulations] = useState<Regulation[]>([])
  const [requirements, setRequirements] = useState<Requirement[]>([])
  const [selectedRegulation, setSelectedRegulation] = useState<string | null>(null)
  const [selectedRequirement, setSelectedRequirement] = useState<Requirement | null>(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [filterAuditStatus, setFilterAuditStatus] = useState<string>('all')
  const [filterImplStatus, setFilterImplStatus] = useState<string>('all')
  const [searchQuery, setSearchQuery] = useState('')

  const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'

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

  useEffect(() => {
    if (selectedRegulation) {
      loadRequirements(selectedRegulation)
    }
  }, [selectedRegulation])

  const loadRegulations = async () => {
    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/regulations`)
      if (res.ok) {
        const data = await res.json()
        setRegulations(data.regulations || [])
        // Select first regulation by default
        if (data.regulations?.length > 0) {
          setSelectedRegulation(data.regulations[0].code)
        }
      }
    } catch (err) {
      console.error('Failed to load regulations:', err)
    } finally {
      setLoading(false)
    }
  }

  const loadRequirements = async (regCode: string) => {
    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/regulations/${regCode}/requirements`)
      if (res.ok) {
        const data = await res.json()
        setRequirements(data.requirements || [])
      }
    } catch (err) {
      console.error('Failed to load requirements:', err)
    }
  }

  const updateRequirement = async (reqId: string, updates: RequirementUpdate) => {
    setSaving(true)
    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/requirements/${reqId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updates),
      })

      if (res.ok) {
        const updated = await res.json()
        setRequirements(prev => prev.map(r => r.id === reqId ? { ...r, ...updates } : r))
        if (selectedRequirement?.id === reqId) {
          setSelectedRequirement({ ...selectedRequirement, ...updates })
        }
      }
    } catch (err) {
      console.error('Failed to update requirement:', err)
    } finally {
      setSaving(false)
    }
  }

  const filteredRequirements = requirements.filter(req => {
    if (filterAuditStatus !== 'all' && req.audit_status !== filterAuditStatus) return false
    if (filterImplStatus !== 'all' && req.implementation_status !== filterImplStatus) return false
    if (searchQuery) {
      const query = searchQuery.toLowerCase()
      return (
        req.title.toLowerCase().includes(query) ||
        req.article.toLowerCase().includes(query) ||
        req.requirement_text?.toLowerCase().includes(query)
      )
    }
    return true
  })

  const currentRegulation = regulations.find(r => r.code === selectedRegulation)

  // Statistics
  const stats = {
    total: requirements.length,
    verified: requirements.filter(r => r.implementation_status === 'verified').length,
    approved: requirements.filter(r => r.audit_status === 'approved').length,
    pending: requirements.filter(r => r.audit_status === 'pending').length,
  }

  return (
    <AdminLayout title="Audit Workspace" description="Gemeinsam mit Pruefern arbeiten">
      {/* Header with back link */}
      <div className="mb-6 flex items-center justify-between">
        <Link
          href="/admin/compliance"
          className="text-sm text-slate-600 hover:text-slate-900 flex items-center gap-1"
        >
          <svg className="w-4 h-4" 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 zu Compliance
        </Link>

        <div className="flex items-center gap-4">
          <div className="text-sm text-slate-500">
            {stats.approved}/{stats.total} genehmigt | {stats.verified}/{stats.total} verifiziert
          </div>
        </div>
      </div>

      <div className="grid grid-cols-12 gap-6">
        {/* Left Sidebar - Regulation & Requirement List */}
        <div className="col-span-4 space-y-4">
          {/* Regulation Selector */}
          <div className="bg-white rounded-lg border border-slate-200 p-4">
            <label className="block text-sm font-medium text-slate-700 mb-2">
              Verordnung / Standard
            </label>
            <select
              value={selectedRegulation || ''}
              onChange={(e) => setSelectedRegulation(e.target.value)}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
            >
              {regulations.map(reg => (
                <option key={reg.code} value={reg.code}>
                  {reg.code} - {reg.name} ({reg.requirement_count})
                </option>
              ))}
            </select>

            {currentRegulation?.source_url && (
              <a
                href={currentRegulation.source_url}
                target="_blank"
                rel="noopener noreferrer"
                className="mt-2 text-sm text-primary-600 hover:text-primary-800 flex items-center gap-1"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                </svg>
                Originaldokument oeffnen
              </a>
            )}

            {currentRegulation?.local_pdf_path && (
              <a
                href={`/docs/${currentRegulation.local_pdf_path}`}
                target="_blank"
                className="mt-1 text-sm text-slate-600 hover:text-slate-800 flex items-center gap-1"
              >
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                </svg>
                Lokale PDF
              </a>
            )}
          </div>

          {/* Filters */}
          <div className="bg-white rounded-lg border border-slate-200 p-4 space-y-3">
            <div>
              <label className="block text-xs font-medium text-slate-500 mb-1">Suche</label>
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Artikel, Titel..."
                className="w-full px-3 py-1.5 text-sm border border-slate-300 rounded-lg"
              />
            </div>
            <div className="grid grid-cols-2 gap-2">
              <div>
                <label className="block text-xs font-medium text-slate-500 mb-1">Audit-Status</label>
                <select
                  value={filterAuditStatus}
                  onChange={(e) => setFilterAuditStatus(e.target.value)}
                  className="w-full px-2 py-1.5 text-sm border border-slate-300 rounded-lg"
                >
                  <option value="all">Alle</option>
                  {Object.entries(AUDIT_STATUS).map(([key, { label }]) => (
                    <option key={key} value={key}>{label}</option>
                  ))}
                </select>
              </div>
              <div>
                <label className="block text-xs font-medium text-slate-500 mb-1">Impl.-Status</label>
                <select
                  value={filterImplStatus}
                  onChange={(e) => setFilterImplStatus(e.target.value)}
                  className="w-full px-2 py-1.5 text-sm border border-slate-300 rounded-lg"
                >
                  <option value="all">Alle</option>
                  {Object.entries(IMPLEMENTATION_STATUS).map(([key, { label }]) => (
                    <option key={key} value={key}>{label}</option>
                  ))}
                </select>
              </div>
            </div>
          </div>

          {/* Requirements List */}
          <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
            <div className="p-3 border-b border-slate-200 bg-slate-50">
              <span className="text-sm font-medium text-slate-700">
                Anforderungen ({filteredRequirements.length})
              </span>
            </div>
            <div className="max-h-[500px] overflow-y-auto">
              {filteredRequirements.map(req => (
                <button
                  key={req.id}
                  onClick={() => setSelectedRequirement(req)}
                  className={`w-full text-left p-3 border-b border-slate-100 hover:bg-slate-50 transition-colors ${
                    selectedRequirement?.id === req.id ? 'bg-primary-50 border-l-4 border-l-primary-500' : ''
                  }`}
                >
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex-1 min-w-0">
                      <div className="flex items-center gap-2">
                        <span className="font-mono text-sm text-slate-600">
                          {req.article}{req.paragraph ? ` ${req.paragraph}` : ''}
                        </span>
                        <span className={`text-xs ${PRIORITY_LABELS[req.priority]?.color || 'text-slate-500'}`}>
                          {PRIORITY_LABELS[req.priority]?.label || ''}
                        </span>
                      </div>
                      <p className="text-sm text-slate-900 truncate mt-0.5">{req.title}</p>
                    </div>
                    <div className="flex flex-col items-end gap-1">
                      <span className={`w-2 h-2 rounded-full ${AUDIT_STATUS[req.audit_status as keyof typeof AUDIT_STATUS]?.color || 'bg-slate-300'}`} />
                      <span className={`w-2 h-2 rounded-full ${IMPLEMENTATION_STATUS[req.implementation_status as keyof typeof IMPLEMENTATION_STATUS]?.color || 'bg-slate-300'}`} />
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Right Panel - Requirement Detail */}
        <div className="col-span-8">
          {selectedRequirement ? (
            <RequirementDetailPanel
              requirement={selectedRequirement}
              regulation={currentRegulation}
              onUpdate={(updates) => updateRequirement(selectedRequirement.id, updates)}
              saving={saving}
            />
          ) : (
            <div className="bg-white rounded-lg border border-slate-200 p-8 text-center">
              <svg className="w-12 h-12 mx-auto text-slate-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
              </svg>
              <p className="text-slate-500">Waehlen Sie eine Anforderung aus der Liste</p>
            </div>
          )}
        </div>
      </div>
    </AdminLayout>
  )
}

// AI Interpretation Types
interface AIInterpretation {
  summary: string
  applicability: string
  technical_measures: string[]
  affected_modules: string[]
  risk_level: string
  implementation_hints: string[]
  confidence_score: number
  error?: string
}

// Requirement Detail Panel Component
function RequirementDetailPanel({
  requirement,
  regulation,
  onUpdate,
  saving,
}: {
  requirement: Requirement
  regulation: Regulation | undefined
  onUpdate: (updates: RequirementUpdate) => void
  saving: boolean
}) {
  const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
  const [editMode, setEditMode] = useState(false)
  const [aiLoading, setAiLoading] = useState(false)
  const [aiInterpretation, setAiInterpretation] = useState<AIInterpretation | null>(null)
  const [showAiPanel, setShowAiPanel] = useState(false)
  const [localData, setLocalData] = useState({
    implementation_status: requirement.implementation_status,
    implementation_details: requirement.implementation_details || '',
    evidence_description: requirement.evidence_description || '',
    audit_status: requirement.audit_status,
    auditor_notes: requirement.auditor_notes || '',
    is_applicable: requirement.is_applicable,
    applicability_reason: requirement.applicability_reason || '',
  })
  const [newCodeRef, setNewCodeRef] = useState({ file: '', line: '', description: '' })

  useEffect(() => {
    setLocalData({
      implementation_status: requirement.implementation_status,
      implementation_details: requirement.implementation_details || '',
      evidence_description: requirement.evidence_description || '',
      audit_status: requirement.audit_status,
      auditor_notes: requirement.auditor_notes || '',
      is_applicable: requirement.is_applicable,
      applicability_reason: requirement.applicability_reason || '',
    })
    setEditMode(false)
    setAiInterpretation(null)
    setShowAiPanel(false)
  }, [requirement.id])

  const generateAiInterpretation = async () => {
    setAiLoading(true)
    setShowAiPanel(true)
    try {
      const res = await fetch(`${BACKEND_URL}/api/v1/compliance/ai/interpret`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ requirement_id: requirement.id }),
      })
      if (res.ok) {
        const data = await res.json()
        setAiInterpretation(data)
      } else {
        const err = await res.json()
        setAiInterpretation({
          summary: '', applicability: '', technical_measures: [],
          affected_modules: [], risk_level: 'unknown', implementation_hints: [],
          confidence_score: 0, error: err.detail || 'Fehler bei AI-Analyse'
        })
      }
    } catch (err) {
      setAiInterpretation({
        summary: '', applicability: '', technical_measures: [],
        affected_modules: [], risk_level: 'unknown', implementation_hints: [],
        confidence_score: 0, error: 'Netzwerkfehler bei AI-Analyse'
      })
    } finally {
      setAiLoading(false)
    }
  }

  const handleSave = () => {
    onUpdate(localData)
    setEditMode(false)
  }

  const addCodeReference = () => {
    if (!newCodeRef.file) return
    const refs = requirement.code_references || []
    onUpdate({
      code_references: [...refs, {
        file: newCodeRef.file,
        line: newCodeRef.line ? parseInt(newCodeRef.line) : undefined,
        description: newCodeRef.description,
      }],
    })
    setNewCodeRef({ file: '', line: '', description: '' })
  }

  return (
    <div className="bg-white rounded-lg border border-slate-200 overflow-hidden">
      {/* Header */}
      <div className="p-4 border-b border-slate-200 bg-slate-50">
        <div className="flex items-start justify-between">
          <div>
            <div className="flex items-center gap-3">
              <span className="font-mono text-lg font-semibold text-slate-900">
                {requirement.article}{requirement.paragraph ? ` ${requirement.paragraph}` : ''}
              </span>
              <span className={`px-2 py-0.5 text-xs font-medium rounded ${
                AUDIT_STATUS[requirement.audit_status as keyof typeof AUDIT_STATUS]?.color || 'bg-slate-200'
              } text-white`}>
                {AUDIT_STATUS[requirement.audit_status as keyof typeof AUDIT_STATUS]?.label || requirement.audit_status}
              </span>
              <span className={`px-2 py-0.5 text-xs font-medium rounded ${
                IMPLEMENTATION_STATUS[requirement.implementation_status as keyof typeof IMPLEMENTATION_STATUS]?.color || 'bg-slate-200'
              } text-white`}>
                {IMPLEMENTATION_STATUS[requirement.implementation_status as keyof typeof IMPLEMENTATION_STATUS]?.label || requirement.implementation_status}
              </span>
            </div>
            <h2 className="text-lg font-medium text-slate-900 mt-1">{requirement.title}</h2>
          </div>
          <div className="flex gap-2">
            {editMode ? (
              <>
                <button
                  onClick={() => setEditMode(false)}
                  className="px-3 py-1.5 text-sm text-slate-600 hover:text-slate-800"
                >
                  Abbrechen
                </button>
                <button
                  onClick={handleSave}
                  disabled={saving}
                  className="px-3 py-1.5 text-sm bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:opacity-50"
                >
                  {saving ? 'Speichern...' : 'Speichern'}
                </button>
              </>
            ) : (
              <button
                onClick={() => setEditMode(true)}
                className="px-3 py-1.5 text-sm bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200"
              >
                Bearbeiten
              </button>
            )}
          </div>
        </div>
      </div>

      <div className="p-4 space-y-6">
        {/* Original Requirement Text */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2 flex items-center gap-2">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            Originaler Anforderungstext
          </h3>
          <div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
            <p className="text-sm text-slate-700 whitespace-pre-wrap">
              {requirement.requirement_text || 'Kein Originaltext hinterlegt'}
            </p>
            {requirement.source_page && (
              <p className="text-xs text-slate-500 mt-2">
                Quelle: {regulation?.code} Seite {requirement.source_page}
                {requirement.source_section ? `, ${requirement.source_section}` : ''}
              </p>
            )}
          </div>
        </section>

        {/* Applicability */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2">
            Anwendbarkeit auf Breakpilot
          </h3>
          {editMode ? (
            <div className="space-y-2">
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={localData.is_applicable}
                  onChange={(e) => setLocalData({ ...localData, is_applicable: e.target.checked })}
                  className="rounded"
                />
                <span className="text-sm text-slate-700">Anwendbar</span>
              </label>
              <textarea
                value={localData.applicability_reason}
                onChange={(e) => setLocalData({ ...localData, applicability_reason: e.target.value })}
                placeholder="Begruendung fuer Anwendbarkeit..."
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                rows={2}
              />
            </div>
          ) : (
            <div className="flex items-start gap-3">
              <span className={`px-2 py-1 text-xs font-medium rounded ${
                requirement.is_applicable ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-600'
              }`}>
                {requirement.is_applicable ? 'Anwendbar' : 'Nicht anwendbar'}
              </span>
              {requirement.applicability_reason && (
                <p className="text-sm text-slate-600">{requirement.applicability_reason}</p>
              )}
            </div>
          )}
        </section>

        {/* Breakpilot Interpretation & AI Analysis */}
        <section>
          <div className="flex items-center justify-between mb-2">
            <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide flex items-center gap-2">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
              </svg>
              Interpretation
            </h3>
            <button
              onClick={generateAiInterpretation}
              disabled={aiLoading}
              className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg hover:from-purple-700 hover:to-pink-700 disabled:opacity-50 transition-all"
            >
              {aiLoading ? (
                <>
                  <svg className="animate-spin h-3 w-3" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
                  </svg>
                  AI analysiert...
                </>
              ) : (
                <>
                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                  </svg>
                  AI Analyse
                </>
              )}
            </button>
          </div>

          {/* Existing interpretation */}
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-3">
            <p className="text-sm text-blue-800">
              {requirement.breakpilot_interpretation || 'Keine Interpretation hinterlegt'}
            </p>
          </div>

          {/* AI Interpretation Panel */}
          {showAiPanel && (
            <div className="bg-gradient-to-br from-purple-50 to-pink-50 border border-purple-200 rounded-lg p-4 space-y-3">
              <div className="flex items-center justify-between">
                <h4 className="text-sm font-semibold text-purple-800 flex items-center gap-2">
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                  AI-generierte Analyse
                </h4>
                {aiInterpretation?.confidence_score && (
                  <span className="text-xs text-purple-600">
                    Konfidenz: {Math.round(aiInterpretation.confidence_score * 100)}%
                  </span>
                )}
              </div>

              {aiLoading && (
                <div className="text-center py-4">
                  <div className="animate-pulse text-purple-600">Claude analysiert die Anforderung...</div>
                </div>
              )}

              {aiInterpretation?.error && (
                <div className="bg-red-100 text-red-700 p-3 rounded text-sm">
                  {aiInterpretation.error}
                </div>
              )}

              {aiInterpretation && !aiInterpretation.error && !aiLoading && (
                <div className="space-y-3 text-sm">
                  {/* Summary */}
                  {aiInterpretation.summary && (
                    <div>
                      <div className="font-medium text-purple-700 mb-1">Zusammenfassung</div>
                      <p className="text-slate-700">{aiInterpretation.summary}</p>
                    </div>
                  )}

                  {/* Applicability */}
                  {aiInterpretation.applicability && (
                    <div>
                      <div className="font-medium text-purple-700 mb-1">Anwendbarkeit auf Breakpilot</div>
                      <p className="text-slate-700">{aiInterpretation.applicability}</p>
                    </div>
                  )}

                  {/* Risk Level */}
                  {aiInterpretation.risk_level && (
                    <div className="flex items-center gap-2">
                      <span className="font-medium text-purple-700">Risiko:</span>
                      <span className={`px-2 py-0.5 rounded text-xs font-medium ${
                        aiInterpretation.risk_level === 'critical' ? 'bg-red-100 text-red-700' :
                        aiInterpretation.risk_level === 'high' ? 'bg-orange-100 text-orange-700' :
                        aiInterpretation.risk_level === 'medium' ? 'bg-yellow-100 text-yellow-700' :
                        'bg-green-100 text-green-700'
                      }`}>
                        {aiInterpretation.risk_level}
                      </span>
                    </div>
                  )}

                  {/* Technical Measures */}
                  {aiInterpretation.technical_measures?.length > 0 && (
                    <div>
                      <div className="font-medium text-purple-700 mb-1">Technische Massnahmen</div>
                      <ul className="list-disc list-inside text-slate-700 space-y-1">
                        {aiInterpretation.technical_measures.map((m, i) => (
                          <li key={i}>{m}</li>
                        ))}
                      </ul>
                    </div>
                  )}

                  {/* Affected Modules */}
                  {aiInterpretation.affected_modules?.length > 0 && (
                    <div>
                      <div className="font-medium text-purple-700 mb-1">Betroffene Module</div>
                      <div className="flex flex-wrap gap-1">
                        {aiInterpretation.affected_modules.map((m, i) => (
                          <span key={i} className="px-2 py-0.5 bg-purple-100 text-purple-700 rounded text-xs">
                            {m}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}

                  {/* Implementation Hints */}
                  {aiInterpretation.implementation_hints?.length > 0 && (
                    <div>
                      <div className="font-medium text-purple-700 mb-1">Implementierungshinweise</div>
                      <ul className="list-disc list-inside text-slate-700 space-y-1">
                        {aiInterpretation.implementation_hints.map((h, i) => (
                          <li key={i}>{h}</li>
                        ))}
                      </ul>
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
        </section>

        {/* Implementation Details */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2 flex items-center gap-2">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
            </svg>
            Umsetzung (fuer Auditor)
          </h3>
          {editMode ? (
            <div className="space-y-3">
              <div>
                <label className="block text-xs text-slate-500 mb-1">Implementierungsstatus</label>
                <select
                  value={localData.implementation_status}
                  onChange={(e) => setLocalData({ ...localData, implementation_status: e.target.value })}
                  className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
                >
                  {Object.entries(IMPLEMENTATION_STATUS).map(([key, { label }]) => (
                    <option key={key} value={key}>{label}</option>
                  ))}
                </select>
              </div>
              <textarea
                value={localData.implementation_details}
                onChange={(e) => setLocalData({ ...localData, implementation_details: e.target.value })}
                placeholder="Beschreiben Sie, wie diese Anforderung in Breakpilot umgesetzt wurde..."
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                rows={4}
              />
            </div>
          ) : (
            <div className="bg-green-50 border border-green-200 rounded-lg p-4">
              <p className="text-sm text-green-800 whitespace-pre-wrap">
                {requirement.implementation_details || 'Noch keine Umsetzungsdetails dokumentiert'}
              </p>
            </div>
          )}
        </section>

        {/* Code References */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2">
            Code-Referenzen
          </h3>
          <div className="space-y-2">
            {(requirement.code_references || []).map((ref, idx) => (
              <div key={idx} className="flex items-center gap-2 bg-slate-50 p-2 rounded-lg text-sm">
                <code className="text-primary-600">{ref.file}{ref.line ? `:${ref.line}` : ''}</code>
                <span className="text-slate-500">-</span>
                <span className="text-slate-700">{ref.description}</span>
              </div>
            ))}
            {editMode && (
              <div className="flex gap-2">
                <input
                  type="text"
                  value={newCodeRef.file}
                  onChange={(e) => setNewCodeRef({ ...newCodeRef, file: e.target.value })}
                  placeholder="Datei (z.B. backend/auth.py)"
                  className="flex-1 px-2 py-1.5 text-sm border border-slate-300 rounded"
                />
                <input
                  type="text"
                  value={newCodeRef.line}
                  onChange={(e) => setNewCodeRef({ ...newCodeRef, line: e.target.value })}
                  placeholder="Zeile"
                  className="w-20 px-2 py-1.5 text-sm border border-slate-300 rounded"
                />
                <input
                  type="text"
                  value={newCodeRef.description}
                  onChange={(e) => setNewCodeRef({ ...newCodeRef, description: e.target.value })}
                  placeholder="Beschreibung"
                  className="flex-1 px-2 py-1.5 text-sm border border-slate-300 rounded"
                />
                <button
                  onClick={addCodeReference}
                  className="px-3 py-1.5 bg-primary-600 text-white rounded text-sm"
                >
                  +
                </button>
              </div>
            )}
          </div>
        </section>

        {/* Evidence */}
        <section>
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2 flex items-center gap-2">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
            </svg>
            Nachweis / Evidence
          </h3>
          {editMode ? (
            <textarea
              value={localData.evidence_description}
              onChange={(e) => setLocalData({ ...localData, evidence_description: e.target.value })}
              placeholder="Welche Nachweise belegen die Erfuellung dieser Anforderung?"
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
              rows={3}
            />
          ) : (
            <div className="bg-amber-50 border border-amber-200 rounded-lg p-4">
              <p className="text-sm text-amber-800">
                {requirement.evidence_description || 'Keine Nachweise beschrieben'}
              </p>
            </div>
          )}
        </section>

        {/* Auditor Section */}
        <section className="border-t border-slate-200 pt-4">
          <h3 className="text-sm font-semibold text-slate-700 uppercase tracking-wide mb-2 flex items-center gap-2">
            <svg className="w-4 h-4" 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>
            Auditor-Bereich
          </h3>
          {editMode ? (
            <div className="space-y-3">
              <div>
                <label className="block text-xs text-slate-500 mb-1">Audit-Status</label>
                <select
                  value={localData.audit_status}
                  onChange={(e) => setLocalData({ ...localData, audit_status: e.target.value })}
                  className="px-3 py-2 border border-slate-300 rounded-lg text-sm"
                >
                  {Object.entries(AUDIT_STATUS).map(([key, { label }]) => (
                    <option key={key} value={key}>{label}</option>
                  ))}
                </select>
              </div>
              <textarea
                value={localData.auditor_notes}
                onChange={(e) => setLocalData({ ...localData, auditor_notes: e.target.value })}
                placeholder="Notizen des Auditors..."
                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm"
                rows={3}
              />
            </div>
          ) : (
            <div className="bg-slate-50 border border-slate-200 rounded-lg p-4">
              <p className="text-sm text-slate-700">
                {requirement.auditor_notes || 'Keine Auditor-Notizen'}
              </p>
            </div>
          )}
        </section>
      </div>
    </div>
  )
}