'use client'

import React from 'react'
import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'

const CHECKS = [
  { id: 1, text: "Impressum-Link im oder hinter dem Banner erreichbar", ref: "§5 TMG", auto: true },
  { id: 2, text: "Link zur Datenschutzerklaerung im Banner", ref: "Art. 13 DSGVO", auto: true },
  { id: 3, text: "Keine 'Zustimmung zur DSE' — nur 'zur Kenntnis genommen'", ref: "Art. 13 DSGVO", auto: true },
  { id: 4, text: "Ablehnen-Button sichtbar und gleichwertig", ref: "§25 TDDDG, EDPB", auto: true },
  { id: 5, text: "Keine vorausgewaehlten Checkboxen (nur 'Notwendig')", ref: "EuGH Planet49", auto: true },
  { id: 6, text: "Buttons gleich gross (kein Dark Pattern)", ref: "EDPB Guidelines", auto: true },
  { id: 7, text: "Cookie-Einstellungen erneut erreichbar (Widerruf)", ref: "Art. 7(3) DSGVO", auto: true },
  { id: 8, text: "Scripts blockiert bis Consent erteilt", ref: "§25 TDDDG", auto: true },
  { id: 9, text: "Google Consent Mode v2 integriert (wenn Google Services)", ref: "Google EEA Policy", auto: true },
  { id: 10, text: "Consent revisionssicher gespeichert (Server-Side)", ref: "Art. 7(1) DSGVO", auto: false },
  { id: 11, text: "Barrierefreiheit (WCAG 2.2 Level AA)", ref: "European Accessibility Act", auto: false },
  { id: 12, text: "Mehrsprachigkeit (min. DE + EN)", ref: "Best Practice", auto: false },
]

export default function ChecklistPage() {
  return (
    <div className="flex min-h-screen bg-white">
      <SDKDocsSidebar />
      <main className="flex-1 ml-64 p-8 max-w-4xl">
        <div className="prose prose-gray max-w-none">
          <h1>Compliance Checklist</h1>
          <p className="text-lg text-gray-600">
            12 Punkte die Ihr Cookie-Banner erfuellen muss. Der BreakPilot Banner
            erfuellt 9 davon automatisch.
          </p>

          <div className="bg-green-50 border border-green-200 rounded-xl p-4 my-6">
            <h4 className="text-green-900 mt-0">Automatische Pruefung verfuegbar</h4>
            <p className="text-green-700 text-sm mb-0">
              Nutzen Sie den <a href="/sdk/agent" className="text-green-800 font-medium">Compliance Agent</a> →
              Cookie-Test Tab um Ihren Banner automatisch gegen alle 8 Playwright-Checks zu pruefen.
            </p>
          </div>

          <div className="not-prose">
            <div className="space-y-3">
              {CHECKS.map(check => (
                <div key={check.id} className="flex items-start gap-3 p-4 rounded-lg border border-gray-200 bg-white">
                  <span className={`mt-0.5 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold ${
                    check.auto ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'
                  }`}>
                    {check.auto ? '✓' : '!'}
                  </span>
                  <div className="flex-1">
                    <p className="text-sm font-medium text-gray-900">{check.text}</p>
                    <div className="flex items-center gap-2 mt-1">
                      <span className="text-xs text-gray-500">{check.ref}</span>
                      {check.auto && (
                        <span className="text-[10px] px-2 py-0.5 rounded-full bg-green-100 text-green-700 font-medium">
                          Automatisch
                        </span>
                      )}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <h2 className="mt-8">Legende</h2>
          <ul>
            <li><span className="text-green-600 font-bold">✓ Automatisch</span> — vom BreakPilot Banner automatisch erfuellt</li>
            <li><span className="text-yellow-600 font-bold">! Manuell</span> — erfordert zusaetzliche Konfiguration/Pruefung</li>
          </ul>

          <h2>Selbst-Test</h2>
          <p>
            Nach der Integration koennen Sie Ihren Banner automatisch pruefen lassen:
          </p>
          <ol>
            <li>Oeffnen Sie den <a href="/sdk/agent">Compliance Agent</a></li>
            <li>Waehlen Sie den Tab &quot;Cookie-Test&quot;</li>
            <li>Geben Sie Ihre Website-URL ein</li>
            <li>Der Agent prueft mit einem echten Browser (Playwright/Chromium)</li>
            <li>Sie erhalten einen detaillierten Report mit allen 8 Checks</li>
          </ol>
        </div>
      </main>
    </div>
  )
}
