'use client'

import type { GapAnalysis, GapItem } from '@/lib/sdk/types'

export function GapAnalysisPreview({ analysis }: { analysis: GapAnalysis }) {
  return (
    <div className="bg-white rounded-xl border border-gray-200 p-6">
      <div className="flex items-center gap-3 mb-6">
        <div className="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center">
          <span className="text-2xl">📊</span>
        </div>
        <div>
          <h3 className="text-lg font-semibold text-gray-900">Gap-Analyse Ergebnis</h3>
          <p className="text-sm text-gray-500">
            {analysis.totalGaps} Luecken in {analysis.gaps.length} Kategorien gefunden
          </p>
        </div>
      </div>

      <div className="grid grid-cols-4 gap-4 mb-6">
        <div className="text-center p-4 bg-red-50 rounded-xl">
          <div className="text-3xl font-bold text-red-600">{analysis.criticalGaps}</div>
          <div className="text-sm text-red-600 font-medium">Kritisch</div>
        </div>
        <div className="text-center p-4 bg-orange-50 rounded-xl">
          <div className="text-3xl font-bold text-orange-600">{analysis.highGaps}</div>
          <div className="text-sm text-orange-600 font-medium">Hoch</div>
        </div>
        <div className="text-center p-4 bg-yellow-50 rounded-xl">
          <div className="text-3xl font-bold text-yellow-600">{analysis.mediumGaps}</div>
          <div className="text-sm text-yellow-600 font-medium">Mittel</div>
        </div>
        <div className="text-center p-4 bg-green-50 rounded-xl">
          <div className="text-3xl font-bold text-green-600">{analysis.lowGaps}</div>
          <div className="text-sm text-green-600 font-medium">Niedrig</div>
        </div>
      </div>

      <div className="space-y-3">
        {analysis.gaps.slice(0, 5).map((gap: GapItem) => (
          <div
            key={gap.id}
            className={`p-4 rounded-lg border-l-4 ${
              gap.severity === 'CRITICAL' ? 'bg-red-50 border-red-500' :
              gap.severity === 'HIGH' ? 'bg-orange-50 border-orange-500' :
              gap.severity === 'MEDIUM' ? 'bg-yellow-50 border-yellow-500' :
              'bg-green-50 border-green-500'
            }`}
          >
            <div className="flex items-start justify-between">
              <div>
                <div className="font-medium text-gray-900">{gap.category}</div>
                <p className="text-sm text-gray-600 mt-1">{gap.description}</p>
              </div>
              <span className={`px-2 py-1 text-xs font-medium rounded ${
                gap.severity === 'CRITICAL' ? 'bg-red-100 text-red-700' :
                gap.severity === 'HIGH' ? 'bg-orange-100 text-orange-700' :
                gap.severity === 'MEDIUM' ? 'bg-yellow-100 text-yellow-700' :
                'bg-green-100 text-green-700'
              }`}>
                {gap.severity}
              </span>
            </div>
            <div className="mt-2 text-xs text-gray-500">
              Regulierung: {gap.regulation} | Aktion: {gap.requiredAction}
            </div>
          </div>
        ))}
        {analysis.gaps.length > 5 && (
          <p className="text-sm text-gray-500 text-center py-2">
            + {analysis.gaps.length - 5} weitere Luecken
          </p>
        )}
      </div>
    </div>
  )
}