export function MessageBusSection() {
  return (
    <div className="space-y-4">
      <p className="text-gray-600 mb-4">
        Der Message Bus ermoeglicht die asynchrone Kommunikation zwischen Agents via Redis Pub/Sub.
        Er unterstuetzt Prioritaeten, Request-Response-Pattern und Broadcast-Nachrichten.
      </p>

      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm">
        <div className="text-gray-500 mb-2"># Nachrichtenfluss</div>
        <pre className="text-gray-700">{`
┌──────────────┐                    ┌──────────────┐
│   Sender     │                    │   Receiver   │
│   (Agent)    │                    │   (Agent)    │
└──────┬───────┘                    └──────▲───────┘
       │                                   │
       │ publish(AgentMessage)             │ handle(message)
       │                                   │
       ▼                                   │
┌────────────────────────────────────────────────────────┐
│                     Message Bus                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐    │
│  │ Priority Q  │  │   Routing   │  │   Logging   │    │
│  │ HIGH/NORMAL │  │   Rules     │  │   Audit     │    │
│  └─────────────┘  └─────────────┘  └─────────────┘    │
│                                                         │
│                 Redis Pub/Sub                          │
└────────────────────────────────────────────────────────┘
        `}</pre>
      </div>

      <div className="mt-6">
        <h4 className="font-semibold text-gray-900 mb-3">Nachrichtentypen</h4>
        <div className="overflow-x-auto">
          <table className="min-w-full border border-gray-200 rounded-lg">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Typ</th>
                <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Prioritaet</th>
                <th className="px-4 py-2 text-left text-sm font-medium text-gray-900">Beschreibung</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              <tr>
                <td className="px-4 py-2 text-sm font-mono text-gray-700">task_request</td>
                <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
                <td className="px-4 py-2 text-sm text-gray-600">Neue Aufgabe an Agent senden</td>
              </tr>
              <tr>
                <td className="px-4 py-2 text-sm font-mono text-gray-700">task_response</td>
                <td className="px-4 py-2"><span className="px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded">NORMAL</span></td>
                <td className="px-4 py-2 text-sm text-gray-600">Antwort auf task_request</td>
              </tr>
              <tr>
                <td className="px-4 py-2 text-sm font-mono text-gray-700">escalation</td>
                <td className="px-4 py-2"><span className="px-2 py-1 bg-orange-100 text-orange-700 text-xs rounded">HIGH</span></td>
                <td className="px-4 py-2 text-sm text-gray-600">Eskalation an anderen Agent</td>
              </tr>
              <tr>
                <td className="px-4 py-2 text-sm font-mono text-gray-700">alert</td>
                <td className="px-4 py-2"><span className="px-2 py-1 bg-red-100 text-red-700 text-xs rounded">CRITICAL</span></td>
                <td className="px-4 py-2 text-sm text-gray-600">Kritische Benachrichtigung</td>
              </tr>
              <tr>
                <td className="px-4 py-2 text-sm font-mono text-gray-700">heartbeat</td>
                <td className="px-4 py-2"><span className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">LOW</span></td>
                <td className="px-4 py-2 text-sm text-gray-600">Liveness-Signal</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
