import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { FaHome } from 'react-icons/fa';
import FuzzyText from '../components/reactbits/TextAnimations/FuzzyText/FuzzyText';
import notFoundImage from '../assets/404.webp';
import catImage from '../assets/cat.png';

const NotFoundPage = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [isScaled, setIsScaled] = useState(false);
  const [showContent, setShowContent] = useState(false);

  useEffect(() => {
    setIsVisible(true);
    const timer1 = setTimeout(() => {
      setShowContent(true);
    }, 800);
    const timer2 = setTimeout(() => {
      setIsScaled(true);
    }, 1500);

    return () => {
      clearTimeout(timer1);
      clearTimeout(timer2);
    };
  }, []);

  return (
    <div className="min-h-screen bg-campfire-dark flex flex-col items-center justify-center p-4">
      <div className={`text-center transition-opacity duration-1000 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
        <div className="relative min-h-[60vh] flex flex-col items-center justify-center">
          {/* Верхний контент (картинка) */}
          <div className={`absolute transition-all duration-1000 transform ${
            showContent ? 'opacity-100 -translate-y-48' : 'opacity-0 translate-y-0'
          }`}>
            <div className="relative p-8">
              <img
                src={catImage}
                alt="окак"
                className={`w-full max-w-md mx-auto transition-all duration-500 ${
                  isScaled ? 'scale-110' : 'scale-100'
                } hover:scale-150 hover:translate-y-14`}
                style={{
                  transition: 'all 0.5s ease-in-out',
                  maskImage: `
                    radial-gradient(ellipse at center, black 40%, transparent 50%),
                    linear-gradient(to bottom, black 90%, transparent 100%)
                  `,
                  WebkitMaskImage: `
                    radial-gradient(ellipse at center, black 40%, transparent 50%),
                    linear-gradient(to bottom, black 90%, transparent 100%)
                  `
                }}
              />
              {/* Дополнительная тень */}
              <div 
                className="absolute inset-0 -z-10"
                style={{
                  filter: 'blur(20px)',
                  transform: 'scale(1.2)'
                }}
              />
            </div>
          </div>

          {/* Центральный текст 404 */}
          <div className="relative z-10">
            <FuzzyText
              fontSize="clamp(4rem, 15vw, 12rem)"
              fontWeight={900}
              color="#FFA500"
              baseIntensity={0.2}
              hoverIntensity={0.6}
            >
              404
            </FuzzyText>
          </div>

          {/* Нижний контент (текст и кнопка) */}
          <div className={`absolute transition-all duration-1000 transform ${
            showContent ? 'opacity-100 translate-y-40' : 'opacity-0 translate-y-0'
          }`}>
            <p className="text-campfire-light text-xl mt-4 mb-8">
              Страница не найдена
            </p>
            <Link
              to="/"
              className="group relative inline-flex items-center px-8 py-4 bg-campfire-amber text-campfire-dark rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-2xl overflow-hidden"
              style={{
                background: 'linear-gradient(135deg, #FF3300 0%, #FF6a00 100%)',
                boxShadow: '0 4px 15px rgba(255, 165, 0, 0.2)'
              }}
            >
              {/* Animated shine effect */}
              <div 
                className="absolute inset-0 -top-full group-hover:top-full transform transition-all duration-700"
                style={{
                  background: 'linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, transparent 100%)'
                }}
              />
              
              {/* Icon with enhanced animation */}
              <FaHome className="mr-3 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300 relative z-10" />
              
              <span className="relative z-10 font-semibold">Окак, вернуться домой</span>
              
              {/* Button glow effect */}
              <div 
                className="absolute inset-0 -z-10 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"
                style={{
                  background: 'radial-gradient(circle at center, rgba(255, 165, 0, 0.4) 0%, transparent 70%)',
                  filter: 'blur(10px)',
                  transform: 'scale(1.2)'
                }}
              />
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default NotFoundPage;