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

export default function GettingStartedPage() {
  return (
    <DevPortalLayout
      title="Quick Start"
      description="Starten Sie in 5 Minuten mit dem AI Compliance SDK"
    >
      <h2>1. Installation</h2>
      <p>
        Installieren Sie das SDK über Ihren bevorzugten Paketmanager:
      </p>
      <CodeBlock language="bash" filename="Terminal">
{`npm install @breakpilot/compliance-sdk
# oder
yarn add @breakpilot/compliance-sdk
# oder
pnpm add @breakpilot/compliance-sdk`}
      </CodeBlock>

      <h2>2. API Key erhalten</h2>
      <p>
        Nach dem Abo-Abschluss erhalten Sie Ihren API Key im{' '}
        <Link href="/settings" className="text-blue-600 hover:underline">
          Einstellungsbereich
        </Link>.
      </p>

      <InfoBox type="warning" title="Sicherheitshinweis">
        Speichern Sie den API Key niemals im Frontend-Code. Verwenden Sie
        Umgebungsvariablen auf dem Server.
      </InfoBox>

      <h2>3. Provider einrichten</h2>
      <p>
        Wrappen Sie Ihre App mit dem SDKProvider:
      </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.TENANT_ID}
          apiKey={process.env.BREAKPILOT_API_KEY}
          enableBackendSync={true}
        >
          {children}
        </SDKProvider>
      </body>
    </html>
  )
}`}
      </CodeBlock>

      <h3>Provider Props</h3>
      <ParameterTable
        parameters={[
          {
            name: 'tenantId',
            type: 'string',
            required: true,
            description: 'Ihre eindeutige Tenant-ID',
          },
          {
            name: 'apiKey',
            type: 'string',
            required: false,
            description: 'API Key für Backend-Sync (serverseitig)',
          },
          {
            name: 'userId',
            type: 'string',
            required: false,
            description: 'Optional: Benutzer-ID für Audit-Trail',
          },
          {
            name: 'enableBackendSync',
            type: 'boolean',
            required: false,
            description: 'Aktiviert Synchronisation mit dem Backend (default: false)',
          },
        ]}
      />

      <h2>4. SDK verwenden</h2>
      <p>
        Nutzen Sie den useSDK Hook in Ihren Komponenten:
      </p>
      <CodeBlock language="typescript" filename="components/Dashboard.tsx">
{`'use client'

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

export function ComplianceDashboard() {
  const {
    state,
    completionPercentage,
    goToStep,
    currentStep,
  } = useSDK()

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold">
        Compliance Fortschritt: {completionPercentage}%
      </h1>

      <div className="mt-4">
        <p>Aktueller Schritt: {currentStep?.name}</p>
        <p>Phase: {state.currentPhase}</p>
        <p>Use Cases: {state.useCases.length}</p>
      </div>

      <div className="mt-6 flex gap-4">
        <button
          onClick={() => goToStep('use-case-workshop')}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          Use Case Workshop
        </button>
        <button
          onClick={() => goToStep('risks')}
          className="px-4 py-2 bg-blue-600 text-white rounded"
        >
          Risikoanalyse
        </button>
      </div>
    </div>
  )
}`}
      </CodeBlock>

      <h2>5. Erste Schritte im Workflow</h2>
      <p>
        Das SDK führt Sie durch einen 19-Schritte-Workflow in 2 Phasen:
      </p>

      <div className="my-6 not-prose">
        <div className="grid grid-cols-2 gap-4">
          <div className="p-4 border border-gray-200 rounded-lg">
            <h4 className="font-semibold mb-2">Phase 1: Assessment</h4>
            <ol className="text-sm text-gray-600 space-y-1 list-decimal list-inside">
              <li>Use Case Workshop</li>
              <li>System Screening</li>
              <li>Compliance Modules</li>
              <li>Requirements</li>
              <li>Controls</li>
              <li>Evidence</li>
              <li>Audit Checklist</li>
              <li>Risk Matrix</li>
            </ol>
          </div>
          <div className="p-4 border border-gray-200 rounded-lg">
            <h4 className="font-semibold mb-2">Phase 2: Dokumentation</h4>
            <ol className="text-sm text-gray-600 space-y-1 list-decimal list-inside">
              <li>AI Act Klassifizierung</li>
              <li>Pflichtenübersicht</li>
              <li>DSFA</li>
              <li>TOMs</li>
              <li>Löschfristen</li>
              <li>VVT</li>
              <li>Rechtliche Vorlagen</li>
              <li>Cookie Banner</li>
              <li>Einwilligungen</li>
              <li>DSR Portal</li>
              <li>Escalations</li>
            </ol>
          </div>
        </div>
      </div>

      <h2>6. Nächste Schritte</h2>
      <ul>
        <li>
          <Link href="/sdk/configuration" className="text-blue-600 hover:underline">
            SDK Konfiguration
          </Link>
          {' '}- Alle Konfigurationsoptionen
        </li>
        <li>
          <Link href="/api/state" className="text-blue-600 hover:underline">
            State API
          </Link>
          {' '}- Verstehen Sie das State Management
        </li>
        <li>
          <Link href="/guides/phase1" className="text-blue-600 hover:underline">
            Phase 1 Guide
          </Link>
          {' '}- Kompletter Workflow für das Assessment
        </li>
      </ul>
    </DevPortalLayout>
  )
}
