import { createFileRoute, Link } from "@tanstack/react-router";
import { useMemo, useState } from "react";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { FeaturesSection } from "@/components/HomeSections";
import { Search, Monitor, Smartphone, Gamepad2, LayoutGrid } from "lucide-react";
import minecraftHero from "@/assets/games/minecraft-hero-wide.jpg";
import rust from "@/assets/games/rust.jpg";
import fivem from "@/assets/games/fivem.jpg";
import ark from "@/assets/games/ark.jpg";
import { useCurrency } from "@/lib/currency";

export const Route = createFileRoute("/game-hosting")({
  head: () => ({
    meta: [
      { title: "Game Server Hosting — LumenHost" },
      { name: "description", content: "Premium game server hosting for Minecraft, Rust, FiveM, ARK, Terraria, Valheim, Palworld, CS2, Hytale and more." },
    ],
  }),
  component: GameHostingPage,
});

type Platform = "pc" | "mobile" | "console";

interface Game {
  name: string;
  image: string;
  startingUsd: number;
  platforms: Platform[];
  popular?: boolean;
  to: string;
  comingSoon?: boolean;
}

const games: Game[] = [
  { name: "Minecraft", image: minecraftHero, startingUsd: 20 / 83, platforms: ["pc", "mobile", "console"], popular: true, to: "/minecraft" },
  { name: "Rust", image: rust, startingUsd: 2, platforms: ["pc"], to: "/game-hosting", comingSoon: true },
  { name: "ARK: Survival Evolved", image: ark, startingUsd: 2, platforms: ["pc"], to: "/game-hosting", comingSoon: true },
  { name: "FiveM", image: fivem, startingUsd: 2, platforms: ["pc"], to: "/game-hosting", comingSoon: true },
];

const filters: { id: "all" | Platform; label: string; icon: React.ComponentType<{ className?: string }> }[] = [
  { id: "all", label: "View All", icon: LayoutGrid },
  { id: "pc", label: "PC", icon: Monitor },
  { id: "mobile", label: "Mobile", icon: Smartphone },
  { id: "console", label: "Console", icon: Gamepad2 },
];

function GameHostingPage() {
  const [filter, setFilter] = useState<"all" | Platform>("all");
  const [query, setQuery] = useState("");
  const { format } = useCurrency();

  const filtered = useMemo(() => {
    return games.filter((g) => {
      const matchesPlatform = filter === "all" || g.platforms.includes(filter);
      const matchesQuery = query.trim() === "" || g.name.toLowerCase().includes(query.toLowerCase());
      return matchesPlatform && matchesQuery;
    });
  }, [filter, query]);

  return (
    <div className="min-h-screen bg-background">
      <Navbar />

      {/* Hero */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,oklch(0.66_0.22_295/0.18),transparent_70%)]" />
        <div className="relative mx-auto max-w-5xl px-4 pb-10 pt-16 text-center md:pt-24">
          <h1 className="text-5xl font-extrabold uppercase tracking-tight text-foreground md:text-7xl">
            Game Server<br />Hosting
          </h1>
          <p className="mx-auto mt-8 max-w-2xl text-base text-muted-foreground md:text-lg">
            At <span className="font-semibold text-foreground">LumenHost</span>, we provide{" "}
            <span className="font-semibold text-foreground">premium game server hosting</span>{" "}
            for over 9 of the most popular games you can think of.
          </p>
        </div>
      </section>

      {/* Filter pills + search */}
      <section className="mx-auto max-w-5xl px-4 pb-6">
        <div className="mb-5 flex flex-wrap gap-2.5">
          {filters.map((f) => {
            const active = filter === f.id;
            return (
              <button
                key={f.id}
                onClick={() => setFilter(f.id)}
                className={`inline-flex items-center gap-2 rounded-2xl border px-5 py-3 text-sm font-medium transition ${
                  active
                    ? "border-transparent gradient-violet text-white shadow-lg shadow-primary/30"
                    : "border-white/10 bg-card/40 text-foreground/80 hover:border-white/20 hover:text-foreground"
                }`}
              >
                <f.icon className="h-4 w-4" />
                {f.label}
              </button>
            );
          })}
        </div>

        <div className="relative">
          <Search className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <input
            type="text"
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search games..."
            className="h-14 w-full rounded-2xl border border-white/10 bg-card/40 pl-12 pr-4 text-base text-foreground outline-none transition placeholder:text-muted-foreground focus:border-primary/50 focus:ring-2 focus:ring-primary/30"
          />
        </div>
      </section>

      {/* Game cards */}
      <section className="mx-auto max-w-5xl px-4 pb-20 pt-4">
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
          {filtered.map((g) => (
            <Link
              key={g.name}
              to={g.to}
              className="group relative block overflow-hidden rounded-2xl border border-white/10 bg-card/60 transition hover:-translate-y-1 hover:border-primary/40 hover:shadow-2xl hover:shadow-primary/20"
            >
              <div className="relative aspect-[16/10] w-full overflow-hidden">
                <img
                  src={g.image}
                  alt={g.name}
                  loading="lazy"
                  className="h-full w-full object-cover transition duration-500 group-hover:scale-105"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-background via-background/40 to-transparent" />
                {g.popular && !g.comingSoon && (
                  <span className="absolute left-3 top-3 rounded-full gradient-violet px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-white shadow-lg shadow-primary/30">
                    Most Popular
                  </span>
                )}
                {g.comingSoon && (
                  <span className="absolute left-3 top-3 rounded-full bg-yellow-500/90 px-3 py-1 text-[10px] font-bold uppercase tracking-wider text-black shadow-lg">
                    Coming Soon
                  </span>
                )}
                <div className="absolute inset-x-0 bottom-0 p-4">
                  <h3 className="text-xl font-bold text-foreground drop-shadow-md">{g.name}</h3>
                  <p className="mt-0.5 text-sm text-muted-foreground">
                    {g.comingSoon ? "Launching soon" : <>Starting at <span className="font-semibold text-success">{format(g.startingUsd)}</span></>}
                  </p>
                </div>
              </div>
              <div className="flex items-center gap-2 px-4 py-3 text-muted-foreground">
                {g.platforms.includes("pc") && <Monitor className="h-4 w-4" />}
                {g.platforms.includes("mobile") && <Smartphone className="h-4 w-4" />}
                {g.platforms.includes("console") && <Gamepad2 className="h-4 w-4" />}
              </div>
            </Link>
          ))}
        </div>

        {filtered.length === 0 && (
          <p className="py-12 text-center text-muted-foreground">No games match your filters.</p>
        )}
      </section>

      <FeaturesSection />
      <Footer />
    </div>
  );
}