import { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import {
  Activity,
  Rocket,
  CheckCircle2,
  ExternalLink,
  Terminal,
  Globe,
  Lock,
  Database,
} from "lucide-react";
import { useReducedMotion } from "../hooks/useReducedMotion";

gsap.registerPlugin(ScrollTrigger);

const activeProjects = [
  {
    title: "Seraph C2",
    description:
      "Full fledged, interactive, post-exploitation C2 system with AI-support, E2EE, evasion, cross-platform featuring and large scaled exfiltration features.",
    icon: Terminal,
    tags: ["Security Research", "AI", "E2EE"],
    status: "LIVE",
  },
  {
    title: "AnonPay (tocador.app-style)",
    description:
      "Payment gateway that allows paying in hundreds of different cryptocurrencies whilst still receiving only one by utilizing multiple swap aggregators and joining different, rotating wallet pools.",
    icon: Globe,
    tags: ["Crypto", "Finance", "Payments"],
    status: "LIVE",
  },
  {
    title: "kippenkartell.cc",
    description:
      "Dockerized Premium SaaS marketplace platform with a clean monorepo architecture: SvelteKit frontend, Rust REST API, MySQL database.",
    icon: Database,
    tags: ["SaaS", "SvelteKit", "Rust"],
    status: "N/A",
  },
  {
    title: "spying.su",
    description:
      "Discord, Social Media & Breach Data Aggregation and Web Intelligence Platform.",
    icon: Lock,
    tags: ["OSINT", "Data", "Intelligence"],
    status: "N/A",
  },
];

const plannedProjects = [
  {
    title: "webforum",
    description:
      "Suitable & simple breachforum's & WPD-style webforum for anonymous media submission, role assignment systems, localized restriction control & community/topic merging, additionally private chats & E2EE secured chats.",
  },
  {
    title: "porn page",
    description:
      "A webforum/archive & user-control system for manageable, quick, fast & secure access/uploading to/of pornography media.",
  },
  {
    title: "vpn-protocol",
    description:
      "Low-level interface VPN protocol featuring extremely tiny binary & lightweight byte transmitting using NDISAPI (curve25519 -> serpent(threefish512)).",
  },
];

const completedProjects = [
  {
    title: "Cryptography Library",
    description:
      "A threefish512 (customized padding & improved security) implementation in D based off a russian barebones cryptographic algorithm & a ported shamir's secret sharing implementation in python with a bridger written in C.",
    link: "https://git.fingeri.ng/whiskers/cryptography",
  },
];

export default function ProjectsSection() {
  const sectionRef = useRef<HTMLElement>(null);
  const reducedMotion = useReducedMotion();

  useEffect(() => {
    if (reducedMotion || !sectionRef.current) return;

    const ctx = gsap.context(() => {
      gsap.fromTo(
        ".project-reveal",
        { y: 50, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.9,
          stagger: 0.12,
          ease: "expo.out",
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top 70%",
            toggleActions: "play none none none",
          },
        },
      );
    }, sectionRef);

    return () => ctx.revert();
  }, [reducedMotion]);

  return (
    <section
      id="projects"
      ref={sectionRef}
      className="relative py-32 md:py-40 px-6"
    >
      <div className="max-w-6xl mx-auto">
        {/* Section label */}
        <div className="project-reveal flex items-center gap-4 mb-16">
          <span className="text-pink-brand font-mono text-xs tracking-[0.3em] uppercase">
            003
          </span>
          <div className="flex-1 h-px bg-pink-brand/20" />
          <span className="text-grey-500 font-display text-xs tracking-[0.2em] uppercase">
            Projects
          </span>
        </div>

        {/* Active Projects */}
        <div className="mb-24">
          <div className="project-reveal flex items-center gap-3 mb-10">
            <Activity className="w-5 h-5 text-pink-brand" />
            <h3 className="font-display text-xl md:text-2xl font-medium text-grey-900">
              Active
            </h3>
            <span className="px-2 py-0.5 rounded-full bg-pink-brand/10 text-pink-brand text-xs font-mono">
              {activeProjects.length}
            </span>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {activeProjects.map((project) => (
              <div
                key={project.title}
                className="project-reveal group p-6 md:p-8 rounded-2xl bg-skin-100/40 border border-pink-brand/5 hover:border-pink-brand/20 hover:bg-skin-100/80 transition-all duration-500 hover:shadow-xl hover:shadow-pink-brand/5"
              >
                <div className="flex items-start justify-between mb-4">
                  <div className="p-3 rounded-xl bg-pink-brand/10 text-pink-brand group-hover:bg-pink-brand group-hover:text-white transition-all duration-300">
                    <project.icon className="w-5 h-5" />
                  </div>
                  <span className="flex items-center gap-1.5 text-xs font-mono text-pink-brand">
                    <span className="w-1.5 h-1.5 rounded-full bg-pink-brand animate-pulse" />
                    {project.status}
                  </span>
                </div>
                <h4 className="font-display text-lg font-medium text-grey-900 mb-3 group-hover:text-pink-brand transition-colors">
                  {project.title}
                </h4>
                <p className="text-grey-500 text-sm leading-relaxed font-body mb-4">
                  {project.description}
                </p>
                <div className="flex flex-wrap gap-2">
                  {project.tags.map((tag) => (
                    <span
                      key={tag}
                      className="px-2 py-1 rounded-md text-xs font-mono text-grey-600 bg-skin-200/50"
                    >
                      {tag}
                    </span>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Planned Projects */}
        <div className="mb-24">
          <div className="project-reveal flex items-center gap-3 mb-10">
            <Rocket className="w-5 h-5 text-pink-soft" />
            <h3 className="font-display text-xl md:text-2xl font-medium text-grey-900">
              Planned
            </h3>
            <span className="px-2 py-0.5 rounded-full bg-pink-soft/10 text-pink-soft text-xs font-mono">
              {plannedProjects.length}
            </span>
          </div>

          <div className="space-y-4">
            {plannedProjects.map((project, i) => (
              <div
                key={project.title}
                className="project-reveal group flex gap-6 p-6 rounded-2xl bg-skin-100/30 border border-pink-brand/5 hover:border-pink-brand/15 hover:bg-skin-100/60 transition-all duration-300"
              >
                <span className="font-mono text-2xl text-pink-brand/30 group-hover:text-pink-brand/60 transition-colors">
                  {String(i + 1).padStart(2, "0")}
                </span>
                <div>
                  <h4 className="font-display text-base font-medium text-grey-900 mb-2 group-hover:text-pink-brand transition-colors">
                    {project.title}
                  </h4>
                  <p className="text-grey-500 text-sm leading-relaxed font-body">
                    {project.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Completed Projects */}
        <div>
          <div className="project-reveal flex items-center gap-3 mb-10">
            <CheckCircle2 className="w-5 h-5 text-grey-500" />
            <h3 className="font-display text-xl md:text-2xl font-medium text-grey-900">
              Completed
            </h3>
          </div>

          <div className="grid grid-cols-1 gap-4">
            {completedProjects.map((project) => (
              <a
                key={project.title}
                href={project.link}
                target="_blank"
                rel="noopener noreferrer"
                className="project-reveal group flex items-start justify-between gap-4 p-6 rounded-2xl bg-skin-100/30 border border-pink-brand/5 hover:border-pink-brand/20 hover:bg-skin-100/60 transition-all duration-300"
              >
                <div>
                  <h4 className="font-display text-base font-medium text-grey-900 mb-2 group-hover:text-pink-brand transition-colors">
                    {project.title}
                  </h4>
                  <p className="text-grey-500 text-sm leading-relaxed font-body">
                    {project.description}
                  </p>
                </div>
                <ExternalLink className="w-5 h-5 text-grey-400 group-hover:text-pink-brand flex-shrink-0 transition-colors" />
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}