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

export default function SDKInstallationPage() {
  return (
    <DevPortalLayout
      title="SDK Installation"
      description="Installationsanleitung fuer das AI Compliance SDK"
    >
      <h2>Voraussetzungen</h2>
      <ul>
        <li>Node.js 18 oder hoeher</li>
        <li>React 18+ / Next.js 14+</li>
        <li>TypeScript 5.0+ (empfohlen)</li>
      </ul>

      <h2>Installation</h2>
      <p>
        Installieren Sie das SDK ueber Ihren bevorzugten Paketmanager:
      </p>
      <CodeBlock language="bash" filename="npm">
{`npm install @breakpilot/compliance-sdk`}
      </CodeBlock>
      <CodeBlock language="bash" filename="yarn">
{`yarn add @breakpilot/compliance-sdk`}
      </CodeBlock>
      <CodeBlock language="bash" filename="pnpm">
{`pnpm add @breakpilot/compliance-sdk`}
      </CodeBlock>

      <h2>Peer Dependencies</h2>
      <p>
        Das SDK hat folgende Peer Dependencies, die automatisch installiert werden sollten:
      </p>
      <CodeBlock language="json" filename="package.json">
{`{
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-dom": ">=18.0.0"
  }
}`}
      </CodeBlock>

      <h2>Zusaetzliche Pakete (optional)</h2>
      <p>
        Fuer erweiterte Funktionen koennen Sie folgende Pakete installieren:
      </p>
      <ParameterTable
        parameters={[
          {
            name: 'jspdf',
            type: 'npm package',
            required: false,
            description: 'Fuer PDF-Export (wird automatisch geladen wenn verfuegbar)',
          },
          {
            name: 'jszip',
            type: 'npm package',
            required: false,
            description: 'Fuer ZIP-Export aller Dokumente',
          },
        ]}
      />

      <h2>TypeScript Konfiguration</h2>
      <p>
        Das SDK ist vollstaendig in TypeScript geschrieben. Stellen Sie sicher,
        dass Ihre tsconfig.json folgende Optionen enthaelt:
      </p>
      <CodeBlock language="json" filename="tsconfig.json">
{`{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}`}
      </CodeBlock>

      <h2>Next.js Integration</h2>
      <p>
        Fuer Next.js 14+ mit App Router, fuegen Sie den Provider in Ihr Root-Layout ein:
      </p>
      <CodeBlock language="typescript" filename="app/layout.tsx">
{`import { SDKProvider } from '@breakpilot/compliance-sdk'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="de">
      <body>
        <SDKProvider
          tenantId={process.env.NEXT_PUBLIC_TENANT_ID!}
          apiKey={process.env.BREAKPILOT_API_KEY}
          enableBackendSync={true}
        >
          {children}
        </SDKProvider>
      </body>
    </html>
  )
}`}
      </CodeBlock>

      <InfoBox type="warning" title="Wichtig fuer Server Components">
        Der SDKProvider ist ein Client-Component. Wenn Sie Server Components
        verwenden, wrappen Sie nur die Teile der App, die das SDK benoetigen.
      </InfoBox>

      <h2>Umgebungsvariablen</h2>
      <p>
        Erstellen Sie eine .env.local Datei mit folgenden Variablen:
      </p>
      <CodeBlock language="bash" filename=".env.local">
{`# Pflicht
NEXT_PUBLIC_TENANT_ID=your-tenant-id

# Optional (fuer Backend-Sync)
BREAKPILOT_API_KEY=sk_live_...

# Optional (fuer Self-Hosted)
NEXT_PUBLIC_SDK_API_URL=https://your-server.com/sdk/v1`}
      </CodeBlock>

      <InfoBox type="info" title="API Key Sicherheit">
        Der API Key sollte niemals im Frontend-Code oder in NEXT_PUBLIC_ Variablen
        erscheinen. Verwenden Sie Server-Side API Routes fuer authentifizierte Anfragen.
      </InfoBox>

      <h2>Verifizierung</h2>
      <p>
        Testen Sie die Installation mit einer einfachen Komponente:
      </p>
      <CodeBlock language="typescript" filename="app/test/page.tsx">
{`'use client'

import { useSDK } from '@breakpilot/compliance-sdk'

export default function TestPage() {
  const { state, completionPercentage } = useSDK()

  return (
    <div>
      <h1>SDK Test</h1>
      <p>Fortschritt: {completionPercentage}%</p>
      <p>Aktuelle Phase: {state.currentPhase}</p>
      <p>Use Cases: {state.useCases.length}</p>
    </div>
  )
}`}
      </CodeBlock>

      <h2>Fehlerbehebung</h2>

      <h3>Error: useSDK must be used within SDKProvider</h3>
      <p>
        Stellen Sie sicher, dass der SDKProvider das gesamte Layout umschliesst
        und dass Sie {'\'use client\''} in Client-Komponenten verwenden.
      </p>

      <h3>Error: Module not found</h3>
      <p>
        Loeschen Sie node_modules und package-lock.json, dann reinstallieren:
      </p>
      <CodeBlock language="bash" filename="Terminal">
{`rm -rf node_modules package-lock.json
npm install`}
      </CodeBlock>

      <h3>TypeScript Errors</h3>
      <p>
        Stellen Sie sicher, dass TypeScript 5.0+ installiert ist:
      </p>
      <CodeBlock language="bash" filename="Terminal">
{`npm install typescript@latest`}
      </CodeBlock>
    </DevPortalLayout>
  )
}
