'use client'

interface ScoreCardProps {
  safetyScore: number
  utilityScore: number
  compositeScore: number
  deltaCount: number
}

function ScoreGauge({ value, label, color }: { value: number; label: string; color: string }) {
  return (
    <div className="flex flex-col items-center gap-1">
      <div className="relative w-16 h-16">
        <svg viewBox="0 0 36 36" className="w-16 h-16">
          <path
            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
            fill="none" stroke="#e5e7eb" strokeWidth="3"
          />
          <path
            d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
            fill="none" stroke={color} strokeWidth="3"
            strokeDasharray={`${value}, 100`}
            strokeLinecap="round"
          />
        </svg>
        <span className="absolute inset-0 flex items-center justify-center text-sm font-bold text-gray-800">
          {value}
        </span>
      </div>
      <span className="text-xs text-gray-500">{label}</span>
    </div>
  )
}

export function OptimizationScoreCard({ safetyScore, utilityScore, compositeScore, deltaCount }: ScoreCardProps) {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-4">
      <h4 className="text-sm font-medium text-gray-700 mb-3">Bewertung der optimierten Konfiguration</h4>
      <div className="flex items-center gap-6">
        <ScoreGauge value={safetyScore} label="Sicherheit" color="#22c55e" />
        <ScoreGauge value={utilityScore} label="Business-Nutzen" color="#3b82f6" />
        <ScoreGauge value={Math.round(compositeScore)} label="Gesamt" color="#8b5cf6" />
        <div className="flex flex-col items-center gap-1">
          <span className="text-2xl font-bold text-gray-800">{deltaCount}</span>
          <span className="text-xs text-gray-500">Aenderungen</span>
        </div>
      </div>
    </div>
  )
}