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

function ExposureBadge({ type }: { type: 'public' | 'partner' | 'internal' | 'admin' }) {
  const config = {
    public: { label: 'Oeffentlich', className: 'bg-green-100 text-green-800' },
    partner: { label: 'Integration', className: 'bg-blue-100 text-blue-800' },
    internal: { label: 'Intern', className: 'bg-gray-100 text-gray-700' },
    admin: { label: 'Wartung', className: 'bg-orange-100 text-orange-800' },
  }[type]
  return (
    <span className={`inline-block text-[10px] font-medium px-1.5 py-0.5 rounded ml-2 ${config.className}`}>
      {config.label}
    </span>
  )
}

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>

      <InfoBox type="info" title="API Exposure">
        Jeder Endpoint ist mit einer Exposure-Kategorie gekennzeichnet:
        <span className="inline-block text-[10px] font-medium px-1.5 py-0.5 rounded bg-green-100 text-green-800 mx-1">Oeffentlich</span>
        Internet-exponiert,
        <span className="inline-block text-[10px] font-medium px-1.5 py-0.5 rounded bg-blue-100 text-blue-800 mx-1">Integration</span>
        API-Key-authentifiziert,
        <span className="inline-block text-[10px] font-medium px-1.5 py-0.5 rounded bg-gray-100 text-gray-700 mx-1">Intern</span>
        nur Admin-Dashboard,
        <span className="inline-block text-[10px] font-medium px-1.5 py-0.5 rounded bg-orange-100 text-orange-800 mx-1">Wartung</span>
        nur Setup.
      </InfoBox>

      <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 <ExposureBadge type="internal" /></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="/api/state" className="text-blue-600 hover:underline">
          → Vollständige State API Dokumentation
        </Link>
      </p>

      <h3>RAG Search <ExposureBadge type="partner" /></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="/api/rag" className="text-blue-600 hover:underline">
          → Vollständige RAG API Dokumentation
        </Link>
      </p>

      <h3>Document Generation <ExposureBadge type="internal" /></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="/api/generate" className="text-blue-600 hover:underline">
          → Vollständige Generation API Dokumentation
        </Link>
      </p>

      <h3>Export <ExposureBadge type="internal" /></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="/api/export" className="text-blue-600 hover:underline">
          → Vollständige Export API Dokumentation
        </Link>
      </p>

      <h3>Consent Management <ExposureBadge type="public" /></h3>
      <p>
        Verwalten Sie Einwilligungen, rechtliche Dokumente und Cookie-Banner-Konfigurationen.
      </p>

      <ApiEndpoint method="GET"  path="/einwilligungen/consents" description="Consent-Liste mit Pagination und Filtern" />
      <ApiEndpoint method="POST" path="/einwilligungen/consents" description="Neue Einwilligung erfassen" />
      <ApiEndpoint method="PUT"  path="/einwilligungen/consents/{id}/revoke" description="Einwilligung widerrufen" />
      <ApiEndpoint method="GET"  path="/einwilligungen/consents/{id}/history" description="Änderungshistorie einer Einwilligung" />

      <p>
        <Link href="/api/einwilligungen" className="text-blue-600 hover:underline">
          → Vollständige Consent Management API Dokumentation
        </Link>
      </p>

      <h3>DSFA — Datenschutz-Folgenabschätzung <ExposureBadge type="internal" /></h3>
      <p>
        Verwalten Sie Datenschutz-Folgenabschätzungen gemäß Art. 35 DSGVO mit vollständigem
        Audit-Trail, Status-Workflow und Risikobewertung.
      </p>

      <ApiEndpoint method="GET"    path="/dsfa" description="Liste aller DSFAs (Filter: status, risk_level)" />
      <ApiEndpoint method="POST"   path="/dsfa" description="Neue DSFA anlegen → 201" />
      <ApiEndpoint method="GET"    path="/dsfa/stats" description="Statistiken nach Status und Risiko" />
      <ApiEndpoint method="GET"    path="/dsfa/audit-log" description="Audit-Trail aller Aktionen" />
      <ApiEndpoint method="GET"    path="/dsfa/{id}" description="Einzelne DSFA abrufen" />
      <ApiEndpoint method="PUT"    path="/dsfa/{id}" description="DSFA aktualisieren" />
      <ApiEndpoint method="DELETE" path="/dsfa/{id}" description="DSFA löschen (Art. 17 DSGVO)" />
      <ApiEndpoint method="PATCH"  path="/dsfa/{id}/status" description="Schnell-Statuswechsel" />

      <p>
        <Link href="/api/dsfa" className="text-blue-600 hover:underline">
          → Vollständige DSFA 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>
  )
}