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

export default function SDKOverviewPage() {
  return (
    <DevPortalLayout
      title="SDK Documentation"
      description="TypeScript SDK für React und Next.js Integration"
    >
      <h2>Übersicht</h2>
      <p>
        Das AI Compliance SDK ist ein TypeScript-Paket für die Integration des
        Compliance-Workflows in React und Next.js Anwendungen. Es bietet:
      </p>
      <ul>
        <li>React Context Provider für State Management</li>
        <li>Hooks für einfachen Zugriff auf Compliance-Daten</li>
        <li>Automatische Synchronisation mit dem Backend</li>
        <li>Offline-Support mit localStorage Fallback</li>
        <li>Export-Funktionen (PDF, JSON, ZIP)</li>
      </ul>

      <h2>Kernkomponenten</h2>

      <h3>SDKProvider</h3>
      <p>
        Der Provider wrappet Ihre App und stellt den SDK-Kontext bereit:
      </p>
      <CodeBlock language="typescript" filename="app/layout.tsx">
{`import { SDKProvider } from '@breakpilot/compliance-sdk'

export default function Layout({ children }) {
  return (
    <SDKProvider
      tenantId="your-tenant"
      enableBackendSync={true}
    >
      {children}
    </SDKProvider>
  )
}`}
      </CodeBlock>

      <h3>useSDK Hook</h3>
      <p>
        Der Haupt-Hook für den Zugriff auf alle SDK-Funktionen:
      </p>
      <CodeBlock language="typescript" filename="component.tsx">
{`import { useSDK } from '@breakpilot/compliance-sdk'

function MyComponent() {
  const {
    // State
    state,
    dispatch,

    // Navigation
    currentStep,
    goToStep,
    goToNextStep,
    goToPreviousStep,
    canGoNext,
    canGoPrevious,

    // Progress
    completionPercentage,
    phase1Completion,
    phase2Completion,

    // Checkpoints
    validateCheckpoint,
    overrideCheckpoint,
    getCheckpointStatus,

    // Data Updates
    updateUseCase,
    addRisk,
    updateControl,

    // Persistence
    saveState,
    loadState,

    // Demo Data
    seedDemoData,
    clearDemoData,
    isDemoDataLoaded,

    // Sync
    syncState,
    forceSyncToServer,
    isOnline,

    // Export
    exportState,

    // Command Bar
    isCommandBarOpen,
    setCommandBarOpen,
  } = useSDK()

  return (
    <div>
      <h1>Progress: {completionPercentage}%</h1>
      <button onClick={() => goToStep('risks')}>
        Zur Risikoanalyse
      </button>
    </div>
  )
}`}
      </CodeBlock>

      <h2>Types</h2>
      <p>
        Das SDK exportiert alle TypeScript-Types für volle Typsicherheit:
      </p>
      <CodeBlock language="typescript" filename="types.ts">
{`import type {
  // Core Types
  SDKState,
  SDKAction,
  SDKStep,
  SDKPhase,

  // Use Cases
  UseCaseAssessment,
  AssessmentResult,

  // Risk Management
  Risk,
  RiskSeverity,
  RiskMitigation,

  // Controls & Evidence
  Control,
  Evidence,
  Requirement,

  // Checkpoints
  Checkpoint,
  CheckpointStatus,
  ValidationError,

  // DSFA
  DSFA,
  DSFASection,
  DSFAApproval,

  // TOMs & VVT
  TOM,
  ProcessingActivity,
  RetentionPolicy,

  // AI Act
  AIActResult,
  AIActRiskCategory,
} from '@breakpilot/compliance-sdk'`}
      </CodeBlock>

      <h2>Utility Functions</h2>
      <p>
        Hilfreiche Funktionen für die Arbeit mit dem SDK:
      </p>
      <CodeBlock language="typescript" filename="utils.ts">
{`import {
  // Step Navigation
  getStepById,
  getStepByUrl,
  getNextStep,
  getPreviousStep,
  getStepsForPhase,

  // Risk Calculation
  calculateRiskScore,
  getRiskSeverityFromScore,
  calculateResidualRisk,

  // Progress
  getCompletionPercentage,
  getPhaseCompletionPercentage,
} from '@breakpilot/compliance-sdk'

// Beispiel: Risk Score berechnen
const inherentRisk = calculateRiskScore(4, 5) // likelihood * impact = 20
const severity = getRiskSeverityFromScore(20) // 'CRITICAL'`}
      </CodeBlock>

      <h2>API Client</h2>
      <p>
        Für direkten API-Zugriff ohne React Context:
      </p>
      <CodeBlock language="typescript" filename="api.ts">
{`import {
  getSDKApiClient,
  SDKApiClient,
} from '@breakpilot/compliance-sdk'

const client = getSDKApiClient('your-tenant-id')

// State laden
const state = await client.getState()

// State speichern
await client.saveState(updatedState)

// Checkpoint validieren
const result = await client.validateCheckpoint('CP-UC', state)

// Export
const blob = await client.exportState('pdf')`}
      </CodeBlock>

      <h2>RAG & LLM Client</h2>
      <p>
        Zugriff auf die RAG-Suche und Dokumentengenerierung:
      </p>
      <CodeBlock language="typescript" filename="rag.ts">
{`import {
  getSDKBackendClient,
  isLegalQuery,
} from '@breakpilot/compliance-sdk'

const client = getSDKBackendClient()

// RAG-Suche
const results = await client.search('DSGVO Art. 5', 5)
console.log(results) // SearchResult[]

// Dokumentengenerierung
const dsfa = await client.generateDSFA(context)
const toms = await client.generateTOM(context)
const vvt = await client.generateVVT(context)

// Prüfen ob eine Query rechtliche Inhalte betrifft
if (isLegalQuery('Einwilligung DSGVO')) {
  // RAG-Suche durchführen
}`}
      </CodeBlock>

      <h2>Export</h2>
      <p>
        Exportieren Sie Compliance-Daten in verschiedenen Formaten:
      </p>
      <CodeBlock language="typescript" filename="export.ts">
{`import { exportToPDF, exportToZIP, downloadExport } from '@breakpilot/compliance-sdk'

// PDF Export
const pdfBlob = await exportToPDF(state)
downloadExport(pdfBlob, 'compliance-report.pdf')

// ZIP Export (alle Dokumente)
const zipBlob = await exportToZIP(state)
downloadExport(zipBlob, 'compliance-export.zip')

// Über den Hook
const { exportState } = useSDK()
const blob = await exportState('pdf') // 'json' | 'pdf' | 'zip'`}
      </CodeBlock>

      <InfoBox type="success" title="Weitere Dokumentation">
        <ul className="list-disc list-inside space-y-1">
          <li>
            <Link href="/sdk/installation" className="text-blue-600 hover:underline">
              Installation Guide
            </Link>
          </li>
          <li>
            <Link href="/sdk/configuration" className="text-blue-600 hover:underline">
              Konfigurationsoptionen
            </Link>
          </li>
          <li>
            <Link href="/guides/phase1" className="text-blue-600 hover:underline">
              Phase 1 Workflow Guide
            </Link>
          </li>
        </ul>
      </InfoBox>
    </DevPortalLayout>
  )
}