"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";

const categories = ["All", "Web Development", "Mobile Apps", "UX/UI Design", "Data & AI"];

const allProjects = [
    {
        title: "FinTech Dashboard",
        category: "UX/UI Design",
        description: "A comprehensive financial dashboard providing real-time data visualization and secure transaction management for enterprise clients.",
        image: "/images/portfolio/fintech-dashboard.png",
        link: "/portfolio/case-study"
    },
    {
        title: "E-Commerce Platform",
        category: "Web Development",
        description: "A headless commerce solution delivering unmatched speed and seamless shopping experiences across all devices and platforms.",
        image: "/images/portfolio/ecommerce-platform.png",
        link: "/portfolio/case-study"
    },
    {
        title: "Data Analytics Tool",
        category: "Data & AI",
        description: "An advanced analytics tool turning complex datasets into actionable insights with interactive charts and custom reporting.",
        image: "/images/portfolio/data-analytics.png",
        link: "/portfolio/case-study"
    },
    {
        title: "Telehealth App",
        category: "Mobile Apps",
        description: "A secure, HIPAA-compliant mobile application connecting patients with healthcare professionals for virtual consultations.",
        image: "/images/portfolio/telehealth-app.png",
        link: "/portfolio/case-study"
    },
    {
        title: "AI Chatbot Assistant",
        category: "Data & AI",
        description: "An intelligent conversational agent trained on custom enterprise data to automate customer support efficiently.",
        image: "/images/portfolio/ecommerce-platform.png",
        link: "/portfolio/case-study"
    },
    {
        title: "SaaS Management Portal",
        category: "Web Development",
        description: "A robust admin portal for SaaS platforms offering user management, billing, and system monitoring.",
        image: "/images/portfolio/fintech-dashboard.png",
        link: "/portfolio/case-study"
    }
];

export default function PortfolioList() {
    const [activeCategory, setActiveCategory] = useState("All");

    const filteredProjects = activeCategory === "All"
        ? allProjects
        : allProjects.filter(project => project.category === activeCategory);

    return (
        <section className="py-20 lg:py-28 bg-light-bg relative">
            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8">

                {/* Filters */}
                <div className="flex flex-wrap items-center justify-center gap-2 mb-16 gsap-fade-up">
                    {categories.map((category) => (
                        <button
                            key={category}
                            onClick={() => setActiveCategory(category)}
                            className={`px-6 py-2.5 rounded-full text-sm font-semibold transition-all duration-300 ${activeCategory === category
                                    ? "bg-primary text-white shadow-glow-green"
                                    : "bg-white text-text-muted hover:text-text-main border border-border-light hover:border-primary/30 shadow-sm"
                                }`}
                        >
                            {category}
                        </button>
                    ))}
                </div>

                {/* Grid */}
                {filteredProjects.length > 0 ? (
                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 gsap-stagger">
                        {filteredProjects.map((project, index) => (
                            <div key={index} className="card-modern group flex flex-col h-full rounded-[2rem] overflow-hidden bg-white shadow-card hover:shadow-hover transition-all duration-300">
                                {/* Image Container */}
                                <Link href={project.link} className="relative aspect-[4/3] w-full block overflow-hidden bg-neutral-bg">
                                    <Image
                                        src={project.image}
                                        alt={project.title}
                                        fill
                                        className="object-cover transition-transform duration-700 group-hover:scale-105"
                                        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                                    />
                                    {/* Overlay */}
                                    <div className="absolute inset-0 bg-dark-bg/10 group-hover:bg-dark-bg/0 transition-colors duration-500 z-10"></div>
                                    {/* Category Badge Floating */}
                                    <div className="absolute top-4 left-4 z-20">
                                        <span className="bg-white/90 backdrop-blur-md text-text-main px-3 py-1 rounded-full text-[11px] font-bold tracking-wide shadow-sm">
                                            {project.category}
                                        </span>
                                    </div>
                                </Link>

                                {/* Content */}
                                <div className="p-6 lg:p-8 flex flex-col flex-grow">
                                    <h3 className="text-xl font-bold text-text-main mb-3 group-hover:text-primary transition-colors">
                                        <Link href={project.link}>{project.title}</Link>
                                    </h3>
                                    <p className="text-text-muted text-sm lg:text-base mb-6 flex-grow leading-relaxed line-clamp-3">
                                        {project.description}
                                    </p>

                                    <div className="mt-auto pt-5 border-t border-border-light relative overflow-hidden">
                                        <Link
                                            href={project.link}
                                            className="inline-flex items-center gap-2 text-sm font-bold text-text-main group-hover:text-primary transition-colors"
                                        >
                                            View Case Study
                                            <span className="material-symbols-outlined text-[20px] transform group-hover:translate-x-1 transition-transform">
                                                arrow_right_alt
                                            </span>
                                        </Link>
                                    </div>
                                </div>
                            </div>
                        ))}
                    </div>
                ) : (
                    <div className="text-center py-20">
                        <h3 className="text-2xl font-bold text-text-main mb-4">No projects found.</h3>
                        <p className="text-text-muted">Check back later or try a different category.</p>
                    </div>
                )}
            </div>
        </section>
    );
}
