'use client'

import { useState } from 'react'
import { Language } from '@/lib/types'
import { t } from '@/lib/i18n'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import GlassCard from '../ui/GlassCard'
import {
  Brain,
  Search,
  Database,
  FileText,
  Bot,
  Zap,
  Layers,
  ArrowRight,
  Activity,
  Shield,
  Cpu,
  MessageSquare,
  Eye,
  Gauge,
  Network,
  Sparkles,
} from 'lucide-react'

interface AIPipelineSlideProps {
  lang: Language
}

type PipelineTab = 'rag' | 'agents' | 'quality'

export default function AIPipelineSlide({ lang }: AIPipelineSlideProps) {
  const i = t(lang)
  const de = lang === 'de'
  const [activeTab, setActiveTab] = useState<PipelineTab>('rag')

  const heroStats = [
    { value: '38+', label: de ? 'Indexierte Verordnungen' : 'Indexed Regulations', sub: 'DSGVO · AI Act · NIS2 · CRA · BDSG · DSA · ...', color: 'text-indigo-400' },
    { value: '6.259', label: de ? 'Extrahierte Controls' : 'Extracted Controls', sub: de ? '79% Source-Match · 9 Verordnungen' : '79% source match · 9 regulations', color: 'text-purple-400' },
    { value: '6', label: de ? 'Qdrant Collections' : 'Qdrant Collections', sub: de ? 'Legal Corpus · DSFA · Recht · Templates · ...' : 'Legal Corpus · DSFA · Law · Templates · ...', color: 'text-emerald-400' },
    { value: '325+', label: de ? 'Abgeleitete Pflichten' : 'Derived Obligations', sub: de ? 'NIS2 · DSGVO · AI Act · CRA · ...' : 'NIS2 · GDPR · AI Act · CRA · ...', color: 'text-amber-400' },
  ]

  const tabs: { id: PipelineTab; label: string; icon: typeof Brain }[] = [
    { id: 'rag', label: de ? 'RAG-Pipeline' : 'RAG Pipeline', icon: Search },
    { id: 'agents', label: de ? 'UCCA & Engines' : 'UCCA & Engines', icon: Bot },
    { id: 'quality', label: de ? 'QA & Infrastruktur' : 'QA & Infrastructure', icon: Gauge },
  ]

  // RAG Pipeline content
  const ragPipelineSteps = [
    {
      icon: FileText,
      color: 'text-blue-400',
      bg: 'bg-blue-500/10 border-blue-500/20',
      title: de ? '1. Ingestion & QA' : '1. Ingestion & QA',
      items: de
        ? ['38+ PDF-Verordnungen (EU + DE + International)', 'Strukturelles Chunking an Artikel/Absatz-Grenzen', 'PDF-QA-Pipeline: 86% Artikel-Extraktion', 'Deduplizierung + Cross-Regulation Harmonisierung']
        : ['38+ PDF regulations (EU + DE + International)', 'Structural chunking at article/paragraph boundaries', 'PDF QA pipeline: 86% article extraction', 'Deduplication + cross-regulation harmonization'],
    },
    {
      icon: Cpu,
      color: 'text-purple-400',
      bg: 'bg-purple-500/10 border-purple-500/20',
      title: de ? '2. Embedding & LLM' : '2. Embedding & LLM',
      items: de
        ? ['BGE-M3 Multilingual (1024-dim, lokal)', '120B LLM auf OVH (via LiteLLM, OpenAI-kompatibel)', '1000B LLM auf SysEleven (BSI-zertifiziert)', 'CrossEncoder Re-Ranking + HyDE']
        : ['BGE-M3 multilingual (1024-dim, local)', '120B LLM on OVH (via LiteLLM, OpenAI-compatible)', '1000B LLM on SysEleven (BSI-certified)', 'CrossEncoder re-ranking + HyDE'],
    },
    {
      icon: Database,
      color: 'text-emerald-400',
      bg: 'bg-emerald-500/10 border-emerald-500/20',
      title: de ? '3. Vektorspeicher' : '3. Vector Store',
      items: de
        ? ['Qdrant Vector DB (Hetzner, API-Key gesichert)', '6 Collections: CE, Recht, Gesetze, Datenschutz, DSFA, Templates', 'MinIO Object Storage (Hetzner, S3-kompatibel, TLS)', '25.000+ Sicherheitskontrollen · 110 Regularien · HNSW-Index']
        : ['Qdrant Vector DB (Hetzner, API-key secured)', '6 Collections: CE, Law, Statutes, Privacy, DSFA, Templates', 'MinIO object storage (Hetzner, S3-compatible, TLS)', '25,000+ security controls · 110 regulations · HNSW index'],
    },
    {
      icon: Search,
      color: 'text-indigo-400',
      bg: 'bg-indigo-500/10 border-indigo-500/20',
      title: de ? '4. Hybrid Search' : '4. Hybrid Search',
      items: de
        ? ['Multi-Collection-Suche mit Whitelist-Validierung', 'Deutsche Komposita-Zerlegung', 'Cross-Encoder Re-Ranking der Top-K Ergebnisse', 'Quellen-Attribution mit Artikel/Absatz-Referenz']
        : ['Multi-collection search with whitelist validation', 'German compound word decomposition', 'Cross-encoder re-ranking of top-K results', 'Source attribution with article/paragraph reference'],
    },
  ]

  // Multi-Agent System content — UCCA + Policy Engine
  const agents = [
    { name: 'UCCA', soul: de ? 'Use-Case Compliance' : 'Use-Case Compliance', desc: de ? 'Policy Engine (45 Regeln) + Eskalation E0–E3' : 'Policy engine (45 rules) + escalation E0–E3', color: 'text-indigo-400' },
    { name: de ? 'Pflichten-Engine' : 'Obligations Engine', soul: de ? '325+ Pflichten' : '325+ obligations', desc: de ? 'Multi-Regulation: NIS2, DSGVO, AI Act, CRA, ...' : 'Multi-regulation: NIS2, GDPR, AI Act, CRA, ...', color: 'text-emerald-400' },
    { name: de ? 'Compliance-Berater' : 'Compliance Advisor', soul: de ? 'Legal RAG + LLM' : 'Legal RAG + LLM', desc: de ? 'Wizard-basierter Chatbot mit Qdrant-Kontext' : 'Wizard-based chatbot with Qdrant context', color: 'text-purple-400' },
    { name: de ? 'Dokument-Generator' : 'Document Generator', soul: de ? '20 Templates' : '20 templates', desc: de ? 'AGB, DSE, AV-Vertrag, Widerruf + 16 weitere' : 'T&C, Privacy Policy, DPA, Withdrawal + 16 more', color: 'text-amber-400' },
    { name: de ? 'DSFA-Agent' : 'DSFA Agent', soul: de ? 'Art. 35 DSGVO' : 'Art. 35 GDPR', desc: de ? 'Risikobewertung mit Legal Context Injection' : 'Risk assessment with legal context injection', color: 'text-red-400' },
    { name: de ? 'Schulungs-Engine' : 'Training Engine', soul: de ? 'Academy + TTS' : 'Academy + TTS', desc: de ? '28 Module · Piper TTS · Automatische Videos' : '28 modules · Piper TTS · Automatic videos', color: 'text-blue-400' },
  ]

  const agentInfra = [
    { icon: Shield, label: de ? 'Policy Engine' : 'Policy Engine', desc: de ? 'Deterministisch · LLM ist NICHT Wahrheitsquelle' : 'Deterministic · LLM is NOT source of truth' },
    { icon: Brain, label: de ? 'LLM-Schicht' : 'LLM Layer', desc: de ? '120B (OVH) + 1000B (SysEleven BSI) · EU-only' : '120B (OVH) + 1000B (SysEleven BSI) · EU-only' },
    { icon: Network, label: 'LiteLLM Gateway', desc: de ? 'OpenAI-kompatibel · Multi-Provider Routing' : 'OpenAI-compatible · Multi-provider routing' },
    { icon: Activity, label: de ? 'Eskalation E0–E3' : 'Escalation E0–E3', desc: de ? 'Auto-Approve → Team-Lead → DSB → DSB+Legal' : 'Auto-approve → Team lead → DPO → DPO+Legal' },
  ]

  // Quality Assurance content
  const qaFeatures = [
    {
      icon: Shield,
      color: 'text-emerald-400',
      title: de ? 'Control Quality Pipeline' : 'Control Quality Pipeline',
      items: de
        ? ['6.259 Controls extrahiert (79% Source-Match)', '3.301 Duplikate entfernt (Phase 5 Normalisierung)', '90+ QA-Skripte: Deduplizierung, Match-Validierung', 'Canonical Controls JSON-Schema-Validierung in CI']
        : ['6,259 controls extracted (79% source match)', '3,301 duplicates removed (Phase 5 normalization)', '90+ QA scripts: deduplication, match validation', 'Canonical Controls JSON schema validation in CI'],
    },
    {
      icon: Eye,
      color: 'text-indigo-400',
      title: de ? 'RAG Quality & Monitoring' : 'RAG Quality & Monitoring',
      items: de
        ? ['PDF-QA-Pipeline: 86% Artikel-Extraktion', 'Multi-Collection-Whitelist-Validierung', 'Qdrant-Deduplizierung: 8-Stufen-Bereinigung', 'Fallback-Handling: RAG-Fehler brechen nie Hauptfunktion']
        : ['PDF QA pipeline: 86% article extraction', 'Multi-collection whitelist validation', 'Qdrant deduplication: 8-step cleanup', 'Fallback handling: RAG failures never break main function'],
    },
    {
      icon: Sparkles,
      color: 'text-purple-400',
      title: de ? 'CI/CD & Testing' : 'CI/CD & Testing',
      items: de
        ? ['Gitea Actions: Lint → Tests → Validierung bei jedem Push', 'Go-Tests (AI SDK) + Python-Tests (Backend + Crawler + Gateway)', 'Coolify Auto-Deploy mit Health-Check-Monitoring', 'arm64 → amd64 Cross-Build fuer Hetzner Production']
        : ['Gitea Actions: Lint → Tests → Validation on every push', 'Go tests (AI SDK) + Python tests (Backend + Crawler + Gateway)', 'Coolify auto-deploy with health check monitoring', 'arm64 → amd64 cross-build for Hetzner production'],
    },
    {
      icon: Zap,
      color: 'text-amber-400',
      title: de ? 'LLM-Infrastruktur' : 'LLM Infrastructure',
      items: de
        ? ['120B Modell auf OVH via LiteLLM (OpenAI-kompatibel)', '1000B Modell auf SysEleven (BSI-zertifiziert)', 'Isolierte Namespaces pro Kunde · Keine US-Provider', 'BGE-M3 Embedding lokal · Lazy Model Loading']
        : ['120B model on OVH via LiteLLM (OpenAI-compatible)', '1000B model on SysEleven (BSI-certified)', 'Isolated namespaces per customer · No US providers', 'BGE-M3 embedding local · Lazy model loading'],
    },
  ]

  return (
    <div>
      <FadeInView className="text-center mb-5">
        <p className="text-xs font-mono text-indigo-400/60 uppercase tracking-widest mb-2">
          {de ? 'Anhang' : 'Appendix'}
        </p>
        <h2 className="text-4xl md:text-5xl font-bold mb-2">
          <GradientText>{i.annex.aipipeline.title}</GradientText>
        </h2>
        <p className="text-lg text-white/50 max-w-2xl mx-auto">{i.annex.aipipeline.subtitle}</p>
      </FadeInView>

      {/* Hero Stats */}
      <FadeInView delay={0.1}>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-2 mb-4">
          {heroStats.map((stat, idx) => (
            <div key={idx} className="border border-white/[0.08] rounded-xl p-2.5 bg-white/[0.03] text-center">
              <p className={`text-2xl font-black tracking-tight ${stat.color}`}>{stat.value}</p>
              <p className="text-[11px] font-semibold text-white/70">{stat.label}</p>
              <p className="text-[9px] text-white/30 mt-0.5 leading-tight">{stat.sub}</p>
            </div>
          ))}
        </div>
      </FadeInView>

      {/* Tab Navigation */}
      <FadeInView delay={0.15}>
        <div className="flex items-center justify-center gap-2 mb-4">
          {tabs.map((tab) => {
            const Icon = tab.icon
            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`flex items-center gap-2 px-4 py-2 rounded-xl text-sm transition-all
                  ${activeTab === tab.id
                    ? 'bg-indigo-500/20 text-indigo-300 border border-indigo-500/30'
                    : 'bg-white/[0.04] text-white/40 border border-transparent hover:text-white/60 hover:bg-white/[0.06]'
                  }`}
              >
                <Icon className="w-4 h-4" />
                {tab.label}
              </button>
            )
          })}
        </div>
      </FadeInView>

      {/* Tab Content */}
      <FadeInView delay={0.2} key={activeTab}>
        {activeTab === 'rag' && (
          <div>
            {/* Pipeline Flow Visualization */}
            <div className="flex items-center justify-center gap-1 mb-4 flex-wrap">
              {[
                { icon: FileText, label: '38+ PDFs' },
                { icon: Layers, label: 'QA + Chunking' },
                { icon: Cpu, label: 'BGE-M3' },
                { icon: Database, label: '6 Collections' },
                { icon: Search, label: 'Hybrid Search' },
                { icon: Brain, label: '120B / 1000B' },
              ].map((step, idx, arr) => (
                <div key={idx} className="flex items-center gap-1">
                  <div className="flex items-center gap-1 px-2 py-1 rounded-lg bg-white/[0.05] border border-white/[0.08]">
                    <step.icon className="w-3 h-3 text-indigo-400" />
                    <span className="text-[10px] text-white/50">{step.label}</span>
                  </div>
                  {idx < arr.length - 1 && <ArrowRight className="w-3 h-3 text-white/20" />}
                </div>
              ))}
            </div>
            {/* Pipeline Steps */}
            <div className="grid md:grid-cols-2 gap-3">
              {ragPipelineSteps.map((step, idx) => {
                const Icon = step.icon
                return (
                  <div key={idx} className={`border rounded-xl p-3 ${step.bg}`}>
                    <div className="flex items-center gap-2 mb-2">
                      <Icon className={`w-4 h-4 ${step.color}`} />
                      <h3 className="text-xs font-bold text-white">{step.title}</h3>
                    </div>
                    <ul className="space-y-1">
                      {step.items.map((item, iidx) => (
                        <li key={iidx} className="flex items-start gap-1.5 text-[11px] text-white/50">
                          <span className={`w-1 h-1 rounded-full mt-1.5 ${step.color} bg-current shrink-0`} />
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                )
              })}
            </div>
          </div>
        )}

        {activeTab === 'agents' && (
          <div className="grid md:grid-cols-12 gap-4">
            {/* Agent List */}
            <div className="md:col-span-7">
              <GlassCard hover={false} className="p-4">
                <div className="flex items-center gap-2 mb-3">
                  <Bot className="w-4 h-4 text-white/40" />
                  <p className="text-xs font-semibold text-white/40 uppercase tracking-wider">
                    {de ? 'Compliance-Engines' : 'Compliance Engines'}
                  </p>
                </div>
                <div className="grid grid-cols-2 gap-2">
                  {agents.map((agent, idx) => (
                    <div key={idx} className="p-2 rounded-lg bg-white/[0.03] border border-white/5">
                      <div className="flex items-center gap-1.5 mb-1">
                        <div className={`w-1.5 h-1.5 rounded-full ${agent.color} bg-current`} />
                        <p className="text-xs font-bold text-white/80">{agent.name}</p>
                      </div>
                      <p className="text-[10px] text-white/40 leading-tight">{agent.desc}</p>
                      <p className="text-[9px] font-mono text-white/25 mt-1">{agent.soul}</p>
                    </div>
                  ))}
                </div>
              </GlassCard>
            </div>
            {/* Agent Infrastructure */}
            <div className="md:col-span-5">
              <GlassCard hover={false} className="p-4 h-full">
                <div className="flex items-center gap-2 mb-3">
                  <Network className="w-4 h-4 text-white/40" />
                  <p className="text-xs font-semibold text-white/40 uppercase tracking-wider">
                    {de ? 'Infrastruktur' : 'Infrastructure'}
                  </p>
                </div>
                <div className="space-y-2.5">
                  {agentInfra.map((inf, idx) => {
                    const Icon = inf.icon
                    return (
                      <div key={idx} className="flex items-start gap-2.5">
                        <div className="w-7 h-7 rounded-lg bg-purple-500/10 border border-purple-500/20 flex items-center justify-center shrink-0">
                          <Icon className="w-3.5 h-3.5 text-purple-400" />
                        </div>
                        <div>
                          <p className="text-xs font-semibold text-white/70">{inf.label}</p>
                          <p className="text-[10px] text-white/40">{inf.desc}</p>
                        </div>
                      </div>
                    )
                  })}
                </div>
                <div className="mt-3 pt-3 border-t border-white/5">
                  <p className="text-[10px] text-white/20">
                    {de
                      ? 'Wahrheit = Regeln + Evidenz · LLM = Uebersetzer + Subsumtions-Helfer · 100% EU-Cloud'
                      : 'Truth = Rules + Evidence · LLM = Translator + Subsumption Helper · 100% EU Cloud'}
                  </p>
                </div>
              </GlassCard>
            </div>
          </div>
        )}

        {activeTab === 'quality' && (
          <div className="grid md:grid-cols-2 gap-3">
            {qaFeatures.map((feat, idx) => {
              const Icon = feat.icon
              return (
                <GlassCard key={idx} hover={false} className="p-3">
                  <div className="flex items-center gap-2 mb-2">
                    <Icon className={`w-4 h-4 ${feat.color}`} />
                    <h3 className="text-xs font-bold text-white">{feat.title}</h3>
                  </div>
                  <ul className="space-y-1">
                    {feat.items.map((item, iidx) => (
                      <li key={iidx} className="flex items-start gap-1.5 text-[11px] text-white/50">
                        <span className={`w-1 h-1 rounded-full mt-1.5 ${feat.color} bg-current shrink-0`} />
                        {item}
                      </li>
                    ))}
                  </ul>
                </GlassCard>
              )
            })}
          </div>
        )}
      </FadeInView>
    </div>
  )
}