import { useState } from "react";
import { Link } from "react-router-dom";
import { Search } from "lucide-react";
import Layout from "@/components/Layout";
import InteractiveCard from "@/components/InteractiveCard";
import GridTilingPuzzle from "@/components/GridTilingPuzzle";
import SunnyLinesPuzzle from "@/components/SunnyLinesPuzzle";

interface Interactive {
  id: string;
  title: string;
  description: string;
  tags: string[];
  component: React.ComponentType;
  greenScreenPath: string;
}

const interactives: Interactive[] = [
  {
    id: "grid-tiling-puzzle",
    title: "Grid Tiling Puzzle",
    description: "Based on IMO 2025: Place rectangular tiles on a grid so that each row and column has exactly one uncovered square.",
    tags: ["puzzle", "geometry", "optimization", "imo", "contest-problems"],
    component: GridTilingPuzzle,
    greenScreenPath: "/contest-problems/grid-tiling"
  },
  {
    id: "sunny-lines-puzzle",
    title: "Sunny Lines Puzzle",
    description: "Based on IMO 2025 P6: Place lines to cover points in a triangle. A line is 'sunny' if it's not parallel to x-axis, y-axis, or x+y=0.",
    tags: ["puzzle", "geometry", "lines", "imo", "contest-problems"],
    component: SunnyLinesPuzzle,
    greenScreenPath: "/contest-problems/sunny-lines"
  }
];

const ContestProblems = () => {
  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 p-6">
        <div className="max-w-4xl mx-auto space-y-6">
          <div className="flex items-center justify-between">
            <button 
              onClick={() => setSelectedInteractive(null)} 
              className="text-primary hover:text-primary/80 font-medium"
            >
              ← Back to Contest Problems
            </button>
            
            <Link to="/themes" className="text-primary hover:text-primary/80 font-medium">
              Back to Themes →
            </Link>
          </div>
          <InteractiveComponent />
        </div>
      </div>
    );
  }

  return (
    <Layout>
      <div className="container mx-auto px-4 py-8">
        <div className="space-y-8">
          <div className="flex items-center gap-4">
            <Link to="/themes" className="text-primary hover:text-primary/80 font-medium">
              ← Back to Themes
            </Link>
            <h1 className="text-3xl font-bold text-foreground">Contest Problems</h1>
          </div>

          <div className="space-y-4">
            <p className="text-muted-foreground text-lg">
              Practice with problems from programming competitions, mathematical olympiads, and algorithmic challenges with interactive solutions and explanations.
            </p>
          </div>

          <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 
              type="text" 
              placeholder="Search interactives..." 
              value={searchTerm} 
              onChange={e => setSearchTerm(e.target.value)} 
              className="w-full pl-10 pr-4 py-2 border border-outline rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" 
            />
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredInteractives.map(interactive => (
              <InteractiveCard 
                key={interactive.id} 
                title={interactive.title} 
                description={interactive.description} 
                tags={interactive.tags} 
                onClick={() => setSelectedInteractive(interactive)} 
              />
            ))}
          </div>

          {filteredInteractives.length === 0 && (
            <div className="text-center py-12">
              <p className="text-muted-foreground">
                No interactives found matching "{searchTerm}"
              </p>
            </div>
          )}
        </div>
      </div>
    </Layout>
  );
};

export default ContestProblems;