import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';
import { ArrowLeft, Crosshair } from 'lucide-react';
import { PageTransition } from '@/components/layout/PageTransition';
import { Button } from '@/components/ui/Button';

export default function NotFound() {
  return (
    <PageTransition className="min-h-[80vh] flex items-center justify-center px-4">
      <div className="text-center">
        <motion.div
          initial={{ opacity: 0, scale: 0.5, rotate: -45 }}
          animate={{ opacity: 1, scale: 1, rotate: 0 }}
          transition={{ type: 'spring', stiffness: 200, damping: 15 }}
          className="mb-8 inline-block relative"
        >
          <Crosshair className="w-20 h-20 text-[#5a5a72]/20 mx-auto" />
          <motion.div
            className="absolute inset-0 rounded-full border-2 border-[#ff6b2c]/20"
            animate={{ scale: [1, 1.4, 1], opacity: [0.3, 0, 0.3] }}
            transition={{ duration: 2.5, repeat: Infinity, ease: 'easeInOut' }}
          />
        </motion.div>

        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.2 }}
          className="relative mb-6"
        >
          <h1
            className="text-[120px] sm:text-[160px] font-black leading-none text-[#f0f0f5] select-none"
            style={{
              textShadow: '0 0 40px rgba(255,107,44,0.15)',
            }}
          >
            <motion.span
              className="inline-block"
              animate={{
                x: [0, -2, 3, -1, 0],
                textShadow: [
                  '0 0 0px transparent',
                  '-3px 0 0 rgba(239,68,68,0.4), 3px 0 0 rgba(59,130,246,0.4)',
                  '0 0 0px transparent',
                  '2px 0 0 rgba(239,68,68,0.4), -2px 0 0 rgba(59,130,246,0.4)',
                  '0 0 0px transparent',
                ],
              }}
              transition={{
                duration: 3,
                repeat: Infinity,
                ease: 'easeInOut',
                repeatDelay: 2,
              }}
            >
              4
            </motion.span>
            <motion.span
              className="inline-block text-[#ff6b2c]"
              animate={{
                y: [0, -1, 2, -1, 0],
                opacity: [1, 0.8, 1, 0.9, 1],
              }}
              transition={{
                duration: 2,
                repeat: Infinity,
                ease: 'easeInOut',
                repeatDelay: 3,
              }}
            >
              0
            </motion.span>
            <motion.span
              className="inline-block"
              animate={{
                x: [0, 2, -3, 1, 0],
                textShadow: [
                  '0 0 0px transparent',
                  '3px 0 0 rgba(239,68,68,0.4), -3px 0 0 rgba(59,130,246,0.4)',
                  '0 0 0px transparent',
                  '-2px 0 0 rgba(239,68,68,0.4), 2px 0 0 rgba(59,130,246,0.4)',
                  '0 0 0px transparent',
                ],
              }}
              transition={{
                duration: 3,
                repeat: Infinity,
                ease: 'easeInOut',
                repeatDelay: 1.5,
              }}
            >
              4
            </motion.span>
          </h1>

          <motion.div
            className="absolute inset-0 pointer-events-none overflow-hidden"
            style={{
              background: 'repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.01) 2px, rgba(255,255,255,0.01) 4px)',
            }}
          />
        </motion.div>

        <motion.p
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.3 }}
          className="text-xl font-semibold text-[#a0a0b8] mb-2"
        >
          This page got wallbanged.
        </motion.p>
        <motion.p
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="text-sm text-[#5a5a72] mb-10 max-w-sm mx-auto"
        >
          The page you're looking for doesn't exist or has been moved to another location.
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.5 }}
          className="flex items-center justify-center gap-3"
        >
          <Link to="/dashboard">
            <Button>
              <ArrowLeft className="w-4 h-4" /> Back to Dashboard
            </Button>
          </Link>
          <Link to="/queue">
            <Button variant="secondary">
              Find a Match
            </Button>
          </Link>
        </motion.div>
      </div>
    </PageTransition>
  );
}
