breakpilot-pwa/backend/frontend/modules/system_info.py

"""
BreakPilot Studio - System Info Module

Zeigt System-Informationen und Dokumentation an, analog zu den Admin-Seiten
im Next.js Frontend.
"""


class SystemInfoModule:
    """System-Info Modul fuer BreakPilot Studio."""

    @staticmethod
    def get_css() -> str:
        """CSS fuer das System-Info Panel."""
        return """
/* ==========================================
   SYSTEM INFO MODULE
   ========================================== */

#panel-system-info {
  display: none;
  flex-direction: column;
  padding: 24px;
  min-height: calc(100vh - 104px);
}

#panel-system-info.active {
  display: flex;
}

.system-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.system-info-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--bp-text);
  margin-bottom: 4px;
}

.system-info-subtitle {
  font-size: 14px;
  color: var(--bp-text-muted);
}

.system-info-version {
  padding: 6px 12px;
  background: var(--bp-accent-soft);
  color: var(--bp-accent);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* Privacy Notes */
.privacy-notes {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}

.privacy-notes-title {
  font-size: 14px;
  font-weight: 600;
  color: #3b82f6;
  margin-bottom: 8px;
}

.privacy-notes-list {
  list-style: none;
}

.privacy-notes-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #60a5fa;
  margin-bottom: 4px;
}

.privacy-notes-list li::before {
  content: "✓";
  color: #3b82f6;
  flex-shrink: 0;
}

/* Tabs */
.system-info-tabs {
  display: flex;
  gap: 16px;
  border-bottom: 1px solid var(--bp-border);
  margin-bottom: 24px;
}

.system-info-tab {
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--bp-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.system-info-tab:hover {
  color: var(--bp-text);
}

.system-info-tab.active {
  color: var(--bp-primary);
  border-bottom-color: var(--bp-primary);
}

/* Tab Content */
.system-info-content {
  flex: 1;
  min-height: 400px;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

/* Features Section */
.features-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-card {
  background: var(--bp-surface-elevated);
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  padding: 16px;
}

.feature-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.feature-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--bp-text);
}

.feature-status {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.feature-status.active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.feature-status.planned {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.feature-status.disabled {
  background: rgba(100, 116, 139, 0.15);
  color: #64748b;
}

.feature-description {
  font-size: 13px;
  color: var(--bp-text-muted);
}

/* Architecture Section */
.architecture-diagram {
  background: var(--bp-surface-elevated);
  border: 1px solid var(--bp-border);
  border-radius: 12px;
  padding: 24px;
}

.architecture-layer {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 8px;
  border: 2px solid;
  text-align: center;
}

.architecture-layer-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.architecture-components {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.architecture-component {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.architecture-arrow {
  text-align: center;
  color: var(--bp-text-muted);
  font-size: 20px;
  margin: 8px 0;
}

/* Roadmap Section */
.roadmap-phases {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.roadmap-phase {
  background: var(--bp-surface-elevated);
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  padding: 16px;
}

.roadmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.roadmap-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bp-text);
}

.roadmap-priority {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.roadmap-priority.high {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.roadmap-priority.medium {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.roadmap-priority.low {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}

.roadmap-items {
  list-style: none;
}

.roadmap-items li {
  font-size: 13px;
  color: var(--bp-text-muted);
  padding: 4px 0;
  padding-left: 16px;
  position: relative;
}

.roadmap-items li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--bp-text-muted);
}

/* Technical Table */
.technical-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bp-surface-elevated);
  border-radius: 8px;
  overflow: hidden;
}

.technical-table th,
.technical-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--bp-border);
}

.technical-table th {
  background: var(--bp-surface);
  font-weight: 600;
  color: var(--bp-text-muted);
  text-transform: uppercase;
  font-size: 11px;
}

.technical-table td {
  color: var(--bp-text);
}

.technical-table tr:last-child td {
  border-bottom: none;
}

/* Audit Section */
.audit-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.audit-section {
  background: var(--bp-surface-elevated);
  border: 1px solid var(--bp-border);
  border-radius: 8px;
  padding: 16px;
}

.audit-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--bp-text);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.audit-section-title::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--bp-primary);
  color: white;
  border-radius: 50%;
  font-size: 12px;
}

.audit-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--bp-border-subtle);
}

.audit-item:last-child {
  border-bottom: none;
}

.audit-item-label {
  font-size: 13px;
  color: var(--bp-text-muted);
}

.audit-item-value {
  font-size: 13px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
}

.audit-item-value.ok {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.audit-item-value.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.audit-item-value.critical {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

/* Documentation Section */
.documentation-container {
  background: var(--bp-bg);
  color: var(--bp-text);
  padding: 24px;
  border-radius: 12px;
  overflow: auto;
  max-height: 600px;
}

.documentation-container h2 {
  font-size: 20px;
  margin: 24px 0 12px 0;
  color: var(--bp-text);
}

.documentation-container h2:first-child {
  margin-top: 0;
}

.documentation-container h3 {
  font-size: 16px;
  margin: 20px 0 8px 0;
  color: var(--bp-text);
}

.documentation-container p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--bp-text-muted);
}

.documentation-container pre {
  background: var(--bp-surface);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12px;
  font-family: 'Monaco', 'Menlo', monospace;
  margin: 12px 0;
  color: var(--bp-text);
}

.documentation-container ul,
.documentation-container ol {
  margin: 12px 0;
  padding-left: 24px;
}

.documentation-container li {
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--bp-text-muted);
}

.documentation-container table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.documentation-container th,
.documentation-container td {
  padding: 8px 12px;
  border: 1px solid var(--bp-border);
  text-align: left;
  font-size: 13px;
}

.documentation-container th {
  background: var(--bp-surface);
}

/* Export Buttons */
.export-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
"""

    @staticmethod
    def get_html() -> str:
        """HTML fuer das System-Info Panel."""
        return """
<!-- SYSTEM INFO PANEL -->
<div id="panel-system-info" class="module-panel">
  <!-- Header -->
  <div class="system-info-header">
    <div>
      <h1 class="system-info-title">BreakPilot Studio - System Info</h1>
      <p class="system-info-subtitle">Plattform-Dokumentation und technische Details</p>
    </div>
    <span class="system-info-version">Version 2.0</span>
  </div>

  <!-- Privacy Notes -->
  <div class="privacy-notes">
    <h3 class="privacy-notes-title">Datenschutz-Hinweise</h3>
    <ul class="privacy-notes-list">
      <li>Alle Daten werden DSGVO-konform verarbeitet</li>
      <li>Verschluesselte Datenuebertragung (TLS 1.3)</li>
      <li>Daten werden in deutschen Rechenzentren gehostet</li>
      <li>Regelmaessige Sicherheitsaudits</li>
    </ul>
  </div>

  <!-- Tabs -->
  <div class="system-info-tabs">
    <button class="system-info-tab active" data-tab="overview">Uebersicht</button>
    <button class="system-info-tab" data-tab="architecture">Architektur</button>
    <button class="system-info-tab" data-tab="roadmap">Roadmap</button>
    <button class="system-info-tab" data-tab="technical">Technisch</button>
    <button class="system-info-tab" data-tab="audit">Audit</button>
    <button class="system-info-tab" data-tab="documentation">Dokumentation</button>
  </div>

  <!-- Tab Content -->
  <div class="system-info-content">
    <!-- Overview Tab -->
    <div id="tab-overview" class="tab-pane active">
      <h3 style="font-size: 12px; text-transform: uppercase; color: var(--bp-text-muted); margin-bottom: 16px;">Features</h3>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-header">
            <span class="feature-name">Arbeitsblaetter-Generator</span>
            <span class="feature-status active">Aktiv</span>
          </div>
          <p class="feature-description">KI-gestuetzte Erstellung von Arbeitsblaettern und Lernmaterialien</p>
        </div>
        <div class="feature-card">
          <div class="feature-header">
            <span class="feature-name">Klausurkorrektur</span>
            <span class="feature-status active">Aktiv</span>
          </div>
          <p class="feature-description">Automatische Klausurkorrektur mit OCR und KI-Bewertung</p>
        </div>
        <div class="feature-card">
          <div class="feature-header">
            <span class="feature-name">Elternkommunikation</span>
            <span class="feature-status active">Aktiv</span>
          </div>
          <p class="feature-description">Rechtssichere Elternbriefe und Benachrichtigungen</p>
        </div>
        <div class="feature-card">
          <div class="feature-header">
            <span class="feature-name">Videokonferenzen</span>
            <span class="feature-status active">Aktiv</span>
          </div>
          <p class="feature-description">Integrierte Jitsi-Videokonferenzen fuer Elterngespraeche</p>
        </div>
        <div class="feature-card">
          <div class="feature-header">
            <span class="feature-name">Messenger</span>
            <span class="feature-status active">Aktiv</span>
          </div>
          <p class="feature-description">Sichere Matrix-basierte Kommunikation</p>
        </div>
        <div class="feature-card">
          <div class="feature-header">
            <span class="feature-name">Unified Inbox</span>
            <span class="feature-status planned">Geplant</span>
          </div>
          <p class="feature-description">Zentrale E-Mail-Verwaltung mit KI-Unterstuetzung</p>
        </div>
      </div>
    </div>

    <!-- Architecture Tab -->
    <div id="tab-architecture" class="tab-pane">
      <h3 style="font-size: 12px; text-transform: uppercase; color: var(--bp-text-muted); margin-bottom: 16px;">System-Architektur</h3>
      <div class="architecture-diagram">
        <div class="architecture-layer" style="border-color: #3b82f6; background: rgba(59, 130, 246, 0.1);">
          <div class="architecture-layer-title" style="color: #3b82f6;">Frontend (Next.js / Python)</div>
          <div class="architecture-components">
            <span class="architecture-component" style="background: rgba(59, 130, 246, 0.2); color: #3b82f6;">Admin Dashboard</span>
            <span class="architecture-component" style="background: rgba(59, 130, 246, 0.2); color: #3b82f6;">Studio UI</span>
            <span class="architecture-component" style="background: rgba(59, 130, 246, 0.2); color: #3b82f6;">API Routes</span>
          </div>
        </div>
        <div class="architecture-arrow">↓</div>
        <div class="architecture-layer" style="border-color: #8b5cf6; background: rgba(139, 92, 246, 0.1);">
          <div class="architecture-layer-title" style="color: #8b5cf6;">Backend Services</div>
          <div class="architecture-components">
            <span class="architecture-component" style="background: rgba(139, 92, 246, 0.2); color: #8b5cf6;">FastAPI Backend</span>
            <span class="architecture-component" style="background: rgba(139, 92, 246, 0.2); color: #8b5cf6;">Consent Service (Go)</span>
            <span class="architecture-component" style="background: rgba(139, 92, 246, 0.2); color: #8b5cf6;">Klausur Service</span>
          </div>
        </div>
        <div class="architecture-arrow">↓</div>
        <div class="architecture-layer" style="border-color: #10b981; background: rgba(16, 185, 129, 0.1);">
          <div class="architecture-layer-title" style="color: #10b981;">KI & Processing</div>
          <div class="architecture-components">
            <span class="architecture-component" style="background: rgba(16, 185, 129, 0.2); color: #10b981;">OpenAI GPT-4o</span>
            <span class="architecture-component" style="background: rgba(16, 185, 129, 0.2); color: #10b981;">Claude 3.5</span>
            <span class="architecture-component" style="background: rgba(16, 185, 129, 0.2); color: #10b981;">vast.ai GPU</span>
          </div>
        </div>
        <div class="architecture-arrow">↓</div>
        <div class="architecture-layer" style="border-color: #f59e0b; background: rgba(245, 158, 11, 0.1);">
          <div class="architecture-layer-title" style="color: #f59e0b;">Datenbanken</div>
          <div class="architecture-components">
            <span class="architecture-component" style="background: rgba(245, 158, 11, 0.2); color: #f59e0b;">PostgreSQL</span>
            <span class="architecture-component" style="background: rgba(245, 158, 11, 0.2); color: #f59e0b;">Qdrant</span>
            <span class="architecture-component" style="background: rgba(245, 158, 11, 0.2); color: #f59e0b;">Valkey</span>
            <span class="architecture-component" style="background: rgba(245, 158, 11, 0.2); color: #f59e0b;">MinIO</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Roadmap Tab -->
    <div id="tab-roadmap" class="tab-pane">
      <h3 style="font-size: 12px; text-transform: uppercase; color: var(--bp-text-muted); margin-bottom: 16px;">Optimierungs-Roadmap</h3>
      <div class="roadmap-phases">
        <div class="roadmap-phase">
          <div class="roadmap-header">
            <span class="roadmap-title">Phase 1: KI-Erweiterung</span>
            <span class="roadmap-priority high">High</span>
          </div>
          <ul class="roadmap-items">
            <li>Multi-Provider LLM-Unterstuetzung</li>
            <li>Lokale Modelle mit Ollama</li>
            <li>RAG-Verbesserungen</li>
            <li>Automatische Qualitaetspruefung</li>
          </ul>
        </div>
        <div class="roadmap-phase">
          <div class="roadmap-header">
            <span class="roadmap-title">Phase 2: Collaboration</span>
            <span class="roadmap-priority medium">Medium</span>
          </div>
          <ul class="roadmap-items">
            <li>Echtzeit-Zusammenarbeit</li>
            <li>Kommentar-System</li>
            <li>Versionskontrolle</li>
            <li>Team-Workspaces</li>
          </ul>
        </div>
        <div class="roadmap-phase">
          <div class="roadmap-header">
            <span class="roadmap-title">Phase 3: Analytics</span>
            <span class="roadmap-priority low">Low</span>
          </div>
          <ul class="roadmap-items">
            <li>Nutzungsstatistiken</li>
            <li>Lernfortschritt-Tracking</li>
            <li>KI-Insights</li>
            <li>Reporting-Dashboard</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- Technical Tab -->
    <div id="tab-technical" class="tab-pane">
      <h3 style="font-size: 12px; text-transform: uppercase; color: var(--bp-text-muted); margin-bottom: 16px;">Technische Details</h3>
      <table class="technical-table">
        <thead>
          <tr>
            <th>Komponente</th>
            <th>Technologie</th>
            <th>Version</th>
            <th>Beschreibung</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Backend</td>
            <td style="font-family: monospace;">FastAPI</td>
            <td>0.109+</td>
            <td>Python Async API</td>
          </tr>
          <tr>
            <td>Consent Service</td>
            <td style="font-family: monospace;">Go + Gin</td>
            <td>1.21+</td>
            <td>DSGVO-Consent-Verwaltung</td>
          </tr>
          <tr>
            <td>Database</td>
            <td style="font-family: monospace;">PostgreSQL</td>
            <td>16</td>
            <td>Relationale Daten</td>
          </tr>
          <tr>
            <td>Vector DB</td>
            <td style="font-family: monospace;">Qdrant</td>
            <td>1.12+</td>
            <td>RAG & Semantic Search</td>
          </tr>
          <tr>
            <td>Cache</td>
            <td style="font-family: monospace;">Valkey</td>
            <td>8.x</td>
            <td>Redis-kompatibel</td>
          </tr>
          <tr>
            <td>Storage</td>
            <td style="font-family: monospace;">MinIO</td>
            <td>Latest</td>
            <td>S3-kompatibel</td>
          </tr>
          <tr>
            <td>KI</td>
            <td style="font-family: monospace;">OpenAI / Anthropic</td>
            <td>GPT-4o / Claude 3.5</td>
            <td>LLM Provider</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Audit Tab -->
    <div id="tab-audit" class="tab-pane">
      <h3 style="font-size: 12px; text-transform: uppercase; color: var(--bp-text-muted); margin-bottom: 16px;">Audit-relevante Informationen</h3>
      <div class="audit-sections">
        <div class="audit-section">
          <h4 class="audit-section-title">DSGVO-Compliance</h4>
          <div class="audit-items">
            <div class="audit-item">
              <span class="audit-item-label">Art. 7 Einwilligung</span>
              <span class="audit-item-value ok">Implementiert</span>
            </div>
            <div class="audit-item">
              <span class="audit-item-label">Art. 13/14 Informationspflichten</span>
              <span class="audit-item-value ok">Implementiert</span>
            </div>
            <div class="audit-item">
              <span class="audit-item-label">Art. 17 Recht auf Loeschung</span>
              <span class="audit-item-value ok">Implementiert</span>
            </div>
            <div class="audit-item">
              <span class="audit-item-label">Art. 20 Datenportabilitaet</span>
              <span class="audit-item-value ok">Implementiert</span>
            </div>
          </div>
        </div>
        <div class="audit-section">
          <h4 class="audit-section-title">Technische Sicherheit</h4>
          <div class="audit-items">
            <div class="audit-item">
              <span class="audit-item-label">Verschluesselung</span>
              <span class="audit-item-value ok">AES-256 at rest</span>
            </div>
            <div class="audit-item">
              <span class="audit-item-label">TLS</span>
              <span class="audit-item-value ok">1.3</span>
            </div>
            <div class="audit-item">
              <span class="audit-item-label">Audit-Log</span>
              <span class="audit-item-value ok">Lueckenlos</span>
            </div>
            <div class="audit-item">
              <span class="audit-item-label">Backup</span>
              <span class="audit-item-value ok">Taeglich, 30 Tage</span>
            </div>
          </div>
        </div>
        <div class="audit-section">
          <h4 class="audit-section-title">Betrieb</h4>
          <div class="audit-items">
            <div class="audit-item">
              <span class="audit-item-label">Hosting</span>
              <span class="audit-item-value ok">Deutschland (Hetzner)</span>
            </div>
            <div class="audit-item">
              <span class="audit-item-label">Uptime SLA</span>
              <span class="audit-item-value ok">> 99.9%</span>
            </div>
            <div class="audit-item">
              <span class="audit-item-label">Monitoring</span>
              <span class="audit-item-value ok">24/7</span>
            </div>
            <div class="audit-item">
              <span class="audit-item-label">Penetration Tests</span>
              <span class="audit-item-value warning">Quartalsweise</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Documentation Tab -->
    <div id="tab-documentation" class="tab-pane">
      <h3 style="font-size: 12px; text-transform: uppercase; color: var(--bp-text-muted); margin-bottom: 16px;">Vollstaendige Dokumentation</h3>
      <div class="documentation-container">
        <h2>BreakPilot Studio - Plattformdokumentation</h2>

        <h3>1. Uebersicht</h3>
        <p>BreakPilot Studio ist eine umfassende Plattform fuer Lehrkraefte zur Erstellung von Lernmaterialien, Klausurkorrektur und Elternkommunikation. Die Plattform nutzt modernste KI-Technologie fuer automatisierte Workflows.</p>

        <h3>2. Module</h3>
        <table>
          <tr><th>Modul</th><th>Beschreibung</th><th>Status</th></tr>
          <tr><td>Arbeitsblaetter</td><td>KI-gestuetzte Erstellung von Lernmaterialien</td><td>Aktiv</td></tr>
          <tr><td>Klausurkorrektur</td><td>Automatische Korrektur mit Feedback</td><td>Aktiv</td></tr>
          <tr><td>Elternbriefe</td><td>Rechtssichere Kommunikation</td><td>Aktiv</td></tr>
          <tr><td>Videokonferenz</td><td>Integrierte Jitsi-Meetings</td><td>Aktiv</td></tr>
          <tr><td>Messenger</td><td>Matrix-basierte Kommunikation</td><td>Aktiv</td></tr>
          <tr><td>Content Creator</td><td>Interaktive Lerneinheiten</td><td>Aktiv</td></tr>
        </table>

        <h3>3. API-Dokumentation</h3>
        <p>Die API ist unter <code>/docs</code> (Swagger) und <code>/redoc</code> (ReDoc) dokumentiert.</p>
        <pre>
# Beispiel: Arbeitsblatt generieren
POST /api/worksheets/generate
{
  "topic": "Quadratische Funktionen",
  "grade": 10,
  "difficulty": "medium"
}
        </pre>

        <h3>4. Sicherheit</h3>
        <ul>
          <li>JWT-basierte Authentifizierung</li>
          <li>Role-Based Access Control (RBAC)</li>
          <li>Verschluesselte Datenspeicherung</li>
          <li>Regelmaessige Security-Audits</li>
        </ul>

        <h3>5. Datenschutz</h3>
        <p>Alle personenbezogenen Daten werden DSGVO-konform verarbeitet. Details finden sich in der Datenschutzerklaerung.</p>

        <h3>6. Support</h3>
        <p>Bei Fragen oder Problemen wenden Sie sich an den Support unter support@breakpilot.de</p>
      </div>

      <div class="export-buttons">
        <button class="btn btn-ghost" onclick="exportSystemInfoJSON()">JSON Export</button>
        <button class="btn btn-primary" onclick="printSystemInfo()">Drucken / PDF</button>
      </div>
    </div>
  </div>
</div>
"""

    @staticmethod
    def get_js() -> str:
        """JavaScript fuer das System-Info Panel."""
        return """
// ==========================================
// SYSTEM INFO MODULE
// ==========================================

console.log('System Info Module loaded');

// Tab-Wechsel
document.querySelectorAll('.system-info-tab').forEach(tab => {
  tab.addEventListener('click', function() {
    const tabId = this.dataset.tab;

    // Alle Tabs deaktivieren
    document.querySelectorAll('.system-info-tab').forEach(t => t.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));

    // Ausgewaehlten Tab aktivieren
    this.classList.add('active');
    document.getElementById('tab-' + tabId).classList.add('active');
  });
});

// JSON Export
function exportSystemInfoJSON() {
  const data = {
    title: 'BreakPilot Studio System-Info',
    version: '2.0',
    exported_at: new Date().toISOString(),
    features: [
      { name: 'Arbeitsblaetter-Generator', status: 'active' },
      { name: 'Klausurkorrektur', status: 'active' },
      { name: 'Elternkommunikation', status: 'active' },
      { name: 'Videokonferenzen', status: 'active' },
      { name: 'Messenger', status: 'active' },
      { name: 'Unified Inbox', status: 'planned' }
    ],
    technical: [
      { component: 'Backend', technology: 'FastAPI', version: '0.109+' },
      { component: 'Consent Service', technology: 'Go + Gin', version: '1.21+' },
      { component: 'Database', technology: 'PostgreSQL', version: '16' },
      { component: 'Vector DB', technology: 'Qdrant', version: '1.12+' },
      { component: 'Cache', technology: 'Valkey', version: '8.x' }
    ]
  };

  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'breakpilot-system-info.json';
  a.click();
  URL.revokeObjectURL(url);
}

// Print/PDF
function printSystemInfo() {
  const printWindow = window.open('', '_blank');
  if (printWindow) {
    const docContent = document.querySelector('.documentation-container')?.innerHTML || '';
    printWindow.document.write(`
      <!DOCTYPE html>
      <html>
      <head>
        <title>BreakPilot Studio - System-Info</title>
        <style>
          body { font-family: system-ui, sans-serif; padding: 40px; max-width: 800px; margin: 0 auto; }
          h1, h2, h3 { color: #1e293b; }
          pre { background: #f1f5f9; padding: 12px; border-radius: 6px; overflow-x: auto; }
          code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; }
          table { border-collapse: collapse; width: 100%; margin: 16px 0; }
          th, td { border: 1px solid #e2e8f0; padding: 8px 12px; text-align: left; }
          th { background: #f8fafc; }
        </style>
      </head>
      <body>
        <h1>BreakPilot Studio - System-Info</h1>
        <p><em>Exportiert am: ${new Date().toLocaleString('de-DE')}</em></p>
        <hr>
        ${docContent}
      </body>
      </html>
    `);
    printWindow.document.close();
    printWindow.print();
  }
}

// Show System Info Panel
function showSystemInfoPanel() {
  console.log('Showing System Info Panel');
}

// Load function for module loader
function loadSystemInfoModule() {
  console.log('System Info Module initialized');
  showSystemInfoPanel();
}

// Expose globally
window.loadSystemInfoModule = loadSystemInfoModule;
window.exportSystemInfoJSON = exportSystemInfoJSON;
window.printSystemInfo = printSystemInfo;
"""