"use client";

import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { skillsData } from "@/data/service/skillsData";

export default function SkillsSection() {
  const [isVisible, setIsVisible] = useState(false);
  const progressRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        if (entry.isIntersecting) {
          setIsVisible(true);
          observer.disconnect();
        }
      },
      {
        threshold: 0.1,
      },
    );

    const currentRef = progressRef.current;

    if (currentRef) {
      observer.observe(currentRef);
    }

    return () => {
      if (currentRef) {
        observer.unobserve(currentRef);
      }
    };
  }, []);

  useEffect(() => {
    if (isVisible) {
      const progressElements = document.querySelectorAll(
        ".fill",
      ) as NodeListOf<HTMLElement>;
      const duration = 1000; // 2 seconds total duration

      progressElements.forEach((progressElement) => {
        const targetWidth = progressElement.getAttribute("data-width")!;
        let currentWidth = 0;
        const increment = parseFloat(targetWidth) / (duration / 16); // 60fps animation

        const animate = () => {
          currentWidth += increment;

          if (currentWidth < parseFloat(targetWidth)) {
            progressElement.style.width = `${currentWidth}%`;
            requestAnimationFrame(animate);
          } else {
            progressElement.style.width = targetWidth;
          }
        };

        // Start from 0 width
        progressElement.style.width = "0%";
        animate();
      });
    }
  }, [isVisible]);

  return (
    <section className="skills-sec space">
      <div className="carousel-container">
        <div className="row">
          <div className="col-lg-6">
            <div
              className="skills-img"
              data-aos="fade-right"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              <Image
                src={skillsData.skillsImage.src}
                alt={skillsData.skillsImage.alt}
                width={600}
                height={400}
              />
            </div>
          </div>
          <div className="col-lg-6">
            <div
              className="skill-content"
              data-aos="fade-left"
              data-aos-duration={900}
              data-aos-delay={300}
            >
              <div className="sec-title">
                <span className="sub-title">{skillsData.subTitle}</span>
                <h2 className="title">{skillsData.title}</h2>
                <p>{skillsData.description}</p>
              </div>
              <div className="progress-box" ref={progressRef}>
                {skillsData.progressItems.map((skill, index) => (
                  <div className="progress-item" key={index}>
                    <div className="top">
                      <span>{skill.label}</span>
                      <span>{skill.percentage}%</span>
                    </div>
                    <div className="bar">
                      <div
                        className="fill"
                        data-width={`${skill.percentage}%`}
                      />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}