import { motion } from "framer-motion";
import { 
  SiReact, 
  SiNodedotjs, 
  SiTypescript, 
  SiJavascript, 
  SiTailwindcss,
  SiPostgresql,
  SiGit,
  SiGithub,
  SiOpenai,
  SiExpress,
  SiSupabase,
  SiNetlify,
} from "react-icons/si";
import { Brain, Zap } from "lucide-react";

const SkillsSection = () => {
  const skillCategories = [
    {
      title: "Frontend",
      skills: [
        { name: "React", icon: SiReact, level: 95, color: "from-white to-gray-300" },
        { name: "Vite", icon: Zap, level: 90, color: "from-purple-400 to-purple-600" },
        { name: "TypeScript", icon: SiTypescript, level: 85, color: "from-white to-gray-400" },
        { name: "JavaScript", icon: SiJavascript, level: 90, color: "from-yellow-400 to-yellow-600" },
        { name: "Tailwind CSS", icon: SiTailwindcss, level: 95, color: "from-cyan-400 to-teal-500" },
      ],
    },
    {
      title: "Backend",
      skills: [
        { name: "Node.js", icon: SiNodedotjs, level: 90, color: "from-green-400 to-green-600" },
        { name: "Express", icon: SiExpress, level: 85, color: "from-gray-400 to-gray-600" },
        { name: "PostgreSQL", icon: SiPostgresql, level: 80, color: "from-white to-gray-400" },
        { name: "Supabase", icon: SiSupabase, level: 85, color: "from-green-400 to-emerald-500" },
      ],
    },
    {
      title: "Tools & AI",
      skills: [
        { name: "OpenAI API", icon: SiOpenai, level: 85, color: "from-green-400 to-emerald-500" },
        { name: "DeepSeek API", icon: Brain, level: 85, color: "from-blue-400 to-indigo-500" },
        { name: "Git & GitHub", icon: SiGithub, level: 90, color: "from-gray-400 to-gray-700" },
        { name: "Netlify", icon: SiNetlify, level: 85, color: "from-cyan-400 to-teal-500" },
      ],
    },
  ];

  return (
    <section id="skills" className="py-16 sm:py-20 md:py-24 px-4 sm:px-6 lg:px-12 relative overflow-hidden bg-[#0a0a0a]" aria-label="Skills section">
      {/* Animated background */}
      <div className="absolute inset-0 grid-pattern opacity-30" />
      <div className="absolute top-0 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl animate-float" />
      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-secondary/10 rounded-full blur-3xl animate-float" style={{ animationDelay: "2s" }} />

      <div className="container max-w-7xl mx-auto relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
            Tech <span className="text-gradient">Stack</span>
          </h2>
          <div className="w-24 h-1 bg-gradient-to-r from-transparent via-primary to-transparent mx-auto rounded-full mb-4 sm:mb-6" />
          <p className="text-muted-foreground max-w-2xl mx-auto text-base sm:text-lg px-4">
            Technologies and tools I use to bring ideas to life
          </p>
        </motion.div>

        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
          {skillCategories.map((category, categoryIndex) => (
            <motion.div
              key={category.title}
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-50px" }}
              transition={{ duration: 0.5, delay: 0.1 * categoryIndex }}
              className="glass-card rounded-2xl p-4 sm:p-6 hover:border-primary/50 transition-all duration-300"
            >
              <div className="mb-6">
                <h3 className="text-xl font-semibold text-primary">
                {category.title}
              </h3>
              </div>
              <div className="space-y-6">
                {category.skills.map((skill, skillIndex) => (
                  <SkillItem 
                    key={skill.name}
                    skill={skill} 
                    index={skillIndex + categoryIndex * 5}
                  />
                ))}
              </div>
            </motion.div>
          ))}
        </div>

        {/* Tech badges grid */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.6, delay: 0.3 }}
          className="mt-16"
        >
          <h3 className="text-xl sm:text-2xl font-semibold text-center mb-6 sm:mb-8">
            All <span className="text-gradient">Technologies</span>
          </h3>
          <div className="flex flex-wrap gap-3 sm:gap-4 justify-center px-4">
            {skillCategories.flatMap(cat => cat.skills).map((skill, index) => (
              <TechBadge key={`${skill.name}-${index}`} skill={skill} index={index} />
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

// Skill progress item
const SkillItem = ({ skill, index }: { skill: any; index: number }) => {
  const Icon = skill.icon;
  
  return (
    <motion.div
      initial={{ opacity: 0, x: -20 }}
      whileInView={{ opacity: 1, x: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.4, delay: 0.05 * index }}
      className="group"
    >
      <div className="flex items-center justify-between mb-2">
        <div className="flex items-center gap-2">
          <Icon className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
          <span className="font-medium text-sm">{skill.name}</span>
        </div>
        <span className="text-muted-foreground text-xs">{skill.level}%</span>
      </div>
      <div className="h-2 bg-muted rounded-full overflow-hidden relative">
        <motion.div
          initial={{ width: 0 }}
          whileInView={{ width: `${skill.level}%` }}
          viewport={{ once: true }}
          transition={{ duration: 1, delay: 0.2 + 0.1 * index, ease: "easeOut" }}
          className="h-full bg-gradient-to-r from-white to-gray-200 rounded-full relative overflow-hidden"
        >
          <motion.div
            animate={{
              backgroundPosition: ["0% 50%", "100% 50%", "0% 50%"],
            }}
            transition={{
              duration: 2,
              repeat: Infinity,
              ease: "linear",
            }}
            className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent"
            style={{
              backgroundSize: "200% 100%",
            }}
          />
        </motion.div>
      </div>
    </motion.div>
  );
};

// Tech badge component
const TechBadge = ({ skill, index }: { skill: any; index: number }) => {
  const Icon = skill.icon;
  
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.8 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      transition={{ delay: 0.05 * index, type: "spring", bounce: 0.5 }}
      className="flex items-center gap-3"
    >
      <Icon className="h-8 w-8 text-white" />
      <span className="font-medium text-sm text-muted-foreground">{skill.name}</span>
    </motion.div>
  );
};

export default SkillsSection;