'use client'

import { motion } from 'framer-motion'
import { Database, FileSearch, Layers, BarChart3, FileUp, ScanLine, Brain } from 'lucide-react'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'

interface AnnexRAGSlideProps {
  lang: Language
}

export default function AnnexRAGSlide({ lang }: AnnexRAGSlideProps) {
  const pipelineSteps = [
    {
      icon: FileUp,
      labelDE: 'Dokument Upload',
      labelEN: 'Document Upload'
    },
    {
      icon: ScanLine,
      labelDE: 'OCR Verarbeitung',
      labelEN: 'OCR Processing'
    },
    {
      icon: Layers,
      labelDE: 'Chunking',
      labelEN: 'Chunking'
    },
    {
      icon: Brain,
      labelDE: 'Embedding',
      labelEN: 'Embedding'
    },
    {
      icon: Database,
      labelDE: 'Vector Store',
      labelEN: 'Vector Store'
    }
  ]

  const features = [
    {
      titleDE: 'Qdrant Vector DB',
      titleEN: 'Qdrant Vector DB',
      icon: Database,
      pointsDE: [
        'High-performance vector search',
        'Hybrid search: semantisch + keyword',
        'Filter nach Metadaten (Typ, Datum, Vorschrift)',
        '99.2% Retrieval-Genauigkeit'
      ],
      pointsEN: [
        'High-performance vector search',
        'Hybrid search: semantic + keyword',
        'Filters by metadata (document type, date, regulation)',
        '99.2% retrieval accuracy'
      ]
    },
    {
      titleDE: 'Embedding Pipeline',
      titleEN: 'Embedding Pipeline',
      icon: FileSearch,
      pointsDE: [
        'PaddleOCR für Dokumentenscanning',
        'Chunk-Größe: 512 Tokens, Overlap: 64',
        'Sentence-Transformers für Embedding',
        'Automatische Spracherkennung'
      ],
      pointsEN: [
        'PaddleOCR for document scanning',
        'Chunk size: 512 tokens, overlap: 64',
        'Sentence-Transformers for embedding',
        'Automatic language detection'
      ]
    },
    {
      titleDE: 'Hybrid Search',
      titleEN: 'Hybrid Search',
      icon: Layers,
      pointsDE: [
        'Kombiniert dense + sparse Vektoren',
        'BM25 für Keyword-Matching',
        'Cosine-Similarity für semantische Suche',
        'Re-Ranking für optimale Ergebnisse'
      ],
      pointsEN: [
        'Combines dense + sparse vectors',
        'BM25 for keyword matching',
        'Cosine similarity for semantic search',
        'Re-ranking for optimal results'
      ]
    },
    {
      titleDE: 'Retrieval Metrics',
      titleEN: 'Retrieval Metrics',
      icon: BarChart3,
      pointsDE: [
        'Precision@5: 94.3%',
        'Recall@10: 97.1%',
        'MRR: 0.89',
        'Avg. Latenz: 120ms'
      ],
      pointsEN: [
        'Precision@5: 94.3%',
        'Recall@10: 97.1%',
        'MRR: 0.89',
        'Avg latency: 120ms'
      ]
    }
  ]

  return (
    <div className="max-w-6xl mx-auto px-4">
      {/* Header */}
      <FadeInView>
        <div className="text-center mb-12">
          <h2 className="text-4xl md:text-5xl font-bold mb-4">
            <GradientText>
              {lang === 'de' ? 'RAG Pipeline & Vektordatenbank' : 'RAG Pipeline & Vector Database'}
            </GradientText>
          </h2>
          <p className="text-xl text-white/60">
            {lang === 'de'
              ? 'Präzise Antworten durch intelligentes Retrieval'
              : 'Precise answers through intelligent retrieval'}
          </p>
        </div>
      </FadeInView>

      {/* Pipeline Visualization */}
      <FadeInView delay={0.2}>
        <div className="mb-12">
          <div className="relative flex items-center justify-between gap-2">
            {pipelineSteps.map((step, index) => {
              const Icon = step.icon
              return (
                <div key={index} className="flex items-center flex-1">
                  <motion.div
                    initial={{ opacity: 0, scale: 0.8 }}
                    animate={{ opacity: 1, scale: 1 }}
                    transition={{ delay: 0.3 + index * 0.1 }}
                    className="flex-1"
                  >
                    <div className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4 text-center hover:bg-white/[0.06] transition-all duration-300">
                      <Icon className="w-8 h-8 mx-auto mb-2 text-blue-400" />
                      <p className="text-sm text-white/80">
                        {lang === 'de' ? step.labelDE : step.labelEN}
                      </p>
                    </div>
                  </motion.div>

                  {index < pipelineSteps.length - 1 && (
                    <motion.div
                      initial={{ scaleX: 0 }}
                      animate={{ scaleX: 1 }}
                      transition={{ delay: 0.4 + index * 0.1, duration: 0.3 }}
                      className="flex-shrink-0 mx-2 origin-left"
                    >
                      <div className="h-0.5 w-8 bg-gradient-to-r from-blue-500 to-purple-500" />
                    </motion.div>
                  )}
                </div>
              )
            })}
          </div>
        </div>
      </FadeInView>

      {/* Feature Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {features.map((feature, index) => {
          const Icon = feature.icon
          return (
            <motion.div
              key={index}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6 + index * 0.1 }}
              className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4 hover:bg-white/[0.06] transition-all duration-300"
            >
              <div className="flex items-center gap-3 mb-3">
                <div className="p-2 bg-blue-500/10 rounded-lg">
                  <Icon className="w-5 h-5 text-blue-400" />
                </div>
                <h3 className="text-lg font-semibold text-white">
                  {lang === 'de' ? feature.titleDE : feature.titleEN}
                </h3>
              </div>
              <ul className="space-y-2">
                {(lang === 'de' ? feature.pointsDE : feature.pointsEN).map((point, idx) => (
                  <li key={idx} className="text-sm text-white/70 flex items-start">
                    <span className="text-blue-400 mr-2">•</span>
                    <span>{point}</span>
                  </li>
                ))}
              </ul>
            </motion.div>
          )
        })}
      </div>
    </div>
  )
}