"use client";

import type { PortfolioLayout2Content } from "@/data/portfolio-layout2";
import Layout2Image from "./Layout2Image";
import { useCallback, useEffect, useRef } from "react";

const STICK_TOP_PX = 150;
const MD_BREAKPOINT = 992;

export default function Layout2PortfolioContent({
  data,
}: {
  data: PortfolioLayout2Content["portfolio"];
}) {
  const stickyRef = useRef<HTMLDivElement | null>(null);
  const rafRef = useRef<number | undefined>(undefined);

  const updateStickyState = useCallback(() => {
    const sticky = stickyRef.current;
    if (!sticky) return;

    const track = sticky.closest("[data-layout2-detail-row]");
    if (!track) return;

    if (window.innerWidth <= MD_BREAKPOINT) {
      sticky.classList.remove("is-fixed", "is-absolute");
      return;
    }

    const rect = track.getBoundingClientRect();
    const stickyHeight = sticky.offsetHeight;

    sticky.classList.remove("is-fixed", "is-absolute");

    if (rect.top > STICK_TOP_PX) {
      return;
    }

    if (rect.bottom > stickyHeight + STICK_TOP_PX + 0.5) {
      sticky.classList.add("is-fixed");
      return;
    }

    sticky.classList.add("is-absolute");
  }, []);

  useEffect(() => {
    const onScrollOrResize = () => {
      if (rafRef.current !== undefined) {
        cancelAnimationFrame(rafRef.current);
      }
      rafRef.current = window.requestAnimationFrame(() => {
        rafRef.current = undefined;
        updateStickyState();
      });
    };

    onScrollOrResize();

    window.addEventListener("scroll", onScrollOrResize, { passive: true });
    window.addEventListener("resize", onScrollOrResize);

    const sticky = stickyRef.current;
    const track = sticky?.closest("[data-layout2-detail-row]");
    const ro =
      track && "ResizeObserver" in window
        ? new ResizeObserver(onScrollOrResize)
        : null;
    if (track && ro) {
      ro.observe(track);
    }

    return () => {
      if (rafRef.current !== undefined) {
        cancelAnimationFrame(rafRef.current);
      }
      window.removeEventListener("scroll", onScrollOrResize);
      window.removeEventListener("resize", onScrollOrResize);
      ro?.disconnect();
    };
  }, [updateStickyState]);

  return (
    <div className="col-lg-6">
      <div
        ref={stickyRef}
        className="portfolio-content"
        data-aos="fade-left"
        data-aos-duration={900}
        data-aos-delay={data.contentAosDelay}
      >
        <h2 className="title">{data.title}</h2>
        <p>{data.paragraph}</p>
        <div className="client-content2">
          <div className="row">
            {data.clientMeta.map((item) => {
              const TitleTag = item.heading;
              return (
                <div key={item.id} className="col-lg-6 col-md-6 col-sm-6">
                  <div className="client-detail">
                    <span className="sub-title">{item.subTitle}</span>
                    <TitleTag className="title2">{item.title}</TitleTag>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <ul className="digital-list">
          {data.features.map((feature) => (
            <li key={feature.id}>
              <Layout2Image
                src={data.checkIconSrc}
                alt={data.checkIconAlt}
                width={data.checkIconWidth}
                height={data.checkIconHeight}
              />
              {feature.text}
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}