"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import { motion, AnimatePresence } from "motion/react";
import { projects, filters } from "@/data/projects";
import { VideoPreview } from "@/components/media/VideoPreview";

export function PortfolioGrid({ limit }: { limit?: number }) {
  const [filter, setFilter] = useState<(typeof filters)[number]>("ALL");

  const filtered = useMemo(() => {
    const result = filter === "ALL"
      ? projects
      : projects.filter((p) => p.tags.some((tag) => tag.toUpperCase() === filter));
    return limit ? result.slice(0, limit) : result;
  }, [filter, limit]);

  return (
    <div>
      <div className="portfolio-filters" role="tablist" aria-label="Portfolio filters">
        {filters.map((item) => (
          <button
            key={item}
            className={filter === item ? "is-active" : ""}
            onClick={() => setFilter(item)}
            role="tab"
            aria-selected={filter === item}
          >
            {item}
          </button>
        ))}
      </div>

      <motion.div layout className="portfolio-grid">
        <AnimatePresence mode="popLayout">
          {filtered.map((project, index) => (
            <motion.article
              layout
              key={project.slug}
              className={`portfolio-item portfolio-item--${index % 5}`}
              initial={{ opacity: 0, y: 28 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.96 }}
              transition={{ duration: 0.45, delay: index * 0.035 }}
            >
              <Link href={`/work/${project.slug}`} data-cursor="VIEW" className="portfolio-item__link">
                <div className={`portfolio-item__media ${project.orientation === "portrait" ? "is-portrait" : ""}`}>
                  <VideoPreview
                    src={project.previewVideo}
                    poster={project.thumbnail}
                    hoverPlay
                    label="VIEW"
                    autoPlay={false}
                  />
                </div>
                <div className="portfolio-item__meta">
                  <div>
                    <h3>{project.title}</h3>
                    <p>{project.client}</p>
                  </div>
                  <div className="portfolio-item__right">
                    <span>{project.category}</span>
                    <span>{project.year}</span>
                  </div>
                </div>
              </Link>
            </motion.article>
          ))}
        </AnimatePresence>
      </motion.div>
    </div>
  );
}