import { DevPortalLayout, CodeBlock, InfoBox, ParameterTable } from '@/components/DevPortalLayout'

export default function SDKConfigurationPage() {
  return (
    <DevPortalLayout
      title="SDK Konfiguration"
      description="Alle Konfigurationsoptionen des AI Compliance SDK"
    >
      <h2>SDKProvider Props</h2>
      <p>
        Der SDKProvider akzeptiert folgende Konfigurationsoptionen:
      </p>
      <ParameterTable
        parameters={[
          {
            name: 'tenantId',
            type: 'string',
            required: true,
            description: 'Ihre eindeutige Tenant-ID (erhalten nach Abo-Abschluss)',
          },
          {
            name: 'apiKey',
            type: 'string',
            required: false,
            description: 'API Key fuer authentifizierte Anfragen (nur serverseitig verwenden)',
          },
          {
            name: 'userId',
            type: 'string',
            required: false,
            description: 'Benutzer-ID fuer Audit-Trail und Checkpoints',
          },
          {
            name: 'enableBackendSync',
            type: 'boolean',
            required: false,
            description: 'Aktiviert automatische Synchronisation mit dem Backend (default: false)',
          },
          {
            name: 'apiBaseUrl',
            type: 'string',
            required: false,
            description: 'Custom API URL fuer Self-Hosted Installationen',
          },
          {
            name: 'syncInterval',
            type: 'number',
            required: false,
            description: 'Intervall fuer Auto-Sync in Millisekunden (default: 30000)',
          },
          {
            name: 'enableOfflineSupport',
            type: 'boolean',
            required: false,
            description: 'Aktiviert localStorage Fallback bei Offline (default: true)',
          },
          {
            name: 'initialStep',
            type: 'string',
            required: false,
            description: 'Initialer Schritt beim ersten Laden (default: "advisory-board")',
          },
          {
            name: 'onError',
            type: '(error: Error) => void',
            required: false,
            description: 'Callback fuer Fehlerbehandlung',
          },
          {
            name: 'onStateChange',
            type: '(state: SDKState) => void',
            required: false,
            description: 'Callback bei State-Aenderungen',
          },
        ]}
      />

      <h2>Vollstaendiges Beispiel</h2>
      <CodeBlock language="typescript" filename="app/layout.tsx">
{`'use client'

import { SDKProvider } from '@breakpilot/compliance-sdk'
import { useRouter } from 'next/navigation'

export default function SDKLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter()

  return (
    <SDKProvider
      tenantId={process.env.NEXT_PUBLIC_TENANT_ID!}
      userId="user-123"
      enableBackendSync={true}
      syncInterval={60000} // Sync alle 60 Sekunden
      enableOfflineSupport={true}
      initialStep="use-case-workshop"
      onError={(error) => {
        console.error('SDK Error:', error)
        // Optional: Sentry oder anderes Error-Tracking
      }}
      onStateChange={(state) => {
        console.log('State changed:', state.currentStep)
        // Optional: Analytics-Events
      }}
    >
      {children}
    </SDKProvider>
  )
}`}
      </CodeBlock>

      <h2>Synchronisations-Strategien</h2>

      <h3>1. Nur localStorage (Offline-Only)</h3>
      <CodeBlock language="typescript" filename="Offline-Only">
{`<SDKProvider
  tenantId="my-tenant"
  enableBackendSync={false}
  enableOfflineSupport={true}
>
  {children}
</SDKProvider>`}
      </CodeBlock>
      <p>
        Ideal fuer: Lokale Entwicklung, Demos, Privacy-fokussierte Installationen.
        Daten werden nur im Browser gespeichert.
      </p>

      <h3>2. Backend-Sync mit Fallback</h3>
      <CodeBlock language="typescript" filename="Backend + Fallback">
{`<SDKProvider
  tenantId="my-tenant"
  enableBackendSync={true}
  enableOfflineSupport={true}
  syncInterval={30000}
>
  {children}
</SDKProvider>`}
      </CodeBlock>
      <p>
        Empfohlen fuer: Produktionsumgebungen. Daten werden mit dem Backend
        synchronisiert, localStorage dient als Fallback bei Netzwerkproblemen.
      </p>

      <h3>3. Nur Backend (kein lokaler Cache)</h3>
      <CodeBlock language="typescript" filename="Backend-Only">
{`<SDKProvider
  tenantId="my-tenant"
  enableBackendSync={true}
  enableOfflineSupport={false}
>
  {children}
</SDKProvider>`}
      </CodeBlock>
      <p>
        Ideal fuer: Strenge Compliance-Anforderungen, Multi-User-Szenarien.
        Daten werden nur im Backend gespeichert.
      </p>

      <InfoBox type="warning" title="Backend-Only Modus">
        Im Backend-Only Modus ist eine aktive Internetverbindung erforderlich.
        Bei Netzwerkproblemen koennen Daten verloren gehen.
      </InfoBox>

      <h2>API URL Konfiguration</h2>

      <h3>Cloud-Version (Standard)</h3>
      <p>Keine zusaetzliche Konfiguration erforderlich:</p>
      <CodeBlock language="typescript" filename="Cloud">
{`<SDKProvider tenantId="my-tenant">
  {/* Nutzt automatisch https://api.breakpilot.io/sdk/v1 */}
</SDKProvider>`}
      </CodeBlock>

      <h3>Self-Hosted</h3>
      <CodeBlock language="typescript" filename="Self-Hosted">
{`<SDKProvider
  tenantId="my-tenant"
  apiBaseUrl="https://your-server.com/sdk/v1"
>
  {children}
</SDKProvider>`}
      </CodeBlock>

      <h3>Lokale Entwicklung</h3>
      <CodeBlock language="typescript" filename="Local Dev">
{`<SDKProvider
  tenantId="dev-tenant"
  apiBaseUrl="http://localhost:8085/sdk/v1"
  enableBackendSync={true}
>
  {children}
</SDKProvider>`}
      </CodeBlock>

      <h2>Feature Flags</h2>
      <p>
        Das SDK unterstuetzt Feature Flags ueber Subscription-Levels:
      </p>
      <CodeBlock language="typescript" filename="Feature Checks">
{`import { useSDK } from '@breakpilot/compliance-sdk'

function MyComponent() {
  const { state } = useSDK()

  // Subscription-basierte Features
  const isEnterprise = state.subscription === 'ENTERPRISE'
  const isProfessional = ['PROFESSIONAL', 'ENTERPRISE'].includes(state.subscription)

  // Feature-Gates
  const canExportPDF = isProfessional
  const canUseRAG = isProfessional
  const canCustomizeDSFA = isEnterprise
  const canUseAPI = isProfessional

  return (
    <div>
      {canExportPDF && <button>PDF Export</button>}
      {canUseRAG && <RAGSearchPanel />}
    </div>
  )
}`}
      </CodeBlock>

      <h2>Logging & Debugging</h2>
      <p>
        Aktivieren Sie detailliertes Logging fuer die Entwicklung:
      </p>
      <CodeBlock language="typescript" filename="Debug Mode">
{`// In Ihrer .env.local
NEXT_PUBLIC_SDK_DEBUG=true

// Oder programmatisch
<SDKProvider
  tenantId="my-tenant"
  onStateChange={(state) => {
    if (process.env.NODE_ENV === 'development') {
      console.log('[SDK] State Update:', {
        phase: state.currentPhase,
        step: state.currentStep,
        useCases: state.useCases.length,
        risks: state.risks.length,
      })
    }
  }}
>
  {children}
</SDKProvider>`}
      </CodeBlock>

      <InfoBox type="info" title="React DevTools">
        Der SDK-State ist im React DevTools unter dem SDKProvider-Context sichtbar.
        Installieren Sie die React Developer Tools Browser-Extension fuer einfaches Debugging.
      </InfoBox>
    </DevPortalLayout>
  )
}