'use client'

import { getCategoryById } from '@/lib/navigation'
import { ModuleCard } from '@/components/common/ModuleCard'
import { PagePurpose } from '@/components/common/PagePurpose'

export default function AIPage() {
  const category = getCategoryById('ai')

  if (!category) {
    return <div>Kategorie nicht gefunden</div>
  }

  return (
    <div>
      {/* Page Purpose */}
      <PagePurpose
        title={category.name}
        purpose="Diese Kategorie umfasst alle KI- und Machine-Learning-Module. Hier vergleichen Sie LLM-Provider, verwalten RAG-Pipelines, labeln OCR-Daten und nutzen KI-gestuetzte Korrektur-Tools."
        audience={['Entwickler', 'Data Scientists', 'Lehrer']}
        architecture={{
          services: ['klausur-service (Python)', 'embedding-service (Python)', 'backend (Python)'],
          databases: ['PostgreSQL', 'Qdrant (Vector)', 'MinIO (Object Storage)'],
        }}
        relatedPages={[
          { name: 'GPU Infrastruktur', href: '/infrastructure/gpu', description: 'GPU-Ressourcen fuer Training' },
        ]}
        collapsible={true}
        defaultCollapsed={false}
      />

      {/* Modules Grid */}
      <h2 className="text-lg font-semibold text-slate-900 mb-4">Module</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {category.modules.map((module) => (
          <ModuleCard key={module.id} module={module} category={category} />
        ))}
      </div>

      {/* Info Section */}
      <div className="mt-8 bg-teal-50 border border-teal-200 rounded-xl p-6">
        <h3 className="font-semibold text-teal-800 flex items-center gap-2">
          <span>🧠</span>
          DSGVO-konforme KI
        </h3>
        <p className="text-sm text-teal-700 mt-2">
          Alle KI-Modelle koennen lokal auf dem Mac Mini mit Ollama ausgefuehrt werden.
          Keine Daten werden an externe Cloud-Anbieter gesendet, sofern nicht explizit konfiguriert.
        </p>
      </div>
    </div>
  )
}