'use client'

import Link from 'next/link'

interface EnrichmentHint {
  field: string
  label: string
  impact: string
  regulation: string
  priority: string
}

const PRIORITY_STYLES = {
  high: { icon: '⚠️', border: 'border-amber-300', bg: 'bg-amber-50' },
  medium: { icon: 'ℹ️', border: 'border-blue-200', bg: 'bg-blue-50' },
  low: { icon: '💡', border: 'border-gray-200', bg: 'bg-gray-50' },
}

export function EnrichmentHints({ hints }: { hints: EnrichmentHint[] }) {
  if (!hints || hints.length === 0) return null

  const highPriority = hints.filter(h => h.priority === 'high')
  const otherPriority = hints.filter(h => h.priority !== 'high')

  return (
    <div className="bg-amber-50 border border-amber-200 rounded-xl p-5">
      <div className="flex items-start gap-3">
        <span className="text-xl">📋</span>
        <div className="flex-1">
          <h3 className="text-sm font-semibold text-amber-900">
            Bewertung verbessern — {hints.length} fehlende Firmendaten
          </h3>
          <p className="text-xs text-amber-700 mt-1 mb-3">
            Ergaenzen Sie diese Daten im Unternehmensprofil fuer eine vollstaendige regulatorische Bewertung.
          </p>

          <div className="space-y-2">
            {highPriority.map((h, i) => {
              const style = PRIORITY_STYLES[h.priority as keyof typeof PRIORITY_STYLES] || PRIORITY_STYLES.medium
              return (
                <div key={i} className={`flex items-start gap-2 ${style.bg} border ${style.border} rounded-lg px-3 py-2`}>
                  <span className="text-sm">{style.icon}</span>
                  <div className="flex-1 min-w-0">
                    <span className="text-sm font-medium text-gray-800">{h.label}</span>
                    <span className="text-xs text-gray-500 ml-2 px-1.5 py-0.5 bg-white rounded">{h.regulation}</span>
                    <p className="text-xs text-gray-600 mt-0.5">{h.impact}</p>
                  </div>
                </div>
              )
            })}
            {otherPriority.map((h, i) => (
              <div key={`other-${i}`} className="flex items-center gap-2 text-sm text-gray-600">
                <span>ℹ️</span>
                <span>{h.label}</span>
                <span className="text-xs text-gray-400">({h.regulation})</span>
              </div>
            ))}
          </div>

          <Link
            href="/sdk/company-profile"
            className="inline-flex items-center gap-1 mt-3 text-sm text-blue-600 hover:text-blue-800 font-medium"
          >
            Unternehmensprofil ergaenzen →
          </Link>
        </div>
      </div>
    </div>
  )
}