"use client";

import Image from "next/image";
import { useEffect, useRef, useState } from "react";
import { singleTeamSkillDescription, singleTeamSkills } from "@/data/singleTeam";

const TeamSkillsSection = () => {
  const skillsRef = useRef<HTMLDivElement | null>(null);
  const canvasRefs = useRef<Array<HTMLCanvasElement | null>>([]);
  const [animatedSkillPercents, setAnimatedSkillPercents] = useState<number[]>(
    () => singleTeamSkills.map(() => 0)
  );

  useEffect(() => {
    const observerTarget = skillsRef.current;
    if (!observerTarget) return;

    let animationFrameId: number | null = null;
    const duration = 1200;
    let hasAnimated = false;

    const observer = new IntersectionObserver(
      (entries) => {
        const entry = entries[0];
        if (!entry?.isIntersecting || hasAnimated) return;

        hasAnimated = true;
        const startTime = performance.now();

        const animate = (now: number) => {
          const elapsed = now - startTime;
          const progress = Math.min(elapsed / duration, 1);

          setAnimatedSkillPercents(
            singleTeamSkills.map((skill) => Math.round(skill.percent * progress))
          );

          if (progress < 1) {
            animationFrameId = window.requestAnimationFrame(animate);
          }
        };

        animationFrameId = window.requestAnimationFrame(animate);
      },
      { threshold: 0.3 }
    );

    observer.observe(observerTarget);

    return () => {
      observer.disconnect();
      if (animationFrameId) {
        window.cancelAnimationFrame(animationFrameId);
      }
    };
  }, []);

  useEffect(() => {
    canvasRefs.current.forEach((canvas, index) => {
      if (!canvas) return;

      const ctx = canvas.getContext("2d");
      if (!ctx) return;

      const size = 130;
      const center = size / 2;
      const radius = center - 6;
      const currentPercent = animatedSkillPercents[index] ?? 0;
      const angle = (Math.PI * 2 * currentPercent) / 100;

      ctx.clearRect(0, 0, size, size);

      ctx.beginPath();
      ctx.strokeStyle = "#d5d5d5";
      ctx.lineWidth = 4;
      ctx.arc(center, center, radius, 0, Math.PI * 2);
      ctx.stroke();

      ctx.beginPath();
      ctx.strokeStyle = "#B9FB6A";
      ctx.lineWidth = 4;
      ctx.arc(center, center, radius, -Math.PI / 2, -Math.PI / 2 + angle);
      ctx.stroke();
    });
  }, [animatedSkillPercents]);

  return (
    <div className="skill-contnent">
      <h3
        className="title2"
        data-aos="fade-up"
        data-aos-duration={900}
        data-aos-delay={300}
      >
        Skills
      </h3>
      <p data-aos="fade-up" data-aos-duration={900} data-aos-delay={400}>
        {singleTeamSkillDescription}
      </p>
      <div ref={skillsRef} className="progress-counter">
        <div className="row">
          {singleTeamSkills.map((skill, index) => (
            <div key={skill.id} className="col-lg-4 col-md-4 col-sm-4">
              <div
                className="progress-circle"
                data-color="#B9FB6A"
                data-percent={animatedSkillPercents[index] ?? 0}
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={skill.delay}
              >
                <div className="progress-circle__inner">
                  <div className="progress-circle__content">
                    <span className="percent">
                      {animatedSkillPercents[index] ?? 0}
                      <span className="percent-unit">%</span>
                    </span>
                  </div>
                  <canvas
                    ref={(el) => {
                      canvasRefs.current[index] = el;
                    }}
                    width={130}
                    height={130}
                  />
                </div>
                <h4 className="progress-title">{skill.title}</h4>
              </div>
            </div>
          ))}
        </div>
      </div>
      <form
        className="contact-form"
        data-aos="fade-up"
        data-aos-duration={900}
        data-aos-delay={400}
      >
        <h2 className="title">Need Any Helps? Say Hello</h2>
        <div className="row">
          <div className="col-lg-6">
            <div className="form-group">
              <input type="text" placeholder="Your Name" />
            </div>
          </div>
          <div className="col-lg-6">
            <div className="form-group">
              <input type="text" placeholder="phone number" />
            </div>
          </div>
          <div className="col-lg-12">
            <div className="form-group">
              <input type="email" placeholder="Email Address" required={true} />
            </div>
          </div>
          <div className="col-lg-12">
            <div className="form-group">
              <textarea placeholder="Your Message" defaultValue={""} />
            </div>
          </div>
          <div className="col-lg-8">
            <div className="form-group mb-0">
              <button type="submit" className="btn-style1">
                Send Message Us
                <span>
                  <Image
                    src="/assets/images/icon/arrow.svg"
                    alt="Arrow Icon"
                    width={14}
                    height={14}
                  />
                </span>
              </button>
            </div>
          </div>
        </div>
      </form>
    </div>
  );
};

export default TeamSkillsSection;