"use client";
import { useState, SetStateAction, useEffect } from "react";
import Image from "next/legacy/image";
import Link from "next/link";
import { AnimatePresence, motion } from "framer-motion";
import { getValidImageUrl, getValidImageAlt, FALLBACK_IMAGES } from "@/lib/imageUtils";
import PostFilterButtons from "./PostFilterButtons";

const PostFilterItems = () => {
  const [active, setActive] = useState("all");
  
  // Static blog posts data
  const allPosts = [
    {
      id: 1,
      title: "Enterprise Software Development Best Practices",
      content: "Learn about the latest best practices in enterprise software development...",
      slug: "enterprise-software-development-best-practices",
      author_id: 1,
      category_id: 1,
      thumbnail: "/images/blog/one.png",
      published: true,
      category_title: "Development",
      category_slug: "development",
      author_name: "John Smith",
      created_at: "2024-01-15T10:00:00Z",
      updated_at: "2024-01-15T10:00:00Z"
    },
    {
      id: 2,
      title: "API Integration Strategies for Modern Enterprises",
      content: "Discover effective strategies for API integration in enterprise environments...",
      slug: "api-integration-strategies-modern-enterprises",
      author_id: 1,
      category_id: 2,
      thumbnail: "/images/blog/two.png",
      published: true,
      category_title: "Integration",
      category_slug: "integration",
      author_name: "Jane Doe",
      created_at: "2024-01-10T14:30:00Z",
      updated_at: "2024-01-10T14:30:00Z"
    },
    {
      id: 3,
      title: "Cloud Migration: A Complete Guide",
      content: "Everything you need to know about migrating your enterprise to the cloud...",
      slug: "cloud-migration-complete-guide",
      author_id: 1,
      category_id: 3,
      thumbnail: "/images/blog/three.png",
      published: true,
      category_title: "Cloud",
      category_slug: "cloud",
      author_name: "Mike Johnson",
      created_at: "2024-01-05T09:15:00Z",
      updated_at: "2024-01-05T09:15:00Z"
    },
    {
      id: 4,
      title: "Digital Transformation in Enterprise",
      content: "How digital transformation is reshaping enterprise operations...",
      slug: "digital-transformation-enterprise",
      author_id: 1,
      category_id: 1,
      thumbnail: "/images/blog/four.png",
      published: true,
      category_title: "Development",
      category_slug: "development",
      author_name: "Sarah Wilson",
      created_at: "2024-01-01T16:45:00Z",
      updated_at: "2024-01-01T16:45:00Z"
    }
  ];
  
  const [displayData, setDisplayData] = useState(allPosts);

  const handleCategoryClick = (category: SetStateAction<string>) => {
    if (category === active) return;
    setActive(category);
    setDisplayData([]);

    if (category === "all") {
      setDisplayData(allPosts);
      return;
    }

    const filteredData = allPosts.filter(
      (item) => item.category_slug === category
    );

    setTimeout(() => {
      setDisplayData(filteredData);
    }, 600);
  };


  return (
    <>
      <PostFilterButtons active={active} handleClick={handleCategoryClick} />
      <motion.div className="row mt-60 masonry-grid" layout>
        <AnimatePresence>
          {displayData.slice(0, 8).map((item) => {
            return (
              <motion.div
                className="col-12 col-lg-6 grid-item-main"
                key={item.id}
                layout
                initial={{ opacity: 0, scale: 0.6 }}
                animate={{ opacity: 1, scale: 1 }}
                exit={{ opacity: 0, scale: 0.6 }}
                transition={{ duration: 0.6 }}
              >
                <div className="tp-lp-slider__single topy-tilt">
                  <div className="thumb mb-24">
                    <Link
                      href={`/blog/${item.slug}`}
                      className="w-100 overflow-hidden d-block"
                     >
                      <div className="parallax-image-wrap">
                        <div className="parallax-image-inner">
                          <Image
                            src={getValidImageUrl(item.thumbnail, FALLBACK_IMAGES.BLOG)}
                            className="w-100 mh-220 parallax-image"
                            alt={getValidImageAlt(item.title)}
                            width={400}
                            height={220}
                          />
                        </div>
                      </div>
                    </Link>
                  </div>
                  <div className="content">
                    <div className="tp-lp-post__meta mb-24 mt-8">
                      <p className="author text-xs text-tertiary">
                        {item.author_name || 'Admin'}
                      </p>
                      <span></span>
                      <p className="date text-xs text-tertiary">
                        {new Date(item.created_at).toLocaleDateString('en-US', {
                          day: 'numeric',
                          month: 'short',
                          year: 'numeric'
                        })}
                      </p>
                    </div>
                    <h5 className="mt-8 fw-5 text-secondary">
                      <Link href={`/blog/${item.slug}`}>{item.title}</Link>
                    </h5>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </AnimatePresence>
      </motion.div>
    </>
  );
};

export default PostFilterItems;
