"use client";

import { useRef } from "react";
import { motion, useInView } from "framer-motion";
import {
  SiNextdotjs,
  SiReact,
  SiTypescript,
  SiTailwindcss,
  SiFramer,
  SiNestjs,
  SiNodedotjs,
  SiExpress,
  SiPostgresql,
  SiMongodb,
  SiRedis,
  SiPrisma,
  SiDocker,
  SiGit,
  SiGithub,
  SiLinux,
  SiTypeorm,
  SiRedbull,
} from "react-icons/si";

// Note: If react-icons is not installed, replace with text-based badges
// npm install react-icons

const categories = [
  {
    label: "Frontend",
    color: "from-blue-500/20 to-cyan-500/10",
    borderColor: "border-blue-500/20",
    iconColor: "text-blue-400",
    tech: [
      { name: "Next.js", Icon: SiNextdotjs },
      { name: "React", Icon: SiReact },
      { name: "TypeScript", Icon: SiTypescript },
      { name: "Tailwind CSS", Icon: SiTailwindcss },
      { name: "Framer Motion", Icon: SiFramer },
    ],
  },
  {
    label: "Backend",
    color: "from-emerald-500/20 to-teal-500/10",
    borderColor: "border-emerald-500/20",
    iconColor: "text-emerald-400",
    tech: [
      { name: "NestJS", Icon: SiNestjs },
      { name: "Node.js", Icon: SiNodedotjs },
      { name: "Express", Icon: SiExpress },
      { name: "BullMQ", Icon: SiRedbull },
    ],
  },
  {
    label: "Database",
    color: "from-orange-500/20 to-amber-500/10",
    borderColor: "border-orange-500/20",
    iconColor: "text-orange-400",
    tech: [
      { name: "PostgreSQL", Icon: SiPostgresql },
      { name: "MongoDB", Icon: SiMongodb },
      { name: "Redis", Icon: SiRedis },
      { name: "Prisma ORM", Icon: SiPrisma },
      { name: "TypeORM", Icon: SiTypeorm },
    ],
  },
  {
    label: "DevOps",
    color: "from-purple-500/20 to-violet-500/10",
    borderColor: "border-purple-500/20",
    iconColor: "text-purple-400",
    tech: [
      { name: "Docker", Icon: SiDocker },
      { name: "Git", Icon: SiGit },
      { name: "GitHub", Icon: SiGithub },
      { name: "Linux", Icon: SiLinux },
    ],
  },
];

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1, delayChildren: 0.1 },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } },
};

export function TechStackSection() {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-100px" });

  return (
    <section id="stack" className="py-5 lg:py-32 relative">
      <div className="max-w-6xl mx-auto px-6">
        {/* Header */}
        <div className="text-center mb-16">
          <motion.span
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            className="text-accent font-mono text-sm tracking-widest uppercase"
          >
            Technology
          </motion.span>
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.1 }}
            className="font-display font-bold text-4xl md:text-5xl text-foreground mt-3"
          >
            My Tech Stack
          </motion.h2>
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="text-foreground-muted mt-4 max-w-xl mx-auto"
          >
            Battle-tested tools and frameworks I use to build production systems
          </motion.p>
        </div>

        {/* Grid */}
        <motion.div
          ref={ref}
          variants={containerVariants}
          initial="hidden"
          animate={isInView ? "visible" : "hidden"}
          className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"
        >
          {categories.map((category) => (
            <motion.div
              key={category.label}
              variants={itemVariants}
              className={`p-6 rounded-2xl bg-gradient-to-br ${category.color} border ${category.borderColor} hover:shadow-glow transition-all duration-300 group`}
            >
              <h3
                className={`font-display font-semibold text-sm tracking-widest uppercase mb-5 ${category.iconColor}`}
              >
                {category.label}
              </h3>
              <div className="space-y-3">
                {category.tech.map((item) => {
                  const Icon = item.Icon;
                  return (
                    <div
                      key={item.name}
                      className="flex items-center gap-3 p-2.5 rounded-xl bg-background/30 hover:bg-background/60 transition-all duration-200 group/item cursor-default"
                    >
                      <Icon
                        size={18}
                        className={`${category.iconColor} group-hover/item:scale-110 transition-transform flex-shrink-0`}
                      />
                      <span className="text-sm text-foreground-muted group-hover/item:text-foreground transition-colors font-medium">
                        {item.name}
                      </span>
                    </div>
                  );
                })}
              </div>
            </motion.div>
          ))}
        </motion.div>
      </div>
    </section>
  );
}
