breakpilot-lehrer/website/app/admin/compliance/evidence/_components/EvidenceCard.tsx

interface Evidence {
  id: string
  control_id: string
  evidence_type: string
  title: string
  description: string
  artifact_url: string | null
  file_size_bytes: number | null
  status: string
  collected_at: string
}

const EVIDENCE_TYPE_ICONS: Record<string, string> = {
  scan_report: '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',
  policy_document: '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',
  config_snapshot: 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4',
  test_result: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
  screenshot: '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',
  external_link: 'M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14',
  manual_upload: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12',
}

const STATUS_STYLES: Record<string, string> = {
  valid: 'bg-green-100 text-green-700',
  expired: 'bg-red-100 text-red-700',
  pending: 'bg-yellow-100 text-yellow-700',
  failed: 'bg-red-100 text-red-700',
}

function formatFileSize(bytes: number | null) {
  if (!bytes) return '-'
  if (bytes < 1024) return `${bytes} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
}

interface EvidenceCardProps {
  evidence: Evidence
  controlTitle: string
}

export function EvidenceCard({ evidence: ev, controlTitle }: EvidenceCardProps) {
  const defaultIcon = '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'

  return (
    <div className="bg-white rounded-xl shadow-sm border p-4 hover:border-primary-300 transition-colors">
      <div className="flex items-start justify-between mb-3">
        <div className="flex items-center gap-2">
          <div className="w-10 h-10 bg-slate-100 rounded-lg flex items-center justify-center">
            <svg className="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={EVIDENCE_TYPE_ICONS[ev.evidence_type] || defaultIcon} />
            </svg>
          </div>
          <span className={`px-2 py-0.5 text-xs rounded-full ${STATUS_STYLES[ev.status] || 'bg-slate-100 text-slate-700'}`}>
            {ev.status}
          </span>
        </div>
        <span className="text-xs text-slate-500 font-mono">{controlTitle}</span>
      </div>
      <h4 className="font-medium text-slate-900 mb-1">{ev.title}</h4>
      {ev.description && <p className="text-sm text-slate-500 mb-3 line-clamp-2">{ev.description}</p>}
      <div className="flex items-center justify-between text-xs text-slate-500 pt-3 border-t">
        <span>{ev.evidence_type.replace('_', ' ')}</span>
        <span>{formatFileSize(ev.file_size_bytes)}</span>
      </div>
      {ev.artifact_url && (
        <a href={ev.artifact_url} target="_blank" rel="noopener noreferrer"
          className="mt-3 block text-sm text-primary-600 hover:text-primary-700 truncate">
          {ev.artifact_url}
        </a>
      )}
      <div className="mt-3 text-xs text-slate-400">
        Erfasst: {new Date(ev.collected_at).toLocaleDateString('de-DE')}
      </div>
    </div>
  )
}