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

export default function ChangelogPage() {
  return (
    <DevPortalLayout
      title="Changelog"
      description="Versionshistorie und Aenderungen des AI Compliance SDK"
    >
      <h2>Versionierung</h2>
      <p>
        Das SDK folgt Semantic Versioning (SemVer):
        <code className="mx-1">MAJOR.MINOR.PATCH</code>
      </p>
      <ul>
        <li><strong>MAJOR:</strong> Breaking Changes</li>
        <li><strong>MINOR:</strong> Neue Features, abwaertskompatibel</li>
        <li><strong>PATCH:</strong> Bugfixes</li>
      </ul>

      {/* Version 1.2.0 */}
      <div className="mt-8 border-l-4 border-green-500 pl-4">
        <div className="flex items-center gap-3 mb-2">
          <span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">
            v1.2.0
          </span>
          <span className="text-slate-500 text-sm">2026-02-04</span>
          <span className="px-2 py-0.5 bg-green-500 text-white rounded text-xs">Latest</span>
        </div>

        <h3 className="text-lg font-semibold text-slate-900 mb-2">Neue Features</h3>
        <ul className="list-disc list-inside text-slate-700 space-y-1 mb-4">
          <li>Demo-Daten Seeding ueber API (nicht mehr hardcodiert)</li>
          <li>Playwright E2E Tests fuer alle 19 SDK-Schritte</li>
          <li>Command Bar RAG-Integration mit Live-Suche</li>
          <li>Developer Portal mit API-Dokumentation</li>
          <li>TOM-Katalog mit 20 vorkonfigurierten Massnahmen</li>
          <li>VVT-Templates fuer gaengige Verarbeitungstaetigkeiten</li>
        </ul>

        <h3 className="text-lg font-semibold text-slate-900 mb-2">Verbesserungen</h3>
        <ul className="list-disc list-inside text-slate-700 space-y-1 mb-4">
          <li>Performance-Optimierung beim State-Loading</li>
          <li>Bessere TypeScript-Typen fuer alle Exports</li>
          <li>Verbesserte Fehlerbehandlung bei API-Calls</li>
        </ul>

        <h3 className="text-lg font-semibold text-slate-900 mb-2">Bugfixes</h3>
        <ul className="list-disc list-inside text-slate-700 space-y-1">
          <li>Fix: Checkpoint-Validierung bei leeren Arrays</li>
          <li>Fix: Multi-Tab-Sync bei Safari</li>
          <li>Fix: Export-Dateiname mit Sonderzeichen</li>
        </ul>
      </div>

      {/* Version 1.1.0 */}
      <div className="mt-8 border-l-4 border-blue-500 pl-4">
        <div className="flex items-center gap-3 mb-2">
          <span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
            v1.1.0
          </span>
          <span className="text-slate-500 text-sm">2026-01-20</span>
        </div>

        <h3 className="text-lg font-semibold text-slate-900 mb-2">Neue Features</h3>
        <ul className="list-disc list-inside text-slate-700 space-y-1 mb-4">
          <li>Backend-Sync mit PostgreSQL-Persistierung</li>
          <li>SDK Backend (Go) mit RAG + LLM-Integration</li>
          <li>Automatische DSFA-Generierung via Claude API</li>
          <li>Export nach PDF, ZIP, JSON</li>
        </ul>

        <h3 className="text-lg font-semibold text-slate-900 mb-2">Verbesserungen</h3>
        <ul className="list-disc list-inside text-slate-700 space-y-1 mb-4">
          <li>Offline-Support mit localStorage Fallback</li>
          <li>Optimistic Locking fuer Konfliktbehandlung</li>
          <li>BroadcastChannel fuer Multi-Tab-Sync</li>
        </ul>
      </div>

      {/* Version 1.0.0 */}
      <div className="mt-8 border-l-4 border-slate-400 pl-4">
        <div className="flex items-center gap-3 mb-2">
          <span className="px-3 py-1 bg-slate-100 text-slate-800 rounded-full text-sm font-medium">
            v1.0.0
          </span>
          <span className="text-slate-500 text-sm">2026-01-01</span>
        </div>

        <h3 className="text-lg font-semibold text-slate-900 mb-2">Initial Release</h3>
        <ul className="list-disc list-inside text-slate-700 space-y-1 mb-4">
          <li>SDKProvider mit React Context</li>
          <li>useSDK Hook mit vollstaendigem State-Zugriff</li>
          <li>19-Schritte Compliance-Workflow (Phase 1 + 2)</li>
          <li>Checkpoint-Validierung</li>
          <li>Risk Matrix mit Score-Berechnung</li>
          <li>TypeScript-Support mit allen Types</li>
          <li>Utility Functions fuer Navigation und Berechnung</li>
        </ul>
      </div>

      {/* Breaking Changes Notice */}
      <InfoBox type="warning" title="Upgrade-Hinweise">
        <p className="mb-2">
          Bei Major-Version-Updates (z.B. 1.x → 2.x) koennen Breaking Changes auftreten.
          Pruefen Sie die Migration Guides vor dem Upgrade.
        </p>
        <p>
          Das SDK speichert die State-Version im localStorage. Bei inkompatiblen
          Aenderungen wird automatisch eine Migration durchgefuehrt.
        </p>
      </InfoBox>

      <h2>Geplante Features</h2>
      <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">Feature</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Version</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200 text-sm">
            <tr>
              <td className="px-4 py-3">Multi-Tenant-Support</td>
              <td className="px-4 py-3 font-mono">v1.3.0</td>
              <td className="px-4 py-3"><span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded text-xs">In Entwicklung</span></td>
            </tr>
            <tr>
              <td className="px-4 py-3">Workflow-Customization</td>
              <td className="px-4 py-3 font-mono">v1.3.0</td>
              <td className="px-4 py-3"><span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">Geplant</span></td>
            </tr>
            <tr>
              <td className="px-4 py-3">Audit-Trail Export</td>
              <td className="px-4 py-3 font-mono">v1.4.0</td>
              <td className="px-4 py-3"><span className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-xs">Geplant</span></td>
            </tr>
            <tr>
              <td className="px-4 py-3">White-Label Branding</td>
              <td className="px-4 py-3 font-mono">v2.0.0</td>
              <td className="px-4 py-3"><span className="px-2 py-1 bg-slate-100 text-slate-800 rounded text-xs">Roadmap</span></td>
            </tr>
          </tbody>
        </table>
      </div>

      <h2>Feedback & Issues</h2>
      <p>
        Fuer Bug-Reports und Feature-Requests nutzen Sie bitte:
      </p>
      <ul>
        <li>
          <strong>GitHub Issues:</strong>{' '}
          <code>github.com/breakpilot/compliance-sdk/issues</code>
        </li>
        <li>
          <strong>Support:</strong>{' '}
          <code>support@breakpilot.io</code>
        </li>
      </ul>
    </DevPortalLayout>
  )
}