sixth march

// pages/SlotMachine.tsx
import React, { useState, useEffect, useRef } from 'react';
import '../styles/mainslot.css';
import { Header } from '../components/Header';
import Reel from '../components/Reel';
import { GameButton } from '../components/GameButton';
import Registration from './Registration';
import spinSound from '../assets/audio/slot.mp3';
import axiosInstance from '../utils/axiosInstance';
import { GameConfig } from '../index';

interface SlotImage {
  id: number;
  image_path: string;
  section_number: number;
}

const SlotMachine: React.FC<GameConfig> = ({
  gameTitle = '',
  titleColor = '',
  backgroundImage = '',
  reelBorder = '',
  buttonBackgroundColor = '',
  buttonTextColor = '',
}) => {
  const [reels, setReels] = useState<string[][]>([]);
  const [isSoundOn, setIsSoundOn] = useState(true);
  const [slotImages, setSlotImages] = useState<SlotImage[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [isSpinning, setIsSpinning] = useState(false);
  const [completedReels, setCompletedReels] = useState(0);
  const [isRegistrationOpen, setIsRegistrationOpen] = useState(false);
  const [spinCombination, setSpinCombination] = useState<string | null>(null);
  const [spinResult, setSpinResult] = useState<'win' | 'loss' | null>(null);
  const [spinKey, setSpinKey] = useState(0);

  const spinAudioRef = useRef(new Audio(spinSound));
  const baseSpinDuration = 2000;
  const delayBetweenStops = 600;
  const DEFAULT_SLOT_COUNT = 3;

  useEffect(() => {
    spinAudioRef.current.loop = true;

    const fetchImages = async () => {
      try {
        const response = await axiosInstance.get('/api/slot/images');
        if (response.data.status && response.data.data.images.length > 0) {
          const images = response.data.data.images;
          setSlotImages(images);
          // Log slotImages details after setting state
          console.log('Slot Images fetched from API:', images);
        } else {
          throw new Error(response.data.message || 'Failed to fetch images');
        }
      } catch (error) {
        console.error('Error fetching slot images:', error);
        setError('Error fetching slot images');
        setIsRegistrationOpen(true);
      }
    };

    fetchImages();
    setReels(Array.from({ length: DEFAULT_SLOT_COUNT }, () => []));
  }, []);

  const handleSpin = () => {
    if (!isSpinning) {
      setIsRegistrationOpen(true);
      setSpinResult(null);
    }
  };

  const handleRegistrationSubmit = (
    username: string,
    phone: string,
    eligible: boolean,
    combination: string,
    result: string,
  ) => {
    console.log('handleRegistrationSubmit:', { username, phone, eligible, combination, result });
    if (eligible) {
      setSpinCombination(combination);
      setSpinResult(result as 'win' | 'loss');
      setIsSpinning(true);
      setCompletedReels(0);
      setIsRegistrationOpen(false);
      setSpinKey((prev) => prev + 1);
      if (isSoundOn) spinAudioRef.current.play();
    }
  };

  useEffect(() => {
    if (completedReels === reels.length && isSpinning) {
      setIsSpinning(false);
      if (isSoundOn) {
        spinAudioRef.current.pause();
        spinAudioRef.current.currentTime = 0;
      }
      setTimeout(() => {
        setIsRegistrationOpen(true);
      }, 3500);
    }
  }, [completedReels, reels.length, isSpinning]);

  const handleReelComplete = () => {
    setCompletedReels((prev) => prev + 1);
  };

  const toggleSound = () => {
    setIsSoundOn((prev) => {
      if (!prev && isSpinning) spinAudioRef.current.play();
      else spinAudioRef.current.pause();
      return !prev;
    });
  };

  // console.log('SlotMachine backgroundImage:', backgroundImage); // Debug

  return (
    <div className="slot-machine">
      <div
        id="framework-center"
        style={{
          backgroundImage: `url(${backgroundImage})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat',
        }}
      >
        <div className="game-title" style={{ color: titleColor }}>
          <Header gameTitle={gameTitle} titleColor={titleColor} />
        </div>
        <div className="control-buttons-container">
          <GameButton variant="sound" isActive={isSoundOn} onClick={toggleSound} />
        </div>
        <div className="reels-container" style={{ borderColor: reelBorder }}>
          {reels.map((_, index) => {
            const targetId = spinCombination ? parseInt(spinCombination[index] || '0') : -1;
            return (
              <Reel
                key={`${index}-${spinKey}`}
                slotImages={slotImages}
                isSpinning={isSpinning}
                spinDuration={baseSpinDuration + index * delayBetweenStops}
                onSpinComplete={handleReelComplete}
                targetId={targetId}
                reelBorder={reelBorder}
              />
            );
          })}
        </div>
        <div className="spin-container">
          <div className="spin-button-wrapper">
            <GameButton
              variant="spin"
              onClick={handleSpin}
              disabled={isSpinning}
              buttonBackgroundColor={buttonBackgroundColor}
              buttonTextColor={buttonTextColor}
              reelBorder={reelBorder}
            />
          </div>
        </div>
      </div>
      <Registration
        isOpen={isRegistrationOpen}
        setIsOpen={setIsRegistrationOpen}
        onSubmit={handleRegistrationSubmit}
        spinResult={isSpinning ? null : spinResult}
        error={error}
      />
    </div>
  );
};

export default SlotMachine;