import Link from 'next/link'
import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/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="/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="/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="/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="/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"
      projectId="your-project-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>

      {/* API Exposure Classification */}
      <h2>API-Exposure-Klassifikation</h2>
      <p>
        Das SDK klassifiziert alle API-Endpoints nach ihrer Netzwerk-Exposition.
        Von den ~640 Endpoints sind nur ~9% oeffentlich exponiert.
      </p>

      <div className="my-4 overflow-x-auto not-prose">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Kategorie</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Badge</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Bedeutung</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">~Endpoints</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200 text-sm">
            <tr>
              <td className="px-4 py-3 font-medium">public</td>
              <td className="px-4 py-3">
                <span className="inline-block text-xs font-medium px-2 py-0.5 rounded bg-green-100 text-green-800">Oeffentlich</span>
              </td>
              <td className="px-4 py-3 text-gray-600">Von Endnutzern/Browsern erreichbar (Internet)</td>
              <td className="px-4 py-3">~30</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-medium">partner</td>
              <td className="px-4 py-3">
                <span className="inline-block text-xs font-medium px-2 py-0.5 rounded bg-blue-100 text-blue-800">Integration</span>
              </td>
              <td className="px-4 py-3 text-gray-600">Fuer externe Systeme (CI/CD, LLM-Provider, API-Key/OAuth)</td>
              <td className="px-4 py-3">~25</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-medium">internal</td>
              <td className="px-4 py-3">
                <span className="inline-block text-xs font-medium px-2 py-0.5 rounded bg-gray-100 text-gray-700">Intern</span>
              </td>
              <td className="px-4 py-3 text-gray-600">Nur Admin-Dashboard, nicht Internet-exponiert</td>
              <td className="px-4 py-3">~550</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-medium">admin</td>
              <td className="px-4 py-3">
                <span className="inline-block text-xs font-medium px-2 py-0.5 rounded bg-orange-100 text-orange-800">Wartung</span>
              </td>
              <td className="px-4 py-3 text-gray-600">Setup/Maintenance — nach Deployment deaktivieren</td>
              <td className="px-4 py-3">~4</td>
            </tr>
          </tbody>
        </table>
      </div>

      <InfoBox type="info" title="Sicherheitshinweis">
        <p>
          Bei Self-Hosted-Deployments stellen Sie sicher, dass nur <strong>public</strong> und
          <strong> partner</strong> Endpoints ueber den Reverse Proxy erreichbar sind.
          Interne und Wartungs-Endpoints sollten ausschliesslich im Docker-Netzwerk / VPN erreichbar sein.
        </p>
      </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">Multi-Projekt &amp; Multi-Tenant</h4>
          <p className="text-sm text-gray-600">
            Mehrere Compliance-Projekte pro Tenant mit isolierten Stammdaten und paralleler Bearbeitung
          </p>
        </div>
        <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">
            Gefuehrter 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 fuer Audits und Dokumentation
          </p>
        </div>
        <div className="p-4 border border-gray-200 rounded-lg">
          <h4 className="font-medium text-gray-900 mb-2">Automatische Regulierungs-Ableitung</h4>
          <p className="text-sm text-gray-600">
            Aus CompanyProfile und Scope-Profiling werden anwendbare Gesetze (DSGVO, AI Act, NIS2, DORA etc.) und zustaendige Aufsichtsbehoerden automatisch ermittelt
          </p>
        </div>
      </div>

      {/* Next Steps */}
      <h2>Nächste Schritte</h2>
      <ol>
        <li>
          <Link href="/getting-started" className="text-blue-600 hover:underline">
            Quick Start Guide
          </Link>
          {' '}- Erste Integration in 5 Minuten
        </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 Workflow
          </Link>
          {' '}- Durchlaufen Sie den Compliance-Prozess
        </li>
      </ol>
    </DevPortalLayout>
  )
}