import { motion } from "framer-motion"
import { Database, Brain, Server, Search, RefreshCw, Globe, Github, FileJson, FolderOpen } from "lucide-react"
import { GradientText, FadeIn } from "@/components/ui/magicui"

const sources = [
  { icon: Github, label: "GitHub", color: "text-purple-400" },
  { icon: Globe, label: "Web", color: "text-blue-400" },
  { icon: FileJson, label: "OpenAPI", color: "text-green-400" },
  { icon: FolderOpen, label: "Local", color: "text-orange-400" },
]

export function Architecture() {
  return (
    <section id="architecture" className="relative py-24 md:py-32 overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0 grid-background opacity-30" />

      <div className="container relative z-10 px-4 md:px-6">
        {/* Section Header */}
        <div className="text-center mb-16">
          <FadeIn>
            <h2 className="text-3xl md:text-5xl font-bold mb-4">
              System <GradientText>Architecture</GradientText>
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              A modular architecture designed for flexibility and scalability
            </p>
          </FadeIn>
        </div>

        {/* Architecture Diagram */}
        <FadeIn delay={0.2}>
          <div className="relative max-w-4xl mx-auto">
            {/* Central Flow */}
            <div className="relative rounded-2xl border border-white/10 bg-white/5 backdrop-blur-sm p-8 md:p-12">
              {/* Data Sources */}
              <div className="flex flex-wrap justify-center gap-2 sm:gap-4 mb-6 sm:mb-8">
                {sources.map((source, i) => (
                  <motion.div
                    key={i}
                    initial={{ opacity: 0, y: 20 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    transition={{ delay: 0.3 + i * 0.1 }}
                    className="flex flex-col items-center gap-2"
                  >
                    <div className={`p-2 sm:p-3 rounded-lg bg-white/5 border border-white/10`}>
                      <source.icon className={`w-4 h-4 sm:w-5 sm:h-5 ${source.color}`} />
                    </div>
                    <span className="text-xs text-muted-foreground">{source.label}</span>
                  </motion.div>
                ))}
              </div>

              {/* Arrow Down */}
              <div className="flex justify-center mb-6">
                <motion.div
                  initial={{ scaleY: 0 }}
                  whileInView={{ scaleY: 1 }}
                  transition={{ delay: 0.5, duration: 0.3 }}
                  className="w-px h-8 bg-gradient-to-b from-cyan-500 to-transparent origin-top"
                />
              </div>

              {/* Main Components Grid */}
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4 mb-6 sm:mb-8">
                {/* Scraper */}
                <motion.div
                  whileHover={{ scale: 1.02 }}
                  className="relative p-4 rounded-xl border border-purple-500/30 bg-purple-500/5"
                >
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-lg bg-purple-500/20">
                      <Globe className="w-4 h-4 text-purple-400" />
                    </div>
                    <span className="font-semibold">Scraper</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Multi-source data extraction</p>
                  <div className="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-purple-500 to-cyan-500" />
                </motion.div>

                {/* Indexer */}
                <motion.div
                  whileHover={{ scale: 1.02 }}
                  className="relative p-4 rounded-xl border border-cyan-500/30 bg-cyan-500/5"
                >
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-lg bg-cyan-500/20">
                      <Brain className="w-4 h-4 text-cyan-400" />
                    </div>
                    <span className="font-semibold">Indexer</span>
                  </div>
                  <p className="text-xs text-muted-foreground">OpenAI embeddings generation</p>
                  <div className="absolute -left-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-purple-500 to-cyan-500" />
                  <div className="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-cyan-500 to-teal-500" />
                </motion.div>

                {/* Storage */}
                <motion.div
                  whileHover={{ scale: 1.02 }}
                  className="relative p-4 rounded-xl border border-teal-500/30 bg-teal-500/5"
                >
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-lg bg-teal-500/20">
                      <Database className="w-4 h-4 text-teal-400" />
                    </div>
                    <span className="font-semibold">Storage</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Vector DB (chromem)</p>
                  <div className="absolute -left-2 top-1/2 -translate-y-1/2 w-4 h-px bg-gradient-to-r from-cyan-500 to-teal-500" />
                </motion.div>
              </div>

              {/* Arrow Down */}
              <div className="flex justify-center mb-6">
                <motion.div
                  initial={{ scaleY: 0 }}
                  whileInView={{ scaleY: 1 }}
                  transition={{ delay: 0.7, duration: 0.3 }}
                  className="w-px h-8 bg-gradient-to-b from-teal-500 to-transparent origin-top"
                />
              </div>

              {/* Server & Query */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                {/* Server */}
                <motion.div
                  whileHover={{ scale: 1.02 }}
                  className="p-4 rounded-xl border border-green-500/30 bg-green-500/5"
                >
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-lg bg-green-500/20">
                      <Server className="w-4 h-4 text-green-400" />
                    </div>
                    <span className="font-semibold">MCP Server</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Local (stdio) or Remote (HTTP)</p>
                </motion.div>

                {/* Query */}
                <motion.div
                  whileHover={{ scale: 1.02 }}
                  className="p-4 rounded-xl border border-blue-500/30 bg-blue-500/5"
                >
                  <div className="flex items-center gap-3 mb-2">
                    <div className="p-2 rounded-lg bg-blue-500/20">
                      <Search className="w-4 h-4 text-blue-400" />
                    </div>
                    <span className="font-semibold">Query Engine</span>
                  </div>
                  <p className="text-xs text-muted-foreground">Semantic similarity search</p>
                </motion.div>
              </div>

              {/* Scheduler Badge */}
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                transition={{ delay: 0.9 }}
                className="absolute -bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-full border border-orange-500/30 bg-orange-500/10 backdrop-blur-sm"
              >
                <div className="flex items-center gap-2">
                  <RefreshCw className="w-3.5 h-3.5 text-orange-400" />
                  <span className="text-xs font-medium text-orange-400">Auto-Update Scheduler</span>
                </div>
              </motion.div>
            </div>

            {/* Output */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ delay: 1 }}
              className="mt-12 text-center"
            >
              <div className="inline-flex items-center gap-3 px-6 py-3 rounded-xl border border-cyan-500/30 bg-cyan-500/5">
                <span className="text-sm text-muted-foreground">AI Response</span>
                <span className="text-cyan-400">→</span>
                <span className="text-sm font-medium">Context Chunks</span>
              </div>
            </motion.div>
          </div>
        </FadeIn>

        {/* Data Flow Description */}
        <FadeIn delay={0.4}>
          <div className="mt-16 text-center">
            <p className="text-muted-foreground max-w-2xl mx-auto">
              <span className="text-cyan-400 font-medium">Data Flow:</span> User Query → Devour Server → 
              Embedding Generation → Vector Search → Top-K Relevant Docs → AI Response
            </p>
          </div>
        </FadeIn>
      </div>
    </section>
  )
}