import * as React from "react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import { motion } from "motion/react";
import { Button } from "@/components/ui/button";
import { Book, Check, Copy, Key, Terminal } from "lucide-react";

export interface DeveloperSectionProps {
  className?: string;
}

/**
 * Developer Section - 开发者体验展示
 */
export const DeveloperSection = React.memo(function DeveloperSection({ className }: DeveloperSectionProps) {
  const [copied, setCopied] = React.useState(false);

  const codeContent = `# 注册用户
curl -X POST https://api.example.com/api/v1/auth/register \\
  -H "Content-Type: application/json" \\
  -d '{
    "username": "developer",
    "email": "dev@example.com",
    "password": "secure_password"
  }'`;

  const onCopy = async () => {
    try {
      await navigator.clipboard.writeText(codeContent);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // Fallback for older browsers
      const textArea = document.createElement("textarea");
      textArea.value = codeContent;
      textArea.style.position = "fixed";
      textArea.style.left = "-9999px";
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  return (
    <section className={cn("relative z-10 w-full min-h-screen flex items-center justify-center px-6 overflow-hidden", className)}>
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute inset-0 [mask-image:linear-gradient(to_bottom,transparent,black_20%,black_80%,transparent)]">
          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] max-w-[90vw] max-h-[90vh] bg-purple-500/10 rounded-full blur-[120px] animate-pulse" />
        </div>
      </div>
      <div className="container mx-auto max-w-7xl grid lg:grid-cols-2 gap-12 lg:gap-20 items-center relative z-10">

        <motion.div
          initial={{ opacity: 0, x: -30 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8 }}
          className="order-2 lg:order-1 relative"
        >
          <div className="relative overflow-hidden rounded-xl border border-white/20 bg-black backdrop-blur-xl shadow-2xl max-w-full">
            <div className="flex items-center px-4 py-3 border-b border-white/20 w-full">
              <div className="flex-1 flex gap-2">
                <div className="w-3 h-3 rounded-full bg-[#ff5f56]" />
                <div className="w-3 h-3 rounded-full bg-[#ffbd2e]" />
                <div className="w-3 h-3 rounded-full bg-[#27c93f]" />
              </div>
              <div className="flex-none text-xs text-muted-foreground font-mono flex items-center gap-1">
                <Terminal className="w-3 h-3" />
                bash
              </div>
              <div className="flex-1" />
            </div>

            <div className="p-6 overflow-x-auto relative group">
              <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
                <Button variant="ghost" size="icon" className="h-8 w-8 text-neutral-400 hover:text-white" onClick={onCopy}>
                  {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
                </Button>
              </div>
              <pre className="text-xs sm:text-sm font-mono text-neutral-300 leading-relaxed whitespace-pre-wrap break-all sm:whitespace-pre sm:break-normal overflow-x-auto">
                <code className="block">
                  <span className="text-green-400"># 快速开始</span>{'\n'}
                  <span className="text-purple-400">curl</span> -X <span className="text-yellow-400">POST</span> <span className="text-green-400">https://api.example.com/api/v1/auth/register</span> \{'\n'}
                  {'  '}-H <span className="text-blue-400">&quot;Content-Type: application/json&quot;</span> \{'\n'}
                  {'  '}-d <span className="text-orange-400">&quot;username=dev&amp;password=***&quot;</span>
                </code>
              </pre>
            </div>
          </div>

          <div className="absolute -z-10 -bottom-10 -right-10 w-40 h-40 bg-blue-500/20 rounded-full blur-3xl animate-pulse" />
        </motion.div>

        <div className="flex flex-col justify-center space-y-8 order-1 lg:order-2">
          <motion.div
            initial={{ opacity: 0, x: 30 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-3xl md:text-5xl font-bold tracking-tight text-foreground leading-[1.1] mb-6">
              开发者友好，<br />
              极速集成上手
            </h2>
            <p className="text-muted-foreground text-lg leading-relaxed mb-8">
              标准化的 RESTful API 接口，完整的 TypeScript 类型定义，详细的文档和 Swagger UI。无论使用什么编程语言，只需几行代码，即可快速集成。
            </p>

            <ul className="space-y-4 mb-8">
              {[
                "RESTful API，语义清晰，易于理解",
                "OpenAPI / Swagger 接口文档",
                "TypeScript 类型定义，开发友好",
                "丰富的代码示例和集成指南"
              ].map((item, i) => (
                <li key={i} className="flex items-center gap-3 text-sm text-foreground/80">
                  <div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                    <Check className="w-3.5 h-3.5" />
                  </div>
                  {item}
                </li>
              ))}
            </ul>

            <div className="flex flex-wrap gap-4">
              <Link href="/docs/api">
                <Button variant="secondary" className="rounded-full text-xs hover:bg-muted-foreground/10">
                  <Book className="w-3 h-3" />
                  API 文档
                </Button>
              </Link>
            </div>
          </motion.div>
        </div>

      </div>
    </section>
  );
});