'use client'

import React from 'react'
import Link from 'next/link'

export default function AgentArchitecturePage() {
  return (
    <div className="p-8 max-w-5xl">
      {/* Header */}
      <div className="flex items-center gap-4 mb-8">
        <Link href="/sdk/agents" className="text-gray-400 hover:text-gray-600 transition-colors">
          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
          </svg>
        </Link>
        <div>
          <h1 className="text-2xl font-bold text-gray-900">Agent-Architektur</h1>
          <p className="text-gray-500 mt-1">2-Agenten-System mit RAG, SOUL-Files und LLM-Backend</p>
        </div>
      </div>

      {/* Architecture Overview */}
      <section className="mb-10">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">System-Uebersicht</h2>
        <div className="bg-gray-900 text-green-400 font-mono text-sm rounded-xl p-6 overflow-x-auto">
          <pre>{`
  +---------------------+       +---------------------+
  |  Compliance Advisor |       |   Drafting Agent     |
  |  (RAG-Chat)         |       |   (4-Modi)           |
  |  - DSGVO            |       |   - Explain          |
  |  - AI Act           |       |   - Ask              |
  |  - 6 Sammlungen     |       |   - Draft            |
  +--------+------------+       |   - Validate         |
           |                    +--------+------------+
           |                             |
           +----------+  +--------------+
                      |  |
                      v  v
             +--------+--+--------+
             |   SOUL-File System  |
             |  agent-core/soul/   |
             |  - .soul.md Dateien |
             |  - .backups/        |
             |  - 30s TTL Cache    |
             +--------+-----------+
                      |
                      v
             +--------+-----------+
             |  RAG-Service :8097  |
             |  6 Sammlungen:      |
             |  - gesetze          |
             |  - ce               |
             |  - datenschutz      |
             |  - dsfa_corpus      |
             |  - recht            |
             |  - legal_templates  |
             +--------+-----------+
                      |
                      v
             +--------+-----------+
             |  Ollama LLM         |
             |  qwen2.5vl:32b      |
             |  Temp: 0.2-0.3      |
             +--------------------+
          `.trim()}</pre>
        </div>
      </section>

      {/* Agent Cards */}
      <section className="mb-10">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">Agenten im Detail</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Compliance Advisor */}
          <div className="bg-white border border-gray-200 rounded-2xl p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-xl bg-purple-600 flex items-center justify-center text-white">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                </svg>
              </div>
              <h3 className="font-semibold text-gray-900">Compliance Advisor</h3>
            </div>
            <ul className="space-y-2 text-sm text-gray-600">
              <li className="flex items-start gap-2">
                <span className="text-purple-600 mt-0.5">&#8226;</span>
                Multi-Collection RAG (6 Sammlungen parallel)
              </li>
              <li className="flex items-start gap-2">
                <span className="text-purple-600 mt-0.5">&#8226;</span>
                Laender-Filter: DE, AT, CH, EU
              </li>
              <li className="flex items-start gap-2">
                <span className="text-purple-600 mt-0.5">&#8226;</span>
                Streaming-Antworten (Ollama)
              </li>
              <li className="flex items-start gap-2">
                <span className="text-purple-600 mt-0.5">&#8226;</span>
                Quellenschutz: Keine Collection-Namen preisgeben
              </li>
              <li className="flex items-start gap-2">
                <span className="text-purple-600 mt-0.5">&#8226;</span>
                IFRS-Besonderheit: Nur EU-endorsed Standards
              </li>
            </ul>
            <div className="mt-4 pt-3 border-t border-gray-100">
              <code className="text-xs text-gray-500">API: POST /api/sdk/compliance-advisor/chat</code>
            </div>
          </div>

          {/* Drafting Agent */}
          <div className="bg-white border border-gray-200 rounded-2xl p-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white">
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
              </div>
              <h3 className="font-semibold text-gray-900">Drafting Agent</h3>
            </div>
            <ul className="space-y-2 text-sm text-gray-600">
              <li className="flex items-start gap-2">
                <span className="text-blue-600 mt-0.5">&#8226;</span>
                <strong>Explain</strong>: Fragen verstaendlich beantworten
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-600 mt-0.5">&#8226;</span>
                <strong>Ask</strong>: Luecken analysieren, gezielte Fragen
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-600 mt-0.5">&#8226;</span>
                <strong>Draft</strong>: Dokument-Sections entwerfen (JSON)
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-600 mt-0.5">&#8226;</span>
                <strong>Validate</strong>: Cross-Dokument-Konsistenz pruefen
              </li>
              <li className="flex items-start gap-2">
                <span className="text-blue-600 mt-0.5">&#8226;</span>
                SDK-State-Projection fuer token-effizienten Kontext
              </li>
            </ul>
            <div className="mt-4 pt-3 border-t border-gray-100">
              <code className="text-xs text-gray-500">API: POST /api/sdk/drafting-engine/chat</code>
            </div>
          </div>
        </div>
      </section>

      {/* SOUL System */}
      <section className="mb-10">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">SOUL-File System</h2>
        <div className="bg-white border border-gray-200 rounded-2xl p-6">
          <p className="text-sm text-gray-600 mb-4">
            Jeder Agent hat eine <code className="bg-gray-100 px-1.5 py-0.5 rounded text-purple-700">.soul.md</code> Datei,
            die seinen System-Prompt definiert. Diese Datei kann ueber die Agent-Detail-Seite live bearbeitet werden.
            Aenderungen werden nach 30 Sekunden (TTL-Cache) wirksam.
          </p>
          <div className="bg-gray-50 rounded-xl p-4 font-mono text-sm text-gray-700">
            <div>agent-core/</div>
            <div className="ml-4">soul/</div>
            <div className="ml-8 text-purple-700">compliance-advisor.soul.md</div>
            <div className="ml-8 text-blue-700">drafting-agent.soul.md</div>
            <div className="ml-8 text-gray-400">.backups/</div>
            <div className="ml-12 text-gray-400">compliance-advisor-1709567890123.soul.md</div>
            <div className="ml-12 text-gray-400">...</div>
          </div>
        </div>
      </section>

      {/* RAG Collections */}
      <section className="mb-10">
        <h2 className="text-lg font-semibold text-gray-900 mb-4">RAG-Sammlungen</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {[
            { name: 'bp_compliance_gesetze', desc: 'DSGVO, BDSG, AI Act, TTDSG, nationale Gesetze', icon: '&#9878;' },
            { name: 'bp_compliance_ce', desc: 'EU Maschinenverordnung, Blue Guide, CE-Kennzeichnung', icon: '&#9881;' },
            { name: 'bp_compliance_datenschutz', desc: 'DSK-Kurzpapiere, SDM, EDPB Guidelines', icon: '&#128274;' },
            { name: 'bp_dsfa_corpus', desc: 'DSFA-Listen, Muss-Listen der Aufsichtsbehoerden', icon: '&#128203;' },
            { name: 'bp_compliance_recht', desc: 'WP248, EU-Verordnungen (DORA, MiCA, etc.)', icon: '&#9878;' },
            { name: 'bp_legal_templates', desc: 'Vorlagen fuer Datenschutz-Dokumente', icon: '&#128196;' },
          ].map(col => (
            <div key={col.name} className="bg-white border border-gray-200 rounded-xl p-4">
              <div className="flex items-center gap-2 mb-2">
                <span dangerouslySetInnerHTML={{ __html: col.icon }} />
                <code className="text-xs font-medium text-gray-700">{col.name}</code>
              </div>
              <p className="text-xs text-gray-500">{col.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* LLM Config */}
      <section>
        <h2 className="text-lg font-semibold text-gray-900 mb-4">LLM-Konfiguration</h2>
        <div className="bg-white border border-gray-200 rounded-2xl p-6">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div>
              <div className="text-xs text-gray-500 mb-1">Modell</div>
              <div className="font-medium text-gray-900">qwen2.5vl:32b</div>
            </div>
            <div>
              <div className="text-xs text-gray-500 mb-1">Backend</div>
              <div className="font-medium text-gray-900">Ollama</div>
            </div>
            <div>
              <div className="text-xs text-gray-500 mb-1">Temperatur</div>
              <div className="font-medium text-gray-900">0.2 - 0.3</div>
            </div>
            <div>
              <div className="text-xs text-gray-500 mb-1">Max Tokens</div>
              <div className="font-medium text-gray-900">8.192 - 16.384</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}