import type { RiskScenario } from '../_types'
import { LIKELIHOOD_COLORS, IMPACT_COLORS, PRIORITY_LABELS } from '../_constants'

export function RiskTab({ scenarios }: { scenarios: RiskScenario[] }) {
  if (scenarios.length === 0) {
    return (
      <div className="text-center py-12 text-slate-400">
        <p className="text-lg">Keine Risiko-Szenarien verfuegbar</p>
        <p className="text-sm mt-1">Fuer diese Branche wurden noch keine Risiko-Szenarien definiert.</p>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      {scenarios.map((risk, idx) => {
        const likelihoodColor = LIKELIHOOD_COLORS[risk.likelihood] || 'bg-slate-400'
        const impactColor = IMPACT_COLORS[risk.impact] || 'bg-slate-400'
        const likelihoodLabel = PRIORITY_LABELS[risk.likelihood] || risk.likelihood
        const impactLabel = PRIORITY_LABELS[risk.impact] || risk.impact

        return (
          <div
            key={idx}
            className="bg-white border border-slate-200 rounded-lg p-5 hover:border-emerald-200 transition-colors"
          >
            <div className="flex items-start justify-between gap-4">
              <h4 className="font-semibold text-slate-900">{risk.name}</h4>
              <div className="flex items-center gap-2 flex-shrink-0">
                <div className="flex items-center gap-1.5">
                  <span className={`w-2.5 h-2.5 rounded-full ${likelihoodColor}`} />
                  <span className="text-xs text-slate-500">
                    Wahrsch.: <span className="font-medium text-slate-700">{likelihoodLabel}</span>
                  </span>
                </div>
                <span className="text-slate-300">|</span>
                <div className="flex items-center gap-1.5">
                  <span className={`w-2.5 h-2.5 rounded-full ${impactColor}`} />
                  <span className="text-xs text-slate-500">
                    Auswirkung: <span className="font-medium text-slate-700">{impactLabel}</span>
                  </span>
                </div>
              </div>
            </div>

            <p className="text-sm text-slate-500 mt-2">{risk.description}</p>

            <div className="mt-3 pt-3 border-t border-slate-100">
              <div className="flex items-start gap-2">
                <svg className="w-4 h-4 text-emerald-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
                <div>
                  <p className="text-xs font-medium text-slate-400 uppercase tracking-wider">Massnahme</p>
                  <p className="text-sm text-slate-700 mt-0.5">{risk.mitigation}</p>
                </div>
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}