turkmentv_front/components/lottery/LotteryWinnersSection.tsx

'use client';

import { useState, useEffect, useRef } from 'react';
import { useLotteryAuth } from '@/store/useLotteryAuth';
import { LotteryWinnerDataSimplified } from '@/typings/lottery/lottery.types';
import LotteryWinnersList from './winners/LotteryWinnersList';
import LotterySlotCounter from './slotCounter/LotterySlotCounter';
import ReactConfetti from 'react-confetti';
import { useWindowSize } from 'react-use';

const WEBSOCKET_URL = 'wss://sms.turkmentv.gov.tm/ws/lottery?dst=0506';
const PING_INTERVAL = 25000;
const SLOT_COUNTER_DURATION = 20000;

const LotteryWinnersSection = () => {
  // UI States
  const [winners, setWinners] = useState<LotteryWinnerDataSimplified[]>([]);
  const [currentNumber, setCurrentNumber] = useState<string>('00-00-00-00-00');
  const [isConfettiActive, setIsConfettiActive] = useState(false);
  const [wsStatus, setWsStatus] = useState<'connecting' | 'connected' | 'error'>('connecting');
  const { width, height } = useWindowSize();
  const { lotteryData } = useLotteryAuth();
  const [isSlotCounterAnimating, setIsSlotCounterAnimating] = useState(false);
  const [pendingWinner, setPendingWinner] = useState<LotteryWinnerDataSimplified | null>(null);

  // Refs
  const wsRef = useRef<WebSocket | null>(null);
  const pingIntervalRef = useRef<NodeJS.Timeout>();
  const mountedRef = useRef(false);

  console.log(isConfettiActive, 'isConfettiActive');

  // Initialize winners from lottery data
  useEffect(() => {
    if (lotteryData?.data.winners) {
      const simplifiedWinners = lotteryData.data.winners.map((winner) => ({
        client: winner.client,
        winner_no: winner.winner_no,
        ticket: winner.ticket,
      }));
      setWinners(simplifiedWinners);
      setCurrentNumber(lotteryData.data.winners.at(-1)?.ticket || '00-00-00-00-00');
    }
  }, [lotteryData]);

  // Handle WebSocket connection
  useEffect(() => {
    mountedRef.current = true;

    const setupWebSocket = () => {
      try {
        const socket = new WebSocket(WEBSOCKET_URL);
        wsRef.current = socket;

        socket.addEventListener('open', () => {
          if (!mountedRef.current) return;
          console.log('WebSocket Connected');
          setWsStatus('connected');

          pingIntervalRef.current = setInterval(() => {
            if (socket.readyState === WebSocket.OPEN) {
              socket.send(JSON.stringify({ type: 'ping' }));
            }
          }, PING_INTERVAL);
        });

        socket.addEventListener('message', async (event) => {
          if (!mountedRef.current) return;
          console.log('Message received:', event.data);

          try {
            const newWinner = JSON.parse(event.data);
            const winnerData = {
              client: newWinner.phone,
              winner_no: newWinner.winner_no,
              ticket: newWinner.ticket,
            };

            // Start the sequence
            setIsSlotCounterAnimating(true);
            setPendingWinner(winnerData);
            setCurrentNumber(winnerData.ticket);

            // Wait for slot counter animation
            await new Promise((resolve) => setTimeout(resolve, SLOT_COUNTER_DURATION));

            setIsConfettiActive(true);
            setWinners((prev) => [...prev, winnerData]);

            // Hide confetti after 5 seconds
            // setTimeout(() => {
            //   if (mountedRef.current) {
            //     setIsConfettiActive(false);
            //     setIsSlotCounterAnimating(false);
            //     setPendingWinner(null);
            //   }
            // }, 5000);

            // Show confetti and add winner simultaneously
            if (mountedRef.current) {
              setIsConfettiActive(true);
              setWinners((prev) => [...prev, winnerData]);

              // Hide confetti after 5 seconds
              setTimeout(() => {
                if (mountedRef.current) {
                  setIsConfettiActive(false);
                  setIsSlotCounterAnimating(false);
                  setPendingWinner(null);
                }
              }, 5000);
            }
          } catch (error) {
            console.error('Error processing message:', error);
            setIsSlotCounterAnimating(false);
            setPendingWinner(null);
          }
        });

        socket.addEventListener('error', (error) => {
          if (!mountedRef.current) return;
          console.error('WebSocket Error:', error);
          setWsStatus('error');
        });

        socket.addEventListener('close', () => {
          if (!mountedRef.current) return;
          console.log('WebSocket Closed');
          setWsStatus('error');

          if (pingIntervalRef.current) {
            clearInterval(pingIntervalRef.current);
          }
        });
      } catch (error) {
        console.error('Error creating WebSocket:', error);
        setWsStatus('error');
      }
    };

    // Initial connection
    setupWebSocket();

    return () => {
      mountedRef.current = false;
      if (pingIntervalRef.current) {
        clearInterval(pingIntervalRef.current);
      }
      if (wsRef.current) {
        wsRef.current.close();
      }
    };
  }, []);

  return (
    <section>
      {wsStatus === 'error' && (
        <div className="text-red-500 text-center mb-2">
          Connection error. Please refresh the page.
        </div>
      )}

      {isConfettiActive && (
        <div className="fixed top-0 left-0 z-50">
          <ReactConfetti
            width={width}
            height={height}
            recycle={false}
            numberOfPieces={1000}
            tweenDuration={10000}
            run={true}
            colors={[
              'linear-gradient(45deg, #5D5D72, #8589DE)',
              'linear-gradient(45deg, #E1E0FF, #575992)',
              '#8589DE',
              '#575992',
              '#E1E0FF',
              '#BA1A1A',
            ]}
          />
        </div>
      )}

      <div className="container">
        <div className="flex flex-col items-center">
          <div className="-mb-[90px] z-10">
            <LotterySlotCounter numberString={currentNumber} isAnimating={isSlotCounterAnimating} />
          </div>
          <div className="flex gap-6 bg-lightPrimaryContainer rounded-[12px] flex-1 w-full items-center justify-center pt-[122px] pb-[62px]">
            <LotteryWinnersList winners={winners} />
          </div>
        </div>
      </div>
    </section>
  );
};

export default LotteryWinnersSection;