import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { PageHeader } from "@/components/common/PageHeader";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { players } from "@/features/_mock/data";
import { usePagination, Pager } from "@/components/common/DataPager";

export const Route = createFileRoute("/_public/players/")({
  head: () => ({ meta: [{ title: "Players — Purple Zone" }, { name: "description", content: "Search and browse the CS2 community player directory." }] }),
  component: PlayersPage,
});

function PlayersPage() {
  const [q, setQ] = useState("");
  const filtered = players.filter((p) => p.name.toLowerCase().includes(q.toLowerCase()) || p.steamId.includes(q));
  const { paged, page, setPage, totalPages, total } = usePagination(filtered, 16);
  return (
    <div className="mx-auto max-w-[1400px] px-4 py-6">
      <PageHeader title="Players" description={`${players.length} known players in the community`} />
      <div className="relative mb-4 max-w-md">
        <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 name or Steam ID…" value={q} onChange={(e) => { setQ(e.target.value); setPage(1); }} className="pl-9" />
      </div>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
        {paged.map((p) => (
          <Link key={p.id} to="/players/$playerId" params={{ playerId: p.id }} className="group flex items-center gap-3 rounded-xl border border-border bg-card p-4 transition-all duration-200 hover:border-primary/40 hover:shadow-elevated">
            <Avatar className="h-12 w-12"><AvatarImage src={p.avatar} /><AvatarFallback>{p.name[0]}</AvatarFallback></Avatar>
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-1.5"><span className="truncate font-medium">{p.name}</span>{p.privileges[0] && <Badge className="h-4 px-1.5 text-[9px] gradient-primary text-primary-foreground">{p.privileges[0]}</Badge>}</div>
              <div className="text-xs text-muted-foreground">{p.rank} · {p.country} · {p.playtimeHours}h</div>
            </div>
            <div className="text-right"><div className="font-mono text-sm font-semibold text-secondary">{p.rating}</div><div className="text-[10px] uppercase text-muted-foreground">rating</div></div>
          </Link>
        ))}
      </div>
      <Pager page={page} totalPages={totalPages} onChange={setPage} total={total} />
    </div>
  );
}