import { useNavigate } from "react-router-dom";
import * as Icons from "lucide-react";
import { Puzzle } from "lucide-react";
import { motion } from "framer-motion";
import { useAllGames } from "../games";
import { PageHeader } from "../components/PageHeader";

// "Mes jeux" — game library: all games (built-in + imported) to start a game.
export default function Games() {
  const navigate = useNavigate();
  const games = useAllGames();

  return (
    <div className="p-5 space-y-5 relative z-10">
      <PageHeader title="Mes jeux" />

      <div className="grid grid-cols-3 gap-3.5">
        {games.map((game, index) => {
          const Icon = (Icons as any)[game.icon || "Box"] || Icons.Box;
          return (
            <motion.button
              key={game.id}
              initial={{ opacity: 0, scale: 0.9 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{
                delay: index * 0.04,
                type: "spring",
                stiffness: 200,
                damping: 22,
              }}
              whileHover={{ y: -3 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => navigate(`/new/${game.id}`)}
              className="flex flex-col items-center gap-2 group"
            >
              <div
                className="relative w-full aspect-square rounded-[1.5rem] shadow-md flex items-center justify-center overflow-hidden ring-1 ring-black/5 dark:ring-white/10 transition-shadow group-hover:shadow-xl"
                style={{
                  backgroundColor: game.imagePath
                    ? "transparent"
                    : game.colors.primary,
                }}
              >
                {game.imagePath ? (
                  <img
                    src={game.imagePath}
                    alt={game.name}
                    className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                  />
                ) : (
                  <>
                    <div className="absolute -top-3 -right-3 w-14 h-14 rounded-full bg-white/10" />
                    <Icon
                      className="w-11 h-11 text-white drop-shadow-md relative z-10"
                      strokeWidth={1.5}
                    />
                  </>
                )}
              </div>
              <span className="text-xs font-bold leading-tight truncate max-w-full px-0.5 text-foreground/90">
                {game.name}
              </span>
            </motion.button>
          );
        })}
      </div>

      {/* Link to manage imported games */}
      <button
        onClick={() => navigate("/games")}
        className="w-full flex items-center justify-center gap-2 py-4 rounded-[1.5rem] bg-card/60 backdrop-blur-xl border border-black/5 dark:border-white/10 shadow-sm text-sm font-bold text-muted-foreground active:scale-[0.99] transition-transform"
      >
        <Puzzle className="w-4 h-4 text-primary" />
        Importer / gérer mes jeux
      </button>
    </div>
  );
}
