'use client'

import React, { useState, useEffect, useRef } from 'react'
import { useSDK, Evidence as SDKEvidence, EvidenceType } from '@/lib/sdk'
import { StepHeader, STEP_EXPLANATIONS } from '@/components/sdk/StepHeader'
import {
  ConfidenceLevelBadge,
  TruthStatusBadge,
  GenerationModeBadge,
  ApprovalStatusBadge,
} from './components/anti-fake-badges'

// =============================================================================
// TYPES
// =============================================================================

type DisplayEvidenceType = 'document' | 'screenshot' | 'log' | 'audit-report' | 'certificate'
type DisplayFormat = 'pdf' | 'image' | 'text' | 'json'
type DisplayStatus = 'valid' | 'expired' | 'pending-review'

interface DisplayEvidence {
  id: string
  name: string
  description: string
  displayType: DisplayEvidenceType
  format: DisplayFormat
  controlId: string
  linkedRequirements: string[]
  linkedControls: string[]
  uploadedBy: string
  uploadedAt: Date
  validFrom: Date
  validUntil: Date | null
  status: DisplayStatus
  fileSize: string
  fileUrl: string | null
  // Anti-Fake-Evidence Phase 2
  confidenceLevel: string | null
  truthStatus: string | null
  generationMode: string | null
  approvalStatus: string | null
  requiresFourEyes: boolean
}

// =============================================================================
// HELPER FUNCTIONS
// =============================================================================

function mapEvidenceTypeToDisplay(type: EvidenceType): DisplayEvidenceType {
  switch (type) {
    case 'DOCUMENT': return 'document'
    case 'SCREENSHOT': return 'screenshot'
    case 'LOG': return 'log'
    case 'CERTIFICATE': return 'certificate'
    case 'AUDIT_REPORT': return 'audit-report'
    default: return 'document'
  }
}

function getEvidenceStatus(validUntil: Date | null): DisplayStatus {
  if (!validUntil) return 'pending-review'
  const now = new Date()
  if (validUntil < now) return 'expired'
  return 'valid'
}

// =============================================================================
// FALLBACK TEMPLATES
// =============================================================================

interface EvidenceTemplate {
  id: string
  name: string
  description: string
  type: EvidenceType
  displayType: DisplayEvidenceType
  format: DisplayFormat
  controlId: string
  linkedRequirements: string[]
  linkedControls: string[]
  uploadedBy: string
  validityDays: number
  fileSize: string
}

const evidenceTemplates: EvidenceTemplate[] = [
  {
    id: 'ev-dse-001',
    name: 'Datenschutzerklaerung v2.3',
    description: 'Aktuelle Datenschutzerklaerung fuer Website und App',
    type: 'DOCUMENT',
    displayType: 'document',
    format: 'pdf',
    controlId: 'ctrl-org-001',
    linkedRequirements: ['req-gdpr-13', 'req-gdpr-14'],
    linkedControls: ['ctrl-org-001'],
    uploadedBy: 'DSB',
    validityDays: 365,
    fileSize: '245 KB',
  },
  {
    id: 'ev-pentest-001',
    name: 'Penetrationstest Report Q4/2024',
    description: 'Externer Penetrationstest durch Security-Partner',
    type: 'AUDIT_REPORT',
    displayType: 'audit-report',
    format: 'pdf',
    controlId: 'ctrl-tom-001',
    linkedRequirements: ['req-gdpr-32', 'req-iso-a12'],
    linkedControls: ['ctrl-tom-001', 'ctrl-tom-002', 'ctrl-det-001'],
    uploadedBy: 'IT Security Team',
    validityDays: 365,
    fileSize: '2.1 MB',
  },
  {
    id: 'ev-iso-cert',
    name: 'ISO 27001 Zertifikat',
    description: 'Zertifizierung des ISMS',
    type: 'CERTIFICATE',
    displayType: 'certificate',
    format: 'pdf',
    controlId: 'ctrl-tom-001',
    linkedRequirements: ['req-iso-4.1', 'req-iso-5.1'],
    linkedControls: [],
    uploadedBy: 'QM Abteilung',
    validityDays: 365,
    fileSize: '156 KB',
  },
  {
    id: 'ev-schulung-001',
    name: 'Schulungsnachweis Datenschutz 2024',
    description: 'Teilnehmerliste und Schulungsinhalt',
    type: 'DOCUMENT',
    displayType: 'document',
    format: 'pdf',
    controlId: 'ctrl-org-001',
    linkedRequirements: ['req-gdpr-39'],
    linkedControls: ['ctrl-org-001'],
    uploadedBy: 'HR Team',
    validityDays: 365,
    fileSize: '890 KB',
  },
  {
    id: 'ev-rbac-001',
    name: 'Access Control Screenshot',
    description: 'Nachweis der RBAC-Konfiguration',
    type: 'SCREENSHOT',
    displayType: 'screenshot',
    format: 'image',
    controlId: 'ctrl-tom-001',
    linkedRequirements: ['req-gdpr-32'],
    linkedControls: ['ctrl-tom-001'],
    uploadedBy: 'Admin',
    validityDays: 0,
    fileSize: '1.2 MB',
  },
  {
    id: 'ev-log-001',
    name: 'Audit Log Export',
    description: 'Monatlicher Audit-Log Export',
    type: 'LOG',
    displayType: 'log',
    format: 'json',
    controlId: 'ctrl-det-001',
    linkedRequirements: ['req-gdpr-32'],
    linkedControls: ['ctrl-det-001'],
    uploadedBy: 'System',
    validityDays: 90,
    fileSize: '4.5 MB',
  },
]

// =============================================================================
// COMPONENTS
// =============================================================================

// =============================================================================
// CONFIDENCE FILTER COLORS (matching anti-fake-badges)
// =============================================================================

const confidenceFilterColors: Record<string, string> = {
  E0: 'bg-red-200 text-red-800',
  E1: 'bg-yellow-200 text-yellow-800',
  E2: 'bg-blue-200 text-blue-800',
  E3: 'bg-green-200 text-green-800',
  E4: 'bg-emerald-200 text-emerald-800',
}

// =============================================================================
// REVIEW MODAL
// =============================================================================

function ReviewModal({ evidence, onClose, onSuccess }: { evidence: DisplayEvidence; onClose: () => void; onSuccess: () => void }) {
  const [confidenceLevel, setConfidenceLevel] = useState(evidence.confidenceLevel || 'E1')
  const [truthStatus, setTruthStatus] = useState(evidence.truthStatus || 'uploaded')
  const [reviewedBy, setReviewedBy] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = async () => {
    if (!reviewedBy.trim()) { setError('Bitte E-Mail-Adresse angeben'); return }
    setSubmitting(true)
    setError(null)
    try {
      const res = await fetch(`/api/sdk/v1/compliance/evidence/${evidence.id}/review`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ confidence_level: confidenceLevel, truth_status: truthStatus, reviewed_by: reviewedBy }),
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({ detail: 'Review fehlgeschlagen' }))
        throw new Error(typeof err.detail === 'string' ? err.detail : JSON.stringify(err.detail))
      }
      onSuccess()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setSubmitting(false)
    }
  }

  const confidenceLevels = [
    { value: 'E0', label: 'E0 — Generiert' },
    { value: 'E1', label: 'E1 — Manuell' },
    { value: 'E2', label: 'E2 — Intern validiert' },
    { value: 'E3', label: 'E3 — System-beobachtet' },
    { value: 'E4', label: 'E4 — Extern auditiert' },
  ]

  const truthStatuses = [
    { value: 'generated', label: 'Generiert' },
    { value: 'uploaded', label: 'Hochgeladen' },
    { value: 'observed', label: 'Beobachtet' },
    { value: 'validated', label: 'Validiert' },
    { value: 'audited', label: 'Auditiert' },
  ]

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
        <h2 className="text-xl font-bold text-gray-900 mb-4">Evidence Reviewen</h2>
        <p className="text-sm text-gray-500 mb-4">{evidence.name}</p>

        {/* Current values */}
        <div className="mb-4 p-3 bg-gray-50 rounded-lg text-sm space-y-1">
          <div className="flex justify-between">
            <span className="text-gray-500">Aktuelles Confidence-Level:</span>
            <span className="font-medium">{evidence.confidenceLevel || '—'}</span>
          </div>
          <div className="flex justify-between">
            <span className="text-gray-500">Aktueller Truth-Status:</span>
            <span className="font-medium">{evidence.truthStatus || '—'}</span>
          </div>
        </div>

        {/* New confidence level */}
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">Neues Confidence-Level</label>
          <select value={confidenceLevel} onChange={e => setConfidenceLevel(e.target.value)}
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
            {confidenceLevels.map(l => <option key={l.value} value={l.value}>{l.label}</option>)}
          </select>
        </div>

        {/* New truth status */}
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">Neuer Truth-Status</label>
          <select value={truthStatus} onChange={e => setTruthStatus(e.target.value)}
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent">
            {truthStatuses.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
          </select>
        </div>

        {/* Reviewed by */}
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">Reviewer (E-Mail)</label>
          <input type="email" value={reviewedBy} onChange={e => setReviewedBy(e.target.value)}
            placeholder="reviewer@unternehmen.de"
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
        </div>

        {/* Four-eyes warning */}
        {evidence.requiresFourEyes && evidence.approvalStatus !== 'approved' && (
          <div className="mb-4 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
            <div className="flex items-start gap-2">
              <svg className="w-5 h-5 text-yellow-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
              </svg>
              <div className="text-sm text-yellow-800">
                <p className="font-medium">4-Augen-Prinzip aktiv</p>
                <p>Dieser Nachweis erfordert eine zusaetzliche Freigabe durch einen zweiten Reviewer.</p>
              </div>
            </div>
          </div>
        )}

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

        {/* Actions */}
        <div className="flex justify-end gap-3">
          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
            Abbrechen
          </button>
          <button onClick={handleSubmit} disabled={submitting}
            className="px-4 py-2 text-sm bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50">
            {submitting ? 'Wird gespeichert...' : 'Review abschliessen'}
          </button>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// REJECT MODAL
// =============================================================================

function RejectModal({ evidence, onClose, onSuccess }: { evidence: DisplayEvidence; onClose: () => void; onSuccess: () => void }) {
  const [reviewedBy, setReviewedBy] = useState('')
  const [rejectionReason, setRejectionReason] = useState('')
  const [submitting, setSubmitting] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleSubmit = async () => {
    if (!reviewedBy.trim()) { setError('Bitte E-Mail-Adresse angeben'); return }
    if (!rejectionReason.trim()) { setError('Bitte Ablehnungsgrund angeben'); return }
    setSubmitting(true)
    setError(null)
    try {
      const res = await fetch(`/api/sdk/v1/compliance/evidence/${evidence.id}/reject`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ reviewed_by: reviewedBy, rejection_reason: rejectionReason }),
      })
      if (!res.ok) {
        const err = await res.json().catch(() => ({ detail: 'Ablehnung fehlgeschlagen' }))
        throw new Error(typeof err.detail === 'string' ? err.detail : JSON.stringify(err.detail))
      }
      onSuccess()
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Unbekannter Fehler')
    } finally {
      setSubmitting(false)
    }
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
        <h2 className="text-xl font-bold text-gray-900 mb-4">Evidence Ablehnen</h2>
        <p className="text-sm text-gray-500 mb-4">{evidence.name}</p>

        {/* Reviewed by */}
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">Reviewer (E-Mail)</label>
          <input type="email" value={reviewedBy} onChange={e => setReviewedBy(e.target.value)}
            placeholder="reviewer@unternehmen.de"
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-transparent" />
        </div>

        {/* Rejection reason */}
        <div className="mb-4">
          <label className="block text-sm font-medium text-gray-700 mb-1">Ablehnungsgrund</label>
          <textarea value={rejectionReason} onChange={e => setRejectionReason(e.target.value)}
            placeholder="Bitte beschreiben Sie den Grund fuer die Ablehnung..."
            rows={4}
            className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-transparent resize-none" />
        </div>

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

        {/* Actions */}
        <div className="flex justify-end gap-3">
          <button onClick={onClose} className="px-4 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
            Abbrechen
          </button>
          <button onClick={handleSubmit} disabled={submitting}
            className="px-4 py-2 text-sm bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50">
            {submitting ? 'Wird abgelehnt...' : 'Ablehnen'}
          </button>
        </div>
      </div>
    </div>
  )
}

// =============================================================================
// AUDIT TRAIL PANEL
// =============================================================================

function AuditTrailPanel({ evidenceId, onClose }: { evidenceId: string; onClose: () => void }) {
  const [entries, setEntries] = useState<{ id: string; action: string; actor: string; timestamp: string; details: Record<string, unknown> | null }[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch(`/api/sdk/v1/compliance/audit-trail?entity_type=evidence&entity_id=${evidenceId}`)
      .then(res => res.json())
      .then(data => {
        const mapped = (data.entries || []).map((e: Record<string, unknown>) => ({
          id: e.id as string,
          action: e.action as string,
          actor: (e.performed_by || 'System') as string,
          timestamp: (e.performed_at || '') as string,
          details: {
            ...(e.field_changed ? { field: e.field_changed } : {}),
            ...(e.old_value ? { old: e.old_value } : {}),
            ...(e.new_value ? { new: e.new_value } : {}),
            ...(e.change_summary ? { summary: e.change_summary } : {}),
          } as Record<string, unknown>,
        }))
        setEntries(mapped)
      })
      .catch(() => {})
      .finally(() => setLoading(false))
  }, [evidenceId])

  const actionLabels: Record<string, { label: string; color: string }> = {
    created: { label: 'Erstellt', color: 'bg-blue-100 text-blue-700' },
    uploaded: { label: 'Hochgeladen', color: 'bg-purple-100 text-purple-700' },
    reviewed: { label: 'Reviewed', color: 'bg-green-100 text-green-700' },
    rejected: { label: 'Abgelehnt', color: 'bg-red-100 text-red-700' },
    updated: { label: 'Aktualisiert', color: 'bg-yellow-100 text-yellow-700' },
    deleted: { label: 'Geloescht', color: 'bg-gray-100 text-gray-700' },
    approved: { label: 'Genehmigt', color: 'bg-emerald-100 text-emerald-700' },
    four_eyes_first: { label: '1. Review (4-Augen)', color: 'bg-blue-100 text-blue-700' },
    four_eyes_final: { label: 'Finale Freigabe (4-Augen)', color: 'bg-emerald-100 text-emerald-700' },
  }

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl mx-4 p-6 max-h-[80vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-bold text-gray-900">Audit-Trail</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-xl">&times;</button>
        </div>

        {loading ? (
          <div className="flex justify-center py-12">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
          </div>
        ) : entries.length === 0 ? (
          <div className="py-12 text-center text-gray-500">
            <p>Keine Audit-Trail-Eintraege vorhanden.</p>
          </div>
        ) : (
          <div className="relative">
            {/* Timeline line */}
            <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200" />

            <div className="space-y-4">
              {entries.map((entry, idx) => {
                const meta = actionLabels[entry.action] || { label: entry.action, color: 'bg-gray-100 text-gray-700' }
                return (
                  <div key={entry.id || idx} className="relative flex items-start gap-4 pl-10">
                    {/* Timeline dot */}
                    <div className="absolute left-2.5 top-1.5 w-3 h-3 rounded-full bg-white border-2 border-purple-400" />

                    <div className="flex-1 bg-gray-50 rounded-lg p-3">
                      <div className="flex items-center gap-2 mb-1">
                        <span className={`px-2 py-0.5 text-xs rounded ${meta.color}`}>{meta.label}</span>
                        <span className="text-xs text-gray-400">
                          {entry.timestamp ? new Date(entry.timestamp).toLocaleString('de-DE') : '—'}
                        </span>
                      </div>
                      <div className="text-sm text-gray-600">
                        <span className="font-medium">{entry.actor || 'System'}</span>
                      </div>
                      {entry.details && Object.keys(entry.details).length > 0 && (
                        <div className="mt-2 text-xs text-gray-500 font-mono bg-white rounded p-2 border">
                          {Object.entries(entry.details).map(([k, v]) => (
                            <div key={k}><span className="text-gray-400">{k}:</span> {String(v)}</div>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

// =============================================================================
// EVIDENCE CARD
// =============================================================================

function EvidenceCard({ evidence, onDelete, onView, onDownload, onReview, onReject, onShowHistory }: { evidence: DisplayEvidence; onDelete: () => void; onView: () => void; onDownload: () => void; onReview: () => void; onReject: () => void; onShowHistory: () => void }) {
  const typeIcons = {
    document: (
      <svg className="w-6 h-6" 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>
    ),
    screenshot: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
      </svg>
    ),
    log: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
      </svg>
    ),
    'audit-report': (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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>
    ),
    certificate: (
      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
      </svg>
    ),
  }

  const statusColors = {
    valid: 'bg-green-100 text-green-700 border-green-200',
    expired: 'bg-red-100 text-red-700 border-red-200',
    'pending-review': 'bg-yellow-100 text-yellow-700 border-yellow-200',
  }

  const statusLabels = {
    valid: 'Gueltig',
    expired: 'Abgelaufen',
    'pending-review': 'Pruefung ausstehend',
  }

  return (
    <div className={`bg-white rounded-xl border-2 p-6 ${
      evidence.status === 'expired' ? 'border-red-200' :
      evidence.status === 'pending-review' ? 'border-yellow-200' : 'border-gray-200'
    }`}>
      <div className="flex items-start gap-4">
        <div className={`w-12 h-12 rounded-lg flex items-center justify-center ${
          evidence.displayType === 'certificate' ? 'bg-yellow-100 text-yellow-600' :
          evidence.displayType === 'audit-report' ? 'bg-purple-100 text-purple-600' :
          evidence.displayType === 'screenshot' ? 'bg-blue-100 text-blue-600' :
          evidence.displayType === 'log' ? 'bg-green-100 text-green-600' :
          'bg-gray-100 text-gray-600'
        }`}>
          {typeIcons[evidence.displayType]}
        </div>
        <div className="flex-1">
          <div className="flex items-center justify-between">
            <h3 className="text-lg font-semibold text-gray-900">{evidence.name}</h3>
            <div className="flex items-center gap-1.5 flex-wrap">
              <span className={`px-3 py-1 text-xs rounded-full ${statusColors[evidence.status]}`}>
                {statusLabels[evidence.status]}
              </span>
              <ConfidenceLevelBadge level={evidence.confidenceLevel} />
              <TruthStatusBadge status={evidence.truthStatus} />
              <GenerationModeBadge mode={evidence.generationMode} />
              <ApprovalStatusBadge status={evidence.approvalStatus} requiresFourEyes={evidence.requiresFourEyes} />
            </div>
          </div>
          <p className="text-sm text-gray-500 mt-1">{evidence.description}</p>

          <div className="mt-3 flex items-center gap-4 text-sm text-gray-500">
            <span>Hochgeladen: {evidence.uploadedAt.toLocaleDateString('de-DE')}</span>
            {evidence.validUntil && (
              <span className={evidence.status === 'expired' ? 'text-red-600' : ''}>
                Gueltig bis: {evidence.validUntil.toLocaleDateString('de-DE')}
              </span>
            )}
            <span>{evidence.fileSize}</span>
          </div>

          <div className="mt-3 flex items-center gap-2 flex-wrap">
            {evidence.linkedRequirements.map(req => (
              <span key={req} className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">
                {req}
              </span>
            ))}
            {evidence.linkedControls.map(ctrl => (
              <span key={ctrl} className="px-2 py-0.5 text-xs bg-green-50 text-green-600 rounded">
                {ctrl}
              </span>
            ))}
          </div>
        </div>
      </div>

      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
        <span className="text-sm text-gray-500">Hochgeladen von: {evidence.uploadedBy}</span>
        <div className="flex items-center gap-2">
          <button
            onClick={onView}
            disabled={!evidence.fileUrl}
            className="px-3 py-1 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
          >
            Anzeigen
          </button>
          <button
            onClick={onDownload}
            disabled={!evidence.fileUrl}
            className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
          >
            Herunterladen
          </button>
          <button
            onClick={onDelete}
            className="px-3 py-1 text-sm text-red-600 hover:bg-red-50 rounded-lg transition-colors"
          >
            Loeschen
          </button>
          {/* Review button — visible when review is possible */}
          {(evidence.approvalStatus === 'none' || evidence.approvalStatus === 'pending_first' || evidence.approvalStatus === 'first_approved' || !evidence.approvalStatus) && evidence.approvalStatus !== 'approved' && evidence.approvalStatus !== 'rejected' && (
            <button
              onClick={onReview}
              className="px-3 py-1 text-sm text-green-600 hover:bg-green-50 rounded-lg transition-colors font-medium"
            >
              Reviewen
            </button>
          )}
          {/* Reject button — visible for four-eyes evidence that's not yet resolved */}
          {evidence.requiresFourEyes && evidence.approvalStatus !== 'rejected' && evidence.approvalStatus !== 'approved' && (
            <button
              onClick={onReject}
              className="px-3 py-1 text-sm text-orange-600 hover:bg-orange-50 rounded-lg transition-colors"
            >
              Ablehnen
            </button>
          )}
          {/* History button */}
          <button
            onClick={onShowHistory}
            className="px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-lg transition-colors"
          >
            Historie
          </button>
        </div>
      </div>
    </div>
  )
}

function LoadingSkeleton() {
  return (
    <div className="space-y-4">
      {[1, 2, 3].map(i => (
        <div key={i} className="bg-white rounded-xl border border-gray-200 p-6 animate-pulse">
          <div className="flex items-start gap-4">
            <div className="w-12 h-12 bg-gray-200 rounded-lg" />
            <div className="flex-1">
              <div className="h-6 w-3/4 bg-gray-200 rounded mb-2" />
              <div className="h-4 w-full bg-gray-100 rounded" />
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

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

// =============================================================================
// EVIDENCE CHECK TYPES
// =============================================================================

interface EvidenceCheck {
  id: string
  check_code: string
  title: string
  description: string | null
  check_type: string
  target_url: string | null
  frequency: string
  is_active: boolean
  last_run_at: string | null
  next_run_at: string | null
}

interface CheckResult {
  id: string
  check_id: string
  run_status: string
  summary: string | null
  findings_count: number
  critical_findings: number
  duration_ms: number
  run_at: string
}

interface EvidenceMapping {
  id: string
  evidence_id: string
  control_code: string
  mapping_type: string
  verified_at: string | null
  verified_by: string | null
  notes: string | null
}

interface CoverageReport {
  total_controls: number
  controls_with_evidence: number
  controls_without_evidence: number
  coverage_percent: number
}

type EvidenceTabKey = 'evidence' | 'checks' | 'mapping' | 'report'

const CHECK_TYPE_LABELS: Record<string, { label: string; color: string }> = {
  tls_scan: { label: 'TLS-Scan', color: 'bg-blue-100 text-blue-700' },
  header_check: { label: 'Header-Check', color: 'bg-green-100 text-green-700' },
  certificate_check: { label: 'Zertifikat', color: 'bg-yellow-100 text-yellow-700' },
  dns_check: { label: 'DNS-Check', color: 'bg-purple-100 text-purple-700' },
  api_scan: { label: 'API-Scan', color: 'bg-indigo-100 text-indigo-700' },
  config_scan: { label: 'Config-Scan', color: 'bg-orange-100 text-orange-700' },
  port_scan: { label: 'Port-Scan', color: 'bg-red-100 text-red-700' },
}

const RUN_STATUS_LABELS: Record<string, { label: string; color: string }> = {
  running: { label: 'Laeuft...', color: 'bg-blue-100 text-blue-700' },
  passed: { label: 'Bestanden', color: 'bg-green-100 text-green-700' },
  failed: { label: 'Fehlgeschlagen', color: 'bg-red-100 text-red-700' },
  warning: { label: 'Warnung', color: 'bg-yellow-100 text-yellow-700' },
  error: { label: 'Fehler', color: 'bg-red-100 text-red-700' },
}

const CHECK_API = '/api/sdk/v1/compliance/evidence-checks'

export default function EvidencePage() {
  const { state, dispatch } = useSDK()
  const [activeTab, setActiveTab] = useState<EvidenceTabKey>('evidence')
  const [filter, setFilter] = useState<string>('all')
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [uploading, setUploading] = useState(false)
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [page, setPage] = useState(1)
  const [pageSize] = useState(20)
  const [total, setTotal] = useState(0)

  // Anti-Fake-Evidence metadata (keyed by evidence ID)
  const [antiFakeMeta, setAntiFakeMeta] = useState<Record<string, {
    confidenceLevel: string | null
    truthStatus: string | null
    generationMode: string | null
    approvalStatus: string | null
    requiresFourEyes: boolean
  }>>({})

  // Evidence Checks state
  const [checks, setChecks] = useState<EvidenceCheck[]>([])
  const [checksLoading, setChecksLoading] = useState(false)
  const [runningCheckId, setRunningCheckId] = useState<string | null>(null)
  const [checkResults, setCheckResults] = useState<Record<string, CheckResult[]>>({})

  // Mappings state
  const [mappings, setMappings] = useState<EvidenceMapping[]>([])
  const [coverageReport, setCoverageReport] = useState<CoverageReport | null>(null)
  const [seedingChecks, setSeedingChecks] = useState(false)

  // Phase 3: Review/Reject/AuditTrail state
  const [reviewEvidence, setReviewEvidence] = useState<DisplayEvidence | null>(null)
  const [rejectEvidence, setRejectEvidence] = useState<DisplayEvidence | null>(null)
  const [auditTrailId, setAuditTrailId] = useState<string | null>(null)
  const [confidenceFilter, setConfidenceFilter] = useState<string | null>(null)
  const [refreshKey, setRefreshKey] = useState(0)

  // Fetch evidence from backend on mount and when page changes
  useEffect(() => {
    const fetchEvidence = async () => {
      try {
        setLoading(true)
        const res = await fetch(`/api/sdk/v1/compliance/evidence?page=${page}&limit=${pageSize}`)
        if (res.ok) {
          const data = await res.json()
          if (data.total !== undefined) setTotal(data.total)
          const backendEvidence = data.evidence || data
          if (Array.isArray(backendEvidence) && backendEvidence.length > 0) {
            const metaMap: typeof antiFakeMeta = {}
            const mapped: SDKEvidence[] = backendEvidence.map((e: Record<string, unknown>) => {
              const id = (e.id || '') as string
              metaMap[id] = {
                confidenceLevel: (e.confidence_level || null) as string | null,
                truthStatus: (e.truth_status || null) as string | null,
                generationMode: (e.generation_mode || null) as string | null,
                approvalStatus: (e.approval_status || null) as string | null,
                requiresFourEyes: !!e.requires_four_eyes,
              }
              return {
                id,
                controlId: (e.control_id || '') as string,
                type: ((e.evidence_type || 'DOCUMENT') as string).toUpperCase() as EvidenceType,
                name: (e.title || e.name || '') as string,
                description: (e.description || '') as string,
                fileUrl: (e.artifact_url || null) as string | null,
                validFrom: e.valid_from ? new Date(e.valid_from as string) : new Date(),
                validUntil: e.valid_until ? new Date(e.valid_until as string) : null,
                uploadedBy: (e.uploaded_by || 'System') as string,
                uploadedAt: e.created_at ? new Date(e.created_at as string) : new Date(),
              }
            })
            setAntiFakeMeta(metaMap)
            dispatch({ type: 'SET_STATE', payload: { evidence: mapped } })
            setError(null)
            return
          }
        }
        loadFromTemplates()
      } catch {
        loadFromTemplates()
      } finally {
        setLoading(false)
      }
    }

    const loadFromTemplates = () => {
      if (state.evidence.length > 0) return
      if (state.controls.length === 0) return

      const relevantEvidence = evidenceTemplates.filter(e =>
        state.controls.some(c => c.id === e.controlId || e.linkedControls.includes(c.id))
      )

      const now = new Date()
      relevantEvidence.forEach(template => {
        const validFrom = new Date(now)
        validFrom.setMonth(validFrom.getMonth() - 1)

        const validUntil = template.validityDays > 0
          ? new Date(validFrom.getTime() + template.validityDays * 24 * 60 * 60 * 1000)
          : null

        const sdkEvidence: SDKEvidence = {
          id: template.id,
          controlId: template.controlId,
          type: template.type,
          name: template.name,
          description: template.description,
          fileUrl: null,
          validFrom,
          validUntil,
          uploadedBy: template.uploadedBy,
          uploadedAt: validFrom,
        }
        dispatch({ type: 'ADD_EVIDENCE', payload: sdkEvidence })
      })
    }

    fetchEvidence()
  }, [page, pageSize, refreshKey]) // eslint-disable-line react-hooks/exhaustive-deps

  // Convert SDK evidence to display evidence
  const displayEvidence: DisplayEvidence[] = state.evidence.map(ev => {
    const template = evidenceTemplates.find(t => t.id === ev.id)

    const meta = antiFakeMeta[ev.id]
    return {
      id: ev.id,
      name: ev.name,
      description: ev.description,
      displayType: mapEvidenceTypeToDisplay(ev.type),
      format: template?.format || 'pdf',
      controlId: ev.controlId,
      linkedRequirements: template?.linkedRequirements || [],
      linkedControls: template?.linkedControls || [ev.controlId],
      uploadedBy: ev.uploadedBy,
      uploadedAt: ev.uploadedAt,
      validFrom: ev.validFrom,
      validUntil: ev.validUntil,
      status: getEvidenceStatus(ev.validUntil),
      fileSize: template?.fileSize || 'Unbekannt',
      fileUrl: ev.fileUrl,
      confidenceLevel: meta?.confidenceLevel || null,
      truthStatus: meta?.truthStatus || null,
      generationMode: meta?.generationMode || null,
      approvalStatus: meta?.approvalStatus || null,
      requiresFourEyes: meta?.requiresFourEyes || false,
    }
  })

  const filteredEvidence = (filter === 'all'
    ? displayEvidence
    : displayEvidence.filter(e => e.status === filter || e.displayType === filter)
  ).filter(e => !confidenceFilter || e.confidenceLevel === confidenceFilter)

  const validCount = displayEvidence.filter(e => e.status === 'valid').length
  const expiredCount = displayEvidence.filter(e => e.status === 'expired').length
  const pendingCount = displayEvidence.filter(e => e.status === 'pending-review').length

  const handleDelete = async (evidenceId: string) => {
    if (!confirm('Moechten Sie diesen Nachweis wirklich loeschen?')) return

    dispatch({ type: 'DELETE_EVIDENCE', payload: evidenceId })

    try {
      await fetch(`/api/sdk/v1/compliance/evidence/${evidenceId}`, {
        method: 'DELETE',
      })
    } catch {
      // Silently fail — SDK state is already updated
    }
  }

  const handleUpload = async (file: File) => {
    setUploading(true)
    setError(null)

    try {
      // Use the first control as default, or a generic one
      const controlId = state.controls.length > 0 ? state.controls[0].id : 'GENERIC'

      const params = new URLSearchParams({
        control_id: controlId,
        evidence_type: 'document',
        title: file.name,
      })

      const formData = new FormData()
      formData.append('file', file)

      const res = await fetch(`/api/sdk/v1/compliance/evidence/upload?${params}`, {
        method: 'POST',
        body: formData,
      })

      if (!res.ok) {
        const errData = await res.json().catch(() => ({ error: 'Upload fehlgeschlagen' }))
        throw new Error(errData.error || errData.detail || 'Upload fehlgeschlagen')
      }

      const data = await res.json()

      // Add to SDK state
      const newEvidence: SDKEvidence = {
        id: data.id || `ev-${Date.now()}`,
        controlId: controlId,
        type: 'DOCUMENT',
        name: file.name,
        description: `Hochgeladen am ${new Date().toLocaleDateString('de-DE')}`,
        fileUrl: data.artifact_url || null,
        validFrom: new Date(),
        validUntil: null,
        uploadedBy: 'Aktueller Benutzer',
        uploadedAt: new Date(),
      }
      dispatch({ type: 'ADD_EVIDENCE', payload: newEvidence })
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Upload fehlgeschlagen')
    } finally {
      setUploading(false)
    }
  }

  const handleView = (ev: DisplayEvidence) => {
    if (ev.fileUrl) {
      window.open(ev.fileUrl, '_blank')
    } else {
      alert('Keine Datei vorhanden')
    }
  }

  const handleDownload = (ev: DisplayEvidence) => {
    if (!ev.fileUrl) return
    const a = document.createElement('a')
    a.href = ev.fileUrl
    a.download = ev.name
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
  }

  const handleUploadClick = () => {
    fileInputRef.current?.click()
  }

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      handleUpload(file)
      e.target.value = '' // Reset input
    }
  }

  // Load checks when tab changes
  const loadChecks = async () => {
    setChecksLoading(true)
    try {
      const res = await fetch(`${CHECK_API}?limit=50`)
      if (res.ok) {
        const data = await res.json()
        setChecks(data.checks || [])
      }
    } catch { /* silent */ }
    finally { setChecksLoading(false) }
  }

  const runCheck = async (checkId: string) => {
    setRunningCheckId(checkId)
    try {
      const res = await fetch(`${CHECK_API}/${checkId}/run`, { method: 'POST' })
      if (res.ok) {
        const result = await res.json()
        setCheckResults(prev => ({
          ...prev,
          [checkId]: [result, ...(prev[checkId] || [])].slice(0, 5),
        }))
        loadChecks() // refresh last_run_at
      }
    } catch { /* silent */ }
    finally { setRunningCheckId(null) }
  }

  const loadCheckResults = async (checkId: string) => {
    try {
      const res = await fetch(`${CHECK_API}/${checkId}/results?limit=5`)
      if (res.ok) {
        const data = await res.json()
        setCheckResults(prev => ({ ...prev, [checkId]: data.results || [] }))
      }
    } catch { /* silent */ }
  }

  const seedChecks = async () => {
    setSeedingChecks(true)
    try {
      await fetch(`${CHECK_API}/seed`, { method: 'POST' })
      loadChecks()
    } catch { /* silent */ }
    finally { setSeedingChecks(false) }
  }

  const loadMappings = async () => {
    try {
      const res = await fetch(`${CHECK_API}/mappings`)
      if (res.ok) {
        const data = await res.json()
        setMappings(data.mappings || [])
      }
    } catch { /* silent */ }
  }

  const loadCoverageReport = async () => {
    try {
      const res = await fetch(`${CHECK_API}/mappings/report`)
      if (res.ok) setCoverageReport(await res.json())
    } catch { /* silent */ }
  }

  useEffect(() => {
    if (activeTab === 'checks' && checks.length === 0) loadChecks()
    if (activeTab === 'mapping') { loadMappings(); loadCoverageReport() }
    if (activeTab === 'report') loadCoverageReport()
  }, [activeTab]) // eslint-disable-line react-hooks/exhaustive-deps

  const stepInfo = STEP_EXPLANATIONS['evidence']

  const evidenceTabs: { key: EvidenceTabKey; label: string }[] = [
    { key: 'evidence', label: 'Nachweise' },
    { key: 'checks', label: 'Automatische Checks' },
    { key: 'mapping', label: 'Control-Mapping' },
    { key: 'report', label: 'Report' },
  ]

  return (
    <div className="space-y-6">
      {/* Hidden file input */}
      <input
        ref={fileInputRef}
        type="file"
        className="hidden"
        onChange={handleFileChange}
        accept=".pdf,.doc,.docx,.png,.jpg,.jpeg,.json,.csv,.txt"
      />

      {/* Step Header */}
      <StepHeader
        stepId="evidence"
        title={stepInfo.title}
        description={stepInfo.description}
        explanation={stepInfo.explanation}
        tips={stepInfo.tips}
      >
        <button
          onClick={handleUploadClick}
          disabled={uploading}
          className="flex items-center gap-2 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
        >
          {uploading ? (
            <>
              <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
              </svg>
              Wird hochgeladen...
            </>
          ) : (
            <>
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
              </svg>
              Nachweis hochladen
            </>
          )}
        </button>
      </StepHeader>

      {/* Tab Navigation */}
      <div className="bg-white rounded-xl shadow-sm border">
        <div className="flex border-b">
          {evidenceTabs.map(tab => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`px-6 py-3 text-sm font-medium transition-colors ${
                activeTab === tab.key
                  ? 'text-purple-600 border-b-2 border-purple-600'
                  : 'text-gray-500 hover:text-gray-700'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* Error Banner */}
      {error && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex items-center justify-between">
          <span>{error}</span>
          <button onClick={() => setError(null)} className="text-red-500 hover:text-red-700">&times;</button>
        </div>
      )}

      {/* ============================================================ */}
      {/* TAB: Nachweise (existing content) */}
      {/* ============================================================ */}
      {activeTab === 'evidence' && <>

      {/* Controls Alert */}
      {state.controls.length === 0 && !loading && (
        <div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
          <div className="flex items-start gap-3">
            <svg className="w-5 h-5 text-amber-600 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
            </svg>
            <div>
              <h4 className="font-medium text-amber-800">Keine Kontrollen definiert</h4>
              <p className="text-sm text-amber-700 mt-1">
                Bitte definieren Sie zuerst Kontrollen, um die zugehoerigen Nachweise zu laden.
              </p>
            </div>
          </div>
        </div>
      )}

      {/* Stats */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div className="bg-white rounded-xl border border-gray-200 p-6">
          <div className="text-sm text-gray-500">Gesamt</div>
          <div className="text-3xl font-bold text-gray-900">{displayEvidence.length}</div>
        </div>
        <div className="bg-white rounded-xl border border-green-200 p-6">
          <div className="text-sm text-green-600">Gueltig</div>
          <div className="text-3xl font-bold text-green-600">{validCount}</div>
        </div>
        <div className="bg-white rounded-xl border border-red-200 p-6">
          <div className="text-sm text-red-600">Abgelaufen</div>
          <div className="text-3xl font-bold text-red-600">{expiredCount}</div>
        </div>
        <div className="bg-white rounded-xl border border-yellow-200 p-6">
          <div className="text-sm text-yellow-600">Pruefung ausstehend</div>
          <div className="text-3xl font-bold text-yellow-600">{pendingCount}</div>
        </div>
      </div>

      {/* Filter */}
      <div className="flex items-center gap-2 flex-wrap">
        <span className="text-sm text-gray-500">Filter:</span>
        {['all', 'valid', 'expired', 'pending-review', 'document', 'certificate', 'audit-report'].map(f => (
          <button
            key={f}
            onClick={() => setFilter(f)}
            className={`px-3 py-1 text-sm 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 === 'valid' ? 'Gueltig' :
             f === 'expired' ? 'Abgelaufen' :
             f === 'pending-review' ? 'Ausstehend' :
             f === 'document' ? 'Dokumente' :
             f === 'certificate' ? 'Zertifikate' : 'Audit-Berichte'}
          </button>
        ))}
        <span className="text-gray-300 mx-1">|</span>
        {['E0', 'E1', 'E2', 'E3', 'E4'].map(level => (
          <button
            key={level}
            onClick={() => setConfidenceFilter(confidenceFilter === level ? null : level)}
            className={`px-3 py-1 text-sm rounded-full transition-colors ${
              confidenceFilter === level
                ? confidenceFilterColors[level]
                : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
            }`}
          >
            {level}
          </button>
        ))}
      </div>

      {/* Loading State */}
      {loading && <LoadingSkeleton />}

      {/* Evidence List */}
      {!loading && (
        <div className="space-y-4">
          {filteredEvidence.map(ev => (
            <EvidenceCard
              key={ev.id}
              evidence={ev}
              onDelete={() => handleDelete(ev.id)}
              onView={() => handleView(ev)}
              onDownload={() => handleDownload(ev)}
              onReview={() => setReviewEvidence(ev)}
              onReject={() => setRejectEvidence(ev)}
              onShowHistory={() => setAuditTrailId(ev.id)}
            />
          ))}
        </div>
      )}

      {/* Pagination */}
      {!loading && total > pageSize && (
        <div className="flex items-center justify-between bg-white rounded-xl border border-gray-200 p-4">
          <span className="text-sm text-gray-500">
            Zeige {((page - 1) * pageSize) + 1}–{Math.min(page * pageSize, total)} von {total} Nachweisen
          </span>
          <div className="flex items-center gap-2">
            <button
              onClick={() => setPage(p => Math.max(1, p - 1))}
              disabled={page <= 1}
              className="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
            >
              Zurueck
            </button>
            <span className="text-sm text-gray-700">
              Seite {page} von {Math.ceil(total / pageSize)}
            </span>
            <button
              onClick={() => setPage(p => Math.min(Math.ceil(total / pageSize), p + 1))}
              disabled={page >= Math.ceil(total / pageSize)}
              className="px-3 py-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-40 disabled:cursor-not-allowed"
            >
              Weiter
            </button>
          </div>
        </div>
      )}

      {!loading && filteredEvidence.length === 0 && state.controls.length > 0 && (
        <div className="bg-white rounded-xl border border-gray-200 p-12 text-center">
          <div className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
            <svg className="w-8 h-8 text-gray-400" 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>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">Keine Nachweise gefunden</h3>
          <p className="mt-2 text-gray-500">Passen Sie den Filter an oder laden Sie neue Nachweise hoch.</p>
        </div>
      )}

      </>}

      {/* ============================================================ */}
      {/* TAB: Automatische Checks */}
      {/* ============================================================ */}
      {activeTab === 'checks' && (
        <>
          {/* Seed if empty */}
          {!checksLoading && checks.length === 0 && (
            <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg flex items-center justify-between">
              <div>
                <p className="font-medium text-yellow-800">Keine automatischen Checks vorhanden</p>
                <p className="text-sm text-yellow-700">Laden Sie ca. 15 Standard-Checks (TLS, Header, Zertifikate, etc.).</p>
              </div>
              <button onClick={seedChecks} disabled={seedingChecks}
                className="px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 disabled:opacity-50">
                {seedingChecks ? 'Lade...' : 'Standard-Checks laden'}
              </button>
            </div>
          )}

          {checksLoading ? (
            <div className="flex justify-center py-12">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
            </div>
          ) : (
            <div className="space-y-3">
              {checks.map(check => {
                const typeMeta = CHECK_TYPE_LABELS[check.check_type] || { label: check.check_type, color: 'bg-gray-100 text-gray-700' }
                const results = checkResults[check.id] || []
                const lastResult = results[0]
                const isRunning = runningCheckId === check.id

                return (
                  <div key={check.id} className="bg-white rounded-xl border border-gray-200 p-5">
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <h4 className="font-medium text-gray-900">{check.title}</h4>
                          <span className={`px-2 py-0.5 text-xs rounded ${typeMeta.color}`}>{typeMeta.label}</span>
                          {!check.is_active && (
                            <span className="px-2 py-0.5 text-xs rounded bg-gray-100 text-gray-500">Deaktiviert</span>
                          )}
                        </div>
                        {check.description && <p className="text-sm text-gray-500 mt-1">{check.description}</p>}
                        <div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
                          <span>Code: {check.check_code}</span>
                          {check.target_url && <span>Ziel: {check.target_url}</span>}
                          <span>Frequenz: {check.frequency}</span>
                          {check.last_run_at && <span>Letzter Lauf: {new Date(check.last_run_at).toLocaleDateString('de-DE')}</span>}
                        </div>
                      </div>
                      <div className="flex items-center gap-2 ml-4">
                        {lastResult && (
                          <span className={`px-2 py-0.5 text-xs rounded ${RUN_STATUS_LABELS[lastResult.run_status]?.color || ''}`}>
                            {RUN_STATUS_LABELS[lastResult.run_status]?.label || lastResult.run_status}
                          </span>
                        )}
                        <button
                          onClick={() => { runCheck(check.id); loadCheckResults(check.id) }}
                          disabled={isRunning}
                          className="px-3 py-1.5 text-xs bg-purple-600 text-white rounded-lg hover:bg-purple-700 disabled:opacity-50"
                        >
                          {isRunning ? 'Laeuft...' : 'Ausfuehren'}
                        </button>
                        <button
                          onClick={() => loadCheckResults(check.id)}
                          className="px-3 py-1.5 text-xs border rounded-lg hover:bg-gray-50"
                        >
                          Historie
                        </button>
                      </div>
                    </div>

                    {/* Results */}
                    {results.length > 0 && (
                      <div className="mt-3 border-t pt-3">
                        <p className="text-xs font-medium text-gray-500 mb-2">Letzte Ergebnisse</p>
                        <div className="space-y-1">
                          {results.slice(0, 3).map(r => (
                            <div key={r.id} className="flex items-center gap-3 text-xs">
                              <span className={`px-1.5 py-0.5 rounded ${RUN_STATUS_LABELS[r.run_status]?.color || 'bg-gray-100'}`}>
                                {RUN_STATUS_LABELS[r.run_status]?.label || r.run_status}
                              </span>
                              <span className="text-gray-500">{new Date(r.run_at).toLocaleString('de-DE')}</span>
                              <span className="text-gray-400">{r.duration_ms}ms</span>
                              {r.findings_count > 0 && (
                                <span className="text-orange-600">{r.findings_count} Findings ({r.critical_findings} krit.)</span>
                              )}
                              {r.summary && <span className="text-gray-600 truncate">{r.summary}</span>}
                            </div>
                          ))}
                        </div>
                      </div>
                    )}
                  </div>
                )
              })}
            </div>
          )}
        </>
      )}

      {/* ============================================================ */}
      {/* TAB: Control-Mapping */}
      {/* ============================================================ */}
      {activeTab === 'mapping' && (
        <>
          {coverageReport && (
            <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div className="bg-white rounded-xl border border-gray-200 p-6">
                <p className="text-sm text-gray-500">Gesamt Controls</p>
                <p className="text-3xl font-bold text-gray-900">{coverageReport.total_controls}</p>
              </div>
              <div className="bg-white rounded-xl border border-green-200 p-6">
                <p className="text-sm text-green-600">Mit Nachweis</p>
                <p className="text-3xl font-bold text-green-600">{coverageReport.controls_with_evidence}</p>
              </div>
              <div className="bg-white rounded-xl border border-red-200 p-6">
                <p className="text-sm text-red-600">Ohne Nachweis</p>
                <p className="text-3xl font-bold text-red-600">{coverageReport.controls_without_evidence}</p>
              </div>
              <div className="bg-white rounded-xl border border-purple-200 p-6">
                <p className="text-sm text-purple-600">Abdeckung</p>
                <p className="text-3xl font-bold text-purple-600">{coverageReport.coverage_percent.toFixed(0)}%</p>
              </div>
            </div>
          )}

          <div className="bg-white rounded-xl shadow-sm border overflow-hidden">
            <div className="p-4 border-b">
              <h3 className="font-semibold text-gray-900">Evidence-Control-Verknuepfungen ({mappings.length})</h3>
            </div>
            {mappings.length === 0 ? (
              <div className="p-8 text-center text-gray-500">
                <p>Noch keine Verknuepfungen erstellt.</p>
                <p className="text-sm mt-1">Fuehren Sie automatische Checks aus, um Nachweise automatisch mit Controls zu verknuepfen.</p>
              </div>
            ) : (
              <table className="w-full">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Control</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Evidence</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Typ</th>
                    <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Verifiziert</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-200">
                  {mappings.map(m => (
                    <tr key={m.id} className="hover:bg-gray-50">
                      <td className="px-4 py-3 font-mono text-sm text-purple-600">{m.control_code}</td>
                      <td className="px-4 py-3 text-sm text-gray-700">{m.evidence_id.slice(0, 8)}...</td>
                      <td className="px-4 py-3">
                        <span className="px-2 py-0.5 text-xs rounded bg-blue-100 text-blue-700">{m.mapping_type}</span>
                      </td>
                      <td className="px-4 py-3 text-sm text-gray-500">
                        {m.verified_at ? `${new Date(m.verified_at).toLocaleDateString('de-DE')} von ${m.verified_by || '—'}` : 'Ausstehend'}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </>
      )}

      {/* ============================================================ */}
      {/* TAB: Report */}
      {/* ============================================================ */}
      {activeTab === 'report' && (
        <div className="bg-white rounded-xl shadow-sm border p-6">
          <h3 className="text-lg font-semibold text-gray-900 mb-6">Evidence Coverage Report</h3>

          {!coverageReport ? (
            <div className="flex justify-center py-12">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600" />
            </div>
          ) : (
            <>
              {/* Coverage Bar */}
              <div className="mb-8">
                <div className="flex items-center justify-between mb-2">
                  <span className="text-sm font-medium text-gray-700">Gesamt-Abdeckung</span>
                  <span className={`text-2xl font-bold ${
                    coverageReport.coverage_percent >= 80 ? 'text-green-600' :
                    coverageReport.coverage_percent >= 50 ? 'text-yellow-600' : 'text-red-600'
                  }`}>
                    {coverageReport.coverage_percent.toFixed(1)}%
                  </span>
                </div>
                <div className="h-4 bg-gray-200 rounded-full overflow-hidden">
                  <div
                    className={`h-full transition-all duration-500 ${
                      coverageReport.coverage_percent >= 80 ? 'bg-green-500' :
                      coverageReport.coverage_percent >= 50 ? 'bg-yellow-500' : 'bg-red-500'
                    }`}
                    style={{ width: `${coverageReport.coverage_percent}%` }}
                  />
                </div>
              </div>

              {/* Summary */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                <div className="p-4 bg-gray-50 rounded-lg text-center">
                  <p className="text-3xl font-bold text-gray-900">{coverageReport.total_controls}</p>
                  <p className="text-sm text-gray-500">Controls gesamt</p>
                </div>
                <div className="p-4 bg-green-50 rounded-lg text-center">
                  <p className="text-3xl font-bold text-green-600">{coverageReport.controls_with_evidence}</p>
                  <p className="text-sm text-green-600">Mit Nachweis belegt</p>
                </div>
                <div className="p-4 bg-red-50 rounded-lg text-center">
                  <p className="text-3xl font-bold text-red-600">{coverageReport.controls_without_evidence}</p>
                  <p className="text-sm text-red-600">Ohne Nachweis</p>
                </div>
              </div>

              {/* Check Summary */}
              <div className="border-t pt-6">
                <h4 className="font-medium text-gray-900 mb-3">Automatische Checks</h4>
                <div className="flex items-center gap-4 text-sm text-gray-600">
                  <span>{checks.length} Check-Definitionen</span>
                  <span>{checks.filter(c => c.is_active).length} aktiv</span>
                  <span>{checks.filter(c => c.last_run_at).length} mindestens 1x ausgefuehrt</span>
                </div>
              </div>

              {/* Evidence Summary */}
              <div className="border-t pt-6 mt-6">
                <h4 className="font-medium text-gray-900 mb-3">Nachweise</h4>
                <div className="flex items-center gap-4 text-sm text-gray-600">
                  <span>{displayEvidence.length} Nachweise gesamt</span>
                  <span className="text-green-600">{validCount} gueltig</span>
                  <span className="text-red-600">{expiredCount} abgelaufen</span>
                  <span className="text-yellow-600">{pendingCount} ausstehend</span>
                </div>
              </div>
            </>
          )}
        </div>
      )}

      {/* Phase 3 Modals */}
      {reviewEvidence && (
        <ReviewModal
          evidence={reviewEvidence}
          onClose={() => setReviewEvidence(null)}
          onSuccess={() => { setReviewEvidence(null); setRefreshKey(k => k + 1) }}
        />
      )}
      {rejectEvidence && (
        <RejectModal
          evidence={rejectEvidence}
          onClose={() => setRejectEvidence(null)}
          onSuccess={() => { setRejectEvidence(null); setRefreshKey(k => k + 1) }}
        />
      )}
      {auditTrailId && (
        <AuditTrailPanel
          evidenceId={auditTrailId}
          onClose={() => setAuditTrailId(null)}
        />
      )}
    </div>
  )
}