import { Database, Activity, GitBranch } from 'lucide-react'

export function SharedBrainSection() {
  return (
    <div className="space-y-4">
      <p className="text-gray-600 mb-4">
        Das Shared Brain speichert Wissen und Kontext, auf den alle Agents zugreifen koennen.
        Es besteht aus drei Komponenten: Memory Store, Context Manager und Knowledge Graph.
      </p>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-white border border-gray-200 rounded-xl p-5">
          <div className="flex items-center gap-2 mb-3">
            <Database className="w-5 h-5 text-blue-600" />
            <h4 className="font-semibold text-gray-900">Memory Store</h4>
          </div>
          <p className="text-sm text-gray-600 mb-3">
            Langzeit-Gedaechtnis fuer Fakten, Entscheidungen und Lernfortschritte.
          </p>
          <ul className="text-xs text-gray-500 space-y-1">
            <li>- TTL-basierte Expiration (30 Tage default)</li>
            <li>- Access-Tracking (Haeufigkeit)</li>
            <li>- Pattern-basierte Suche</li>
            <li>- Hybrid: Redis + PostgreSQL</li>
          </ul>
        </div>

        <div className="bg-white border border-gray-200 rounded-xl p-5">
          <div className="flex items-center gap-2 mb-3">
            <Activity className="w-5 h-5 text-purple-600" />
            <h4 className="font-semibold text-gray-900">Context Manager</h4>
          </div>
          <p className="text-sm text-gray-600 mb-3">
            Verwaltet Konversationskontext mit automatischer Komprimierung.
          </p>
          <ul className="text-xs text-gray-500 space-y-1">
            <li>- Max 50 Messages pro Context</li>
            <li>- Automatische Zusammenfassung</li>
            <li>- System-Messages bleiben erhalten</li>
            <li>- Entity-Extraktion</li>
          </ul>
        </div>

        <div className="bg-white border border-gray-200 rounded-xl p-5">
          <div className="flex items-center gap-2 mb-3">
            <GitBranch className="w-5 h-5 text-green-600" />
            <h4 className="font-semibold text-gray-900">Knowledge Graph</h4>
          </div>
          <p className="text-sm text-gray-600 mb-3">
            Graph-basierte Darstellung von Entitaeten und ihren Beziehungen.
          </p>
          <ul className="text-xs text-gray-500 space-y-1">
            <li>- Entitaeten: Student, Lehrer, Fach</li>
            <li>- Beziehungen: lernt, unterrichtet</li>
            <li>- BFS-basierte Pfadsuche</li>
            <li>- Verwandte Entitaeten finden</li>
          </ul>
        </div>
      </div>

      <div className="bg-gray-50 rounded-xl p-6 font-mono text-sm mt-6">
        <div className="text-gray-500 mb-2"># Memory Store Beispiel</div>
        <pre className="text-gray-700">{`
# Speichern
await store.remember(
    key="student:123:progress",
    value={"level": 5, "score": 85, "topic": "algebra"},
    agent_id="tutor-agent",
    ttl_days=30
)

# Abrufen
progress = await store.recall("student:123:progress")
# → {"level": 5, "score": 85, "topic": "algebra"}

# Suchen
all_progress = await store.search("student:123:*")
# → [Memory(...), Memory(...), ...]
        `}</pre>
      </div>
    </div>
  )
}
