"use client";
import Image from "next/image";
import React, { useEffect, useRef, useState } from "react";
import SlotCounter, { SlotCounterRef } from "react-slot-counter";
import { useMediaQuery } from "usehooks-ts";

interface LotterySlotCounterProps {
  numberString: string;
  startNumber: string;
}

const LotterySlotCounter = ({
  numberString,
  startNumber,
}: LotterySlotCounterProps) => {
  const [formattedNumber, setFormattedNumber] = useState("00,00,00,00,00");
  const slotCounterRef = useRef<SlotCounterRef>(null); // Ref for manual control
  const isFirstRender = useRef(true); // Ref to track the initial render

  const mobile = useMediaQuery("(max-width: 426px)");

  useEffect(() => {
    const formatted = numberString.replace(/-/g, ",");
    setFormattedNumber(formatted);

    // Skip animation on the first render
    if (isFirstRender.current) {
      isFirstRender.current = false; // Mark as no longer the first render
      return;
    }

    // Trigger animation manually when numberString changes
    if (slotCounterRef.current) {
      slotCounterRef.current.startAnimation();
    }
  }, [numberString]);

  return (
    <div className="relative w-fit">
      {mobile ? (
        <Image
          src="/roller-triangle-sm.svg"
          alt="roller-triangle"
          width={24}
          height={24}
          className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2/3 z-20"
        />
      ) : (
        <Image
          src="/roller-triangle.svg"
          alt="roller-triangle"
          width={48}
          height={48}
          className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-1/2 z-20"
        />
      )}

      {mobile ? (
        <Image
          src="/roller-triangle-sm.svg"
          alt="roller-triangle"
          width={24}
          height={24}
          className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-2/3 z-20 rotate-180"
        />
      ) : (
        <Image
          src="/roller-triangle.svg"
          alt="roller-triangle"
          width={48}
          height={48}
          className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-1/2 z-20 rotate-180"
        />
      )}

      <div
        className="flex items-center h-fit md:max-w-[1132px] sm:max-w-[640px] max-w-[400px] w-full justify-center text-white min-[1025px]:py-4 md:px-6 rounded-full overflow-y-hidden overflow-x-visible relative border-4 border-lightPrimary"
        style={{
          background:
            "linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)",
          boxShadow: "0px 4px 4px 0px #00000040",
        }}
      >
        {/* Highlight */}
        <div
          className="absolute top-[50%] -translate-y-1/2 left-0 w-full h-full"
          style={{
            background:
              "linear-gradient(180deg, rgba(87, 89, 146, 0) 0%, #7274AB 50%, rgba(87, 89, 146, 0) 100%)",
          }}
        ></div>

        <div className="z-10">
          <SlotCounter
            ref={slotCounterRef}
            value={formattedNumber}
            startValue={startNumber}
            charClassName="rolling-number"
            separatorClassName="slot-seperator"
            duration={3}
            speed={6}
            delay={3}
            startFromLastDigit
            animateUnchanged
            autoAnimationStart={false}
            animateOnVisible={false}
          />
        </div>
      </div>
    </div>
  );
};

export default LotterySlotCounter;