import { motion, useInView, useMotionValue, useTransform, animate } from "framer-motion";
import { useEffect, useMemo, useRef, useState } from "react";


type CounterProps = {
  target: number | string;
  suffix?: string;
  start: boolean;
};

function Counter({ target, suffix, start }: CounterProps) {
  const numericTarget = useMemo(() => {
    if (typeof target === "number") return target;
    const parsed = Number.parseFloat(String(target).replace(/,/g, "").replace(/[^\d.-]/g, ""));
    return Number.isFinite(parsed) ? parsed : 0;
  }, [target]);

  const count = useMotionValue(0);
  const rounded = useTransform(count, (latest) => Math.round(latest));
  const [displayValue, setDisplayValue] = useState(0);

  useEffect(() => {
    if (start) {
      count.set(0);
      const controls = animate(count, numericTarget, { duration: 4, ease: "easeOut" }); // العد بياخد اربع ثواني
      return controls.stop;
    }
  }, [count, start, numericTarget]);

  // تحديث الرقم المعروض
  useEffect(() => {
    return rounded.on("change", (latest) => setDisplayValue(latest));
  }, [rounded]);

  return (
    <span>
      {displayValue}
      {suffix}
    </span>
  );
}

export default function StatsSection({ settings, data }: { settings: any, data: any }) {
  const sectionRef = useRef(null);
  const isInView = useInView(sectionRef, { once: true });



  

  return (
    <section ref={sectionRef} className="bg-[#0B4B2A] py-16 text-white overflow-hidden">
      <div className="mx-auto w-full max-w-6xl px-6">
        <motion.h3 
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-center text-2xl font-semibold md:text-3xl lg:text-4xl"
        >
          {data.sec_3_title}
        </motion.h3>

        <div className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
          {data.sec_3_repeater.map((item: any, index: number) => (
            <div
              key={index}
              className="space-y-2 text-center"
            >
              <p className="text-3xl font-bold md:text-4xl text-[#698034]">
                <Counter target={item.value_text_1} suffix={item.value_text_2} start={isInView} />
              </p>
              <p className="text-sm font-medium uppercase tracking-wider text-gray-300">
                {item.value_text_3}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}