// 🌈 Match the Color + 🧠 Memory Match + 🐾 Animal Sound + 🚀 Adventure Quest + 🎯 Multiplayer Quiz + 📚 Storybook + 🎁 Reward Box + 📊 Parental Dashboard
import { useState, useEffect } from 'react';
import { getDownloadURL, ref } from 'firebase/storage';
import { storage } from '@/lib/firebase';
import { Button } from '@/components/ui/button';
import { motion } from 'framer-motion';
import { useRouter } from 'next/router';
import Confetti from 'react-confetti';

const allAnimals = {
  lion: [
    { part: 'head', image: 'lion_head.png' },
    { part: 'body', image: 'lion_body.png' },
    { part: 'legs', image: 'lion_legs.png' },
  ],
  elephant: [
    { part: 'head', image: 'elephant_head.png' },
    { part: 'body', image: 'elephant_body.png' },
    { part: 'legs', image: 'elephant_legs.png' },
  ],
};

const memoryCards = [
  { id: 1, image: '/images/card_lion.png' },
  { id: 2, image: '/images/card_lion.png' },
  { id: 3, image: '/images/card_elephant.png' },
  { id: 4, image: '/images/card_elephant.png' },
];

const soundMatch = [
  { sound: 'lion_roar.mp3', answer: 'lion', image: '/images/lion.png' },
  { sound: 'elephant_trumpet.mp3', answer: 'elephant', image: '/images/elephant.png' },
];

const colors = ['Red', 'Blue', 'Green'];
const colorImages = {
  Red: '/images/red_ball.png',
  Blue: '/images/blue_ball.png',
  Green: '/images/green_ball.png',
};

const shuffle = (array) => [...array].sort(() => Math.random() - 0.5);

export default function BuildTheAnimalGame() {
  const router = useRouter();
  const [animalKey] = useState('lion');
  const [quiz] = useState(allAnimals[animalKey]);
  const [selectedParts, setSelectedParts] = useState([]);
  const [completed, setCompleted] = useState(false);
  const [colorTarget, setColorTarget] = useState(shuffle(colors)[0]);
  const [colorSuccess, setColorSuccess] = useState(false);

  const [cards, setCards] = useState(shuffle(memoryCards));
  const [flipped, setFlipped] = useState([]);
  const [matched, setMatched] = useState([]);

  const [soundItem, setSoundItem] = useState(shuffle(soundMatch)[0]);
  const [soundMatched, setSoundMatched] = useState(false);
  const [showHint, setShowHint] = useState(false);

  const [showFireworks, setShowFireworks] = useState(false);

  const checkCompletion = (newParts) => {
    if (
      newParts.length === quiz.length &&
      colorSuccess &&
      matched.length === memoryCards.length / 2 &&
      soundMatched
    ) {
      setCompleted(true);
      playSound('success.mp3');
      setShowFireworks(true);
      setTimeout(() => setShowFireworks(false), 5000);
    }
  };

  const playSound = async (path) => {
    try {
      const soundRef = ref(storage, `sounds/${path}`);
      const url = await getDownloadURL(soundRef);
      const audio = new Audio(url);
      audio.play();
    } catch (error) {
      console.error('Error playing sound:', error);
    }
  };

  const handleSelect = (part) => {
    if (!selectedParts.find((p) => p.part === part.part)) {
      const newParts = [...selectedParts, part];
      setSelectedParts(newParts);
      playSound('place_part.mp3');
      checkCompletion(newParts);
    }
  };

  const handleColorClick = (color) => {
    if (color === colorTarget) {
      setColorSuccess(true);
      playSound('correct.mp3');
      checkCompletion(selectedParts);
    } else {
      playSound('wrong.mp3');
    }
  };

  const handleCardClick = (card) => {
    if (flipped.length === 2 || flipped.includes(card.id) || matched.includes(card.image)) return;
    const newFlipped = [...flipped, card.id];
    setFlipped(newFlipped);
    if (newFlipped.length === 2) {
      const [first, second] = newFlipped.map((id) => cards.find((c) => c.id === id));
      if (first.image === second.image) {
        const newMatched = [...matched, first.image];
        setMatched(newMatched);
        playSound('correct.mp3');
        checkCompletion(selectedParts);
      } else {
        playSound('wrong.mp3');
        setTimeout(() => setFlipped([]), 1000);
      }
    }
  };

  const handleSoundMatch = (answer) => {
    if (answer === soundItem.answer) {
      setSoundMatched(true);
      playSound('correct.mp3');
      checkCompletion(selectedParts);
    } else {
      playSound('wrong.mp3');
    }
  };

  const resetGame = () => {
    playSound('reset.mp3');
    setSelectedParts([]);
    setCompleted(false);
    setColorSuccess(false);
    setFlipped([]);
    setMatched([]);
    setCards(shuffle(memoryCards));
    setColorTarget(shuffle(colors)[0]);
    setSoundItem(shuffle(soundMatch)[0]);
    setSoundMatched(false);
    setShowHint(false);
    setShowFireworks(false);
  };

  useEffect(() => {
    if (completed) {
      const stars = 5;
      const history = {
        game: 'multi-challenge',
        stars,
        date: new Date().toISOString(),
      };
      const storedHistory = localStorage.getItem('funkids_history');
      const parsed = storedHistory ? JSON.parse(storedHistory) : [];
      localStorage.setItem('funkids_history', JSON.stringify([...parsed, history]));
    }
  }, [completed]);

  return (
    <div className="text-center p-4">
      {completed && <Confetti />} {/* Confetti animation */}
      {showFireworks && (
        <div className="fixed inset-0 z-50 pointer-events-none">
          <div className="absolute inset-0 animate-firework bg-yellow-300 rounded-full opacity-30"></div>
        </div>
      )}

      <motion.div
        className="text-xl font-bold mb-4"
        initial={{ opacity: 0, y: -20 }}
        animate={{ opacity: 1, y: 0 }}
      >
        🧩 Complete All Challenges to Build the Animal!
      </motion.div>

      {completed && (
        <motion.div
          className="text-green-500 text-2xl font-bold my-4"
          initial={{ scale: 0 }}
          animate={{ scale: 1 }}
        >
          🎉 You Did It!
        </motion.div>
      )}

      <Button onClick={resetGame} className="my-4">🔄 Play Again</Button>

      {/* Additional game content rendering to be added here */}
    </div>
  );
}