'use client'

import { motion } from 'framer-motion'
import { Language } from '@/lib/types'
import GradientText from '../ui/GradientText'
import FadeInView from '../ui/FadeInView'
import { Brain, GraduationCap, ClipboardCheck, Scale, Bell, Database, MessageSquare, Archive } from 'lucide-react'

interface AnnexAgentArchSlideProps {
  lang: Language
}

export default function AnnexAgentArchSlide({ lang }: AnnexAgentArchSlideProps) {
  const agents = [
    {
      name: lang === 'de' ? 'Tutor Agent' : 'Tutor Agent',
      icon: GraduationCap,
      color: 'text-blue-400',
      position: 'col-start-1 row-start-1'
    },
    {
      name: lang === 'de' ? 'Grader Agent' : 'Grader Agent',
      icon: ClipboardCheck,
      color: 'text-green-400',
      position: 'col-start-3 row-start-1'
    },
    {
      name: lang === 'de' ? 'Quality Judge' : 'Quality Judge',
      icon: Scale,
      color: 'text-purple-400',
      position: 'col-start-1 row-start-3'
    },
    {
      name: lang === 'de' ? 'Alert Agent' : 'Alert Agent',
      icon: Bell,
      color: 'text-amber-400',
      position: 'col-start-3 row-start-3'
    }
  ]

  const features = [
    {
      icon: Archive,
      title: lang === 'de' ? 'Session Management' : 'Session Management',
      desc: lang === 'de' ? 'Persistent state, auto-recovery, checkpoints' : 'Persistent state, auto-recovery, checkpoints'
    },
    {
      icon: Database,
      title: lang === 'de' ? 'Shared Brain' : 'Shared Brain',
      desc: lang === 'de' ? 'Long-term memory, knowledge graph, context sharing' : 'Long-term memory, knowledge graph, context sharing'
    },
    {
      icon: MessageSquare,
      title: lang === 'de' ? 'Message Bus' : 'Message Bus',
      desc: lang === 'de' ? 'Real-time inter-agent communication, priority routing' : 'Real-time inter-agent communication, priority routing'
    }
  ]

  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' ? 'Compliance Agent Architektur' : 'Compliance Agent Architecture'}
            </GradientText>
          </h2>
          <p className="text-xl text-white/60">
            {lang === 'de' ? 'Multi-Agent System für autonome Compliance' : 'Multi-agent system for autonomous compliance'}
          </p>
        </div>
      </FadeInView>

      {/* Agent Architecture Diagram */}
      <FadeInView delay={0.2}>
        <div className="mb-12 grid grid-cols-3 grid-rows-3 gap-4 max-w-4xl mx-auto">
          {/* Top agents */}
          {agents.slice(0, 2).map((agent, idx) => (
            <motion.div
              key={agent.name}
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.3 + idx * 0.1 }}
              className={`${agent.position} bg-white/[0.04] border border-white/[0.06] rounded-xl p-4 text-center`}
            >
              <agent.icon className={`w-10 h-10 mx-auto mb-2 ${agent.color}`} />
              <h3 className="text-sm font-semibold text-white/90">{agent.name}</h3>
            </motion.div>
          ))}

          {/* Center Orchestrator */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.5 }}
            className="col-start-2 row-start-2 bg-gradient-to-br from-indigo-500/20 to-purple-500/20 border-2 border-indigo-400/30 rounded-xl p-6 text-center relative"
          >
            <Brain className="w-12 h-12 mx-auto mb-2 text-indigo-400" />
            <h3 className="text-lg font-bold text-white">Orchestrator</h3>
            <p className="text-xs text-white/60 mt-1">
              {lang === 'de' ? 'Koordiniert alle Agents' : 'Coordinates all agents'}
            </p>

            {/* Connection lines */}
            <div className="absolute -top-4 left-1/2 w-0.5 h-4 bg-indigo-400/30" />
            <div className="absolute -bottom-4 left-1/2 w-0.5 h-4 bg-indigo-400/30" />
            <div className="absolute -left-4 top-1/2 h-0.5 w-4 bg-indigo-400/30" />
            <div className="absolute -right-4 top-1/2 h-0.5 w-4 bg-indigo-400/30" />
          </motion.div>

          {/* Bottom agents */}
          {agents.slice(2, 4).map((agent, idx) => (
            <motion.div
              key={agent.name}
              initial={{ opacity: 0, scale: 0.8 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ delay: 0.6 + idx * 0.1 }}
              className={`${agent.position} bg-white/[0.04] border border-white/[0.06] rounded-xl p-4 text-center`}
            >
              <agent.icon className={`w-10 h-10 mx-auto mb-2 ${agent.color}`} />
              <h3 className="text-sm font-semibold text-white/90">{agent.name}</h3>
            </motion.div>
          ))}
        </div>
      </FadeInView>

      {/* Features */}
      <FadeInView delay={0.8}>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          {features.map((feature, idx) => (
            <motion.div
              key={feature.title}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.9 + idx * 0.1 }}
              className="bg-white/[0.04] border border-white/[0.06] rounded-xl p-4"
            >
              <feature.icon className="w-8 h-8 text-indigo-400 mb-3" />
              <h3 className="text-lg font-semibold text-white/90 mb-2">{feature.title}</h3>
              <p className="text-sm text-white/60">{feature.desc}</p>
            </motion.div>
          ))}
        </div>
      </FadeInView>
    </div>
  )
}