import Link from 'next/link'
import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/developers/DevPortalLayout'
import { Zap, Code, Terminal, Book, ArrowRight } from 'lucide-react'

export default function DevelopersPage() {
  return (
    <DevPortalLayout
      title="AI Compliance SDK"
      description="Integrieren Sie Compliance-Automation in Ihre Anwendung"
    >
      {/* Quick Links */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-12 not-prose">
        <Link
          href="/developers/getting-started"
          className="group p-6 border border-gray-200 rounded-xl hover:border-blue-300 hover:shadow-lg transition-all"
        >
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600">
              <Zap className="w-5 h-5" />
            </div>
            <h3 className="font-semibold text-gray-900">Quick Start</h3>
          </div>
          <p className="text-sm text-gray-600 mb-3">
            Starten Sie in 5 Minuten mit dem AI Compliance SDK
          </p>
          <span className="text-sm text-blue-600 group-hover:underline flex items-center gap-1">
            Jetzt starten <ArrowRight className="w-4 h-4" />
          </span>
        </Link>

        <Link
          href="/developers/api"
          className="group p-6 border border-gray-200 rounded-xl hover:border-blue-300 hover:shadow-lg transition-all"
        >
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-600">
              <Terminal className="w-5 h-5" />
            </div>
            <h3 className="font-semibold text-gray-900">API Reference</h3>
          </div>
          <p className="text-sm text-gray-600 mb-3">
            Vollständige API-Dokumentation aller Endpoints
          </p>
          <span className="text-sm text-blue-600 group-hover:underline flex items-center gap-1">
            API erkunden <ArrowRight className="w-4 h-4" />
          </span>
        </Link>

        <Link
          href="/developers/sdk"
          className="group p-6 border border-gray-200 rounded-xl hover:border-blue-300 hover:shadow-lg transition-all"
        >
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600">
              <Code className="w-5 h-5" />
            </div>
            <h3 className="font-semibold text-gray-900">SDK Documentation</h3>
          </div>
          <p className="text-sm text-gray-600 mb-3">
            TypeScript SDK für React und Next.js
          </p>
          <span className="text-sm text-blue-600 group-hover:underline flex items-center gap-1">
            Dokumentation lesen <ArrowRight className="w-4 h-4" />
          </span>
        </Link>

        <Link
          href="/developers/guides"
          className="group p-6 border border-gray-200 rounded-xl hover:border-blue-300 hover:shadow-lg transition-all"
        >
          <div className="flex items-center gap-3 mb-3">
            <div className="w-10 h-10 rounded-lg bg-orange-100 flex items-center justify-center text-orange-600">
              <Book className="w-5 h-5" />
            </div>
            <h3 className="font-semibold text-gray-900">Guides</h3>
          </div>
          <p className="text-sm text-gray-600 mb-3">
            Schritt-für-Schritt-Anleitungen und Best Practices
          </p>
          <span className="text-sm text-blue-600 group-hover:underline flex items-center gap-1">
            Guides ansehen <ArrowRight className="w-4 h-4" />
          </span>
        </Link>
      </div>

      {/* Installation */}
      <h2>Installation</h2>
      <CodeBlock language="bash" filename="Terminal">
{`npm install @breakpilot/compliance-sdk
# oder
yarn add @breakpilot/compliance-sdk
# oder
pnpm add @breakpilot/compliance-sdk`}
      </CodeBlock>

      {/* Quick Example */}
      <h2>Schnellstart-Beispiel</h2>
      <CodeBlock language="typescript" filename="app.tsx">
{`import { SDKProvider, useSDK } from '@breakpilot/compliance-sdk'

function App() {
  return (
    <SDKProvider
      tenantId="your-tenant-id"
      apiKey={process.env.BREAKPILOT_API_KEY}
    >
      <ComplianceDashboard />
    </SDKProvider>
  )
}

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

  return (
    <div>
      <h1>Compliance Status: {completionPercentage}%</h1>
      <p>Aktueller Schritt: {state.currentStep}</p>
      <button onClick={() => goToStep('risks')}>
        Zur Risikoanalyse
      </button>
    </div>
  )
}`}
      </CodeBlock>

      <InfoBox type="info" title="Voraussetzungen">
        <ul className="list-disc list-inside space-y-1">
          <li>Node.js 18 oder höher</li>
          <li>React 18 oder höher</li>
          <li>Breakpilot API Key (erhältlich nach Abo-Abschluss)</li>
        </ul>
      </InfoBox>

      {/* Features */}
      <h2>Hauptfunktionen</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 not-prose">
        <div className="p-4 border border-gray-200 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">19-Schritt-Workflow</h4>
          <p className="text-sm text-gray-600">
            Geführter Compliance-Prozess von Use Case bis DSR-Portal
          </p>
        </div>
        <div className="p-4 border border-gray-200 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">RAG-basierte Suche</h4>
          <p className="text-sm text-gray-600">
            Durchsuchen Sie DSGVO, AI Act, NIS2 mit semantischer Suche
          </p>
        </div>
        <div className="p-4 border border-gray-200 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">Dokumentengenerierung</h4>
          <p className="text-sm text-gray-600">
            Automatische Erstellung von DSFA, TOMs, VVT
          </p>
        </div>
        <div className="p-4 border border-gray-200 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">Export</h4>
          <p className="text-sm text-gray-600">
            PDF, JSON, ZIP-Export für Audits und Dokumentation
          </p>
        </div>
      </div>

      {/* Next Steps */}
      <h2>Nächste Schritte</h2>
      <ol>
        <li>
          <Link href="/developers/getting-started" className="text-blue-600 hover:underline">
            Quick Start Guide
          </Link>
          {' '}- Erste Integration in 5 Minuten
        </li>
        <li>
          <Link href="/developers/api/state" className="text-blue-600 hover:underline">
            State API
          </Link>
          {' '}- Verstehen Sie das State Management
        </li>
        <li>
          <Link href="/developers/guides/phase1" className="text-blue-600 hover:underline">
            Phase 1 Workflow
          </Link>
          {' '}- Durchlaufen Sie den Compliance-Prozess
        </li>
      </ol>
    </DevPortalLayout>
  )
}