import { motion } from 'framer-motion';
import { Link } from 'react-router-dom';
import GlitchText from '@/components/GlitchText';
import { Trophy } from 'lucide-react';

const games = [
  {
    id: 'tetris',
    name: 'Tetris',
    description: 'Classic block-stacking puzzle game',
    ascii: `┌────────┐
│ ▓▓     │
│ ▓▓ ██  │
│▓▓▓▓██░░│
│██████░░│
└────────┘`,
  },
  {
    id: 'pacman',
    name: 'Pac-Man',
    description: 'Navigate the maze, eat dots, avoid ghosts',
    ascii: `┌────────┐
│· · ᗣ · │
│ ┌─┐ ┌─┐│
│· · ◗ · │
│ · ═══ ·│
└────────┘`,
  },
  {
    id: 'snake',
    name: 'Snake',
    description: 'Eat food, grow longer, dont hit yourself',
    ascii: `┌────────┐
│        │
│ ●■■■   │
│    ■   │
│    ■■◆ │
└────────┘`,
  },
  {
    id: 'breakout',
    name: 'Breakout',
    description: 'Break bricks with a bouncing ball',
    ascii: `┌────────┐
│████████│
│▓▓▓▓▓▓▓▓│
│░░░░░░░░│
│   ●    │
│  ═══   │
└────────┘`,
  },
];

const multiplayerGames = [
  {
    id: 'snake-2p',
    name: 'Snake 2P',
    description: '2 players on same keyboard - last one standing wins!',
    ascii: `┌────────┐
│ ●■■    │
│        │
│    ▓▓● │
│        │
└────────┘`,
  },
];

const Games = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      className="flex flex-col h-full"
    >
      <div className="flex items-center justify-between mb-4">
        <div>
          <h1 className="font-minecraft text-3xl md:text-4xl text-primary text-glow-strong mb-1">
            <GlitchText text="Arcade" />
          </h1>
          <p className="font-pixel text-sm text-foreground/70">
            Select a game. High scores saved locally.
          </p>
        </div>
        <Link 
          to="/games/leaderboard"
          className="flex items-center gap-2 font-pixel text-sm text-primary border border-primary/50 px-3 py-2 hover:bg-primary/20 transition-colors"
        >
          <Trophy size={16} />
          Leaderboard
        </Link>
      </div>

      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
        {games.map((game, index) => (
          <motion.div
            key={game.id}
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: index * 0.1 }}
          >
            <Link to={`/games/${game.id}`} className="block">
              <div className="border border-primary/50 hover:border-primary bg-background/50 hover:bg-primary/10 p-4 transition-all duration-300 group cursor-pointer">
                <pre className="font-mono text-sm text-primary/70 group-hover:text-primary transition-colors mb-3 leading-tight">
                  {game.ascii}
                </pre>
                <h2 className="font-minecraft text-xl text-primary text-glow group-hover:text-glow-strong">
                  <GlitchText text={game.name} />
                </h2>
                <p className="font-pixel text-xs text-foreground/60 mt-2">
                  {game.description}
                </p>
              </div>
            </Link>
          </motion.div>
        ))}
      </div>

      {/* Multiplayer Section */}
      <div className="mt-6">
        <h2 className="font-minecraft text-xl text-primary text-glow mb-3">
          <GlitchText text="Multiplayer" />
        </h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          {multiplayerGames.map((game, index) => (
            <motion.div
              key={game.id}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.4 + index * 0.1 }}
            >
              <Link to={`/games/${game.id}`} className="block">
                <div className="border border-purple-500/50 hover:border-purple-500 bg-background/50 hover:bg-purple-500/10 p-4 transition-all duration-300 group cursor-pointer">
                  <pre className="font-mono text-sm text-purple-400/70 group-hover:text-purple-400 transition-colors mb-3 leading-tight">
                    {game.ascii}
                  </pre>
                  <h2 className="font-minecraft text-xl text-purple-400 group-hover:text-glow-strong">
                    <GlitchText text={game.name} />
                  </h2>
                  <p className="font-pixel text-xs text-foreground/60 mt-2">
                    {game.description}
                  </p>
                </div>
              </Link>
            </motion.div>
          ))}
        </div>
      </div>

      <div className="border border-primary/30 p-2 bg-background/30 mt-4">
        <p className="font-pixel text-xs text-foreground/50">
          <span className="text-primary">{'>'}</span> Max score: 4,294,967,296
          <span className="text-foreground/30 ml-2">(uint32 overflow)</span>
        </p>
      </div>
    </motion.div>
  );
};

export default Games;
