"use client";

import "@/components/portfolio/portfolio-isotope.css";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import Image from "next/image";
import type Isotope from "isotope-layout";
import {
  attachDebouncedAosRefreshOnResize,
  refreshAosAfterMasonryLayout,
} from "@/components/portfolio/refreshAosAfterMasonryLayout";

import { portfolioGridItems as portfolioItems, portfolioGridFilters as filterButtons } from "@/data/portfolio";
import type { PortfolioGridFilterValue as FilterValue } from "@/data/portfolio";

const Portfolio_2_Column = () => {
  const gridRef = useRef<HTMLDivElement | null>(null);
  const isoRef = useRef<Isotope | null>(null);
  const [activeFilter, setActiveFilter] = useState<FilterValue>("*");

  useEffect(() => {
    let cancelled = false;
    let detachResize: (() => void) | undefined;

    const initIsotope = async () => {
      const grid = gridRef.current;
      if (!grid) return;

      const [{ default: IsotopeCtor }, imagesLoadedMod] = await Promise.all([
        import("isotope-layout"),
        import("imagesloaded"),
      ]);
      const imagesLoaded = imagesLoadedMod.default;

      imagesLoaded(grid, () => {
        if (cancelled) return;
        isoRef.current?.destroy();
        const iso = new IsotopeCtor(grid, {
          itemSelector: ".grid-item",
          layoutMode: "masonry",
        });
        isoRef.current = iso;
        iso.once("layoutComplete", refreshAosAfterMasonryLayout);
        detachResize = attachDebouncedAosRefreshOnResize(grid, () => cancelled);
      });
    };

    void initIsotope();

    return () => {
      cancelled = true;
      detachResize?.();
      isoRef.current?.destroy();
      isoRef.current = null;
    };
  }, []);

  const handleFilter = (filterValue: FilterValue) => {
    setActiveFilter(filterValue);
    const iso = isoRef.current;
    if (!iso) return;
    iso.once("arrangeComplete", refreshAosAfterMasonryLayout);
    iso.arrange({ filter: filterValue });
  };

  return (
    <div
      className="project-info"
      data-aos="fade-up"
      data-aos-duration={900}
      data-aos-delay={500}
    >
      <div className="filter-btns">
        {filterButtons.map((btn) => (
          <button
            key={btn.value}
            type="button"
            className={activeFilter === btn.value ? "active" : ""}
            onClick={() => handleFilter(btn.value)}
          >
            {btn.label}
          </button>
        ))}
      </div>

      <div className="masonry-grid portfolio-isotope" ref={gridRef}>
        {portfolioItems.map((item) => (
          <div
            key={item.id}
            className={`grid-item ${item.categories.join(" ")}`}
          >
            <div className="project-block">
              <div className="project-img">
                <Link href={item.href}>
                  <Image
                    src={item.img}
                    alt={item.alt}
                    width={800}
                    height={600}
                    sizes="(max-width: 768px) 100vw, 50vw"
                  />
                </Link>
              </div>
              <div className="project-content">
                <h3 className="title">
                  <Link href={item.href}>{item.title}</Link>
                </h3>
                <ul className="project-list">
                  {item.tags.map((tag, index) => (
                    <li key={index}>
                      <Link href="#">({tag})</Link>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Portfolio_2_Column;