interactives/src/components/GamesGallery.tsx

import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Search } from 'lucide-react';
import Layout from '@/components/Layout';
import GameOfSim from '@/components/GameOfSim';
import NorthcottsGame from '@/components/NorthcottsGame';
import NimGame from '@/components/NimGame';
import AssistedNimGame from '@/components/AssistedNimGame';
import GoldCoinGame from '@/components/GoldCoinGame';
import GuessingGame from '@/components/GuessingGame';
import SubtractionGame from '@/components/SubtractionGame';
import ParityBitsGame from '@/components/ParityBitsGame';
import CrapsGame from '@/components/CrapsGame';

interface Game {
  id: string;
  title: string;
  description: string;
  tags: string[];
  component: React.ComponentType<{ showSocialShare?: boolean }>;
}

const games: Game[] = [
  {
    id: 'craps-game',
    title: 'Craps: First Throw',
    description: 'Experience the classic casino dice game! Roll two dice and learn about probability as you discover the rules of the opening throw.',
    tags: ['probability', 'dice', 'casino', 'mathematics', 'statistics', 'gambling'],
    component: CrapsGame
  },
  {
    id: 'parity-magic',
    title: 'Parity Magic',
    description: 'Learn how parity bits detect and correct single-bit errors! Set up a grid, add parity bits, flip a bit, and watch the magic of error detection unfold.',
    tags: ['error-correction', 'parity', 'computer-science', 'educational', 'interactive', 'magic-trick'],
    component: ParityBitsGame
  },
  {
    id: 'subtraction-game-uid-2024',
    title: 'The Subtraction Game',
    description: 'A strategic two-player game where players take turns removing circles. Click on any of the last k circles to remove it and all circles to its right!',
    tags: ['strategy', 'two-player', 'logic', 'game-theory', 'subtraction'],
    component: SubtractionGame
  },
  {
    id: 'guessing-game',
    title: 'Number Guessing Game',
    description: 'Experience different search algorithms through interactive gameplay. Compare random, linear, and binary search strategies!',
    tags: ['algorithms', 'search', 'educational', 'interactive', 'binary-search', 'computer-science'],
    component: GuessingGame
  },
  {
    id: 'gold-coin',
    title: 'The Gold Coin Game',
    description: 'A strategic two-player game where you move coins to the left or take the leftmost coin. The player who takes the gold coin wins!',
    tags: ['strategy', 'two-player', 'logic', 'game-theory', 'movement', 'coins'],
    component: GoldCoinGame
  },
  {
    id: 'assisted-nim',
    title: 'Assisted Game of Nim',
    description: 'Learn the XOR strategy! Visualize how powers of 2 determine winning moves with color-coded borders.',
    tags: ['strategy', 'two-player', 'math', 'logic', 'game-theory', 'xor-strategy', 'educational'],
    component: AssistedNimGame
  },
  {
    id: 'nim',
    title: 'Game of Nim',
    description: 'A classic two-player game of strategy. Take turns removing stones from heaps. The player to take the last stone wins!',
    tags: ['strategy', 'two-player', 'math', 'logic', 'game-theory'],
    component: NimGame
  },
  {
    id: 'sim',
    title: 'Game of Sim',
    description: 'A strategic two-player game where you take turns coloring edges between vertices, trying to avoid creating a triangle of your own color.',
    tags: ['strategy', 'graph-theory', 'two-player', 'logic', 'game-theory'],
    component: GameOfSim
  },
  {
    id: 'northcotts-game',
    title: "Northcott's Game",
    description: 'A classic strategy game played on a grid where players move pieces horizontally toward each other, trying to be the last one able to move.',
    tags: ['strategy', 'two-player', 'grid-game', 'logic', 'movement'],
    component: NorthcottsGame
  }
];

const GamesGallery = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedGame, setSelectedGame] = useState<Game | null>(null);

  const filteredGames = games.filter(game => 
    game.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
    game.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
    game.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase()))
  );

  if (selectedGame) {
    const GameComponent = selectedGame.component;
    return (
      <div className="min-h-screen bg-background">
        <div className="container mx-auto px-4 py-8 space-y-6">
          <div className="flex items-center gap-4">
            <button 
              onClick={() => setSelectedGame(null)}
              className="text-primary hover:text-primary/80 font-medium"
            >
              ← Back to Games
            </button>
          </div>
          <GameComponent showSocialShare={true} />
        </div>
      </div>
    );
  }

  return (
    <Layout>
      <div className="container mx-auto px-4 py-8">
        <div className="space-y-6">
          <div className="space-y-4">
            <h1 className="text-3xl font-bold text-foreground">Games</h1>
            <p className="text-muted-foreground text-lg">
              Learn through play with interactive games that reinforce computer science and mathematical concepts.
            </p>
          </div>

          {/* Search bar */}
          <div className="relative max-w-md">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
            <Input 
              placeholder="Search games..." 
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="pl-10"
            />
          </div>

          {/* Games Gallery */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredGames.map(game => (
              <Card 
                key={game.id}
                className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105"
                onClick={() => setSelectedGame(game)}
              >
                <CardHeader className="space-y-3">
                  <CardTitle className="text-xl text-foreground">{game.title}</CardTitle>
                  <CardDescription className="text-muted-foreground line-clamp-3">
                    {game.description}
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-wrap gap-2">
                    {game.tags.map(tag => (
                      <Badge key={tag} variant="secondary" className="text-xs">
                        {tag}
                      </Badge>
                    ))}
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>

          {filteredGames.length === 0 && (
            <div className="text-center py-12">
              <p className="text-muted-foreground text-lg">No games found matching your search.</p>
            </div>
          )}
        </div>
      </div>
    </Layout>
  );
};

export default GamesGallery;