breakpilot-compliance/admin-compliance/app/sdk/dsfa/_components/DSFACard.tsx

'use client'

export interface DSFA {
  id: string
  title: string
  description: string
  status: 'draft' | 'in-review' | 'approved' | 'needs-update'
  createdAt: string
  updatedAt: string
  approvedBy: string | null
  riskLevel: 'low' | 'medium' | 'high' | 'critical'
  processingActivity: string
  dataCategories: string[]
  recipients: string[]
  measures: string[]
}

export function DSFACard({
  dsfa,
  onStatusChange,
  onDelete,
}: {
  dsfa: DSFA
  onStatusChange: (id: string, status: string) => void
  onDelete: (id: string) => void
}) {
  const statusColors = {
    draft: 'bg-gray-100 text-gray-600 border-gray-200',
    'in-review': 'bg-yellow-100 text-yellow-700 border-yellow-200',
    approved: 'bg-green-100 text-green-700 border-green-200',
    'needs-update': 'bg-orange-100 text-orange-700 border-orange-200',
  }

  const statusLabels = {
    draft: 'Entwurf',
    'in-review': 'In Pruefung',
    approved: 'Genehmigt',
    'needs-update': 'Aktualisierung erforderlich',
  }

  const riskColors = {
    low: 'bg-green-100 text-green-700',
    medium: 'bg-yellow-100 text-yellow-700',
    high: 'bg-orange-100 text-orange-700',
    critical: 'bg-red-100 text-red-700',
  }

  const createdDate = dsfa.createdAt
    ? new Date(dsfa.createdAt).toLocaleDateString('de-DE')
    : '—'

  return (
    <div className={`bg-white rounded-xl border-2 p-6 ${
      dsfa.status === 'needs-update' ? 'border-orange-200' :
      dsfa.status === 'approved' ? '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 ${statusColors[dsfa.status]}`}>
              {statusLabels[dsfa.status]}
            </span>
            <span className={`px-2 py-1 text-xs rounded-full ${riskColors[dsfa.riskLevel]}`}>
              Risiko: {dsfa.riskLevel === 'low' ? 'Niedrig' :
                       dsfa.riskLevel === 'medium' ? 'Mittel' :
                       dsfa.riskLevel === 'high' ? 'Hoch' : 'Kritisch'}
            </span>
          </div>
          <h3 className="text-lg font-semibold text-gray-900">{dsfa.title}</h3>
          <p className="text-sm text-gray-500 mt-1">{dsfa.description}</p>
        </div>
      </div>

      <div className="mt-4 text-sm text-gray-600">
        <p><span className="text-gray-500">Verarbeitungstaetigkeit:</span> {dsfa.processingActivity}</p>
      </div>

      <div className="mt-3 flex flex-wrap gap-1">
        {dsfa.dataCategories.map(cat => (
          <span key={cat} className="px-2 py-0.5 text-xs bg-blue-50 text-blue-600 rounded">
            {cat}
          </span>
        ))}
      </div>

      {dsfa.measures.length > 0 && (
        <div className="mt-3">
          <span className="text-sm text-gray-500">Massnahmen:</span>
          <div className="flex flex-wrap gap-1 mt-1">
            {dsfa.measures.map(m => (
              <span key={m} className="px-2 py-0.5 text-xs bg-green-50 text-green-600 rounded">
                {m}
              </span>
            ))}
          </div>
        </div>
      )}

      <div className="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between text-sm">
        <div className="text-gray-500">
          <span>Erstellt: {createdDate}</span>
          {dsfa.approvedBy && (
            <span className="ml-4">Genehmigt von: {dsfa.approvedBy}</span>
          )}
        </div>
        <div className="flex items-center gap-2">
          {dsfa.status === 'draft' && (
            <button
              onClick={() => onStatusChange(dsfa.id, 'in-review')}
              className="px-3 py-1 text-yellow-600 hover:bg-yellow-50 rounded-lg transition-colors text-xs"
            >
              Zur Pruefung
            </button>
          )}
          {dsfa.status === 'in-review' && (
            <button
              onClick={() => onStatusChange(dsfa.id, 'approved')}
              className="px-3 py-1 text-green-600 hover:bg-green-50 rounded-lg transition-colors text-xs"
            >
              Genehmigen
            </button>
          )}
          <button
            onClick={() => onDelete(dsfa.id)}
            className="px-3 py-1 text-red-500 hover:bg-red-50 rounded-lg transition-colors text-xs"
          >
            Loeschen
          </button>
        </div>
      </div>
    </div>
  )
}