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',
    hasMultiplayer: true,
    ascii: `┌────────┐
│ ▓▓     │
│ ▓▓ ██  │
│▓▓▓▓██░░│
│██████░░│
└────────┘`,
  },
  {
    id: 'pacman',
    name: 'Pac-Man',
    description: 'Navigate the maze, eat dots, avoid ghosts',
    hasMultiplayer: false,
    ascii: `┌────────┐
│· · ᗣ · │
│ ┌─┐ ┌─┐│
│· · ◗ · │
│ · ═══ ·│
└────────┘`,
  },
  {
    id: 'snake',
    name: 'Snake',
    description: 'Eat food, grow longer, dont hit yourself',
    hasMultiplayer: true,
    ascii: `┌────────┐
│        │
│ ●■■■   │
│    ■   │
│    ■■◆ │
└────────┘`,
  },
  {
    id: 'breakout',
    name: 'Breakout',
    description: 'Break bricks with a bouncing ball',
    hasMultiplayer: false,
    ascii: `┌────────┐
│████████│
│▓▓▓▓▓▓▓▓│
│░░░░░░░░│
│   ●    │
│  ═══   │
└────────┘`,
  },
];

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

      {/* Game Grid */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
        {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 h-full">
              <div className="border-2 border-primary/40 hover:border-primary bg-background/60 hover:bg-primary/10 p-5 transition-all duration-300 group cursor-pointer relative h-full flex flex-col hover:shadow-[0_0_20px_rgba(0,255,0,0.2)]">
                {/* ASCII Preview */}
                <div className="flex-1 flex items-center justify-center mb-4">
                  <pre className="font-mono text-xs md:text-sm text-primary/60 group-hover:text-primary transition-colors leading-tight whitespace-pre">
                    {game.ascii}
                  </pre>
                </div>
                
                {/* Game Info */}
                <div className="border-t border-primary/20 pt-3">
                  <h2 className="font-minecraft text-lg md:text-xl text-primary text-glow group-hover:text-glow-strong">
                    <GlitchText text={game.name} />
                  </h2>
                  <p className="font-pixel text-[10px] md:text-xs text-foreground/50 mt-1.5 line-clamp-2">
                    {game.description}
                  </p>
                </div>
                
                {/* Multiplayer Badge */}
                {game.hasMultiplayer && (
                  <span className="absolute top-3 right-3 font-pixel text-[10px] text-purple-400 border border-purple-500/60 bg-purple-500/10 px-2 py-1 rounded-sm">
                    2P
                  </span>
                )}
              </div>
            </Link>
          </motion.div>
        ))}
      </div>

      {/* Footer */}
      <div className="border border-primary/30 p-3 bg-background/30 mt-6 flex items-center justify-between">
        <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>
        <p className="font-pixel text-xs text-foreground/40 hidden md:block">
          Arrow keys / WASD to control
        </p>
      </div>
    </motion.div>
  );
};

export default Games;