import { Brain, CheckCircle, Shield, AlertTriangle, MessageSquare } from 'lucide-react'

interface AgentCardProps {
  icon: React.ReactNode
  bgColor: string
  hoverBorder: string
  name: string
  description: string
  tags: { label: string; colorClasses: string }[]
  soulInfo: string
}

function AgentCard({ icon, bgColor, hoverBorder, name, description, tags, soulInfo }: AgentCardProps) {
  return (
    <div className={`border border-gray-200 rounded-xl p-4 ${hoverBorder} transition-colors`}>
      <div className="flex items-start gap-4">
        <div className={`p-3 ${bgColor} rounded-lg`}>
          {icon}
        </div>
        <div className="flex-1">
          <h4 className="font-semibold text-gray-900">{name}</h4>
          <p className="text-sm text-gray-600 mb-2">{description}</p>
          <div className="flex flex-wrap gap-2">
            {tags.map(tag => (
              <span key={tag.label} className={`px-2 py-1 ${tag.colorClasses} text-xs rounded-full`}>
                {tag.label}
              </span>
            ))}
          </div>
          <div className="mt-2 text-xs text-gray-500">{soulInfo}</div>
        </div>
      </div>
    </div>
  )
}

const AGENTS: AgentCardProps[] = [
  {
    icon: <Brain className="w-6 h-6 text-blue-600" />,
    bgColor: 'bg-blue-100',
    hoverBorder: 'hover:border-blue-300',
    name: 'TutorAgent',
    description: 'Lernbegleitung und Fragen beantworten',
    tags: [
      { label: 'Geduldig', colorClasses: 'bg-blue-50 text-blue-700' },
      { label: 'Ermutigend', colorClasses: 'bg-blue-50 text-blue-700' },
      { label: 'Sokratisch', colorClasses: 'bg-blue-50 text-blue-700' },
    ],
    soulInfo: 'SOUL: tutor-agent.soul.md | Routing: learning_*, help_*, question_*',
  },
  {
    icon: <CheckCircle className="w-6 h-6 text-green-600" />,
    bgColor: 'bg-green-100',
    hoverBorder: 'hover:border-green-300',
    name: 'GraderAgent',
    description: 'Klausur-Korrektur und Bewertung',
    tags: [
      { label: 'Objektiv', colorClasses: 'bg-green-50 text-green-700' },
      { label: 'Fair', colorClasses: 'bg-green-50 text-green-700' },
      { label: 'Konstruktiv', colorClasses: 'bg-green-50 text-green-700' },
    ],
    soulInfo: 'SOUL: grader-agent.soul.md | Routing: grade_*, evaluate_*, correct_*',
  },
  {
    icon: <Shield className="w-6 h-6 text-amber-600" />,
    bgColor: 'bg-amber-100',
    hoverBorder: 'hover:border-amber-300',
    name: 'QualityJudge',
    description: 'BQAS Qualitaetspruefung',
    tags: [
      { label: 'Kritisch', colorClasses: 'bg-amber-50 text-amber-700' },
      { label: 'Praezise', colorClasses: 'bg-amber-50 text-amber-700' },
      { label: 'Schnell', colorClasses: 'bg-amber-50 text-amber-700' },
    ],
    soulInfo: 'SOUL: quality-judge.soul.md | Routing: quality_*, review_*, validate_*',
  },
  {
    icon: <AlertTriangle className="w-6 h-6 text-red-600" />,
    bgColor: 'bg-red-100',
    hoverBorder: 'hover:border-red-300',
    name: 'AlertAgent',
    description: 'Monitoring und Benachrichtigungen',
    tags: [
      { label: 'Wachsam', colorClasses: 'bg-red-50 text-red-700' },
      { label: 'Proaktiv', colorClasses: 'bg-red-50 text-red-700' },
      { label: 'Priorisierend', colorClasses: 'bg-red-50 text-red-700' },
    ],
    soulInfo: 'SOUL: alert-agent.soul.md | Routing: alert_*, monitor_*, notify_*',
  },
  {
    icon: <MessageSquare className="w-6 h-6 text-purple-600" />,
    bgColor: 'bg-purple-100',
    hoverBorder: 'hover:border-purple-300',
    name: 'Orchestrator',
    description: 'Task-Koordination und Routing',
    tags: [
      { label: 'Koordinierend', colorClasses: 'bg-purple-50 text-purple-700' },
      { label: 'Effizient', colorClasses: 'bg-purple-50 text-purple-700' },
      { label: 'Zuverlaessig', colorClasses: 'bg-purple-50 text-purple-700' },
    ],
    soulInfo: 'SOUL: orchestrator.soul.md | Routing: Fallback fuer alle unbekannten Intents',
  },
]

export function AgentTypesSection() {
  return (
    <div className="space-y-4">
      <p className="text-gray-600 mb-4">
        Jeder Agent hat eine spezialisierte Rolle im System. Die Agents kommunizieren ueber den Message Bus
        und nutzen das Shared Brain fuer konsistente Entscheidungen.
      </p>

      <div className="grid gap-4">
        {AGENTS.map(agent => (
          <AgentCard key={agent.name} {...agent} />
        ))}
      </div>
    </div>
  )
}
