// CountdownCircle.tsx
'use client'

import React, { useEffect, useState } from "react";

interface CountdownCircleProps {
  value: number;       // current counter (pl. 15 -> 0)
  max: number;         // maximum value (pl. 15)
  size?: number;       // diameter in px
  strokeWidth?: number; // stroke width
  color?: string;      // progress color
  bgColor?: string;    // background circle color
}

const CountdownCircle: React.FC<CountdownCircleProps> = ({
  value,
  max,
  size = 80,
  strokeWidth = 8,
  color,
}) => {
  const radius = (size - strokeWidth) / 2;
  const circumference = 2 * Math.PI * radius;
  const progress = circumference * (1 - value / max);

  const ratio = value / max;
  const r = Math.round(255 * (1 - ratio));
  const g = Math.round(255 * ratio);
  const strokeColor = color ?? `rgb(${r}, ${g}, 0)`;

  const [displayValue, setDisplayValue] = useState(value);
  const [prevValue, setPrevValue] = useState<number | null>(null);
  const [animating, setAnimating] = useState(false);

  const digits = displayValue.toString().split('');
  const prevDigits = prevValue?.toString().split('');

  useEffect(() => {
    if (value === displayValue) return;

    setPrevValue(displayValue);
    setDisplayValue(value);
    setAnimating(true);

    const timeout = setTimeout(() => {
      setAnimating(false);
      setPrevValue(null);
    }, 300);

    return () => clearTimeout(timeout);
  }, [value]);


  return (
    <div className="relative flex justify-center items-center" style={{ width: size, height: size }}>
      <svg className="absolute -rotate-90" width={size} height={size}>
        {/* Background circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke={strokeColor}
          strokeWidth={strokeWidth}
          fill="transparent"
        />
        {/* Progress circle */}
        <circle
          cx={size / 2}
          cy={size / 2}
          r={radius}
          stroke={"#D9D9D9"}
          strokeWidth={strokeWidth}
          fill="transparent"
          strokeDasharray={circumference}
          strokeDashoffset={progress}
          strokeLinecap="round"
          className="transition-all duration-300"
        />
      </svg>

      {/* Centered text */}
      {/* <p className="text-4xl font-bold z-10 text-center">{value}</p> */}
      <div className="flex items-center justify-center h-10 w-full overflow-hidden">
        {digits.map((digit, i) => {
          const prevDigit = prevDigits?.[i];

          const shouldAnimate =
            animating &&
            prevDigit !== undefined &&
            digit !== prevDigit;

          return (
            <div key={i} className="relative w-5.5 h-full overflow-hidden">
              {/* Régi szám */}
              {shouldAnimate && (
                <span className="absolute inset-0 flex items-center justify-center text-4xl font-bold leading-none num-out text-neutral-100">
                  {prevDigit}
                </span>
              )}

              {/* Új szám */}
              <span
                className={`absolute inset-0 flex items-center justify-center text-4xl font-bold leading-none text-neutral-100 ${shouldAnimate ? 'num-in' : ''
                  }`}
              >
                {digit}
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CountdownCircle;