import React, { useState } from "react";
import { Search, Zap } from "lucide-react";
import { Helmet } from "react-helmet";

const gamePlans = [
  {
    game: "Minecraft",
    trending: true,
    price: "$8",
    cover: "/images/minecraft.jpeg",
    path: "/https://billing.skylinkhosting.com/index.php?rp=/store/premium-minecraft-hosting",
    tags: ["sandbox", "popular"],
  },
  // {
  //   game: "Valheim",
  //   trending: false,
  //   price: "$12",
  //   cover: "/images/valheim.png",
  //   path: "/valheim",
  //   tags: ["survival", "viking"],
  // },
  {
    game: "Rust",
    trending: true,
    price: "$15",
    cover: "/images/rust.avif",
    path: "https://billing.skylinkhosting.com/index.php?rp=/store/premium-rust-hosting",
    tags: ["survival", "pvp"],
  },
  // {
  //   game: "26BZ",
  //   trending: true,
  //   price: "$1",
  //   cover: "https://placehold.co/100x200",
  //   path: "https://26bz.online/",
  //   tags: ["26BZ", "Custom"],
  // },
];

const GameCard = ({ game, trending, price, cover, path, tags }) => {
  return (
    <div className="bg-slate-950 rounded-md border border-gray-900 transition-all duration-200">
      <div className="relative">
        <div className="relative">
          <div className="relative aspect-[3/4] rounded-md overflow-hidden">
            <img
              src={cover}
              alt={game}
              className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-200 ease-in"
            />
            {trending && (
              <div className="absolute top-4 left-4 bg-slate-900 text-white px-3 py-1.5 rounded-md flex items-center gap-1.5 shadow-lg">
                <Zap className="w-4 h-4 text-blue-500" />
                <span className="text-sm font-semibold">Trending</span>
              </div>
            )}
          </div>

          <div className="p-4">
            <div className="flex justify-between items-start mb-3">
              <h3 className="text-white text-xl font-bold tracking-tight">
                {game}
              </h3>
            </div>

            <div className="flex flex-wrap gap-1.5 mb-4">
              {tags.map((tag) => (
                <span
                  key={tag}
                  className="text-xs bg-slate-900 text-gray-300 px-2.5 py-1 rounded-md font-medium"
                >
                  {tag.charAt(0).toUpperCase() + tag.slice(1)}
                </span>
              ))}
            </div>

            <div className="flex justify-between items-center">
              <div>
                <span className="text-gray-400 text-xs mb-0.5 block">
                  Starting at
                </span>
                <div className="text-blue-500 font-bold text-lg">
                  {price}/mo
                </div>
              </div>
              <a
                href={path}
                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium transition-all duration-200 text-sm"
              >
                View Plans
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export const GamesPage = () => {
  const [searchQuery, setSearchQuery] = useState("");
  const [selectedFilter, setSelectedFilter] = useState("all");

  const filteredGames = gamePlans.filter((game) => {
    const matchesSearch = game.game
      .toLowerCase()
      .includes(searchQuery.toLowerCase());
    const matchesFilter =
      selectedFilter === "all" ||
      (selectedFilter === "trending" && game.trending) ||
      game.tags.includes(selectedFilter);
    return matchesSearch && matchesFilter;
  });

  const allTags = [...new Set(gamePlans.flatMap((game) => game.tags))];

  return (
    <section className="bg-slate-900 min-h-screen py-12 md:py-24">
      <Helmet>
        <title>Game Servers | Skylink Hosting</title>
      </Helmet>
      <div className="container mx-auto px-4 max-w-screen-xl">
        {/* Header */}
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-6">
            Game Servers
          </h1>
          <p className="text-xl text-gray-300 mb-8">
            Deploy your game server in minutes. Start playing with friends
            today!
          </p>

          {/* Search and Filters */}
          <div className="flex flex-col md:flex-row gap-4 justify-center mb-8">
            <div className="relative">
              <div className="bg-gray-800 border border-gray-900 rounded-md transition-all duration-300">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
                <input
                  type="text"
                  placeholder="Search games..."
                  className="w-full md:w-64 bg-transparent text-white pl-10 pr-4 py-2 rounded-md focus:outline-none"
                  onChange={(e) => setSearchQuery(e.target.value)}
                />
              </div>
            </div>

            <div className="flex flex-wrap gap-2 justify-center">
              <button
                onClick={() => setSelectedFilter("all")}
                className={`px-4 py-2 rounded-md transition-all duration-200 border ${
                  selectedFilter === "all"
                    ? "bg-blue-600 text-white border-transparent"
                    : "bg-gray-800 text-gray-300 border-gray-900"
                }`}
              >
                All Games
              </button>
              <button
                onClick={() => setSelectedFilter("trending")}
                className={`px-4 py-2 rounded-md transition-all duration-200 border ${
                  selectedFilter === "trending"
                    ? "bg-blue-600 text-white border-transparent"
                    : "bg-gray-800 text-gray-300 border-gray-900"
                }`}
              >
                Trending
              </button>
              {allTags.map((tag) => (
                <button
                  key={tag}
                  onClick={() => setSelectedFilter(tag)}
                  className={`px-4 py-2 rounded-md transition-all duration-200 border ${
                    selectedFilter === tag
                      ? "bg-blue-600 text-white border-transparent"
                      : "bg-gray-800 text-gray-300 border-gray-900"
                  }`}
                >
                  {tag.charAt(0).toUpperCase() + tag.slice(1)}
                </button>
              ))}
            </div>
          </div>
        </div>

        {/* Games Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-2">
          {filteredGames.map((game, index) => (
            <GameCard key={`${game.game}-${index}`} {...game} />
          ))}
        </div>

        {filteredGames.length === 0 && (
          <div className="bg-slate-950 p-5 rounded-md border border-gray-900 text-center text-gray-400">
            No games found matching your criteria.
          </div>
        )}
      </div>
    </section>
  );
};

export default GamesPage;
