breakpilot-compliance/admin-compliance/app/sdk/security-backlog/_components/SecurityItemCard.tsx

'use client'

import React from 'react'
import type { SecurityItem } from '../_hooks/useSecurityBacklog'

export function SecurityItemCard({
  item,
  onEdit,
  onDelete,
  onStatusChange,
}: {
  item: SecurityItem
  onEdit: (item: SecurityItem) => void
  onDelete: (id: string) => void
  onStatusChange: (id: string, status: string) => void
}) {
  const typeLabels = {
    vulnerability: 'Schwachstelle',
    misconfiguration: 'Fehlkonfiguration',
    compliance: 'Compliance',
    hardening: 'Haertung',
  }

  const typeColors = {
    vulnerability: 'bg-red-100 text-red-700',
    misconfiguration: 'bg-orange-100 text-orange-700',
    compliance: 'bg-purple-100 text-purple-700',
    hardening: 'bg-blue-100 text-blue-700',
  }

  const severityColors = {
    critical: 'bg-red-500 text-white',
    high: 'bg-orange-500 text-white',
    medium: 'bg-yellow-500 text-white',
    low: 'bg-green-500 text-white',
  }

  const statusColors = {
    open: 'bg-blue-100 text-blue-700',
    'in-progress': 'bg-yellow-100 text-yellow-700',
    resolved: 'bg-green-100 text-green-700',
    'accepted-risk': 'bg-gray-100 text-gray-600',
  }

  const statusLabels = {
    open: 'Offen',
    'in-progress': 'In Bearbeitung',
    resolved: 'Behoben',
    'accepted-risk': 'Akzeptiert',
  }

  const isOverdue = item.due_date && new Date(item.due_date) < new Date() && item.status !== 'resolved'

  return (
    <div className={`bg-white rounded-xl border-2 p-6 ${
      item.severity === 'critical' && item.status !== 'resolved' ? 'border-red-300' :
      isOverdue ? 'border-orange-300' :
      item.status === 'resolved' ? 'border-green-200' : 'border-gray-200'
    }`}>
      <div className="flex items-start justify-between">
        <div className="flex-1">
          <div className="flex items-center gap-2 mb-2">
            <span className={`px-2 py-1 text-xs rounded-full ${severityColors[item.severity]}`}>
              {item.severity.toUpperCase()}
            </span>
            <span className={`px-2 py-1 text-xs rounded-full ${typeColors[item.type]}`}>
              {typeLabels[item.type]}
            </span>
            <span className={`px-2 py-1 text-xs rounded-full ${statusColors[item.status]}`}>
              {statusLabels[item.status]}
            </span>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">{item.title}</h3>
          {item.description && <p className="text-sm text-gray-500 mt-1">{item.description}</p>}
        </div>
      </div>

      <div className="mt-4 grid grid-cols-2 gap-4 text-sm">
        {item.affected_asset && (
          <div>
            <span className="text-gray-500">Betroffenes Asset: </span>
            <span className="font-medium text-gray-700">{item.affected_asset}</span>
          </div>
        )}
        {item.source && (
          <div>
            <span className="text-gray-500">Quelle: </span>
            <span className="font-medium text-gray-700">{item.source}</span>
          </div>
        )}
        {item.cve && (
          <div>
            <span className="text-gray-500">CVE: </span>
            <span className="font-mono text-gray-700">{item.cve}</span>
          </div>
        )}
        {item.cvss !== null && (
          <div>
            <span className="text-gray-500">CVSS: </span>
            <span className={`font-bold ${
              item.cvss >= 9 ? 'text-red-600' :
              item.cvss >= 7 ? 'text-orange-600' :
              item.cvss >= 4 ? 'text-yellow-600' : 'text-green-600'
            }`}>{item.cvss}</span>
          </div>
        )}
        {item.assigned_to && (
          <div>
            <span className="text-gray-500">Zugewiesen: </span>
            <span className="font-medium text-gray-700">{item.assigned_to}</span>
          </div>
        )}
        {item.due_date && (
          <div className={isOverdue ? 'text-red-600' : ''}>
            <span className="text-gray-500">Frist: </span>
            <span className="font-medium">
              {new Date(item.due_date).toLocaleDateString('de-DE')}
              {isOverdue && ' (ueberfaellig)'}
            </span>
          </div>
        )}
      </div>

      {item.remediation && (
        <div className="mt-4 p-3 bg-gray-50 rounded-lg">
          <span className="text-sm text-gray-500">Empfohlene Massnahme: </span>
          <span className="text-sm text-gray-700">{item.remediation}</span>
        </div>
      )}

      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
        <span className="text-xs text-gray-500">
          Erstellt: {new Date(item.created_at).toLocaleDateString('de-DE')}
        </span>
        <div className="flex items-center gap-2">
          {item.status !== 'resolved' && (
            <>
              <button
                onClick={() => onEdit(item)}
                className="px-3 py-1 text-sm text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
              >
                Bearbeiten
              </button>
              <button
                onClick={() => onStatusChange(item.id, 'resolved')}
                className="px-3 py-1 text-sm bg-green-50 text-green-700 hover:bg-green-100 rounded-lg transition-colors"
              >
                Als behoben markieren
              </button>
            </>
          )}
          <button
            onClick={() => {
              if (window.confirm(`"${item.title}" loeschen?`)) onDelete(item.id)
            }}
            className="px-2 py-1 text-sm text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
            </svg>
          </button>
        </div>
      </div>
    </div>
  )
}