'use client'

import { useState } from 'react'

export function SecurityDocsSection() {
  const [showFullDocs, setShowFullDocs] = useState(false)

  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 */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 mt-4">
          {[
            { bg: 'bg-red-50', icon: '🔑', name: 'Gitleaks', label: 'Secrets', color: 'text-red-800', labelColor: 'text-red-600' },
            { bg: 'bg-blue-50', icon: '🔍', name: 'Semgrep', label: 'SAST', color: 'text-blue-800', labelColor: 'text-blue-600' },
            { bg: 'bg-yellow-50', icon: '🐍', name: 'Bandit', label: 'Python', color: 'text-yellow-800', labelColor: 'text-yellow-600' },
            { bg: 'bg-purple-50', icon: '🔒', name: 'Trivy', label: 'Container', color: 'text-purple-800', labelColor: 'text-purple-600' },
            { bg: 'bg-green-50', icon: '🐛', name: 'Grype', label: 'Dependencies', color: 'text-green-800', labelColor: 'text-green-600' },
            { bg: 'bg-orange-50', icon: '📦', name: 'Syft', label: 'SBOM', color: 'text-orange-800', labelColor: 'text-orange-600' },
          ].map((tool) => (
            <div key={tool.name} className={`${tool.bg} p-3 rounded-lg text-center`}>
              <span className="text-lg">{tool.icon}</span>
              <p className={`text-xs font-medium ${tool.color} mt-1`}>{tool.name}</p>
              <p className={`text-xs ${tool.labelColor}`}>{tool.label}</p>
            </div>
          ))}
        </div>

        {/* Full Documentation (Expandable) */}
        {showFullDocs && (
          <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>
              <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></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></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></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></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></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">
{`1. Secrets Detection (Gitleaks)
2. Static Analysis (Semgrep + Bandit)
3. Dependency Scan (Trivy + Grype)
4. SBOM Generation (Syft)
5. Report & Dashboard`}
              </pre>
              <h3>4. 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-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>
        )}
      </div>
    </div>
  )
}
