'use client'

interface DimensionDelta {
  dimension: string
  from: string
  to: string
  impact: string
}

const DIMENSION_LABELS: Record<string, string> = {
  automation_level: 'Automatisierungsgrad',
  decision_binding: 'Entscheidungsbindung',
  decision_impact: 'Entscheidungswirkung',
  domain: 'Branche',
  data_type: 'Datensensitivitaet',
  human_in_loop: 'Menschliche Kontrolle',
  explainability: 'Erklaerbarkeit',
  risk_classification: 'Risikoklasse',
  legal_basis: 'Rechtsgrundlage',
  transparency_required: 'Transparenzpflicht',
  logging_required: 'Protokollierung',
  model_type: 'Modelltyp',
  deployment_scope: 'Einsatzbereich',
}

export function ConfigComparison({ deltas }: { deltas: DimensionDelta[] }) {
  if (deltas.length === 0) {
    return (
      <div className="bg-green-50 border border-green-200 rounded-lg p-4 text-green-700 text-sm">
        Keine Aenderungen noetig — Ihre Konfiguration ist bereits konform.
      </div>
    )
  }

  return (
    <div className="space-y-2">
      <h4 className="text-sm font-medium text-gray-700">Empfohlene Aenderungen ({deltas.length})</h4>
      <div className="space-y-1">
        {deltas.map((d, i) => (
          <div key={i} className="flex items-center gap-2 bg-blue-50 border border-blue-200 rounded px-3 py-2 text-sm">
            <span className="font-medium text-gray-800 min-w-[160px]">
              {DIMENSION_LABELS[d.dimension] || d.dimension}
            </span>
            <span className="text-red-600 font-mono line-through">{d.from}</span>
            <span className="text-gray-400">→</span>
            <span className="text-green-700 font-mono font-bold">{d.to}</span>
          </div>
        ))}
      </div>
    </div>
  )
}