import { useLocation, Link } from "react-router-dom";
import { useEffect } from "react";
import { motion } from "framer-motion";
import { Terminal, AlertTriangle } from "lucide-react";
import { useSettings } from "@/contexts/SettingsContext";

const NotFound = () => {
  const location = useLocation();
  const { playSound } = useSettings();

  useEffect(() => {
    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
    playSound('error');
  }, [location.pathname, playSound]);

  return (
    <div className="min-h-screen bg-background flex items-center justify-center p-4">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="text-center space-y-6 max-w-md"
      >
        {/* Error code */}
        <motion.div
          initial={{ scale: 0.8, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ delay: 0.2, duration: 0.4 }}
          className="flex items-center justify-center gap-3"
        >
          <AlertTriangle className="w-10 h-10 text-primary animate-pulse" />
          <h1 className="font-minecraft text-6xl md:text-7xl text-primary text-glow">
            404
          </h1>
        </motion.div>

        {/* Terminal-style message */}
        <div className="border border-primary/30 bg-background/80 p-4 rounded">
          <div className="flex items-center gap-2 mb-3 pb-2 border-b border-primary/20">
            <Terminal className="w-4 h-4 text-primary/60" />
            <span className="font-pixel text-xs text-muted-foreground">error.log</span>
          </div>
          <div className="text-left space-y-2">
            <p className="font-pixel text-sm text-primary">
              <span className="text-muted-foreground">$</span> cd {location.pathname}
            </p>
            <p className="font-pixel text-sm text-destructive">
              ERROR: Directory not found
            </p>
            <p className="font-pixel text-xs text-muted-foreground">
              The requested path does not exist on this server.
            </p>
          </div>
        </div>

        {/* ASCII Art */}
        <pre className="font-mono text-[10px] md:text-xs text-primary/40 leading-tight select-none">
{`    _____
   /     \\
  | X   X |
  |   ^   |
  |  ===  |
   \\_____/
  LOST IN THE VOID`}
        </pre>

        {/* Navigation */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.5, duration: 0.4 }}
          className="space-y-3"
        >
          <p className="font-pixel text-xs text-muted-foreground">
            {'>'} Return to known territory:
          </p>
          <Link
            to="/"
            onClick={() => playSound('click')}
            className="inline-block font-minecraft text-sm text-primary hover:text-glow border border-primary/50 hover:border-primary px-4 py-2 transition-all duration-200 hover:bg-primary/10"
          >
            cd /home
          </Link>
        </motion.div>
      </motion.div>
    </div>
  );
};

export default NotFound;