import React, { useState, useEffect, useRef } from 'react';
import { Heart, Sparkles, Volume2, Music, PauseCircle, PlayCircle, AlertCircle, X } from 'lucide-react';

const animals = [
  { 
    id: 1, 
    name: 'Зайка', 
    emoji: '🐰', 
    color: 'bg-pink-100', 
    poem: 'Зайка серенький сидит и ушами шевелИт!',
    audioFileName: 'Песенки с движениями - Зайка серенький сидит.mp3'
  },
  { id: 2, name: 'Лисичка', emoji: '🦊', color: 'bg-orange-100', poem: 'Я рыжая лисичка, я Никуши сестричка! Хвостиком машу я, весело пляшу я!' },
  { id: 3, name: 'Поросенок', emoji: '🐷', color: 'bg-pink-200', poem: 'Хрю-хрю-хрю, я говорю, я Никушу так люблю! Розовое брюшко, милые ушки!' },
  { id: 4, name: 'Енот', emoji: '🦝', color: 'bg-gray-100', poem: 'Я енот-полоскун, я веселый прыгун! Лапки чисто я помыл, про Никушу не забыл!' },
  { id: 5, name: 'Гусеница', emoji: '🐛', color: 'bg-green-100', poem: 'Раз-два-три-четыре-пять, буду я сейчас шагать! Стану бабочкой цветной, полечу я за тобой!' },
  { id: 6, name: 'Ежик', emoji: '🦔', color: 'bg-yellow-100', poem: 'Ежик, ежик, весь в иголках, я живу в лесу на елках! Фуф-ты, фуф-ты, фуф-ты, фу, я Никуше помогу!' },
  { id: 7, name: 'Медуза', emoji: '🪼', color: 'bg-blue-100', poem: 'В море синем я качаюсь, и Никуше улыбаюсь! Танцую на волне, как в волшебном сне!' },
  { id: 8, name: 'Дельфин', emoji: '🐬', color: 'bg-indigo-100', poem: 'По волнам, по волнам, я плыву к своим друзьям! Я дельфинчик озорной, поиграй-ка ты со мной!' },
  { id: 9, name: 'Крабик', emoji: '🦀', color: 'bg-red-100', poem: 'Краб-краб, чики-тап, не боюсь я никого! Громко клешнями стучу, я Никушу рассмешу!' },
  { id: 10, name: 'Змейка', emoji: '🐍', color: 'bg-emerald-100', poem: 'Я змейка-красотка, быстрая походка! С-с-с, я песенку пою, Никушу радовать хочу!' },
  { id: 11, name: 'Слоник', emoji: '🐘', color: 'bg-blue-200', poem: 'Топ-топ, топает слон, шлет Никуше он поклон! Уши как два лопуха, жизнь со слоником легка!' },
  { id: 12, name: 'Жираф', emoji: '🦒', color: 'bg-amber-100', poem: 'У жирафа пятна-пятна, быть жирафом так приятно! Шею длинную тяну, до облака я достаю!' },
  { id: 13, name: 'Птичка', emoji: '🐦', color: 'bg-sky-100', poem: 'Чик-чирик, ля-ля-ля, поет птичка для тебя! Крылышками машет, над Никушей пляшет!' },
  { id: 14, name: 'Курочка', emoji: '🐔', color: 'bg-orange-50', poem: 'Ко-ко-ко, ко-ко-ко, я гуляю далеко! Зернышки ищу я, Никушу угощу я!' },
  { id: 15, name: 'Рыбка', emoji: '🐠', color: 'bg-cyan-100', poem: 'Рыбка-золотая, в озере играет! Хвостиком виляет, желанье исполняет!' },
  { id: 16, name: 'Бегемот', emoji: '🦛', color: 'bg-teal-100', poem: 'Бегемот, бегемот, у него большой живот! Громко-громко он поет, Никушу в гости он зовет!' },
  { id: 17, name: 'Улитка', emoji: '🐌', color: 'bg-orange-200', poem: 'Дом везу я на спине, очень весело же мне! Я улитка-крошка, посмотри в окошко!' },
  { id: 18, name: 'Пчелка', emoji: '🐝', color: 'bg-yellow-200', poem: 'Жу-жу-жу, жу-жу-жу, я над садиком кружу! Мед Никуше принесу, сладко-сладко угощу!' },
];

const App = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [selectedAnimal, setSelectedAnimal] = useState(null);
  const [prevAnimal, setPrevAnimal] = useState(null);
  const [isTransitioning, setIsTransitioning] = useState(false);
  const [isPlayingAudio, setIsPlayingAudio] = useState(false);
  const [audioError, setAudioError] = useState(false);
  const audioRef = useRef(null);

  useEffect(() => {
    setIsVisible(true);
    audioRef.current = new Audio();
    
    return () => {
      window.speechSynthesis.cancel();
      if (audioRef.current) {
        audioRef.current.pause();
        audioRef.current = null;
      }
    };
  }, []);

  const stopAllMedia = () => {
    window.speechSynthesis.cancel();
    setAudioError(false);
    if (audioRef.current) {
      audioRef.current.pause();
      audioRef.current.currentTime = 0;
      setIsPlayingAudio(false);
    }
  };

  const speak = (text) => {
    stopAllMedia();
    const processedText = text.replace('шевелит', 'шевелИт');
    const content = new SpeechSynthesisUtterance(processedText);
    content.lang = 'ru-RU';
    content.pitch = 1.4; 
    content.rate = 1.1;  
    window.speechSynthesis.speak(content);
  };

  const playSong = async (fileName, animal) => {
    stopAllMedia();
    setAudioError(false);
    
    if (!audioRef.current) return;

    try {
      audioRef.current.src = fileName;
      audioRef.current.load();

      audioRef.current.onended = () => setIsPlayingAudio(false);
      
      audioRef.current.onerror = () => {
        setAudioError(true);
        setIsPlayingAudio(false);
        if (animal) speak(animal.poem);
      };

      const playPromise = audioRef.current.play();
      if (playPromise !== undefined) {
        await playPromise;
        setIsPlayingAudio(true);
      }
    } catch (err) {
      setAudioError(true);
      setIsPlayingAudio(false);
      if (animal) speak(animal.poem);
    }
  };

  const handleAnimalClick = (animal) => {
    if (selectedAnimal?.id === animal.id) return;

    setPrevAnimal(selectedAnimal);
    setSelectedAnimal(animal);
    setIsTransitioning(true);

    // Сбрасываем флаг перехода после завершения анимации
    setTimeout(() => setIsTransitioning(false), 500);

    if (animal.audioFileName) {
      playSong(animal.audioFileName, animal);
    } else {
      speak(animal.poem);
    }
  };

  const handleClose = () => {
    setSelectedAnimal(null);
    setPrevAnimal(null);
    stopAllMedia();
  };

  return (
    <div className="min-h-screen bg-pink-50 font-sans text-pink-900 pb-24 selection:bg-pink-200 overflow-x-hidden">
      {/* Сетка животных */}
      <header className={`pt-12 pb-8 px-4 text-center transition-all duration-1000 transform ${isVisible ? 'translate-y-0 opacity-100' : '-translate-y-10 opacity-0'}`}>
        <div className="inline-block relative">
          <Heart className="absolute -top-6 -right-6 text-pink-400 animate-bounce" fill="currentColor" size={32} />
          <h1 
            className="text-4xl md:text-5xl font-extrabold text-pink-600 drop-shadow-sm cursor-pointer hover:scale-105 transition-transform px-4"
            onClick={() => speak("Привет, Никуша!")}
          >
            Привет, моя сладкая Никуша!
          </h1>
        </div>
        <p className="mt-4 text-pink-400 flex items-center justify-center gap-2 italic font-medium px-4">
          <Music size={18} className="text-pink-400" /> Нажми на зверька! <Music size={18} className="text-pink-400" />
        </p>
      </header>

      <main className="max-w-6xl mx-auto px-6">
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
          {animals.map((animal, index) => (
            <div
              key={animal.id}
              onClick={() => handleAnimalClick(animal)}
              style={{ transitionDelay: `${index * 40}ms` }}
              className={`
                ${isVisible ? 'scale-100 opacity-100' : 'scale-50 opacity-0'}
                transition-all duration-500 cursor-pointer
                group relative bg-white rounded-[2rem] p-5 shadow-xl shadow-pink-100/50
                hover:shadow-2xl hover:-translate-y-3 hover:bg-pink-100 active:scale-95
              `}
            >
              <div className={`w-full aspect-square ${animal.color} rounded-[1.5rem] flex items-center justify-center text-5xl mb-3 group-hover:rotate-6 transition-transform shadow-inner`}>
                {animal.emoji}
              </div>
              <h3 className="text-center font-bold text-pink-700">
                {animal.name}
              </h3>
            </div>
          ))}
        </div>
      </main>

      {/* Модальное окно с плавным переходом */}
      {selectedAnimal && (
        <div 
          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-pink-400/40 backdrop-blur-md transition-opacity duration-500" 
          onClick={handleClose}
        >
          <div 
            className="bg-white p-8 md:p-10 rounded-[3rem] shadow-2xl max-w-sm w-full text-center relative overflow-hidden border-4 border-pink-200"
            onClick={e => e.stopPropagation()}
          >
            {/* Кнопка закрытия */}
            <button 
              onClick={handleClose}
              className="absolute top-4 right-4 p-2 text-pink-300 hover:text-pink-500 transition-colors"
            >
              <X size={28} />
            </button>

            {/* Контент с анимацией смены */}
            <div className="relative h-96 flex flex-col items-center justify-center">
              {/* Старая картинка (уходит) */}
              {prevAnimal && isTransitioning && (
                <div className="absolute inset-0 flex flex-col items-center justify-center animate-out fade-out zoom-out duration-500 fill-mode-forwards">
                  <div className="text-9xl mb-6">{prevAnimal.emoji}</div>
                  <h2 className="text-3xl font-black text-pink-600 mb-4 uppercase">{prevAnimal.name}</h2>
                  <div className="bg-pink-50 p-6 rounded-2xl border-2 border-dashed border-pink-200 opacity-50">
                    <p className="text-lg italic">{prevAnimal.poem}</p>
                  </div>
                </div>
              )}

              {/* Новая картинка (приходит) */}
              <div className={`flex flex-col items-center justify-center transition-all duration-500 ${isTransitioning ? 'animate-in fade-in zoom-in' : 'opacity-100'}`}>
                <div className={`text-9xl mb-8 ${isPlayingAudio ? 'animate-bounce' : 'animate-pulse'}`}>
                  {selectedAnimal.emoji}
                </div>
                
                <h2 className="text-3xl font-black text-pink-600 mb-4 uppercase tracking-tight">
                  {selectedAnimal.name}
                </h2>
                
                <div className="bg-pink-50 p-6 rounded-2xl mb-8 border-2 border-dashed border-pink-200 relative w-full">
                  <p className="text-xl text-pink-700 leading-relaxed font-medium italic">
                    {selectedAnimal.poem}
                  </p>
                  
                  {isPlayingAudio && (
                    <div className="mt-4 flex justify-center gap-1 items-end h-4">
                      <div className="w-1 bg-pink-400 animate-music-bar h-4" style={{animationDelay: '0s'}}></div>
                      <div className="w-1 bg-pink-400 animate-music-bar h-2" style={{animationDelay: '0.2s'}}></div>
                      <div className="w-1 bg-pink-400 animate-music-bar h-3" style={{animationDelay: '0.4s'}}></div>
                    </div>
                  )}
                </div>
                
                <button 
                  onClick={() => selectedAnimal.audioFileName ? playSong(selectedAnimal.audioFileName, selectedAnimal) : speak(selectedAnimal.poem)}
                  className="flex items-center justify-center gap-3 bg-pink-500 hover:bg-pink-600 text-white font-bold py-4 px-8 rounded-2xl shadow-lg transition-all active:scale-95 w-full"
                >
                  {selectedAnimal.audioFileName ? (isPlayingAudio ? <PauseCircle size={24} /> : <PlayCircle size={24} />) : <Volume2 size={24} />}
                  {selectedAnimal.audioFileName ? 'Слушать песенку' : 'Слушать'}
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      <footer className="fixed bottom-0 left-0 right-0 py-5 bg-white/70 backdrop-blur-xl text-center border-t border-pink-100">
        <p className="text-pink-400 text-sm font-bold uppercase tracking-widest flex items-center justify-center gap-2">
          Для нашей любимой Никуши <Heart size={16} fill="currentColor" />
        </p>
      </footer>

      <style>{`
        @keyframes music-bar {
          0%, 100% { height: 8px; }
          50% { height: 20px; }
        }
        .animate-music-bar {
          animation: music-bar 0.6s ease-in-out infinite;
        }
      `}</style>
    </div>
  );
};

export default App;