import type { TOMRecommendation } from '../_types'
import { PRIORITY_COLORS, PRIORITY_LABELS, TOM_CATEGORY_ICONS } from '../_constants'

export function TOMTab({ recommendations }: { recommendations: TOMRecommendation[] }) {
  if (recommendations.length === 0) {
    return (
      <div className="text-center py-12 text-slate-400">
        <p className="text-lg">Keine TOM-Empfehlungen verfuegbar</p>
        <p className="text-sm mt-1">Fuer diese Branche wurden noch keine technisch-organisatorischen Massnahmen definiert.</p>
      </div>
    )
  }

  const grouped: Record<string, TOMRecommendation[]> = {}
  recommendations.forEach((tom) => {
    if (!grouped[tom.category]) {
      grouped[tom.category] = []
    }
    grouped[tom.category].push(tom)
  })

  return (
    <div className="space-y-6">
      {Object.entries(grouped).map(([category, items]) => {
        const icon = TOM_CATEGORY_ICONS[category] || '\uD83D\uDD27'
        return (
          <div key={category}>
            <div className="flex items-center gap-2 mb-3">
              <span className="text-lg">{icon}</span>
              <h4 className="font-semibold text-slate-800">{category}</h4>
              <span className="text-xs text-slate-400 ml-1">({items.length})</span>
            </div>
            <div className="space-y-3 ml-7">
              {items.map((tom, idx) => {
                const prio = PRIORITY_COLORS[tom.priority] || PRIORITY_COLORS.medium
                const prioLabel = PRIORITY_LABELS[tom.priority] || tom.priority
                return (
                  <div
                    key={idx}
                    className="bg-white border border-slate-200 rounded-lg p-4 hover:border-emerald-200 transition-colors"
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex-1">
                        <h5 className="font-medium text-slate-900">{tom.name}</h5>
                        <p className="text-sm text-slate-500 mt-1">{tom.description}</p>
                      </div>
                      <span
                        className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold border flex-shrink-0 ${prio.bg} ${prio.text} ${prio.border}`}
                      >
                        {prioLabel}
                      </span>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
        )
      })}
    </div>
  )
}