import Link from 'next/link'
import { DevPortalLayout, ApiEndpoint, InfoBox } from '@/components/developers/DevPortalLayout'

export default function ApiReferencePage() {
  return (
    <DevPortalLayout
      title="API Reference"
      description="Vollständige REST API Dokumentation"
    >
      <h2>Base URL</h2>
      <p>
        Alle API-Endpunkte sind unter folgender Basis-URL erreichbar:
      </p>
      <div className="bg-gray-100 p-4 rounded-lg font-mono text-sm my-4">
        https://api.breakpilot.io/sdk/v1
      </div>
      <p>
        Für Self-Hosted-Installationen verwenden Sie Ihre eigene Domain.
      </p>

      <h2>Authentifizierung</h2>
      <p>
        Alle API-Anfragen erfordern einen gültigen API Key im Header:
      </p>
      <div className="bg-gray-100 p-4 rounded-lg font-mono text-sm my-4">
        Authorization: Bearer YOUR_API_KEY
      </div>

      <InfoBox type="info" title="Tenant-ID">
        Die Tenant-ID wird aus dem API Key abgeleitet oder kann explizit
        als Query-Parameter oder im Request-Body mitgegeben werden.
      </InfoBox>

      <h2>API Endpoints</h2>

      <h3>State Management</h3>
      <p>
        Verwalten Sie den SDK-State für Ihren Tenant.
      </p>

      <ApiEndpoint
        method="GET"
        path="/state/{tenantId}"
        description="Lädt den aktuellen SDK-State für einen Tenant"
      />
      <ApiEndpoint
        method="POST"
        path="/state"
        description="Speichert den SDK-State (mit Versionierung)"
      />
      <ApiEndpoint
        method="DELETE"
        path="/state/{tenantId}"
        description="Löscht den State für einen Tenant"
      />

      <p>
        <Link href="/developers/api/state" className="text-blue-600 hover:underline">
          → Vollständige State API Dokumentation
        </Link>
      </p>

      <h3>RAG Search</h3>
      <p>
        Durchsuchen Sie den Compliance-Korpus (DSGVO, AI Act, NIS2).
      </p>

      <ApiEndpoint
        method="GET"
        path="/rag/search"
        description="Semantische Suche im Legal Corpus"
      />
      <ApiEndpoint
        method="GET"
        path="/rag/status"
        description="Status des RAG-Systems und Corpus-Informationen"
      />

      <p>
        <Link href="/developers/api/rag" className="text-blue-600 hover:underline">
          → Vollständige RAG API Dokumentation
        </Link>
      </p>

      <h3>Document Generation</h3>
      <p>
        Generieren Sie Compliance-Dokumente automatisch.
      </p>

      <ApiEndpoint
        method="POST"
        path="/generate/dsfa"
        description="Generiert eine Datenschutz-Folgenabschätzung"
      />
      <ApiEndpoint
        method="POST"
        path="/generate/tom"
        description="Generiert technische und organisatorische Maßnahmen"
      />
      <ApiEndpoint
        method="POST"
        path="/generate/vvt"
        description="Generiert ein Verarbeitungsverzeichnis"
      />

      <p>
        <Link href="/developers/api/generate" className="text-blue-600 hover:underline">
          → Vollständige Generation API Dokumentation
        </Link>
      </p>

      <h3>Export</h3>
      <p>
        Exportieren Sie den Compliance-Stand in verschiedenen Formaten.
      </p>

      <ApiEndpoint
        method="GET"
        path="/export"
        description="Exportiert den State (JSON, PDF, ZIP)"
      />

      <p>
        <Link href="/developers/api/export" className="text-blue-600 hover:underline">
          → Vollständige Export API Dokumentation
        </Link>
      </p>

      <h2>Response Format</h2>
      <p>
        Alle Responses folgen einem einheitlichen Format:
      </p>

      <h3>Erfolgreiche Response</h3>
      <div className="bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm my-4">
{`{
  "success": true,
  "data": { ... },
  "meta": {
    "version": 1,
    "timestamp": "2026-02-04T12:00:00Z"
  }
}`}
      </div>

      <h3>Fehler Response</h3>
      <div className="bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm my-4">
{`{
  "success": false,
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Tenant ID is required",
    "details": { ... }
  }
}`}
      </div>

      <h2>Error Codes</h2>
      <div className="my-4 overflow-x-auto not-prose">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">HTTP Status</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Code</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Beschreibung</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200 text-sm">
            <tr>
              <td className="px-4 py-3">400</td>
              <td className="px-4 py-3 font-mono text-red-600">VALIDATION_ERROR</td>
              <td className="px-4 py-3 text-gray-600">Ungültige Request-Daten</td>
            </tr>
            <tr>
              <td className="px-4 py-3">401</td>
              <td className="px-4 py-3 font-mono text-red-600">UNAUTHORIZED</td>
              <td className="px-4 py-3 text-gray-600">Fehlender oder ungültiger API Key</td>
            </tr>
            <tr>
              <td className="px-4 py-3">403</td>
              <td className="px-4 py-3 font-mono text-red-600">FORBIDDEN</td>
              <td className="px-4 py-3 text-gray-600">Keine Berechtigung für diese Ressource</td>
            </tr>
            <tr>
              <td className="px-4 py-3">404</td>
              <td className="px-4 py-3 font-mono text-red-600">NOT_FOUND</td>
              <td className="px-4 py-3 text-gray-600">Ressource nicht gefunden</td>
            </tr>
            <tr>
              <td className="px-4 py-3">409</td>
              <td className="px-4 py-3 font-mono text-red-600">CONFLICT</td>
              <td className="px-4 py-3 text-gray-600">Versions-Konflikt (Optimistic Locking)</td>
            </tr>
            <tr>
              <td className="px-4 py-3">429</td>
              <td className="px-4 py-3 font-mono text-red-600">RATE_LIMITED</td>
              <td className="px-4 py-3 text-gray-600">Zu viele Anfragen</td>
            </tr>
            <tr>
              <td className="px-4 py-3">500</td>
              <td className="px-4 py-3 font-mono text-red-600">INTERNAL_ERROR</td>
              <td className="px-4 py-3 text-gray-600">Interner Server-Fehler</td>
            </tr>
          </tbody>
        </table>
      </div>

      <h2>Rate Limits</h2>
      <div className="my-4 overflow-x-auto not-prose">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Plan</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Requests/Minute</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Requests/Tag</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200 text-sm">
            <tr>
              <td className="px-4 py-3">Starter</td>
              <td className="px-4 py-3">60</td>
              <td className="px-4 py-3">10.000</td>
            </tr>
            <tr>
              <td className="px-4 py-3">Professional</td>
              <td className="px-4 py-3">300</td>
              <td className="px-4 py-3">100.000</td>
            </tr>
            <tr>
              <td className="px-4 py-3">Enterprise</td>
              <td className="px-4 py-3">Unbegrenzt</td>
              <td className="px-4 py-3">Unbegrenzt</td>
            </tr>
          </tbody>
        </table>
      </div>
    </DevPortalLayout>
  )
}