import { useState } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { Copy, Check, Terminal } from "lucide-react"
import { GradientText, FadeIn } from "@/components/ui/magicui"
import { cn } from "@/lib/utils"

const codeExamples = [
  {
    id: "get",
    title: "Quick Docs Fetch",
    description: "Instantly fetch documentation for popular languages",
    language: "bash",
    code: `# Fetch Go HTTP package docs
devour get go http

# Fetch Python asyncio docs
devour get python asyncio

# Fetch React hooks documentation
devour get react hooks

# With markdown output
devour get docker compose --format markdown`,
  },
  {
    id: "scrape",
    title: "Scrape Sources",
    description: "Scrape documentation from multiple sources",
    language: "bash",
    code: `# Scrape from a URL
devour scrape https://docs.example.com

# Scrape a GitHub repo
devour scrape https://github.com/org/repo

# Scrape local docs
devour scrape ./docs

# Multiple sources
devour scrape --sources sources.yaml`,
  },
  {
    id: "query",
    title: "Query Context",
    description: "Search indexed documentation with semantic search",
    language: "bash",
    code: `# Search indexed docs
devour query "How do I authenticate with the API?"

# With options
devour query "authentication" --limit 5 --format json

# With similarity threshold
devour query "server setup" --threshold 0.7`,
  },
  {
    id: "serve",
    title: "Start Server",
    description: "Run as MCP server for AI integration",
    language: "bash",
    code: `# Local MCP server (stdio transport)
devour serve

# Remote MCP server (HTTP)
devour serve --remote --port 8080

# With custom config
devour serve --config ./devour.yaml`,
  },
]

export function CodeShowcase() {
  const [activeTab, setActiveTab] = useState("get")
  const [copied, setCopied] = useState(false)

  const activeExample = codeExamples.find((e) => e.id === activeTab)

  const copyToClipboard = async () => {
    if (activeExample) {
      await navigator.clipboard.writeText(activeExample.code)
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    }
  }

  return (
    <section id="code" className="relative py-24 md:py-32 overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0 bg-gradient-to-b from-background via-cyan-950/10 to-background" />

      <div className="container relative z-10 px-4 md:px-6">
        {/* Section Header */}
        <div className="text-center mb-12">
          <FadeIn>
            <h2 className="text-3xl md:text-5xl font-bold mb-4">
              Simple <GradientText>CLI</GradientText> Interface
            </h2>
          </FadeIn>
          <FadeIn delay={0.1}>
            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
              Powerful commands to manage your documentation context
            </p>
          </FadeIn>
        </div>

        <div className="max-w-4xl mx-auto">
          {/* Tabs */}
          <FadeIn delay={0.2}>
            <div className="flex flex-wrap gap-2 mb-6 justify-center">
              {codeExamples.map((example) => (
                <button
                  key={example.id}
                  onClick={() => setActiveTab(example.id)}
                  className={cn(
                    "px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200",
                    activeTab === example.id
                      ? "bg-cyan-500/20 text-cyan-400 border border-cyan-500/30"
                      : "bg-white/5 text-muted-foreground border border-white/10 hover:bg-white/10 hover:text-foreground"
                  )}
                >
                  {example.title}
                </button>
              ))}
            </div>
          </FadeIn>

          {/* Code Block */}
          <FadeIn delay={0.3}>
            <div className="relative rounded-xl border border-white/10 bg-black/40 backdrop-blur-sm overflow-hidden">
              {/* Header */}
              <div className="flex items-center justify-between px-4 py-3 border-b border-white/10 bg-white/5">
                <div className="flex items-center gap-3">
                  <div className="flex gap-1.5">
                    <div className="w-3 h-3 rounded-full bg-red-500/80" />
                    <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
                    <div className="w-3 h-3 rounded-full bg-green-500/80" />
                  </div>
                  <div className="flex items-center gap-2 text-xs text-muted-foreground">
                    <Terminal className="w-3.5 h-3.5" />
                    <span>{activeExample?.title}</span>
                  </div>
                </div>
                <button
                  onClick={copyToClipboard}
                  className="flex items-center gap-1.5 px-2 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-white/10 transition-colors"
                >
                  {copied ? (
                    <>
                      <Check className="w-3.5 h-3.5 text-green-400" />
                      <span className="text-green-400">Copied!</span>
                    </>
                  ) : (
                    <>
                      <Copy className="w-3.5 h-3.5" />
                      <span>Copy</span>
                    </>
                  )}
                </button>
              </div>

              {/* Code Content */}
              <div className="relative p-4 font-mono text-sm overflow-x-auto">
                <AnimatePresence mode="wait">
                  <motion.div
                    key={activeTab}
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    exit={{ opacity: 0, y: -10 }}
                    transition={{ duration: 0.2 }}
                  >
                    {activeExample?.code.split("\n").map((line, i) => (
                      <div key={i} className="flex">
                        <span className="select-none text-muted-foreground/30 w-8 text-right mr-4">
                          {i + 1}
                        </span>
                        <span className="flex-1">
                          {line.startsWith("#") ? (
                            <span className="text-muted-foreground">{line}</span>
                          ) : (
                            <span>
                              <span className="text-cyan-400">devour</span>
                              {line.substring(7)}
                            </span>
                          )}
                        </span>
                      </div>
                    ))}
                  </motion.div>
                </AnimatePresence>
              </div>

              {/* Description */}
              <div className="px-4 py-3 border-t border-white/10 bg-white/5">
                <p className="text-sm text-muted-foreground">
                  {activeExample?.description}
                </p>
              </div>

              {/* Glow Effect */}
              <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-cyan-500 to-transparent" />
            </div>
          </FadeIn>
        </div>
      </div>
    </section>
  )
}