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

export default function GuidesPage() {
  return (
    <DevPortalLayout
      title="Entwickler-Guides"
      description="Schritt-fuer-Schritt Anleitungen fuer die SDK-Integration"
    >
      <h2>Workflow-Guides</h2>
      <p>
        Das AI Compliance SDK fuehrt durch einen strukturierten 19-Schritte-Workflow
        in zwei Phasen. Diese Guides erklaeren jeden Schritt im Detail.
      </p>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
        <Link
          href="/developers/guides/phase1"
          className="block p-6 bg-blue-50 border border-blue-200 rounded-xl hover:border-blue-400 transition-colors"
        >
          <div className="flex items-center gap-3 mb-4">
            <div className="w-12 h-12 bg-blue-600 text-white rounded-xl flex items-center justify-center text-xl font-bold">
              1
            </div>
            <div>
              <h3 className="text-lg font-semibold text-blue-900">Phase 1: Assessment</h3>
              <p className="text-sm text-blue-600">8 Schritte</p>
            </div>
          </div>
          <p className="text-blue-800 text-sm">
            Use Case Workshop, System Screening, Module-Auswahl, Requirements,
            Controls, Evidence, Checkliste, Risk Matrix.
          </p>
        </Link>

        <Link
          href="/developers/guides/phase2"
          className="block p-6 bg-green-50 border border-green-200 rounded-xl hover:border-green-400 transition-colors"
        >
          <div className="flex items-center gap-3 mb-4">
            <div className="w-12 h-12 bg-green-600 text-white rounded-xl flex items-center justify-center text-xl font-bold">
              2
            </div>
            <div>
              <h3 className="text-lg font-semibold text-green-900">Phase 2: Dokumentation</h3>
              <p className="text-sm text-green-600">11 Schritte</p>
            </div>
          </div>
          <p className="text-green-800 text-sm">
            AI Act Klassifizierung, Pflichten, DSFA, TOMs, Loeschfristen,
            VVT, Rechtliche Vorlagen, Cookie Banner, DSR Portal.
          </p>
        </Link>
      </div>

      <h2>Workflow-Uebersicht</h2>
      <div className="my-6 not-prose">
        <div className="bg-slate-50 rounded-xl p-6 border border-slate-200">
          <h4 className="font-semibold mb-4 text-slate-900">Phase 1: Assessment (8 Schritte)</h4>
          <ol className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-blue-600 font-mono">01</span>
              <p className="font-medium">Use Case Workshop</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-blue-600 font-mono">02</span>
              <p className="font-medium">System Screening</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-blue-600 font-mono">03</span>
              <p className="font-medium">Compliance Modules</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-blue-600 font-mono">04</span>
              <p className="font-medium">Requirements</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-blue-600 font-mono">05</span>
              <p className="font-medium">Controls</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-blue-600 font-mono">06</span>
              <p className="font-medium">Evidence</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-blue-600 font-mono">07</span>
              <p className="font-medium">Audit Checklist</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-blue-600 font-mono">08</span>
              <p className="font-medium">Risk Matrix</p>
            </li>
          </ol>
        </div>

        <div className="bg-slate-50 rounded-xl p-6 border border-slate-200 mt-4">
          <h4 className="font-semibold mb-4 text-slate-900">Phase 2: Dokumentation (11 Schritte)</h4>
          <ol className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">09</span>
              <p className="font-medium">AI Act Klassifizierung</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">10</span>
              <p className="font-medium">Pflichtenuebersicht</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">11</span>
              <p className="font-medium">DSFA</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">12</span>
              <p className="font-medium">TOMs</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">13</span>
              <p className="font-medium">Loeschfristen</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">14</span>
              <p className="font-medium">VVT</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">15</span>
              <p className="font-medium">Rechtliche Vorlagen</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">16</span>
              <p className="font-medium">Cookie Banner</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">17</span>
              <p className="font-medium">Einwilligungen</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">18</span>
              <p className="font-medium">DSR Portal</p>
            </li>
            <li className="p-3 bg-white rounded-lg border border-slate-200">
              <span className="text-green-600 font-mono">19</span>
              <p className="font-medium">Escalations</p>
            </li>
          </ol>
        </div>
      </div>

      <h2>Checkpoints</h2>
      <p>
        Das SDK validiert den Fortschritt an definierten Checkpoints:
      </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">Checkpoint</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nach Schritt</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Validierung</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200 text-sm">
            <tr>
              <td className="px-4 py-3 font-mono text-blue-600">CP-UC</td>
              <td className="px-4 py-3">Use Case Workshop</td>
              <td className="px-4 py-3 text-gray-600">Mind. 1 Use Case angelegt</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-mono text-blue-600">CP-SCREEN</td>
              <td className="px-4 py-3">System Screening</td>
              <td className="px-4 py-3 text-gray-600">Screening abgeschlossen</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-mono text-blue-600">CP-CTRL</td>
              <td className="px-4 py-3">Controls</td>
              <td className="px-4 py-3 text-gray-600">Alle Requirements haben Controls</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-mono text-blue-600">CP-RISK</td>
              <td className="px-4 py-3">Risk Matrix</td>
              <td className="px-4 py-3 text-gray-600">Alle Risiken bewertet</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-mono text-green-600">CP-DSFA</td>
              <td className="px-4 py-3">DSFA</td>
              <td className="px-4 py-3 text-gray-600">DSFA generiert (falls erforderlich)</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-mono text-green-600">CP-TOM</td>
              <td className="px-4 py-3">TOMs</td>
              <td className="px-4 py-3 text-gray-600">Mind. 10 TOMs definiert</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-mono text-green-600">CP-VVT</td>
              <td className="px-4 py-3">VVT</td>
              <td className="px-4 py-3 text-gray-600">VVT vollstaendig</td>
            </tr>
          </tbody>
        </table>
      </div>

      <InfoBox type="info" title="Checkpoint-Navigation">
        Nicht bestandene Checkpoints blockieren den Fortschritt zu spaetere Schritte.
        Verwenden Sie <code>validateCheckpoint()</code> um den Status zu pruefen.
      </InfoBox>

      <h2>Best Practices</h2>
      <ul>
        <li>
          <strong>Speichern Sie regelmaessig:</strong> Der State wird automatisch
          im localStorage gespeichert, aber aktivieren Sie Backend-Sync fuer
          persistente Speicherung.
        </li>
        <li>
          <strong>Nutzen Sie die Command Bar:</strong> Cmd+K oeffnet schnelle
          Navigation, Export und RAG-Suche.
        </li>
        <li>
          <strong>Arbeiten Sie Use-Case-zentriert:</strong> Bearbeiten Sie
          einen Use Case vollstaendig, bevor Sie zum naechsten wechseln.
        </li>
        <li>
          <strong>Validieren Sie Checkpoints:</strong> Pruefen Sie vor dem
          Phasenwechsel, ob alle Checkpoints bestanden sind.
        </li>
      </ul>
    </DevPortalLayout>
  )
}