'use client';

import { useRouter } from 'next/navigation';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { ArrowLeft, Home, Sparkles } from 'lucide-react';

export default function NotFound() {
  const router = useRouter();

  // Drifting animations for background orbs
  const orbVariants = {
    animate1: {
      x: [0, 60, -30, 0],
      y: [0, -40, 30, 0],
      scale: [1, 1.15, 0.95, 1],
      transition: {
        duration: 12,
        repeat: Infinity,
        ease: 'easeInOut',
      },
    },
    animate2: {
      x: [0, -45, 60, 0],
      y: [0, 30, -60, 0],
      scale: [1, 0.95, 1.1, 1],
      transition: {
        duration: 15,
        repeat: Infinity,
        ease: 'easeInOut',
      },
    },
  };

  return (
    <div className="fixed inset-0 z-[9999] h-screen w-screen flex items-center justify-center bg-gradient-to-tr from-slate-50 via-zinc-100 to-slate-100 dark:from-zinc-950 dark:via-zinc-900 dark:to-zinc-950 px-4 overflow-hidden select-none">
      
      {/* Background Animated Orbs */}
      <motion.div
        variants={orbVariants}
        animate="animate1"
        className="absolute top-1/4 left-1/4 w-72 h-72 rounded-full bg-orange-400/20 dark:bg-orange-900/20 blur-3xl pointer-events-none"
      />
      <motion.div
        variants={orbVariants}
        animate="animate2"
        className="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-amber-400/20 dark:bg-amber-900/20 blur-3xl pointer-events-none"
      />
      
      {/* Grid Pattern Overlay */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />

      {/* Main Container Card */}
      <motion.div
        initial={{ opacity: 0, scale: 0.95, y: 15 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        transition={{ duration: 0.5, ease: 'easeOut' }}
        className="relative z-10 max-w-md w-full backdrop-blur-md bg-white/75 dark:bg-zinc-900/75 border border-white/40 dark:border-zinc-800/40 p-8 md:p-10 rounded-[2rem] shadow-[0_20px_60px_rgba(255,116,0,0.08)] dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)] text-center flex flex-col items-center"
      >
        
        {/* Sparkles / Decorative tag */}
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-orange-100/80 dark:bg-orange-950/40 border border-orange-200/50 dark:border-orange-800/30 text-[10px] font-semibold text-orange-600 dark:text-orange-300 uppercase tracking-widest mb-6"
        >
          <Sparkles size={10} className="animate-pulse text-orange-500 dark:text-orange-400" />
          <span>Page Not Found</span>
        </motion.div>

        {/* Animated Compass Illustration */}
        <motion.div
          animate={{ y: [0, -10, 0] }}
          transition={{ repeat: Infinity, duration: 4, ease: 'easeInOut' }}
          className="relative w-28 h-28 mb-5 flex items-center justify-center"
        >
          {/* Compass Glow */}
          <div className="absolute inset-2 bg-gradient-to-tr from-orange-500/25 to-amber-500/25 rounded-full blur-xl opacity-80" />
          
          <svg width="88" height="88" viewBox="0 0 100 100" fill="none" className="z-10 drop-shadow-md">
            {/* Outer dial */}
            <circle cx="50" cy="50" r="42" stroke="url(#compassGrad)" strokeWidth="5" className="opacity-95" />
            <circle cx="50" cy="50" r="42" stroke="currentColor" strokeWidth="1" className="text-white/10" />
            
            {/* Direction markers */}
            <text x="47" y="21" fill="currentColor" className="text-[10px] font-black text-orange-600 dark:text-orange-400">N</text>
            <text x="47" y="88" fill="currentColor" className="text-[10px] font-black text-slate-400 dark:text-zinc-500">S</text>
            
            {/* Inner dashed ring */}
            <circle cx="50" cy="50" r="33" stroke="currentColor" strokeWidth="1" strokeDasharray="3 4" className="text-orange-300/40 dark:text-orange-700/40" />
            
            {/* Rotating needle */}
            <motion.g
              animate={{ rotate: [0, 15, -10, 375, 360] }}
              transition={{ repeat: Infinity, duration: 12, ease: 'easeInOut', repeatDelay: 1 }}
              style={{ originX: '50px', originY: '50px' }}
            >
              {/* North Needle */}
              <path d="M50 18 L56 50 L50 46 Z" fill="url(#needleNorth)" className="drop-shadow-[0_2px_4px_rgba(255,116,0,0.3)]" />
              {/* South Needle */}
              <path d="M50 82 L44 50 L50 46 Z" fill="#94a3b8" />
              {/* Central Pivot */}
              <circle cx="50" cy="50" r="3.5" fill="#ffffff" className="drop-shadow-sm" />
              <circle cx="50" cy="50" r="1.5" fill="#FF7400" />
            </motion.g>

            <defs>
              <linearGradient id="compassGrad" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#FF9D4C" />
                <stop offset="50%" stopColor="#FF7400" />
                <stop offset="100%" stopColor="#D95200" />
              </linearGradient>
              <linearGradient id="needleNorth" x1="0%" y1="0%" x2="100%" y2="100%">
                <stop offset="0%" stopColor="#FF9D4C" />
                <stop offset="100%" stopColor="#FF7400" />
              </linearGradient>
            </defs>
          </svg>
        </motion.div>

        {/* 404 Text */}
        <motion.h1
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ delay: 0.3, type: 'spring', stiffness: 90 }}
          className="text-7xl md:text-8xl font-black bg-gradient-to-r from-orange-500 via-amber-500 to-orange-600 dark:from-orange-400 dark:via-amber-400 dark:to-orange-500 bg-clip-text text-transparent tracking-wider leading-none mb-3"
        >
          404
        </motion.h1>

        {/* Subtitle */}
        <motion.h2
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.4 }}
          className="text-lg md:text-xl font-bold text-slate-800 dark:text-zinc-100 mb-2"
        >
          Something&apos;s missing
        </motion.h2>

        {/* Message */}
        <motion.p
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.5 }}
          className="text-slate-500 dark:text-zinc-400 text-xs md:text-sm max-w-sm mb-6 leading-relaxed"
        >
          Sorry, the page you are looking for doesn&apos;t exist or has been moved. Let&apos;s get you back on track!
        </motion.p>

        {/* Buttons Action Group */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.6 }}
          className="flex flex-col sm:flex-row gap-3 w-full"
        >
          <Button
            onClick={() => router.back()}
            variant="theme"
            className="flex-1 h-11 gap-2 bg-gradient-to-r from-orange-500 to-amber-600 hover:from-orange-600 hover:to-amber-700 text-white font-semibold rounded-xl shadow-[0_8px_24px_-8px_rgba(255,116,0,0.4)] transition-all duration-300 hover:shadow-[0_12px_28px_-6px_rgba(255,116,0,0.5)] active:scale-95"
          >
            <ArrowLeft size={14} />
            <span>Go back</span>
          </Button>
          
          <Button
            onClick={() => router.push('/dashboard')}
            variant="outline"
            className="flex-1 h-11 gap-2 border-slate-200 dark:border-zinc-800 bg-white/50 dark:bg-zinc-900/50 hover:bg-slate-100 dark:hover:bg-zinc-800 text-slate-700 dark:text-zinc-300 font-semibold rounded-xl transition-all duration-300 active:scale-95"
          >
            <Home size={14} />
            <span>Back to Home</span>
          </Button>
        </motion.div>

      </motion.div>
    </div>
  );
}