'use client'

/**
 * UCCA System Documentation Page (SDK Version)
 *
 * Displays architecture documentation, auditor information,
 * and transparency data for the UCCA compliance system.
 */

import { useState, useEffect } from 'react'
import Link from 'next/link'

// ============================================================================
// Types
// ============================================================================

type DocTab = 'overview' | 'architecture' | 'auditor' | 'rules' | 'legal-corpus'

interface Rule {
  code: string
  category: string
  title: string
  description: string
  severity: string
  gdpr_ref: string
  rationale?: string
  risk_add?: number
}

interface Pattern {
  id: string
  title: string
  description: string
  benefit?: string
  effort?: string
  risk_reduction?: number
}

interface Control {
  id: string
  title: string
  description: string
  gdpr_ref?: string
  effort?: string
}

// ============================================================================
// API Configuration
// ============================================================================

const API_BASE = process.env.NEXT_PUBLIC_SDK_API_URL || 'https://macmini:8090'

// ============================================================================
// Main Component
// ============================================================================

export default function DocumentationPage() {
  const [activeTab, setActiveTab] = useState<DocTab>('overview')
  const [rules, setRules] = useState<Rule[]>([])
  const [patterns, setPatterns] = useState<Pattern[]>([])
  const [controls, setControls] = useState<Control[]>([])
  const [policyVersion, setPolicyVersion] = useState<string>('')
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true)
      try {
        const rulesRes = await fetch(`${API_BASE}/sdk/v1/ucca/rules`, {
          headers: { 'X-Tenant-ID': '00000000-0000-0000-0000-000000000000' }
        })
        if (rulesRes.ok) {
          const rulesData = await rulesRes.json()
          setRules(rulesData.rules || [])
          setPolicyVersion(rulesData.policy_version || '')
        }

        const patternsRes = await fetch(`${API_BASE}/sdk/v1/ucca/patterns`, {
          headers: { 'X-Tenant-ID': '00000000-0000-0000-0000-000000000000' }
        })
        if (patternsRes.ok) {
          const patternsData = await patternsRes.json()
          setPatterns(patternsData.patterns || [])
        }

        const controlsRes = await fetch(`${API_BASE}/sdk/v1/ucca/controls`, {
          headers: { 'X-Tenant-ID': '00000000-0000-0000-0000-000000000000' }
        })
        if (controlsRes.ok) {
          const controlsData = await controlsRes.json()
          setControls(controlsData.controls || [])
        }
      } catch (error) {
        console.error('Failed to fetch documentation data:', error)
      } finally {
        setLoading(false)
      }
    }

    fetchData()
  }, [])

  // ============================================================================
  // Tab Content Renderers
  // ============================================================================

  const renderOverview = () => (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
          <h3 className="font-semibold text-slate-800 mb-2">Deterministische Regeln</h3>
          <div className="text-3xl font-bold text-purple-600">{rules.length}</div>
          <p className="text-sm text-slate-500 mt-2">
            Alle Entscheidungen basieren auf transparenten, nachvollziehbaren Regeln.
          </p>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
          <h3 className="font-semibold text-slate-800 mb-2">Architektur-Patterns</h3>
          <div className="text-3xl font-bold text-green-600">{patterns.length}</div>
          <p className="text-sm text-slate-500 mt-2">
            Best-Practice-Loesungen fuer datenschutzkonforme KI-Systeme.
          </p>
        </div>
        <div className="bg-white rounded-xl border border-slate-200 p-6 shadow-sm">
          <h3 className="font-semibold text-slate-800 mb-2">Compliance-Kontrollen</h3>
          <div className="text-3xl font-bold text-blue-600">{controls.length}</div>
          <p className="text-sm text-slate-500 mt-2">
            Technische und organisatorische Massnahmen.
          </p>
        </div>
      </div>

      <div className="bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl border border-purple-200 p-6">
        <h3 className="font-semibold text-purple-800 text-lg mb-4">Was ist UCCA?</h3>
        <div className="prose prose-sm max-w-none text-slate-700">
          <p>
            <strong>UCCA (Use-Case Compliance & Feasibility Advisor)</strong> ist ein deterministisches
            Compliance-Pruefwerkzeug, das Organisationen bei der Bewertung geplanter KI-Anwendungsfaelle
            hinsichtlich ihrer datenschutzrechtlichen Zulaessigkeit unterstuetzt.
          </p>
          <h4 className="text-purple-700 mt-4">Kernprinzipien</h4>
          <ul className="space-y-2">
            <li>
              <strong>Determinismus:</strong> Alle Entscheidungen basieren auf transparenten Regeln.
              Die KI trifft KEINE autonomen Entscheidungen.
            </li>
            <li>
              <strong>Transparenz:</strong> Alle Regeln, Kontrollen und Patterns sind einsehbar.
            </li>
            <li>
              <strong>Human-in-the-Loop:</strong> Kritische Entscheidungen erfordern immer
              menschliche Pruefung durch DSB oder Legal.
            </li>
            <li>
              <strong>Rechtsgrundlage:</strong> Jede Regel referenziert konkrete DSGVO-Artikel.
            </li>
          </ul>
        </div>
      </div>

      <div className="bg-amber-50 border border-amber-200 rounded-xl p-6">
        <h3 className="font-semibold text-amber-800 mb-3">
          Wichtiger Hinweis zur KI-Nutzung
        </h3>
        <p className="text-amber-700">
          Das System verwendet KI (LLM) <strong>ausschliesslich zur Erklaerung</strong> bereits
          getroffener Regelentscheidungen. Die eigentliche Compliance-Bewertung erfolgt
          <strong> rein deterministisch</strong> durch die Policy Engine. BLOCK-Entscheidungen
          koennen NICHT durch KI ueberschrieben werden.
        </p>
      </div>
    </div>
  )

  const renderArchitecture = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-800 text-lg mb-4">Systemarchitektur</h3>

        <div className="bg-slate-900 text-green-400 p-6 rounded-lg font-mono text-sm overflow-x-auto">
          <pre>{`
┌─────────────────────────────────────────────────────────────────────┐
│                        Frontend (Next.js)                            │
│                     admin-v2:3000/sdk/advisory-board                 │
└───────────────────────────────────┬─────────────────────────────────┘
                                    │ HTTPS
                                    ▼
┌─────────────────────────────────────────────────────────────────────┐
│                     AI Compliance SDK (Go)                           │
│                          Port 8090                                   │
│  ┌─────────────────────────────────────────────────────────────┐   │
│  │                    Policy Engine                              │   │
│  │  ┌───────────────────────────────────────────────────────┐   │   │
│  │  │  YAML-basierte Regeln (ucca_policy_v1.yaml)           │   │   │
│  │  │  ~45 Regeln in 7 Kategorien                           │   │   │
│  │  │  Deterministisch - Kein LLM in Entscheidungslogik     │   │   │
│  │  └───────────────────────────────────────────────────────┘   │   │
│  │                          │                                    │   │
│  │                          ▼                                    │   │
│  │  ┌────────────────┐  ┌────────────────┐  ┌────────────────┐  │   │
│  │  │  Controls      │  │  Patterns      │  │  Examples      │  │   │
│  │  │  Library       │  │  Library       │  │  Library       │  │   │
│  │  └────────────────┘  └────────────────┘  └────────────────┘  │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                      │
│  ┌──────────────────┐  ┌──────────────────┐                        │
│  │  LLM Integration │  │  Legal RAG       │──────┐                  │
│  │  (nur Explain)   │  │  Client          │      │                  │
│  └──────────────────┘  └──────────────────┘      │                  │
└─────────────────────────────┬────────────────────┼──────────────────┘
                              │                    │
                              ▼                    ▼
┌─────────────────────────────────────────────────────────────────────┐
│                        Datenschicht                                  │
│  ┌────────────────────┐  ┌────────────────────┐                     │
│  │    PostgreSQL      │  │    Qdrant          │                     │
│  │    (Assessments,   │  │    (Legal Corpus,  │                     │
│  │     Escalations)   │  │     2,274 Chunks)  │                     │
│  └────────────────────┘  └────────────────────┘                     │
└─────────────────────────────────────────────────────────────────────┘
          `}</pre>
        </div>

        <div className="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <h4 className="font-medium text-blue-800 mb-2">Datenfluss</h4>
            <ol className="text-sm text-blue-700 list-decimal list-inside space-y-1">
              <li>Benutzer beschreibt Use Case im Frontend</li>
              <li>Policy Engine evaluiert gegen alle Regeln</li>
              <li>Ergebnis mit Controls + Patterns zurueck</li>
              <li>Optional: LLM erklaert das Ergebnis</li>
              <li>Bei Risiko: Automatische Eskalation</li>
            </ol>
          </div>
          <div className="p-4 bg-green-50 rounded-lg border border-green-200">
            <h4 className="font-medium text-green-800 mb-2">Sicherheitsmerkmale</h4>
            <ul className="text-sm text-green-700 list-disc list-inside space-y-1">
              <li>TLS 1.3 Verschluesselung</li>
              <li>RBAC mit Tenant-Isolation</li>
              <li>JWT-basierte Authentifizierung</li>
              <li>Audit-Trail aller Aktionen</li>
              <li>Keine Rohtext-Speicherung (nur Hash)</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-800 text-lg mb-4">Eskalations-Workflow</h3>
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <thead>
              <tr className="border-b border-slate-200">
                <th className="text-left py-2 px-3 font-medium text-slate-600">Level</th>
                <th className="text-left py-2 px-3 font-medium text-slate-600">Ausloeser</th>
                <th className="text-left py-2 px-3 font-medium text-slate-600">Pruefer</th>
                <th className="text-left py-2 px-3 font-medium text-slate-600">SLA</th>
              </tr>
            </thead>
            <tbody>
              <tr className="border-b border-slate-100 bg-green-50">
                <td className="py-2 px-3 font-medium text-green-700">E0</td>
                <td className="py-2 px-3 text-slate-600">Nur INFO-Regeln, Risiko &lt; 20</td>
                <td className="py-2 px-3 text-slate-600">Automatisch</td>
                <td className="py-2 px-3 text-slate-600">-</td>
              </tr>
              <tr className="border-b border-slate-100 bg-yellow-50">
                <td className="py-2 px-3 font-medium text-yellow-700">E1</td>
                <td className="py-2 px-3 text-slate-600">WARN-Regeln, Risiko 20-40</td>
                <td className="py-2 px-3 text-slate-600">Team-Lead</td>
                <td className="py-2 px-3 text-slate-600">24h / 72h</td>
              </tr>
              <tr className="border-b border-slate-100 bg-orange-50">
                <td className="py-2 px-3 font-medium text-orange-700">E2</td>
                <td className="py-2 px-3 text-slate-600">Art. 9 Daten, DSFA empfohlen, Risiko 40-60</td>
                <td className="py-2 px-3 text-slate-600">DSB</td>
                <td className="py-2 px-3 text-slate-600">8h / 48h</td>
              </tr>
              <tr className="bg-red-50">
                <td className="py-2 px-3 font-medium text-red-700">E3</td>
                <td className="py-2 px-3 text-slate-600">BLOCK-Regeln, Art. 22, Risiko &gt; 60</td>
                <td className="py-2 px-3 text-slate-600">DSB + Legal</td>
                <td className="py-2 px-3 text-slate-600">4h / 24h</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )

  const renderAuditorInfo = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-800 text-lg mb-4">
          Dokumentation fuer externe Auditoren
        </h3>
        <p className="text-slate-600 mb-4">
          Diese Dokumentation erfuellt die Anforderungen nach Art. 30 DSGVO (Verzeichnis von
          Verarbeitungstaetigkeiten) und dient als Grundlage fuer Audits nach Art. 32 DSGVO.
        </p>

        <div className="space-y-4">
          <div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
            <h4 className="font-medium text-slate-800 mb-2">1. Zweck des Systems</h4>
            <p className="text-sm text-slate-600">
              UCCA ist ein Compliance-Pruefwerkzeug zur Bewertung geplanter KI-Anwendungsfaelle
              hinsichtlich ihrer datenschutzrechtlichen Zulaessigkeit.
            </p>
          </div>

          <div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
            <h4 className="font-medium text-slate-800 mb-2">2. Rechtsgrundlage</h4>
            <ul className="text-sm text-slate-600 list-disc list-inside space-y-1">
              <li><strong>Art. 6 Abs. 1 lit. c DSGVO</strong> - Erfuellung rechtlicher Verpflichtungen</li>
              <li><strong>Art. 6 Abs. 1 lit. f DSGVO</strong> - Berechtigte Interessen (Compliance-Management)</li>
            </ul>
          </div>

          <div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
            <h4 className="font-medium text-slate-800 mb-2">3. Verarbeitete Datenkategorien</h4>
            <div className="overflow-x-auto">
              <table className="w-full text-sm mt-2">
                <thead>
                  <tr className="border-b border-slate-200">
                    <th className="text-left py-2 px-2 font-medium text-slate-600">Kategorie</th>
                    <th className="text-left py-2 px-2 font-medium text-slate-600">Speicherung</th>
                    <th className="text-left py-2 px-2 font-medium text-slate-600">Aufbewahrung</th>
                  </tr>
                </thead>
                <tbody className="text-slate-600">
                  <tr className="border-b border-slate-100">
                    <td className="py-2 px-2">Use-Case-Beschreibung</td>
                    <td className="py-2 px-2">Nur Hash (SHA-256)</td>
                    <td className="py-2 px-2">10 Jahre</td>
                  </tr>
                  <tr className="border-b border-slate-100">
                    <td className="py-2 px-2">Bewertungsergebnis</td>
                    <td className="py-2 px-2">Vollstaendig</td>
                    <td className="py-2 px-2">10 Jahre</td>
                  </tr>
                  <tr className="border-b border-slate-100">
                    <td className="py-2 px-2">Audit-Trail</td>
                    <td className="py-2 px-2">Vollstaendig</td>
                    <td className="py-2 px-2">10 Jahre</td>
                  </tr>
                  <tr>
                    <td className="py-2 px-2">Eskalations-Historie</td>
                    <td className="py-2 px-2">Vollstaendig</td>
                    <td className="py-2 px-2">10 Jahre</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <div className="p-4 bg-slate-50 rounded-lg border border-slate-200">
            <h4 className="font-medium text-slate-800 mb-2">4. Keine autonomen KI-Entscheidungen</h4>
            <p className="text-sm text-slate-600">
              Das System trifft <strong>KEINE automatisierten Einzelentscheidungen</strong> im Sinne
              von Art. 22 DSGVO, da:
            </p>
            <ul className="text-sm text-slate-600 list-disc list-inside mt-2 space-y-1">
              <li>Regelauswertung ist keine rechtlich bindende Entscheidung</li>
              <li>Alle kritischen Faelle werden menschlich geprueft (E1-E3)</li>
              <li>BLOCK-Entscheidungen erfordern immer menschliche Freigabe</li>
              <li>Betroffene haben Anfechtungsmoeglichkeit ueber Eskalation</li>
            </ul>
          </div>

          <div className="p-4 bg-green-50 rounded-lg border border-green-200">
            <h4 className="font-medium text-green-800 mb-2">5. Technische und Organisatorische Massnahmen</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
              <div>
                <strong className="text-green-700">Vertraulichkeit</strong>
                <ul className="text-green-700 list-disc list-inside mt-1">
                  <li>RBAC mit Tenant-Isolation</li>
                  <li>TLS 1.3 Verschluesselung</li>
                  <li>AES-256 at rest</li>
                </ul>
              </div>
              <div>
                <strong className="text-green-700">Integritaet</strong>
                <ul className="text-green-700 list-disc list-inside mt-1">
                  <li>Unveraenderlicher Audit-Trail</li>
                  <li>Policy-Versionierung</li>
                  <li>Input-Validierung</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )

  const renderRulesTab = () => (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-semibold text-slate-800 text-lg">Regel-Katalog</h3>
          <p className="text-sm text-slate-500">Policy Version: {policyVersion}</p>
        </div>
        <div className="text-sm text-slate-500">
          {rules.length} Regeln insgesamt
        </div>
      </div>

      {loading ? (
        <div className="text-center py-8 text-slate-500">Lade Regeln...</div>
      ) : (
        <div className="space-y-4">
          {Array.from(new Set(rules.map(r => r.category))).map(category => (
            <div key={category} className="bg-white rounded-xl border border-slate-200 overflow-hidden">
              <div className="px-4 py-3 bg-slate-50 border-b border-slate-200">
                <h4 className="font-medium text-slate-800">{category}</h4>
                <p className="text-xs text-slate-500">
                  {rules.filter(r => r.category === category).length} Regeln
                </p>
              </div>
              <div className="divide-y divide-slate-100">
                {rules.filter(r => r.category === category).map(rule => (
                  <div key={rule.code} className="p-4">
                    <div className="flex items-start justify-between gap-4">
                      <div className="flex-1">
                        <div className="flex items-center gap-2">
                          <span className="font-mono text-sm text-slate-500">{rule.code}</span>
                          <span className={`text-xs px-2 py-0.5 rounded ${
                            rule.severity === 'BLOCK' ? 'bg-red-100 text-red-700' :
                            rule.severity === 'WARN' ? 'bg-yellow-100 text-yellow-700' :
                            'bg-blue-100 text-blue-700'
                          }`}>
                            {rule.severity}
                          </span>
                        </div>
                        <div className="font-medium text-slate-800 mt-1">{rule.title}</div>
                        <div className="text-sm text-slate-600 mt-1">{rule.description}</div>
                        {rule.gdpr_ref && (
                          <div className="text-xs text-slate-500 mt-2">{rule.gdpr_ref}</div>
                        )}
                      </div>
                      {rule.risk_add && (
                        <div className="text-sm font-medium text-red-600">
                          +{rule.risk_add}
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )

  const renderLegalCorpus = () => (
    <div className="space-y-6">
      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-800 text-lg mb-4">Legal RAG Corpus</h3>
        <p className="text-slate-600 mb-4">
          Das System verwendet einen semantischen Suchindex mit 2.274 Chunks aus 19 EU-Regulierungen
          fuer rechtsgrundlagenbasierte Erklaerungen.
        </p>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
            <h4 className="font-medium text-blue-800 mb-2">Indexierte Regulierungen</h4>
            <ul className="text-sm text-blue-700 space-y-1">
              <li>DSGVO - Datenschutz-Grundverordnung</li>
              <li>AI Act - EU KI-Verordnung</li>
              <li>NIS2 - Cybersicherheits-Richtlinie</li>
              <li>CRA - Cyber Resilience Act</li>
              <li>Data Act - Datengesetz</li>
              <li>DSA/DMA - Digital Services/Markets Act</li>
              <li>DPF - EU-US Data Privacy Framework</li>
              <li>BSI-TR-03161 - Digitale Identitaeten</li>
            </ul>
          </div>
          <div className="p-4 bg-green-50 rounded-lg border border-green-200">
            <h4 className="font-medium text-green-800 mb-2">RAG-Funktionalitaet</h4>
            <ul className="text-sm text-green-700 space-y-1">
              <li>Hybride Suche (Dense + BM25)</li>
              <li>Semantisches Chunking</li>
              <li>Cross-Encoder Reranking</li>
              <li>Artikel-Referenz-Extraktion</li>
              <li>Mehrsprachig (DE/EN)</li>
            </ul>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-xl border border-slate-200 p-6">
        <h3 className="font-semibold text-slate-800 mb-4">Verwendung im System</h3>
        <div className="space-y-3">
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-purple-100 text-purple-700 rounded-full flex items-center justify-center flex-shrink-0">
              1
            </div>
            <div>
              <div className="font-medium text-slate-800">Benutzer fordert Erklaerung an</div>
              <div className="text-sm text-slate-600">
                Nach der Bewertung kann eine LLM-basierte Erklaerung generiert werden.
              </div>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-purple-100 text-purple-700 rounded-full flex items-center justify-center flex-shrink-0">
              2
            </div>
            <div>
              <div className="font-medium text-slate-800">Legal RAG Client sucht relevante Artikel</div>
              <div className="text-sm text-slate-600">
                Basierend auf den ausgeloesten Regeln werden passende Gesetzestexte gefunden.
              </div>
            </div>
          </div>
          <div className="flex items-start gap-3">
            <div className="w-8 h-8 bg-purple-100 text-purple-700 rounded-full flex items-center justify-center flex-shrink-0">
              3
            </div>
            <div>
              <div className="font-medium text-slate-800">LLM generiert Erklaerung mit Rechtsgrundlage</div>
              <div className="text-sm text-slate-600">
                Die Erklaerung referenziert konkrete Artikel aus DSGVO, AI Act etc.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )

  // ============================================================================
  // Tabs Configuration
  // ============================================================================

  const tabs: { id: DocTab; label: string }[] = [
    { id: 'overview', label: 'Uebersicht' },
    { id: 'architecture', label: 'Architektur' },
    { id: 'auditor', label: 'Fuer Auditoren' },
    { id: 'rules', label: 'Regel-Katalog' },
    { id: 'legal-corpus', label: 'Legal RAG' },
  ]

  // ============================================================================
  // Main Render
  // ============================================================================

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div className="bg-white rounded-xl shadow-sm border p-6 flex-1">
          <h1 className="text-2xl font-bold text-slate-900">UCCA System-Dokumentation</h1>
          <p className="text-slate-500 mt-1">
            Transparente Dokumentation des UCCA-Systems fuer Entwickler, Auditoren und Datenschutzbeauftragte.
          </p>
        </div>
        <Link
          href="/sdk/advisory-board"
          className="ml-4 px-4 py-2 text-sm text-slate-600 hover:text-slate-800 border border-slate-200 rounded-lg hover:bg-slate-50"
        >
          Zurueck zum Advisory Board
        </Link>
      </div>

      {/* Tab Navigation */}
      <div className="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
        <div className="flex border-b border-slate-200 overflow-x-auto">
          {tabs.map(tab => (
            <button
              key={tab.id}
              onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-2 px-4 py-3 text-sm font-medium whitespace-nowrap transition-colors ${
                activeTab === tab.id
                  ? 'text-purple-600 border-b-2 border-purple-600 bg-purple-50'
                  : 'text-slate-600 hover:text-slate-800 hover:bg-slate-50'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        <div className="p-6">
          {activeTab === 'overview' && renderOverview()}
          {activeTab === 'architecture' && renderArchitecture()}
          {activeTab === 'auditor' && renderAuditorInfo()}
          {activeTab === 'rules' && renderRulesTab()}
          {activeTab === 'legal-corpus' && renderLegalCorpus()}
        </div>
      </div>
    </div>
  )
}