'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import { FileText, Layers, Tag, RefreshCw } from 'lucide-react'

interface AnnexAgentRAGSlideProps {
  lang: Language
}

export default function AnnexAgentRAGSlide({ lang }: AnnexAgentRAGSlideProps) {
  const regulations = [
    {
      name: 'DSGVO',
      articles: lang === 'de' ? '99 Artikel' : '99 Articles',
      recitals: lang === 'de' ? '173 Erwägungsgründe' : '173 Recitals',
      color: 'from-blue-500/20 to-blue-600/20',
      border: 'border-blue-400/30'
    },
    {
      name: 'AI Act',
      articles: lang === 'de' ? '113 Artikel' : '113 Articles',
      recitals: lang === 'de' ? '180 Erwägungsgründe' : '180 Recitals',
      color: 'from-purple-500/20 to-purple-600/20',
      border: 'border-purple-400/30'
    },
    {
      name: 'NIS2',
      articles: lang === 'de' ? '46 Artikel' : '46 Articles',
      recitals: lang === 'de' ? '144 Erwägungsgründe' : '144 Recitals',
      color: 'from-green-500/20 to-green-600/20',
      border: 'border-green-400/30'
    }
  ]

  const chunkingDetails = [
    {
      icon: Layers,
      label: lang === 'de' ? 'Chunk-Größe' : 'Chunk size',
      value: lang === 'de' ? '512 Tokens mit 64 Token Überlappung' : '512 tokens with 64 token overlap'
    },
    {
      icon: Tag,
      label: lang === 'de' ? 'Metadaten-Tagging' : 'Metadata tagging',
      value: lang === 'de' ? 'Artikelnummer, Abschnitt, Verordnung, Sprache' : 'Article number, section, regulation, language'
    },
    {
      icon: FileText,
      label: lang === 'de' ? 'Hierarchisches Chunking' : 'Hierarchical chunking',
      value: lang === 'de' ? 'Artikel → Absatz → Satz' : 'Article → Paragraph → Sentence'
    },
    {
      icon: RefreshCw,
      label: lang === 'de' ? 'Update-Workflow' : 'Update workflow',
      value: lang === 'de' ? 'Automatische Re-Indizierung bei Gesetzesänderungen' : 'Automatic re-indexing on law changes'
    }
  ]

  return (
    <div className="max-w-6xl mx-auto px-4">
      <FadeInView>
        <div className="text-center mb-12">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            <GradientText>
              {lang === 'de' ? 'Rechtsdokumente im RAG' : 'Legal Documents in RAG'}
            </GradientText>
          </h2>
          <p className="text-xl text-white/60">
            {lang === 'de' ? 'Wie Gesetze in die KI gelangen' : 'How laws enter the AI'}
          </p>
        </div>
      </FadeInView>

      {/* Regulations */}
      <FadeInView delay={0.2}>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
          {regulations.map((reg, idx) => (
            <motion.div
              key={reg.name}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.3 + idx * 0.1 }}
              className={`bg-gradient-to-br ${reg.color} border ${reg.border} rounded-xl p-6 text-center`}
            >
              <h3 className="text-2xl font-bold text-white mb-4">{reg.name}</h3>
              <div className="space-y-2">
                <div className="bg-white/[0.08] rounded-lg p-3">
                  <p className="text-lg font-semibold text-white/90">{reg.articles}</p>
                </div>
                <div className="bg-white/[0.08] rounded-lg p-3">
                  <p className="text-lg font-semibold text-white/90">{reg.recitals}</p>
                </div>
              </div>
            </motion.div>
          ))}
        </div>
      </FadeInView>

      {/* Chunking Strategy */}
      <FadeInView delay={0.6}>
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.7 }}
          className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-6"
        >
          <h3 className="text-2xl font-bold text-white/90 mb-6 text-center">
            {lang === 'de' ? 'Chunking-Strategie' : 'Chunking Strategy'}
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            {chunkingDetails.map((detail, idx) => (
              <motion.div
                key={detail.label}
                initial={{ opacity: 0, x: -20 }}
                animate={{ opacity: 1, x: 0 }}
                transition={{ delay: 0.8 + idx * 0.1 }}
                className="flex items-start gap-4"
              >
                <detail.icon className="w-6 h-6 text-indigo-400 flex-shrink-0 mt-1" />
                <div>
                  <h4 className="text-sm font-semibold text-white/80 mb-1">{detail.label}</h4>
                  <p className="text-sm text-white/60">{detail.value}</p>
                </div>
              </motion.div>
            ))}
          </div>

          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ delay: 1.2 }}
            className="text-center pt-4 border-t border-white/[0.06]"
          >
            <p className="text-lg font-semibold text-indigo-400">
              {lang === 'de' ? 'Aktuell: 15.000+ Chunks indiziert' : 'Currently: 15,000+ chunks indexed'}
            </p>
          </motion.div>
        </motion.div>
      </FadeInView>
    </div>
  )
}