import { useState, useEffect, useCallback } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import Layout from "@/components/Layout";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import {
  Home,
  ArrowLeft,
  Zap,
  Target,
  Star,
  Trophy,
  RefreshCw,
  Search,
  Gamepad2,
  Shield,
  Sparkles,
  ChevronUp,
  ChevronDown,
  ChevronLeft,
  ChevronRight
} from "lucide-react";

interface GameState {
  score: number;
  lives: number;
  level: 1 | 2 | 3;
  playerPosition: { x: number; y: number };
  collectibles: Array<{ x: number; y: number; id: number; collected: boolean }>;
  gameActive: boolean;
  gameWon: boolean;
}

const NotFound = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [timeSpent, setTimeSpent] = useState(0);
  const [showEasterEgg, setShowEasterEgg] = useState(false);
  const [konami, setKonami] = useState<string[]>([]);
  const [currentQuote, setCurrentQuote] = useState(0);

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

  const quotes = [
    "404: Page not found, but your potential is infinite.",
    "Error 404: This page is in another castle.",
    "404: The page you seek is in another universe.",
    "404: Lost in cyberspace? We'll guide you home.",
    "404: Page not found, but great adventures await."
  ];

  const konamiCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight'];

  // Game state
  const [gameState, setGameState] = useState<GameState>({
    score: 0,
    lives: 3,
    level: 1,
    playerPosition: { x: 5, y: 5 },
    collectibles: [],
    gameActive: false,
    gameWon: false
  });

  // Initialize collectibles
  const initializeGame = useCallback(() => {
    const newCollectibles = [];
    for (let i = 0; i < 10; i++) {
      newCollectibles.push({
        x: Math.floor(Math.random() * 10),
        y: Math.floor(Math.random() * 10),
        id: i,
        collected: false
      });
    }
    setGameState(prev => ({
      ...prev,
      collectibles: newCollectibles,
      gameActive: true,
      score: 0,
      lives: 3,
      playerPosition: { x: 5, y: 5 },
      gameWon: false
    }));
  }, []);

  // Timer and quote rotation
  useEffect(() => {
    const timer = setInterval(() => {
      setTimeSpent(prev => prev + 1);
    }, 1000);

    const quoteTimer = setInterval(() => {
      setCurrentQuote(prev => (prev + 1) % quotes.length);
    }, 3000);

    return () => {
      clearInterval(timer);
      clearInterval(quoteTimer);
    };
  }, [quotes.length]);

  // Konami code detection
  useEffect(() => {
    const handleKeyPress = (e: KeyboardEvent) => {
      const newKonami = [...konami, e.code].slice(-konamiCode.length);
      setKonami(newKonami);

      if (JSON.stringify(newKonami) === JSON.stringify(konamiCode)) {
        setShowEasterEgg(true);
        setKonami([]);
      }
    };

    window.addEventListener('keydown', handleKeyPress);
    return () => window.removeEventListener('keydown', handleKeyPress);
  }, [konami, konamiCode]);

  // Game controls
  useEffect(() => {
    const handleGameControls = (e: KeyboardEvent) => {
      if (!gameState.gameActive) return;

      e.preventDefault();
      let newX = gameState.playerPosition.x;
      let newY = gameState.playerPosition.y;

      switch (e.key) {
        case 'ArrowUp':
        case 'w':
          newY = Math.max(0, newY - 1);
          break;
        case 'ArrowDown':
        case 's':
          newY = Math.min(9, newY + 1);
          break;
        case 'ArrowLeft':
        case 'a':
          newX = Math.max(0, newX - 1);
          break;
        case 'ArrowRight':
        case 'd':
          newX = Math.min(9, newX + 1);
          break;
        default:
          return;
      }

      setGameState(prev => {
        const newPosition = { x: newX, y: newY };
        const updatedCollectibles = prev.collectibles.map(collectible => {
          if (collectible.x === newX && collectible.y === newY && !collectible.collected) {
            return { ...collectible, collected: true };
          }
          return collectible;
        });

        const newScore = updatedCollectibles.filter(c => c.collected).length * 10;
        const gameWon = updatedCollectibles.every(c => c.collected);

        return {
          ...prev,
          playerPosition: newPosition,
          collectibles: updatedCollectibles,
          score: newScore,
          gameWon: gameWon,
          gameActive: !gameWon
        };
      });
    };

    if (gameState.gameActive) {
      window.addEventListener('keydown', handleGameControls);
      return () => window.removeEventListener('keydown', handleGameControls);
    }
  }, [gameState.gameActive, gameState.playerPosition]);

  const renderGameGrid = () => {
    const grid = [];
    for (let y = 0; y < 10; y++) {
      for (let x = 0; x < 10; x++) {
        const isPlayer = gameState.playerPosition.x === x && gameState.playerPosition.y === y;
        const collectible = gameState.collectibles.find(c => c.x === x && c.y === y && !c.collected);

        grid.push(
          <div
            key={`${x}-${y}`}
            className={`w-6 h-6 border border-border/20 flex items-center justify-center text-xs transition-all duration-200 ${
              isPlayer ? 'bg-aethex-500 animate-pulse' : collectible ? 'bg-yellow-500/50 animate-bounce' : 'bg-background/30'
            }`}
          >
            {isPlayer && '🚀'}
            {collectible && '⭐'}
          </div>
        );
      }
    }
    return grid;
  };

  return (
    <Layout>
      <div className="min-h-screen bg-aethex-gradient py-12">
        <div className="container mx-auto px-4 max-w-4xl">
          {/* Floating particles */}
          <div className="absolute inset-0 pointer-events-none overflow-hidden opacity-10">
            {[...Array(30)].map((_, i) => (
              <div
                key={i}
                className="absolute text-aethex-400 animate-float"
                style={{
                  left: `${Math.random() * 100}%`,
                  top: `${Math.random() * 100}%`,
                  animationDelay: `${Math.random() * 3}s`,
                  animationDuration: `${3 + Math.random() * 2}s`,
                  fontSize: `${12 + Math.random() * 8}px`
                }}
              >
                404
              </div>
            ))}
          </div>

          {/* Main Content */}
          <div className="text-center space-y-8 animate-scale-in relative z-10">
            {/* Header */}
            <div className="space-y-4">
              <div className="flex justify-center">
                <img
                  src="https://cdn.builder.io/api/v1/image/assets%2Ffc53d607e21d497595ac97e0637001a1%2F3979ec9a8a28471d900a80e94e2c45fe?format=webp&width=800"
                  alt="AeThex Logo"
                  className="h-24 w-24 animate-pulse-glow hover:animate-bounce transition-all duration-500"
                />
              </div>

              <h1 className="text-8xl lg:text-9xl font-bold text-gradient-purple animate-pulse">
                404
              </h1>

              <div className="space-y-2">
                <h2 className="text-2xl lg:text-3xl font-semibold text-gradient">
                  System Anomaly Detected
                </h2>
                <p className="text-lg text-muted-foreground animate-fade-in">
                  {quotes[currentQuote]}
                </p>
              </div>

              <div className="flex justify-center space-x-4">
                <Badge variant="outline" className="border-aethex-400/50 text-aethex-400 animate-pulse">
                  <Zap className="h-3 w-3 mr-1" />
                  Time Lost: {timeSpent}s
                </Badge>
                <Badge variant="outline" className="border-neon-blue/50 text-neon-blue animate-bounce-gentle">
                  <Target className="h-3 w-3 mr-1" />
                  Location: {location.pathname}
                </Badge>
              </div>
            </div>

            {/* Interactive Game Section */}
            <Card className="bg-card/50 border-border/50 mx-auto max-w-2xl animate-slide-up">
              <CardHeader>
                <CardTitle className="text-gradient flex items-center justify-center space-x-2">
                  <Gamepad2 className="h-5 w-5" />
                  <span>404 Rescue Mission</span>
                </CardTitle>
                <CardDescription>
                  Help the rocket collect all stars to unlock the way home! Use WASD or arrow keys.
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {!gameState.gameActive && !gameState.gameWon && (
                  <Button
                    onClick={initializeGame}
                    className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale"
                  >
                    <Gamepad2 className="h-4 w-4 mr-2" />
                    Start Mission
                  </Button>
                )}

                {gameState.gameActive && (
                  <div className="space-y-4">
                    <div className="flex justify-between items-center">
                      <div className="text-sm">
                        Score: <span className="text-gradient font-bold">{gameState.score}</span>
                      </div>
                      <div className="text-sm">
                        Lives: <span className="text-red-400">{'❤️'.repeat(gameState.lives)}</span>
                      </div>
                    </div>

                    <div className="grid grid-cols-10 gap-1 mx-auto w-fit p-4 border border-border/50 rounded-lg bg-background/30">
                      {renderGameGrid()}
                    </div>

                    <div className="text-xs text-muted-foreground">
                      Collected: {gameState.collectibles.filter(c => c.collected).length} / {gameState.collectibles.length}
                    </div>
                  </div>
                )}

                {gameState.gameWon && (
                  <div className="space-y-4 animate-scale-in">
                    <div className="text-center space-y-2">
                      <Trophy className="h-12 w-12 text-yellow-500 mx-auto animate-bounce" />
                      <h3 className="text-xl font-bold text-gradient">Mission Complete!</h3>
                      <p className="text-muted-foreground">
                        You've rescued the lost page! Final Score: {gameState.score}
                      </p>
                    </div>
                    <Button
                      onClick={() => navigate("/")}
                      className="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 hover-lift interactive-scale"
                    >
                      <Home className="h-4 w-4 mr-2" />
                      Return Home Victorious
                    </Button>
                  </div>
                )}
              </CardContent>
            </Card>

            {/* Easter Egg */}
            {showEasterEgg && (
              <Card className="bg-gradient-to-r from-purple-500/20 to-pink-500/20 border-purple-400/50 animate-scale-in">
                <CardContent className="p-6 text-center">
                  <Sparkles className="h-8 w-8 text-purple-400 mx-auto mb-4 animate-pulse" />
                  <h3 className="text-xl font-bold text-gradient-purple mb-2">
                    🎉 Konami Code Activated! 🎉
                  </h3>
                  <p className="text-muted-foreground mb-4">
                    You've unlocked the secret developer mode! You're clearly a person of culture.
                  </p>
                  <Button
                    onClick={() => navigate("/dashboard")}
                    className="bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 hover-lift interactive-scale"
                  >
                    <Shield className="h-4 w-4 mr-2" />
                    Access Developer Dashboard
                  </Button>
                </CardContent>
              </Card>
            )}

            {/* Navigation Options */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-2xl mx-auto animate-slide-up">
              <Button
                onClick={() => navigate(-1)}
                variant="outline"
                className="hover-lift interactive-scale group"
              >
                <ArrowLeft className="h-4 w-4 mr-2 transition-transform group-hover:-translate-x-1" />
                Go Back
              </Button>

              <Button
                onClick={() => navigate("/")}
                className="bg-gradient-to-r from-aethex-500 to-neon-blue hover:from-aethex-600 hover:to-neon-blue/90 hover-lift interactive-scale group"
              >
                <Home className="h-4 w-4 mr-2" />
                Home Base
              </Button>

              <Button
                onClick={() => window.location.reload()}
                variant="outline"
                className="hover-lift interactive-scale group"
              >
                <RefreshCw className="h-4 w-4 mr-2 transition-transform group-hover:rotate-180" />
                Retry
              </Button>
            </div>

            {/* Help Section */}
            <Card className="bg-background/30 border-border/30 max-w-lg mx-auto animate-fade-in">
              <CardContent className="p-4 text-center">
                <Search className="h-6 w-6 text-muted-foreground mx-auto mb-2" />
                <p className="text-sm text-muted-foreground">
                  Lost? Try searching for what you need or{" "}
                  <button
                    onClick={() => navigate("/contact")}
                    className="text-aethex-400 hover:underline"
                  >
                    contact our support team
                  </button>
                </p>
              </CardContent>
            </Card>

            {/* Fun Stats */}
            <div className="text-xs text-muted-foreground animate-fade-in">
              <p>🎮 Try the Konami Code for a surprise!</p>
              <p>⬆️⬆️⬇️⬇️⬅️➡️⬅️➡️</p>
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
};

export default NotFound;