'use client'

interface DocumentationSectionProps {
  showFullDocs: boolean
  setShowFullDocs: (show: boolean) => void
}

export function DocumentationSection({ showFullDocs, setShowFullDocs }: DocumentationSectionProps) {
  return (
    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
      <div className="p-6">
        <div className="flex justify-between items-center mb-4">
          <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
            <svg className="w-5 h-5 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
            </svg>
            Security Dokumentation
          </h3>
          <button
            onClick={() => setShowFullDocs(!showFullDocs)}
            className="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200 transition-colors flex items-center gap-2 text-sm font-medium"
          >
            <svg className={`w-4 h-4 transition-transform ${showFullDocs ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
            {showFullDocs ? 'Weniger anzeigen' : 'Vollstaendige Dokumentation'}
          </button>
        </div>

        {/* Short Description */}
        <div className="prose prose-slate max-w-none">
          <p className="text-slate-600">
            Das Security Dashboard bietet einen zentralen Ueberblick ueber alle DevSecOps-Aktivitaeten.
            Es integriert 6 Security-Tools fuer umfassende Code- und Infrastruktur-Sicherheit:
            Secrets Detection, Static Analysis (SAST), Dependency Scanning und SBOM-Generierung.
          </p>
        </div>

        {/* Tool Quick Reference */}
        <ToolQuickReference />

        {/* Full Documentation (Expandable) */}
        {showFullDocs && <FullDocumentation />}
      </div>
    </div>
  )
}

function ToolQuickReference() {
  const tools = [
    { bg: 'bg-red-50', icon: '🔑', name: 'Gitleaks', cat: 'Secrets', textName: 'text-red-800', textCat: 'text-red-600' },
    { bg: 'bg-blue-50', icon: '🔍', name: 'Semgrep', cat: 'SAST', textName: 'text-blue-800', textCat: 'text-blue-600' },
    { bg: 'bg-yellow-50', icon: '🐍', name: 'Bandit', cat: 'Python', textName: 'text-yellow-800', textCat: 'text-yellow-600' },
    { bg: 'bg-purple-50', icon: '🔒', name: 'Trivy', cat: 'Container', textName: 'text-purple-800', textCat: 'text-purple-600' },
    { bg: 'bg-green-50', icon: '🐛', name: 'Grype', cat: 'Dependencies', textName: 'text-green-800', textCat: 'text-green-600' },
    { bg: 'bg-orange-50', icon: '📦', name: 'Syft', cat: 'SBOM', textName: 'text-orange-800', textCat: 'text-orange-600' },
  ]

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mt-4">
      {tools.map(t => (
        <div key={t.name} className={`${t.bg} p-3 rounded-lg text-center`}>
          <span className="text-lg">{t.icon}</span>
          <p className={`text-xs font-medium ${t.textName} mt-1`}>{t.name}</p>
          <p className={`text-xs ${t.textCat}`}>{t.cat}</p>
        </div>
      ))}
    </div>
  )
}

function FullDocumentation() {
  return (
    <div className="mt-6 bg-slate-50 rounded-lg p-6 border border-slate-200">
      <div className="prose prose-slate max-w-none prose-headings:text-slate-900 prose-p:text-slate-600 prose-li:text-slate-600">

        <h3>1. Security Tools Uebersicht</h3>

        <h4>🔑 Gitleaks - Secrets Detection</h4>
        <p>Durchsucht die gesamte Git-Historie nach versehentlich eingecheckten Secrets wie API-Keys, Passwoertern und Tokens.</p>
        <ul>
          <li><strong>Scan-Bereich:</strong> Git-Historie, Commits, Branches</li>
          <li><strong>Erkannte Secrets:</strong> AWS Keys, GitHub Tokens, Private Keys, Passwoerter</li>
          <li><strong>Ausgabe:</strong> JSON-Report mit Fundstelle, Commit-Hash, Autor</li>
        </ul>

        <h4>🔍 Semgrep - Static Application Security Testing</h4>
        <p>Fuehrt regelbasierte statische Code-Analyse durch, um Sicherheitsluecken und Anti-Patterns zu finden.</p>
        <ul>
          <li><strong>Unterstuetzte Sprachen:</strong> Python, JavaScript, TypeScript, Go, Java</li>
          <li><strong>Regelsets:</strong> OWASP Top 10, CWE, Security Best Practices</li>
          <li><strong>Findings:</strong> SQL Injection, XSS, Path Traversal, Insecure Deserialization</li>
        </ul>

        <h4>🐍 Bandit - Python Security Linter</h4>
        <p>Spezialisierter Security-Linter fuer Python-Code mit Fokus auf haeufige Sicherheitsprobleme.</p>
        <ul>
          <li><strong>Checks:</strong> Hardcoded Passwords, SQL Injection, Shell Injection</li>
          <li><strong>Severity Levels:</strong> LOW, MEDIUM, HIGH</li>
          <li><strong>Confidence:</strong> LOW, MEDIUM, HIGH</li>
        </ul>

        <h4>🔒 Trivy - Container & Filesystem Scanner</h4>
        <p>Scannt Container-Images und Dateisysteme auf bekannte Schwachstellen (CVEs).</p>
        <ul>
          <li><strong>Scan-Typen:</strong> Container Images, Filesystems, Git Repositories</li>
          <li><strong>Datenbanken:</strong> NVD, GitHub Advisory, Alpine SecDB, RedHat OVAL</li>
          <li><strong>Ausgabe:</strong> CVE-ID, Severity, Fixed Version, Description</li>
        </ul>

        <h4>🐛 Grype - Dependency Vulnerability Scanner</h4>
        <p>Analysiert Software-Abhaengigkeiten auf bekannte Sicherheitsluecken.</p>
        <ul>
          <li><strong>Package Manager:</strong> npm, pip, go mod, Maven, Gradle</li>
          <li><strong>Input:</strong> SBOM (CycloneDX/SPDX), Lockfiles, Container Images</li>
          <li><strong>Matching:</strong> CPE-basiert, Package URL (purl)</li>
        </ul>

        <h4>📦 Syft - SBOM Generator</h4>
        <p>Erstellt Software Bill of Materials (SBOM) fuer Compliance und Supply-Chain-Security.</p>
        <ul>
          <li><strong>Formate:</strong> CycloneDX (JSON/XML), SPDX, Syft JSON</li>
          <li><strong>Erfassung:</strong> Packages, Lizenzen, Versionen, Checksums</li>
          <li><strong>Compliance:</strong> NIS2, ISO 27001, DSGVO Art. 32</li>
        </ul>

        <h3>2. Severity-Klassifizierung</h3>
        <table className="min-w-full text-sm">
          <thead>
            <tr className="border-b">
              <th className="text-left py-2">Severity</th>
              <th className="text-left py-2">CVSS Score</th>
              <th className="text-left py-2">Reaktionszeit</th>
              <th className="text-left py-2">Beispiele</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-red-100 text-red-800 rounded text-xs font-semibold">CRITICAL</span></td><td>9.0 - 10.0</td><td>Sofort (24h)</td><td>RCE, Auth Bypass, Exposed Secrets</td></tr>
            <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-orange-100 text-orange-800 rounded text-xs font-semibold">HIGH</span></td><td>7.0 - 8.9</td><td>1-3 Tage</td><td>SQL Injection, XSS, Path Traversal</td></tr>
            <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-yellow-100 text-yellow-800 rounded text-xs font-semibold">MEDIUM</span></td><td>4.0 - 6.9</td><td>1-2 Wochen</td><td>Information Disclosure, CSRF</td></tr>
            <tr className="border-b"><td className="py-2"><span className="px-2 py-0.5 bg-green-100 text-green-800 rounded text-xs font-semibold">LOW</span></td><td>0.1 - 3.9</td><td>Naechster Sprint</td><td>Minor Info Leak, Best Practice</td></tr>
            <tr><td className="py-2"><span className="px-2 py-0.5 bg-blue-100 text-blue-800 rounded text-xs font-semibold">INFO</span></td><td>0.0</td><td>Optional</td><td>Empfehlungen, Hinweise</td></tr>
          </tbody>
        </table>

        <h3>3. Scan-Workflow</h3>
        <pre className="bg-slate-800 text-slate-100 p-4 rounded-lg overflow-x-auto text-sm">
{`┌─────────────────────────────────────────────────────────────┐
│                    Security Scan Pipeline                    │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  1. Secrets Detection (Gitleaks)                            │
│     └── Scannt Git-Historie nach API-Keys & Credentials     │
│                          ↓                                   │
│  2. Static Analysis (Semgrep + Bandit)                      │
│     └── Code-Analyse auf Sicherheitsluecken                 │
│                          ↓                                   │
│  3. Dependency Scan (Trivy + Grype)                         │
│     └── CVE-Check aller Abhaengigkeiten                     │
│                          ↓                                   │
│  4. SBOM Generation (Syft)                                  │
│     └── Software Bill of Materials erstellen                │
│                          ↓                                   │
│  5. Report & Dashboard                                       │
│     └── Ergebnisse aggregieren und visualisieren            │
│                                                              │
└─────────────────────────────────────────────────────────────┘`}
        </pre>

        <h3>4. Remediation-Strategien</h3>

        <h4>Bei Secrets-Findings:</h4>
        <ol>
          <li>Secret sofort rotieren (neue API-Keys, Passwoerter)</li>
          <li>Git-Historie bereinigen (BFG Repo-Cleaner oder git filter-branch)</li>
          <li>Betroffene Systeme auf unauthorisierte Zugriffe pruefen</li>
          <li>Secret-Scanning in Pre-Commit-Hooks aktivieren</li>
        </ol>

        <h4>Bei SAST-Findings:</h4>
        <ol>
          <li>Finding-Details und betroffene Code-Stelle analysieren</li>
          <li>Empfohlene Fix-Strategie aus Semgrep-Dokumentation anwenden</li>
          <li>Unit-Tests fuer den Fix schreiben</li>
          <li>Code-Review durch Security-erfahrenen Entwickler</li>
        </ol>

        <h4>Bei Dependency-Vulnerabilities:</h4>
        <ol>
          <li>Pruefen ob ein Patch/Update verfuegbar ist</li>
          <li>Abhaengigkeit auf gepatchte Version aktualisieren</li>
          <li>Falls kein Patch: Workaround oder Alternative evaluieren</li>
          <li>Temporaer: WAF-Regel als Mitigation</li>
        </ol>

        <h3>5. CI/CD Integration</h3>
        <p>Security-Scans sind in die Gitea Actions Pipeline integriert:</p>
        <ul>
          <li><strong>Pre-Commit:</strong> Gitleaks (lokale Secrets-Pruefung)</li>
          <li><strong>Pull Request:</strong> Semgrep, Bandit, Trivy (Blocking bei Critical)</li>
          <li><strong>Main Branch:</strong> Full Scan + SBOM-Update</li>
          <li><strong>Nightly:</strong> Dependency-Update-Check</li>
        </ul>

        <h3>6. Compliance-Mapping</h3>
        <table className="min-w-full text-sm">
          <thead>
            <tr className="border-b">
              <th className="text-left py-2">Regulation</th>
              <th className="text-left py-2">Artikel</th>
              <th className="text-left py-2">Erfuellt durch</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b"><td className="py-2">DSGVO</td><td>Art. 32</td><td>Alle Security-Scans, Vulnerability Management</td></tr>
            <tr className="border-b"><td className="py-2">NIS2</td><td>Art. 21</td><td>SBOM, Supply-Chain-Security, Incident Response</td></tr>
            <tr className="border-b"><td className="py-2">ISO 27001</td><td>A.12.6</td><td>Vulnerability Management, Patch Management</td></tr>
            <tr><td className="py-2">OWASP</td><td>Top 10</td><td>SAST (Semgrep), Secrets Detection</td></tr>
          </tbody>
        </table>

        <h3>7. API-Endpunkte</h3>
        <table className="min-w-full text-sm font-mono">
          <thead>
            <tr className="border-b">
              <th className="text-left py-2">Methode</th>
              <th className="text-left py-2">Endpoint</th>
              <th className="text-left py-2 font-sans">Beschreibung</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/tools</td><td className="font-sans">Tool-Status abrufen</td></tr>
            <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/findings</td><td className="font-sans">Alle Findings abrufen</td></tr>
            <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/summary</td><td className="font-sans">Severity-Zusammenfassung</td></tr>
            <tr className="border-b"><td className="py-2"><span className="bg-blue-100 text-blue-700 px-1 rounded">GET</span></td><td>/api/v1/security/history</td><td className="font-sans">Scan-Historie</td></tr>
            <tr className="border-b"><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/all</td><td className="font-sans">Full Scan starten</td></tr>
            <tr><td className="py-2"><span className="bg-green-100 text-green-700 px-1 rounded">POST</span></td><td>/api/v1/security/scan/[tool]</td><td className="font-sans">Einzelnes Tool scannen</td></tr>
          </tbody>
        </table>

      </div>
    </div>
  )
}