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 BinarySearchTrick from '@/components/BinarySearchTrick';
import TernarySearchTrick from '@/components/TernarySearchTrick';
import GuessingGame from '@/components/GuessingGame';

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

const interactives: Interactive[] = [
  {
    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: 'binary-search-trick',
    title: 'Binary Search Magic Trick',
    description: 'Perform an amazing magic trick that reveals how binary numbers work. Think of a number and watch the magic happen!',
    tags: ['binary', 'magic', 'numbers', 'trick', 'data-structures'],
    component: BinarySearchTrick
  },
  {
    id: 'ternary-search-trick',
    title: 'Ternary Search Magic Trick',
    description: 'Experience the magic of ternary search! Think of a number and watch as the cards reveal it through mathematical calculations.',
    tags: ['ternary', 'magic', 'numbers', 'trick', 'data-structures', 'search'],
    component: TernarySearchTrick
  },
];
const InteractiveGallery = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedInteractive, setSelectedInteractive] = useState<Interactive | null>(null);
  const filteredInteractives = interactives.filter(interactive => interactive.title.toLowerCase().includes(searchTerm.toLowerCase()) || interactive.description.toLowerCase().includes(searchTerm.toLowerCase()) || interactive.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())));
  if (selectedInteractive) {
    const InteractiveComponent = selectedInteractive.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={() => setSelectedInteractive(null)}
              className="text-primary hover:text-primary/80 font-medium"
            >
              ← Back to Data Structures and Algorithms
            </button>
          </div>
          <InteractiveComponent showSocialShare={true} />
        </div>
      </div>
    );
  }
  return (
    <Layout>
      <div className="max-w-7xl mx-auto p-6">
        <div className="space-y-6">
      <div className="space-y-4">
        <h1 className="text-3xl font-bold text-foreground">Data Structures and Algorithms</h1>
        <p className="text-muted-foreground text-lg">Interactive explorations of elementary data structures and algorithms.</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 interactives..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-10" />
      </div>

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

      {filteredInteractives.length === 0 && <div className="text-center py-12">
          <p className="text-muted-foreground text-lg">No interactives found matching your search.</p>
        </div>}
        </div>
      </div>
    </Layout>
  );
};
export default InteractiveGallery;