import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { Search, Grid3x3, List, Filter } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { PageHeader } from "@/components/common/PageHeader";
import { ServerCard } from "@/features/servers/ServerCard";
import { servers } from "@/features/_mock/data";

export const Route = createFileRoute("/_public/servers/")({
  head: () => ({ meta: [{ title: "Servers — Purple Zone" }, { name: "description", content: "Browse live CS2 servers, filter by mode, region and map." }] }),
  component: ServersPage,
});

function ServersPage() {
  const [q, setQ] = useState("");
  const [view, setView] = useState<"grid" | "list">("grid");
  const filtered = servers.filter((s) => s.name.toLowerCase().includes(q.toLowerCase()) || s.map.includes(q.toLowerCase()));

  return (
    <div className="mx-auto max-w-[1400px] px-4 py-6">
      <PageHeader
        title="Server browser"
        description={`${servers.filter((s) => s.status === "online").length} of ${servers.length} servers online`}
        actions={
          <div className="flex items-center gap-1 rounded-md border border-border bg-surface p-0.5">
            <Button size="icon" variant={view === "grid" ? "default" : "ghost"} onClick={() => setView("grid")}><Grid3x3 className="h-4 w-4" /></Button>
            <Button size="icon" variant={view === "list" ? "default" : "ghost"} onClick={() => setView("list")}><List className="h-4 w-4" /></Button>
          </div>
        }
      />
      <div className="mb-4 grid gap-2 sm:grid-cols-[1fr_auto_auto_auto_auto]">
        <div className="relative">
          <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
          <Input placeholder="Search server or map…" value={q} onChange={(e) => setQ(e.target.value)} className="pl-9" />
        </div>
        <Select defaultValue="all"><SelectTrigger className="w-36"><SelectValue placeholder="Mode" /></SelectTrigger>
          <SelectContent><SelectItem value="all">All modes</SelectItem><SelectItem value="comp">Competitive</SelectItem><SelectItem value="dm">Deathmatch</SelectItem><SelectItem value="retake">Retakes</SelectItem></SelectContent></Select>
        <Select defaultValue="all"><SelectTrigger className="w-32"><SelectValue placeholder="Region" /></SelectTrigger>
          <SelectContent><SelectItem value="all">All regions</SelectItem><SelectItem value="eu">EU</SelectItem><SelectItem value="na">NA</SelectItem><SelectItem value="asia">Asia</SelectItem></SelectContent></Select>
        <Select defaultValue="players"><SelectTrigger className="w-36"><SelectValue /></SelectTrigger>
          <SelectContent><SelectItem value="players">Most players</SelectItem><SelectItem value="ping">Lowest ping</SelectItem><SelectItem value="name">Name</SelectItem></SelectContent></Select>
        <Button variant="outline"><Filter className="mr-1.5 h-4 w-4" /> More</Button>
      </div>

      {view === "grid" ? (
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {filtered.map((s) => <ServerCard key={s.id} server={s} />)}
        </div>
      ) : (
        <div className="overflow-hidden rounded-xl border border-border bg-card">
          <table className="w-full text-sm">
            <thead className="bg-surface text-left text-xs uppercase tracking-wider text-muted-foreground">
              <tr><th className="px-3 py-2.5">Server</th><th className="px-3 py-2.5">Map</th><th className="px-3 py-2.5">Region</th><th className="px-3 py-2.5">Players</th><th className="px-3 py-2.5">Ping</th><th className="px-3 py-2.5" /></tr>
            </thead>
            <tbody className="divide-y divide-border/40">
              {filtered.map((s) => (
                <tr key={s.id} className="hover:bg-accent/40"><td className="px-3 py-2.5 font-medium">{s.name}</td><td className="px-3 py-2.5">{s.map}</td><td className="px-3 py-2.5 text-muted-foreground">{s.region}</td><td className="px-3 py-2.5 font-mono">{s.players}/{s.maxPlayers}</td><td className="px-3 py-2.5 font-mono">{s.ping}ms</td><td className="px-3 py-2.5"><Button size="sm" variant="outline" asChild><Link to="/servers/$serverId" params={{ serverId: s.id }}>View</Link></Button></td></tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}