"use client";

import { useEffect, useRef } from "react";

const CustomScrollbar = () => {
  const wrapperRef = useRef<HTMLDivElement | null>(null);
  const thumbRef = useRef<HTMLDivElement | null>(null);
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    const scrollThumb = thumbRef.current;
    const scrollWrapper = wrapperRef.current;

    if (!scrollThumb || !scrollWrapper) return;

    const updateThumb = () => {
      const scrollHeight = document.documentElement.scrollHeight;
      const clientHeight = window.innerHeight;
      const scrollTop = window.scrollY;

      const maxThumbArea = clientHeight - 10;
      const thumbHeight = Math.max((clientHeight / scrollHeight) * maxThumbArea, 40);
      const thumbTop = (scrollTop / (scrollHeight - clientHeight)) * (maxThumbArea - thumbHeight) + 5;

      scrollThumb.style.height = `${thumbHeight / 16}rem`;
      scrollThumb.style.transform = `translateY(${thumbTop / 16}rem)`;
    };

    const showThumb = () => {
      if (!scrollThumb) return;
      scrollThumb.style.opacity = "1";
      if (timeoutRef.current) clearTimeout(timeoutRef.current);

      timeoutRef.current = setTimeout(() => {
        if (scrollThumb) scrollThumb.style.opacity = "0";
      }, 1000);
    };

    const onScroll = () => {
      updateThumb();
      showThumb();
    };

    updateThumb();
    window.addEventListener("scroll", onScroll);
    window.addEventListener("resize", updateThumb);

    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", updateThumb);
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
    };
  }, []);

  return (
    <div
      ref={wrapperRef}
      className="fixed right-1 top-0 bottom-0 w-[0.3125rem] bg-transparent pointer-events-none z-[9999]"
    >
      <div
        ref={thumbRef}
        className="absolute top-0 w-full h-10 bg-contigo-verde rounded-full opacity-0 transition-opacity ease-out duration-300"
      />
    </div>
  );
};

export default CustomScrollbar;