import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { ExternalLink } from 'lucide-react';

gsap.registerPlugin(ScrollTrigger);

const Portfolio = () => {
  const sectionRef = useRef<HTMLElement>(null);
  const titleRef = useRef<HTMLDivElement>(null);
  const gridRef = useRef<HTMLDivElement>(null);
  const [activeFilter, setActiveFilter] = useState('All');

  const filters = ['All', 'Web Development', 'SaaS', 'E-commerce', 'WordPress'];

  const projects = [
    {
      title: 'E-Commerce Platform',
      description: 'Modern online shopping experience with seamless checkout',
      category: 'E-commerce',
      image: '/images/portfolio-ecommerce.jpg',
    },
    {
      title: 'SaaS Dashboard',
      description: 'Analytics dashboard for business intelligence',
      category: 'SaaS',
      image: '/images/portfolio-saas.jpg',
    },
    {
      title: 'Corporate Website',
      description: 'Professional company presence with modern design',
      category: 'Web Development',
      image: '/images/portfolio-corporate.jpg',
    },
    {
      title: 'Blog Platform',
      description: 'Content management system with editorial features',
      category: 'WordPress',
      image: '/images/portfolio-blog.jpg',
    },
    {
      title: 'Restaurant Booking',
      description: 'Table reservation system with real-time availability',
      category: 'Web Development',
      image: '/images/portfolio-restaurant.jpg',
    },
    {
      title: 'Real Estate Portal',
      description: 'Property listing platform with advanced search',
      category: 'E-commerce',
      image: '/images/portfolio-realestate.jpg',
    },
  ];

  const filteredProjects = activeFilter === 'All' 
    ? projects 
    : projects.filter(p => p.category === activeFilter);

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Title animation
      gsap.fromTo(
        titleRef.current,
        { y: 30, opacity: 0 },
        {
          y: 0,
          opacity: 1,
          duration: 0.6,
          ease: 'expo.out',
          scrollTrigger: {
            trigger: titleRef.current,
            start: 'top 80%',
            toggleActions: 'play none none reverse',
          },
        }
      );

      // Cards animation
      const cards = gridRef.current?.querySelectorAll('.portfolio-card');
      if (cards) {
        gsap.fromTo(
          cards,
          { scale: 0.9, opacity: 0 },
          {
            scale: 1,
            opacity: 1,
            duration: 0.6,
            stagger: 0.1,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: gridRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

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

  // Animate cards when filter changes
  useEffect(() => {
    const cards = gridRef.current?.querySelectorAll('.portfolio-card');
    if (cards) {
      gsap.fromTo(
        cards,
        { scale: 0.9, opacity: 0 },
        {
          scale: 1,
          opacity: 1,
          duration: 0.4,
          stagger: 0.08,
          ease: 'expo.out',
        }
      );
    }
  }, [activeFilter]);

  return (
    <section
      id="portfolio"
      ref={sectionRef}
      className="relative py-20 sm:py-28"
    >
      <div className="section-padding">
        <div className="container-max">
          {/* Section Header */}
          <div ref={titleRef} className="text-center mb-12">
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-4 font-['Outfit']">
              <span className="text-white">Our Creative</span>{' '}
              <span className="gradient-text">Portfolio</span>
            </h2>
            <p className="text-[#94a3b8] text-base sm:text-lg max-w-2xl mx-auto mb-8">
              A showcase of our best work in custom web development, SaaS, and E-commerce solutions.
            </p>

            {/* Filter Tabs */}
            <div className="flex flex-wrap justify-center gap-2 sm:gap-3">
              {filters.map((filter) => (
                <button
                  key={filter}
                  onClick={() => setActiveFilter(filter)}
                  className={`px-4 sm:px-6 py-2 rounded-full text-sm font-medium transition-all duration-300 ${
                    activeFilter === filter
                      ? 'bg-gradient-to-r from-[#3b6aff] to-[#8b5cf6] text-white'
                      : 'bg-white/5 text-[#94a3b8] hover:bg-white/10 hover:text-white'
                  }`}
                >
                  {filter}
                </button>
              ))}
            </div>
          </div>

          {/* Projects Grid */}
          <div
            ref={gridRef}
            className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"
          >
            {filteredProjects.map((project, i) => (
              <div
                key={i}
                className="portfolio-card group relative overflow-hidden rounded-2xl bg-[#0a0f1e] border border-white/10 hover:border-[#3b6aff]/30 transition-all duration-500"
                style={{ transformStyle: 'preserve-3d' }}
              >
                {/* Image */}
                <div className="relative aspect-[4/3] overflow-hidden">
                  <img
                    src={project.image}
                    alt={project.title}
                    className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                  />
                  
                  {/* Overlay */}
                  <div className="absolute inset-0 bg-gradient-to-t from-[#050714] via-[#050714]/50 to-transparent opacity-60 group-hover:opacity-80 transition-opacity duration-500" />
                  
                  {/* Category Badge */}
                  <div className="absolute top-4 left-4 px-3 py-1 rounded-full bg-[#3b6aff]/80 backdrop-blur-sm text-xs text-white font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    {project.category}
                  </div>
                </div>

                {/* Content */}
                <div className="p-5">
                  <h3 className="text-lg font-semibold text-white mb-2 font-['Outfit'] group-hover:text-[#3b6aff] transition-colors">
                    {project.title}
                  </h3>
                  <p className="text-sm text-[#94a3b8] mb-4">
                    {project.description}
                  </p>
                  
                  {/* Link */}
                  <a
                    href="#contact"
                    className="inline-flex items-center gap-2 text-sm text-[#3b6aff] hover:text-white transition-colors"
                  >
                    View Project
                    <ExternalLink size={14} />
                  </a>
                </div>

                {/* Hover Glow */}
                <div className="absolute -inset-2 bg-gradient-to-r from-[#3b6aff]/20 to-[#8b5cf6]/20 rounded-3xl opacity-0 group-hover:opacity-100 blur-xl transition-opacity duration-500 -z-10" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Portfolio;